/* SYNTHENA Pharmaceutical — shared stylesheet. Layout and components read tokens only. Tokens are declared three times, one block per prototype version, on body[data-version]. See SYNTHENA.md 2.3. */ :root{ --serif:'Playfair Display', Georgia, 'Times New Roman', serif; --sans:'Montserrat', 'Helvetica Neue', Arial, sans-serif; --pad:clamp(1.5rem, 5vw, 6rem); --maxw:1280px; --col:64ch; --ease:cubic-bezier(.2,.7,.2,1); } /* ---------- A · Technical: Pfizer + McKinsey ---------- */ body[data-version="a"]{ --bg:#FFFFFF; --band:#E0F5FF; --band-2:#E8F2FF; --card:#FFFFFF; --ink:#051C2C; --ink-2:#00003A; --text:#0A0A0A; --text-soft:#3D3D3D; --muted:#666666; --line:#C9C9C9; --action:#0000C9; --action-deep:#00009D; --accent-2:#2251FF; --tint:#CFDFFF; --dark:#051C2C; --on-dark:#FFFFFF; --on-dark-soft:rgba(255,255,255,.72); --overlay:rgba(5,28,44,.55); --radius:4px; --radius-lg:8px; --shadow:none; } /* ---------- B · Mixed: Moderna ---------- */ body[data-version="b"]{ --bg:#F8FDFF; --band:#FFFFFF; --band-2:#F8FDFF; --card:#FFFFFF; --ink:#083952; --ink-2:#053F68; --text:#083952; --text-soft:#376586; --muted:#5793BF; --line:#CED7DC; --action:#D1343E; --action-deep:#E31836; --accent-2:#00B4F1; --tint:#BFE6F6; --dark:#053F68; --on-dark:#FFFFFF; --on-dark-soft:rgba(255,255,255,.72); --overlay:rgba(8,57,82,.55); --radius:8px; --radius-lg:12px; --shadow:0 8px 24px rgba(8,57,82,.08); } /* ---------- C · Humanity: Eli Lilly, blue for red ---------- */ body[data-version="c"]{ --bg:#FFFFFF; --band:#E0F5FF; --band-2:#E8F2FF; --card:#FFFFFF; --ink:#191919; --nav-h:4.5rem; --ink-2:#111111; --text:#191919; --text-soft:#3A3A3A; --muted:#6A6A6A; --line:#C5C5C5; --action:#0000C9; --action-deep:#00009D; --accent-2:#2251FF; --tint:#E8F2FF; --dark:#0000C9; --on-dark:#FFFFFF; --on-dark-soft:rgba(255,255,255,.75); --overlay:rgba(25,25,25,.55); --radius:16px; --radius-lg:24px; --shadow:none; /* ---- tuner variables (assets/tuner.js writes these inline on ). Roche / Novartis frame, v3 ---- */ --t-font-display:'Instrument Serif', 'EB Garamond', Georgia, 'Times New Roman', serif; --t-font-hero:'Archivo', 'Albert Sans', system-ui, Arial, sans-serif; --t-hero-stretch:118%; --t-font-sans:'Work Sans', 'Albert Sans', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --t-font-serif:'Instrument Serif', 'EB Garamond', Georgia, 'Times New Roman', serif; --serif:var(--t-font-display); --sans:var(--t-font-sans); --t-body-size:clamp(1.05rem, .9rem + .25vw, 1.25rem); --t-body-lh:1.65; --t-maxw:1720px; --t-pad:clamp(1.5rem, 6vw, 6rem); --maxw:var(--t-maxw); --pad:var(--t-pad); --t-section-pad:clamp(3.5rem, 4.5vw, 5.5rem); --t-col-gap:clamp(2.5rem, 6vw, 6rem); --t-h2-size:clamp(2.2rem, 3.2vw, 3rem); --t-h2-lh:1.04; --t-h2-ls:-0.005em; --t-h2-weight:400; --t-lead-size:1.25rem; --t-label-size:.85rem; --t-label-ls:.06em; --t-label-case:uppercase; --t-p-space:1.2rem; --t-h2-gap:1.25rem; --t-action:#0B41CD; --t-action-deep:#052066; --t-ink:#052066; --t-text-soft:#2B333F; --t-muted:#5F6F8A; --t-line:#DADADA; --t-bg:#FFFFFF; --t-band:#F5F5F2; --t-band-warm:#FFF7F5; --t-peach:#FAC9B5; --t-orange:#FF7D29; --t-lightblue:#BDE3FF; --action:var(--t-action); --action-deep:var(--t-action-deep); --band:var(--t-band); --ink:var(--t-ink); --text:var(--t-text-soft); --text-soft:var(--t-text-soft); --muted:var(--t-muted); --line:var(--t-line); --bg:var(--t-bg); --tint:var(--t-lightblue); --dark:var(--t-action-deep); --t-nav-h:5rem; --nav-h:var(--t-nav-h); --t-brand-size:22px; --t-navlink-size:.95rem; --t-navlink-ls:.01em; --t-btn-radius:0px; --t-btn-pad-y:1rem; --t-btn-pad-x:1.4rem; --t-btn-size:.95rem; --t-btn-ls:.01em; --t-btn-case:none; --t-btn-shift:1.2rem; --t-hero-vw:44vw; --t-hero-min:480px; --t-hero-max:860px; --t-hero-overlay:.42; --t-hero-valign:center; --t-hero-copy-w:46ch; --t-h1-size:clamp(2.2rem, 3.6vw, 4.25rem); --t-h1-lh:1.08; --t-h1-weight:800; --t-hero-p-size:1.15rem; --t-hero-gap:1.4rem; --t-brandline-size:.74rem; --t-brandline-ls:.14em; --t-about-ratio:4/3; --t-about-cols:.9fr 1.1fr; --t-pull-size:clamp(1.6rem, 2.6vw, 2.4rem); --t-card-ratio:3/2; --t-card-cols:repeat(4,minmax(0,1fr)); --t-card-bg:#FFFFFF; --t-card-band:#F5F5F2; --t-card-gap:1.5rem; --t-plat-ratio:1/1; --t-plat-cols:minmax(0,12rem) minmax(0,1.15fr) minmax(0,.85fr); --t-plat-band:#FFFFFF; --t-plat-tab-size:1rem; --t-ab-vw:40vw; --t-ab-min:440px; --t-ab-max:620px; --t-ab-cols:2fr 1fr; --t-ab-grad-angle:180deg; --t-ab-grad-from:#F5F5F2; --t-ab-grad-to:#F5F5F2; --t-ab-text:#052066; --t-loop-ratio:4/3; --t-loop-slide-w:50%; --t-loop-side-scale:.86; --t-loop-center-scale:1; --t-loop-side-x:0px; --t-loop-side-alpha:1; --t-loop-radius:0px; --t-loop-word-size:clamp(1.6rem, 2.8vw, 2.3rem); --t-loop-word-color:#FFFFFF; --t-loop-overlay:.18; --t-loop-card-alpha:.94; --t-loop-card-blur:10px; --t-loop-arrow-size:44px; --t-loop-arrow-radius:0px; --t-loop-arrow-gap:10px; --t-loop-arrows-pos:center; --t-loop-speed:.5s; --t-sci-ratio:4/3; --t-sci-cols:minmax(0,1.1fr) minmax(0,.9fr); --t-step-pad:1.3rem; --t-step-label-w:7rem; --t-quote-ratio:3/2; --t-quote-size:clamp(1.3rem, 2.4vw, 1.8rem); --t-quote-radius:0px; --t-quote-cols:1fr 1fr; --t-quote-bg:#FFF7F5; --t-mis-vw:44vw; --t-mis-min:460px; --t-mis-max:680px; --t-mis-overlay:.45; --t-mis-align:left; --t-mis-items:flex-start; --t-mis-h2-size:clamp(2rem, 3.8vw, 3rem); --t-mis-p-w:60ch; --t-cta-grad-from:#FFF7F5; --t-cta-grad-to:#FAC9B5; --t-cta-pad:clamp(3.5rem, 7vw, 6rem); --t-foot-cols:1.1fr .9fr 1fr; --t-foot-tag-size:clamp(1.2rem, 2vw, 1.6rem); --t-foot-link-size:.98rem; --t-foot-pad:clamp(3rem, 6vw, 5rem); --t-frame-bg:#EAE8E5; --t-frame-line:#DADADA; } /* ---------- reset / base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--text); font-family:var(--sans); font-size:var(--t-body-size, 17px); line-height:var(--t-body-lh, 1.75); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--action);color:#fff} img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--action);outline-offset:2px;box-shadow:0 0 0 6px var(--tint)} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- type ---------- */ h1,h2,h3{font-weight:400} h2{ font-family:var(--serif); font-size:var(--t-h2-size, clamp(2.1rem, 5.2vw, 4rem)); line-height:var(--t-h2-lh, 1.1); letter-spacing:var(--t-h2-ls, -.01em); max-width:18ch; color:var(--ink); } h2 em,h1 em,.big em,.kicker em{font-style:italic;color:var(--action);font-weight:400} .lead{font-size:var(--t-lead-size, clamp(1.1rem, 1.8vw, 1.3rem));line-height:1.7;color:var(--text);max-width:var(--col)} p{max-width:var(--col);color:var(--text-soft)} p+p{margin-top:var(--t-p-space, 1.6rem)} .prose p{font-size:1.02rem} .center{text-align:center;margin-left:auto;margin-right:auto} .center p,.center h2,.center .lead{margin-left:auto;margin-right:auto} .eyebrow{ font-family:var(--sans);font-weight:500; font-size:.68rem;letter-spacing:.24em;text-transform:uppercase; color:var(--muted);display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{ content:"";width:6px;height:6px;background:var(--accent-2); transform:rotate(45deg);display:inline-block;flex:0 0 auto; } .section-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:clamp(2.5rem, 5vw, 4rem);flex-wrap:wrap} /* ---------- wordmark lockup ---------- */ .brand,.wordmark,.foot-brand{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1} .wm-name{ font-family:var(--serif);font-weight:400; text-transform:uppercase;letter-spacing:.04em;line-height:1; color:var(--ink); } .wm-desc{ font-family:var(--sans);font-weight:500; text-transform:uppercase;letter-spacing:.3em;line-height:1; color:var(--ink); } .brand{font-size:var(--t-brand-size, 20px);gap:.32em;position:relative;z-index:60} .brand .wm-desc{font-size:.42em} .wordmark{font-size:clamp(2.8rem, 8vw, 6rem);align-items:center;gap:.28em} .wordmark .wm-name{font-size:1em} .wordmark .wm-desc{font-size:.24em;letter-spacing:.34em;padding-left:.34em} /* ---------- nav ---------- */ header.nav{ position:fixed;top:0;left:0;right:0;z-index:50; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid transparent; transition:border-color .4s ease, background .4s ease; } header.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb, var(--bg) 93%, transparent)} .nav-inner{ max-width:var(--maxw);margin:0 auto; padding:1.1rem var(--pad); display:flex;align-items:center;justify-content:space-between;gap:1rem; transition:padding .4s ease; } header.nav.scrolled .nav-inner{padding-top:.7rem;padding-bottom:.7rem} nav.links{display:flex;gap:2rem;align-items:center} nav.links a{ font-family:var(--sans);font-weight:500; font-size:var(--t-navlink-size, .72rem);letter-spacing:var(--t-navlink-ls, .16em);text-transform:uppercase; color:var(--text-soft);position:relative;padding:.2rem 0;transition:color .25s ease; } nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--action);transition:width .3s ease} nav.links a:hover{color:var(--ink)} nav.links a:hover::after{width:100%} nav.links a.cta{color:var(--ink);border:1px solid var(--line);padding:.55rem 1.1rem;border-radius:100px;transition:background .3s,color .3s,border-color .3s} nav.links a.cta::after{display:none} nav.links a.cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} .menu-toggle{display:none} /* C: Pfizer's rigid header. Opaque white bar, fixed height, blue wordmark, solid blue CTA. */ body[data-version="c"] header.nav,body[data-version="c"] header.nav.scrolled{background:var(--bg);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none} body[data-version="c"] .nav-inner,body[data-version="c"] header.nav.scrolled .nav-inner{min-height:var(--nav-h);padding-top:.8rem;padding-bottom:.8rem} body[data-version="c"] .brand .wm-name,body[data-version="c"] .brand .wm-desc{color:var(--action)} body[data-version="c"] nav.links a{color:var(--ink)} body[data-version="c"] nav.links a.cta{background:var(--action);color:#fff;border-color:var(--action)} body[data-version="c"] nav.links a.cta:hover{background:var(--action-deep);border-color:var(--action-deep);color:#fff} body[data-version="c"] main{padding-top:var(--nav-h)} body[data-version="c"] section{scroll-margin-top:calc(var(--nav-h) + 1rem)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap; font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; padding:.95rem 1.6rem;border-radius:100px;cursor:pointer; background:var(--action);color:#fff;border:1px solid var(--action); transition:background .3s ease,color .3s ease,border-color .3s ease; } .btn:hover{background:var(--action-deep);border-color:var(--action-deep);color:#fff} .btn .arrow{transition:transform .3s ease} .btn:hover .arrow{transform:translateX(4px)} .btn-ghost{background:transparent;color:var(--action)} .btn-ghost:hover{background:var(--action);color:#fff;border-color:var(--action)} .on-dark .btn{background:#fff;color:var(--dark);border-color:#fff} .on-dark .btn:hover{background:var(--on-dark-soft);border-color:transparent;color:var(--dark)} .on-dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .on-dark .btn-ghost:hover{background:#fff;color:var(--dark);border-color:#fff} .btn:disabled{opacity:.6;cursor:wait} .link{font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--action);display:inline-flex;align-items:center;gap:.5rem} .link .circ{width:1.1rem;height:1.1rem;border:1px solid currentColor;border-radius:50%;display:inline-grid;place-items:center;font-size:.7rem} /* ---------- sections and bands ---------- */ section{padding:var(--t-section-pad, clamp(5.5rem, 11vw, 10rem)) 0;position:relative;scroll-margin-top:5.5rem} .band{background:var(--band)} .band-2{background:var(--band-2)} .on-dark{background:var(--dark);color:var(--on-dark)} .on-dark h2,.on-dark .big,.on-dark .wm-name,.on-dark .wm-desc{color:var(--on-dark)} .on-dark p,.on-dark .lead{color:var(--on-dark-soft)} .on-dark .eyebrow{color:var(--on-dark-soft)} .on-dark h2 em,.on-dark .big em{color:var(--on-dark);font-style:italic} .rule{height:1px;background:var(--line);border:0} .two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--t-col-gap, clamp(2.5rem, 6vw, 6rem));align-items:start} .two-col.mid{align-items:center} /* ---------- hero A: type-only ---------- */ .hero-type{ min-height:100svh;display:grid;grid-template-rows:1fr auto; text-align:center;padding:7rem var(--pad) 2.2rem;position:relative;overflow:hidden; } .hero-type .hero-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;position:relative} .hero-type .hero-bg{position:absolute;inset:0;width:100%;height:100%;opacity:.05;pointer-events:none;color:var(--action)} .brandline{ margin-top:1.8rem;font-family:var(--sans);font-weight:400; font-size:clamp(.78rem, 1.5vw, .98rem);letter-spacing:.42em;text-transform:uppercase; color:var(--text-soft);padding-left:.42em; } .kicker{ margin-top:3rem;max-width:30ch; font-family:var(--serif);font-size:clamp(1.35rem, 2.8vw, 2rem);line-height:1.3;color:var(--ink); } .meta-row{display:flex;justify-content:center;align-items:center;width:100%;padding-top:1.4rem} .scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)} .scroll-cue .bar{width:1px;height:34px;background:linear-gradient(var(--muted),transparent);animation:cue 2s ease-in-out infinite} @keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}} .hero-type .wordmark,.hero-type .brandline,.hero-type .kicker{opacity:0;animation:fadeUp 1.1s var(--ease) forwards} .hero-type .wordmark{animation-delay:.4s} .hero-type .brandline{animation-delay:.65s} .hero-type .kicker{animation-delay:.9s} @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* ---------- hero B: split ---------- */ .hero-split{ min-height:100svh;max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:1.05fr .95fr;align-items:center; gap:clamp(2rem, 5vw, 5rem);padding:8rem var(--pad) 4rem; } .hero-split .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem} .hero-split .brandline{margin-top:0;padding-left:0;letter-spacing:.3em;font-size:.72rem;color:var(--muted)} .hero-split h1{font-family:var(--serif);font-size:clamp(2.2rem, 4.6vw, 3.8rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink);max-width:16ch} .hero-split h1 .answer{display:block;font-style:italic;color:var(--action);margin-top:.15em} .hero-split .hero-media{box-shadow:var(--shadow);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)} .label{font-family:var(--sans);font-weight:500;font-size:var(--t-label-size, .68rem);letter-spacing:var(--t-label-ls, .22em);text-transform:var(--t-label-case, uppercase);color:var(--muted)} .on-dark .label{color:rgba(255,255,255,.72)} h2 + p,h2 + .lead{margin-top:var(--t-h2-gap, 1.5rem)} /* ---------- steps ---------- */ .steps{margin-top:clamp(2.5rem, 4vw, 3.5rem);border-top:1px solid var(--line)} .step{ display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(1rem, 3vw, 3rem); padding:var(--t-step-pad, 2.3rem) 0;border-bottom:1px solid var(--line);align-items:start; } .step h3{font-family:var(--sans);font-weight:500;font-size:.96rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:.4rem} .step p{margin:0;max-width:60ch;font-size:1rem;line-height:1.75} /* ---------- image frames ---------- */ .frame{ position:relative;display:block;width:100%;margin:0; aspect-ratio:4/5;background:var(--t-frame-bg, var(--band));border:1px solid var(--t-frame-line, var(--line));border-radius:var(--radius);overflow:hidden; background-image:linear-gradient(135deg, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%); } body[data-version="b"] .frame{background-color:var(--card)} .frame img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0} .frame-label{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem; font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-align:center; background:color-mix(in srgb, var(--bg) 70%, transparent);padding:.6rem .9rem;margin:auto;width:max-content;height:max-content;border-radius:4px; } .frame-label b{font-weight:600;color:var(--text-soft)} .frame:has(img) .frame-label,.frame:has(svg.illus) .frame-label{display:none} .frame svg.illus{position:absolute;inset:0;width:100%;height:100%;display:block} .ar-16-10{aspect-ratio:16/10}.ar-4-5{aspect-ratio:4/5}.ar-4-3{aspect-ratio:4/3}.ar-1-1{aspect-ratio:1/1} .ar-3-4{aspect-ratio:3/4}.ar-16-9{aspect-ratio:16/9}.ar-3-2{aspect-ratio:3/2}.ar-21-9{aspect-ratio:21/9} .frame-wide{margin-bottom:clamp(2rem, 4vw, 3.5rem)} /* ---------- focus cards ---------- */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem, 2.5vw, 2rem);margin-top:clamp(2rem, 4vw, 3rem)} .card{ border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);overflow:hidden; display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .4s var(--ease),border-color .3s; } .card:hover{transform:translateY(-3px);border-color:var(--action)} .card .frame{border:0;border-radius:0;border-bottom:1px solid var(--line)} .card-body{padding:1.5rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.8rem;flex:1} .card h3{font-family:var(--sans);font-weight:500;font-size:1.25rem;color:var(--action);display:flex;justify-content:space-between;align-items:center;gap:1rem} .card h3 .plus{font-weight:300;font-size:1.4rem;line-height:1;color:var(--action)} .card p{font-size:.94rem;margin:0;flex:1} .pill{ align-self:flex-start;font-family:var(--sans);font-weight:500; font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; padding:.35rem .75rem;border-radius:100px;background:var(--tint);color:var(--ink);margin-top:.2rem; } .pill.research{background:transparent;border:1px solid var(--line);color:var(--muted)} body[data-version="b"] .card{border-color:transparent} body[data-version="b"] .card .frame{border-bottom-color:transparent} body[data-version="b"] .card h3{color:var(--ink)} body[data-version="b"] .card:hover{border-color:transparent;transform:translateY(-4px)} /* ---------- pipeline (A) ---------- */ .pipeline{margin-top:clamp(2.5rem, 5vw, 4rem);border-top:1px solid var(--line)} .pipe-head,.pipe-row{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr) minmax(0,9rem);gap:1.5rem;align-items:center;border-bottom:1px solid var(--line)} .pipe-head{padding:.85rem 0;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .pipe-head .segs span{text-align:center} .pipe-head .stage{text-align:right} .pipe-row{padding:1.05rem 0} .pipe-row .name{font-family:var(--sans);font-weight:500;font-size:.96rem;color:var(--ink)} .segs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px} .seg{height:6px;background:var(--band-2);border-radius:2px} .seg.on{background:var(--accent-2)} .pipe-row .stage{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);text-align:right} .pipe-note{margin-top:1rem;font-size:.8rem;color:var(--muted)} /* ---------- explainer tabs (B) ---------- */ .explainer{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem, 4vw, 3.5rem);align-items:center;margin-top:clamp(2rem, 4vw, 3rem)} .tab-list{display:flex;flex-direction:column;gap:.2rem} .tab{ font-family:var(--sans);font-weight:500;font-size:.95rem;text-align:left; background:none;border:0;border-left:2px solid transparent;padding:.65rem 0 .65rem 1rem; color:var(--text-soft);cursor:pointer;transition:color .25s,border-color .25s; } .tab:hover{color:var(--ink)} .tab[aria-selected="true"]{color:var(--ink);border-left-color:var(--action)} .tab-frames{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--card)} .tab-frames .frame{display:none;border:0;border-radius:0} .tab-frames .frame.on{display:block} .tab-panel{display:none} .tab-panel.on{display:block;animation:fadeUp .6s var(--ease)} .tab-panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem, 2.4vw, 1.9rem);color:var(--ink);margin-bottom:.7rem} .tab-panel p{font-size:1rem} /* ---------- quote (C) ---------- */ .quote{display:grid;grid-template-columns:var(--t-quote-cols, 1fr 1fr);border-radius:var(--t-quote-radius, var(--radius-lg));overflow:hidden;background:var(--band);align-items:stretch;border:1px solid var(--line)} .quote-text{padding:clamp(2rem, 5vw, 4rem);display:flex;flex-direction:column;justify-content:center;gap:1.9rem} .quote-mark{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--action)} .quote blockquote{font-family:var(--serif);font-size:var(--t-quote-size, clamp(1.4rem, 2.8vw, 2.2rem));line-height:1.35;color:var(--ink);max-width:22ch} .quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .quote .frame{border:0;border-radius:0;aspect-ratio:var(--t-quote-ratio, auto);min-height:420px;height:100%} /* ---------- mission ---------- */ .big{ font-family:var(--serif);font-weight:400; font-size:clamp(1.6rem, 3.6vw, 2.8rem);line-height:1.28;letter-spacing:-.005em; max-width:24ch;color:var(--ink); } .mission-card{display:grid;grid-template-columns:1.5fr 1fr;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden} .mission-card .mission-text{padding:clamp(2rem, 5vw, 4rem);display:flex;flex-direction:column;justify-content:center;gap:1.5rem} .mission-card .frame{border:0;border-radius:0;aspect-ratio:auto;min-height:420px;height:100%} /* ---------- contact ---------- */ .contact .ask{font-family:var(--serif);font-size:clamp(1.4rem, 2.8vw, 2.1rem);line-height:1.3;max-width:22ch;color:var(--on-dark)} .form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:clamp(2rem, 4vw, 3rem)} .form .full{grid-column:1/-1} .form label{display:flex;flex-direction:column;gap:.5rem;font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft)} .form input,.form textarea{ font:400 16px/1.5 var(--sans);padding:.9rem 1rem;color:var(--on-dark); border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.07);border-radius:var(--radius); transition:border-color .25s,background .25s; } .form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.4)} .form input:focus,.form textarea:focus{border-color:#fff;background:rgba(255,255,255,.11);outline:none;box-shadow:none} .form textarea{min-height:9rem;resize:vertical} .form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .form-actions{grid-column:1/-1;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem} .form-status{font-family:var(--sans);font-size:.9rem;color:var(--on-dark-soft);margin:0;max-width:none} .form-note{grid-column:1/-1;font-size:.78rem;color:var(--on-dark-soft);max-width:none} /* ---------- footer ---------- */ footer{background:var(--dark);color:var(--on-dark-soft);padding:3rem 0 3.4rem;border-top:1px solid rgba(255,255,255,.16)} .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap} .foot-brand{font-size:16px;gap:.3em} .foot-brand .wm-name,.foot-brand .wm-desc{color:var(--on-dark)} .foot-brand .wm-desc{font-size:.42em} .foot-meta{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase} .foot-legal{margin-top:2.2rem;font-family:var(--sans);font-size:.72rem;line-height:1.65;max-width:78ch;color:var(--on-dark-soft)} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} /* ---------- version-specific hooks ---------- */ .hero-split .wordmark{font-size:clamp(1.9rem, 3.6vw, 2.8rem);align-items:flex-start;gap:.3em} .hero-split .wordmark .wm-desc{padding-left:0;font-size:.36em;letter-spacing:.3em} .panel{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.5rem, 4vw, 3rem);margin-top:clamp(2rem, 4vw, 3rem)} .panel .steps{margin-top:0;border-top:0} .panel .step:first-child{padding-top:0} .panel .step:last-child{border-bottom:0;padding-bottom:0} .narrow{max-width:var(--t-about-w, 860px)} .section-head.center{justify-content:center} .mark-sm{display:inline-flex;flex-direction:column;align-items:center;font-size:var(--t-mark-size, 14px);gap:.35em;margin-bottom:2rem} .mark-sm .wm-desc{font-size:.42em} .two-col .steps .step{grid-template-columns:minmax(0,var(--t-step-label-w, 7rem)) minmax(0,1fr)} .center .btn{margin-top:2rem} .hero-banner .frame,.mis .frame,.lslide .frame,.toi .frame{background-color:#8c8c8c;background-image:linear-gradient(135deg, transparent 49.6%, rgba(255,255,255,.35) 49.6%, rgba(255,255,255,.35) 50.4%, transparent 50.4%)} .hero-banner .frame .frame-label,.mis .frame .frame-label,.toi .frame .frame-label{background:rgba(25,25,25,.5);color:rgba(255,255,255,.75);margin:1.25rem auto auto} .hero-banner .frame .frame-label b,.mis .frame .frame-label b,.toi .frame .frame-label b{color:#fff} body[data-version="b"] .card h3 .plus{display:none} body[data-version="b"] .card .link{margin-top:.2rem} /* ============================================================ VERSION C COMPONENTS, v3: Roche / Novartis frame, humanity first. Every value reads a --t-* variable declared in body[data-version="c"]. ============================================================ */ body[data-version="c"] h1,body[data-version="c"] h2{font-weight:var(--t-h2-weight);text-wrap:balance} body[data-version="c"] .split > div > .label,body[data-version="c"] .intro .label{display:block;margin-bottom:1.1rem} body[data-version="c"] .label::before,body[data-version="c"] .hero-photo .brandline::before{content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:.55em;vertical-align:-.22em;background:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 48%27 fill=%27none%27 stroke=%27%230B41CD%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M16 27V12.5a3 3 0 0 1 6 0V24M22 22V8.5a3 3 0 0 1 6 0V24M28 23V11.5a3 3 0 0 1 6 0V25M34 25v-6.5a3 3 0 0 1 6 0V31c0 8-6.5 13-14 13-6 0-10.5-3-13.5-8L7 27.5a3 3 0 0 1 5-3.5l4 5%27/%3E%3C/svg%3E") no-repeat center/contain} body[data-version="c"] .mis .label::before,body[data-version="c"] .hero-photo .brandline::before{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 48%27 fill=%27none%27 stroke=%27%23FFFFFF%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M16 27V12.5a3 3 0 0 1 6 0V24M22 22V8.5a3 3 0 0 1 6 0V24M28 23V11.5a3 3 0 0 1 6 0V25M34 25v-6.5a3 3 0 0 1 6 0V31c0 8-6.5 13-14 13-6 0-10.5-3-13.5-8L7 27.5a3 3 0 0 1 5-3.5l4 5%27/%3E%3C/svg%3E")} body[data-version="c"] .card3 .label::before,body[data-version="c"] .lslide-kicker::before{display:none} body[data-version="c"] .manifesto .hand-mark{width:44px;height:44px;color:var(--action);margin-bottom:1.4rem} /* the hand as chapter marks on the white and grey boundaries, and as a watermark in the two warm bands */ body[data-version="c"] #pillars,body[data-version="c"] #platform,body[data-version="c"] #science{position:relative} body[data-version="c"] #pillars::before,body[data-version="c"] #platform::before,body[data-version="c"] #science::before{content:"";position:absolute;left:50%;top:0;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:#fff url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 48%27 fill=%27none%27 stroke=%27%230B41CD%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M16 27V12.5a3 3 0 0 1 6 0V24M22 22V8.5a3 3 0 0 1 6 0V24M28 23V11.5a3 3 0 0 1 6 0V25M34 25v-6.5a3 3 0 0 1 6 0V31c0 8-6.5 13-14 13-6 0-10.5-3-13.5-8L7 27.5a3 3 0 0 1 5-3.5l4 5%27/%3E%3C/svg%3E") center/22px no-repeat;border:1px solid var(--line);z-index:2} body[data-version="c"] .manifesto,body[data-version="c"] .cta-band{position:relative;overflow:hidden} body[data-version="c"] .manifesto::after,body[data-version="c"] .cta-band::after{content:"";position:absolute;right:-3vw;bottom:-6vw;width:clamp(240px, 26vw, 420px);height:clamp(240px, 26vw, 420px);background:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 48 48%27 fill=%27none%27 stroke=%27%23FAC9B5%27 stroke-width=%271.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M16 27V12.5a3 3 0 0 1 6 0V24M22 22V8.5a3 3 0 0 1 6 0V24M28 23V11.5a3 3 0 0 1 6 0V25M34 25v-6.5a3 3 0 0 1 6 0V31c0 8-6.5 13-14 13-6 0-10.5-3-13.5-8L7 27.5a3 3 0 0 1 5-3.5l4 5%27/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9;pointer-events:none} body[data-version="c"] .manifesto .wrap,body[data-version="c"] .cta-band .wrap{position:relative;z-index:1} /* the programs table (Apogee, Arcutis) */ body[data-version="c"] .programs{margin-top:clamp(3rem, 5vw, 4.5rem)} body[data-version="c"] .programs-head{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--t-col-gap);align-items:end;margin-bottom:1.2rem} body[data-version="c"] .programs-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem, 2.6vw, 2.4rem);line-height:1.1;color:var(--ink);margin-top:.9rem} body[data-version="c"] .programs-head p{margin:0} body[data-version="c"] .ptable-wrap{overflow-x:auto} body[data-version="c"] .ptable{width:100%;border-collapse:collapse;font-size:.98rem;min-width:640px} body[data-version="c"] .ptable th,body[data-version="c"] .ptable td{text-align:left;padding:.95rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle} body[data-version="c"] .ptable thead th{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--action)} body[data-version="c"] .ptable tbody th{font-weight:500;color:var(--ink);width:22%} body[data-version="c"] .ptable td:last-child{width:18%;white-space:nowrap} body[data-version="c"] .ptag{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:.34rem .6rem;background:rgba(5,32,102,.08);color:var(--ink)} body[data-version="c"] .ptag.is-lead{background:var(--t-orange)} /* three steps under the platform tabs */ body[data-version="c"] .plat-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem, 3vw, 3rem);margin-top:clamp(2.5rem, 4vw, 3.5rem);padding-top:clamp(1.8rem, 3vw, 2.4rem);border-top:1px solid var(--line)} body[data-version="c"] .pstep .ico{width:40px;height:40px;color:var(--action);margin-bottom:.8rem} body[data-version="c"] .pstep h4{font-family:var(--sans);font-weight:500;font-size:1.15rem;color:var(--ink);margin-bottom:.4rem} body[data-version="c"] .pstep p{font-size:.95rem;line-height:1.55;margin:0;max-width:34ch} body[data-version="c"] .foot-assist a.link{text-transform:none;letter-spacing:0;font-size:1rem} body[data-version="c"] h2 b,body[data-version="c"] h1 b{font-weight:600} body[data-version="c"] h2 em{font-style:normal;color:inherit;font-weight:400} body[data-version="c"] #about h2 em,body[data-version="c"] #platform h2 em{font-style:italic} body[data-version="c"] #platform h2{font-size:clamp(3.2rem, 5.4vw, 6rem);max-width:none} body[data-version="c"] #platform .intro p{font-size:clamp(1.1rem, 1rem + .35vw, 1.35rem);color:var(--ink)} body[data-version="c"] #platform .intro{align-items:end} body[data-version="c"] h1 em{font-style:normal;color:inherit;font-weight:inherit} body[data-version="c"] .hero-photo h1{font-weight:var(--t-h1-weight)} body[data-version="c"] nav.links a{text-transform:none;font-weight:500;color:var(--text-soft)} body[data-version="c"] nav.links a:hover{color:var(--action)} body[data-version="c"] nav.links a::after{background:var(--action)} body[data-version="c"] .brand .wm-name{font-family:var(--t-font-hero);font-stretch:var(--t-hero-stretch);font-weight:700;letter-spacing:.02em;text-transform:uppercase} body[data-version="c"] .brand .wm-desc{font-family:var(--sans);font-weight:500;letter-spacing:.22em} body[data-version="c"] .wm-name,body[data-version="c"] .wm-desc{color:var(--action)} body[data-version="c"] .wm-name{font-family:var(--t-font-hero);font-stretch:var(--t-hero-stretch);font-weight:700;letter-spacing:.02em;text-transform:uppercase} body[data-version="c"] .wm-desc{font-family:var(--sans);font-weight:500;letter-spacing:.22em} body[data-version="c"] section{padding:var(--t-section-pad) 0} body[data-version="c"] .band{background:var(--t-band)} body[data-version="c"] .band-warm{background:var(--t-band-warm)} body[data-version="c"] .frame{background-color:var(--t-frame-bg);border-color:var(--t-frame-line);border-radius:0} body[data-version="c"] .frame-label{background:rgba(255,255,255,.7);color:var(--muted)} body[data-version="c"] .frame-label b{color:var(--text-soft)} /* ---------- C: buttons, Roche size, square, BCG arrow swap on hover ---------- */ .cta-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; font-family:var(--sans);font-weight:500;font-size:var(--t-btn-size);letter-spacing:var(--t-btn-ls);text-transform:var(--t-btn-case); padding:var(--t-btn-pad-y) calc(var(--t-btn-pad-x) + 1.5rem) var(--t-btn-pad-y) var(--t-btn-pad-x); background:var(--action);color:#fff;border:1px solid var(--action); border-radius:var(--t-btn-radius);cursor:pointer;overflow:hidden;white-space:nowrap;text-decoration:none;line-height:1.2; transition:background .3s ease,border-color .3s ease,color .3s ease; } .cta-btn:hover{background:var(--action-deep);border-color:var(--action-deep);color:#fff} .cta-btn .txt{display:inline-block;transition:transform .38s var(--ease)} .cta-btn .arr{position:absolute;top:50%;width:18px;height:12px;line-height:0;transition:transform .38s var(--ease),opacity .28s ease} .cta-btn .arr svg{width:18px;height:12px;display:block} .cta-btn .arr-r{right:1.3rem;transform:translateY(-50%)} .cta-btn .arr-l{left:1.3rem;opacity:0;transform:translate(-14px,-50%)} .cta-btn:hover .arr-r{transform:translate(16px,-50%);opacity:0} .cta-btn:hover .arr-l{transform:translate(0,-50%);opacity:1} .cta-btn:hover .txt{transform:translateX(var(--t-btn-shift))} .cta-btn.ghost{background:transparent;color:var(--action)} .cta-btn.ghost:hover{background:transparent;color:var(--action-deep);border-color:var(--action-deep)} .cta-btn.small{font-size:calc(var(--t-btn-size) * .95);padding:calc(var(--t-btn-pad-y) * .8) calc(var(--t-btn-pad-x) * .85 + 1.4rem) calc(var(--t-btn-pad-y) * .8) calc(var(--t-btn-pad-x) * .85)} .cta-btn.small .arr-r{right:1.1rem} .cta-btn.small .arr-l{left:1.1rem} .cta-btn:disabled{opacity:.6;cursor:wait} .btns{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center} /* ---------- C: full-image hero, copy laid over the photograph (Lilly / AbbVie), text layout kept ---------- */ .hero-photo{position:relative;min-height:clamp(var(--t-hero-min), var(--t-hero-vw), var(--t-hero-max));display:flex;align-items:var(--t-hero-valign);color:#fff;overflow:hidden;isolation:isolate;background:var(--ink);padding:0 !important} .hero-photo .frame{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;z-index:-2;background-color:#8c8c8c} .hero-photo .frame .frame-label{background:rgba(25,25,25,.5);color:rgba(255,255,255,.75);margin:1.25rem auto auto} .hero-photo .frame .frame-label b{color:#fff} .hero-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(5,32,102,var(--t-hero-overlay)) 0%, rgba(5,32,102,calc(var(--t-hero-overlay) * .7)) 45%, rgba(5,32,102,calc(var(--t-hero-overlay) * .25)) 100%)} .hero-photo .wrap{position:relative;width:100%;padding-top:clamp(3rem, 6vw, 5rem);padding-bottom:clamp(3rem, 6vw, 5rem)} .hero-photo .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--t-hero-gap);max-width:var(--t-hero-copy-w)} .hero-photo .brandline{margin:0;padding:0;font-size:var(--t-brandline-size);letter-spacing:var(--t-brandline-ls);text-transform:uppercase;color:var(--t-peach);font-weight:500} .hero-photo h1{font-family:var(--t-font-hero, var(--serif));font-stretch:var(--t-hero-stretch, 100%);font-weight:var(--t-h1-weight);font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:-.01em;color:#fff;max-width:16ch} .hero-photo h1 em{color:inherit} .hero-photo p{font-size:var(--t-hero-p-size);max-width:44ch;color:rgba(255,255,255,.9);line-height:1.6} .hero-photo .btns{margin-top:.4rem} .hero-photo .cta-btn.ghost{color:#fff;border-color:rgba(255,255,255,.75)} .hero-photo .cta-btn.ghost:hover{background:transparent;color:#fff;border-color:#fff} /* ---------- C: composition, iteration 4 (Roche / Novartis / Lilly) ---------- */ body[data-version="c"] #about h2{font-size:clamp(3rem, 5vw, 5.6rem);max-width:none} body[data-version="c"] #about .split{align-items:stretch} body[data-version="c"] .about-col{display:flex;flex-direction:column;justify-content:space-between;gap:2rem} body[data-version="c"] .ceo{display:flex;align-items:flex-start;gap:1.4rem;margin:0;padding-top:1.5rem;border-top:1px solid var(--line)} body[data-version="c"] .ceo-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;margin-top:.2rem} body[data-version="c"] .ceo blockquote{font-family:var(--t-font-serif);font-size:clamp(1.1rem, .95rem + .4vw, 1.35rem);line-height:1.4;color:var(--ink);margin:0 0 .6rem;max-width:none} body[data-version="c"] .ceo-name{font-size:.9rem;color:var(--text-soft);margin:0;max-width:none} body[data-version="c"] .ceo-name b{color:var(--ink);font-weight:600} body[data-version="c"] #about .lead{font-size:clamp(1.25rem, 1rem + .45vw, 1.6rem);line-height:1.35;font-weight:500;color:var(--ink);max-width:26ch} body[data-version="c"] #about .lead + p{margin-top:1.4rem} body[data-version="c"] .manifesto{background:var(--t-band-warm);text-align:center} body[data-version="c"] .manifesto .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem, 4vw, 4.5rem);width:100%;max-width:1180px;margin:clamp(3rem, 5vw, 4.5rem) auto 0;text-align:left} body[data-version="c"] .trio-item{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;color:inherit} body[data-version="c"] .trio .ico{width:48px;height:48px;color:var(--ink);margin-bottom:.4rem} body[data-version="c"] .trio h3{font-family:var(--sans);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--ink)} body[data-version="c"] .trio p{font-size:1rem;line-height:1.55;max-width:30ch;margin:0} body[data-version="c"] .trio .cta-btn{margin-top:.5rem} body[data-version="c"] .manifesto .wrap{display:flex;flex-direction:column;align-items:center} body[data-version="c"] .manifesto .mark-sm{margin-bottom:1.6rem} body[data-version="c"] .manifesto .wm-name{font-family:var(--t-font-hero);font-stretch:var(--t-hero-stretch);font-weight:700;letter-spacing:.02em;text-transform:uppercase} body[data-version="c"] .manifesto .wm-desc{font-family:var(--sans);font-weight:500;letter-spacing:.22em} body[data-version="c"] .manifesto .statement{font-family:var(--t-font-serif);font-size:clamp(2.2rem, 3.8vw, 4.2rem);line-height:1.12;color:var(--ink);max-width:22ch;margin:0 auto} body[data-version="c"] .manifesto .statement em{font-style:italic;font-weight:400;color:inherit} body[data-version="c"] #science{background:var(--t-band)} body[data-version="c"] .split .cta-btn,body[data-version="c"] .ab-block .cta-btn{min-width:14rem;justify-content:center} body[data-version="c"] .hero-photo .btns{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;margin-top:.6rem} body[data-version="c"] .hero-photo .cta-btn{width:100%;justify-content:center} body[data-version="c"] .cta-band .btns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:52rem;margin-top:2.2rem} body[data-version="c"] .cta-band .cta-btn{width:100%;justify-content:center} body[data-version="c"] .loop-intro{text-align:center;max-width:62ch;margin:0 auto clamp(2rem, 3vw, 2.8rem)} body[data-version="c"] .loop-intro .label{display:block;margin-bottom:1rem} body[data-version="c"] .loop-intro h2{margin:0 auto} body[data-version="c"] .loop-intro p{margin:var(--t-h2-gap) auto 0} body[data-version="c"] .card3 p{font-size:.98rem} /* ---------- C: split rows (We are Synthena, Explore our science) ---------- */ .split{display:grid;grid-template-columns:var(--t-about-cols);gap:var(--t-col-gap);align-items:center} .split .frame{aspect-ratio:var(--t-about-ratio);border:0} .split.sci{grid-template-columns:var(--t-sci-cols)} .split.sci .frame{aspect-ratio:var(--t-sci-ratio)} .split h2{max-width:20ch} .split .btns{margin-top:1.4rem} .pull{font-family:var(--t-font-serif);font-weight:400;font-size:var(--t-pull-size);line-height:1.4;color:var(--ink);max-width:34ch;margin:clamp(2.5rem, 5vw, 4rem) auto 0;text-align:center} body[data-version="c"] .steps{margin-top:1.6rem;border-top:1px solid var(--line)} body[data-version="c"] .step{padding:var(--t-step-pad) 0;grid-template-columns:minmax(0,var(--t-step-label-w)) minmax(0,1fr)} body[data-version="c"] .step h3{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:500;color:var(--muted)} body[data-version="c"] .step p{font-size:1rem;line-height:1.6} /* ---------- C: section intro, AbbVie: label, bold statement with the closing phrase in blue, paragraph ---------- */ .intro{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--t-col-gap);align-items:end} .intro h2{max-width:20ch;margin:0} .intro p{margin:0} .intro .label{display:block;margin-bottom:1.1rem} /* ---------- C: pillar cards (Roche "Our mission in action", four across) ---------- */ .cards3{display:grid;grid-template-columns:var(--t-card-cols);gap:var(--t-card-gap);margin-top:clamp(1.8rem, 3vw, 2.5rem)} .card3{background:var(--t-card-bg);border:1px solid var(--line);display:flex;flex-direction:column} .card3 .frame{aspect-ratio:var(--t-card-ratio);border:0;border-bottom:1px solid var(--line)} .card3-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .card3 .label{color:var(--muted)} .card3 h3{font-family:var(--sans);font-weight:500;font-size:1.4rem;line-height:1.25;color:var(--ink)} .card3 p{font-size:1rem;line-height:1.6;margin:0;flex:1;max-width:none} .card3 .cta-btn{align-self:flex-start;margin-top:.7rem} body[data-version="c"] #pillars{background:var(--t-card-band)} /* ---------- C: Our platform, Moderna's tabbed explainer with one macro image ---------- */ body[data-version="c"] #platform{background:var(--t-plat-band)} .plat{display:grid;grid-template-columns:var(--t-plat-cols);gap:var(--t-col-gap);align-items:center;margin-top:clamp(1.8rem, 3vw, 2.5rem)} .plat .tab-list{display:flex;flex-direction:column;gap:.1rem;border-left:1px solid var(--line);align-self:center} .plat .tab{font-family:var(--sans);font-weight:500;font-size:calc(var(--t-plat-tab-size) * 1.1);line-height:1.3;text-align:left;background:none;border:0;border-left:2px solid transparent;margin-left:-1px;padding:.7rem 0 .7rem 1.1rem;color:var(--muted);cursor:pointer;transition:color .25s,border-color .25s} .plat .tab:hover{color:var(--ink)} .plat .tab[aria-selected="true"]{color:var(--action);border-left-color:var(--action)} .plat .frame{aspect-ratio:var(--t-plat-ratio);border:0} .plat-frames{position:relative} .plat-frames .frame{display:none} .plat-frames .frame.on{display:block} .plat .tab-panel{display:none} .plat .tab-panel.on{display:block;animation:fadeUp .5s var(--ease)} .plat .tab-panel h3{font-family:var(--sans);font-weight:500;font-size:2rem;line-height:1.2;color:var(--ink);margin-bottom:1rem} .plat .tab-panel p{font-size:1rem;line-height:1.6;max-width:none} .plat .tab-panel p+p{margin-top:.9rem} /* ---------- C: Novartis full-width photo band with the gradient block ---------- */ .ab{display:grid;grid-template-columns:var(--t-ab-cols);min-height:clamp(var(--t-ab-min), var(--t-ab-vw), var(--t-ab-max));padding:0 !important} .ab .frame{aspect-ratio:auto;height:100%;min-height:320px;border:0} .ab-block{position:relative;background:linear-gradient(var(--t-ab-grad-angle), var(--t-ab-grad-from), var(--t-ab-grad-to));color:var(--t-ab-text);display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:clamp(2rem, 4vw, 3.5rem)} .ab-stub{position:absolute;left:0;top:clamp(2rem, 4vw, 3.5rem);width:10px;height:88px;background:var(--t-orange)} .ab-block .cta-btn.ghost{color:#fff;border-color:rgba(255,255,255,.75)} .ab-block .cta-btn.ghost:hover{background:transparent;color:#fff;border-color:#fff} .ab-block .label{color:var(--t-ab-text);opacity:.8} .ab-block h2{color:var(--t-ab-text);max-width:14ch;margin:0} .ab-block p{color:var(--t-ab-text);max-width:36ch;margin:0} .ab-block .cta-btn{align-self:flex-start;margin-top:.6rem} /* ---------- C: looping three-up carousel (Lilly condition carousel) ---------- */ .loop{position:relative} .loop-stage{position:relative;overflow:hidden;height:420px;container-type:inline-size;transition:height .4s var(--ease);outline:none} .loop-stage:focus-visible{box-shadow:0 0 0 3px var(--tint)} .lslide{ position:absolute;top:50%;left:50%;width:var(--t-loop-slide-w);aspect-ratio:var(--t-loop-ratio); transform:translate(-50%,-50%) scale(var(--t-loop-center-scale)); border-radius:var(--t-loop-radius);overflow:hidden;background:#3a3a3a;cursor:pointer;isolation:isolate; transition:transform var(--t-loop-speed) var(--ease),opacity var(--t-loop-speed) ease; will-change:transform; } .lslide .frame{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;z-index:0;background-color:#8c8c8c} .lslide .frame .frame-label{background:rgba(25,25,25,.5);color:rgba(255,255,255,.75);margin:1rem auto auto} .lslide .frame .frame-label b{color:#fff} .lslide-overlay{position:absolute;inset:0;background:rgba(0,0,0,var(--t-loop-overlay));z-index:1;pointer-events:none} .lslide-word{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;margin:0;padding:1rem;text-align:center;pointer-events:none;transition:opacity .3s ease} .lslide-word h3{font-family:var(--t-font-hero, var(--sans));font-stretch:var(--t-hero-stretch, 100%);font-weight:700;font-size:var(--t-loop-word-size);line-height:1.15;color:var(--t-loop-word-color);text-shadow:0 2px 28px rgba(0,0,0,.4);margin:0} .lslide-tag{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:#fff;background:rgba(5,32,102,.55);padding:.34rem .6rem} .lslide-tag.is-lead{background:var(--t-orange);color:var(--ink)} .lslide-card{position:absolute;left:0;right:0;bottom:0;z-index:3;transform:translateY(102%);transition:transform .42s var(--ease);background:rgba(255,255,255,var(--t-loop-card-alpha));backdrop-filter:blur(var(--t-loop-card-blur));-webkit-backdrop-filter:blur(var(--t-loop-card-blur));padding:1.3rem 1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;color:var(--ink);cursor:default} .lslide-kicker{font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--action)} .lslide-card h4{font-family:var(--sans);font-weight:500;font-size:1.35rem;line-height:1.2;color:var(--ink)} .lslide-card p{font-size:.95rem;line-height:1.55;color:var(--text-soft);margin:0;max-width:none} .lslide-card .cta-btn{align-self:flex-start;margin-top:.4rem} .lslide.is-center{z-index:3} .lslide.is-center:hover .lslide-card,.lslide.is-center.is-open .lslide-card{transform:none} .lslide.is-center:hover .lslide-word,.lslide.is-center.is-open .lslide-word{opacity:0} .lslide.is-prev{transform:translate(calc(-50% - 50cqw + var(--t-loop-side-x)),-50%) scale(var(--t-loop-side-scale));opacity:var(--t-loop-side-alpha);z-index:2} .lslide.is-next{transform:translate(calc(-50% + 50cqw - var(--t-loop-side-x)),-50%) scale(var(--t-loop-side-scale));opacity:var(--t-loop-side-alpha);z-index:2} .lslide.is-far-left{transform:translate(calc(-50% - 150cqw),-50%) scale(var(--t-loop-side-scale));opacity:0;z-index:1;pointer-events:none} .lslide.is-far-right{transform:translate(calc(-50% + 150cqw),-50%) scale(var(--t-loop-side-scale));opacity:0;z-index:1;pointer-events:none} .lslide.is-prev .lslide-card,.lslide.is-next .lslide-card{display:none} .loop-nav{display:flex;justify-content:var(--t-loop-arrows-pos);align-items:center;gap:var(--t-loop-arrow-gap);margin-top:1.4rem} .loop-arrow{width:var(--t-loop-arrow-size);height:var(--t-loop-arrow-size);background:var(--action);color:#fff;border:0;border-radius:var(--t-loop-arrow-radius);display:grid;place-items:center;cursor:pointer;transition:background .25s} .loop-arrow:hover{background:var(--action-deep)} .loop-arrow{position:relative;overflow:hidden} .loop-arrow svg{width:20px;height:14px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .38s var(--ease),opacity .28s ease} .loop-arrow .ib{opacity:0} [data-loop-next] .ib{transform:translate(calc(-50% - 14px),-50%)} [data-loop-prev] .ib{transform:translate(calc(-50% + 14px),-50%)} [data-loop-next]:hover .ia{transform:translate(calc(-50% + 16px),-50%);opacity:0} [data-loop-prev]:hover .ia{transform:translate(calc(-50% - 16px),-50%);opacity:0} .loop-arrow:hover .ib{transform:translate(-50%,-50%);opacity:1} .loop-count{font-family:var(--sans);font-size:.8rem;color:var(--muted);min-width:3.5em;text-align:center} .loop-intro{margin-bottom:clamp(1.6rem, 3vw, 2.4rem)} /* ---------- C: quote card (Lilly patient story) ---------- */ body[data-version="c"] .quote{background:var(--t-quote-bg);border-color:transparent;margin-top:clamp(3rem, 6vw, 5rem)} body[data-version="c"] .quote blockquote{font-family:var(--t-font-serif);font-weight:400;max-width:24ch} body[data-version="c"] .quote-mark{font-family:var(--t-font-serif);color:var(--action)} body[data-version="c"] .quote cite{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--text-soft)} body[data-version="c"] .quote cite b{font-weight:500;color:var(--ink)} /* ---------- C: mission band, text on image (Lilly) ---------- */ .mis{position:relative;min-height:clamp(var(--t-mis-min), var(--t-mis-vw), var(--t-mis-max));display:flex;align-items:center;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;text-align:var(--t-mis-align);padding:0 !important} .mis .frame{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;z-index:-2;background-color:#8c8c8c} .mis .frame .frame-label{background:rgba(25,25,25,.5);color:rgba(255,255,255,.75);margin:1.25rem auto auto} .mis .frame .frame-label b{color:#fff} .mis::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(5,32,102,calc(var(--t-mis-overlay) + .22)) 0%, rgba(5,32,102,var(--t-mis-overlay)) 42%, rgba(5,32,102,calc(var(--t-mis-overlay) * .55)) 100%);z-index:-1} .mis-content{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(3rem, 6vw, 5rem) var(--pad);display:flex;flex-direction:column;align-items:var(--t-mis-items);gap:1.2rem} .mis .label{color:rgba(255,255,255,.8)} .mis h2{color:#fff;font-size:var(--t-mis-h2-size);max-width:16ch;margin:0} .mis p{color:rgba(255,255,255,.9);max-width:min(var(--t-mis-p-w), 44ch);margin:0;font-size:1.05rem;line-height:1.65} body[data-version="c"] .mis h2 em{color:inherit} body[data-version="c"] .ab-block h2 em{color:inherit} body[data-version="c"] .hero-photo h1 em{color:inherit} /* ---------- C: contact band (Roche "Shape the future of healthcare") ---------- */ .cta-band{background:linear-gradient(135deg, var(--t-cta-grad-from), var(--t-cta-grad-to));padding:var(--t-cta-pad) 0 !important} .cta-band h2{max-width:20ch} .cta-band p{max-width:52ch} .cta-band .btns{margin-top:1.6rem} /* ---------- C: light footer (Roche) ---------- */ footer.foot-light{background:var(--bg);color:var(--text);border-top:2px solid var(--action);padding:var(--t-foot-pad) 0 2.5rem} .foot-top{display:grid;grid-template-columns:var(--t-foot-cols);gap:clamp(2rem, 5vw, 5rem);align-items:start} .foot-tag-col{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start} footer.foot-light .foot-brand{font-size:18px} .foot-tag{font-family:var(--sans);font-weight:400;font-size:var(--t-foot-tag-size);line-height:1.3;color:var(--ink);max-width:18ch;margin:0} .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2.5rem;align-content:start} .foot-links a{font-family:var(--sans);font-size:var(--t-foot-link-size);color:var(--text-soft);transition:color .25s} .foot-links a:hover{color:var(--action)} .foot-assist h3{font-family:var(--sans);font-weight:500;font-size:1.05rem;color:var(--ink);margin-bottom:.8rem} .foot-assist p{font-size:.95rem;line-height:1.6;margin-bottom:1rem;max-width:40ch} .foot-assist a.link{font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--action);text-decoration:underline;text-underline-offset:.2em;display:inline-block;margin-bottom:.4rem} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:clamp(2.5rem, 5vw, 4rem);padding-top:1.6rem;border-top:1px solid var(--line)} footer.foot-light .foot-meta{color:var(--muted);text-transform:none;letter-spacing:0;font-size:.85rem} footer.foot-light .foot-legal{color:var(--muted);margin-top:1.4rem;max-width:90ch;line-height:1.6;font-size:.82rem} footer.foot-light .foot-legal a{color:var(--action);text-decoration:underline;text-underline-offset:.2em} /* ---------- C: contact dialog ---------- */ dialog.modal{margin:auto;border:0;padding:0;background:#fff;color:var(--text);width:min(92vw, 880px);max-height:90vh;overflow:auto;border-radius:0;box-shadow:0 30px 80px rgba(0,0,0,.35)} dialog.modal::backdrop{background:rgba(5,32,102,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .modal-inner{position:relative;padding:clamp(1.8rem, 4vw, 3.5rem)} .modal h2{font-family:var(--serif);font-size:clamp(1.7rem, 3vw, 2.3rem);color:var(--ink);margin-bottom:1.6rem;max-width:none} .modal-close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:0;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:background .25s,color .25s} .modal-close:hover{background:var(--ink);color:#fff} .modal-close svg{width:16px;height:16px} .modal .form{margin-top:0} .form-light label{color:var(--text-soft);text-transform:none;letter-spacing:0;font-size:.85rem} .form-light input,.form-light textarea{background:#fff;color:var(--text);border:1px solid var(--line);border-radius:0} .form-light input::placeholder,.form-light textarea::placeholder{color:var(--muted)} .form-light input:focus,.form-light textarea:focus{border-color:var(--action);background:#fff;box-shadow:0 0 0 3px var(--tint)} .form-light .form-actions{justify-content:space-between;margin-top:.8rem} .form-light .form-status{color:var(--text-soft)} .form-light .form-note{color:var(--muted)} /* ---------- responsive ---------- *//* ---------- responsive ---------- */ @media (max-width:1024px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} .cards3{grid-template-columns:repeat(2,minmax(0,1fr))} .explainer{grid-template-columns:minmax(0,11rem) minmax(0,1fr);} .explainer .tab-panels{grid-column:1/-1} .plat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .plat .tab-list{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:.4rem;border-left:0;border-bottom:1px solid var(--line)} .plat .tab{border-left:0;border-bottom:2px solid transparent;margin:0 0 -1px;padding:.6rem .9rem} .plat .tab[aria-selected="true"]{border-bottom-color:var(--action)} } @media (max-width:820px){ body{font-size:16px} nav.links{display:none} nav.links.open{ display:flex;flex-direction:column;gap:1.4rem; position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh; background:var(--bg);overflow-y:auto;border-radius:0; padding:6rem var(--pad);align-items:flex-start;justify-content:flex-start;z-index:40; } nav.links.open a{font-size:1.05rem} .menu-toggle{display:flex;flex-direction:column;gap:5px;z-index:60;background:none;border:0;cursor:pointer;padding:.5rem;position:relative} .menu-toggle span{width:24px;height:1.5px;background:var(--ink);transition:.3s} .split,.split.sci,.cards3,.ab,.intro{grid-template-columns:1fr} .hero-photo .hero-copy{max-width:none} .ab .frame{min-height:56vw} .lslide{width:78%} .plat{grid-template-columns:1fr} .plat .tab-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .plat .tab{white-space:nowrap} .mis{min-height:70vh} .foot-top{grid-template-columns:1fr;gap:2.2rem} .menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .menu-toggle.open span:nth-child(2){opacity:0} .menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .two-col{grid-template-columns:1fr;gap:1.6rem} .step{grid-template-columns:1fr;gap:.4rem} .hero-split{grid-template-columns:1fr;padding-top:7rem;min-height:auto} .hero-split .hero-media{max-width:420px} .explainer{grid-template-columns:1fr} .tab-list{flex-direction:row;overflow-x:auto;gap:.5rem;scrollbar-width:none} .tab{border-left:0;border-bottom:2px solid transparent;padding:.5rem .8rem;white-space:nowrap} .tab[aria-selected="true"]{border-bottom-color:var(--action)} .pipe-head{display:none} .pipe-row{grid-template-columns:1fr;gap:.6rem;padding:1rem 0} .pipe-row .stage{text-align:left} .quote,.mission-card{grid-template-columns:1fr} .quote .frame,.mission-card .frame{min-height:0;aspect-ratio:3/2;height:auto} .form{grid-template-columns:1fr} .foot-inner{flex-direction:column;align-items:flex-start} .foot-top{grid-template-columns:1fr;gap:2.5rem} .foot-links{grid-template-columns:1fr 1fr} .form-light .form-actions{flex-direction:column-reverse;align-items:stretch} .modal .cta-btn{width:100%} .cta-band .btns{grid-template-columns:1fr} .hero-photo .btns{grid-template-columns:1fr} body[data-version="c"] .manifesto .trio{grid-template-columns:1fr} body[data-version="c"] .ceo-photo{width:64px;height:64px} body[data-version="c"] .programs-head,body[data-version="c"] .plat-steps{grid-template-columns:1fr} } @media (max-width:640px){ .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);padding-bottom:.5rem;scrollbar-width:none} .cards::-webkit-scrollbar{display:none} .card{flex:0 0 78vw;scroll-snap-align:start} } /* ---------- motion ---------- */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} .hero-type .wordmark,.hero-type .brandline,.hero-type .kicker{opacity:1;transform:none} } /* panel pass 2026-09-08: the reviewers' consensus. Delete this block to restore the presentation pass. */ body[data-version="c"] .label::before,body[data-version="c"] .hero-photo .brandline::before{display:none} body[data-version="c"] #pillars::before,body[data-version="c"] #platform::before,body[data-version="c"] #science::before{display:none} body[data-version="c"] .cta-band::after{display:none} body[data-version="c"] .hero-photo h1{font-family:var(--serif);font-stretch:100%;font-weight:400;font-size:clamp(3rem, 5.4vw, 5.8rem);line-height:1.02;letter-spacing:-.015em} body[data-version="c"] .lslide-word h3{font-family:var(--serif);font-stretch:100%;font-weight:400;font-size:clamp(2.1rem, 3.6vw, 3.2rem);letter-spacing:-.01em} body[data-version="c"] .lslide.is-prev .lslide-tag,body[data-version="c"] .lslide.is-next .lslide-tag{display:none} body[data-version="c"] .lslide.is-prev .lslide-word h3,body[data-version="c"] .lslide.is-next .lslide-word h3{font-size:clamp(1.3rem, 1.9vw, 1.8rem)} body[data-version="c"] .lslide.is-prev .lslide-word{align-items:flex-end;padding-right:2.4rem;text-align:right} body[data-version="c"] .lslide.is-next .lslide-word{align-items:flex-start;padding-left:2.4rem;text-align:left} body[data-version="c"] .hero-photo .hero-copy p{text-shadow:0 1px 22px rgba(5,32,102,.55)} body[data-version="c"] .ptag.is-lead,body[data-version="c"] .lslide-tag.is-lead{background:var(--ink);color:#fff} /* mobile: the C grid rule outranked the 820px override, so the hero and contact buttons stayed two-up */ @media (max-width:820px){body[data-version="c"] .hero-photo .btns,body[data-version="c"] .cta-band .btns{grid-template-columns:1fr}} /* programs strip 2026-09-08: the six areas and their stage in one row, each cell turns the carousel */ body[data-version="c"] .programs{margin-top:clamp(2.4rem, 4vw, 3.6rem);border-top:1px solid var(--line);padding-top:1.3rem} body[data-version="c"] .programs > .label{display:block;margin-bottom:1.1rem} body[data-version="c"] .pipeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6, 1fr)} body[data-version="c"] .pipe-cell{appearance:none;background:none;border:0;border-left:1px solid var(--line);width:100%;text-align:left;padding:.15rem 1rem .3rem;display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;cursor:pointer;font:inherit;color:var(--ink)} body[data-version="c"] .pipeline li:first-child .pipe-cell{border-left:0;padding-left:0} body[data-version="c"] .pipe-name{font-family:var(--sans);font-weight:500;font-size:1.02rem;line-height:1.2;text-underline-offset:.3em;text-decoration-thickness:1px} body[data-version="c"] .pipe-cell:hover .pipe-name,body[data-version="c"] .pipe-cell:focus-visible .pipe-name{color:var(--action)} body[data-version="c"] .pipe-cell.is-on .pipe-name{color:var(--action);text-decoration:underline} @media (max-width:820px){ body[data-version="c"] .pipeline{grid-template-columns:repeat(2, 1fr);row-gap:1.2rem} body[data-version="c"] .pipeline li:nth-child(odd) .pipe-cell{border-left:0;padding-left:0} } /* polish 2026-09-08: tap targets on phones (WCAG 2.5.5 size), desktop untouched */ @media (max-width:820px){ .menu-toggle{min-width:44px;min-height:44px} #links a,.links a{display:block;padding:.55rem 0} .foot-links a{display:inline-block;padding:.5rem 0} .foot-legal a{display:inline-block;padding:.35rem 0} } /* motion 2026-09-08: reveals, hover, the platform crossfade, the hero settle, the dotted field. Delete to restore. */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)} [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}} body[data-version="c"] .card3 .frame,body[data-version="c"] .split .frame,body[data-version="c"] .hero-photo .frame{overflow:hidden} body[data-version="c"] .card3 .frame img,body[data-version="c"] .split .frame img,body[data-version="c"] .lslide .frame img{transition:transform .9s cubic-bezier(.2,.7,.2,1)} body[data-version="c"] .card3:hover .frame img{transform:scale(1.045)} body[data-version="c"] .split .frame:hover img{transform:scale(1.025)} body[data-version="c"] .lslide.is-center:hover .frame img{transform:scale(1.03)} body[data-version="c"] .card3 h3{transition:color .25s} body[data-version="c"] .card3:hover h3{color:var(--action)} body[data-version="c"] .pstep{transition:transform .35s ease} body[data-version="c"] .pstep:hover{transform:translateY(-4px)} body[data-version="c"] .plat .tab{transition:color .25s,border-color .25s,transform .3s ease} body[data-version="c"] .plat .tab:hover{transform:translateX(4px)} body[data-version="c"] .plat-frames{position:relative} body[data-version="c"] .plat-frames .frame{display:block;position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none} body[data-version="c"] .plat-frames .frame.on{position:relative;opacity:1;pointer-events:auto} body[data-version="c"] .hero-photo .frame img{animation:heroSettle 18s ease-out both} @keyframes heroSettle{from{transform:scale(1.06)}to{transform:scale(1)}} @media (prefers-reduced-motion:reduce){body[data-version="c"] .hero-photo .frame img{animation:none}} body[data-version="c"] #platform,body[data-version="c"] #areas{position:relative;overflow:hidden} body[data-version="c"] #platform > .wrap,body[data-version="c"] #areas > .wrap{position:relative;z-index:1} body[data-version="c"] #platform::before{content:"";display:block;position:absolute;left:auto;right:-10vw;top:-8vw;width:50vw;height:50vw;transform:none;border-radius:0;box-shadow:none;background:radial-gradient(circle, rgba(5,32,102,.16) 1px, transparent 1.6px) 0 0/24px 24px;-webkit-mask:radial-gradient(closest-side, #000 15%, transparent 72%);mask:radial-gradient(closest-side, #000 15%, transparent 72%);pointer-events:none;z-index:0} body[data-version="c"] #areas::after{content:"";position:absolute;left:-12vw;bottom:-10vw;width:48vw;height:48vw;background:radial-gradient(circle, rgba(5,32,102,.16) 1px, transparent 1.6px) 0 0/24px 24px;-webkit-mask:radial-gradient(closest-side, #000 15%, transparent 72%);mask:radial-gradient(closest-side, #000 15%, transparent 72%);pointer-events:none;z-index:0} .form-light select{appearance:none;-webkit-appearance:none;font:400 16px/1.5 var(--sans);padding:.9rem 2.6rem .9rem 1rem;color:var(--text);border:1px solid var(--line);border-radius:0;background:#fff url("data:image/svg+xml;utf8,") no-repeat right .9rem center/14px 14px;transition:border-color .25s,box-shadow .25s;cursor:pointer} .form-light select:focus{border-color:var(--action);outline:none;box-shadow:0 0 0 3px var(--tint)} /* motion 2 2026-09-08: the dotted field behind the whole section, the drifting text, the sliding stub */ body[data-version="c"] .drift{position:absolute;z-index:0;pointer-events:none;user-select:none;font-family:var(--serif);font-weight:400;line-height:.95;color:rgba(5,32,102,.07);letter-spacing:-.02em;will-change:transform;white-space:nowrap} body[data-version="c"] #platform .drift{right:4vw;top:3vw;font-size:clamp(5rem, 11vw, 13rem)} body[data-version="c"] #areas .drift-list{left:3vw;top:14vw;font-size:clamp(2rem, 3.6vw, 4rem);line-height:1.15;color:rgba(5,32,102,.06);text-align:left} body[data-version="c"] .cta-band .drift-band{right:5vw;top:8%;font-size:clamp(3rem, 6.4vw, 7.5rem);font-style:italic;color:rgba(5,32,102,.08);text-align:right} body[data-version="c"] .cta-band > .wrap{position:relative;z-index:1} body[data-version="c"] .ab-stub{will-change:transform} @media (max-width:820px){body[data-version="c"] .drift{display:none}} @media (prefers-reduced-motion:reduce){body[data-version="c"] .drift,body[data-version="c"] .ab-stub{transform:none !important}} /* dots 2026-09-08: the corner fields of 16.25, on the white and moving. A slow drift of the pattern itself, and a slide with the scroll (--dots-y is set by main.js). Still under reduced motion. */ body[data-version="c"] #platform::before,body[data-version="c"] #areas::after{background:radial-gradient(circle, rgba(5,32,102,.28) 1.3px, transparent 1.9px) 0 0/22px 22px;-webkit-mask:radial-gradient(closest-side, #000 32%, transparent 80%);mask:radial-gradient(closest-side, #000 32%, transparent 80%);transform:translateY(var(--dots-y, 0px));animation:dotsDrift 18s linear infinite;will-change:transform,background-position} body[data-version="c"] #platform::before{width:58vw;height:58vw;right:-12vw;top:-12vw;left:auto;bottom:auto} body[data-version="c"] #areas::after{width:54vw;height:54vw;left:-14vw;bottom:-14vw;right:auto;top:auto} @keyframes dotsDrift{from{background-position:0 0}to{background-position:22px 22px}} @media (max-width:820px){body[data-version="c"] #platform::before,body[data-version="c"] #areas::after{width:120vw;height:120vw}} @media (prefers-reduced-motion:reduce){body[data-version="c"] #platform::before,body[data-version="c"] #areas::after{animation:none;transform:none}} /* latest 2026-09-11: the dated updates row at the foot of the platform section */ body[data-version="c"] .updates{margin-top:clamp(2.5rem, 4vw, 3.5rem);border-top:1px solid var(--line);padding-top:1.3rem} body[data-version="c"] .updates > .label{display:block;margin-bottom:.6rem} body[data-version="c"] .ulist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--t-col-gap)} body[data-version="c"] .ulist li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)} body[data-version="c"] .ulist time{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:.25rem} body[data-version="c"] .ulist p{margin:0;font-size:.98rem;line-height:1.55;color:var(--text-soft)} @media (max-width:820px){body[data-version="c"] .ulist{grid-template-columns:1fr} body[data-version="c"] .ulist li{grid-template-columns:6rem 1fr}} /* last visual pass 2026-09-11 */ body[data-version="c"] p{text-wrap:pretty} body[data-version="c"] .pipe-cell{border-top:2px solid transparent;padding-top:.5rem} body[data-version="c"] .pipe-cell.is-on{border-top-color:var(--action)} body[data-version="c"] .pipe-cell.is-on .pipe-name{text-decoration:none} body[data-version="c"] .ulist{grid-auto-flow:column;grid-template-rows:repeat(4, auto)} @media (max-width:820px){ body[data-version="c"] .hero-photo::after{background:rgba(5,32,102,.5)} body[data-version="c"] .plat .tab-list{flex-wrap:wrap;overflow:visible;row-gap:.2rem} body[data-version="c"] .lslide.is-prev .lslide-word,body[data-version="c"] .lslide.is-next .lslide-word{display:none} body[data-version="c"] .ulist{grid-auto-flow:row;grid-template-rows:none} } /* wild 2026-09-11. Delete this block to return to the deploy-ready page (backups/site-2026-09-11-deploy-ready). */ body[data-version="c"] .hero-photo{min-height:100svh} body[data-version="c"] .hero-photo h1{font-size:clamp(3.4rem, 7vw, 8rem);line-height:.98;max-width:12ch} body[data-version="c"] .wr{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em} body[data-version="c"] .wr > span{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--wd,0ms)} body[data-version="c"] .in .wr > span,body[data-version="c"] .wr.in > span,body[data-version="c"] h1.in .wr > span{transform:none} body[data-version="c"] #platform{background:#052066;--ink:#fff;--text:#fff;--text-soft:rgba(255,255,255,.82);--muted:rgba(255,255,255,.64);--line:rgba(255,255,255,.2);--action:#9DB9FF;--tint:rgba(157,185,255,.25)} body[data-version="c"] #platform .drift{color:rgba(255,255,255,.07)} body[data-version="c"] #platform::before{background:radial-gradient(circle, rgba(255,255,255,.24) 1.3px, transparent 1.9px) 0 0/22px 22px} body[data-version="c"] #platform h2,body[data-version="c"] #platform h3,body[data-version="c"] #platform h4{color:#fff} body[data-version="c"] #platform p,body[data-version="c"] #platform .tab-panel p{color:rgba(255,255,255,.82)} body[data-version="c"] #platform .plat .tab{color:rgba(255,255,255,.66)} body[data-version="c"] #platform .plat .tab:hover,body[data-version="c"] #platform .plat .tab[aria-selected="true"]{color:#fff;border-left-color:#fff} body[data-version="c"] #platform .pstep .ico{color:#9DB9FF} body[data-version="c"] #platform .ulist time,body[data-version="c"] #platform .label{color:rgba(255,255,255,.62)} body[data-version="c"] .gallery{height:340vh;position:relative;margin-top:clamp(2rem, 4vw, 3rem)} body[data-version="c"] .gallery-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center} body[data-version="c"] .gallery-track{display:flex;gap:2.5vw;padding:0 6vw;will-change:transform} body[data-version="c"] .gcard{position:relative;flex:0 0 min(64vw, 980px);height:min(74vh, 720px);overflow:hidden;background:#8c8c8c} body[data-version="c"] .gcard .frame{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0} body[data-version="c"] .gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,32,102,0) 42%, rgba(5,32,102,.74) 100%);pointer-events:none} body[data-version="c"] .gcard-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.4rem, 2.6vw, 2.6rem);color:#fff;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start} body[data-version="c"] .gcard-text h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem, 4.6vw, 4.4rem);line-height:1;margin:0;color:#fff} body[data-version="c"] .gcard-text p{margin:0;max-width:46ch;font-size:1.02rem;line-height:1.5;color:rgba(255,255,255,.9)} body[data-version="c"] .gcard .ptag{background:rgba(255,255,255,.18);color:#fff} body[data-version="c"] .gcard .ptag.is-lead{background:#fff;color:var(--ink)} body[data-version="c"] .gallery.is-static{height:auto} body[data-version="c"] .gallery.is-static .gallery-sticky{position:static;height:auto;overflow:visible;display:block} body[data-version="c"] .gallery.is-static .gallery-track{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.2rem;padding:0;transform:none !important} body[data-version="c"] .gallery.is-static .gcard{flex:none;height:auto;aspect-ratio:4/3} body[data-version="c"] .cta-band .hand-draw{position:absolute;right:7vw;top:50%;transform:translateY(-50%);width:clamp(220px, 24vw, 380px);height:auto;color:var(--ink);opacity:.2;z-index:0} body[data-version="c"] .hand-draw path{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.6s cubic-bezier(.2,.7,.2,1) .2s} body[data-version="c"] .hand-draw.in path{stroke-dashoffset:0} body[data-version="c"] .giant{margin:2.6rem 0 -1.4rem;font-family:var(--t-font-hero);font-stretch:118%;font-weight:800;font-size:clamp(3.6rem, 13.1vw, 15.6rem);line-height:.82;letter-spacing:-.03em;color:var(--action);white-space:nowrap;overflow:hidden;text-transform:uppercase;user-select:none;text-align:center} body[data-version="c"] .split .frame img{transform:translateY(var(--py, 0px)) scale(1.1);transition:transform .35s ease-out} body[data-version="c"] .split .frame:hover img{transform:translateY(var(--py, 0px)) scale(1.13)} @media (max-width:820px){ body[data-version="c"] .gallery{height:auto} body[data-version="c"] .gallery-sticky{position:static;height:auto;overflow:visible;display:block} body[data-version="c"] .gallery-track{overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding:0 6vw 1rem;scrollbar-width:none} body[data-version="c"] .gcard{flex:0 0 82vw;height:62vh;scroll-snap-align:center} body[data-version="c"] .cta-band .hand-draw{display:none} body[data-version="c"] .hero-photo h1{font-size:clamp(2.6rem, 11vw, 4rem)} } @media (prefers-reduced-motion:reduce){ body[data-version="c"] .wr > span{transform:none;transition:none} body[data-version="c"] .hand-draw path{stroke-dashoffset:0;transition:none} body[data-version="c"] .split .frame img{transform:none} } /* wild fixes 2 */ body[data-version="c"] #areas{overflow:clip} /* clip, not hidden: hidden makes the section a scroll container and sticky never sticks */ body[data-version="c"] .giant{margin-left:calc(50% - 50vw);width:100vw;text-align:center;font-size:clamp(3.4rem, 12.2vw, 14.6rem)} /* wild fixes 3: the static grid stacks on phones */ @media (max-width:820px){ body[data-version="c"] .gallery.is-static .gallery-track{grid-template-columns:1fr;display:grid;overflow:visible;padding:0} body[data-version="c"] .gallery.is-static .gcard{flex:none;height:auto;aspect-ratio:4/3;scroll-snap-align:none} } /* calm 2026-09-11: fade-in only. body[data-motion="calm"] keeps the reveals as a short fade and switches the wild motion off: rising words, the drawn hand, the sideways gallery (main.js lays it out as the grid), photograph drift, drifting text, the sliding stub, the moving dots, the hero settle, the pulsing scroll cue. Remove the attribute from to get the wild motion back. */ body[data-motion="calm"] [data-reveal]{transform:translateY(10px);transition:opacity .5s ease,transform .5s ease} body[data-motion="calm"] .wr > span{transform:none;transition:none} body[data-motion="calm"] .hand-draw path{stroke-dashoffset:0;transition:none} body[data-motion="calm"] .giant{display:none} body[data-motion="calm"] #platform::before,body[data-motion="calm"] #areas::after{animation:none;transform:none} body[data-motion="calm"] .hero-photo .frame img{animation:none} body[data-motion="calm"] .scroll-cue .bar{animation:none;transform:none;opacity:.7} body[data-motion="calm"] .drift,body[data-motion="calm"] .ab-stub{transform:none} body[data-motion="calm"] .split .frame img{transform:none;transition:transform .35s ease-out} body[data-motion="calm"] .split .frame:hover img{transform:scale(1.03)}