.elementor-2518 .elementor-element.elementor-element-2f0d39e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2518 .elementor-element.elementor-element-063039f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2518 .elementor-element.elementor-element-ef7b6f3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2518 .elementor-element.elementor-element-378920b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2518 .elementor-element.elementor-element-428f8b5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2518 .elementor-element.elementor-element-8f2dfb7{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS */:root{ --paper:#f8f9fc;--paper-2:#eef1f6; --ink:#1b2a4a;--ink-2:#4b5670;--ink-3:#868da3;--mut-2:#9aa0b4; --accent:#c8202f;--accent-deep:#a5121f;--accent-lift:#e75c68;--accent-soft:#e7eefb; --ink-bg:#161f38;--on-ink:#f2f4fb;--on-ink-2:#aab2c9;--on-ink-3:#79839f; --line:rgba(27,42,74,.12);--line-2:rgba(27,42,74,.2);--line-dk:rgba(255,255,255,.14); --ease:cubic-bezier(0.16,1,0.3,1);--maxw:1160px;--measure:720px;--section-y:clamp(4.5rem,10vw,9rem); --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);background-color:var(--paper);background-image:radial-gradient(circle,rgba(27,42,74,.035) 1px,transparent 1.5px);background-size:28px 28px;color:var(--ink);line-height:1.6;font-size:clamp(1rem,0.97rem + 0.18vw,1.0625rem);-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:var(--accent);color:#fff} a{color:inherit;text-decoration:none}svg{display:block}img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.2rem,5vw,4rem)} .measure{max-width:var(--measure);margin-inline:auto} .mono{font-family:var(--mono)} .kicker{font-family:var(--mono);font-size:0.72rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent-deep);display:inline-flex;align-items:center;gap:0.6em} .kicker::before{content:"";width:1.8em;height:1px;background:var(--accent)} h1,h2,h3{line-height:1.05;letter-spacing:-0.03em;font-weight:800;color:var(--ink)} .btn{display:inline-flex;align-items:center;gap:0.5em;font-family:var(--sans);font-weight:700;font-size:0.94rem;padding:0.85em 1.5em;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s;line-height:1;white-space:nowrap} .btn .arw{transition:transform .5s var(--ease)}.btn:hover .arw{transform:translateX(4px)} .btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-deep);transform:translateY(-2px)} .btn-ghost{border-color:var(--line-2);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff} .ulink{font-family:var(--mono);font-weight:600;font-size:0.8rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:0.45em;border-bottom:1.5px solid var(--accent);padding-bottom:3px;transition:gap .4s var(--ease)} .ulink:hover{gap:0.8em;color:var(--accent-deep)} /* news ticker */ .ticker{background:#fff;border-bottom:1px solid var(--line)} .ticker .row{display:flex;align-items:center;gap:0.9rem;height:42px;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.2rem,5vw,4rem)} .ticker .tag{flex:none;color:#fff;background:var(--accent);border-radius:100px;padding:0.3em 0.85em;font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:0.62rem;letter-spacing:0.12em} .ticker .vp{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 94%,transparent)} .ticker .track{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--mono);font-size:0.75rem;color:var(--ink-2);animation:ticker 36s linear infinite;will-change:transform} .ticker .vp:hover .track{animation-play-state:paused} .ticker .track a{color:var(--ink);transition:color .3s} .ticker .track a:hover{color:var(--accent)} .ticker .track .sep{color:var(--accent);font-weight:700;margin:0 1.4rem} @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker .track{animation:none}} header.site{position:sticky;top:0;z-index:60;background:rgba(248,249,252,.8);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease)} header.site.scrolled{border-bottom-color:var(--line);background:rgba(248,249,252,.95)} .nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);height:72px} .brand{margin-right:auto;display:flex;align-items:center} .brand img{height:26px;width:auto} .nav-links{display:flex;align-items:center;gap:clamp(0.8rem,2vw,2rem);list-style:none} .nav-links a{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.03em;color:var(--ink-2);transition:color .3s} .nav-links a:hover,.nav-links a.on{color:var(--accent)} /* article */ .art{padding-block:clamp(2.4rem,5vw,3.6rem) clamp(3rem,7vw,5.5rem)} .crumbs{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.04em;color:var(--ink-3);margin-bottom:clamp(1.8rem,4vw,2.6rem)} .crumbs a{color:var(--accent-deep);border-bottom:1px solid transparent;transition:border-color .3s} .crumbs a:hover{border-color:var(--accent)} .art-head{max-width:var(--measure);margin-inline:auto} .art-meta{display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.05em;color:var(--ink-3);margin-bottom:1.3rem} .art-meta .cat{font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.35em 0.8em;border-radius:100px;color:var(--accent-deep);border:1px solid rgba(200,32,47,.35);background:rgba(200,32,47,.05);font-weight:600} .art-head h1{font-size:clamp(1.9rem,1.2rem + 2.9vw,3.1rem);line-height:1.06;letter-spacing:-0.032em} .art-dek{margin-top:1.3rem;font-size:clamp(1.15rem,1rem + 0.7vw,1.45rem);color:var(--ink-2);line-height:1.5;font-weight:500} .art-rule{max-width:var(--measure);margin:clamp(2rem,4vw,2.8rem) auto 0;border-top:1px solid var(--line-2)} /* body */ .art-body{max-width:var(--measure);margin:clamp(2rem,4vw,2.8rem) auto 0} .art-body p{font-size:clamp(1.05rem,1rem + 0.35vw,1.2rem);line-height:1.7;color:var(--ink-2);margin-bottom:1.4rem} .art-body p:first-child .dl{font-family:var(--mono);font-size:0.82rem;letter-spacing:0.04em;color:var(--ink);text-transform:uppercase} .art-body strong{color:var(--ink);font-weight:700} .art-body h2{font-size:clamp(1.4rem,1rem + 1.4vw,1.9rem);letter-spacing:-0.025em;margin:2.4rem 0 1rem} .art-body a{color:var(--accent-deep);font-weight:600;border-bottom:1px solid rgba(200,32,47,.35)} /* appointee cards */ .appts{max-width:var(--measure);margin:clamp(2.4rem,5vw,3.4rem) auto;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} @media(max-width:560px){.appts{grid-template-columns:1fr}} .appt{border:1px solid var(--line-2);border-radius:16px;padding:clamp(1.4rem,3vw,1.8rem);background:#fff} .appt .ph{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;position:relative} .appt .ph::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:20px;height:3px;background:var(--accent);border-radius:2px} .appt h4{margin-top:1.2rem;font-weight:800;font-size:1.15rem;letter-spacing:-0.02em} .appt .role{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--accent-deep);margin-top:0.35rem;line-height:1.4} /* pull quote */ .pull{max-width:var(--measure);margin:clamp(2.4rem,5vw,3.4rem) auto;padding-left:clamp(1.2rem,3vw,2rem);border-left:3px solid var(--accent)} .pull p{font-size:clamp(1.25rem,1.1rem + 0.9vw,1.6rem);line-height:1.4;letter-spacing:-0.02em;font-weight:600;color:var(--ink)} .pull cite{display:block;margin-top:1.1rem;font-style:normal;font-family:var(--mono);font-size:0.78rem;letter-spacing:0.04em;color:var(--ink-3)} .pull cite b{color:var(--accent-deep);font-weight:600} /* boilerplate + contact */ .box{max-width:var(--measure);margin:clamp(2rem,4vw,2.8rem) auto 0;border:1px solid var(--line-2);border-radius:16px;padding:clamp(1.5rem,3vw,2rem);background:var(--paper-2)} .box h3{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:0.9rem} .box p{font-size:0.98rem;line-height:1.6;color:var(--ink-2);margin-bottom:0.6rem} .box p:last-child{margin-bottom:0} .box a{color:var(--accent-deep);font-weight:600} .box .mc{font-family:var(--mono);font-size:0.85rem;color:var(--ink);line-height:1.7} .art-foot{max-width:var(--measure);margin:clamp(2.4rem,5vw,3.2rem) auto 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center} /* footer */ .foot{background-color:var(--ink-bg);color:var(--on-ink-2);padding-block:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--line-dk)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line-dk)} .foot-brand .fb{background:#fff;border-radius:8px;padding:.6rem .9rem;display:inline-flex;margin-bottom:1.1rem} .foot-brand .fb img{height:22px;width:auto} .foot-brand p{font-size:0.9rem;max-width:32ch;line-height:1.55} .foot-col h5{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-ink-3);margin-bottom:1rem;font-weight:600} .foot-col a{display:block;font-family:var(--mono);font-size:0.82rem;color:var(--on-ink-2);margin-bottom:0.7rem;transition:color .3s} .foot-col a:hover{color:var(--accent-lift)} .foot-bottom{display:flex;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding-top:1.8rem;font-family:var(--mono);font-size:0.72rem;color:var(--on-ink-3)} .foot-bottom a{color:var(--accent-lift)}.foot-bottom a:hover{color:#fff} @media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}} @media(max-width:760px){.nav-links{display:none}.foot-grid{grid-template-columns:1fr}} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}} /* wordmark logo */ .wm{font-family:var(--sans);font-weight:800;font-size:1.12rem;letter-spacing:-0.035em;color:var(--ink);line-height:1;display:inline-block;white-space:nowrap} .wm .di{position:relative} .wm .di .pl{position:absolute;left:50%;top:-0.30em;transform:translateX(-50%);color:var(--accent);font-size:0.62em;font-weight:800;line-height:0;pointer-events:none} .wm--rev{color:var(--on-ink)} .wm--rev .di .pl{color:var(--accent-lift)} .foot-brand .wm--rev{font-size:1.3rem;margin-bottom:1.1rem} /* mobile nav */ .navtoggle{display:none;width:42px;height:34px;border:1px solid var(--line-2);border-radius:9px;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;margin-left:0.5rem;flex:none} .navtoggle i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px} .mnav{position:fixed;inset:0;z-index:100;background-color:var(--ink-bg);color:var(--on-ink);display:flex;flex-direction:column;justify-content:center;gap:0.1rem;padding:clamp(1.6rem,9vw,3rem);transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .55s var(--ease),opacity .4s var(--ease),visibility .55s;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px} body.mopen .mnav{transform:translateY(0);opacity:1;visibility:visible} body.mopen{overflow:hidden} .mnav .x{position:absolute;top:1.1rem;right:1.1rem;width:46px;height:46px;border:1px solid var(--line-dk);border-radius:11px;background:transparent;color:var(--on-ink);font-size:1.5rem;line-height:1;cursor:pointer} .mnav a.ml{font-family:var(--sans);font-weight:800;font-size:clamp(2.1rem,11vw,3.2rem);letter-spacing:-0.03em;color:var(--on-ink);padding:0.3rem 0;display:inline-flex;align-items:center;gap:0.4rem;width:fit-content;transition:color .3s var(--ease)} .mnav a.ml::after{content:"+";color:var(--accent-lift);font-size:0.5em;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .4s var(--ease)} .mnav a.ml:hover{color:var(--accent-lift)} .mnav a.ml:hover::after{opacity:1;transform:translateX(0)} .mnav .mcta{margin-top:1.8rem} @media(max-width:760px){.navtoggle{display:flex}} /* footer */ .foot{background-color:var(--ink-bg);color:var(--on-ink-2);padding-block:clamp(3.2rem,6vw,5rem);} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(1.6rem,3vw,2.6rem);padding-bottom:2.6rem;border-bottom:1px solid var(--line-dk)} @media(max-width:1020px){.foot-grid{grid-template-columns:1fr 1fr 1fr}.foot-brand{grid-column:1/-1;margin-bottom:.6rem}} @media(max-width:620px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:420px){.foot-grid{grid-template-columns:1fr}} .foot-brand .wm--rev{font-size:1.32rem;margin-bottom:1.05rem;display:inline-block} .foot-brand p{font-size:0.9rem;max-width:34ch;line-height:1.6;color:var(--on-ink-2)} .foot-meta{margin-top:1.3rem;display:grid;gap:0.45rem;font-family:var(--mono);font-size:0.72rem;color:var(--on-ink-3);line-height:1.5} .foot-meta b{color:var(--on-ink);font-weight:600} .foot-meta a{color:var(--accent-lift)} .foot-col h5{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-ink-3);margin-bottom:1.05rem;font-weight:600} .foot-col a{display:block;font-size:0.88rem;color:var(--on-ink-2);margin-bottom:0.68rem;width:fit-content;position:relative;transition:color .3s var(--ease),transform .35s var(--ease)} .foot-col a:hover{color:#fff;transform:translateX(3px)} .foot-col a .nu{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-lift);border:1px solid rgba(231,92,104,.4);border-radius:100px;padding:0.15em 0.5em;margin-left:0.4em;vertical-align:0.12em} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap;padding-top:1.9rem;font-family:var(--mono);font-size:0.72rem;color:var(--on-ink-3)} .foot-bottom a{color:var(--accent-lift)}.foot-bottom a:hover{color:#fff} .foot-bottom .fb-r{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center} /* ============ UNIFIED DESIGN SYSTEM (canonical override) ============ */ :root{ --section-y:clamp(4rem,8.5vw,7.5rem); --section-y-tight:clamp(2.6rem,5vw,4rem); --hero-y:clamp(2.5rem,6vw,5rem); --fs-display:clamp(2.9rem,1.1rem + 6.4vw,6.2rem); --fs-h1:clamp(2.2rem,1.2rem + 3.2vw,3.4rem); --fs-h2:clamp(1.75rem,1.1rem + 2.1vw,2.75rem); --fs-h3:clamp(1.25rem,1rem + 0.9vw,1.6rem); --pat-size:38px 38px; --pat-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M19 13.4v11.2M13.4 19h11.2' stroke='%231b2a4a' stroke-opacity='.085' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); --pat-plus-dk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M19 13.4v11.2M13.4 19h11.2' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); --ease:cubic-bezier(0.16,1,0.3,1); } /* 1. AMBIENT NOISE REMOVED: clean tinted paper, pattern becomes deliberate signal */ body{background-image:none!important;background-color:var(--paper)} /* 2. ONE VERTICAL RHYTHM */ main section[class]{padding-block:var(--section-y)} main section[class].figures,main section[class].facts{padding-block:0} main section[class].hero,main section[class].p-hero,main section[class].phero, main section[class].chero,main section[class].art{padding-block:var(--hero-y) var(--section-y)} main section[class].premise,main section[class].qf,main section[class].feed{padding-block:var(--section-y-tight) var(--section-y)} /* 3. ONE TYPE SCALE */ .hero h1,.p-hero h1,.phero h1,.chero h1{font-size:var(--fs-display);line-height:.95;letter-spacing:-.04em} .art-head h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.032em} main h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.03em} main h3{font-size:var(--fs-h3);letter-spacing:-.02em} .art-body h2{font-size:clamp(1.35rem,1rem + 1.2vw,1.8rem)} .pi-name,.cal-h{font-size:clamp(2rem,1.2rem + 2.5vw,2.9rem)!important} /* 4. PATTERN AS SIGNAL, ONE SPEC, LIGHT + DARK */ .figures,.facts,.trust,.footprint,.qf,.spec-band{ background-image:var(--pat-plus)!important;background-size:var(--pat-size)!important;background-repeat:repeat} .disc,.principles,.areas,.signup,.made,.foot,.invite-card{ background-image:var(--pat-plus-dk)!important;background-size:var(--pat-size)!important} .foot{background-color:var(--ink-bg)} /* 5. SURFACE ALTERNATION for rhythm without noise */ .premise,.calif,.avband{background-color:var(--paper)} .plats,.feats-grid,.team,.faqs,.dist,.sw-sec{background-color:var(--paper)} .figures,.facts,.trust,.footprint,.spec-band{background-color:var(--paper-2)} /* 6. MOTION: scroll reveal (no-JS safe, reduced-motion safe) */ html.rv [data-rv]{opacity:0;transform:translateY(16px)} html.rv [data-rv].in{opacity:1;transform:none; transition:opacity .7s var(--ease),transform .8s var(--ease)} html.rv .hero [data-rv],html.rv .p-hero [data-rv], html.rv .phero [data-rv],html.rv .chero [data-rv]{transform:translateY(20px)} @media(prefers-reduced-motion:reduce){ html.rv [data-rv]{opacity:1!important;transform:none!important;transition:none!important} } /* ---- review pass: fixes ---- */ :root{--hero-y:clamp(1.6rem,3.4vw,2.8rem)} .wm .di .pl{top:-0.17em!important;font-size:0.56em!important;line-height:1!important} .hero-index,.p-hero .crumb{padding-top:0} main section[class].hero{padding-bottom:clamp(3rem,6vw,5.5rem)} /* unify remaining pattern surfaces onto the single spec */ .plats,.feats-grid,.sw-sec{background-image:var(--pat-plus)!important;background-size:var(--pat-size)!important} /* ---- hero entrance: pure CSS, no JS dependency, no FOUC ---- */ @keyframes rvIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .hero > .wrap > *,.p-hero > .wrap > *,.phero > .wrap > *,.chero > .wrap > *,.art > .wrap > *{ animation:rvIn .85s var(--ease) both} .hero > .wrap > *:nth-child(2),.p-hero > .wrap > *:nth-child(2),.phero > .wrap > *:nth-child(2), .chero > .wrap > *:nth-child(2),.art > .wrap > *:nth-child(2){animation-delay:.09s} .hero > .wrap > *:nth-child(3),.p-hero > .wrap > *:nth-child(3),.phero > .wrap > *:nth-child(3), .chero > .wrap > *:nth-child(3),.art > .wrap > *:nth-child(3){animation-delay:.18s} .hero > .wrap > *:nth-child(n+4),.p-hero > .wrap > *:nth-child(n+4),.phero > .wrap > *:nth-child(n+4), .chero > .wrap > *:nth-child(n+4),.art > .wrap > *:nth-child(n+4){animation-delay:.26s} @media(prefers-reduced-motion:reduce){ .hero > .wrap > *,.p-hero > .wrap > *,.phero > .wrap > *,.chero > .wrap > *,.art > .wrap > *{animation:none} } /* ---- final polish ---- */ .hero-fig img,.pro-fig img,.cal-photo img{mix-blend-mode:multiply} .hero-fig img{filter:none;max-width:430px} .person img,.tm .ph img,.logo-grid img{mix-blend-mode:normal} .hero-grid{align-items:center} /* ============ SITE ROLLOUT: flow + nav + footer ============ */ :root{--flow-light:none;--flow-dark:none} /* kill the old + tiling everywhere */ .figures,.facts,.trust,.footprint,.qf,.spec-band,.plats,.feats-grid,.sw-sec, .disc,.principles,.areas,.signup,.made,.foot,.invite-card{background-image:none!important} .flow{position:relative;isolation:isolate} .flow > *{position:relative;z-index:1} .flow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--flow-light);background-size:1200px 600px;background-repeat:repeat; animation:drift 46s linear infinite;opacity:.85} .flow--dk::before{background-image:var(--flow-dark);opacity:.75} .flow--slow::before{animation-duration:78s} @keyframes drift{from{background-position:0 0}to{background-position:1200px 0}} @media(prefers-reduced-motion:reduce){.flow::before{animation:none}} /* nav: sentence case everywhere (match homepage), bigger logo */ .nav-links a{text-transform:none!important;letter-spacing:.02em!important;font-size:.82rem!important} .wm{font-size:1.34rem!important} .brand .tag{display:none} @media(max-width:900px){.wm{font-size:1.15rem!important}} /* footer: more air */ .foot{padding-block:clamp(4rem,7vw,6.5rem)!important} .foot-grid{gap:clamp(2.2rem,4vw,3.6rem)!important;padding-bottom:3.2rem!important} .foot-col a{margin-bottom:.85rem!important;font-size:.9rem!important} .foot-col h5{margin-bottom:1.35rem!important} .foot-brand p{margin-bottom:.4rem} .foot-meta{margin-top:1.6rem!important;gap:.6rem!important} .foot-bottom{padding-top:2.4rem!important;line-height:1.7} /* ============ RESTRAINT PASS ============ */ :root{--topo-light:none;--topo-dark:none} /* pattern is now the exception, not the rule: only opted-in bands keep it */ .flow::before{opacity:.55} .flow--dk::before{opacity:.5} main section.flow:not(.flow--keep)::before{display:none} footer.foot.flow::before{display:none} /* second pattern: slow topographic drift, for variety */ .topo{position:relative;isolation:isolate} .topo > *{position:relative;z-index:1} .topo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--topo-light);background-size:900px 900px;background-position:center; background-repeat:repeat;opacity:.6;animation:topodrift 90s linear infinite} .topo--dk::before{background-image:var(--topo-dark);opacity:.55} @keyframes topodrift{from{background-position:0 0}to{background-position:900px 900px}} @media(prefers-reduced-motion:reduce){.topo::before{animation:none}} /* illustrations: no frames, no boxes, blended into the page (less powerpoint) */ .pi-fig{border:0!important;background:transparent!important;border-radius:0!important; box-shadow:none!important;margin-top:2rem!important;overflow:visible!important} .pi-fig img{mix-blend-mode:multiply;width:100%;max-width:520px} .pi-fig figcaption{border-top:0!important;padding:.7rem 0 0!important;color:var(--ink-3)} .pro-fig,.hero-fig{border:0!important;background:transparent!important;box-shadow:none!important} .pro-fig img,.hero-fig img{mix-blend-mode:multiply;border:0!important;border-radius:0!important;box-shadow:none!important} .pro-fig .tag{background:transparent!important;color:var(--ink-3)!important;border:0!important} /* kill the pulse/beat animations on product pages */ .beat,.dash-live i{animation:none!important} .beat i,.beat::before{animation:none!important} /* ============ LIQUID FLOW + DASH LOGO + WIDER CANVAS ============ */ :root{--liquid-light:none;--liquid-dark:none;--maxw:1400px} .wrap{max-width:var(--maxw)!important;padding-inline:clamp(1.25rem,4.5vw,3.5rem)!important} .ticker .row{max-width:var(--maxw)!important;padding-inline:clamp(1.25rem,4.5vw,3.5rem)!important} .measure{max-width:820px!important} .art-head,.art-body,.art-rule,.art-stats,.pull,.box,.art-foot{max-width:820px!important} .credo .wrap{max-width:1180px!important} .hero .sub,.cal-lead,.craft p.lead,.avband .lead{max-width:60ch} /* logo: + as the i-dot, MINUS where the period was (the two blood signs) */ .wm .pd{display:inline-block!important;width:.40em;height:.105em;background:var(--accent); border-radius:1px;vertical-align:.10em;margin-left:.08em;overflow:hidden;text-indent:-10em;color:transparent} .wm--rev .pd{background:var(--accent-lift)} /* topo retired -> liquid ribbon flow (matches the reference: thick organic bands) */ .topo::before{background-image:var(--liquid-light)!important;background-size:1600px 900px!important; background-position:center!important;opacity:1!important;animation:liquiddrift 70s linear infinite!important} .topo--dk::before{background-image:var(--liquid-dark)!important} @keyframes liquiddrift{from{background-position:0 center}to{background-position:1600px center}} .flow::before{background-image:var(--liquid-light);background-size:1600px 900px;opacity:1; animation:liquiddrift 96s linear infinite} .flow--dk::before{background-image:var(--liquid-dark)} @media(prefers-reduced-motion:reduce){.topo::before,.flow::before{animation:none!important}} /* ============ REVERT TO FLOW-LINES + TRANSPARENT ART + DASH TUNE ============ */ :root{--flow-light:url("data:image/svg+xml,");--flow-dark:url("data:image/svg+xml,")} /* both pattern hooks go back to the approved thin flow-lines */ .flow::before,.topo::before{background-image:var(--flow-light)!important; background-size:1200px 600px!important;background-position:0 0!important; opacity:.6!important;animation:drift 60s linear infinite!important} .flow--dk::before,.topo--dk::before{background-image:var(--flow-dark)!important;opacity:.55!important} @keyframes drift{from{background-position:0 0}to{background-position:1200px 0}} @media(prefers-reduced-motion:reduce){.flow::before,.topo::before{animation:none!important}} /* illustrations are now truly transparent: no blend hacks needed */ .hero-fig img,.pi-fig img,.pro-fig img{mix-blend-mode:normal!important;background:transparent!important} /* dash: lower + smaller, sitting exactly where the period sat */ .wm .pd{width:.30em!important;height:.085em!important;vertical-align:.035em!important;margin-left:.07em!important} /* ============ PATTERN: SIMPLER, SLOWER, LIGHT SECTIONS ONLY ============ */ :root{--simple-flow:none} /* never on blue/dark bands */ .flow--dk::before,.topo--dk::before, .craft::before,.disc::before,.principles::before,.areas::before,.signup::before, .made::before,.avband::before,.invite-card::before,.foot::before,.cta::before{display:none!important} /* light bands: one calm pattern, very slow drift */ .flow::before,.topo::before{background-image:var(--simple-flow)!important; background-size:1400px 700px!important;background-position:0 0!important; opacity:.75!important;animation:driftslow 150s linear infinite!important} @keyframes driftslow{from{background-position:0 0}to{background-position:1400px 0}} @media(prefers-reduced-motion:reduce){.flow::before,.topo::before{animation:none!important}} /* ---- trademark on the wordmark ---- */ .wm{position:relative} .wm .tm{font-size:.30em;font-weight:700;vertical-align:.85em;margin-left:.12em;letter-spacing:.02em; color:var(--ink-3)} .wm--rev .tm{color:var(--on-ink-3)} .wm-inline .tm{font-size:.30em;font-weight:700;vertical-align:.85em;margin-left:.12em;color:var(--ink-3)}/* End custom CSS */