/* ============================================================
   Kwevhos Electrical and Project site styles
   Palette: navy + signal yellow, heavy uppercase display type
   ============================================================ */

:root{
  --navy:#12274b;
  --navy-deep:#0e2043;
  --navy-line:#26406d;
  --yellow:#f5b81c;
  --yellow-dark:#e0a70f;
  --ink:#101a2b;
  --body:#4a5568;
  --white:#fff;
  --paper:#fdfdfd;
  --wa-dark:#128c7e;       /* WhatsApp green, darkened so white text passes contrast */

  --shell:1180px;          /* content width */
  --pad:clamp(20px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 18px}

.page{padding:0}

/* ---------- display type ---------- */
.h2{
  font-family:"Archivo",sans-serif;
  font-weight:800;
  font-stretch:92%;
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.06;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 22px;
}
.h2--light{color:var(--white)}

.eyebrow{
  font-family:"Archivo",sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 12px;
}
.eyebrow--dark{color:var(--ink)}
.eyebrow--yellow{color:var(--yellow)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  font-family:"Archivo",sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn--sm{padding:11px 20px;font-size:10.5px}
.btn--block{width:100%}

.btn--yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn--yellow:hover{background:var(--yellow-dark);border-color:var(--yellow-dark)}

.btn--navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-deep)}

.btn--outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn--outline-light:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

.btn--outline-dark{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline-dark:hover{background:var(--ink);color:var(--white)}

.btn--whatsapp{background:var(--wa-dark);color:var(--white);border-color:var(--wa-dark)}
.btn--whatsapp:hover{background:#0f7568;border-color:#0f7568}
.btn--whatsapp i{font-size:15px}

/* ---------- brand lockup (white logo art, for dark backgrounds) ---------- */
.brand{
  display:inline-flex;
  align-items:center;
  flex:none;
}
.brand img{
  height:clamp(32px,3vw,44px);
  width:auto;
  display:block;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  isolation:isolate;
  min-height:min(88vh,760px);
  display:flex;
  flex-direction:column;
  padding:0 var(--pad) clamp(40px,6vw,70px);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(9,20,40,.9) 0%,rgba(9,20,40,.5) 45%,rgba(9,20,40,.28) 72%,rgba(9,20,40,.52) 100%),
    linear-gradient(to right,rgba(9,20,40,.58),rgba(9,20,40,.08));
}

/* nav */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 0;
}
.nav__links{
  display:flex;
  gap:clamp(18px,2.4vw,34px);
  margin-left:auto;
}
.nav__links a{
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.92);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav__links a:hover{border-color:var(--yellow)}

.nav__right{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav__phone{font-size:12.5px;color:rgba(255,255,255,.9);white-space:nowrap}
.nav__phone i{margin-right:7px;font-size:11px;color:var(--white)}
.nav__phone:hover{color:var(--yellow)}

.nav__toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;height:36px;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.5);
  color:var(--white);
  font-size:15px;
  cursor:pointer;
}

/* vertical social rail */
.hero__social{
  position:absolute;
  right:calc(var(--pad) / 2);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.hero__social a{
  writing-mode:vertical-rl;
  font-family:"Archivo",sans-serif;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.hero__social a:hover{color:var(--yellow)}

/* hero content */
.hero__inner{
  margin-top:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,340px);
  align-items:end;
  gap:clamp(28px,5vw,70px);
}
.hero__title{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-weight:800;
  font-stretch:88%;
  font-size:clamp(38px,6.6vw,80px);
  line-height:.98;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--white);
}
.hero__aside p{
  color:rgba(255,255,255,.88);
  font-size:13.5px;
  line-height:1.65;
  margin-bottom:22px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  background:var(--white);
  padding:clamp(52px,7vw,96px) var(--pad);
}
.about__grid{
  max-width:var(--shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.about__copy .h2{max-width:21ch}
.about__copy p{max-width:56ch;font-size:13.5px}
.about__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* concentric rings + bolt disc */
.about__mark{
  position:relative;
  aspect-ratio:1;
  width:min(100%,420px);
  margin-inline:auto;
  display:grid;
  place-items:center;
}
.ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(18,39,75,.16);
}
.ring--1{inset:0}
.ring--2{inset:7%}
.ring--3{inset:14%}
.ring--4{inset:21%;border-color:rgba(18,39,75,.24)}
.mark__disc{
  position:relative;
  width:46%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--navy);
  display:grid;
  place-items:center;
  color:var(--yellow);
  box-shadow:0 18px 44px rgba(18,39,75,.2);
}
.mark__disc{overflow:hidden}
.mark__disc img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   PROJECTS  (yellow band)
   ============================================================ */
.projects{
  background:var(--yellow);
  padding:clamp(50px,6.5vw,86px) var(--pad) clamp(46px,6vw,78px);
}
.projects__head{
  max-width:var(--shell);
  margin:0 auto clamp(30px,4vw,52px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(20px,4vw,60px);
  align-items:end;
}
.projects__head .h2{margin-bottom:0}
.projects__lede{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:rgba(16,26,43,.72);
}

.projects__gallery{
  max-width:var(--shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.2vw,30px);
  align-items:start;
}
.shot{margin:0;overflow:hidden;background:#0c1a33}
.shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.shot:hover img{transform:scale(1.04)}
.shot--a{aspect-ratio:3/4;margin-top:clamp(8px,2vw,26px)}
.shot--b{aspect-ratio:3/4.6;transform:translateY(18px)}
.shot--c{aspect-ratio:3/4;margin-top:clamp(8px,2vw,26px)}
.shot--c img{object-position:center 72%}

/* extra shots, revealed by View All Projects */
.shot--more{aspect-ratio:3/4;margin-top:clamp(8px,2vw,26px)}

.projects__cta .btn{gap:10px}
.projects__cta i{font-size:9px;transition:transform .25s ease}
.projects__cta .btn[aria-expanded="true"] i{transform:rotate(180deg)}

.projects__cta{
  display:flex;
  justify-content:center;
  margin-top:clamp(40px,5vw,72px);
}

/* ============================================================
   STORY
   ============================================================ */
.story{
  background:var(--white);
  padding:clamp(54px,7vw,100px) var(--pad);
}
.story__grid{
  max-width:var(--shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
}

/* second chapter: copy left, portrait photo right */
.story__grid--flip{
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  margin-top:clamp(46px,6vw,86px);
  padding-top:clamp(40px,5vw,72px);
  border-top:1px solid rgba(18,39,75,.12);
}

.story__media{
  position:relative;
  margin:0;
  align-self:stretch;
  min-height:clamp(320px,42vw,560px);
  overflow:hidden;
}
.story__media--portrait img{object-position:center 38%}
.story__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 45%;
}

/* caption tag sitting over the bottom of the photo */
.story__tag{
  position:absolute;
  left:0;bottom:0;
  max-width:min(88%,360px);
  padding:18px 22px;
  background:var(--yellow);
}
.story__tag-label{
  display:block;
  font-family:"Archivo",sans-serif;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(16,26,43,.62);
  margin-bottom:6px;
}
.story__tag-text{
  display:block;
  font-family:"Archivo",sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}

/* navy variant, anchored to the other corner */
.story__tag--right{left:auto;right:0}
.story__tag--navy{background:var(--navy)}
.story__tag--navy .story__tag-label{color:rgba(255,255,255,.6)}
.story__tag--navy .story__tag-text{color:var(--white)}

.story__copy .h2{max-width:18ch;margin-bottom:20px}
.story__copy p{font-size:13.5px;max-width:52ch}

/* numbered process list */
.story__steps{
  margin:28px 0 30px;
  padding:0;
  list-style:none;
  display:grid;
  gap:0;
  border-top:1px solid rgba(18,39,75,.14);
}
.story__steps li{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:13px 0;
  border-bottom:1px solid rgba(18,39,75,.14);
  font-size:12.5px;
  line-height:1.5;
  color:rgba(16,26,43,.8);
}
.story__steps span{
  flex:none;
  font-family:"Archivo",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--yellow-dark);
}
.story__actions{display:flex;flex-wrap:wrap;gap:12px}

/* TikTok line under the second chapter */
.story__social{
  display:inline-flex;
  align-items:center;
  margin-top:22px;
  font-family:"Archivo",sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid rgba(18,39,75,.25);
  padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.story__social i{margin-right:9px;font-size:13px;color:var(--yellow-dark)}
.story__social:hover{color:var(--yellow-dark);border-color:var(--yellow-dark)}

/* ============================================================
   SERVICES
   ============================================================ */
.services{
  background:var(--navy);
  padding:clamp(56px,7vw,100px) var(--pad);
}
.services__head{
  max-width:720px;
  margin:0 auto clamp(32px,4vw,56px);
  text-align:center;
}
.services__lede{
  margin:0 auto;
  max-width:60ch;
  font-size:13px;
  color:rgba(255,255,255,.72);
}

.services__grid{
  max-width:var(--shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,26px);
  align-items:start;
}
.svc{
  padding:16px 16px 24px;
  border:1px solid var(--navy-line);
  color:rgba(255,255,255,.74);
}
.svc__media{aspect-ratio:16/10;overflow:hidden;margin-bottom:20px}
.svc__media img{width:100%;height:100%;object-fit:cover}
.svc h3{
  margin:0 0 10px;
  font-family:"Archivo",sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--white);
}
.svc p{font-size:12.5px;line-height:1.7;margin-bottom:22px}

/* detail revealed by the Read More toggle */
.svc__more{
  margin-bottom:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16);
}
.svc__more ul{display:grid;gap:8px}
.svc__more li{
  position:relative;
  padding-left:16px;
  font-size:12px;
  line-height:1.55;
}
.svc__more li::before{
  content:"";
  position:absolute;left:0;top:7px;
  width:5px;height:5px;
  background:var(--yellow);
}

.svc__toggle{gap:10px}
.svc__toggle i{font-size:9px;transition:transform .25s ease}
.svc__toggle[aria-expanded="true"] i{transform:rotate(180deg)}

.svc--featured{
  background:var(--yellow);
  border-color:var(--yellow);
  color:rgba(16,26,43,.82);
  transform:translateY(-16px);
  padding-bottom:28px;
}
.svc--featured h3{color:var(--ink)}
.svc--featured .svc__more{border-top-color:rgba(16,26,43,.22)}
.svc--featured .svc__more li::before{background:var(--navy)}

/* full offering list */
.offers{
  max-width:var(--shell);
  margin:clamp(38px,4.5vw,60px) auto 0;
  padding-top:clamp(30px,3.5vw,44px);
  border-top:1px solid var(--navy-line);
}
.offers__title{
  margin:0 0 22px;
  font-family:"Archivo",sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--yellow);
}
.offers__list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px clamp(16px,2.4vw,30px);
}
.offers__list li{
  position:relative;
  padding-left:28px;
  font-size:12.5px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
.offers__list li i{
  position:absolute;
  left:0;top:3px;
  width:14px;
  font-size:12px;
  text-align:center;
  color:var(--yellow);
}

/* ============================================================
   CAREERS
   ============================================================ */
.careers{
  background:var(--white);
  padding:clamp(54px,7vw,96px) var(--pad);
}
.careers__grid{
  max-width:var(--shell);
  margin:0 auto clamp(34px,4.5vw,58px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(26px,4vw,54px);
  align-items:center;
}
.careers__copy p{font-size:13px;max-width:44ch;margin:0}
.careers__copy .eyebrow{max-width:none}
.careers__copy .h2{margin-bottom:14px}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,22px);
}
.stat{
  padding:26px 22px;
  border:1px solid rgba(18,39,75,.14);
}
.stat__num{
  display:block;
  font-family:"Archivo",sans-serif;
  font-size:clamp(30px,3.2vw,40px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--ink);
  margin-bottom:12px;
}
.stat__label{
  display:block;
  font-size:11.5px;
  line-height:1.55;
  color:rgba(16,26,43,.6);
}

.quotes{
  max-width:var(--shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,26px);
  align-items:start;
}
.quote{
  margin:0;
  padding:28px 26px 26px;
  background:var(--navy);
  color:rgba(255,255,255,.9);
}
.quote__mark{
  display:block;
  font-family:"Archivo",sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:.6;
  color:var(--yellow);
  margin-bottom:18px;
}
.quote p{font-size:13px;line-height:1.72;margin:0 0 22px}
.quote footer{
  font-family:"Archivo",sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:var(--white);
  padding:0 var(--pad) clamp(48px,6vw,84px);
}
.contact__card{
  max-width:var(--shell);
  margin:0 auto;
  background:var(--yellow);
  padding:clamp(30px,4.5vw,58px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,60px);
  align-items:center;
}
.contact__copy .h2{max-width:16ch;margin-bottom:16px}
.contact__copy p{font-size:13px;color:rgba(16,26,43,.78);max-width:44ch}

.contact__actions{display:flex;flex-wrap:wrap;gap:12px}
.ticks{margin:22px 0 26px;display:grid;gap:9px}
.ticks li{
  position:relative;
  padding-left:26px;
  font-size:12.5px;
  color:rgba(16,26,43,.85);
}
.ticks li i{
  position:absolute;left:0;top:3px;
  width:16px;height:16px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--navy);
  color:var(--yellow);
  font-size:8px;
  line-height:1;
}

/* form */
.form{
  background:var(--white);
  padding:clamp(22px,2.6vw,32px);
  display:grid;
  gap:16px;
  box-shadow:0 24px 60px rgba(18,39,75,.14);
}
.field{display:grid;gap:7px}
.field > span{
  font-family:"Archivo",sans-serif;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:11px 13px;
  font-family:inherit;
  font-size:12.5px;
  color:var(--ink);
  background:#f7f8fa;
  border:1px solid #e2e6ec;
  border-radius:0;
  outline:none;
  transition:border-color .2s ease,background .2s ease;
}
.field textarea{resize:vertical;min-height:92px}
.field input::placeholder,
.field textarea::placeholder{color:#9aa3b2}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--navy);background:#fff}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6b7688 50%),linear-gradient(135deg,#6b7688 50%,transparent 50%);background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input:invalid.is-flagged,
.field textarea:invalid.is-flagged{border-color:#c53030}

.form__note{
  margin:0;
  min-height:18px;
  font-size:12px;
  color:var(--navy);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--navy);
  color:rgba(255,255,255,.66);
  padding:clamp(46px,6vw,74px) var(--pad) 0;
}
.footer__top{
  max-width:var(--shell);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,2fr);
  gap:clamp(30px,5vw,70px);
  padding-bottom:clamp(34px,4vw,54px);
}
.brand--footer{margin-bottom:20px}
.brand--footer img{height:48px}
.footer__brand p{font-size:12.5px;max-width:30ch;line-height:1.65}

.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--navy-line);
  font-size:13px;
  color:rgba(255,255,255,.8);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.socials a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

.footer__locations{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,40px) clamp(18px,3vw,34px);
}
.loc h4{
  margin:0 0 10px;
  font-family:"Archivo",sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--white);
}
.loc p{margin:0 0 8px;font-size:12px;line-height:1.6}
.loc p:last-child{margin-bottom:0}
.loc__lines{display:grid;gap:5px;justify-items:start}
.loc__lines i{width:14px;margin-right:8px;font-size:10.5px;text-align:center;color:var(--white)}
.loc__lines a:hover{color:var(--yellow)}

.footer__bar{
  max-width:var(--shell);
  margin:0 auto;
  padding:20px 0 26px;
  border-top:1px solid var(--navy-line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
}
.footer__bar p{margin:0;font-size:11.5px}
.footer__legal{display:flex;gap:26px}
.footer__legal a:hover{color:var(--yellow)}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav__links{
    position:absolute;
    top:100%;left:var(--pad);right:var(--pad);
    z-index:5;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:0 22px;
    max-height:0;
    overflow:hidden;
    background:var(--navy);
    transition:max-height .3s ease,padding .3s ease;
  }
  .nav{position:relative}
  .nav__links.is-open{max-height:280px;padding:14px 22px}
  .nav__links li{border-bottom:1px solid var(--navy-line)}
  .nav__links li:last-child{border-bottom:0}
  .nav__links a{display:block;padding:13px 0;border:0}
  .nav__toggle{display:flex}
  .nav__right{gap:12px}
  .nav__phone{display:none}
  .hero__social{display:none}

  .hero__inner{grid-template-columns:1fr;align-items:start}
  .about__grid,
  .story__grid,
  .careers__grid,
  .contact__card,
  .projects__head,
  .footer__top{grid-template-columns:1fr}
  .about__mark{width:min(72%,300px)}
  .story__media{min-height:0;aspect-ratio:4/3}
  .story__media--portrait{aspect-ratio:4/5}
  .story__copy .h2{max-width:none}
  .services__grid,
  .quotes{grid-template-columns:1fr 1fr}
  .svc--featured{transform:none}
  .offers__list{grid-template-columns:repeat(2,1fr)}
  .footer__locations{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:560px){
  .nav__right .btn{display:none}
  .brand img{height:30px}
}

@media (max-width:700px){
  .projects__gallery{grid-template-columns:1fr}
  .shot--a,.shot--b,.shot--c{aspect-ratio:4/3;margin-top:0;transform:none}
  .stats,
  .services__grid,
  .quotes,
  .offers__list{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer__locations{grid-template-columns:1fr}
  .footer__bar{flex-direction:column}
  .hero{min-height:auto;padding-bottom:44px}
  .hero__inner{margin-top:64px}
}