/* ===== Elite Contracting Group — clone of ECG Website Figma design ===== */
:root{
  --blue:#32628A;
  --blue-dark:#2b567a;
  --slate:#384246;
  --dark:#241F1C;
  --light:#F4F4F4;
  --white:#ffffff;
  --body:#2b2b2b;
  --muted:#5a5a5a;
  --line:#e4e4e4;
  /* Design container measures 1237px of content inside a 1440px frame,
     i.e. ~100px side margins. 1320 - 2x40 padding lands on 1240. */
  --maxw:1320px;
  /* Header height. The nav drawer hangs off the bottom of the bar, so both
     read this rather than repeating the number. */
  --hdr:137px;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'PT Serif',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--serif);
  color:var(--body);
  /* Design body copy is ~14.5px on a 24px leading. */
  font-size:15px;
  line-height:1.62;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--sans);color:var(--slate);margin:0;font-weight:600;line-height:1.15;}
p{margin:0 0 1.1em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:16px 26px;
  background:var(--dark);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background .2s,opacity .2s;
  line-height:1;
}
.btn:hover{background:#3a322d;}
.btn-light{background:#fff;color:var(--dark);}
.btn-light:hover{background:#eee;}
.btn-row{display:flex;gap:18px;flex-wrap:wrap;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1400px;margin:0 auto;padding:0 34px;
  height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:20px;
}
/* The logo is a flex item in a row that also carries the nav and the CTA. Left
   to itself flexbox shrinks the anchor, and the global img{max-width:100%}
   then clamps the mark's width while its height stays pinned — which is what
   squashed it, worst at phone widths. Pinning flex-basis to the mark's own
   aspect ratio and lifting the max-width cap keeps 638:224 at every size. */
.logo{flex:0 0 auto;line-height:0;}
.logo img{height:96px;width:auto;max-width:none;aspect-ratio:638/224;}
.main-nav{display:flex;align-items:center;gap:26px;}
.main-nav a{
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--slate);
  white-space:nowrap;
  padding:6px 0;
  position:relative;
}
.main-nav a:hover{color:var(--blue);}
.nav-item{position:relative;}
.nav-item .caret{font-size:9px;margin-left:5px;vertical-align:middle;}
.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.08);
  min-width:210px;padding:8px 0;display:none;
}
.nav-item:hover .dropdown{display:block;}
.dropdown a{display:block;padding:10px 20px;font-size:12.5px;letter-spacing:.4px;}
.dropdown a:hover{background:var(--light);}
.header-cta{flex-shrink:0;}
/* Drawer-only twin of .header-cta — see the 560px block at the end of the file. */
.nav-cta{display:none;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--slate);margin:5px 0;transition:.3s;}

/* ---------- Hero (image with centered heading) ---------- */
.hero{
  position:relative;
  min-height:520px;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
  color:#fff;text-align:center;
}
/* The home hero is taller than the inner-page heroes and runs the client's reel
   behind it. */
.hero.home{min-height:560px;overflow:hidden;}
video.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* Vimeo's background player is a fixed 16:9 iframe, so object-fit cannot reach
   it. Scaling it to whichever of the two axes overflows reproduces "cover".
   pointer-events:none keeps the hero click-through, as the <video> is. */
iframe.hero-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;
  border:0;z-index:0;pointer-events:none;
}
/* Anyone who has asked the OS for less motion gets the poster frame instead. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none;}
}
/* hero-dark.jpg is already a dark exposure; the design puts no real scrim over
   it, so this stays a whisper — just enough to even out the brighter framing. */
.hero-overlay{position:absolute;inset:0;background:rgba(15,20,25,.10);}
.hero h1{
  position:relative;color:#fff;font-family:var(--sans);
  font-size:31px;font-weight:600;letter-spacing:2.7px;text-transform:uppercase;
}
/* .hero h1 outranks .sr-only, so a visually hidden hero headline — the home
   page's — would lose the absolute positioning its clip rect depends on. */
.hero h1.sr-only{position:absolute;}
.hero .video-badge{
  position:absolute;top:34px;right:48px;color:#fff;font-family:var(--sans);
  font-size:26px;font-weight:600;letter-spacing:3px;z-index:2;
}

/* ---------- Blue band ---------- */
.band{background:var(--blue);color:#fff;text-align:center;padding:66px 20px;display:flex;align-items:center;}
.band > .container{width:100%;}
/* Areas and FAQ carry a taller band in the design — a fixed 366px with the
   content centred, so a two-line and a three-line heading give the same block. */
.band.tall{min-height:366px;padding:40px 20px;}
/* text-wrap:balance evens the line lengths so a stray word never sits alone on
   the last line, whatever the viewport (Lauren, on the Areas banner: "the words
   are on random lines, 'and' is on its own line"). */
.band h2{color:#fff;font-size:34px;font-weight:600;line-height:1.235;margin:0 auto 6px;max-width:1160px;text-wrap:balance;}
.band p{color:rgba(255,255,255,.92);max-width:760px;margin:0 auto 26px;}
.band .btn-row{justify-content:center;margin-top:26px;}

/* ---------- Sections ---------- */
section{position:relative;}
.section{padding:86px 0;}
.section.gray{background:var(--light);}
.section-title{font-size:34px;font-weight:600;color:var(--slate);margin-bottom:40px;}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:13px;color:var(--slate);font-weight:600;}

/* two column (image + text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split .col-img img{width:100%;height:100%;object-fit:cover;max-height:520px;}
.split h2{font-size:34px;margin-bottom:22px;line-height:1.15;}
/* Services and Areas rows only: the design puts these on an 82px gutter, crops
   the photo 3:2 so every row is the same height, holds the copy to a ~505px
   measure, and breaks each heading onto two lines at 400px. The About page's
   splits are their own thing and keep the rules above. */
/* About's two splits: a narrower, portrait-cropped photo against a wider column */
.split.abt{grid-template-columns:461fr 705fr;gap:74px;align-items:start;}
.split.abt .col-img img{aspect-ratio:8/9;height:auto;max-height:none;display:block;}
.split.abt.tall-img .col-img img{aspect-ratio:24/25;}
.split.row{gap:82px;}
.split.row .col-img img{aspect-ratio:3/2;height:auto;max-height:none;display:block;}
.split.row .col-text{max-width:505px;}
.split.row h2{max-width:400px;}
.split p{color:var(--body);}

/* about intro on home */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.about-grid .col-img img{width:100%;object-fit:cover;}

/* Home "About Elite Contracting Group": in the design the photo bleeds off the
   left edge of the page and butts straight up against the blue band, with the
   copy set in a narrow column on the right. Column ratios are the design's
   1440px measurements expressed as percentages so they hold at any width. */
.about-home{padding-top:0;}
.about-bleed{
  display:grid;
  /* 810px image / 1440px frame, measured against the padded content box. */
  grid-template-columns:61% 1fr;
  gap:5.3%;
  align-items:start;
  padding-right:7.6%;
}
.about-bleed .col-img img{width:100%;aspect-ratio:813/516;object-fit:cover;}
.about-bleed .col-text{padding-top:72px;}

/* services 4-up */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px;}
.svc-card{text-align:center;}
.svc-card .thumb{aspect-ratio:5/6;overflow:hidden;margin-bottom:24px;}
.svc-card .thumb img{width:100%;height:100%;object-fit:cover;}
.svc-card .label{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;
  font-size:13px;font-weight:600;color:var(--slate);line-height:1.5;
  max-width:160px;margin:0 auto;
}
/* Carousel arrows — phone only, see the 560px block at the end of this file. */
.svc-nav{display:none;justify-content:flex-end;gap:22px;margin-top:20px;padding:0 4px;}
.svc-nav button{
  background:none;border:none;cursor:pointer;padding:6px 4px;line-height:1;
  font-size:26px;color:var(--slate);
}
.svc-nav button:hover{color:var(--blue);}

/* nationwide map */
.map-wrap{text-align:center;margin-top:26px;}

/* One SVG carries the artwork, the states, the pins and the labels, so they
   share a coordinate space and cannot drift apart. The viewBox frames the
   1040x600 map with margin for the labels; main.js drops that margin on
   phones, where the labels are hidden. */
.reach-map{position:relative;max-width:1120px;margin:0 auto;}
.reach-svg{display:block;width:100%;height:auto;}
.reach-svg .state{color:var(--blue);cursor:pointer;}
.reach-svg .state path{
  fill:currentColor;stroke:currentColor;stroke-width:1;stroke-linejoin:round;
  transition:color .18s ease;
}
.reach-svg .state:hover,.reach-svg .state:focus-visible{color:#4d8ac0;}
.reach-svg .state:focus{outline:none;}
.reach-svg .state:focus-visible path{stroke:var(--dark);stroke-width:3;}

/* Flight paths out of the Centennial hub. They cross both the grey artwork and
   the blue states, so the navy is dark enough to read against either. */
.reach-arcs{pointer-events:none;}
.reach-arcs .flight{
  fill:none;stroke:#1c3a53;stroke-width:2;opacity:.55;
  stroke-dasharray:7 8;stroke-linecap:round;
}
.reach-arcs .plane path{fill:#1c3a53;opacity:.8;}

/* Leaders and labels, set the way the reference art sets them. */
.reach-labels{pointer-events:none;}
.reach-labels .leader{fill:none;stroke:var(--slate);stroke-width:1.4;opacity:.55;}
.reach-labels text{
  font-family:var(--sans);font-size:19px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;
}
.reach-labels .nm{fill:var(--dark);}
.reach-labels .sub{fill:var(--slate);font-size:16px;font-weight:500;}
/* The two offices lead in brand blue, the way the reference art sets them. */
.reach-labels .office .nm{fill:var(--blue);}

/* Offices and job sites. Decorative — the state under the pin owns the
   tooltip, so the pins must never take the pointer. Never style these with a
   CSS transform: the position lives in each pin's transform attribute, which
   a CSS transform would replace. */
.reach-pins{pointer-events:none;}
.reach-pins path{fill:#22405a;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;}
.reach-pins circle{fill:#fff;}
.reach-pins .office path{fill:var(--dark);}

.reach-tip{
  position:absolute;z-index:2;transform:translate(-50%,-100%);margin-top:-13px;
  pointer-events:none;text-align:left;background:var(--dark);color:#fff;
  padding:11px 15px;max-width:230px;
  font-family:var(--sans);font-size:12.5px;line-height:1.55;
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s;
}
.reach-tip.show{opacity:1;visibility:visible;}
.reach-tip strong{
  display:block;text-transform:uppercase;letter-spacing:1.4px;
  font-size:12px;font-weight:600;margin-bottom:3px;
}
.reach-tip span{color:#c9ced2;}
.reach-tip::after{
  content:'';position:absolute;top:100%;left:var(--arrow,50%);
  transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--dark);
}

/* The four marks the reference art runs under the map. */
.reach-marks{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  margin:6px 0 0;padding:0;
}
.reach-marks li{
  display:flex;align-items:center;gap:16px;
  padding:4px 26px;border-left:1px solid var(--line);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:1.3px;
  font-size:12.5px;font-weight:600;line-height:1.55;color:var(--slate);text-align:left;
}
.reach-marks li:first-child{border-left:0;}
.reach-marks svg{width:38px;height:38px;flex:none;color:var(--dark);}

/* Standfirst under the section heading, keyed to the heading's left edge. */
.reach-lede{
  max-width:560px;margin:-4px 0 0;
  font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--slate);
}
.reach-lede strong{color:var(--blue);font-weight:700;}
.reach-rule{width:74px;height:3px;background:var(--blue);margin:22px 0 0;}
.reach-note{
  margin:26px auto 0;text-align:center;
  font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--muted);
}
.reach-note a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}

/* about — leadership + team grid (kept in CSS, not inline, so the
   responsive rules below can actually override them) */
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:64px;}
.leader{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start;}
.leader img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
/* the long @eliteconstruct.us addresses have no break opportunity and push the
   column past the viewport on narrow desktops */
.leader .bio{font-size:15px;line-height:1.7;overflow-wrap:anywhere;}
/* the design's team grid is 1146px wide and centred: four 251px squares on a 47px gutter */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:47px;max-width:1146px;margin:0 auto;}
.team-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.team-card img{width:100%;}
.team-card .meta{margin-top:16px;font-size:15px;line-height:1.5;}
.team-card .meta span{color:var(--muted);}

/* testimonials */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:12px;}
/* The testimonials page runs three rows of these; quotes vary a lot in length,
   so they hang from the top of their row and get a deeper row gutter. */
.tst-page{align-items:start;row-gap:60px;}
.tst{text-align:center;}
.tst .stars{color:var(--blue);letter-spacing:3px;font-size:18px;margin-bottom:20px;}
.tst p{font-style:normal;color:var(--body);font-size:15.5px;line-height:1.7;}
.tst .who{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:1.4px;
  font-size:13px;font-weight:600;color:var(--slate);margin-top:18px;line-height:1.5;
}

/* three feature columns (mission/vision/values) */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:70px;text-align:center;}
.tri h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:14px;font-weight:600;color:var(--slate);margin-bottom:14px;}
.tri .rule{width:34px;height:2px;background:var(--slate);margin:0 auto 20px;}
.tri p{font-size:15px;color:var(--body);}
/* icon variant (home page) — columns top-aligned, copy centred in each column */
.tri .icon{width:34px;height:34px;margin:0 auto 18px;color:var(--dark);}
.tri .icon svg{width:100%;height:100%;display:block;}
.tri-icons{align-items:start;}
.tri-icons p{max-width:300px;margin-left:auto;margin-right:auto;}

/* contact section */
.contact{background:var(--blue);color:#fff;padding:80px 0;}
/* measured off the 1440 frame: a 325px info column, a 99px gutter, then the
   form's 421px field stack + 9px + a 386px textarea */
.contact-grid{display:grid;grid-template-columns:325fr 816fr;gap:99px;}
.contact h2{color:#fff;font-size:36px;margin-bottom:26px;}
.contact .lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.6px;font-size:13px;font-weight:600;margin:22px 0 6px;}
.contact .info{color:rgba(255,255,255,.92);font-size:15px;line-height:1.6;}
.contact a{color:#fff;}
.form-grid{display:grid;grid-template-columns:421fr 386fr;gap:9px;}
.contact input,.contact textarea{
  width:100%;background:rgba(255,255,255,.165);border:none;color:#fff;
  padding:18px;font-family:var(--sans);font-size:13px;letter-spacing:1px;text-transform:uppercase;
}
.contact input::placeholder,.contact textarea::placeholder{color:rgba(255,255,255,.85);}
.contact textarea{height:100%;min-height:150px;resize:vertical;}
.form-col-left{display:flex;flex-direction:column;gap:10px;}
/* the design puts Send on the right, level with the consent copy, not below it */
.consent-row{display:grid;grid-template-columns:minmax(0,480px) 1fr;column-gap:30px;align-items:start;}
.consent-row .btn{justify-self:end;margin-top:6px;}
.consent{font-family:var(--serif);font-size:12.5px;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.9);display:flex;gap:10px;margin-top:10px;line-height:1.5;}
.consent input{width:18px;height:18px;flex-shrink:0;background:rgba(255,255,255,.2);}
/* Sits under the form: consent label on the left, policy links on the right. */
.consent-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:18px;}
.consent-label{font-family:var(--serif);font-size:13px;color:rgba(255,255,255,.9);}
.form-links{text-align:right;}
.form-links a{font-family:var(--sans);font-size:12px;letter-spacing:.5px;text-decoration:underline;margin-left:18px;}
/* The design labels its fields with placeholders alone. Placeholders are not
   accessible names and they vanish the moment you type, so every control also
   carries a real label parked off-screen for screen readers. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* The select has to sit in the same stack as the inputs, so it inherits their
   fill and type and drops the platform chrome. */
.contact select{
  width:100%;background:rgba(255,255,255,.165);border:none;color:#fff;border-radius:0;
  padding:18px;font-family:var(--sans);font-size:13px;letter-spacing:1px;text-transform:uppercase;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:12px;
}
.contact select option{color:var(--slate);background:#fff;}
/* Focus has to stay visible against the blue: the fields have no border to
   thicken, so the ring is drawn outside them. */
.contact input:focus-visible,.contact select:focus-visible,.contact textarea:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.contact .consent label{cursor:pointer;}
/* Submission feedback. Empty until the handler says something, so it takes no
   vertical space in the resting state and cannot be mistaken for a field. */
.form-status{font-family:var(--serif);font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92);margin-top:14px;}
.contact-form.has-error .form-status{color:#ffd9d0;font-weight:700;}
/* Embed mode: HighLevel's iframe reports its own height back through their
   form_embed.js, so this only has to reserve room and stop it overflowing. */
.contact-form-embed iframe{width:100%;min-height:829px;border:none;display:block;}

/* ---------- FAQ ---------- */
/* The design keeps the whole accordion in a 1034px column, left-aligned in the
   container rather than running the full 1240. */
.faq-list{max-width:1034px;}
.faq-cat{font-size:34px;font-weight:600;color:var(--slate);margin:64px 0 37px;}
.faq-cat:first-of-type{margin-top:117px;}
.faq-item{background:var(--light);margin-bottom:13px;border:1px solid #ededed;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:16px 30px 16px 54px;font-family:var(--sans);text-transform:uppercase;letter-spacing:2.1px;
  font-size:15px;font-weight:500;color:var(--slate);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q .chev{flex:none;width:13px;height:8px;transition:transform .25s;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{display:none;padding:0 54px 22px;font-family:var(--serif);color:var(--body);font-size:15.5px;}
.faq-item.open .faq-a{display:block;}

/* case studies (gallery) */
.case{padding:70px 0;}
.case.gray{background:var(--light);}
.case .container > h2:only-child{padding:60px 0;}
/* Copy, photos and the Read More button are three cells rather than two, so
   the button can sit under the copy on desktop and under the photos on phones
   (Lauren: "can we move the read more button below the images"). */
.case-grid{
  display:grid;grid-template-columns:1fr 2.2fr;
  grid-template-areas:"copy shots" "cta shots";
  grid-template-rows:auto auto;
  column-gap:56px;align-content:center;
}
.case-copy{grid-area:copy;align-self:end;}
.case-shots{grid-area:shots;align-self:center;}
.case-cta{grid-area:cta;align-self:start;margin-top:28px;}
.nowrap{white-space:nowrap;}
.case h2{font-size:34px;margin-bottom:22px;}
.case .ph{background:#d9d9d9;width:100%;aspect-ratio:16/10;}
.case ul{padding-left:20px;}
/* two square project shots sitting beside the case-study copy */
.case-shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.case-shots img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.areas-line{max-width:1140px;margin-bottom:.4em;}

/* case study detail page */
.case-hero img{width:100%;height:clamp(280px,32vw,460px);object-fit:cover;display:block;}
.case-row{display:grid;grid-template-columns:230px 1fr;gap:40px;margin-bottom:44px;align-items:start;}
.case-row h2{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;
  font-size:13px;font-weight:600;color:var(--slate);margin:6px 0 0;line-height:1.6;
}
.case-row p:last-child{margin-bottom:0;}
/* The design's grid is a hair wider than the text column and almost gapless:
   four 311px cells on a 5px gutter, running 91..1349 in the 1440 frame. */
.case-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:56px -9px 0;}
.case-gallery img{width:100%;aspect-ratio:311/293;object-fit:cover;display:block;}

/* legal pages (privacy policy, terms) */
.legal{max-width:900px;}
.legal h3{font-size:19px;margin:34px 0 10px;line-height:1.35;}
.legal h3:first-child{margin-top:0;}
.legal p{color:var(--body);}
.legal a{text-decoration:underline;text-underline-offset:2px;}

/* areas list */
.areas-list{margin-top:10px;}
.areas-list li{margin-bottom:0;}
.areas-list strong{font-family:var(--sans);}

/* ---------- Footer ---------- */
.site-footer{background:var(--light);padding:76px 0 60px;}
.footer-logo img{height:91px;width:auto;max-width:none;aspect-ratio:638/224;margin-bottom:40px;}
/* column widths measured off the 1440 frame: 389 / 202 / 263 / 284 on a 34px gutter */
.footer-cols{display:grid;grid-template-columns:389fr 202fr 263fr 284fr;gap:34px;}
.footer-cols h5{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px;font-size:14px;font-weight:600;color:var(--slate);margin-bottom:18px;}
.footer-cols p,.footer-cols li{font-size:15px;color:var(--body);line-height:1.6;}
.footer-cols ul{list-style:none;margin:0;padding:0;}
.footer-cols ul li{margin-bottom:9px;}
.footer-cols ul a{text-decoration:underline;text-underline-offset:2px;}
.footer-cols ul a:hover{color:var(--blue);}
.footer-licenses .blurb{margin-top:20px;}
.social-icons{display:flex;gap:14px;}
.social-icons img{width:34px;height:34px;}

/* ---------- Responsive ---------- */
@media (max-width:1340px){
  :root{--hdr:110px;}
  .main-nav{gap:18px;}
  .main-nav a{font-size:12.5px;}
  .logo img{height:70px;}
}

/* Measured, not guessed: the full bar needs ~1121px (34+34 padding, a 199px
   logo, a 647px seven-item nav, two 20px gaps and the 167px CTA) and the logo
   is no longer allowed to squash to absorb the difference. So the drawer takes
   over below 1160 and the compact type starts at 1340, where the 96px logo and
   26px nav gutter stop fitting. Nav only - the layout breakpoints stay at 920
   and 560, where the design put them. */
@media (max-width:1160px){
  .menu-toggle{display:block;}
  .main-nav{
    position:fixed;top:var(--hdr);right:0;width:280px;height:calc(100vh - var(--hdr));
    background:#fff;flex-direction:column;align-items:flex-start;gap:0;
    padding:20px 24px;border-left:1px solid var(--line);transform:translateX(100%);
    transition:transform .3s;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{width:100%;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;}
  .dropdown{position:static;transform:none;display:block;border:none;box-shadow:none;padding:0 0 0 14px;min-width:0;}
  .nav-item{width:100%;}
}
@media (max-width:920px){
  :root{--hdr:88px;}
  .logo img{height:56px;}
  .split,.split.row,.split.abt,.about-grid,.contact-grid,.case-grid{grid-template-columns:1fr;gap:34px;}
  /* copy, then the photos, then Read More */
  .case-grid{grid-template-areas:"copy" "shots" "cta";grid-template-rows:auto auto auto;}
  .case-cta{margin-top:0;justify-content:center;}
  .split.row .col-text,.split.row h2{max-width:none;}
  .split.abt .col-img img,.split.abt.tall-img .col-img img{aspect-ratio:16/10;}
  .about-bleed{grid-template-columns:1fr;gap:34px;padding-right:0;}
  .about-bleed .col-img img{aspect-ratio:16/10;}
  .about-bleed .col-text{padding:0 40px;}
  .svc-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .tst-grid,.tri{grid-template-columns:1fr;gap:34px;}
  .form-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr 1fr;gap:30px;}
  .hero h1{font-size:24px;letter-spacing:2px;}
  .section-title,.split h2,.contact h2,.case h2{font-size:26px;}
  .band,.band.tall{min-height:0;padding:66px 20px;}
  .band h2{font-size:26px;}
  .footer-logo img{height:70px;}
  .leaders{grid-template-columns:1fr;gap:34px;margin-bottom:44px;}
  .leader{grid-template-columns:170px 1fr;gap:20px;}
  .team-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .case-row{grid-template-columns:1fr;gap:12px;}
  .case-gallery{grid-template-columns:1fr 1fr;}

  /* Below this width the leader labels and flight paths are unreadable, so the
     map shows on its own. main.js retargets the viewBox to match, dropping the
     margin they were drawn in. */
  .reach-labels,.reach-arcs{display:none;}
  .reach-lede,.reach-rule{margin-left:auto;margin-right:auto;}
  .reach-lede{text-align:center;}
  .reach-marks{grid-template-columns:1fr 1fr;gap:22px 0;}
  .reach-marks li{padding:0 18px;}
  .reach-marks li:nth-child(odd){border-left:0;}
}
/* Phones. Measured against the 390px-wide ECG-Homepage-Mobile frame, which
   sets bigger body copy, a much smaller blue-band heading, centred headings,
   the About photo below its copy, and a one-card services carousel. */
@media (max-width:560px){
  .container{padding:0 22px;}
  body{font-size:18px;line-height:1.75;}
  .footer-cols{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  /* Desktop's 520/560px wells fill a phone screen on their own, so nothing
     below them lands above the fold. Lauren asked for that on the home hero
     and then "on all of these hero image wells on mobile". These heights leave
     the blue band, or whatever follows, visible under every banner. */
  .hero{min-height:330px;}
  .hero.home{min-height:370px;}
  .hero .video-badge{right:20px;font-size:20px;}

  /* Logo + CTA + burger will not fit a 320px bar without squashing the mark,
     so the CTA moves into the drawer and the gutters tighten. */
  .header-inner{padding:0 20px;gap:14px;}
  .header-cta{display:none;}
  .main-nav .nav-cta{
    display:inline-block;width:auto;margin:18px 0 0;color:#fff;
    border-bottom:none;text-align:center;
  }
  .main-nav .nav-cta:hover{color:#fff;}
  .leader{grid-template-columns:1fr;gap:14px;}
  .leader img{max-width:220px;}

  .section-title,.split h2,.contact h2,.case h2{font-size:24px;text-align:center;}
  .faq-cat{font-size:22px;margin:40px 0 18px;}
  .reach-marks{grid-template-columns:1fr;gap:18px 0;}
  .reach-marks li{border-left:0;justify-content:center;text-align:left;}
  /* .band pads horizontally as well as the container inside it; on a 390px
     screen that double gutter forces an extra line break. */
  .band{padding:56px 0;}
  .band h2{font-size:18px;}
  .band .btn-row{gap:12px;}

  /* About: copy first, photo underneath and inset to the page gutter. */
  .about-bleed{gap:26px;}
  .about-bleed .col-text{order:1;padding:0 22px;text-align:left;}
  .about-bleed .col-text h2{text-align:center;}
  .about-bleed .col-text .btn-row{justify-content:center;}
  .about-bleed .col-img{order:2;padding:0 22px;}

  /* Blocks that set their own px size don't inherit the larger mobile body. */
  .tst p{font-size:18px;line-height:1.7;}
  .tri p,.contact .info,.footer-cols p,.footer-cols li,.faq-a{font-size:17px;}

  /* Contact block is centred on mobile in the design. */
  .contact-info{text-align:center;}
  .contact h2{text-align:center;}
  /* the mobile design puts Send back under the consent copy, not beside it */
  .consent-row{grid-template-columns:1fr;row-gap:18px;}
  .consent-row .btn{justify-self:start;}
  .contact input,.contact textarea{font-size:17px;}
  .contact textarea{min-height:110px;}
  /* Label and policy links can't share a row at 390px without ugly wrapping. */
  .consent-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .form-links{text-align:left;}
  .form-links a{margin:0 20px 0 0;}

  /* Services carousel: one card per screen, snapped, arrows below. */
  .svc-grid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;
    gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .svc-grid::-webkit-scrollbar{display:none;}
  .svc-card{scroll-snap-align:center;padding:0 2px;}
  .svc-card .label{max-width:230px;}
  .svc-nav{display:flex;}
}