/* ==================================================================
   CEG — mobile / small-screen layer
   Loaded last on every page. Refines the shared system and the
   page-level blocks below 900px. Desktop is untouched.
   ================================================================== */

/* stat bands (index, projects) — was an inline 4-up grid */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-num { font-size: 58px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -2px; }
.stat-lbl { color: var(--on-dark-muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 12px; }

/* grid/flex children must be allowed to shrink, or long strings blow out the row */
.footer-grid > div, .stat-row > div, .split > *, .pbody > *, .contact-grid > *,
.info-card > *, .blist li > *, .job > *, .why-item > *, .map-card > * { min-width: 0; }
.footer-link, .info-card a, .map-card { overflow-wrap: anywhere; }

/* mobile menu footer: phone + CTA (the desktop nav phone is hidden on small screens) */
.mm-foot { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mobile-menu .mm-foot a { font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0; border: none; }
.mobile-menu .mm-call { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.mm-call .ic-circle { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--sage); display: inline-flex; align-items: center; justify-content: center; }
.mobile-menu .mm-foot a.mm-cta { padding: 15px 26px; font-size: 15px; }
.mobile-menu .mm-foot a.mm-call { min-height: 44px; }

/* no page should ever scroll sideways */
html { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
input, textarea, select { max-width: 100%; }

@media (max-width: 900px) {
  /* off-screen X reveals are what push the page sideways on phones */
  .reveal-left:not(.in), .reveal-right:not(.in) { transform: translateY(28px); }
  .nav-spacer { height: 92px; }
  .nav-cta { margin-left: auto; }
  .subhero { padding: 148px 0 58px; }
  .subhero-mark { height: 200px; top: 96px; right: -40px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .stat-num { font-size: 46px; letter-spacing: -1.5px; }
}

/* ---------------- ≤ 680px : phones ---------------- */
@media (max-width: 680px) {
  .wrap, .wrap-wide { padding: 0 20px; }
  .band { padding: 60px 0; }
  .band-tight { padding: 48px 0; }
  body { overflow-wrap: break-word; }

  /* nav */
  .nav { padding: 14px 0; }
  .nav.scrolled { padding: 8px 0; }
  .nav-inner { padding: 0 16px; }
  .nav-pill { padding: 10px 10px 10px 18px; gap: 10px; }
  .nav-logo img { height: 32px; }
  .nav-burger { width: 46px; height: 46px; }
  .nav-cta .btn { padding: 13px 20px; font-size: 14px; }
  .mobile-menu { padding: 24px 22px 32px; overflow-y: auto; }
  .mobile-menu a { font-size: 27px; padding: 13px 0; }
  .mm-close { width: 46px; height: 46px; margin-bottom: 12px; }

  /* type + buttons */
  .body-lg { font-size: 18px; }
  .body-md { font-size: 16px; }
  .btn { padding: 15px 24px; font-size: 15px; }
  .btn .ic { width: 30px; height: 30px; margin: -6px -12px -6px 2px; }
  .section-head { max-width: none; }

  /* hero (home) */
  .hero { min-height: 84vh; }
  .hero-inner { padding: 126px 0 40px; }
  .hero-sub { margin-top: 22px; }
  .hero-ctas { margin-top: 26px; gap: 10px; }
  .hero-cards { margin-top: 34px; gap: 12px; }
  .hero-card { padding: 20px 20px 22px; }

  /* inner hero */
  .subhero { padding: 128px 0 50px; }
  .subhero-mark { display: none; }
  .subhero-sub { margin-top: 18px; }

  /* shared blocks */
  .split { gap: 26px; }
  .split-media { min-height: 250px; }
  .why-media { min-height: 260px; }
  .why-item { padding: 18px 20px; gap: 14px; }
  .why-num { font-size: 22px; min-width: 32px; }
  .why-badge { padding: 16px 18px; left: 16px; top: 16px; }
  .why-badge .num { font-size: 34px; }
  .card { border-radius: var(--r-md); }
  .blist li { font-size: 15px; }

  /* services cards on home */
  .svc-card { grid-template-columns: 1fr; }
  .svc-icon { width: auto; }
  .svc-icon-inner { margin: 24px 0 0 24px; width: 56px; height: 56px; }
  .svc-body { padding: 16px 24px 26px; }
  .svc-body h3 { font-size: 20px; }

  /* process stepper */
  .stepper { margin: 30px 0 26px; }
  .step-dot .circle { width: 38px; height: 38px; font-size: 14px; }
  .stepper-track::before, .stepper-fill { left: 19px; right: 19px; top: 18px; }
  .step-panel h3 { font-size: 22px; }
  .step-panel p { font-size: 16px; }
  .step-panels { min-height: 170px; }

  /* featured projects + testimonial */
  .proj { height: 220px; }
  .proj-info { padding: 20px; }
  .quote-mark { font-size: 72px; margin-top: 0; }
  .quote-text { font-size: 22px; }

  /* cta strip */
  .cta-strip { padding: 38px 26px; gap: 24px; border-radius: var(--r-md); }
  .cta-strip .cta-mark { height: 160px; right: -30px; bottom: -40px; }

  /* footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 48px 20px 32px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-link { padding: 11px 0; font-size: 15.5px; }
  .footer-bottom { padding: 18px 20px; font-size: 12px; }

  /* projects index */
  .proj-masonry { gap: 14px; }
  .filter-bar { gap: 8px; margin-bottom: 26px; }
  .filter-btn { padding: 11px 16px; font-size: 13px; min-height: 40px; }
  .pcard-info { padding: 20px; }
  .pcard-info h3 { font-size: 19px; }

  /* services page */
  .svc-section { padding: 60px 0; }
  .svc-photo { min-height: 260px; }
  .svc-nav { top: 76px; }
  .svc-nav-inner { padding: 10px 0; }
  .sector-card { padding: 24px 18px; }

  /* about + approach */
  .team-photo { width: 160px; }
  .approach-num { font-size: 48px; letter-spacing: -2px; }
  .val-card { padding: 26px 24px; }
  .prin-card { padding: 28px 24px; }
  .lead-p { font-size: 19px; }

  /* news */
  .feat-post .feat-body { padding: 26px 22px; }
  .feat-post .feat-media { min-height: 220px; }
  .post-card .post-media { height: 190px; }
  .post-card .post-content { padding: 22px 22px 26px; }
  .news-sub { padding: 32px 24px; gap: 22px; }

  /* careers */
  .perk-card { padding: 26px 22px; }
  .job { padding: 22px 20px; }
  .job h3 { font-size: 18px; }
  .life-grid > div { height: 190px; }

  /* contact */
  .info-card { padding: 20px 0; gap: 14px; }
  .info-ic { width: 44px; height: 44px; }
  .info-ic i { width: 20px; height: 20px; }
  .info-card p, .info-card a { font-size: 16px; overflow-wrap: anywhere; }
  .form-card { padding: 26px 22px; border-radius: var(--r-md); }
  .map-band { height: 340px; }
  .map-card { left: 16px; right: 16px; bottom: 16px; transform: none; padding: 16px 18px; gap: 14px; flex-wrap: wrap; width: auto; min-width: 0; }
  .map-pin .pin-dot { width: 48px; height: 48px; }

  /* project detail pages */
  .phero { min-height: 62vh; }
  .phero-inner { padding-top: 122px; padding-bottom: 40px; }
  .phero-lead { margin-top: 20px; }
  .pfacts-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 30px 0; }
  .pfact-k, .pside-title { font-size: 12px; letter-spacing: 1.2px; }
  .pbody { gap: 34px; }
  .pbody-main > p { font-size: 17px; line-height: 1.68; }
  .pull { margin: 32px 0; padding-left: 18px; }
  .pull span { font-size: 22px; }
  .pside-card { padding: 22px 20px; }
  .pgal { grid-template-columns: 1fr; grid-auto-rows: 210px; gap: 12px; }
  .pgal figcaption { opacity: 1; transform: none; font-size: 13px; left: 16px; right: 16px; bottom: 14px; }
  .pgal figure::after { opacity: 1; }
  .cmp-knob { width: 40px; height: 40px; }
  .cmp-knob i { width: 18px; height: 18px; }
  .cmp-tag { font-size: 10px; padding: 6px 10px; bottom: 12px; letter-spacing: .8px; }
  .cmp-tag.l { left: 12px; } .cmp-tag.r { right: 12px; }
  .pnext-inner { padding-top: 56px; padding-bottom: 56px; gap: 24px; }
  .lbx { padding: 16px; }
  .lbx-close { top: 16px; right: 16px; }
}

/* ---------------- ≤ 480px : small phones ---------------- */
@media (max-width: 480px) {
  :root { --hero-size: 40px; --d-xxl: 36px; --d-xl: 32px; --d-lg: 27px; --d-md: 23px; --d-sm: 21px; --d-xs: 19px; }
  .wrap, .wrap-wide { padding: 0 18px; }
  .band { padding: 52px 0; }
  .stat-row { gap: 24px 16px; }
  .stat-num { font-size: 40px; }
  .stat-lbl { font-size: 12.5px; letter-spacing: .6px; margin-top: 8px; }
  .eyebrow { font-size: 13px; letter-spacing: 1.6px; }
  .btn { padding: 14px 20px; font-size: 14.5px; }
  .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .mobile-menu a { font-size: 23px; padding: 11px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { justify-content: flex-start; }
  .quote-text { font-size: 20px; }
  .cta-strip { padding: 32px 22px; }
  .team-photo { width: 140px; }
  .map-band { height: 300px; }
  .pfacts-grid { grid-template-columns: 1fr; gap: 18px; }
  .pgal { grid-auto-rows: 180px; }
  .proj { height: 190px; }
  .life-grid > div { height: 165px; }
  .post-card .post-media { height: 170px; }
}

/* ---------------- ≤ 400px : narrowest phones ---------------- */
@media (max-width: 400px) {
  .nav-pill { padding: 9px 9px 9px 14px; }
  .nav-cta .btn:not(.nav-burger) { display: none; }
  .nav-logo img { height: 30px; }
  .wrap, .wrap-wide { padding: 0 16px; }
  .footer-grid { padding: 44px 16px 30px; }
  .footer-bottom { padding: 16px 16px; }
  .stat-num { font-size: 36px; }
  .hero-inner { padding: 116px 0 34px; }
  .btn { padding: 13px 18px; font-size: 14px; }
  .filter-btn { padding: 10px 14px; font-size: 12.5px; }
  .quote-text { font-size: 19px; }
  .cta-strip { padding: 28px 20px; }
  .form-card { padding: 22px 18px; }
  .info-ic { width: 42px; height: 42px; }
}

/* ==================================================================
   PLATFORM HARDENING — touch devices, notches, dynamic viewports
   ================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(43,71,57,.14); }
a, button, .btn, .filter-btn, input, select, textarea, [role="button"] { touch-action: manipulation; }
[id] { scroll-margin-top: 120px; }

/* menu-open scroll lock (set by js on <html> and <body>) */
html.menu-open, html.menu-open body { overflow: hidden; }
/* the overlay must clip + stay inert while closed, at every width, or tall
   content (the mm-foot CTA) leaks over the nav and hero */
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; visibility: hidden; pointer-events: none;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  transition: transform .45s var(--ease), visibility 0s linear .45s; }
.mobile-menu.open { visibility: visible; pointer-events: auto; transition: transform .45s var(--ease), visibility 0s linear 0s; }

/* the nav pill can't hold logo + 7 links + CTA below ~1040px — switch to the burger there */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-phone { display: none; }
  .nav-cta { margin-left: auto; }
}

/* before/after slider: horizontal drag on the slider, vertical scroll still pages */
.cmp { touch-action: pan-y; }

/* dynamic viewport units — heroes stop jumping when mobile browser chrome hides */
@supports (height: 100svh) {
  .hero { min-height: 92svh; }
  .phero { min-height: 80svh; }
  .mobile-menu { height: 100dvh; }
  @media (max-width: 900px) { .hero { min-height: 86svh; } .phero { min-height: 66svh; } }
  @media (max-width: 680px) { .hero { min-height: 80svh; } .phero { min-height: 60svh; } }
}

/* touch devices: no sticky hover transforms, no scroll-trapping map */
@media (hover: none) {
  .card:hover, .hover-lift:hover, .pcard:hover, .post-card:hover, .job:hover, .perk-card:hover,
  .val-card:hover, .prin-card:hover, .sector-card:hover { transform: none; }
  .proj:hover .proj-img, .pcard:hover .pcard-img, .post-card:hover .post-img { transform: none; }
  .btn:hover .ic, .btn:hover .ic i, .btn--ghost:hover i, .btn--ghost:hover svg { transform: none; }
  .footer-link:hover { padding-left: 0; }
  .map-frame { pointer-events: none; }
}

/* comfortable tap targets + notch-safe gutters below the tablet breakpoint */
@media (max-width: 900px) {
  .nav-inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .footer-link { padding: 12px 0; }
  .btn--ghost { padding: 10px 0; }
  .svc-nav a { padding: 12px 18px; }
  .crumb a, .footer-bottom a { display: inline-block; padding: 8px 0; }
  .nav-logo { min-height: 42px; }
  .map-card .btn { padding: 13px 18px !important; }
  .nav-burger, .mm-close, .cmp-knob, .lbx-close { min-width: 44px; min-height: 44px; }
  .filter-btn { min-height: 44px; }
}

/* small uppercase labels: hold a legible floor on phones */
@media (max-width: 680px) {
  .footer-col-title, .footer-bottom, .footer-bottom span, .team-role,
  .step-tag, .pfact-k, .pside-title, .post-meta { font-size: 12.5px; }
  .svc-nav { top: 72px; }
  .svc-nav-inner { padding: 8px 0; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .svc-nav-inner::-webkit-scrollbar { display: none; }
  [id], .anchor { scroll-margin-top: 148px; }
}

/* landscape phones: short viewports must not be dominated by the hero */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  .hero, .phero { min-height: 420px; }
  .hero-inner { padding: 104px 0 32px; }
  .phero-inner { padding-top: 104px; padding-bottom: 32px; }
  .subhero { padding: 108px 0 44px; }
  .band { padding: 48px 0; }
  .mobile-menu { overflow-y: auto; padding-top: 16px; }
  .mobile-menu a { font-size: 21px; padding: 8px 0; }
  .mm-close { width: 42px; height: 42px; margin-bottom: 4px; }
  .mm-foot { padding-top: 16px; }
  .hero-cards { margin-top: 24px; }
}