/* HERO */
  .hero{
    position:relative;
    background:var(--ink);
    color:#fff;
    overflow:hidden;
    min-height: 760px;
  }
  .hero-bg{
    position:absolute; inset:0;
    overflow:hidden;
    background: #1a1716;
  }
  .hero-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit: cover;
    filter: brightness(.57) saturate(.85) contrast(1.05);
    transform: scale(1.04);
  }
  .hero-tint{
    position:absolute; inset:0;
    background:
      radial-gradient(60% 50% at 70% 35%, rgba(0,151,80,.18), transparent 65%),
      radial-gradient(60% 50% at 20% 80%, rgba(0,151,80,.12), transparent 70%),
      linear-gradient(180deg, rgba(20,18,17,.55) 0%, rgba(20,18,17,.45) 40%, rgba(20,18,17,.78) 100%);
  }
  .hero-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  }

  .hero-inner{position:relative; z-index:2; padding:96px 56px 80px}
  @media (max-width: 800px){ .hero-inner{ padding: 96px 24px 80px } }
  /* home page eyebrow — overrides shared.css base (ink-3 colour, flex layout) */
  .eyebrow{
    color: var(--ink-3);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .eyebrow::before{content:none}
  .hero h1{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(48px, 7.4vw, 112px);
    line-height: .98;
    letter-spacing: -0.02em;
    margin: 28px 0 0;
    max-width: 14ch;
    text-wrap: balance;
  }
  .hero h1 .w{
    display:inline-block;
    opacity:0;
    transform: translateX(56px);
    animation: heroWordIn .5s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: calc(.25s + var(--d, 0) * .08s);
    will-change: transform, opacity;
  }
  @keyframes heroWordIn{ to{ opacity:1; transform: translateX(0) } }
  .hero h1 em{
    font-style:italic; font-weight:400; color: var(--green);
    position:relative;
  }
  .hero h1 em::after{
    content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.06em;
    background: var(--green);
    transform-origin:left; transform: scaleX(0);
    animation: drawline 1s 1.05s cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes drawline{ to{ transform: scaleX(1) } }
  .hero-foot{
    display:grid; grid-template-columns: 1.4fr 1fr;
    gap:80px; align-items:end;
    margin-top: 96px;
  }
  .hero-foot p{
    font-size:17px; line-height:1.55; max-width: 52ch; color:#dcd7d2;
    font-weight: 300;
  }
  .hero-cta{display:flex; gap:14px; justify-content:flex-end; flex-wrap:wrap}

  /* hero side meta */
  .hero-meta{
    position:absolute; right:56px; top:50%; transform: translateY(-50%);
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
    font-family:var(--mono); font-size:11px; letter-spacing:.32em; color: rgba(255,255,255,.45);
    text-transform: uppercase;
  }
  @media (max-width: 1100px){ .hero-meta{display:none} }

  /* scroll cue */
  .scrollcue{
    position:absolute; left:56px; bottom:36px; z-index:3;
    display:flex; align-items:center; gap:12px;
    font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    color: rgba(255,255,255,.55);
  }
  .scrollcue .line{width:48px; height:1px; background: rgba(255,255,255,.4); position:relative; overflow:hidden}
  .scrollcue .line::after{
    content:""; position:absolute; left:-40%; top:0; width:40%; height:100%;
    background: var(--green);
    animation: cueSlide 2.4s ease-in-out infinite;
  }
  @keyframes cueSlide{ 0%{left:-40%} 70%,100%{left:100%} }

  /* MARQUEE / brand strip */
  .strip{
    background: var(--green);
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding: 0;
    overflow:hidden;
    position:relative;
  }
  .strip-inner{display:flex; gap:80px; align-items:center; animation: scroll 32s linear infinite; white-space:nowrap; width:max-content; padding: 28px 40px;}
  .strip:hover .strip-inner{animation-play-state: paused}
  .strip-item{
    display:flex; align-items:center; gap:18px;
    height: 64px;
    flex:0 0 auto;
  }
  .strip-item img{height:100%; width:auto; display:block; opacity:.96}
  .strip-item.txt{
    font-family:var(--serif); font-weight:400; letter-spacing:.06em; text-transform:uppercase;
    color:#fff; font-size: 34px; display:flex; align-items:center; line-height:1;
  }
  .strip-item.txt small{font-family:var(--sans); font-size:11px; letter-spacing:.32em; display:block; margin-top:6px; opacity:.85; font-weight:500}
  .strip-sep{width:6px; height:6px; border-radius:50%; background:#fff; opacity:.45; flex:0 0 auto}
  @keyframes scroll{ from{transform:translateX(0)} to{ transform: translateX(-50%) } }

  /* SECTION GENERIC */
  section{padding: 140px 0; position:relative}
  .sec-head{display:grid; grid-template-columns: 1fr 1.6fr; gap:80px; margin-bottom: 80px}
  .sec-head .label{
    font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3);
  }
  .sec-head .label::before{content:none}
  .sec-head h2{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(36px, 4.6vw, 64px); line-height:1.02; letter-spacing:-.02em;
    margin:0; text-wrap: balance;
  }
  .sec-head h2 em{font-style:italic; color:var(--green); font-weight:400}
  .sec-head p{font-size:16px; max-width:56ch; color:var(--ink-2); margin-top:18px}

  /* INTRO STATEMENT */
  .intro{padding: 120px 0 120px; background:#EAEDEB}
  .intro-grid{display:grid; grid-template-columns: 1fr 1.2fr; gap:80px; align-items:start}
  .intro h2{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(34px, 3.8vw, 54px); line-height:1.05; letter-spacing:-.015em;
    margin:0;
  }
  .intro .lede{font-size:18px; line-height:1.6; color:var(--ink-2); max-width:56ch}
  .intro .lede + .lede{margin-top:22px}
  .stats{
    margin-top: 96px;
    display:grid; grid-template-columns: repeat(4, 1fr);
    border-top:1px solid var(--line);
  }
  .stat{padding: 36px 28px 36px 0; border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
  .stat .num{font-family:var(--serif); font-size:60px; font-weight:300; letter-spacing:-.02em; line-height:1}
  .stat .num em{font-style:normal; color: var(--green)}
  .stat .lbl{
    margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
    line-height:1.6;
  }

  /* CAPABILITIES */
  .caps{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 120px 0 40px}
  .caps-head{
    display:grid;
    grid-template-columns: 1.25fr 1.6fr;
    column-gap: 80px;
    row-gap: 28px;
    margin-bottom: 102px;
    align-items: start;
  }
  .caps-label{ grid-column: 1 / -1; }
  .caps-hero{
    grid-column: 1;
    margin: 0; width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #eee;
    position: relative;
  }
  .caps-hero img{ width: 100%; height: auto; display: block; aspect-ratio: 1827 / 1111; object-fit: cover; }
  /* tech dashboard: show full, uncropped, at its native ratio */
  .tech .caps-hero img{ aspect-ratio: 1434 / 1097; object-fit: contain; background:#fff; }
  /* tech header: text ~25% on the left, dashboard ~75% on the right */
  .tech .caps-head{ grid-template-columns: 1fr 3fr; column-gap: 56px; align-items: center; }
  .tech .caps-head-text{ grid-column: 1; grid-row: 2; }
  .tech .caps-hero{ grid-column: 2; grid-row: 2; }
  .caps-head-text{ grid-column: 2; }
  .caps-head-text h2{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(36px, 4.6vw, 64px); line-height:1.02; letter-spacing:-.02em;
    margin:0; text-wrap: balance;
  }
  .caps-head-text h2 em{font-style:italic; color:var(--green); font-weight:400}
  /* vision section: photo left, eyebrow+header+paragraph stacked in right column */
  .vision .caps-head{ align-items:start; }
  .vision .caps-head-text .caps-label{ margin:0 0 18px; }
  .vision .caps-head-text h2{ margin:0 0 22px; }
  .vision .caps-hero img{ aspect-ratio: 1024 / 606; }
  .caps-head-text p{font-size:16px; max-width:56ch; color:var(--ink-2); margin: 18px 0 0}
  /* merged capabilities head (no photo) sits directly above the six-box panel */
  .caps-merge{ border-bottom:none; padding: 120px 0 0; }
  .caps-merge .caps-head{ display:block; margin-bottom: 0; text-align:left; }
  .caps-merge .caps-head-text{ grid-column: 1 / -1; max-width: 760px; margin: 18px 0 0; }
  .caps-merge .caps-head-text h2{ margin-left:0; margin-right:0; }
  .caps-merge .caps-head-text p{ max-width: 64ch; margin-left:0; margin-right:0; }
  .caps-merge + .caps-dark{ border-top:none; }
  @media (max-width: 900px){
    .caps-head{ grid-template-columns: 1fr; column-gap: 0 }
    .caps-hero, .caps-head-text{ grid-column: 1 }
  }
  /* CAPABILITIES — DARK PANEL */
  .caps-dark{
    background: #ffffff;
    padding: 120px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .caps-dark .caps-grid{
    display:grid; grid-template-columns: repeat(12, 1fr);
    gap:0;
    border-top:1px solid var(--line);
  }
  .caps-dark .cap{
    grid-column: span 4;
    padding: 48px 36px 48px 36px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
    transition: background .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    opacity: 0;
    transform: translateY(28px) scale(.985);
    color:var(--ink);
  }
  .caps-dark .caps-grid.in .cap{ opacity:1; transform: translateY(0) scale(1); }
  .caps-dark .cap:nth-child(3n){ border-right:none; }
  .caps-dark .cap:nth-child(n+4){ border-bottom:none; }
  .caps-dark .cap:hover{ background: rgba(0,151,80,.035); }
  .caps-dark .cap .idx{ color: var(--green); }
  .caps-dark .cap h3{
    color: var(--ink);
    padding-right: 0;
    margin: 0 0 14px;
  }
  .caps-dark .cap p{ color:var(--ink-2); opacity:1; max-width:42ch; }
  .caps-dark .cap .glyph{
    position:absolute;
    top:42px; right:34px; bottom:auto; left:auto;
    width:48px; height:auto;
    opacity:.12;
    z-index:0;
    pointer-events:none;
    background: transparent;
    border: none;
  }
  .caps-dark .cap .glyph img{ width:100%; height:auto; display:block; }
  /* watermark settles faint even after the staggered reveal sets opacity:1 */
  .caps-dark .caps-grid .cap .glyph{ opacity:0; }
  .caps-dark .caps-grid.in .cap .glyph{ opacity:.12; transform:none; }
  .caps-dark .cap:hover .glyph{
    background: transparent;
    opacity:.2;
  }
  .caps-dark .cap .idx,
  .caps-dark .cap h3,
  .caps-dark .cap p{ position:relative; z-index:1; }
  @media (max-width: 900px){
    .caps-dark .caps-grid .cap{ grid-column: span 12; border-right:none }
    .caps-dark .cap:nth-child(n+4){ border-bottom:1px solid rgba(255,255,255,.16); }
    .caps-dark .cap:last-child{ border-bottom:none; }
  }
  .cap{
    grid-column: span 4;
    padding: 48px 36px 48px 36px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    position:relative;
    transition: background .3s ease, opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    opacity: 0;
    transform: translateY(28px) scale(.985);
  }
  .caps-grid.in .cap{ opacity: 1; transform: translateY(0) scale(1); }
  .caps-grid.in .cap:nth-child(1){ transition-delay: 0s, 0s, 0s }
  .caps-grid.in .cap:nth-child(2){ transition-delay: 0s, .11s, .11s }
  .caps-grid.in .cap:nth-child(3){ transition-delay: 0s, .22s, .22s }
  .caps-grid.in .cap:nth-child(4){ transition-delay: 0s, .33s, .33s }
  .caps-grid.in .cap:nth-child(5){ transition-delay: 0s, .44s, .44s }
  .caps-grid.in .cap:nth-child(6){ transition-delay: 0s, .55s, .55s }
  /* the icon glyph: subtle pop after the card lands */
  .caps-grid .cap .glyph{ opacity: 0; transform: scale(.7); transition: opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1), background .35s ease, border-color .35s ease, color .35s ease; }
  .caps-grid.in .cap .glyph{ opacity:1; transform: scale(1); }
  .caps-grid.in .cap:nth-child(1) .glyph{ transition-delay: .15s, .15s, 0s, 0s, 0s }
  .caps-grid.in .cap:nth-child(2) .glyph{ transition-delay: .26s, .26s, 0s, 0s, 0s }
  .caps-grid.in .cap:nth-child(3) .glyph{ transition-delay: .37s, .37s, 0s, 0s, 0s }
  .caps-grid.in .cap:nth-child(4) .glyph{ transition-delay: .48s, .48s, 0s, 0s, 0s }
  .caps-grid.in .cap:nth-child(5) .glyph{ transition-delay: .59s, .59s, 0s, 0s, 0s }
  .caps-grid.in .cap:nth-child(6) .glyph{ transition-delay: .70s, .70s, 0s, 0s, 0s }
  .cap:hover{background:var(--paper)}
  .cap:nth-child(3n){border-right:none}
  .cap:nth-child(n+7){border-bottom:none}
  .cap .idx{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase; padding-right: 78px}
  .cap h3{
    font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.15;
    margin: 28px 0 14px; letter-spacing:-.01em;
    padding-right: 78px;
    min-height: 64px;
  }
  .cap p{font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0; max-width:42ch}
  .cap .glyph{
    position:absolute; top:42px; right:34px;
    width:48px; height:auto; display:flex; align-items:center; justify-content:center;
    background:transparent; border:none;
  }
  .cap .glyph img{ width:100%; height:auto; display:block; transition: transform .45s cubic-bezier(.34,1.4,.5,1); }
  .cap:hover .glyph img{ transform: scale(1.1) rotate(-2deg); }
  @media (max-width: 900px){
    .caps-grid .cap{grid-column: span 12; border-right:none}
  }

  /* COMPANIES */
  .companies{background:#EAEDEB}
  .companies-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:24px}
  .co{
    background:var(--white);
    border:1px solid var(--line);
    padding: 32px 28px 28px;
    display:flex; flex-direction:column;
    min-height: 460px;
    position:relative; overflow:hidden;
    transition: all .35s ease;
    perspective: 1000px;
  }
  .co:hover{transform: translateY(-4px); border-color:var(--ink); box-shadow: 0 30px 60px -40px rgba(35,31,32,.4)}
  .co .tag{font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3)}
  .co .logo{
    height: 170px; margin: 32px 0 28px;
    display:grid; place-items:center;
    position:relative;
    background: transparent;
  }
  /* framed logos sit on their own colored artwork — rounded, ~15% smaller */
  .co .logo.framed{
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .co .logo.framed img{
    width:100%; height:100%; object-fit:cover; display:block;
    border-radius: 12px;
    box-shadow: 0 14px 30px -20px rgba(35,31,32,.45);
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .co:hover .logo.framed img{ transform: scale(1.06); }
  /* plain logos sit over white — no box, no shadow */
  .co .logo.plain{ background: transparent; }
  .co .logo.plain img{
    max-height:120%; max-width:98%; width:auto; height:auto; display:block; object-fit:contain;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
  }
  .co:hover .logo.plain img{ transform: scale(1.05); }

  .co h3{font-family:var(--serif); font-weight:400; font-size:24px; margin:0; letter-spacing:-.01em}
  .co .sector{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin-top:4px}
  .co p{font-size:14px; line-height:1.55; color:var(--ink-2); margin:16px 0 0; flex:1}
  .co .link{
    margin-top: 24px;
    font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
    color:var(--ink);
  }
  .co .link::after{
    content:""; width:18px; height:1px; background:var(--ink); display:inline-block;
    transition: width .3s ease;
  }
  .co:hover .link::after{width:34px; background:var(--green)}
  @media (max-width: 1100px){ .companies-grid{grid-template-columns: repeat(2, 1fr)} }
  @media (max-width: 600px){
    .companies-grid{grid-template-columns: 1fr}
    .co .logo{ height: 250px;display: block;margin-bottom: 40px; }
  }

  /* TECHNOLOGY */
  .tech{background: #ffffff; color:var(--ink); overflow:hidden; position:relative}
  .tech::before{
    content:""; position:absolute; top:-200px; right:-200px;
    width: 600px; height:600px; border-radius:50%;
    background: radial-gradient(circle, rgba(0,151,80,.10), transparent 60%);
    filter: blur(40px);
  }
  .tech .sec-head h2{color:var(--ink)}
  .tech .sec-head .label{color:var(--green)}
  .tech .sec-head .label::before{background:var(--green)}
  .tech .sec-head p{color:var(--ink-2)}

  .tech-split{
    display:grid; grid-template-columns: 0.82fr 1.18fr;
    gap: 56px; align-items:center;
  }
  .tech-copy .eyebrow{ margin-bottom: 22px; }
  .tech-h2{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(38px, 4vw, 60px); line-height:1.04; letter-spacing:-.02em;
    margin:0 0 22px; color:var(--ink);
  }
  .tech-h2 em{ font-style:italic; color:var(--green); font-weight:400; }
  .tech-lede{ font-size:16.5px; line-height:1.62; color:var(--ink-2); margin:0 0 34px; max-width:48ch; }
  .tech-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .tech-points li{ display:flex; gap:18px; align-items:center; padding:18px 0; border-top:1px solid var(--line); }
  .tech-points li:first-child{ border-top:none; padding-top:0; }
  .tech-points li:last-child{ padding-bottom:0; }
  .tech-points li .tp-ic{
    flex:0 0 auto; width:42px; height:42px; border-radius:50%;
    background: rgba(0,151,80,.10);
    display:flex; align-items:center; justify-content:center;
    line-height:0;
  }
  .tp-ic svg{ width:21px; height:21px; display:block; margin:0; }
  .tech-points b{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:5px; font-weight:600; }
  .tech-points span{ display:block; font-size:14.5px; line-height:1.5; color:var(--ink-2); }

  .tech-figure{
    margin:0; width:100%;
  }
  .tech-figure img{ width:100%; height:auto; display:block; aspect-ratio: 1084 / 1024; object-fit: contain; }

  @media (max-width: 900px){
    .tech-split{ grid-template-columns: 1fr; gap: 40px; }
  }

  .tech-grid{display:block; position:relative}
  .tech-cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
  .tcard{
    background: #ffffff;
    border:1px solid var(--line);
    padding: 24px 22px 26px;
    border-radius: 4px;
    transition: all .3s ease;
  }
  .tcard:hover{background: rgba(0,151,80,.05); border-color: rgba(0,151,80,.5)}
  .tcard h4{font-family:var(--serif); font-weight:400; font-size:20px; margin:0 0 8px; color:var(--green); letter-spacing:-.005em}
  .tcard p{font-size:13.5px; line-height:1.55; margin:0; color:var(--ink-2)}
  .tcard .tag{font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--green); text-transform:uppercase; margin-bottom:18px}

  .tech-visual{
    align-self:stretch;
    height:100%;
    min-height: 360px;
    position:relative;
    border: 1px solid rgba(255,255,255,.1);
    overflow:hidden;
    background:
      radial-gradient(40% 30% at 70% 30%, rgba(0,151,80,.3), transparent 70%),
      linear-gradient(160deg, #2c2826, #1a1716);
  }
  .tech-visual .ring{
    position:absolute; border:1px solid rgba(0,151,80,.4); border-radius:50%;
    animation: spin 20s linear infinite;
  }
  .tech-visual .ring.r1{width:120%; height:120%; top:-10%; left:-10%; border-style:dashed}
  .tech-visual .ring.r2{width:80%; height:80%; top:10%; left:10%; animation-duration:30s; animation-direction:reverse; border-color:rgba(255,255,255,.15)}
  .tech-visual .ring.r3{width:45%; height:45%; top:27.5%; left:27.5%; border-color:rgba(0,151,80,.6)}
  @keyframes spin{to{transform: rotate(360deg)}}

  /* growth pulses */
  .tech-visual .pulse{
    position:absolute; left:50%; top:50%;
    width:0; height:0;
    border-radius:50%;
    border:1px solid rgba(0,151,80,.55);
    transform: translate(-50%,-50%) scale(.1);
    opacity:0;
    animation: grow 5.4s cubic-bezier(.2,.7,.2,1) infinite;
    pointer-events:none;
    box-sizing: border-box;
  }
  .tech-visual .pulse.p1{ width:120%; height:120%; animation-delay: 0s }
  .tech-visual .pulse.p2{ width:120%; height:120%; animation-delay: 1.35s }
  .tech-visual .pulse.p3{ width:120%; height:120%; animation-delay: 2.70s }
  .tech-visual .pulse.p4{ width:120%; height:120%; animation-delay: 4.05s }
  @keyframes grow{
    0%   { transform: translate(-50%,-50%) scale(.05); opacity: 0; border-width:1.5px }
    8%   { opacity: .9 }
    70%  { opacity: .25 }
    100% { transform: translate(-50%,-50%) scale(1); opacity: 0; border-width: .5px }
  }
  .tech-visual .core{
    position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    text-align:center;
  }
  .tech-visual .core .word{
    font-family:var(--serif); font-weight:300; color:#fff; font-size:48px; letter-spacing:-.02em; line-height:1
  }
  .tech-visual .core .word em{color:var(--green); font-style:italic}
  .tech-visual .core .sub{font-family:var(--mono); font-size:10px; letter-spacing:.32em; color:rgba(255,255,255,.5); margin-top:14px; text-transform:uppercase}
  .tech-visual .dots{
    position:absolute; inset:0; pointer-events:none;
    background-image: radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
  }

  @media (max-width: 900px){
    .tech-grid{grid-template-columns: 1fr}
    .tech-cards{grid-template-columns: 1fr 1fr}
  }
  @media (max-width: 540px){ .tech-cards{grid-template-columns: 1fr} }

  /* GEO */
  .geo{background:#EAEDEB; color:var(--ink);}
  .geo-intro{ max-width: 760px; margin: 0 auto 56px; text-align: center; }
  .geo h2{font-family:var(--serif); font-weight:300; font-size: clamp(34px, 4.6vw, 60px); line-height:1.04; letter-spacing:-.018em; margin:14px 0 18px; color:var(--ink)}
  .geo h2 em{font-style:normal; color:var(--green); font-weight:300}
  .geo p{font-size:17px; color: var(--ink-2); max-width:68ch; line-height:1.6; margin: 0 auto}
  .geo p strong{ color:var(--ink) !important; font-weight:600 }
  .geo-intro .eyebrow{ justify-content:center; display:flex; align-items:center; }
  /* eyebrow override (handles inline styles via specificity + !important) */
  .geo > .wrap .label{ color: var(--ink-3) !important; }
  .geo > .wrap .label > span{ background: var(--ink-3) !important; }

  /* SECTORS */
  .sectors{ background:#EAEDEB; padding: 120px 0; overflow:hidden; }
  .sectors-head{ display:block; margin-bottom: 56px; }
  .sectors-head > div{ margin-bottom: 22px; }
  .sectors-head .label{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); }
  .sectors-head .label::before{ content:none }
  .sectors-head h2{ font-family:var(--serif); font-weight:300; font-size: clamp(36px, 4.6vw, 60px); line-height:1.02; letter-spacing:-.02em; margin:0; text-wrap: balance; color: var(--ink); }
  .sectors-head h2 em{ font-style:italic; color: var(--green); font-weight:400 }
  .sectors-head p{ font-size:16px; color:var(--ink-2); line-height:1.6; margin: 0; max-width: 70ch; }

  .sectors-marquee{
    position:relative;
    overflow:hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4px 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  .sectors-track{
    display:flex; flex-direction:row; gap: 20px;
    animation: sectorsScroll 50s linear infinite;
    will-change: transform;
    width: max-content;
  }
  .sectors-marquee:hover .sectors-track{ animation-play-state: paused; }
  @keyframes sectorsScroll{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

  .sector-card{
    position:relative;
    width: 480px;
    overflow:visible; border-radius: 0;
    background:transparent;
    flex: 0 0 480px;
    margin: 0;
    display: flex; flex-direction: column;
  }
  .sector-card .ph{
    position:relative; width:480px; height:203px;
    overflow:hidden; border-radius:10px;
    box-shadow: 0 18px 40px -28px rgba(0,0,0,.35);
    background:#222;
  }
  .sector-card .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sector-card .ph::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.0) 55%, rgba(0,0,0,.65) 100%);
    pointer-events:none;
  }
  .sector-card .cap{
    position:absolute; left:22px; bottom:18px; right:22px;
    color:#fff; font-family:var(--serif); font-weight:400;
    font-size: 18px; letter-spacing:-.005em;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
    z-index: 2;
  }
  .sector-card .cap-below{
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.4;
  }

  @media (max-width: 900px){
    .sectors-head h2{ white-space: normal }
  }

  /* geo stat badges */
  .geo-stats{
    display:flex; justify-content:center; align-items:center;
    gap: 56px; flex-wrap:wrap;
    margin: 2px auto 48px;
  }
  .geo-stat{ display:flex; align-items:center; gap:14px; }
  .geo-stat .ic{
    width:56px; height:56px; border-radius:50%;
    border:1.5px solid rgba(0,151,80,.35);
    background: rgba(0,151,80,.08);
    display:grid; place-items:center; flex-shrink:0;
  }
  .geo-stat .ic svg{ width:27px; height:27px; display:block; }
  .geo-stat .ic .ic-usa{ width:32px; height:auto; }
  .geo-stat .tx{ display:flex; flex-direction:column; line-height:1.14; text-align:left; white-space:nowrap; }
  .geo-stat .tx b{ font-weight:600; font-size:16px; color:var(--ink); letter-spacing:.005em; }
  .geo-stat .tx span{ font-size:14px; color:var(--ink-2); }

  /* brand strip inside map card */
  .geo-brands{
    display:flex; align-items:stretch;
    margin-top: 22px; padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .geo-brand{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding: 4px 22px;
    border-right: 1px solid var(--line);
  }
  .geo-brand:last-child{ border-right:none; }
  .geo-brand img{ display:block; width:auto; height:auto; object-fit:contain; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .geo-brand.framed img{ height:62px; border-radius:8px; box-shadow:0 8px 18px -12px rgba(35,31,32,.4); }
  .geo-brand.plain img{ max-height:68px; max-width:96%; }
  .geo-brand:hover img{ transform: scale(1.05); }
  @media (max-width: 640px){
    .geo-stats{ gap:28px; }
    .geo-brands{ flex-wrap:wrap; }
    .geo-brand{ flex:0 0 50%; padding:16px 14px; }
    .geo-brand:nth-child(2){ border-right:none; }
    .geo-brand:nth-child(1), .geo-brand:nth-child(2){ border-bottom:1px solid var(--line); }
  }

  .geo-map{
    background:#EAEDEB;
    border:1px solid var(--line);
    border-radius: 12px;
    position:relative; overflow:hidden;
    padding: 13px 36px 32px;
    display:flex; flex-direction:column;
    max-width: 972px;
    margin: 0 auto;
    width: 100%;
  }
  .geo-map .map-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 16px;
  }

  /* state map */
  .state-base{ fill:#E5E7E5; stroke:#fff; stroke-width:1; }
  .us-outline{ fill:none; stroke:#231F20; stroke-width:1.4; stroke-linejoin:round; }

  /* staged reveal — gray base map + outlines are ALWAYS in place */
  #usmap #map-root{ opacity:1; transform:none; }
  .state-base{ transition: fill .42s ease; }
  .state-base.va-on{ fill:#009750; }
  .state-base.tz-on{ fill:#bcdcc6; }
  .draw-line{
    fill:none; stroke-linejoin:round;
    stroke-dasharray: none; stroke-dashoffset: 0;
  }
  #city-labels{ opacity:0; transition: opacity .75s ease; }
  #city-labels.in{ opacity:1; }
  .tz-label{ opacity:0; transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); transform: translateY(6px); }
  .tz-label.in{ opacity:1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    #usmap #map-root{ opacity:1; transform:none; transition:none; }
    .draw-line{ stroke-dashoffset:0 !important; animation:none !important; }
    .tz-label{ transform:none; }
  }

  .pin.flip.up .lbl{ top:-30px; }
  .pin.flip.down .lbl{ top:16px; }



  /* QUOTE / VISION */
  .vision{background: var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .vision .caps-head{ margin-bottom: 0; }
  .vision blockquote{
    font-family:var(--serif); font-weight:500; font-style:italic;
    font-size: clamp(28px, 3.4vw, 48px); line-height:1.16; letter-spacing:-.015em;
    margin:0; color:var(--ink); text-wrap:balance;
  }
  .vision blockquote .mark{color:var(--green); font-style:normal; font-weight:400; margin-right:.18em}
  .vision .sig{margin-top:40px; display:flex; align-items:center; gap:20px}
  .vision .sig .rule{width:60px; height:1px; background:var(--ink)}
  .vision .sig .who{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3)}
  .vision .sig .who b{display:block; color:var(--ink); font-weight:600; letter-spacing:.16em; margin-bottom:4px}

  /* CTA */
  .cta{background: #231F20; color:#fff; position:relative; overflow:hidden; padding: 0}
  .cta::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(50% 60% at 80% 50%, rgba(0,151,80,.3), transparent 60%);
    pointer-events:none;
  }
  .cta-inner{display:grid; grid-template-columns: 1.4fr 1fr; gap:80px; align-items:center; padding-top: 117px; padding-bottom: 117px; position:relative}
  .cta h2{
    font-family:var(--serif); font-weight:300; font-size: clamp(40px, 5vw, 76px);
    line-height:1.02; letter-spacing:-.02em; margin:18px 0 0;
  }
  .cta h2 em{font-style:italic; color: var(--green); font-weight:400}
  .cta .eyebrow{ color: var(--green); }
  .cta .right{display:flex; flex-direction:column; gap:24px; align-items:flex-start}
  .cta .right p{font-size:16px; color:#cfc9c4; line-height:1.6; max-width:42ch}


  /* media stacking */
  @media (max-width: 900px){
    .nav-cta{display:none}
    nav.main{display:none}
    .nav-toggle{display:flex}
    .sec-head{grid-template-columns: 1fr; gap:24px}
    .intro-grid, .tech-grid, .geo-grid, .vision-inner, .cta-inner{grid-template-columns: 1fr}
    .stats{grid-template-columns: 1fr 1fr}
    .stat:nth-child(2){border-right:none}
    .stat:nth-child(1), .stat:nth-child(2){border-bottom:1px solid var(--line)}
    .foot-grid{grid-template-columns: 1fr 1fr}
    .hero-foot{grid-template-columns: 1fr; gap:32px}
    .hero-cta{justify-content:flex-start}
    section{padding: 80px 0}
  }

#dm-loader{
    position:fixed; inset:0; z-index:9999;
    background:#000;
    display:grid; place-items:center;
    opacity:1; transition:opacity .7s ease;
  }
  #dm-loader.done{ opacity:0; pointer-events:none; }
  .dm-loader-stage{ display:flex; flex-direction:column; align-items:center; gap:26px; }
  .dm-spinner{ display:block; transform:rotate(-90deg); }
  .dm-spinner circle{ fill:none; stroke-linecap:round; }
  .dm-spinner .dm-track{ stroke:rgba(255,255,255,.08); stroke-width:4; }
  .dm-spinner .dm-arc{
    stroke-width:4;
    stroke-dasharray:120 320;
    transform-origin:50% 50%;
  }
  .dm-spinner .dm-arc-1{ stroke:#009750; animation:dmSpin 1.05s cubic-bezier(.6,.2,.4,.8) infinite; }
  .dm-spinner .dm-arc-2{ stroke:#EDE9E1; stroke-dasharray:70 230; animation:dmSpin 1.5s linear infinite reverse; opacity:.85; }
  @keyframes dmSpin{ to{ transform:rotate(360deg); } }
  .dm-loader-word{
    font-family:var(--sans), sans-serif;
    font-size:12px; letter-spacing:.42em; text-indent:.42em;
    color:rgba(237,233,225,.62); font-weight:600;
    animation:dmPulse 1.6s ease-in-out infinite;
  }
  @keyframes dmPulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.9 } }
  @media (prefers-reduced-motion: reduce){
    .dm-spinner .dm-arc{ animation-duration:2.4s; }
    .dm-loader-word{ animation:none; opacity:.7; }
  }

.cta-inner{ position:relative; z-index:1; }
  .cta-skyline{
    position:absolute; left:0; right:0; bottom:0;
    height:clamp(140px,15vw,220px); z-index:0; pointer-events:none; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 42%, #000 100%);
            mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 42%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    opacity:0; transition:opacity .9s ease;
  }
  .cta-skyline.in{ opacity:.5; }
  .cta-skyline svg{ width:100%; height:100%; display:block; }
  .cta-skyline .sky-detail{ opacity:0; transition:opacity .9s ease 1.1s; }
  .cta-skyline.in .sky-detail{ opacity:1; }
  .cta-skyline svg{ width:100%; height:100%; display:block; }
  .cta-skyline .sky-fill{ fill:rgba(0,151,80,.06); stroke:none; }
  .cta-skyline .sky-line{ fill:none; stroke:rgba(214,236,224,.42); stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
  .cta-skyline .sky-win{ stroke:rgba(46,209,126,.9); stroke-width:1.4; opacity:0; }
  .cta-skyline.in .sky-win{
    animation-name: winFlicker, winTwinkle;
    animation-duration: 1.4s, 4.2s;
    animation-timing-function: ease, ease-in-out;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
  }
  @keyframes winFlicker{
    0%{opacity:0} 12%{opacity:.75} 22%{opacity:.05} 38%{opacity:.82}
    52%{opacity:.18} 68%{opacity:.62} 100%{opacity:.6}
  }
  @keyframes winTwinkle{
    0%,100%{opacity:.6} 22%{opacity:.24} 48%{opacity:.82} 72%{opacity:.34}
  }
  @media (prefers-reduced-motion: reduce){
    .cta-skyline.in .sky-win{
      animation-name: winTwinkle;
      animation-duration: 7s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: none;
    }
    .cta-skyline svg{ transform:none !important; transition:none !important }
  }

:root{
    --card-shadow: 0 22px 48px -30px rgba(35,31,32,.30), 0 6px 16px -12px rgba(35,31,32,.16);
    --card-shadow-hover: 0 38px 80px -38px rgba(35,31,32,.44), 0 10px 24px -14px rgba(35,31,32,.22);
  }
  [data-depth="flat"]{
    --card-shadow: none;
    --card-shadow-hover: 0 16px 36px -26px rgba(35,31,32,.32);
  }
  [data-depth="elevated"]{
    --card-shadow: 0 30px 70px -34px rgba(35,31,32,.46), 0 10px 26px -16px rgba(35,31,32,.30), inset 0 1px 0 rgba(255,255,255,.6);
    --card-shadow-hover: 0 50px 100px -40px rgba(35,31,32,.55), 0 16px 34px -18px rgba(35,31,32,.34), inset 0 1px 0 rgba(255,255,255,.7);
  }

  body{ text-rendering: optimizeLegibility; }

  /* refined card depth (light surfaces) */
  .co{ box-shadow: var(--card-shadow); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
  .co:hover{ box-shadow: var(--card-shadow-hover); }
  .caps-hero{ box-shadow: var(--card-shadow); }
  .geo-map{ box-shadow: none; }
  .sector-card .ph{ box-shadow: var(--card-shadow); }

  /* section photos — slow light zoom on hover */
  .caps-hero{ overflow:hidden; }
  .caps-hero img{ transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; will-change: transform; }
  .caps-hero:hover img{ transform: scale(1.045); }

  /* dark logo boxes — premium sheen sweep */
  .co .logo.sheen-disabled{ overflow:hidden; }

  /* tech cards — subtle inner light + green glow on hover */
  .tcard{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: background .3s ease, border-color .3s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
  .tcard:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px -34px rgba(0,151,80,.6); transform: translateY(-3px); }

  
  /* buttons — shine sweep */
  [data-buttons="shine"] .btn{ position:relative; overflow:hidden; }
  [data-buttons="shine"] .btn > *{ position:relative; z-index:1; }
  [data-buttons="shine"] .btn::after{
    content:""; position:absolute; top:0; left:-150%; width:55%; height:100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg); pointer-events:none; z-index:0;
  }
  [data-buttons="shine"] .btn:hover::after{ animation: btnShine .85s ease; }
  @keyframes btnShine{ to{ left:170%; } }
  .btn{ transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s ease; }
  .btn-primary{ box-shadow: 0 14px 30px -16px rgba(0,151,80,.7); }
  .btn-primary:hover{ box-shadow: 0 20px 44px -18px rgba(0,151,80,.8); }

  /* scroll progress bar */
  #hifi-progress{
    position:fixed; top:0; left:0; height:3px; width:100%;
    background: linear-gradient(90deg, var(--green), #2bd17e);
    transform: scaleX(0); transform-origin:left; z-index:120;
    will-change: transform;
  }

  /* film grain + vignette */
  #hifi-grain{
    position:fixed; inset:0; z-index:58; pointer-events:none; opacity:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px; mix-blend-mode: overlay;
    transition: opacity .5s ease;
  }
  #hifi-vignette{
    position:fixed; inset:0; z-index:57; pointer-events:none; opacity:0;
    box-shadow: inset 0 0 240px rgba(0,0,0,.20), inset 0 0 80px rgba(0,0,0,.08);
    transition: opacity .5s ease;
  }
  [data-texture="film"] #hifi-grain,
  [data-texture="paper"] #hifi-grain{ opacity:.06; }
  [data-texture="paper"] #hifi-vignette{ opacity:1; }
  [data-motion="dynamic"] #hifi-grain{ animation: grainShift .9s steps(3) infinite; }
  @keyframes grainShift{
    0%{ background-position:0 0 } 33%{ background-position:-7% -4% }
    66%{ background-position:4% -8% } 100%{ background-position:-3% 5% }
  }

  @media (prefers-reduced-motion: reduce){
    #hifi-grain{ animation:none !important; }
    .caps-hero:hover img{ transform:none; }
  }
/* ── Inline style replacements ─────────────────────────────────── */

/* Hero */
.hero-cta .btn { font-size: 14px; }

/* Eyebrow overrides */

/* Overview h2 */
.intro-h2       { margin-top: 24px; font-size: 54px; color: rgb(35,31,32); }
.intro-h2-em    { color: var(--green); font-weight: 400; font-style: italic; }

/* Section body text */
.body-17        { font-size: 17px; }

/* Capabilities spans */
.em-green       { color: var(--green); font-weight: 400; font-style: italic; }
.em-green-bold  { color: var(--green); font-weight: 500; font-style: italic; }

/* Cap h3 */
.cap h3.green   { font-weight: 500; color: var(--green); }

/* Companies grid articles */
.co.center-card {
  text-align: center;
  border-width: 0;
  border-radius: 8px;
  background-color: #fff;
}
.co.no-border   { border-width: 0; border-radius: 8px; }
.co.no-border-white { border-width: 0; border-radius: 8px; background-color: #fff; }

/* Co sector + h3 */
.co .sector-label { text-align: center; font-size: 13px; font-weight: 600; }
.co .co-h3        { font-weight: 500; text-align: center; font-size: 28px; }
.co .co-p         { font-size: 15px; }
.co .link-center  { text-align: center; }

/* Tech eyebrow */

/* Geo map container */
.geo-map-inner  { border-color: rgb(45,135,66); opacity: 1; border-width: 0; }

/* Sectors head */
.sectors-h2     { margin-top: 18px; }

/* Vision */
.vision-h2      { font-weight: 300; }
.vision-h2-em   { color: var(--green); font-weight: 400; font-style: italic; }

/* CTA */
.cta-btns       { display: flex; gap: 12px; flex-wrap: wrap; }
.cta .btn       { font-size: 14px; }

/* ── Specificity fixes — ensure replacement classes win over section rules ── */

/* .intro h2 uses clamp() — override with exact 54px from original inline style */
.intro h2.intro-h2 { font-size: 54px !important; color: rgb(35,31,32) !important; margin-top: 24px; }

/* .caps-dark .cap h3 forces color:var(--ink) — restore green from original */
.caps-dark .cap h3.green { font-weight: 500; color: var(--green) !important; }

/* .geo-map needs the class on the element itself */
.geo-map.geo-map-inner { border-color: rgb(45,135,66); opacity: 1; border-width: 0; }

/* Sectors h2 scoped to container for specificity */
.sectors-head h2.sectors-h2 { margin-top: 18px; }


/* ── Moved from inline <style> blocks in front-page.php ── */
.cta-inner{ position:relative; z-index:1; }
  .cta-skyline{
    position:absolute; left:0; right:0; bottom:0;
    height:clamp(140px,15vw,220px); z-index:0; pointer-events:none; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 42%, #000 100%);
            mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 42%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    opacity:0; transition:opacity .9s ease;
  }
  .cta-skyline.in{ opacity:.5; }
  .cta-skyline svg{ width:100%; height:100%; display:block; }
  .cta-skyline .sky-detail{ opacity:0; transition:opacity .9s ease 1.1s; }
  .cta-skyline.in .sky-detail{ opacity:1; }
  .cta-skyline svg{ width:100%; height:100%; display:block; }
  .cta-skyline .sky-fill{ fill:rgba(0,151,80,.06); stroke:none; }
  .cta-skyline .sky-line{ fill:none; stroke:rgba(214,236,224,.42); stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
  .cta-skyline .sky-win{ stroke:rgba(46,209,126,.9); stroke-width:1.4; opacity:0; }
  .cta-skyline.in .sky-win{
    animation-name: winFlicker, winTwinkle;
    animation-duration: 1.4s, 4.2s;
    animation-timing-function: ease, ease-in-out;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
  }
  @keyframes winFlicker{
    0%{opacity:0} 12%{opacity:.75} 22%{opacity:.05} 38%{opacity:.82}
    52%{opacity:.18} 68%{opacity:.62} 100%{opacity:.6}
  }
  @keyframes winTwinkle{
    0%,100%{opacity:.6} 22%{opacity:.24} 48%{opacity:.82} 72%{opacity:.34}
  }
  @media (prefers-reduced-motion: reduce){
    .cta-skyline.in .sky-win{
      animation-name: winTwinkle;
      animation-duration: 7s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: none;
    }
    .cta-skyline svg{ transform:none !important; transition:none !important }
  }

:root{
    --card-shadow: 0 22px 48px -30px rgba(35,31,32,.30), 0 6px 16px -12px rgba(35,31,32,.16);
    --card-shadow-hover: 0 38px 80px -38px rgba(35,31,32,.44), 0 10px 24px -14px rgba(35,31,32,.22);
  }
  [data-depth="flat"]{
    --card-shadow: none;
    --card-shadow-hover: 0 16px 36px -26px rgba(35,31,32,.32);
  }
  [data-depth="elevated"]{
    --card-shadow: 0 30px 70px -34px rgba(35,31,32,.46), 0 10px 26px -16px rgba(35,31,32,.30), inset 0 1px 0 rgba(255,255,255,.6);
    --card-shadow-hover: 0 50px 100px -40px rgba(35,31,32,.55), 0 16px 34px -18px rgba(35,31,32,.34), inset 0 1px 0 rgba(255,255,255,.7);
  }

  body{ text-rendering: optimizeLegibility; }