/* ============================================================
   ZINDAGI CONSULTING — Design System
   Palette:  midnight #071426 · navy #0D1B32 · off-white #F4F1E8
             ink #10182B · slate #6B7280 · brass #A9834F (sparing)
   Type:     "Fraunces" (display/serif) + "Manrope" (sans/body/UI)
   ============================================================ */

:root{
  --midnight:#071426;
  --navy:#0D1B32;
  --navy-soft:#132140;
  --off-white:#F4F1E8;
  --paper:#EFEBDD;
  --ink:#10182B;
  --slate:#69707E;
  --slate-light:#9AA1B0;
  --line-dark:rgba(244,241,232,0.16);
  --line-light:rgba(16,24,43,0.12);
  --brass:#A9834F;

  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Manrope", "Helvetica Neue", Arial, sans-serif;

  --max:1360px;
  --gutter:clamp(24px, 5vw, 96px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--off-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:22px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  transition:background 0.4s var(--ease), padding 0.4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(7,20,38,0.92);
  backdrop-filter:blur(10px);
  padding-top:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-dark);
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--off-white);
}
.logo svg{width:26px;height:26px;flex-shrink:0;}
.logo-word{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.1;
}
.logo-word b{display:block;font-weight:600;letter-spacing:0.02em;}
.logo-word span{
  display:block;
  font-family:var(--sans);
  font-size:9px;
  font-weight:600;
  letter-spacing:0.24em;
  color:var(--slate-light);
  margin-top:2px;
}

.main-nav{display:flex;gap:34px;}
.main-nav a{
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
  color:rgba(244,241,232,0.82);
  position:relative;
  padding:4px 0;
}
.main-nav a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0; height:1px;
  background:var(--off-white);
  transition:width .3s var(--ease);
}
.main-nav a:hover::after{width:100%;}
.main-nav a:hover{color:var(--off-white);}

.header-actions{
  display:flex;
  align-items:center;
  gap:22px;
}
.header-phone{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.02em;
  color:rgba(244,241,232,0.75);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.header-phone:hover{color:var(--off-white);}

.header-cta{
  border:1px solid var(--line-dark);
  color:var(--off-white);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  padding:11px 20px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.header-cta:hover{background:rgba(244,241,232,0.1);border-color:rgba(244,241,232,0.4);}

.menu-toggle{display:none;}

/* ---------- Mobile nav overlay ---------- */
.mobile-nav{
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:99;
  background:var(--midnight);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-100%);
  transition:transform .45s var(--ease);
}
.mobile-nav.is-open{transform:translateY(0);}
.mobile-nav nav{display:flex;flex-direction:column;align-items:center;gap:26px;}
.mobile-nav a{
  font-family:var(--serif);
  font-size:28px;
  color:var(--off-white);
}
.mobile-nav-cta{
  margin-top:14px;
  font-family:var(--sans) !important;
  font-size:13px !important;
  letter-spacing:0.08em;
  border:1px solid var(--line-dark);
  padding:12px 24px;
}
.mobile-nav-phone{
  margin-top:6px;
  font-family:var(--sans) !important;
  font-size:13px !important;
  letter-spacing:0.02em;
  color:rgba(244,241,232,0.6) !important;
}

/* ---------- Hero (art-directed portrait + impact bar, single viewport) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--midnight);
  color:var(--off-white);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.hero::before{
  /* strategic grid texture — barely-there design residue, kept off the portrait/copy */
  content:"";
  position:absolute; top:0; left:0; right:0; bottom:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(244,241,232,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,232,0.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 55% at 22% 38%, rgba(0,0,0,0.9), transparent 70%);
  pointer-events:none;
}

.hero-main{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  align-items:center;
  min-height:0;
  padding-top:72px;
  padding-bottom:16px;
}
.hero-main .wrap{
  width:100%;
  display:grid;
  grid-template-columns:7fr minmax(280px,5fr);
  gap:clamp(20px,4vw,56px);
  align-items:stretch;
}

/* -- Portrait: bleeds to the viewport edge and fills the row height, masked so it
      dissolves into the navy field rather than sitting in a boxed-off poster -- */
.hero-portrait{
  position:relative;
  order:2;
  height:100%;
  min-height:clamp(320px,54vh,540px);
  justify-self:stretch;
  width:calc(100% + var(--gutter));
  margin-right:calc(-1 * var(--gutter));
}
.hero-portrait img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 14%;
  -webkit-mask-image:linear-gradient(to left, transparent 0%, black 14%, black 100%);
  mask-image:linear-gradient(to left, transparent 0%, black 14%, black 100%);
  filter:saturate(0.94);
}
.hero-portrait::after{
  /* dissolve the top/bottom photo edges into the navy field instead of a hard crop line */
  content:"";
  position:absolute; top:0; left:0; right:0; bottom:0;
  z-index:1;
  background:
    linear-gradient(to bottom, transparent 80%, var(--midnight) 100%),
    linear-gradient(to top, transparent 92%, rgba(7,20,38,0.6) 100%);
  pointer-events:none;
}
.hero-portrait-caption{
  position:absolute;
  right:0; bottom:6%;
  z-index:2;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(244,241,232,0.4);
}
.hero-bg-placeholder{
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:rgba(244,241,232,0.3);
  text-align:center;
  padding:32px;
  background:var(--navy-soft);
}
.hero-bg-placeholder svg{width:64px;height:64px;opacity:0.6;}
.hero-bg-placeholder small{font-size:11px;letter-spacing:0.08em;max-width:28ch;line-height:1.6;}

/* -- Copy -- */
.hero-copy{max-width:600px; align-self:center; order:1;}
.hero-copy .eyebrow{color:var(--brass);margin-bottom:22px;display:block;}
.hero-copy h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem, 3.4vw, 3.2rem);
  line-height:1.08;
  letter-spacing:-0.01em;
}
.hero-copy h1 em{
  font-style:normal;
  color:var(--brass);
}
.hero-copy p{
  margin-top:16px;
  font-size:15.5px;
  line-height:1.72;
  color:rgba(244,241,232,0.76);
  max-width:560px;
}
.hero-cta-row{
  margin-top:22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.07em;
  padding:15px 26px;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{background:var(--off-white);color:var(--midnight);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line-dark);color:var(--off-white);}
.btn-ghost:hover{border-color:rgba(244,241,232,0.5);}
.btn-dark{border:1px solid var(--line-light);color:var(--ink);}
.btn-dark:hover{border-color:var(--ink);}

/* -- Impact bar: bottom strip of the hero itself -- */
.hero-impact{
  position:relative;
  z-index:2;
  border-top:1px solid var(--line-dark);
  padding:14px 0;
}
.hero-impact .wrap{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,40px);
}
.hero-impact-label{
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(244,241,232,0.45);
  flex:0 0 auto;
  padding-right:clamp(18px,3vw,40px);
  border-right:1px solid var(--line-dark);
}
.hero-impact-list{
  flex:1;
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.hero-impact-track{
  display:flex;
  width:max-content;
  gap:clamp(10px,2vw,24px);
  animation:hero-impact-scroll 26s linear infinite;
}
.hero-impact-list:hover .hero-impact-track{animation-play-state:paused;}
@keyframes hero-impact-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.hero-impact-item{
  flex:0 0 auto;
  padding-left:clamp(14px,2vw,24px);
  border-left:1px solid var(--line-dark);
}
.hero-impact-item:first-child{border-left:none;padding-left:0;}
.hero-impact-item .num{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2vw,1.9rem);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.hero-impact-item .label{
  margin-top:6px;
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:rgba(244,241,232,0.5);
  white-space:nowrap;
}

/* ---------- Secondary page hero (simpler, used by interior pages) ---------- */
.page-hero{
  position:relative;
  background:var(--midnight);
  color:var(--off-white);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:140px;
  padding-bottom:64px;
}
.page-hero .wrap{width:100%;}

/* ---------- Section shells ---------- */
.section{padding:clamp(72px,10vw,160px) 0;}
.section-dark{background:var(--navy);color:var(--off-white);}
.section-midnight{background:var(--midnight);color:var(--off-white);}
.section-paper{background:var(--paper);}

/* ---------- Statement ---------- */
.statement{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start;}
.statement-line{width:1px;height:100%;background:var(--line-light);}
.statement h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1.16;
  letter-spacing:-0.01em;
}
.statement-aside{border-left:1px solid var(--line-light);padding-left:28px;}
.statement-aside .eyebrow{color:var(--slate);margin-bottom:16px;display:block;}
.statement-aside p{font-size:15.5px;line-height:1.8;color:var(--slate);max-width:38ch;}

/* ---------- Intro (asymmetric two column) ---------- */
.intro{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(32px,6vw,90px);align-items:start;}
.intro-label .eyebrow{color:var(--slate);}
.intro-label h2{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:500;
  line-height:1.3;
  margin-top:18px;
}
.intro-body p{font-size:16px;line-height:1.85;color:var(--slate);max-width:56ch;}
.intro-body p + p{margin-top:20px;}

/* ---------- Capabilities interactive list ---------- */
.capabilities-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:56px;}
.capabilities-head .eyebrow{color:var(--slate-light);margin-bottom:18px;display:block;}
.capabilities-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.12;
}
.cap-list{border-top:1px solid var(--line-dark);}
.cap-row{
  border-bottom:1px solid var(--line-dark);
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:20px;
  padding:26px 4px;
  position:relative;
  cursor:pointer;
}
.cap-row .cap-num{
  font-family:var(--serif);
  font-size:14px;
  color:var(--slate-light);
  transition:color .3s var(--ease);
}
.cap-row .cap-title{
  font-size:clamp(18px,2.4vw,26px);
  font-weight:500;
  letter-spacing:0.01em;
  transition:transform .35s var(--ease), letter-spacing .35s var(--ease);
}
.cap-row .cap-tag{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--slate-light);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  display:none;
}
@media(min-width:820px){ .cap-row{grid-template-columns:56px 1fr 1fr auto;} .cap-row .cap-tag{display:block;} }
.cap-row .cap-arrow{
  width:34px;height:34px;
  border:1px solid var(--line-dark);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.cap-row .cap-arrow svg{width:14px;height:14px;transition:transform .35s var(--ease);}
.cap-row:hover .cap-num{color:var(--off-white);}
.cap-row:hover .cap-title{transform:translateX(10px);}
.cap-row:hover .cap-tag{opacity:1;transform:translateX(0);}
.cap-row:hover .cap-arrow{background:var(--off-white);border-color:var(--off-white);}
.cap-row:hover .cap-arrow svg{transform:translateX(2px);stroke:var(--midnight);}
.cap-detail{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
  grid-column:1 / -1;
}
.cap-row.is-open .cap-detail{max-height:120px;}
.cap-detail p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--slate-light);
  max-width:58ch;
  padding-top:14px;
}

/* ---------- Stats marquee ---------- */
.stats{overflow:hidden;}
.stats-label{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;}
.stats-track-wrap{
  position:relative;
  margin-top:34px;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  padding:0;
}
.stats-track{
  display:flex;
  width:max-content;
  animation:stats-scroll 34s linear infinite;
}
.stats-track:hover{animation-play-state:paused;}
@keyframes stats-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.stat-item{
  flex:0 0 auto;
  padding:44px clamp(28px,4vw,64px);
  border-right:1px solid var(--line-light);
  text-align:left;
}
.stat-item .num{
  font-family:var(--serif);
  font-size:clamp(2.2rem,3.4vw,3.4rem);
  font-weight:500;
  line-height:1;
}
.stat-item .label{
  margin-top:10px;
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate);
  max-width:14ch;
}

/* ---------- Feature (image + text alternating) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;}
.feature.reverse .feature-media{order:2;}
.feature.reverse .feature-copy{order:1;}
.feature-copy .eyebrow{color:var(--slate);margin-bottom:16px;display:block;}
.section-dark .feature-copy .eyebrow,
.section-midnight .feature-copy .eyebrow{color:var(--slate-light);}
.feature-copy h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  line-height:1.15;
  margin-bottom:20px;
}
.feature-copy p{font-size:15.5px;line-height:1.85;color:var(--slate);max-width:50ch;}
.section-dark .feature-copy p,
.section-midnight .feature-copy p{color:rgba(244,241,232,0.68);}
.feature-list{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
.feature-list li{
  font-size:13.5px;
  padding:10px 0;
  border-top:1px solid var(--line-light);
  color:var(--slate);
}
.section-dark .feature-list li,
.section-midnight .feature-list li{border-top:1px solid var(--line-dark);color:rgba(244,241,232,0.72);}
.feature-link{
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--brass);
}
.feature-link svg{width:12px;height:12px;transition:transform .3s var(--ease);}
.feature-link:hover svg{transform:translateX(3px);}

.feature-media{
  position:relative;
  aspect-ratio:4/5;
  border:1px solid var(--line-light);
  overflow:hidden;
  background:linear-gradient(160deg,var(--navy) 0%,var(--midnight) 100%);
}
.section-dark .feature-media,
.section-midnight .feature-media{border-color:var(--line-dark);}
.feature-media img{width:100%;height:100%;object-fit:cover;}

/* ---------- Framework sequence ---------- */
.framework{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;margin-top:56px;}
.framework-step{
  font-family:var(--serif);
  font-size:clamp(20px,3vw,32px);
  padding:0 clamp(14px,2.4vw,34px);
  color:rgba(244,241,232,0.5);
  transition:color .3s var(--ease);
}
.framework-step.is-active{color:var(--off-white);}
.framework-arrow{color:var(--slate-light);font-size:16px;}

/* ---------- Map sections ---------- */
.map-section{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.map-copy .eyebrow{color:var(--slate);margin-bottom:16px;display:block;}
.map-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.2;margin-bottom:18px;}
.map-copy p{font-size:15.5px;line-height:1.85;color:var(--slate);max-width:48ch;}
.map-visual{
  position:relative;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-light);
}
.map-visual svg{width:82%;height:82%;}

/* ---------- Services list ---------- */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-light);border-left:1px solid var(--line-light);margin-top:48px;}
.service-cell{
  border-right:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  padding:36px clamp(20px,3vw,40px);
}
.service-cell h3{font-family:var(--serif);font-weight:500;font-size:19px;margin-bottom:10px;}
.service-cell p{font-size:14px;line-height:1.7;color:var(--slate);}

/* ---------- Engagements ---------- */
.engagement{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(28px,5vw,72px);align-items:center;padding:64px 0;border-bottom:1px solid var(--line-light);}
.engagement:last-child{border-bottom:none;}
.engagement.reverse{grid-template-columns:0.9fr 1.1fr;}
.engagement.reverse .engagement-media{order:1;}
.engagement.reverse .engagement-copy{order:2;}
.engagement-media{aspect-ratio:5/4;border:1px solid var(--line-light);overflow:hidden;background:linear-gradient(160deg,var(--navy) 0%,var(--midnight) 100%);}
.engagement-media img{width:100%;height:100%;object-fit:cover;}
.engagement-copy .eyebrow{color:var(--slate);margin-bottom:18px;display:block;}
.engagement-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;margin-bottom:20px;}
.engagement-tags{display:flex;flex-wrap:wrap;gap:10px;}
.engagement-tags span{font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate);border:1px solid var(--line-light);padding:7px 12px;}

/* ---------- Insights ---------- */
.insights-list{margin-top:48px;border-top:1px solid var(--line-dark);}
.insight-row{
  display:grid;grid-template-columns:120px 1fr auto;
  gap:22px;align-items:baseline;
  padding:28px 0;
  border-bottom:1px solid var(--line-dark);
}
.insight-row .tag{font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate-light);}
.insight-row h3{font-family:var(--serif);font-weight:500;font-size:19px;}
.insight-row .arrow{font-size:14px;color:var(--slate-light);}

/* ---------- Contact ---------- */
.contact{
  background:var(--midnight);
  color:var(--off-white);
  padding:clamp(90px,12vw,180px) 0 80px;
  text-align:center;
}
.contact h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem,5vw,4rem);
  line-height:1.12;
  max-width:16ch;
  margin:0 auto;
}
.contact p{
  margin:28px auto 0;
  font-size:16px;
  line-height:1.8;
  color:rgba(244,241,232,0.68);
  max-width:46ch;
}
.contact .btn-primary{margin-top:40px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--midnight);color:rgba(244,241,232,0.6);padding-top:56px;}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:40px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line-dark);
}
.footer-brand p{font-size:13.5px;line-height:1.8;margin-top:16px;max-width:32ch;}
.footer-col h4{font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(244,241,232,0.4);margin-bottom:16px;}
.footer-col a, .footer-col p{display:block;font-size:13.5px;line-height:2.1;color:rgba(244,241,232,0.7);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 0;
  font-size:12px;
  color:rgba(244,241,232,0.4);
  flex-wrap:wrap;gap:12px;
}

/* ---------- Responsive ---------- */
@media (max-width:1150px){
  .header-phone{display:none;}
}

@media (max-width:1024px){
  .statement{grid-template-columns:1fr;gap:28px;}
  .statement-aside{border-left:none;padding-left:0;border-top:1px solid var(--line-light);padding-top:22px;}
  .intro{grid-template-columns:1fr;}
  .capabilities-head{grid-template-columns:1fr;}
  .feature,.feature.reverse{grid-template-columns:1fr;}
  .feature.reverse .feature-media{order:1;}
  .feature.reverse .feature-copy{order:2;}
  .map-section{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .engagement,.engagement.reverse{grid-template-columns:1fr;}
  .engagement.reverse .engagement-media{order:1;}
  .footer-top{grid-template-columns:1fr 1fr;}

  /* Hero: intentional mobile composition — copy first, portrait second, impact bar last */
  .hero{min-height:0;}
  .hero-main{padding-top:112px; padding-bottom:8px;}
  .hero-main .wrap{
    grid-template-columns:1fr;
    gap:32px;
  }
  .hero-copy{order:1; max-width:none;}
  .hero-portrait{order:2; height:min(66vh,520px); min-height:0; justify-self:stretch; width:100%; margin-left:0; margin-right:0;}
  .hero-portrait img{
    -webkit-mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
  }
  .hero-portrait::after{
    background:
      linear-gradient(to bottom, transparent 70%, var(--midnight) 100%),
      linear-gradient(to right, rgba(7,20,38,0.35) 0%, transparent 18%, transparent 82%, rgba(7,20,38,0.35) 100%);
  }
  .hero-impact{padding:18px 0 22px;}
  .hero-impact .wrap{flex-direction:column; align-items:flex-start; gap:14px;}
  .hero-impact-label{border-right:none; padding-right:0;}
  .hero-impact-list{width:100%;}
}

@media (max-width:820px){
  .main-nav{display:none;}
  .menu-toggle{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;
    border:1px solid var(--line-dark);
    color:var(--off-white);
  }
  .insight-row{grid-template-columns:1fr;gap:8px;}
}

@media (max-width:560px){
  :root{--gutter:20px;}
  .hero-main{padding-top:100px;}
  .hero-copy h1{font-size:clamp(2rem,8vw,2.6rem);}
  .hero-portrait{height:min(52vh,420px);}
  .hero-cta-row{flex-direction:column;align-items:stretch;}
  .btn{justify-content:center;}
  .stat-item{padding:36px 28px;}
  .footer-top{grid-template-columns:1fr;}
}