/* FirsTeck EDC marketing site — shared stylesheet (home + compliance + integrations + faq + solutions/* + insights/*).
   Clinical palette: cool teal-blue accents on airy blue-tinted whites. */
:root{
  --paper:#FFFFFF; --band:#EDF5F8; --band-2:#E2EEF3; --ink:#0F1B24; --ink-2:#33454F; --muted:#546873; --faint:#546873;
  --line:#D3E0E7; --line-strong:#AFC6D1;
  --blue:#0E7490; --blue-ink:#0B4A5F; --verify:#0C8A5E; --verify-bg:#E4F2EB; --freeze:#A2323F; --freeze-bg:#F5E7E8;
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --maxw:1180px; --pad:32px;
  /* fluid type scale (reference-exact): interpolates 375px→1440px viewports */
  --t-h1: clamp(2rem, calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)), 4rem);
  --t-h2: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem);
  --t-h3: clamp(1.5rem, calc(1.5rem + .375 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem);
  --t-h4: clamp(1.25rem, calc(1.25rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.375rem);
  --t-h5: clamp(1rem, calc(1rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.125rem);
  --curve-a: cubic-bezier(0,0,1,1); --curve-c: cubic-bezier(0,.56,.46,1); --curve-d: cubic-bezier(.6,0,.4,1);
  --dur-fast:.1s; --dur-short:.2s; --dur-medium:.3s; --dur-long:.4s;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
@media(max-width:600px){:root{--pad:20px}}
a{color:inherit; text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--sans); font-weight:500; letter-spacing:-0.025em; line-height:1.12; text-wrap:balance}
::selection{background:#0D1317;color:#fff}

.kicker{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:#000}

/* buttons — measured from the reference: 14px/500 pills, 36px (40px lg), radius 40px, no borders */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:14px; font-weight:500; height:36px; padding:0 20px; border:none; border-radius:40px; cursor:pointer; transition:background .15s, color .15s}
.btn:focus-visible{outline:3px solid #9FD3E3; outline-offset:2px}
.btn-solid{background:#000; color:#fff}
.btn-solid:hover{background:#333}
.btn-line{background:rgba(0,0,0,.05); color:#000}
.btn-line:hover{background:rgba(0,0,0,.1)}
.btn-lg{height:40px; padding:0 22px}

/* nav — measured from the reference: 13px/500 links clustered after the logotype, pill actions right */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px}
.wordmark{display:flex; align-items:center; gap:9px}
.wordmark b{font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-0.02em; color:#000}
.nav-links{display:flex; gap:26px; font-size:13px; font-weight:500; color:#000}
.nav-links a{padding:4px 0}
.nav-links a:hover, .nav-links a[aria-current="page"]{opacity:.6}
/* ≤960px the inline rail is replaced by the hamburger panel (.m-nav, built by welcome.js). */
@media(max-width:960px){.nav-links{display:none}}

/* nav dropdowns — OpenAI-style panels, pure CSS (hover + :focus-within; CSP-safe, no JS).
   Parent links stay clickable (touch = navigate). Panel sits flush under the item, left-aligned so
   sub-item text lines up with the trigger label (-20px = 8px panel pad + 12px item pad).
   The transparent 8px padding-top on .nav-sub is the hover bridge between trigger and panel.
   Sub-link hover fade comes from the existing .nav-links a:hover rule. */
.nav-links .has-sub{position:relative; display:inline-flex}
.nav-links .nav-sub{position:absolute; top:100%; left:-20px; z-index:60; padding-top:8px; opacity:0; visibility:hidden; transition:opacity .15s var(--curve-d), visibility .15s var(--curve-d)}
.nav-links .has-sub:hover .nav-sub, .nav-links .has-sub:focus-within .nav-sub{opacity:1; visibility:visible}
/* touch: welcome.js toggles .open — first tap shows the panel, second tap follows the trigger link */
.nav-links .has-sub.open .nav-sub{opacity:1; visibility:visible}
.nav-sub-in{display:flex; flex-direction:column; min-width:230px; padding:8px; background:#fff; border:1px solid #E3E4E8; border-radius:12px; box-shadow:0 1px 2px rgba(15,27,36,.04), 0 12px 28px -22px rgba(15,27,36,.18)}
.nav-links .nav-sub-in a{display:block; padding:8px 12px; font-size:14px; font-weight:500; color:#000; white-space:nowrap; border-radius:8px}
/* hamburger (≤960px) — button injected by welcome.js into the header's pill cluster */
.nav-burger{display:none; width:40px; height:36px; border:none; border-radius:40px; background:rgba(0,0,0,.05); cursor:pointer; align-items:center; justify-content:center; padding:0; flex:none}
.nav-burger:hover{background:rgba(0,0,0,.1)}
.nav-burger:focus-visible{outline:3px solid #9FD3E3; outline-offset:2px}
.nav-burger .nb{position:relative; display:block; width:16px; height:2px; background:#000; border-radius:2px; transition:background .15s}
.nav-burger .nb::before, .nav-burger .nb::after{content:""; position:absolute; left:0; width:16px; height:2px; background:#000; border-radius:2px; transition:transform .2s var(--curve-d), top .2s var(--curve-d)}
.nav-burger .nb::before{top:-5px}
.nav-burger .nb::after{top:5px}
.nav-burger[aria-expanded="true"] .nb{background:transparent}
.nav-burger[aria-expanded="true"] .nb::before{top:0; transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] .nb::after{top:0; transform:rotate(-45deg)}
@media(max-width:960px){.nav-burger{display:inline-flex}}
/* very small phones: the demo pill leaves the header (it lives in the panel + hero + CTA) */
@media(max-width:480px){.nav-in .btn-solid{display:none}}

/* mobile panel — the nav rail cloned by welcome.js into a full-width dropdown under the sticky header.
   Group headers keep the two-tap contract: first tap expands the group, second tap follows the link. */
.m-nav{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid rgba(0,0,0,.1); box-shadow:0 24px 40px -28px rgba(15,27,36,.3); max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px); overflow-y:auto; -webkit-overflow-scrolling:touch}
.m-nav.open{display:block}
@media(min-width:961px){.m-nav{display:none !important}}
.m-nav .m-in{padding:6px 18px calc(22px + env(safe-area-inset-bottom))}
.m-nav .nav-links{display:flex; flex-direction:column; gap:0; font-size:16px}
.m-nav .nav-links>a, .m-nav .has-sub>a:first-child{display:flex; align-items:center; justify-content:space-between; padding:14px 2px; font-size:16px; font-weight:500; border-bottom:1px solid rgba(0,0,0,.06)}
.m-nav .has-sub{display:block; position:static}
.m-nav .has-sub>a:first-child::after{content:"+"; font-size:18px; font-weight:400; color:rgba(0,0,0,.45); line-height:1; transition:transform .2s var(--curve-d)}
.m-nav .has-sub.open>a:first-child::after{content:"+"; transform:rotate(45deg)}
.m-nav .nav-sub{position:static; opacity:1; visibility:visible; padding:0; display:none; transition:none}
.m-nav .has-sub.open .nav-sub{display:block}
.m-nav .has-sub.open>a:first-child{border-bottom-color:transparent}
.m-nav .nav-sub-in{min-width:0; padding:0 0 12px; background:transparent; border:none; border-radius:0; box-shadow:none}
.m-nav .nav-sub-in a{padding:10px 14px; font-size:15px; color:rgba(0,0,0,.72); white-space:normal}
.m-nav .m-cta{display:flex; gap:10px; padding:18px 2px 4px}
.m-nav .m-cta .btn{flex:1; justify-content:center}

/* subpage hero */
.page-hero{background:#fff}
.page-hero-in{padding:58px 0 56px}
.crumbs{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(0,0,0,.6); margin-bottom:16px}
.crumbs a{color:#000}
.page-hero h1{font-size:var(--t-h2); line-height:1.16}
.page-hero p{margin-top:14px; color:var(--ink-2); max-width:62ch; font-size:1.08rem}

/* section scaffolding */
section{padding:96px 0}
section.wrap{padding-top:96px; padding-bottom:96px}
@media(max-width:640px){section{padding:58px 0} section.wrap{padding-top:58px; padding-bottom:58px}}
.lede{max-width:64ch}
.lede h2{font-size:var(--t-h3); margin-top:14px; line-height:1.25}
.lede p{margin-top:16px; font-size:1.1rem; color:var(--ink-2)}

/* shared card surface */
.phase, .stat, .lrow{background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(15,27,36,.04), 0 12px 28px -22px rgba(15,27,36,.18); transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease}
.phase:hover, .stat:hover, .lrow:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(15,27,36,.05), 0 20px 40px -20px rgba(15,27,36,.28); border-color:var(--line-strong)}
@media(prefers-reduced-motion:reduce){.phase,.stat,.lrow,.phase:hover,.stat:hover,.lrow:hover{transform:none; transition:none}}

/* the loop — three cards */
.loop{margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:820px){.loop{grid-template-columns:1fr}}
.phase{padding:30px 28px}
.phase .idx{font-family:var(--sans); font-size:2.2rem; font-weight:800; line-height:1; color:var(--blue)}
.phase .plab{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.phase h3{font-size:1.3rem; margin-top:6px}
.phase p{margin-top:12px; color:var(--ink-2); font-size:.98rem}
.phase ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--ink)}
.phase li{padding-left:18px; position:relative}
.phase li::before{content:"—"; position:absolute; left:0; color:var(--faint)}

/* architecture — dark ledger */
.arch{background:var(--ink); color:#DEE5F0}
.arch .kicker{color:#8FC7D8}
.arch .lede h2{color:#fff}
.arch .lede p{color:#AEBecd; color:#AEC3CD}
.arch-in{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; margin-top:46px}
@media(max-width:880px){.arch-in{grid-template-columns:1fr; gap:34px}}
.arch dl{margin:0; display:flex; flex-direction:column; gap:26px}
.arch dt{font-family:var(--sans); font-size:1.22rem; font-weight:800; color:#fff}
.arch dd{margin:8px 0 0; color:#AEC3CD; font-size:.97rem}
.arch dd code{font-family:var(--mono); color:#8FC7D8; font-size:.88em}
.rls{border:1px solid #23404C; border-radius:10px; background:#0A141A; overflow:hidden; font-family:var(--mono); font-size:12.5px}
.rls .h{padding:11px 16px; border-bottom:1px solid #23404C; color:#6E8B98; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px}
.rls .r{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid #14252E; color:#C0D4DC}
.rls .r:last-child{border-bottom:0}
.rls .r .tn{color:#8FC7D8}
.rls .r .st{margin-left:auto}
.rls .r.ok .st{color:var(--verify)}
.rls .r.no{color:#6E8B98}
.rls .r.no .st{color:#C46A76}
.rls .r.pol{background:#0E2029; color:#DEE5F0}
.rls .r.pol .st{color:#8FC7D8}

/* AI + agents */
.two{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
@media(max-width:880px){.two{grid-template-columns:1fr; gap:32px}}
.two h2{font-size:var(--t-h3); line-height:1.25}
.two p{margin-top:16px; color:var(--ink-2); font-size:1.02rem}
.two p + p{margin-top:14px}
.term{border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:#0A141A; box-shadow:0 24px 44px -34px rgba(10,20,26,.6)}
.term .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:#101C24; border-bottom:1px solid #1D323C; font-family:var(--mono); font-size:11px; color:#6E8B98}
.term .bar i{width:10px; height:10px; border-radius:50%; background:#24404C}
.term pre{margin:0; padding:18px; font-family:var(--mono); font-size:12.6px; line-height:1.85; color:#C0D4DC; overflow-x:auto}
.term .c{color:#57707C}.term .p{color:#67B7D1}.term .g{color:#57C99A}.term .y{color:#E0B872}

/* compliance ledger */
.ledger{margin-top:44px; display:flex; flex-direction:column; gap:12px}
.lrow{display:grid; grid-template-columns:220px 1fr auto; gap:28px; align-items:center; padding:22px 30px}
.lstd{font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--blue-ink); letter-spacing:.02em}
.ldesc{color:var(--ink-2); font-size:.96rem; line-height:1.5}
.lstate{justify-self:end; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--verify); background:var(--verify-bg); border:1px solid #BFE2D2; border-radius:20px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.lstate::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--verify)}
@media(max-width:720px){.lrow{grid-template-columns:1fr; gap:8px; padding:20px 22px}.lstate{justify-self:start}}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px}
.stat{padding:28px 26px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat{padding:24px 22px}}
.stat .n{font-family:var(--sans); font-size:clamp(2rem,4vw,2.6rem); font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted); font-size:.9rem; margin-top:6px; max-width:22ch}

/* CTA */
.cta{background:var(--blue-ink); color:#fff}
.cta-in{display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; padding:64px 0}
@media(max-width:820px){.cta-in{grid-template-columns:1fr; gap:26px; padding:52px 0}}
.cta .kicker{color:#8FC7D8}
.cta h2{color:#fff; font-size:clamp(2rem,3.6vw,2.8rem); margin-top:12px}
.cta p{color:#C4DAE2; margin-top:14px; max-width:52ch}
.cta .btn-solid{background:#fff; color:var(--blue-ink); border-color:#fff}
.cta .btn-solid:hover{background:#DBEDF3}
.cta .r{display:flex; justify-content:flex-end}
@media(max-width:820px){.cta .r{justify-content:flex-start}}

/* FAQ */
.faq{margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:22px 44px}
@media(max-width:760px){.faq{grid-template-columns:1fr; gap:24px}}
.faq .qa h3{font-family:var(--sans); font-size:1.14rem; font-weight:800; letter-spacing:-0.01em}
.faq .qa p{margin-top:8px; color:var(--ink-2); font-size:.98rem}

.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ═══ Homepage v3 — tokens measured live from the reference homepage:
   body 17px · headings 500 weight, -3% tracking · hero h1 48px white · section h2 22px · card titles 18px ·
   meta 14px (category #000 + note 60% black) · pills 36/40px r40 · full-width content with 32px gutters. ═══ */
.o-page{padding-bottom:48px}
.o-wrap{max-width:1920px; margin:0 auto; padding:0 32px}
@media(max-width:640px){.o-wrap{padding:0 18px}}
.nav-left{display:flex; align-items:center; gap:44px; min-width:0}

/* hero — full-width rounded banner, white centered copy, one 40px white pill */
/* hero — measured from the original at 1440x613: top offset 112 (nav 68 + 44 gap), height = 100svh - 216px
   (65% of the viewport), radius 6px, ~104px below the fold for the gap + tile peek. */
.o-hero{border-radius:6px; margin-top:44px; min-height:400px; height:calc(100svh - 216px); max-height:920px; display:grid; place-items:center; text-align:center; padding:56px 26px;
  background:
    radial-gradient(90% 120% at 18% -5%, #B9CDF1 0%, rgba(185,205,241,0) 55%),
    radial-gradient(90% 130% at 85% 110%, #6D86D9 0%, rgba(109,134,217,0) 62%),
    #8B99E4}
.o-hero .k{font-size:14px; font-weight:500; color:rgba(255,255,255,.85)}
.o-hero h1{margin-top:14px; font-size:var(--t-h2); font-weight:500; letter-spacing:-0.03em; line-height:1.16; color:#fff}
.o-hero p{margin:16px auto 0; max-width:52ch; font-size:17px; font-weight:400; line-height:1.55; color:rgba(255,255,255,.88)}
.o-hero .act{margin-top:28px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.o-hero .btn{background:#fff; color:#000}
.o-hero .btn:hover{background:rgba(255,255,255,.85)}

/* section header: 22px/500 left, 14px "see all" right */
.o-sec{display:flex; align-items:baseline; justify-content:space-between; margin:96px 0 26px}
.o-sec h2{font-size:var(--t-h4); font-weight:500; letter-spacing:-0.01em; line-height:1.25}
.o-sec a{font-size:14px; font-weight:500; color:#000}
.o-sec a:hover{opacity:.6}

/* cards: tile, then title below, then meta */
.o-card{display:block; min-width:0; transition:opacity var(--dur-medium) var(--curve-d)}
.o-card .tile{border-radius:8px; overflow:hidden; display:grid; place-items:center; position:relative; transition:opacity var(--dur-medium) var(--curve-d)}
.o-card:hover .tile{opacity:.85}
.o-card .cap{margin-top:14px; font-size:var(--t-h5); font-weight:500; line-height:1.32; letter-spacing:-0.01em; color:#000}
.o-card .meta{margin-top:8px; font-size:14px; font-weight:500; color:#000; display:flex; gap:14px}
.o-card .meta span{color:rgba(0,0,0,.6)}
.o-card.big .cap{font-size:var(--t-h2); font-weight:500; letter-spacing:-0.03em; line-height:1.16; margin-top:20px}
.tile-word{font-weight:500; letter-spacing:-0.02em; text-align:center; padding:0 22px; text-wrap:balance; line-height:1.2}

/* featured — the reference behaviour: the tall right rail scrolls while the big left card STICKS under the nav;
   once the rail is done, the whole page scrolls on together. (grid + position:sticky, no JS) */
.o-feat{display:grid; grid-template-columns:3fr 1fr; gap:26px; align-items:start; margin-top:64px} /* 64 = measured: featured top lands 40px above the fold (downloaded reference: hero -mb-30 + gap-30, media bottom = 100svh-104, featured top = 100svh-40) */
.o-feat .big{position:sticky; top:80px}
/* near-viewport-height left tile (reference: ~11:8) so while it sticks the screen reads as "page stopped, right rail scrolling" */
.o-feat .big .tile{width:100%; aspect-ratio:16/9; min-height:400px; max-height:calc(100svh - 175px)}
.o-side{display:grid; gap:44px}
.o-side .tile{aspect-ratio:1/1.02}
.o-side .cap{font-size:18px}
@media(max-width:900px){
  .o-feat{grid-template-columns:1fr}
  .o-feat .big{position:static}
  .o-side .tile{aspect-ratio:16/9}
}

/* organic multicolor tiles — like the reference thumbnails: 3-4 pastel hues blurred together per tile
   (pure CSS layered radial gradients; no images, CSP-safe). Each keeps a dominant family for its ink color. */
.gd-ink{background:radial-gradient(70% 90% at 78% -5%, #2E6B7A 0%, rgba(46,107,122,0) 58%), radial-gradient(60% 75% at 15% 25%, #274066 0%, rgba(39,64,102,0) 60%), radial-gradient(80% 90% at 60% 105%, #0F2C3A 0%, rgba(15,44,58,0) 65%), #101E2A; color:#EAF4F8}
.gd-peri{background:radial-gradient(65% 75% at 82% 12%, #F4BCCB 0%, rgba(244,188,203,0) 58%), radial-gradient(60% 70% at 12% 18%, #DFE9FB 0%, rgba(223,233,251,0) 55%), radial-gradient(75% 85% at 28% 92%, #7D96DC 0%, rgba(125,150,220,0) 63%), radial-gradient(50% 60% at 88% 82%, #F3DCA8 0%, rgba(243,220,168,0) 58%), #AFC3EC; color:#1E2C55}
.gd-peach{background:radial-gradient(60% 70% at 18% 10%, #FBE3C6 0%, rgba(251,227,198,0) 55%), radial-gradient(55% 65% at 86% 22%, #93C4DB 0%, rgba(147,196,219,0) 55%), radial-gradient(75% 82% at 74% 92%, #EE9AA6 0%, rgba(238,154,166,0) 62%), radial-gradient(55% 62% at 12% 84%, #EFB05F 0%, rgba(239,176,95,0) 58%), #F5C29E; color:#57301A}
.gd-mint{background:radial-gradient(60% 70% at 16% 12%, #DFF3E7 0%, rgba(223,243,231,0) 55%), radial-gradient(55% 65% at 84% 16%, #F4E9A9 0%, rgba(244,233,169,0) 55%), radial-gradient(72% 80% at 78% 90%, #5FB897 0%, rgba(95,184,151,0) 62%), radial-gradient(50% 60% at 18% 86%, #8FD0D8 0%, rgba(143,208,216,0) 58%), #ABDCC6; color:#123B2C}
.gd-lemon{background:radial-gradient(60% 70% at 20% 12%, #FBF3CE 0%, rgba(251,243,206,0) 55%), radial-gradient(55% 62% at 84% 20%, #F3B98D 0%, rgba(243,185,141,0) 55%), radial-gradient(72% 80% at 72% 92%, #E4CF6C 0%, rgba(228,207,108,0) 62%), radial-gradient(50% 58% at 14% 86%, #B7DFC0 0%, rgba(183,223,192,0) 58%), #F1E2A4; color:#4E4212}
.gd-teal2{background:radial-gradient(60% 70% at 16% 12%, #D6EDF4 0%, rgba(214,237,244,0) 55%), radial-gradient(55% 62% at 84% 16%, #F1C4CE 0%, rgba(241,196,206,0) 55%), radial-gradient(74% 82% at 76% 92%, #58A0BC 0%, rgba(88,160,188,0) 62%), radial-gradient(50% 58% at 14% 88%, #A9DCCB 0%, rgba(169,220,203,0) 58%), #9DCBDC; color:#0F3546}

/* provenance content inside the big dark tile */
.o-prov{display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 20px}
.o-prov .w{font-size:clamp(26px,3.2vw,42px); font-weight:500; letter-spacing:-0.03em; color:#fff; text-align:center}
.o-prov .steps{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-size:13px; font-weight:500}
.o-prov .steps span{padding:6px 14px; border-radius:40px; border:1px solid rgba(255,255,255,.3); color:#DCEAF1; background:rgba(255,255,255,.07)}

/* list rows: large squarish thumb + 18px title + 14px meta, two loose columns */
.o-list{display:grid; grid-template-columns:1fr 1fr; gap:20px 64px}
@media(max-width:860px){.o-list{grid-template-columns:1fr}}
.o-row{display:flex; align-items:flex-start; gap:36px; padding:10px 0}
.o-row .th{width:200px; height:200px; border-radius:8px; flex:none; transition:opacity var(--dur-medium) var(--curve-d)}
.o-row:hover .th{opacity:.85}
@media(max-width:640px){.o-row .th{width:112px; height:112px}}
.o-row .tt{display:block; margin-top:30px; font-size:var(--t-h5); font-weight:500; line-height:1.32; letter-spacing:-0.01em; color:#000}
.o-row .mm{display:flex; gap:14px; margin-top:10px; font-size:14px; font-weight:500; color:#000}
.o-row .mm span{color:rgba(0,0,0,.6)}

/* three case-style cards, 4:3 */
.o-cases{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
@media(max-width:860px){.o-cases{grid-template-columns:1fr}}
.o-cases .tile{aspect-ratio:4/3}

/* compliance strip — one quiet line between solutions and perspectives */
.o-comp{display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-top:96px; padding:26px 30px; border:1px solid rgba(0,0,0,.1); border-radius:8px; font-size:var(--t-h5); font-weight:500; letter-spacing:-0.01em; line-height:1.32; color:#000; transition:opacity var(--dur-medium) var(--curve-d)}
.o-comp:hover{opacity:.6}
.o-comp .more{font-size:14px; color:rgba(0,0,0,.6); white-space:nowrap}

/* centered CTA — reference: same scale as the hero headline */
.o-cta{margin:120px 0 40px; text-align:center}
.o-cta h2{font-size:var(--t-h2); font-weight:500; letter-spacing:-0.03em; line-height:1.16}
.o-cta p{margin:16px auto 0; max-width:58ch; color:rgba(0,0,0,.65); font-size:17px; line-height:1.55}
.o-cta .act{margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* footer — reference style: gray 14px headings, plain black links in a wide grid, quiet legal row */
.o-foot{border-top:1px solid rgba(0,0,0,.1); margin-top:72px; padding:56px 0 36px; font-size:14px}
.o-foot .cols{display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:36px 48px}
@media(max-width:820px){.o-foot .cols{grid-template-columns:1fr 1fr}}
.o-foot h4{font-size:14px; font-weight:400; color:rgba(0,0,0,.5); margin:0 0 14px}
.o-foot a{display:block; padding:5px 0; color:#0D0D0D; font-weight:400}
.o-foot a:hover{opacity:.6}
.o-foot .legal{margin-top:56px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:rgba(0,0,0,.5)}

/* statement band — plain centered manifesto line (company positioning) */
.o-statement{margin:120px auto 0; max-width:34em; text-align:center}
.o-statement p{font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-0.02em; line-height:1.35; color:#000}
.o-statement a{display:inline-block; margin-top:18px; font-size:14px; font-weight:500; color:#000}
.o-statement a:hover{opacity:.6}

/* phone rhythm — shorter section falls on small screens; desktop geometry untouched */
@media(max-width:640px){
  .o-sec{margin:64px 0 22px}
  .o-statement{margin-top:88px}
  .o-comp{margin-top:64px; padding:22px 20px}
  .o-cta{margin:88px 0 36px}
  /* hero: fixed svh height can clip stacked content on short phones — let it grow */
  .o-hero{height:auto; min-height:min(72svh,560px); padding:64px 22px}
  /* list rows: the 112px thumb pairs with a tighter gap and top-aligned title */
  .o-row{gap:18px}
  .o-row .tt{margin-top:4px}
  .o-side{gap:32px}
  .o-feat .big .tile{min-height:300px}
  .art-hero{padding:0 18px}
  .art-hero .tile{aspect-ratio:16/9}
}

/* article pages (solutions + perspectives) */
.art{max-width:760px; margin:0 auto; padding:64px 22px 30px}
.art .cat{display:flex; gap:14px; font-size:14px; font-weight:500; color:#000}
.art .cat span{color:rgba(0,0,0,.6)}
.art h1{margin-top:14px; font-size:var(--t-h2); font-weight:500; letter-spacing:-0.03em; line-height:1.16}
.art .lead{margin-top:20px; font-size:19px; line-height:1.55; color:rgba(0,0,0,.72)}
.art-hero{max-width:1440px; margin:26px auto 0; padding:0 32px}
.art-hero .tile{border-radius:12px; aspect-ratio:16/6; display:grid; place-items:center}
.art-body{max-width:760px; margin:0 auto; padding:44px 22px 20px; font-size:17px; line-height:1.7; color:#111}
.art-body h2{font-size:22px; font-weight:500; letter-spacing:-0.01em; margin:38px 0 12px}
.art-body p{margin:0 0 16px}
.art-body ul{margin:0 0 16px; padding-left:22px}
.art-body li{margin:6px 0}
.art-body b{font-weight:600}
.art-foot{max-width:760px; margin:0 auto; padding:8px 22px 40px; display:flex; gap:10px; flex-wrap:wrap}


/* art-card tiles: hand-built SVGs in the site's gradient language (gd-* families) — one restrained motif per concept, no external assets */
.im-01{background:url(/img/card-01.svg) center/cover no-repeat}
.im-02{background:url(/img/card-02.svg) center/cover no-repeat}
.im-03{background:url(/img/card-03.svg) center/cover no-repeat}
.im-04{background:url(/img/card-04.svg) center/cover no-repeat}
.im-05{background:url(/img/card-05.svg) center/cover no-repeat}
.im-06{background:url(/img/card-06.svg) center/cover no-repeat}
.im-07{background:url(/img/card-07.svg) center/cover no-repeat}
.im-08{background:url(/img/card-08.svg) center/cover no-repeat}
.im-09{background:url(/img/card-09.svg) center/cover no-repeat}
.im-10{background:url(/img/card-10.svg) center/cover no-repeat}
.im-11{background:url(/img/card-11.svg) center/cover no-repeat}
.im-12{background:url(/img/card-12.svg) center/cover no-repeat}