/* ==========================================================================
   Stravision service pages - page-level layer on top of site.css
   Loaded by every /service/<slug>/ page. Uses the shared design tokens only.
   ========================================================================== */

/* ---------- Hero: matches the homepage hero (#landing) exactly — same
   margin-top clearing the fixed header, same calc(100vh-75px) sizing,
   same flex-column layout, same static diagonal-grid texture + grain.
   The previous version used 100vh/100svh with padding-top absorbing
   the header (overshooting the first screen by the header's height)
   plus an animated aurora glow, drifting grid, and 9 rising particles —
   all replaced with the homepage's calmer, static treatment for
   consistency across every page that loads this shared stylesheet. ---------- */
.svc-hero{
  position:relative;overflow:hidden;margin-top:75px;background:var(--bg-dark-primary);
  min-height:calc(100vh - 75px);max-height:calc(100vh - 75px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 5%;text-align:center;
}
/* offset in-page anchor targets so they clear the fixed header when scrolled to */
#benefits,#services,.svc-cta-connect{scroll-margin-top:90px;}
html{scroll-behavior:smooth;}
.svc-hero .landing-texture{
  position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:0.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(38,169,154, 0.07) 0px, rgba(38,169,154, 0.07) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(-45deg, rgba(148, 163, 184, 0.05) 0px, rgba(148, 163, 184, 0.05) 1px, transparent 1px, transparent 34px),
    radial-gradient(circle at 30% 25%, rgba(38,169,154, 0.14), transparent 55%),
    radial-gradient(circle at 78% 70%, rgba(30, 58, 95, 0.16), transparent 58%);
}
.svc-hero .landing-grain{
  position:absolute;inset:-50%;z-index:0;pointer-events:none;opacity:0.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  animation:heroGrainShift 1s steps(4) infinite;
}
@keyframes heroGrainShift{0%{transform:translate(0,0);}25%{transform:translate(-2%,1%);}50%{transform:translate(1%,-2%);}75%{transform:translate(-1%,2%);}100%{transform:translate(0,0);}}
@media (prefers-reduced-motion: reduce){.svc-hero .landing-grain{animation:none;}}
.svc-hero-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;}
/* Same bordered eyebrow-pill style as the homepage's section labels
   (.sec-eyebrow) — was plain uppercase text with no border/background,
   now a small pill to match every homepage section header. */
.svc-hero .division-badge{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft);display:inline-block;margin-bottom:18px;padding:6px 14px;border:1px solid rgba(38,169,154,.2);border-radius:6px;background:rgba(38,169,154,.04);}
.svc-hero h1{font-family:var(--font-serif);font-size:clamp(26px,3.8vw,46px);font-weight:700;line-height:1.14;color:var(--text-dark-main);margin:0 auto 18px;text-wrap:balance;}
.svc-hero-desc{font-size:clamp(14px,1.5vw,16.5px);line-height:1.7;color:var(--text-dark-muted);max-width:none;margin:0 auto;text-wrap:balance;}
.svc-hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px;}
.svc-btn{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;padding:14px 24px;border-radius:8px;transition:all var(--transition-normal);}
.svc-btn svg{width:14px;height:14px;fill:currentColor;transition:transform var(--transition-fast);}
.svc-btn:hover svg{transform:translateX(3px);}
.svc-btn-primary{background:var(--teal-primary);color:#FFF;box-shadow:0 14px 34px -14px rgba(38,169,154,.75);}
.svc-btn-primary:hover{background:var(--teal-soft);transform:translateY(-2px);}
.svc-btn-ghost{border:1px solid rgba(38,169,154,.3);color:var(--text-dark-main);background:rgba(38,169,154,.06);}
.svc-btn-ghost:hover{border-color:var(--teal-soft);color:var(--teal-soft);transform:translateY(-2px);}
/* Same scroll hint as the homepage hero: a "SCROLL" label above a
   mouse-shaped outline with a dot travelling down inside it on a loop.
   Replaces the older thin pulsing-line version — kept the .svc-scroll
   class name and structure so every page that already has
   <a class="svc-scroll">SCROLL<i></i></a> in its markup picks up the
   new look with zero HTML changes; only .svc-scroll-mouse/-dot need to
   be added to the markup (see initServiceScrollHint in service.js-less
   pages, or the raw markup update applied sitewide). */
.svc-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;display:inline-flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.24em;color:rgba(203,213,225,.75);text-decoration:none;transition:color var(--transition-fast);}
.svc-scroll:hover{color:var(--teal-soft);}
.svc-scroll i{display:none;}
.svc-scroll .svc-scroll-mouse{width:22px;height:36px;border:1.5px solid rgba(38,169,154,.55);border-radius:12px;position:relative;transition:border-color .2s ease;}
.svc-scroll:hover .svc-scroll-mouse{border-color:var(--teal-soft);}
.svc-scroll .svc-scroll-dot{position:absolute;top:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--teal-soft);animation:svcScrollDot 1.8s ease-in-out infinite;}
@keyframes svcScrollDot{0%{opacity:0;transform:translateY(0);}20%{opacity:1;}80%{opacity:1;}100%{opacity:0;transform:translateY(14px);}}
@media (prefers-reduced-motion: reduce){.svc-scroll .svc-scroll-dot{animation:none;opacity:1;}}

/* subtitles stay on one line on desktop */
@media(min-width:993px){.sec-sub{white-space:nowrap;max-width:none;}}

/* ---------- Lead / overview prose (centered, with animated teal underline) ---------- */
.svc-lead{max-width:820px;margin:0 auto;text-align:center;position:relative;padding-top:26px;}
.svc-lead::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:60px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--teal-soft),transparent);animation:svcLeadLine 3.2s ease-in-out infinite;}
@keyframes svcLeadLine{0%,100%{width:60px;opacity:.65}50%{width:120px;opacity:1}}
.svc-lead p{font-size:15.5px;line-height:1.85;color:var(--text-dark-muted);}
.svc-lead p + p{margin-top:14px;}

/* ---------- Key benefits: the one card grid (cursor glow + tilt) ---------- */
.svc-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1140px;margin:0 auto;}
.svc-benefits.mag-card,.svc-benefits .mag-card{align-items:center;text-align:center;padding:30px 22px;}
.svc-benefits .mag-title{width:100%;}
.svc-benefits .mag-desc{width:100%;}

/* ---------- Insights: divided matrix, no boxes ---------- */
.svc-matrix{display:grid;grid-template-columns:repeat(3,1fr);max-width:1120px;margin:0 auto;text-align:center;border-top:1px solid rgba(38,169,154,.32);border-bottom:1px solid var(--card-dark-border);}
.svc-cell{padding:24px 26px;border-top:1px solid var(--card-dark-border);border-right:1px solid var(--card-dark-border);transition:background var(--transition-fast);}
.svc-matrix > .svc-cell:nth-child(-n+3){border-top:0;}
.svc-cell:nth-child(3n){border-right:0;}
.svc-cell:hover{background:rgba(38,169,154,.05);}
.svc-cell-n{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--teal-soft);transition:color var(--transition-fast);}
.svc-cell:hover .svc-cell-n{color:#26A99A;}
.svc-cell h3{font-size:14.5px;font-weight:700;color:var(--text-dark-main);margin:8px 0 6px;}
.svc-cell p{font-size:12.5px;color:var(--text-dark-muted);line-height:1.62;}

/* ---------- Why us: icon list ---------- */
.svc-why{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1080px;margin:0 auto;text-align:center;}
.svc-why-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 22px;border:1px solid var(--card-dark-border);border-radius:16px;background:rgba(255,255,255,.02);transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);}
.svc-why-item:hover{border-color:rgba(38,169,154,.4);transform:translateY(-4px);box-shadow:0 12px 34px -12px rgba(38,169,154,.2);}
.svc-why-ic{width:52px;height:52px;border-radius:14px;background:rgba(38,169,154,.09);border:1px solid rgba(38,169,154,.2);display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast);}
.svc-why-ic svg{width:24px;height:24px;stroke:var(--teal-soft);fill:none;stroke-width:1.8;}
.svc-why-item:hover .svc-why-ic{background:rgba(38,169,154,.2);border-color:rgba(38,169,154,.45);}
.svc-why-item h3{font-size:14.5px;font-weight:700;color:var(--text-dark-main);margin-bottom:2px;}
.svc-why-item p{font-size:12.5px;color:var(--text-dark-muted);line-height:1.62;}

/* ---------- Related services pills ---------- */
.svc-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:960px;margin:0 auto;}
.svc-pill{background:rgba(255,255,255,.04);border:1px solid var(--card-dark-border);border-radius:6px;color:var(--text-dark-muted);padding:8px 16px;font-size:12px;font-weight:500;transition:all var(--transition-fast);}
.svc-pill:hover{border-color:var(--teal-soft);color:var(--teal-soft);background:rgba(38,169,154,.08);transform:translateY(-2px);}
/* the "All <division> services" link: a small centered pill on its own row.
   The ::before is a zero-height full-width flex spacer that forces this pill
   onto a new line WITHOUT stretching the pill itself (it keeps its own width). */
/* full-width row that always sits below the service pills and centers the link */
.svc-pill-divrow{flex-basis:100%;order:99;display:flex;justify-content:center;margin-top:16px;}
.svc-pill-division{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-color:rgba(38,169,154,.35);color:var(--teal-soft);background:rgba(38,169,154,.07);font-size:12px;font-weight:600;}
.svc-pill-division svg{width:12px;height:12px;flex:0 0 12px;fill:currentColor;transition:transform var(--transition-fast);}
.svc-pill-division:hover{background:rgba(38,169,154,.14);}
.svc-pill-division:hover svg{transform:translateX(3px);}

/* ---------- CTA band ---------- */
.svc-cta{background:var(--bg-dark-secondary);border-top:1px solid var(--card-dark-border);border-bottom:1px solid var(--card-dark-border);padding:44px 5%;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;text-align:center;}
.svc-cta p{font-family:var(--font-serif);font-size:clamp(18px,2.2vw,24px);font-weight:700;color:#FFF;max-width:760px;line-height:1.4;}

@media(max-width:992px){
  .svc-benefits{grid-template-columns:repeat(2,1fr);}
  .svc-why{grid-template-columns:repeat(2,1fr);}
  .svc-matrix{grid-template-columns:repeat(2,1fr);}
  .svc-cell:nth-child(3n){border-right:1px solid var(--card-dark-border);}
  .svc-cell:nth-child(2n){border-right:0;}
  .svc-matrix > .svc-cell:nth-child(3){border-top:1px solid var(--card-dark-border);}
}
@media(max-width:768px){
  .svc-hero-actions{flex-direction:column;}
  .svc-btn{justify-content:center;}
  .svc-benefits,.svc-matrix,.svc-why{grid-template-columns:1fr;}
  .svc-cell{border-right:0!important;}
  .svc-matrix > .svc-cell:nth-child(-n+3){border-top:1px solid var(--card-dark-border);}
  .svc-matrix > .svc-cell:first-child{border-top:0;}
}


/* ==========================================================================
   Extra section patterns. Two kinds:
     * generic  - rendered on every service page (rail, team, CTA band)
     * bespoke  - rendered only where a service supplies the copy (extras.json)
   Each pattern is deliberately a different shape so no page repeats itself.
   ========================================================================== */

/* ---------- Working together: progress rail (site JS lights nodes in order) ---------- */
.svc-rail-wrap{max-width:1100px;margin:0 auto;}

/* ---------- Your team: squares with hover tooltips ---------- */
.svc-team{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:900px;margin:0 auto;}
.svc-team-sq{position:relative;flex:1 1 170px;background:rgba(255,255,255,.03);border:1px solid var(--card-dark-border);border-radius:14px;padding:24px 18px;text-align:center;transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);}
.svc-team-sq:hover{border-color:var(--teal-soft);transform:translateY(-4px);box-shadow:0 0 20px 3px rgba(38,169,154,.14),0 10px 24px -8px rgba(0,0,0,.3);}
.svc-team-badge{width:44px;height:44px;border-radius:12px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--teal-soft);background:rgba(38,169,154,.08);border:1px solid rgba(38,169,154,.2);transition:background var(--transition-fast),border-color var(--transition-fast);}
.svc-team-sq:hover .svc-team-badge{background:rgba(38,169,154,.18);border-color:rgba(38,169,154,.42);}
.svc-team-sq h3{font-size:13px;font-weight:700;color:var(--text-dark-main);letter-spacing:.4px;}
.svc-team-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:rgba(38,169,154,.95);color:#04211D;font-size:11px;font-weight:600;padding:7px 14px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:3;}
.svc-team-tip::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(38,169,154,.95);}
.svc-team-sq:hover .svc-team-tip{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Closing CTA band ---------- */
.svc-cta-band{background:var(--bg-dark-secondary);border-top:1px solid var(--card-dark-border);border-bottom:1px solid var(--card-dark-border);padding:44px 5%;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;text-align:center;}
/* Copy was shortened specifically to fit one line at normal desktop
   widths (see per-division-page text) -- max-width raised from 720px
   and white-space:nowrap added so it actually renders as one line
   instead of just being short enough to sometimes wrap onto two.
   nowrap is dropped below 768px since the viewport is too narrow for
   even the shortened copy to fit without overflowing. */
.svc-cta-band p{font-family:var(--font-serif);font-size:clamp(17px,2.1vw,23px);font-weight:700;color:#FFF;max-width:900px;line-height:1.42;white-space:nowrap;}
@media(max-width:768px){
  .svc-cta-band p{white-space:normal;}
}

/* ---------- Bespoke: two panel diagram with connector ---------- */
.ia-duo{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;max-width:980px;margin:0 auto;}
.ia-duo-panel{background:linear-gradient(135deg,#0D1627 0%,#080D18 100%);border:1px solid var(--card-dark-border);border-radius:16px;padding:32px 30px;text-align:center;transition:border-color var(--transition-fast),transform var(--transition-fast);}
.ia-duo-panel:hover{border-color:var(--teal-soft);transform:translateY(-3px);}
.ia-duo-role{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:10px;}
.ia-duo-panel h3{font-family:var(--font-serif);font-size:21px;font-weight:700;color:var(--text-dark-main);margin-bottom:10px;}
.ia-duo-panel p{font-size:13.5px;color:var(--text-dark-muted);line-height:1.65;}
.ia-duo-link{display:flex;align-items:center;justify-content:center;padding:0 22px;}
.ia-duo-link i{width:44px;height:44px;border-radius:50%;background:var(--teal-primary);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(38,169,154,.07);}
.ia-duo-link svg{width:18px;height:18px;fill:#FFF;}
.ia-duo-note{max-width:900px;margin:20px auto 0;padding:18px 26px;border-radius:12px;background:rgba(38,169,154,.07);border:1px solid rgba(38,169,154,.2);font-size:14px;line-height:1.7;color:var(--text-dark-main);text-align:center;}

/* ---------- Bespoke: vertical numbered timeline ---------- */
.ia-tl{max-width:860px;margin:0 auto;position:relative;padding-left:52px;text-align:left;}
.ia-tl::before{content:'';position:absolute;left:17px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(38,169,154,.5),rgba(148,163,184,.15));}
.ia-tl-item{position:relative;padding:0 0 26px;}
.ia-tl-item:last-child{padding-bottom:0;}
.ia-tl-item::before{content:attr(data-n);position:absolute;left:-52px;top:0;width:36px;height:36px;border-radius:50%;background:var(--bg-dark-secondary);border:1px solid var(--card-dark-border);color:var(--teal-soft);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.ia-tl-item:hover::before{border-color:var(--teal-soft);box-shadow:0 0 0 7px rgba(38,169,154,.07);}
.ia-tl-item h3{font-family:var(--font-serif);font-size:17px;font-weight:700;color:var(--text-dark-main);margin-bottom:6px;}
.ia-tl-item p{font-size:13.5px;color:var(--text-dark-muted);line-height:1.65;max-width:640px;}

/* ---------- Bespoke: exposure / response ledger, equal rows ---------- */
.ia-ledger{max-width:1080px;margin:0 auto;border:1px solid var(--card-dark-border);border-radius:14px;overflow:hidden;}
.ia-ledger-head,.ia-ledger-row{display:grid;grid-template-columns:1fr 1fr;}
.ia-ledger-head span{padding:12px 20px;font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.03);}
.ia-ledger-head span:first-child{color:#F87171;border-right:1px solid var(--card-dark-border);}
.ia-ledger-head span:last-child{color:var(--teal-soft);}
.ia-ledger-row{border-top:1px solid var(--card-dark-border);transition:background var(--transition-fast);}
.ia-ledger-row:hover{background:rgba(255,255,255,.02);}
.ia-ledger-row div{display:flex;align-items:center;min-height:56px;padding:0 20px;font-size:13.5px;line-height:1.5;color:var(--text-dark-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ia-ledger-row div:first-child{border-right:1px solid var(--card-dark-border);}
.ia-ledger-row:hover div:last-child{color:var(--text-dark-main);box-shadow:inset 3px 0 0 var(--teal-soft);}

/* ---------- Bespoke: growth ladder ---------- */
.ia-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;align-items:end;}
.ia-rung{text-align:left;}
.ia-rung-bar{border-radius:12px 12px 0 0;border:1px solid var(--card-dark-border);border-bottom:2px solid var(--teal-primary);background:linear-gradient(180deg,rgba(38,169,154,.05),rgba(255,255,255,.02));padding:18px 20px;display:flex;align-items:flex-end;transition:border-color var(--transition-fast),background var(--transition-fast);}
.ia-rung:nth-child(1) .ia-rung-bar{height:104px;}
.ia-rung:nth-child(2) .ia-rung-bar{height:150px;background:linear-gradient(180deg,rgba(38,169,154,.12),rgba(255,255,255,.02));border-color:rgba(38,169,154,.4);}
.ia-rung:nth-child(3) .ia-rung-bar{height:196px;}
.ia-rung:hover .ia-rung-bar{border-color:var(--teal-soft);background:linear-gradient(180deg,rgba(38,169,154,.16),rgba(255,255,255,.02));}
.ia-rung-stage{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft);}
.ia-rung h3{font-family:var(--font-serif);font-size:17px;font-weight:700;color:var(--text-dark-main);margin:14px 0 6px;}
.ia-rung p{font-size:13px;color:var(--text-dark-muted);line-height:1.62;}

/* ---------- Bespoke: regulatory status strip ---------- */
.ia-strip{display:grid;grid-template-columns:repeat(4,1fr);max-width:960px;margin:0 auto;border:1px solid var(--card-dark-border);border-radius:14px;overflow:hidden;}
.ia-strip-cell{padding:22px 18px;text-align:center;transition:background var(--transition-fast);}
.ia-strip-cell + .ia-strip-cell{border-left:1px solid var(--card-dark-border);}
.ia-strip-cell:hover{background:rgba(38,169,154,.06);}
.ia-strip-cell h3{font-size:13.5px;font-weight:700;color:var(--text-dark-main);margin-bottom:9px;}
.ia-badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:6px;}
.ia-badge.req{background:rgba(38,169,154,.12);color:var(--teal-soft);border:1px solid rgba(38,169,154,.3);}
.ia-badge.exp{background:rgba(255,255,255,.05);color:var(--text-dark-muted);border:1px solid var(--card-dark-border);}

/* ---------- Bespoke: numbered rows, number lights on hover ---------- */
.ia-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 54px;max-width:1060px;margin:0 auto;text-align:left;}
.ia-row{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:22px 14px;border-top:1px solid var(--card-dark-border);border-radius:10px;transition:background var(--transition-fast);}
.ia-rows > .ia-row:nth-child(-n+2){border-top:0;}
.ia-row-n{font-family:var(--font-serif);font-size:28px;font-weight:700;color:rgba(38,169,154,.26);line-height:1;transition:color var(--transition-fast),transform var(--transition-fast),text-shadow var(--transition-fast);}
.ia-row:hover{background:rgba(38,169,154,.05);}
.ia-row:hover .ia-row-n{color:var(--teal-soft);transform:scale(1.18);text-shadow:0 0 18px rgba(38,169,154,.5);}
.ia-row h3{font-size:15px;font-weight:700;color:var(--text-dark-main);margin-bottom:5px;transition:color var(--transition-fast);}
.ia-row:hover h3{color:#FFF;}
.ia-row p{font-size:13px;color:var(--text-dark-muted);line-height:1.6;}

/* ---------- Bespoke: narrow two column panel ---------- */
.ia-practical{display:grid;grid-template-columns:1fr 1.35fr;gap:30px;max-width:820px;margin:0 auto;background:rgba(255,255,255,.03);border:1px solid var(--card-dark-border);border-radius:16px;padding:30px 32px;align-items:start;text-align:left;}
.ia-practical-aside h3{font-family:var(--font-serif);font-size:20px;font-weight:700;color:var(--text-dark-main);line-height:1.28;}
.ia-practical-aside p{margin-top:9px;font-size:13px;color:var(--text-dark-muted);line-height:1.62;}
.ia-practical-body{display:grid;gap:16px;}
.ia-pb-item{padding-left:16px;border-left:2px solid var(--teal-primary);}
.ia-pb-item h3{font-size:14px;font-weight:700;color:var(--text-dark-main);margin-bottom:5px;}
.ia-pb-item p{font-size:12.5px;color:var(--text-dark-muted);line-height:1.65;}

@media(max-width:992px){
  .ia-duo{grid-template-columns:1fr;}
  .ia-duo-link{padding:14px 0;transform:rotate(90deg);}
  .ia-ladder{grid-template-columns:1fr;align-items:stretch;}
  .ia-rung:nth-child(1) .ia-rung-bar,.ia-rung:nth-child(2) .ia-rung-bar,.ia-rung:nth-child(3) .ia-rung-bar{height:auto;}
  .ia-strip{grid-template-columns:repeat(2,1fr);}
  .ia-strip-cell:nth-child(3){border-left:0;}
  .ia-practical{grid-template-columns:1fr;}
  .ia-ledger-row div{white-space:normal;}
}
@media(max-width:768px){
  .ia-ledger-head{display:none;}
  .ia-ledger-row{grid-template-columns:1fr;}
  .ia-ledger-row div{min-height:0;padding:13px 18px;}
  .ia-ledger-row div:first-child{border-right:0;border-bottom:1px solid var(--card-dark-border);}
  .ia-strip{grid-template-columns:1fr;}
  .ia-strip-cell + .ia-strip-cell{border-left:0;border-top:1px solid var(--card-dark-border);}
  .ia-rows{grid-template-columns:1fr;}
  .ia-rows > .ia-row:nth-child(-n+2){border-top:1px solid var(--card-dark-border);}
  .ia-rows > .ia-row:first-child{border-top:0;}
  .ia-tl{padding-left:42px;}
  .ia-tl-item::before{left:-42px;width:30px;height:30px;}
  .ia-practical{padding:24px;}
}


/* ---------- Request a Proposal modal ---------- */
.proposal-modal [hidden],
.proposal-modal [style*="display: none"],
.proposal-modal [style*="display:none"],
.proposal-body[hidden],
.proposal-head[hidden],
.proposal-form[hidden],
.proposal-success[hidden] {
  display: none !important;
}

.proposal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 6, 12, 0.75);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.proposal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.proposal-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-dark-primary);
  border: 1px solid rgba(38, 169, 154, 0.22);
  border-radius: 20px;
  padding: 34px 34px 30px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.proposal-overlay.open .proposal-modal {
  transform: translateY(0) scale(1);
}
.proposal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-dark-border);
  color: var(--text-dark-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.proposal-close:hover {
  color: #fff;
  border-color: var(--teal-soft);
  background: rgba(38, 169, 154, 0.15);
}
.proposal-body {
  transition: opacity 0.25s ease;
}
.proposal-head {
  text-align: center;
  margin-bottom: 22px;
}
.proposal-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-soft);
  margin-bottom: 10px;
  padding: 5px 13px;
  border: 1px solid rgba(38, 169, 154, 0.22);
  border-radius: 6px;
  background: rgba(38, 169, 154, 0.05);
}
.proposal-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--text-dark-main);
  margin: 2px 0 8px;
}
.proposal-sub {
  font-size: 13.5px;
  color: var(--text-dark-muted);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}
.proposal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dark-muted);
}
.pf-field span i {
  color: var(--teal-soft);
  font-style: normal;
  margin-left: 2px;
}
.pf-field input,
.pf-field textarea {
  width: 100%;
  background: var(--bg-dark-secondary);
  border: 1px solid var(--card-dark-border);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark-main);
  font-family: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pf-field input::placeholder,
.pf-field textarea::placeholder {
  color: rgba(148, 163, 184, 0.5);
}
.pf-field input:focus,
.pf-field textarea:focus {
  outline: none;
  border-color: var(--teal-soft);
  background: rgba(38, 169, 154, 0.06);
}
.pf-field textarea {
  resize: vertical;
  min-height: 92px;
}
.pf-error {
  font-size: 12.5px;
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 8px;
  padding: 9px 13px;
}
.pf-submit {
  justify-content: center;
  margin-top: 4px;
  width: 100%;
}

/* Proposal Success State - exact Contact Us design, pulse animation & centering */
.proposal-success {
  text-align: center;
  padding: 34px 14px 20px;
  animation: proposalPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes proposalPopIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.proposal-success-ic {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-soft);
  background: rgba(38, 169, 154, 0.12);
  border: 1px solid rgba(38, 169, 154, 0.35);
  box-shadow: 0 0 24px rgba(38, 169, 154, 0.18);
  animation: proposalPulse 2s ease-in-out infinite;
}
@keyframes proposalPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(38, 169, 154, 0.18);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 32px rgba(38, 169, 154, 0.32);
  }
}
.proposal-success-ic svg {
  width: 34px;
  height: 34px;
  stroke: var(--teal-soft);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proposal-success h2,
.proposal-success h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 28px);
  font-weight: 700;
  color: var(--text-dark-main);
  margin-bottom: 10px;
}
.proposal-success p {
  font-size: 14.5px;
  color: var(--text-dark-muted);
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 24px;
}
.proposal-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.proposal-done,
.proposal-again {
  min-width: 140px;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all var(--transition-fast);
}
.proposal-again {
  border: 1px solid var(--card-dark-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dark-main);
}
.proposal-again:hover {
  border-color: var(--teal-soft);
  background: rgba(38, 169, 154, 0.12);
  color: #fff;
}
@media (max-width: 560px) {
  .proposal-modal {
    padding: 28px 20px 24px;
  }
  .pf-row {
    grid-template-columns: 1fr;
  }
  .proposal-success-actions {
    flex-direction: column;
  }
  .proposal-done,
  .proposal-again {
    width: 100%;
  }
}


/* ==========================================================================
   Selected bespoke section types + motion
   (compare, stepflow, icongrid) and motion enhancements for
   existing duo / rows / practical. Motion keys off the site's .vis reveal.
   ========================================================================== */

/* ---- 10. Compare: them vs us ---- */
.nx-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1060px;margin:0 auto;}
.nx-comp-col{border:1px solid var(--card-dark-border);border-radius:16px;padding:24px 26px;opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),border-color .2s;}
.nx-comp-col.them{background:rgba(255,255,255,.02);}
.nx-comp-col.us{background:rgba(38,169,154,.06);border-color:rgba(38,169,154,.32);}
.sv-up.vis .nx-comp-col.them{opacity:1;transform:translateY(0);transition-delay:.05s;}
.sv-up.vis .nx-comp-col.us{opacity:1;transform:translateY(0);transition-delay:.18s;}
.nx-comp-h{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;}
.nx-comp-col.them .nx-comp-h{color:var(--text-dark-muted);}
.nx-comp-col.us .nx-comp-h{color:var(--teal-soft);}
.nx-comp-li{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--card-dark-border);font-size:12.5px;color:var(--text-dark-muted);line-height:1.45;opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease;}
.nx-comp-col.us .nx-comp-li{color:var(--text-dark-main);transform:translateX(8px);}
.nx-comp-col .nx-comp-li:first-of-type{border-top:0;}
.sv-up.vis .nx-comp-li{opacity:1;transform:translateX(0);}
.sv-up.vis .nx-comp-col .nx-comp-li:nth-child(2){transition-delay:.25s;}
.sv-up.vis .nx-comp-col .nx-comp-li:nth-child(3){transition-delay:.35s;}
.sv-up.vis .nx-comp-col .nx-comp-li:nth-child(4){transition-delay:.45s;}
.sv-up.vis .nx-comp-col .nx-comp-li:nth-child(5){transition-delay:.55s;}
.nx-comp-li svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;}
.nx-x{stroke:#F87171;} .nx-c{stroke:var(--teal-soft);}

/* ---- 11. Step flow: horizontal, animated connecting line ---- */
.nx-flow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;max-width:1080px;margin:0 auto;position:relative;}
.nx-flow-step{text-align:center;padding:0 14px;position:relative;}
.nx-flow-step::after{content:'';position:absolute;top:22px;left:50%;width:100%;height:2px;background:var(--teal-primary);transform:scaleX(0);transform-origin:left;transition:transform .5s ease;}
.nx-flow-step:last-child::after{display:none;}
.sv-up.vis .nx-flow-step::after{transform:scaleX(1);}
.sv-up.vis .nx-flow-step:nth-child(1)::after{transition-delay:.25s;}
.sv-up.vis .nx-flow-step:nth-child(2)::after{transition-delay:.65s;}
.sv-up.vis .nx-flow-step:nth-child(3)::after{transition-delay:1.05s;}
.sv-up.vis .nx-flow-step:nth-child(4)::after{transition-delay:1.45s;}
.nx-flow-dot{width:46px;height:46px;border-radius:50%;margin:0 auto 14px;position:relative;z-index:1;background:var(--bg-dark-secondary);border:1px solid rgba(38,169,154,.4);display:flex;align-items:center;justify-content:center;color:var(--teal-soft);font-weight:800;font-size:14px;opacity:0;transform:scale(.5);transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1);}
.sv-up.vis .nx-flow-step:nth-child(1) .nx-flow-dot{opacity:1;transform:scale(1);transition-delay:.1s;}
.sv-up.vis .nx-flow-step:nth-child(2) .nx-flow-dot{opacity:1;transform:scale(1);transition-delay:.5s;}
.sv-up.vis .nx-flow-step:nth-child(3) .nx-flow-dot{opacity:1;transform:scale(1);transition-delay:.9s;}
.sv-up.vis .nx-flow-step:nth-child(4) .nx-flow-dot{opacity:1;transform:scale(1);transition-delay:1.3s;}
.nx-flow-step h3{font-size:13.5px;color:var(--text-dark-main);margin-bottom:5px;}
.nx-flow-step p{font-size:12px;color:var(--text-dark-muted);line-height:1.5;}

/* ---- 15. Icon feature grid: staggered rise + icon float on hover ---- */
.nx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1080px;margin:0 auto;}
.nx-grid-card{padding:26px 22px;border:1px solid var(--card-dark-border);border-radius:16px;background:rgba(255,255,255,.02);text-align:center;opacity:0;transform:translateY(28px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),border-color .2s;}
.nx-grid-card:hover{border-color:rgba(38,169,154,.4);transform:translateY(-4px);}
.sv-up.vis .nx-grid-card{opacity:1;transform:translateY(0);}
.sv-up.vis .nx-grid-card:nth-child(2){transition-delay:.12s;}
.sv-up.vis .nx-grid-card:nth-child(3){transition-delay:.24s;}
.sv-up.vis .nx-grid-card:nth-child(4){transition-delay:.36s;}
.sv-up.vis .nx-grid-card:nth-child(5){transition-delay:.48s;}
.sv-up.vis .nx-grid-card:nth-child(6){transition-delay:.6s;}
.nx-grid-ic{width:48px;height:48px;margin:0 auto 14px;border-radius:12px;background:rgba(38,169,154,.09);border:1px solid rgba(38,169,154,.2);display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background .2s;}
.nx-grid-card:hover .nx-grid-ic{transform:translateY(-3px);background:rgba(38,169,154,.18);}
.nx-grid-ic svg{width:22px;height:22px;stroke:var(--teal-soft);fill:none;stroke-width:1.8;}
.nx-grid-card h3{font-size:14px;color:var(--text-dark-main);margin-bottom:6px;}
.nx-grid-card p{font-size:12.5px;color:var(--text-dark-muted);line-height:1.6;}

/* ---- Motion for existing DUO: panels slide in from sides, connector pulses ---- */
.ia-duo .ia-duo-panel{opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),border-color .2s;}
.ia-duo .ia-duo-panel:first-child{transform:translateX(-30px);}
.ia-duo .ia-duo-panel:last-child{transform:translateX(30px);}
.ia-duo .ia-duo-link{opacity:0;transform:scale(.6);transition:opacity .4s ease .35s,transform .4s cubic-bezier(.34,1.56,.64,1) .35s;}
.sv-up.vis.ia-duo .ia-duo-panel,.sv-up.vis .ia-duo .ia-duo-panel{opacity:1;transform:translateX(0);}
.sv-up.vis.ia-duo .ia-duo-link,.sv-up.vis .ia-duo .ia-duo-link{opacity:1;transform:scale(1);}
.ia-duo-link i{animation:nxPulse 2.4s ease-in-out infinite;}
@keyframes nxPulse{0%,100%{box-shadow:0 0 0 10px rgba(38,169,154,.07);}50%{box-shadow:0 0 0 14px rgba(38,169,154,.14);}}

/* ---- Motion for existing ROWS: stagger up, number springs ---- */
.ia-rows .ia-row{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),background .15s;}
.sv-up.vis .ia-rows .ia-row,.sv-up.vis.ia-rows .ia-row{opacity:1;transform:translateY(0);}
.sv-up.vis .ia-row:nth-child(2){transition-delay:.08s;}
.sv-up.vis .ia-row:nth-child(3){transition-delay:.16s;}
.sv-up.vis .ia-row:nth-child(4){transition-delay:.24s;}
.sv-up.vis .ia-row:nth-child(5){transition-delay:.32s;}
.sv-up.vis .ia-row:nth-child(6){transition-delay:.4s;}

/* ---- PRACTICAL: aside vertically centered + motion ---- */
.ia-practical{align-items:center;}
.ia-practical-aside{align-self:center;}
.ia-practical-body .ia-pb-item{opacity:0;transform:translateX(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.sv-up.vis .ia-pb-item{opacity:1;transform:translateX(0);}
.sv-up.vis .ia-pb-item:nth-child(2){transition-delay:.12s;}
.sv-up.vis .ia-pb-item:nth-child(3){transition-delay:.24s;}

@media(max-width:860px){
  .nx-compare,.nx-grid{grid-template-columns:1fr;}
  .nx-flow{grid-auto-flow:row;grid-template-columns:1fr;}
  .nx-flow-step::after{display:none!important;}
}
@media(prefers-reduced-motion:reduce){
  .nx-comp-col,.nx-comp-li,.nx-flow-dot,.nx-flow-step::after,.nx-grid-card,
  .ia-duo .ia-duo-panel,.ia-duo .ia-duo-link,.ia-rows .ia-row,.ia-pb-item{
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important;}
}




/* ---------- Legal / policy pages ---------- */
.legal-hero{padding:130px 5% 40px;text-align:center;background:var(--bg-dark-primary);position:relative;overflow:hidden;}
.legal-hero .division-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:14px;}
.legal-hero h1{font-family:var(--font-serif);font-size:clamp(28px,4vw,44px);font-weight:700;color:var(--text-dark-main);line-height:1.14;margin:0 auto 12px;}
.legal-hero p{font-size:14.5px;color:var(--text-dark-muted);max-width:640px;margin:0 auto;line-height:1.7;}
.legal-hero .legal-updated{margin-top:16px;font-size:12px;color:rgba(148,163,184,.6);letter-spacing:.04em;}
.legal-wrap{max-width:820px;margin:0 auto;padding:20px 5% 90px;}
.legal-wrap section{padding:26px 0;border-top:1px solid var(--card-dark-border);}
.legal-wrap section:first-child{border-top:0;}
.legal-wrap h2{font-family:var(--font-serif);font-size:20px;font-weight:700;color:var(--text-dark-main);margin-bottom:12px;display:flex;gap:12px;align-items:baseline;}
.legal-wrap h2 .legal-n{font-size:13px;font-weight:800;color:var(--teal-soft);letter-spacing:.08em;flex:0 0 auto;}
.legal-wrap h3{font-size:14.5px;font-weight:700;color:var(--text-dark-main);margin:16px 0 6px;}
.legal-wrap p{font-size:14px;line-height:1.8;color:var(--text-dark-muted);margin-bottom:12px;}
.legal-wrap ul{list-style:none;margin:0 0 12px;padding:0;}
.legal-wrap li{position:relative;padding-left:20px;font-size:14px;line-height:1.75;color:var(--text-dark-muted);margin-bottom:8px;}
.legal-wrap li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--teal-soft);}
.legal-wrap a{color:var(--teal-soft);}
.legal-wrap strong{color:var(--text-dark-main);font-weight:700;}
.legal-note{margin-top:8px;padding:16px 20px;border:1px solid rgba(38,169,154,.2);border-radius:12px;background:rgba(38,169,154,.05);font-size:13px;line-height:1.7;color:var(--text-dark-muted);}

/* ---------- Legal sub-topic jump nav ---------- */
.legal-wrap section[id]{scroll-margin-top:96px;}
.legal-jump{max-width:820px;margin:0 auto;padding:0 5%;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.legal-jump a{display:inline-block;padding:8px 16px;border:1px solid var(--card-dark-border);border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--text-dark-muted);text-decoration:none;transition:border-color .25s ease,color .25s ease,background .25s ease;}
.legal-jump a:hover{border-color:var(--teal-soft);color:var(--text-dark-main);background:rgba(38,169,154,.06);}
.legal-part{padding-top:34px;}
.legal-part-head{display:flex;align-items:center;gap:14px;margin-bottom:4px;padding-top:30px;border-top:1px solid var(--card-dark-border);}
.legal-part:first-of-type .legal-part-head{border-top:0;padding-top:0;}
.legal-part-head .legal-part-eyebrow{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-soft);}
.legal-part-title{font-family:var(--font-serif);font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--text-dark-main);margin:2px 0 6px;line-height:1.15;}
.legal-part-lead{font-size:13.5px;color:var(--text-dark-muted);line-height:1.7;margin-bottom:6px;}
.legal-retention-table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:13.5px;}
.legal-retention-table td{padding:9px 12px;border-bottom:1px solid var(--card-dark-border);color:var(--text-dark-muted);line-height:1.5;}
.legal-retention-table td:first-child{color:var(--text-dark-main);font-weight:600;width:52%;}
.legal-retention-table tr:last-child td{border-bottom:0;}


/* ==========================================================================
   RESPONSIVE REFINEMENTS (tablet + mobile) — appended, cascades last
   ========================================================================== */

/* --- Tablet layer for bespoke section patterns (768–992): 2-up instead of
   jumping straight to a single column, so tablet width isn't wasted. --- */
@media (max-width: 992px) and (min-width: 769px){
  .nx-grid{ grid-template-columns: repeat(2, 1fr); }
  .ia-ladder{ grid-template-columns: repeat(2, 1fr); }
  .ia-strip{ grid-template-columns: repeat(2, 1fr); }
}

/* --- Service hero: tighten top padding on small phones so the fold sits
   right and the scroll cue stays reachable. --- */
@media (max-width: 600px){
  .svc-hero{ padding: 96px 6% 72px; }
  .svc-lead p{ font-size: 15px; }
  .svc-cta-band{ padding: 34px 6%; }
}

/* --- Team squares: on small phones go full single column rather than an
   awkward 170px two-up that clips. --- */
@media (max-width: 560px){
  .svc-team-sq{ flex: 1 1 100%; }
}

/* --- Tap-target floors for pills / close buttons / jump links --- */
@media (max-width: 992px){
  .svc-pill,.svc-pill-division{ padding: 11px 18px; }
  .legal-jump a{ padding: 11px 18px; }
  .proposal-close{ width: 42px; height: 42px; font-size: 24px; }
}

/* --- Legal retention table: allow horizontal scroll on very narrow screens
   so long cells are readable instead of being clipped by overflow:hidden. --- */
@media (max-width: 560px){
  .legal-retention-table{ display: block; overflow-x: auto; white-space: nowrap; }
  .legal-retention-table td{ white-space: normal; }
  .legal-hero{ padding: 112px 6% 34px; }
  .legal-wrap{ padding: 18px 6% 72px; }
  .legal-part-head{ flex-wrap: wrap; }
}

/* --- Proposal modal: comfortable on tiny screens --- */
@media (max-width: 400px){
  .proposal-modal{ padding: 26px 16px 22px; }
  .proposal-overlay{ padding: 14px; }
}


/* ==========================================================================
   PREMIUM HYBRID MOBILE (<=600px) — progressive disclosure
   Detailed card sections collapse to scannable title tiles; detail folds
   open on tap with a +/x toggle that matches the FAQ. Desktop untouched.
   Driven by JS that adds .mob-acc to each tile and toggles .open.
   ========================================================================== */
@media (max-width: 600px){
  /* --- section rhythm: compact, no big voids --- */
  .sec-approach,.sec-values,.sec-commitment{ padding-top:30px !important; padding-bottom:32px !important; }
  .sec-head{ margin-bottom:16px !important; }
  .sec-title{ font-size:22px !important; line-height:1.22 !important; }
  .sec-sub{ font-size:13.5px !important; }
  .network-strip{ padding:22px 0 26px !important; }
  .svc-cta-connect,.svc-cta{ padding-top:30px !important; padding-bottom:30px !important; }

  /* --- shared accordion tile shell (applied via .mob-acc) --- */
  .mob-acc{ position:relative; cursor:pointer; text-align:left !important; }
  .mob-acc .mob-plus{ position:absolute; right:16px; top:15px; width:20px; height:20px;
    color:var(--teal-soft); font-size:20px; line-height:20px; text-align:center;
    transition:transform .28s ease; pointer-events:none; }
  .mob-acc.open .mob-plus{ transform:rotate(45deg); }
  .mob-acc .mob-body{ max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s ease, opacity .22s ease, margin-top .22s ease; }
  .mob-acc.open .mob-body{ max-height:260px; opacity:1; margin-top:8px; }

  /* --- WHAT YOU GET: mag-card grid -> tiles --- */
  .svc-benefits.mag-grid{ display:flex !important; flex-direction:column !important; gap:8px !important; }
  .svc-benefits .mag-card{ padding:14px 44px 14px 16px !important; align-items:flex-start !important;
    border-radius:10px !important; }
  .svc-benefits .mag-title{ font-size:14px !important; margin:0 !important; }
  .svc-benefits .mag-desc{ font-size:12.5px !important; }

  /* --- OUR APPROACH / INSIGHTS: matrix cells -> tiles --- */
  .svc-matrix{ display:flex !important; flex-direction:column !important; border:0 !important; gap:8px; }
  .svc-matrix .svc-cell{ border:1px solid var(--card-dark-border) !important; border-radius:10px !important;
    padding:14px 44px 14px 16px !important; }
  .svc-matrix .svc-cell h3{ font-size:14px !important; margin:2px 0 0 !important; }
  .svc-matrix .svc-cell p{ font-size:12.5px !important; }

  /* --- WHY US: icon+title tiles --- */
  .svc-why{ grid-template-columns:1fr !important; gap:8px !important; }
  .svc-why-item{ flex-direction:row !important; align-items:center !important; flex-wrap:wrap !important;
    text-align:left !important; padding:12px 44px 12px 14px !important; gap:12px !important; }
  .svc-why-item .svc-why-ic{ flex:0 0 auto; }
  .svc-why-item h3{ font-size:14px !important; margin:0 !important; }
  .svc-why-item p{ font-size:12.5px !important; }
  .svc-why-item .mob-plus{ top:50%; margin-top:-10px; }

  /* --- OVERVIEW prose: 3-line clamp + read more --- */
  .svc-lead p{ font-size:14px !important; line-height:1.7 !important; }
  .svc-lead.mob-clamp p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .svc-lead.mob-clamp.open p{ -webkit-line-clamp:unset; overflow:visible; }
  .mob-more{ display:inline-block; margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.04em;
    color:var(--teal-soft); background:none; border:none; padding:6px 0; cursor:pointer; }

  /* --- bespoke rows: tighten --- */
  .nx-compare,.nx-grid,.ia-rows,.ia-duo,.ia-strip,.ia-ladder{ gap:8px !important; }

  /* --- related pills stay compact chips --- */
  .svc-pills{ gap:8px !important; }
}