:root{--primary:#d6005a;--primary-fill:#d6005a;--primary-fill-hover:#b30049;--on-primary:#ffffff;--ink:#133240;--ink-soft:#4a5f6b;--ink-faint:#75868f;--line:#e3e8ea;--line-strong:#c6cfd3;--bg:#ffffff;--bg-alt:#f6f8f9;--surface:#ffffff;--header-bg:rgba(255,255,255,.94);--hero-top:#ffffff;--invert-bg:#133240;--invert-ink:#ffffff;--lift:0 18px 40px -24px rgba(19,50,64,.45);color-scheme:light;--radius:14px;--radius-lg:18px;--wrap:1120px;--header-h:72px} /* The theme with no choice made: whatever the operating system asks for. The stylesheet does this on its own, so a visitor with no JavaScript still gets a dark site on a dark desktop. /assets/theme.js only carries a manual choice across pages, as data-theme on . */ @media (prefers-color-scheme:dark){:root:not([data-theme=light]){--primary:#ff77ab;--primary-fill:#d6005a;--primary-fill-hover:#ef1e79;--on-primary:#ffffff;--ink:#e8f0f4;--ink-soft:#a5bcc7;--ink-faint:#8ba3b0;--line:#26404c;--line-strong:#3b5b69;--bg:#0d1a20;--bg-alt:#132530;--surface:#132530;--header-bg:rgba(13,26,32,.94);--hero-top:#0d1a20;--invert-bg:#081217;--invert-ink:#e8f0f4;--lift:0 18px 40px -24px rgba(0,0,0,.75);color-scheme:dark}} :root[data-theme=dark]{--primary:#ff77ab;--primary-fill:#d6005a;--primary-fill-hover:#ef1e79;--on-primary:#ffffff;--ink:#e8f0f4;--ink-soft:#a5bcc7;--ink-faint:#8ba3b0;--line:#26404c;--line-strong:#3b5b69;--bg:#0d1a20;--bg-alt:#132530;--surface:#132530;--header-bg:rgba(13,26,32,.94);--hero-top:#0d1a20;--invert-bg:#081217;--invert-ink:#e8f0f4;--lift:0 18px 40px -24px rgba(0,0,0,.75);color-scheme:dark} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-rendering:optimizeLegibility} h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0 0 .6em} h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.25rem);font-weight:800} h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);font-weight:750} h3{font-size:1.15rem;font-weight:700} p{margin:0 0 1em} a{color:var(--primary);text-decoration:none} a:hover,a:focus-visible{text-decoration:underline} :focus-visible{outline:3px solid var(--primary);outline-offset:2px} img{max-width:100%;height:auto} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:99;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:8px;box-shadow:var(--lift)} .site-header{position:sticky;top:0;z-index:20;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);min-height:var(--header-h)} .brand{display:flex;align-items:center;flex:0 0 auto;color:var(--ink)} .brand:hover{text-decoration:none} .brand-logo,.wordmark{display:block;height:40px;width:auto} /* One wordmark per theme: the reversed art is the same letterforms in white, and CSS cannot swap an src. The hidden one is lazy, so the light theme never pays for the dark file. */ .brand-logo-dark,.wordmark-dark{display:none} :root[data-theme=dark] .brand-logo-light,:root[data-theme=dark] .wordmark-light{display:none} :root[data-theme=dark] .brand-logo-dark,:root[data-theme=dark] .wordmark-dark{display:block} @media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .brand-logo-light,:root:not([data-theme=light]) .wordmark-light{display:none} :root:not([data-theme=light]) .brand-logo-dark,:root:not([data-theme=light]) .wordmark-dark{display:block} } /* The bar is the menu on the desktop, so the burger beside the logo is only there below 900px. It ships hidden as well, and /assets/nav.js reveals it: with no script the panel below is a stacked list rather than a drawer, and a button that opens nothing is never offered. */ .burger{display:none;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer} .burger-icon{position:relative;display:block;width:20px;height:2px;border-radius:2px;background:currentColor} .burger-icon::before,.burger-icon::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:top .18s ease,transform .18s ease} .burger-icon::before{top:-6px} .burger-icon::after{top:6px} .burger[aria-expanded=true]{border-color:var(--primary);color:var(--primary)} /* Open, the three bars are a cross: two of them rotated onto the middle one, which steps aside. */ .burger[aria-expanded=true] .burger-icon{background:transparent} .burger[aria-expanded=true] .burger-icon::before,.burger[aria-expanded=true] .burger-icon::after{top:0} .burger[aria-expanded=true] .burger-icon::before{transform:rotate(45deg)} .burger[aria-expanded=true] .burger-icon::after{transform:rotate(-45deg)} .site-nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);margin-left:auto} /* Language, theme and the call to action, in that order after the links. */ .nav-actions{display:flex;align-items:center;gap:clamp(12px,1.5vw,20px)} .nav-utils{display:flex;align-items:center;gap:10px} .nav-list{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);list-style:none;margin:0;padding:0;white-space:nowrap} .site-nav a{color:var(--ink-soft);font-size:.94rem;font-weight:550} .nav-list>li>a,.nav-sub>summary{display:inline-flex;align-items:center;gap:7px;padding:6px 0;border-bottom:2px solid transparent} .nav-list>li>a:hover,.nav-sub>summary:hover{color:var(--primary);text-decoration:none} .site-nav a[aria-current=page],.nav-sub>summary[aria-current]{color:var(--primary)} .nav-list>li>a[aria-current=page],.nav-sub>summary[aria-current]{border-bottom-color:var(--primary)} .site-nav a.nav-quiet{font-size:.88rem;color:var(--ink-faint)} /* .site-nav a would otherwise out-specify .btn-primary and paint the label of the pink button in body ink. */ .site-nav .nav-cta{padding:10px 20px;font-size:.92rem;color:var(--on-primary)} .nav-sub{position:relative} /* A closed
is not reliably out of the layout: with the panel taken out of the flow, engines keep handing out boxes for the links inside it, and a tap can land on a product page from a menu that looks shut. Taking the panel out with display:none is what actually removes those targets. */ .nav-sub:not([open]) .nav-sub-panel{display:none} .nav-sub>summary{cursor:pointer;list-style:none;color:var(--ink-soft);font-size:.94rem;font-weight:550} .nav-sub>summary::-webkit-details-marker{display:none} .nav-sub[open]>summary{color:var(--primary)} .nav-sub>summary::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)} .nav-sub[open]>summary::after{margin-top:2px;transform:rotate(-135deg)} .nav-sub-panel{position:absolute;left:-14px;top:calc(100% + 14px);z-index:30;min-width:266px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift)} .nav-sub-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .site-nav .nav-sub-panel a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink);font-size:.92rem;font-weight:600} .site-nav .nav-sub-panel a:hover{background:var(--bg-alt);color:var(--primary);text-decoration:none} .site-nav .nav-sub-panel a[aria-current=page]{background:var(--bg-alt)} .lang-switch{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:7px 15px;color:var(--ink);font-size:.85rem;font-weight:650} .lang-switch:hover{border-color:var(--primary);color:var(--primary);text-decoration:none} /* The theme switch. It ships hidden and /assets/theme.js unhides it, so a visitor with no JavaScript is never offered a control that cannot work — they still get the theme their system asks for. */ .theme-toggle{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer} .theme-toggle[hidden]{display:none} .theme-toggle:hover{border-color:var(--primary);color:var(--primary)} .theme-toggle-icon{display:block;width:16px;height:16px;border-radius:50%;box-shadow:inset -5px -2px 0 0 currentColor;transform:rotate(-25deg)} .theme-toggle[aria-pressed=true] .theme-toggle-icon{width:9px;height:9px;margin:3.5px;background:currentColor;transform:none;box-shadow:0 -7.5px 0 -2.5px currentColor,0 7.5px 0 -2.5px currentColor,-7.5px 0 0 -2.5px currentColor,7.5px 0 0 -2.5px currentColor,5.5px -5.5px 0 -3px currentColor,5.5px 5.5px 0 -3px currentColor,-5.5px 5.5px 0 -3px currentColor,-5.5px -5.5px 0 -3px currentColor} .hero{padding:clamp(48px,7vw,96px) 0 clamp(32px,4vw,56px);background:linear-gradient(170deg,var(--hero-top) 0%,var(--bg-alt) 100%)} .hero h1{max-width:22ch} .lede{font-size:clamp(1.05rem,1rem + .5vw,1.35rem);color:var(--ink-soft);max-width:62ch} .hero-split{overflow:hidden} .hero-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center;grid-template-columns:minmax(0,1fr)} .hero-copy h1{max-width:16ch} .hero-visual{margin:0} .hero-image{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--lift)} .band{padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--line)} .band-alt{background:var(--bg-alt)} .band-cta{background:var(--invert-bg);color:var(--invert-ink)} .band-cta h2,.band-cta p{color:var(--invert-ink)} .band-figure figure{margin:0} .prose{max-width:74ch} .prose h2{margin-top:0} .split{display:grid;gap:clamp(28px,4vw,64px);align-items:center;grid-template-columns:minmax(0,1fr)} .split-copy h2{margin-top:0} .split-copy>:last-child{margin-bottom:0} .split-visual{margin:0} .split-visual-portrait{max-width:340px;margin-inline:auto} .split-visual img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--lift)} .split-visual figcaption,.wide-figure figcaption{margin-top:.8em;font-size:.88rem;color:var(--ink-soft)} .wide-figure{margin:1.6em 0 0} .wide-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--lift)} .shots{list-style:none;margin:1.8em 0 0;padding:0;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .shot h3{margin:.9em 0 .35em} .shot p{color:var(--ink-soft);font-size:.95rem;margin:0} .shot-frame{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--lift)} .shot-frame img{display:block;width:100%;height:auto;border-radius:8px} .logo-wall{list-style:none;margin:1.8em 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(124px,1fr))} .logo-wall li{overflow:hidden;border-radius:12px;background:var(--invert-bg)} .logo-wall img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover} .actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.5em 0 0} .btn{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:12px 22px;background:var(--surface);color:var(--ink);font-weight:650;font-size:.95rem} .btn:hover{border-color:var(--primary);color:var(--primary);text-decoration:none} .btn-primary{background:var(--primary-fill);border-color:var(--primary-fill);color:var(--on-primary)} .btn-primary:hover{background:var(--primary-fill-hover);border-color:var(--primary-fill-hover);color:var(--on-primary)} .ticks{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:12px} .ticks li{position:relative;padding-left:30px} .ticks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--primary);opacity:.15} .ticks li::after{content:"";position:absolute;left:5px;top:.72em;width:5px;height:9px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg)} .cards,.people,.post-list{list-style:none;margin:0;padding:0;display:grid;gap:24px} .cards{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))} .people{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .card,.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px} .cards-media{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))} .cards-media .card{padding:0;overflow:hidden;display:flex;flex-direction:column} .cards-media .card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1} .cards-media .card-body>:last-child{margin-bottom:0;margin-top:auto;padding-top:.6em} .card-media{background:var(--bg-alt);border-bottom:1px solid var(--line)} .card-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} .card-link{margin:0} .role{color:var(--primary);font-weight:650;margin:0 0 .6em} .steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:16px} .steps li{counter-increment:s;position:relative;padding-left:48px} .steps li::before{content:counter(s);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary-fill);color:var(--on-primary);font-weight:700;font-size:.9rem} .notice{border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--radius);padding:22px 26px;background:var(--bg-alt)} .notice h2{font-size:1.15rem} .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .contact-list strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)} .form-shell{max-width:80ch} .form-shell h2{margin-top:0} .form-shell>p{color:var(--ink-soft);max-width:70ch} .contact-form{position:relative;margin-top:1.8em} .fields{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .field{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0} .field-wide{grid-column:1/-1} .field label{font-size:.88rem;font-weight:650} .form-required{color:var(--primary)} .field input,.field select,.field textarea{width:100%;max-width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--surface);color:var(--ink);font:inherit} .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)} .field textarea{min-height:150px;resize:vertical} .field-hint{font-size:.82rem;color:var(--ink-soft)} /* The honeypot: still in the layout, so a form-filling bot fills it, but clipped to a single pixel and unfocusable, so a person never meets it. Deliberately not display:none, which is the first thing a bot checks. */ .field-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .field-hp input{width:1px;height:1px;padding:0;border:0} .field-consent{display:flex;align-items:flex-start;gap:10px;margin:1.6em 0 0;font-size:.9rem} .field-consent input{flex:0 0 auto;margin:.28em 0 0;width:17px;height:17px;accent-color:var(--primary)} .field-consent label{color:var(--ink-soft)} .form-note{margin:1.2em 0 0;font-size:.85rem;color:var(--ink-soft)} .post-list{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s,border-color .2s} .post-card:hover{border-color:var(--line-strong);box-shadow:var(--lift)} .post-media{display:block;background:var(--bg-alt);border-bottom:1px solid var(--line)} .post-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .post-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .post-card h3{margin-bottom:.5em} .post-card h3 a{color:var(--ink)} .post-card h3 a:hover{color:var(--primary)} .post-date{margin:0 0 .5em;font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em} .post-excerpt{color:var(--ink-soft);font-size:.95rem} .tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:.8em 0 0} .tags li{background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.78rem;color:var(--ink-soft)} .pager{margin-top:2.5em;border-top:1px solid var(--line);padding-top:1.5em} .pager-status{font-size:.9rem;color:var(--ink-soft);margin:0} .post{padding:clamp(40px,5vw,72px) 0} .post h1{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.6rem)} .post-lead{margin:1.4em 0 0} .post-lead img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--lift)} .post-body{font-size:1.03rem} .post-body h2{font-size:1.4rem;margin-top:1.8em} .post-body h3{font-size:1.15rem;margin-top:1.6em} .post-body img{display:block;border-radius:10px;margin:1.4em auto;background:var(--bg-alt)} .post-body ul,.post-body ol{padding-left:1.3em} .post-body li{margin-bottom:.5em} .post-body blockquote{margin:1.5em 0;padding:.4em 0 .4em 1.2em;border-left:4px solid var(--primary);color:var(--ink-soft);font-style:italic} .post-body table{width:100%;border-collapse:collapse;margin:1.5em 0} .post-body th,.post-body td{border:1px solid var(--line);padding:10px 12px;text-align:left} .site-footer{margin-top:0;background:var(--bg-alt);border-top:1px solid var(--line);padding:56px 0 24px;font-size:.94rem} .footer-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .site-footer h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)} .footer-brand{font-weight:800;font-size:1.1rem;margin-bottom:.4em} .footer-about p{color:var(--ink-soft);max-width:42ch} .footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .footer-nav a,.footer-contact a{color:var(--ink)} .footer-contact p{margin:0 0 .5em;color:var(--ink-soft)} .footer-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.85rem} @media (min-width:900px){ .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .split-reverse .split-copy{order:2} .split-reverse .split-visual{order:1} } @media (max-width:899px){ :root{--header-h:62px} /* The bar does without the blur here, so that `fixed` on the drawer below means the viewport. `backdrop-filter` makes an element the containing block of its fixed descendants: with it, the drawer is placed against the bar and goes wherever the bar goes, which is how a scroll lock that stopped the bar from sticking took the drawer off screen with it. Without it the drawer is at 63px of the viewport whatever the bar does. The bar's own ground is 94% opaque, which is what the blur was softening — so here it is the flat ground instead, and the bar and the drawer under it read as one surface. */ .site-header{background:var(--bg);backdrop-filter:none} .header-inner{gap:12px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px} .brand-logo{height:34px} .burger{display:grid;order:2;margin-left:auto} .burger[hidden]{display:none} /* Two headers live in these rules. Without the script the panel is the rest of the header: a stacked list of the same links, in flow under the logo, which is what a visitor gets when /assets/nav.js is blocked. With it — the data-nav-js marker the script puts on before the first paint — the panel becomes a drawer pinned under the bar, so the bar itself never grows past its 63px whatever the drawer holds. `--header-h` is the bar; the extra pixel is the hairline under it, which the drawer starts below rather than over. Written as `html[...]` rather than `:root[...]` only so these rules stay inside the reach of the stylesheet's colour test. */ .site-nav{order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;margin:2px 0 6px;padding-top:8px;border-top:1px solid var(--line)} html[data-nav-js] .site-nav{position:fixed;left:0;right:0;top:calc(var(--header-h) + 1px);z-index:25;display:none;margin:0;padding:4px 24px 24px;max-height:calc(100vh - var(--header-h) - 1px);max-height:calc(100dvh - var(--header-h) - 1px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-top:0;border-bottom:1px solid var(--line);box-shadow:var(--lift)} html[data-nav-open] .site-nav{display:flex} /* The lock goes on the body and not on . The body's overflow propagates to the viewport while the root's is visible, so the page still cannot be scrolled — but the root stays the scroll container, and a root with `overflow: hidden` stops the sticky bar from sticking: on a page scrolled to 1500px the bar rendered 1500px above the viewport and the drawer opened under a gap full of page content. */ html[data-nav-open] body{overflow:hidden} .nav-list{flex-direction:column;align-items:stretch;gap:0;white-space:normal} /* Rows a thumb can hit: 48px each, separated rather than crowded. */ .nav-list>li+li{border-top:1px solid var(--line)} .nav-list>li>a,.nav-sub>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 2px;border-bottom:0;font-size:1.02rem} .site-nav a.nav-quiet{font-size:1.02rem;color:var(--ink-soft)} .nav-sub-panel{position:static;min-width:0;margin:0 0 8px;padding:0 0 4px 14px;border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none} .site-nav .nav-sub-panel a{display:flex;align-items:center;min-height:44px;padding:10px 12px;font-size:1rem} /* The call to action first and full width, the two switches under it. */ .nav-actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)} .nav-utils{order:2;justify-content:space-between} .site-nav .nav-cta{order:1;padding:14px 20px;font-size:1rem;text-align:center} .lang-switch{padding:11px 18px;font-size:.92rem} .theme-toggle{width:44px;height:44px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}