/* Double Vision - shared design system. One source of truth for every page. See the block comment below for the colour / type / layout argument. */ /* ===================================================================== DOUBLE VISION - hard-cut editorial system --------------------------------------------------------------------- Colour : paper + wine only, used as HARD CUTS. Every band is fully one or fully the other, never a gradient, never a tint. Rose is a high-signal accent (rules, ghost offset, meta ticks) and is never set as body text on paper, where it fails contrast. Type : one mono family (the registered stack). Roles separate by SCALE and CASE, not by family: display is huge and tightly tracked, labels are small caps at +0.09em, body sits at 0. Layout : 12 columns, 8px baseline, 1px rules, 8px radius. The one flourish is a deliberate vertical OFFSET between paired columns - the double exposure the name asks for - which converges to zero as the viewport narrows. Motion : hard 3-4px offsets and colour inversions instead of soft shadows. Every transform dies under prefers-reduced-motion. ===================================================================== */ :root{ color-scheme:light; /* Read out of the shipped logo files: assets/logo-dark.svg fills the wordmark #490000, assets/logo-light.svg fills it #DDE9EF. The page matches the artwork the brand actually ships. */ --paper:#DDE9EF; --wine:#490000; --rose:#c68585; --green:#1f6d4a; --bg:var(--paper);--fg:var(--wine);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg)); --accent:var(--rose); --accent-2:var(--green); /* Registered palette leftovers. Nothing in this file references them and nothing should: on paper, muted measures 2.59:1 and border 1.11:1, so both fail as text. Secondary text and rules are derived below by mixing the foreground toward the background, which stays correct when a band inverts. Kept only so the registered set round-trips. */ --surface:#f6f5f5; --muted:#9d8c8c; --border:#e1dbdb; /* derived, mixed only from the four brand colours above */ --fg-2:color-mix(in oklab, var(--fg) 74%, var(--bg)); --fg-3:color-mix(in oklab, var(--fg) 58%, var(--bg)); --accent-text:color-mix(in oklab, var(--rose) 58%, var(--fg)); --hair:color-mix(in oklab, var(--fg) 20%, var(--bg)); --hair-2:color-mix(in oklab, var(--fg) 36%, var(--bg)); --lift:color-mix(in oklab, var(--fg) 6%, var(--bg)); --lift-2:color-mix(in oklab, var(--fg) 13%, var(--bg)); --font-display:"SFMono","SF Mono",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --font-body:"SFMono","SF Mono",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --font-mono:"SFMono","SF Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* The pointer is the left eye, and it shuts on pointerdown. One token drives every cursor rule below, so the blink is a single property swap on rather than an !important fight with the pointer rules. Cursor-specific 32px assets: Chrome ignores any cursor image over 128px, so eye-left.svg (273x294) cannot be used directly. */ --cur:url("cursor-eye.svg") 16 16; --r:8px; --bw:1px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --pad:clamp(20px,5vw,64px); --maxw:1320px; --band:clamp(64px,8vw,124px); --off:clamp(0px,4.4vw,88px); --ease:cubic-bezier(.32,0,.12,1);--ease-wave-in:cubic-bezier(.6,.02,.3,1);--ease-wave-out:cubic-bezier(.42,0,.16,1); --ease-back:cubic-bezier(.3,1.22,.6,1);--t-fast:.24s;--t-mid:.46s;--t-slow:.9s;--t-wave-in:820ms;--t-wave-out:1020ms; } :root.is-shut{--cur:url("cursor-eye-blink.svg") 16 16} :root[data-theme="dark"]{ --bg:var(--wine);color-scheme:dark;--fg:var(--paper);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg)); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html.is-locked{overflow:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg);color:var(--fg);cursor:var(--cur),auto; font-family:var(--font-body);font-size:17px;line-height:1.6; overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0} ul,ol{list-style:none;padding:0} a{color:inherit} img{max-width:100%;height:auto;display:block} button{font:inherit;color:inherit;background:none;border:0;cursor:var(--cur),pointer} :focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} main,section,.wrap{min-width:0} main [id],section[id]{scroll-margin-top:96px} .mt3{margin-top:var(--s3)} .skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--wine);color:var(--paper);padding:14px 20px;border-radius:0 0 var(--r) 0;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.05em;text-decoration:none} .skip:focus{left:0} .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---- hard cut inversion. Keeps the paper/wine rhythm in both themes -- */ .inv{--bg:var(--wine);color-scheme:dark;--fg:var(--paper);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));background:var(--bg);color:var(--fg)} :root[data-theme="dark"] .inv{--bg:var(--paper);color-scheme:light;--fg:var(--wine);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));} .pap{--bg:var(--paper);color-scheme:light;--fg:var(--wine);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));background:var(--bg);color:var(--fg)} :root[data-theme="dark"] .pap{--bg:var(--wine);color-scheme:dark;--fg:var(--paper);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));} /* ---- type roles ------------------------------------------------------ */ .label{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;line-height:1.5;color:var(--fg-2)} .label--hot{color:var(--fg);display:inline-flex;align-items:center;gap:10px} .label--hot::before{content:"";width:26px;height:2px;background:var(--accent);flex:0 0 auto} .display{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,9.5vw,124px);line-height:.96;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word} .h1{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5.4vw,74px);line-height:1.03;letter-spacing:-.03em;text-wrap:balance} .h2{font-family:var(--font-display);font-weight:700;font-size:clamp(27px,3.5vw,46px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance} .h3{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.7vw,23px);line-height:1.24;letter-spacing:-.012em} .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.58;color:var(--fg-2);max-width:60ch} .small{font-family:var(--font-mono);font-size:13px;line-height:1.55;letter-spacing:.012em;color:var(--fg-2)} .ord{font-family:var(--font-mono);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:.78} /* the single flourish: a double exposure offset behind the display type. The `/ ""` alt-text form keeps assistive tech from reading the ghost twice; the plain form above it is the fallback for older engines. */ .dbl{position:relative;z-index:0;display:inline-block} .dbl::before{content:attr(data-text);position:absolute;inset:0;color:var(--accent);transform:translate(.05em,.045em);z-index:-1;pointer-events:none} .dbl::before{content:attr(data-text) / ""} @media (prefers-reduced-motion:reduce){.dbl::before{transform:translate(.035em,.03em)}} /* ---- actions --------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:14px 26px;border-radius:var(--r); font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; text-decoration:none;border:var(--bw) solid var(--fg); transition:transform .24s var(--ease),background-color .24s,color .24s,box-shadow .24s; } .btn--primary{background:var(--fg);color:var(--bg);box-shadow:4px 4px 0 var(--accent)} .btn--primary:hover,.btn--primary:focus-visible{background:var(--bg);color:var(--fg);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent)} .btn--ghost{background:transparent;color:var(--fg)} .btn--ghost:hover,.btn--ghost:focus-visible{background:var(--fg);color:var(--bg)} /* press feedback: the button moves under the finger, 1px, 90ms */ .btn:active:not(:disabled){transform:translate(1px,1px)} .btn--primary:active:not(:disabled){box-shadow:1px 1px 0 var(--accent)} /* disabled is the one state allowed to drop contrast - but it has to LOOK it */ .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn--primary:disabled:hover{background:var(--fg);color:var(--bg);transform:none;box-shadow:none} .textlink{ display:inline-flex;align-items:center;gap:8px;min-height:44px; font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; text-decoration:none;color:var(--fg);box-shadow:inset 0 -1px 0 var(--fg);transition:box-shadow .24s } .textlink::after{content:"\2192";transition:transform .24s var(--ease)} .textlink:hover,.textlink:focus-visible{box-shadow:inset 0 -2px 0 var(--fg)} .textlink:hover::after,.textlink:focus-visible::after{transform:translateX(4px)} [dir="rtl"] .textlink::after{content:"\2190"} [dir="rtl"] .textlink:hover::after,[dir="rtl"] .textlink:focus-visible::after{transform:translateX(-4px)} /* ---- language + theme controls --------------------------------------- */ .lang{display:inline-flex;align-items:center;gap:4px} .lang__btn{ min-height:44px;min-width:44px;padding:8px 10px;border-radius:var(--r); font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em; color:var(--fg-2);border:var(--bw) solid transparent;transition:color .24s,background-color .24s,border-color .24s } .lang__btn:hover,.lang__btn:focus-visible{color:var(--fg);border-color:var(--hair-2)} .lang__btn[aria-pressed="true"]{color:var(--bg);background:var(--fg);border-color:var(--fg)} .theme-toggle{ display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r); font-size:17px;line-height:1;border:var(--bw) solid var(--hair);color:var(--fg-2); transition:color .24s,background-color .24s,border-color .24s } .theme-toggle:hover,.theme-toggle:focus-visible{color:var(--bg);background:var(--fg);border-color:var(--fg)} /* ---- splash ---------------------------------------------------------- */ .splash{--bg:var(--wine);color-scheme:dark;--fg:var(--paper);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));position:fixed;inset:0;z-index:200;min-height:100svh;background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate} .splash[hidden]{display:none} /* already seen this session: never paint it at all */ html.dv-splash-seen .splash{display:none!important} .splash__stage{position:absolute;inset:0 0 clamp(148px,22vh,196px);display:grid;place-items:center;overflow:hidden} .splash__webgl{position:absolute;inset:0;width:100%;height:100%;opacity:.7;pointer-events:none} .splash__singularity{position:absolute;z-index:1;left:50%;top:50%;width:clamp(80px,12vw,160px);aspect-ratio:1;border-radius:50%;background:var(--wine);opacity:0;transform:translate(-50%,-50%) scale(0);box-shadow:0 0 0 1px color-mix(in oklab,var(--paper) 20%,transparent),0 0 80px color-mix(in oklab,var(--wine) 58%,transparent);pointer-events:none} .splash__eyes{position:absolute;z-index:2;inset:0;pointer-events:none} .splash__eye{position:absolute;left:50%;top:50%;display:grid;place-items:center;will-change:transform,opacity} .splash__eye svg,.splash__eye img{display:block;width:100%;height:100%} .splash__eye--left{width:clamp(132px,18vw,264px);aspect-ratio:273/294;transform:translate(-112%,-50%);animation:eye-float-l 5.2s ease-in-out infinite} .splash__eye--right{width:clamp(122px,15vw,202px);aspect-ratio:208/214;transform:translate(18%,-50%);animation:eye-float-r 5.2s ease-in-out -.5s infinite} .splash__eye .splash-pupil{transform-box:fill-box;transform-origin:center;transition:transform .24s var(--ease)} .splash__logo-pop{position:absolute;z-index:3;inset:0;display:grid;place-items:center;padding-inline:var(--pad);opacity:0;transform:scale(.2) rotate(-12deg);pointer-events:none;will-change:transform,opacity} .splash__logo-pop .brand__logo{width:min(92vw,1180px);height:auto;aspect-ratio:1111/581;padding:0;border:0;border-radius:0} .splash__logo-pop .dv-logo{width:100%;height:100%;object-fit:contain} .splash.is-consuming .splash__eye{animation-duration:2.5s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.66,.02,.52,1)} .splash.is-consuming .splash__eye--left{animation-name:eye-vortex-l} .splash.is-consuming .splash__eye--right{animation-name:eye-vortex-r} .splash.is-consuming .splash__singularity{animation:singularity 2.8s cubic-bezier(.2,.78,.18,1) both} .splash.is-logo-pop .splash__logo-pop{animation:logo-pop 1.05s var(--ease-back) both} .splash.is-closing{animation:splash-out 1s var(--ease) both} @keyframes eye-float-l{0%,100%{transform:translate(-112%,-50%) rotate(-2deg)}50%{transform:translate(-112%,-54%) rotate(2deg)}} @keyframes eye-float-r{0%,100%{transform:translate(18%,-50%) rotate(2deg)}50%{transform:translate(18%,-55%) rotate(-2deg)}} @keyframes eye-vortex-l{0%{transform:translate(-112%,-50%) rotate(0) scale(1);opacity:1}30%{transform:translate(-88%,-105%) rotate(190deg) scale(.88)}76%{transform:translate(-12%,-18%) rotate(610deg) scale(.38);opacity:1}100%{transform:translate(-50%,-50%) rotate(940deg) scale(0);opacity:0}} @keyframes eye-vortex-r{0%{transform:translate(18%,-50%) rotate(0) scale(1);opacity:1}30%{transform:translate(-5%,10%) rotate(-190deg) scale(.88)}76%{transform:translate(-82%,-80%) rotate(-610deg) scale(.38);opacity:1}100%{transform:translate(-50%,-50%) rotate(-940deg) scale(0);opacity:0}} @keyframes singularity{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}55%{opacity:1;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}} @keyframes logo-pop{0%{opacity:0;transform:scale(.2) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes splash-out{0%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} .splash__bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .splash__bubble{position:absolute;border-radius:50%;border:1px solid color-mix(in oklab,var(--paper) 22%,transparent)} .splash__bubble:nth-child(1){left:8%;top:22%;width:clamp(60px,9vw,130px);aspect-ratio:1;animation:drift 15s ease-in-out infinite} .splash__bubble:nth-child(2){right:11%;top:16%;width:clamp(40px,6vw,88px);aspect-ratio:1;animation:drift 19s ease-in-out -4s infinite} .splash__bubble:nth-child(3){left:18%;bottom:26%;width:clamp(30px,4vw,64px);aspect-ratio:1;animation:drift 13s ease-in-out -7s infinite} .splash__bubble:nth-child(4){right:20%;bottom:30%;width:clamp(70px,10vw,150px);aspect-ratio:1;animation:drift 21s ease-in-out -2s infinite} .splash__bubble:nth-child(5){left:44%;top:12%;width:clamp(50px,7vw,110px);aspect-ratio:1;animation:drift 17s ease-in-out -9s infinite} @keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(14px,-18px)}66%{transform:translate(-12px,12px)}} .splash__bar{ position:absolute;inset:auto 0 0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3); padding:var(--s4) var(--pad) max(var(--s4),env(safe-area-inset-bottom)); border-top:var(--bw) solid color-mix(in oklab,var(--paper) 26%,transparent); } .splash__title{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,40px);line-height:1.05;letter-spacing:-.025em} .splash__sub{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:color-mix(in oklab,var(--paper) 76%,var(--wine));margin-top:6px} .splash__spacer{flex:1 1 auto} .splash__side{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)} .splash .lang__btn{color:color-mix(in oklab,var(--paper) 74%,var(--wine))} .splash .lang__btn[aria-pressed="true"]{background:var(--paper);color:var(--wine);border-color:var(--paper)} .splash .btn--primary{background:var(--paper);color:var(--wine);border-color:var(--paper);box-shadow:4px 4px 0 var(--rose)} .splash .btn--primary:hover,.splash .btn--primary:focus-visible{background:var(--wine);color:var(--paper);box-shadow:2px 2px 0 var(--rose)} @media (max-width:620px){ .splash__bar{flex-direction:column;align-items:stretch} .splash__side{justify-content:space-between} .splash .btn--primary{flex:1 1 100%} } /* ---- nav ------------------------------------------------------------- */ .nav{ position:fixed;inset:0 0 auto;z-index:60; background:transparent;border-bottom:var(--bw) solid transparent; visibility:hidden;opacity:0;pointer-events:none; transition:background-color .42s,border-color .42s,backdrop-filter .42s,opacity .3s,visibility 0s .3s; } body.has-scrolled .nav{ background:color-mix(in oklab,var(--bg) 90%,transparent); border-bottom-color:var(--hair);backdrop-filter:blur(18px); visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s; } .nav__in{display:flex;align-items:center;gap:var(--s3);min-height:76px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto} .brand__logo{display:block;height:44px;aspect-ratio:1111/581;padding:5px 9px;line-height:0;flex:0 0 auto;border-radius:var(--r);overflow:hidden;border:var(--bw) solid var(--hair);transition:transform .46s var(--ease),border-color .3s} .brand__logo .dv-logo{width:100%;height:100%;object-fit:contain} /* Only ever ONE variant paints. Guarded on :root so per-context sizing rules can never win this on source order. */ :root:not([data-theme="dark"]) .dv-logo--light{display:block} :root:not([data-theme="dark"]) .dv-logo--dark{display:none} :root[data-theme="dark"] .dv-logo--dark{display:block} :root[data-theme="dark"] .dv-logo--light{display:none} /* the splash panel is wine in both themes, so it always takes the pale mark */ :root:not([data-theme="dark"]) .splash .dv-logo--dark{display:block} :root:not([data-theme="dark"]) .splash .dv-logo--light{display:none} :root[data-theme="dark"] .splash .dv-logo--light{display:block} :root[data-theme="dark"] .splash .dv-logo--dark{display:none} :root:not([data-theme="dark"]) .contact .dv-logo--dark,:root:not([data-theme="dark"]) .thanks .dv-logo--dark{display:block} :root:not([data-theme="dark"]) .contact .dv-logo--light,:root:not([data-theme="dark"]) .thanks .dv-logo--light{display:none} :root[data-theme="dark"] .contact .dv-logo--light,:root[data-theme="dark"] .thanks .dv-logo--light{display:block} :root[data-theme="dark"] .contact .dv-logo--dark,:root[data-theme="dark"] .thanks .dv-logo--dark{display:none} .brand:hover .brand__logo,.brand:focus-visible .brand__logo{transform:translate(-2px,-2px);border-color:var(--fg)} .brand__logo .dv-pupil{transform-box:fill-box;transform-origin:50% 50%;transform:translate(var(--pupil-x,0px),var(--pupil-y,0px));transition:transform .2s var(--ease)} .brand__logo.is-blinking .dv-pupil{animation:pupil-blink .28s ease-in-out both} @keyframes pupil-blink{0%,100%{transform:translate(var(--pupil-x,0px),var(--pupil-y,0px))}35%{transform:translate(var(--pupil-x,0px),var(--pupil-y,0px)) scaleY(.07)}} @media (prefers-reduced-motion:reduce){.brand__logo .dv-pupil{animation:none!important;transition:none}} .brand__name{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.13em} .nav__links{display:flex;align-items:center;gap:var(--s3);margin-inline-start:auto} .nav__link{ display:inline-flex;align-items:center;min-height:44px; font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--fg-2);text-decoration:none;border-bottom:2px solid transparent;transition:color .24s,border-color .24s } .nav__link:hover,.nav__link:focus-visible{color:var(--fg);border-bottom-color:var(--accent)} .nav__link[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)} .nav__rule{width:var(--bw);height:26px;background:var(--hair);flex:0 0 auto} .nav__cta{ display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:var(--r); font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; text-decoration:none;color:var(--fg);border:var(--bw) solid var(--fg);transition:background-color .24s,color .24s,transform .24s var(--ease) } .nav__cta:hover,.nav__cta:focus-visible{background:var(--fg);color:var(--bg);transform:translate(-2px,-2px)} .nav__burger{display:none;width:48px;height:48px;margin-inline-start:auto;border:var(--bw) solid var(--hair);border-radius:var(--r);place-items:center;transition:background-color .24s,color .24s,border-color .24s} .nav__burger:hover,.nav__burger:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg)} .nav__burger b{display:block;width:20px;height:2px;background:currentColor;position:relative} .nav__burger b::before,.nav__burger b::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor} .nav__burger b::before{top:-6px} .nav__burger b::after{top:6px} /* mobile sheet: the small-screen layout gets real navigation, not a hidden desktop bar */ .sheet{--bg:var(--wine);color-scheme:dark;--fg:var(--paper);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));position:fixed;inset:0;z-index:120;display:none;flex-direction:column;background:var(--bg);color:var(--fg);padding:var(--s3) var(--pad) max(var(--s5),env(safe-area-inset-bottom))} .sheet__eyebrow{color:var(--accent-text)} .sheet__link em{font-style:normal} .sheet.is-open{display:flex;animation:sheet-in .46s var(--ease) both} @keyframes sheet-in{0%{opacity:0;clip-path:inset(0 0 100% 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}} .sheet__top{display:flex;align-items:center;justify-content:space-between;min-height:52px} .sheet__close{width:48px;height:48px;display:grid;place-items:center;border:var(--bw) solid color-mix(in oklab,var(--paper) 32%,transparent);border-radius:var(--r);font-size:22px;line-height:1} .sheet__close:hover,.sheet__close:focus-visible{background:var(--paper);color:var(--wine)} .sheet__nav{display:flex;flex-direction:column;gap:2px;margin-top:var(--s5);flex:1 1 auto} .sheet__link{ display:flex;align-items:baseline;gap:14px;min-height:60px;padding:10px 0;text-decoration:none; border-bottom:var(--bw) solid color-mix(in oklab,var(--paper) 20%,transparent); font-family:var(--font-display);font-weight:700;font-size:clamp(24px,7vw,34px);letter-spacing:-.025em; transition:padding-inline-start .28s var(--ease),color .28s } .sheet__link span{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--accent-text);flex:0 0 auto} .sheet__link:hover,.sheet__link:focus-visible{padding-inline-start:10px} .sheet__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s4)} .sheet .lang__btn{color:color-mix(in oklab,var(--paper) 74%,var(--wine))} .sheet .lang__btn[aria-pressed="true"]{background:var(--paper);color:var(--wine);border-color:var(--paper)} .sheet .theme-toggle{border-color:color-mix(in oklab,var(--paper) 32%,transparent);color:color-mix(in oklab,var(--paper) 80%,var(--wine))} .sheet .theme-toggle:hover,.sheet .theme-toggle:focus-visible{background:var(--paper);color:var(--wine)} .sheet .btn--primary{flex:1 1 200px;background:var(--paper);color:var(--wine);border-color:var(--paper);box-shadow:4px 4px 0 var(--rose)} .sheet .btn--primary:hover,.sheet .btn--primary:focus-visible{background:var(--wine);color:var(--paper)} .sheet :focus-visible{outline-color:var(--paper)} /* ---- hero logo stage -------------------------------------------------- */ .stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;height:100svh;min-height:540px;background:var(--bg);overflow:hidden;isolation:isolate;padding:clamp(56px,9vh,96px) 0 max(24px,env(safe-area-inset-bottom))} .stage__mark{display:grid;place-items:center;width:100%;height:100%;padding-inline:clamp(20px,6vw,112px);min-height:0;overflow:hidden} .stage__mark .brand__logo{width:100%;height:100%;min-width:0;min-height:0;padding:0;aspect-ratio:auto;border:0} .stage__mark .dv-logo{width:100%;height:100%;max-width:min(100%,1080px);max-height:100%;margin-inline:auto;object-fit:contain} .stage__mark .dv-pupil{transform-box:fill-box;transform-origin:50% 50%;transform:translate(var(--pupil-x,0px),var(--pupil-y,0px));transition:transform .2s var(--ease)} .motion-ready .stage__mark .brand__logo{opacity:0;transform:scale(.84) rotate(-2deg);transition:opacity .46s var(--ease),transform 1.05s var(--ease-back)} body.is-entered .stage__mark .brand__logo{opacity:1;transform:none} body.has-scrolled .stage__mark{opacity:0;transition:opacity .36s var(--ease)} .cue{ position:relative;display:flex;align-items:center;gap:12px;width:max-content;min-height:56px;margin-inline:auto; color:var(--bg);background:var(--fg);border:var(--bw) solid var(--fg);border-radius:999px;padding:8px 10px 8px 22px; font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none; box-shadow:0 8px 0 var(--accent);transition:background-color .24s,color .24s,transform .24s,box-shadow .24s } .cue:hover,.cue:focus-visible{color:var(--fg);background:var(--bg);transform:translateY(-3px);box-shadow:0 11px 0 var(--accent)} .cue__arrow{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:var(--bg);color:var(--fg);transition:background-color .24s,color .24s} .cue:hover .cue__arrow,.cue:focus-visible .cue__arrow{background:var(--fg);color:var(--bg)} .cue svg{width:17px;height:21px;overflow:visible;animation:bob 2.4s var(--ease) infinite} .cue path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}} .motion-ready body.is-entered .cue{animation:cue-pop .8s .62s var(--ease-back) both} @keyframes cue-pop{0%{opacity:0;transform:translateY(18px) scale(.7)}100%{opacity:1;transform:none}} /* ---- statement (hero copy) ------------------------------------------- */ .statement{padding-block:var(--band)} .statement__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:start} .statement__copy{display:flex;flex-direction:column;gap:var(--s4)} .statement .display{margin-top:var(--s3)} .statement__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)} .statement__gloss{border-top:2px solid var(--accent);padding-top:var(--s3);max-width:52ch} .visions{display:grid;gap:var(--s3);margin-block-start:var(--off)} .vision{position:relative;border:var(--bw) solid var(--hair-2);border-radius:var(--r);overflow:hidden;background:var(--lift);transition:transform .46s var(--ease)} .vision img{width:100%;aspect-ratio:16/10;object-fit:cover} .vision:nth-child(2){margin-inline-start:clamp(0px,3vw,44px)} .vision:hover{transform:translate(-3px,-3px)} .vision__tag{ --bg:var(--wine);--fg:var(--paper);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg)); position:absolute;inset:auto 12px 12px 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px; padding:10px 14px;border-radius:var(--r);background:var(--bg);color:var(--fg); box-shadow:0 6px 24px color-mix(in oklab,var(--wine) 42%,transparent) } .vision__tag span{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)} .vision__tag b{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em} /* ---- counter-scrolling marquee --------------------------------------- */ .tick{border-block:var(--bw) solid color-mix(in oklab,var(--fg) 22%,var(--bg));overflow:hidden;padding-block:2px} .tick__row{display:flex;width:max-content;gap:0;will-change:transform} .tick__row span{ display:inline-flex;align-items:center;gap:22px;padding:14px 26px;flex:0 0 auto; font-family:var(--font-mono);font-size:clamp(13px,1.5vw,18px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap } .tick__row span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--hair-2);flex:0 0 auto} .tick__row--a{animation:slide-l 44s linear infinite} .tick__row--b{animation:slide-r 44s linear infinite} .tick__row + .tick__row{border-top:var(--bw) solid color-mix(in oklab,var(--fg) 22%,var(--bg))} @keyframes slide-l{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes slide-r{from{transform:translateX(-50%)}to{transform:translateX(0)}} /* ---- section shell ---------------------------------------------------- */ .sec{padding-block:var(--band)} .sec__head{display:grid;gap:var(--s3);max-width:76ch;margin-bottom:clamp(40px,5vw,72px)} .sec__head .lead{margin-top:2px} /* ---- scope range ------------------------------------------------------ */ .scope{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:end} .range{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);counter-reset:r} .range__step{position:relative;padding-top:var(--s4);border-top:2px solid var(--hair-2);transition:border-color .3s} .range__step::before{ counter-increment:r;content:"0" counter(r); position:absolute;top:-11px;inset-inline-start:0;padding-inline-end:8px;background:var(--bg); font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fg-2) } .range__step::after{content:"";position:absolute;top:-4px;inset-inline-end:0;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .3s} .range__step:last-child::after{opacity:1} .range__step b{display:block;font-family:var(--font-display);font-size:clamp(15px,1.5vw,19px);font-weight:700;letter-spacing:-.01em;line-height:1.25} .range:hover .range__step{border-color:var(--hair)} .range__step:hover{border-color:var(--fg)} .scope__note{margin-top:var(--s4)} /* ---- the nine: numbered index, opens in place ------------------------ */ .nine{border-top:var(--bw) solid color-mix(in oklab,var(--fg) 26%,var(--bg))} .nine__row{border-bottom:var(--bw) solid color-mix(in oklab,var(--fg) 26%,var(--bg));position:relative;isolation:isolate} .nine__head{ position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:clamp(16px,3vw,40px);width:100%;padding:clamp(18px,2.4vw,30px) 0;text-align:start; transition:padding-inline .34s var(--ease),color .3s } .nine__num{font-family:var(--font-mono);font-weight:700;font-size:clamp(24px,3.4vw,44px);letter-spacing:-.04em;line-height:.8;font-variant-numeric:tabular-nums;color:var(--fg-3);transition:color .3s,transform .34s var(--ease)} .nine__name{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3.6vw,44px);line-height:1.06;letter-spacing:-.028em} .nine__sign{position:relative;width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:var(--bw) solid var(--hair-2);transition:background-color .3s,border-color .3s,transform .46s var(--ease)} .nine__sign::before,.nine__sign::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%);transition:opacity .3s,transform .46s var(--ease)} .nine__sign::before{width:13px;height:2px} .nine__sign::after{width:2px;height:13px} .nine__row.is-open .nine__sign::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)} .nine__row.is-open .nine__sign{background:var(--accent);border-color:var(--accent);color:var(--wine)} .nine__head:hover .nine__num,.nine__head:focus-visible .nine__num{color:var(--accent-text)} .nine__head:hover,.nine__head:focus-visible{padding-inline:clamp(8px,1.2vw,20px)} .nine__head:hover .nine__sign,.nine__head:focus-visible .nine__sign{border-color:var(--fg)} /* the peek: a hard-edged image slab that slides in behind the row on pointer hover only. Decorative, never the only channel for anything. */ .nine__peek{position:absolute;z-index:0;inset-inline-end:clamp(70px,9vw,140px);top:50%;width:clamp(160px,17vw,260px);aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;opacity:0;transform:translateY(-50%) translateX(18px) rotate(3deg);transition:opacity .4s var(--ease),transform .5s var(--ease);pointer-events:none;box-shadow:0 10px 40px color-mix(in oklab,var(--fg) 26%,transparent)} .nine__peek img{width:100%;height:100%;object-fit:cover} .nine__row:hover .nine__peek{opacity:.9;transform:translateY(-50%) translateX(0) rotate(-2deg)} .nine__row.is-open .nine__peek{opacity:0} .nine__panel{padding-bottom:clamp(28px,3.4vw,48px);animation:panel-in .62s var(--ease) both} @keyframes panel-in{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}} .nine__panel[hidden]{display:none} .nine__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,52px);align-items:start} .nine__body{max-width:58ch} .nine__meta{display:grid;gap:var(--s3);margin-top:var(--s4);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .nine__meta dt{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-2);padding-bottom:6px;border-bottom:var(--bw) solid var(--hair);margin-bottom:8px} .nine__meta dd{font-size:15px;line-height:1.5} .nine__shot{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);border:var(--bw) solid var(--hair-2)} /* ---- in-house band ---------------------------------------------------- */ .band{padding-block:var(--band)} .band__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px);align-items:end} .band__media{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .band__shot{position:relative;border-radius:var(--r);overflow:hidden;border:var(--bw) solid color-mix(in oklab,var(--fg) 30%,var(--bg))} .band__shot:nth-child(2){margin-block-start:var(--off)} .band__shot img{width:100%;aspect-ratio:4/3;object-fit:cover} .band__shot span{position:absolute;inset:auto 10px 10px 10px;padding:8px 12px;border-radius:var(--r);background:var(--bg);color:var(--fg);font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em} .band__card{display:grid;gap:var(--s3);padding:clamp(22px,2.6vw,34px);border:var(--bw) solid color-mix(in oklab,var(--fg) 30%,var(--bg));border-radius:var(--r)} /* ---- three ways to hire ---------------------------------------------- */ .hire{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)} .hire__card{ display:flex;flex-direction:column;gap:var(--s3);padding:clamp(22px,2.6vw,34px); border:var(--bw) solid var(--hair-2);border-radius:var(--r);background:var(--bg); transition:transform .3s var(--ease),background-color .3s,color .3s,border-color .3s,box-shadow .3s } .hire__card:nth-child(2){margin-block-start:calc(var(--off) * .5)} .hire__card:nth-child(3){margin-block-start:var(--off)} :root:not([data-theme="dark"]) .hire__card:hover{--bg:var(--wine);--fg:var(--paper);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));} :root[data-theme="dark"] .hire__card:hover{--bg:var(--paper);--fg:var(--wine);--fg-2:color-mix(in oklab,var(--fg) 74%,var(--bg));--fg-3:color-mix(in oklab,var(--fg) 58%,var(--bg));--accent-text:color-mix(in oklab,var(--rose) 58%,var(--fg));--ok-line:color-mix(in oklab,var(--green) 52%,var(--fg));--hair:color-mix(in oklab,var(--fg) 20%,var(--bg));--hair-2:color-mix(in oklab,var(--fg) 36%,var(--bg));--lift:color-mix(in oklab,var(--fg) 6%,var(--bg));--lift-2:color-mix(in oklab,var(--fg) 13%,var(--bg));} .hire__card:hover{background:var(--bg);color:var(--fg);border-color:var(--fg);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--accent)} .hire__card:hover .hire__ord{color:var(--accent-text)} .hire__ord{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fg-2);transition:color .3s} .hire__card p{color:inherit} .hire__when{ margin-top:auto;padding-top:var(--s2);border-top:var(--bw) solid var(--hair); font-family:var(--font-mono);font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--fg-2);transition:color .3s,border-color .3s } /* ---- process: zigzag with a spine ----------------------------------- */ .flow{position:relative;display:grid;gap:0} .flow::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:var(--bw);background:var(--hair-2)} .step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding-block:clamp(24px,3vw,44px)} .step__body{grid-column:1;display:grid;gap:var(--s2);text-align:end;padding-inline-end:clamp(28px,3vw,52px)} .step:nth-child(even) .step__body{grid-column:2;text-align:start;padding-inline:clamp(28px,3vw,52px) 0} .step__dot{position:absolute;top:calc(clamp(24px,3vw,44px) + 12px);left:50%;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--fg);transform:translateX(-50%);transition:background-color .3s,transform .46s var(--ease-back)} .step:hover .step__dot{background:var(--accent);transform:translateX(-50%) scale(1.4)} .step__ord{font-family:var(--font-mono);font-size:clamp(30px,4.6vw,60px);font-weight:700;letter-spacing:-.045em;line-height:.8;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .3s} .step:hover .step__ord{color:var(--accent-text)} .step p{max-width:46ch;margin-inline-start:auto;color:var(--fg-2)} .step:nth-child(even) p{margin-inline:0 auto} /* ---- answers --------------------------------------------------------- */ .qa{border-top:var(--bw) solid var(--hair-2)} .qa__item{border-bottom:var(--bw) solid var(--hair-2)} .qa__q{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:clamp(14px,2vw,28px); width:100%;padding:clamp(18px,2.2vw,26px) 0;text-align:start; font-family:var(--font-display);font-size:clamp(17px,1.9vw,23px);font-weight:700;letter-spacing:-.012em;line-height:1.3; transition:padding-inline .3s var(--ease),color .3s } .qa__q:hover,.qa__q:focus-visible{padding-inline:clamp(6px,1vw,16px)} .qa__q i{font-family:var(--font-mono);font-size:11px;font-weight:700;font-style:normal;letter-spacing:.1em;color:var(--fg-2);padding-top:.45em;transition:color .3s} .qa__q:hover i{color:var(--accent-text)} .qa__sign{position:relative;width:30px;height:30px;flex:0 0 auto;margin-top:2px;border-radius:50%;border:var(--bw) solid var(--hair-2);transition:background-color .3s,border-color .3s} .qa__sign::before,.qa__sign::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%);transition:opacity .3s} .qa__sign::before{width:11px;height:2px} .qa__sign::after{width:2px;height:11px} .qa__item.is-open .qa__sign{background:var(--accent);border-color:var(--accent);color:var(--wine)} .qa__item.is-open .qa__sign::after{opacity:0} .qa__a{padding:0 0 clamp(22px,2.6vw,32px) clamp(38px,5vw,72px);max-width:70ch;color:var(--fg-2);animation:panel-in .55s var(--ease) both} [dir="rtl"] .qa__a{padding:0 clamp(38px,5vw,72px) clamp(22px,2.6vw,32px) 0} .qa__a[hidden]{display:none} /* ---- contact --------------------------------------------------------- */ .contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(28px,4vw,64px);border-radius:var(--r)} .contact__copy{display:grid;gap:var(--s3);align-content:start} .contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s2)} .contact__note{font-family:var(--font-mono);font-size:12px;line-height:1.55;color:color-mix(in oklab,var(--fg) 62%,var(--bg))} .contact__mark{width:100%;padding:clamp(18px,3vw,40px);border-radius:var(--r);border:var(--bw) solid color-mix(in oklab,var(--fg) 30%,var(--bg))} /* ---- footer ---------------------------------------------------------- */ .foot{padding-block:var(--s5)} .foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding-top:var(--s4);border-top:var(--bw) solid var(--hair)} .foot__links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-inline-start:auto} .foot__links a{ display:inline-flex;align-items:center;min-height:44px; font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--fg-2);text-decoration:none;border-bottom:2px solid transparent;transition:color .24s,border-color .24s } .foot__links a:hover,.foot__links a:focus-visible{color:var(--fg);border-bottom-color:var(--accent)} .foot__links .is-green{color:var(--accent-2)} .foot__links .is-green:hover,.foot__links .is-green:focus-visible{color:var(--accent-2);border-bottom-color:var(--accent-2)} :root[data-theme="dark"] .foot__links .is-green{color:color-mix(in oklab,var(--accent-2) 48%,var(--paper))} /* ---- scroll reveals -------------------------------------------------- */ .has-reveal .reveal{opacity:0;transform:translateY(34px);transition:opacity var(--t-slow) var(--ease),transform 1.25s var(--ease)} .has-reveal .reveal[data-reveal-side="start"]{transform:translate(-26px,18px)} .has-reveal .reveal[data-reveal-side="end"]{transform:translate(26px,18px)} .has-reveal .reveal.is-visible{opacity:1;transform:none} /* ---- responsive ------------------------------------------------------ */ @media (max-width:1080px){ .statement__grid,.scope,.nine__inner,.band__grid,.contact{grid-template-columns:minmax(0,1fr)} .visions{grid-template-columns:1fr 1fr;margin-block-start:0} .vision:nth-child(2){margin-inline-start:0} .scope{align-items:start} .nine__shot{order:-1} .band__grid{gap:var(--s4)} .contact__mark{max-width:520px;margin-inline:auto} } @media (max-width:1400px){ .brand__name{display:none} } @media (max-width:1280px){ .nav__links{display:none} .nav__burger{display:grid} .nine__peek{display:none} .hire{grid-template-columns:minmax(0,1fr)} .hire__card:nth-child(2),.hire__card:nth-child(3){margin-block-start:0} .flow::before{left:6px} .step{grid-template-columns:minmax(0,1fr);gap:var(--s2);padding-inline-start:34px} .step__body,.step:nth-child(even) .step__body{grid-column:1;text-align:start;padding-inline:0} .step__dot{left:6px} .step p,.step:nth-child(even) p{margin-inline:0} } @media (max-width:760px){ .range{grid-template-columns:1fr 1fr} .band__media{grid-template-columns:1fr} .band__shot:nth-child(2){margin-block-start:0} .visions{grid-template-columns:minmax(0,1fr)} } @media (max-width:520px){ .stage{padding-top:clamp(40px,7vh,72px)} .brand__logo{height:36px;padding:3px 6px} .nine__head{grid-template-columns:auto minmax(0,1fr);row-gap:8px} .nine__sign{grid-column:2;justify-self:end;margin-top:2px} .cue{min-height:52px;padding-left:16px} .cue span:first-child{max-width:15ch;line-height:1.25;text-align:center} .range{grid-template-columns:minmax(0,1fr)} .qa__q{grid-template-columns:auto minmax(0,1fr);row-gap:6px} .qa__sign{grid-column:2;justify-self:end} .qa__a{padding-inline-start:clamp(24px,8vw,38px)} .tick__row span{padding:12px 16px;gap:16px} } /* ---- reduced motion: strip every transform ------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .tick__row--a,.tick__row--b{animation:none!important;transform:none!important} .has-reveal .reveal{opacity:1!important;transform:none!important} .cue svg{animation:none!important} } /* ===================================================================== Sub-pages: the nine in full, what you get, the brief-o-matic, thanks. Same hard-cut system - no new colours, no new type roles, no new radius. Everything below is layout for content the home page only summarises. ===================================================================== */ /* ---- page masthead (sub-pages have no full-bleed mark) --------------- */ .phero{padding-block:calc(var(--band) + 76px) var(--band)} .phero__in{display:grid;gap:var(--s4);max-width:80ch} .phero .display{font-size:clamp(30px,6vw,74px)} .crumb{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-2);text-decoration:none;transition:color .24s,gap .24s} .crumb::before{content:"\2190";transition:transform .24s var(--ease)} [dir="rtl"] .crumb::before{content:"\2192"} .crumb:hover,.crumb:focus-visible{color:var(--fg)} .crumb:hover::before{transform:translateX(-4px)} [dir="rtl"] .crumb:hover::before{transform:translateX(4px)} /* ---- jump index ------------------------------------------------------ */ .jump{display:flex;flex-wrap:wrap;gap:8px;padding-top:var(--s3);border-top:var(--bw) solid var(--hair)} .jump__label{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-2);align-self:center;padding-inline-end:6px} .jump a{ display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:var(--r); border:var(--bw) solid var(--hair-2);text-decoration:none; font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.03em; transition:background-color .24s,color .24s,border-color .24s,transform .24s var(--ease) } .jump a i{font-style:normal;color:var(--fg-2);font-variant-numeric:tabular-nums;transition:color .24s} .jump a:hover,.jump a:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg);transform:translate(-2px,-2px)} .jump a:hover i,.jump a:focus-visible i{color:var(--bg)} /* ---- the nine, one full block each ---------------------------------- */ .svc{display:grid;gap:0;border-top:var(--bw) solid color-mix(in oklab,var(--fg) 26%,var(--bg))} .svc__item{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3.4vw,56px); padding-block:clamp(36px,4.6vw,72px); border-bottom:var(--bw) solid color-mix(in oklab,var(--fg) 26%,var(--bg)); scroll-margin-top:110px } .svc__ord{font-family:var(--font-mono);font-weight:700;font-size:clamp(30px,4.6vw,68px);letter-spacing:-.045em;line-height:.78;color:var(--fg-3);font-variant-numeric:tabular-nums} .svc__body{display:grid;gap:var(--s3)} .svc__body>.h2{max-width:22ch} .svc__lead{max-width:62ch;color:var(--fg-2)} .svc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s3);margin-top:var(--s2)} .svc__cell{display:grid;gap:8px;align-content:start;padding-top:var(--s2);border-top:2px solid var(--hair-2)} .svc__cell dt,.svc__cell h4{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-2)} .svc__cell dd,.svc__cell p{font-size:15px;line-height:1.5} .svc__cell--hot{border-top-color:var(--accent)} .svc__chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:var(--s2);border-top:var(--bw) solid var(--hair)} .svc__chips b{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-2);align-self:center;padding-inline-end:4px} .svc__chips a{ display:inline-flex;align-items:center;min-height:36px;padding:5px 11px;border-radius:var(--r); border:var(--bw) solid var(--hair-2);text-decoration:none;font-size:13px; transition:background-color .24s,color .24s,border-color .24s } .svc__chips a:hover,.svc__chips a:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg)} .svc__shot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);border:var(--bw) solid var(--hair-2);margin-top:var(--s2)} /* ---- scope document list -------------------------------------------- */ .doc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3);counter-reset:doc} .doc li{display:grid;gap:8px;align-content:start;padding-top:var(--s3);border-top:2px solid var(--hair-2)} .doc li::before{counter-increment:doc;content:"0" counter(doc);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fg-2)} .doc li p{font-size:15px;line-height:1.5} .price{display:grid;gap:var(--s3);max-width:64ch;padding:clamp(22px,2.6vw,34px);border:var(--bw) solid color-mix(in oklab,var(--fg) 30%,var(--bg));border-radius:var(--r);margin-top:clamp(32px,4vw,56px)} /* ---- native disclosure for the answers list ------------------------- */ .faq{border-top:var(--bw) solid var(--hair-2)} .faq details{border-bottom:var(--bw) solid var(--hair-2)} .faq summary{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:clamp(14px,2vw,28px); padding:clamp(18px,2.2vw,26px) 0;cursor:var(--cur),pointer;list-style:none; font-family:var(--font-display);font-size:clamp(17px,1.9vw,23px);font-weight:700;letter-spacing:-.012em;line-height:1.3; transition:padding-inline .3s var(--ease) } .faq summary::-webkit-details-marker{display:none} .faq summary:hover,.faq summary:focus-visible{padding-inline:clamp(6px,1vw,16px)} .faq summary i{font-family:var(--font-mono);font-size:11px;font-weight:700;font-style:normal;letter-spacing:.1em;color:var(--fg-2);padding-top:.45em;transition:color .3s} .faq summary:hover i{color:var(--accent-text)} .faq__sign{position:relative;width:30px;height:30px;flex:0 0 auto;margin-top:2px;border-radius:50%;border:var(--bw) solid var(--hair-2);transition:background-color .3s,border-color .3s} .faq__sign::before,.faq__sign::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;transform:translate(-50%,-50%);transition:opacity .3s} .faq__sign::before{width:11px;height:2px} .faq__sign::after{width:2px;height:11px} .faq details[open] .faq__sign{background:var(--accent);border-color:var(--accent);color:var(--wine)} .faq details[open] .faq__sign::after{opacity:0} .faq__a{padding:0 0 clamp(22px,2.6vw,32px) clamp(38px,5vw,72px);max-width:70ch;color:var(--fg-2);animation:panel-in .55s var(--ease) both} [dir="rtl"] .faq__a{padding:0 clamp(38px,5vw,72px) clamp(22px,2.6vw,32px) 0} /* ---- forms ----------------------------------------------------------- */ .form{display:grid;gap:clamp(28px,3.4vw,44px);max-width:78ch} .form__note{font-family:var(--font-mono);font-size:12px;line-height:1.55;color:color-mix(in oklab,var(--fg) 62%,var(--bg));padding-top:var(--s2);border-top:var(--bw) solid var(--hair)} .field{display:grid;gap:10px} .form fieldset{border:0;margin:0;padding:0;min-width:0} .form legend{display:block;float:none;width:100%;max-width:100%;padding:0;margin:0} .field__q{display:grid;gap:4px} .field__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-family:var(--font-display);font-size:clamp(17px,1.7vw,21px);font-weight:700;letter-spacing:-.012em;line-height:1.3} .field__ord{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--fg-2);flex:0 0 auto;font-variant-numeric:tabular-nums} .field__help{font-family:var(--font-mono);font-size:12.5px;line-height:1.5;letter-spacing:.012em;color:var(--fg-2);max-width:60ch} .field__req{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--accent-text)} .field__err{ display:flex;align-items:flex-start;gap:8px;margin-top:2px; font-family:var(--font-mono);font-size:12.5px;line-height:1.5;letter-spacing:.012em;color:var(--accent-text) } .field__err::before{content:"\2715";flex:0 0 auto;font-size:11px;line-height:1.55;font-weight:700} [aria-invalid="true"]{border-color:var(--accent-text)!important} /* a radio group's message must span the option columns, not sit in one */ .choices .field__err{grid-column:1/-1} /* the radio itself is visually replaced, so carry invalid onto the card */ .choice:has([aria-invalid="true"]){border-color:var(--accent-text)} /* a radio group's message must span the option columns, not sit in one */ .choices .field__err{grid-column:1/-1} /* the radio itself is visually replaced, so carry invalid onto the card */ .choice:has([aria-invalid="true"]){border-color:var(--accent-text)} .form input[type="text"],.form input[type="email"],.form input[type="date"],.form input[type="url"],.form textarea{cursor:text; width:100%;min-height:52px;padding:14px 16px;border-radius:var(--r); font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--fg); background:var(--lift);border:var(--bw) solid var(--hair-2); transition:border-color .24s,background-color .24s,box-shadow .24s } .form textarea{min-height:132px;resize:vertical;cursor:text} .form input::placeholder,.form textarea::placeholder{color:var(--fg-3);opacity:1} .form input:hover,.form textarea:hover{border-color:var(--hair-2);background:var(--lift-2)} .form input:focus,.form textarea:focus{outline:none;border-color:var(--fg);background:var(--bg);box-shadow:0 0 0 2px var(--fg)} .form.is-checked input:invalid,.form.is-checked textarea:invalid{border-color:var(--accent-text);box-shadow:inset 3px 0 0 var(--accent-text)} [dir="rtl"] .form.is-checked input:invalid,[dir="rtl"] .form.is-checked textarea:invalid{box-shadow:inset -3px 0 0 var(--accent-text)} /* choice grids: real inputs, visually replaced, focus ring on the label */ .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px} .choices--wide{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .choice{ position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px; border-radius:var(--r);border:var(--bw) solid var(--hair-2);background:var(--bg);cursor:var(--cur),pointer; font-size:15px;line-height:1.35; transition:background-color .24s,color .24s,border-color .24s,transform .24s var(--ease) } .choice input{position:absolute;inset-inline-start:14px;top:50%;width:20px;height:20px;margin:0;opacity:0;cursor:var(--cur),pointer} .choice__mark{position:relative;flex:0 0 auto;width:20px;height:20px;border:2px solid var(--fg-3);background:var(--bg);transition:background-color .24s,border-color .24s} .choice__mark--dot{border-radius:50%} .choice__mark--box{border-radius:3px} .choice__mark::after{content:"";position:absolute;inset:3px;border-radius:inherit;background:var(--bg);opacity:0;transition:opacity .24s} .choice:hover{border-color:var(--fg);transform:translate(-2px,-2px)} .choice:focus-within{border-color:var(--fg)} .choice:has(:focus-visible){outline:2px solid var(--fg);outline-offset:3px} .choice input:checked~.choice__mark{background:var(--fg);border-color:var(--fg)} .choice input:checked~.choice__mark::after{opacity:1} .choice:has(input:checked){background:var(--lift-2);border-color:var(--fg)} .form.is-checked .choices--required:has(input:invalid) .choice{border-color:var(--accent-text)} /* result panels */ .panel{display:grid;gap:10px;padding:clamp(20px,2.4vw,30px);border-radius:var(--r);border:2px solid var(--fg);background:var(--lift-2)} .panel[hidden]{display:none} .panel h3{font-family:var(--font-display);font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.015em} .panel p{color:var(--fg-2);max-width:60ch} .panel--ok{border-color:var(--ok-line)} .panel--bad{border-color:var(--accent-text)} .form__send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)} /* ---- second-opinion box: a short form inside a wine band ------------ */ .so{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start} .so .form{max-width:none} .so__copy{display:grid;gap:var(--s3);align-content:start} /* ---- thanks page ---------------------------------------------------- */ .thanks{min-height:100svh;display:grid;place-items:center;padding:var(--band) var(--pad)} .thanks__in{display:grid;gap:var(--s4);max-width:60ch;text-align:center;justify-items:center} .thanks__mark{width:min(100%,420px);padding:clamp(14px,2vw,24px);border-radius:var(--r);border:var(--bw) solid var(--hair-2)} /* ---- responsive additions ------------------------------------------ */ @media (max-width:1080px){ .so{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .svc__item{grid-template-columns:minmax(0,1fr);gap:var(--s2)} .doc{grid-template-columns:minmax(0,1fr)} } @media (max-width:520px){ .phero{padding-block:calc(var(--band) + 68px) var(--band)} .choices,.choices--wide{grid-template-columns:minmax(0,1fr)} .form__send .btn{width:100%} .faq summary{grid-template-columns:auto minmax(0,1fr);row-gap:6px} .faq__sign{grid-column:2;justify-self:end} .faq__a{padding-inline-start:clamp(24px,8vw,38px)} } /* ===================================================================== Page transition: a WebGL sheet of ink crossing the viewport LEFT to RIGHT. The shader displaces both edges with summed sines, so the front is liquid instead of a straight bar, and a thin rose crest rides the leading edge. One direction across two pages: leaving, the sheet enters from the left and ends covering; arriving, it keeps going and exits right. The canvas cannot paint before its script runs, so the incoming page is held under a FLAT fill set by the inline head script -- no flash -- and the shader takes over for the reveal. That script also arms a failsafe, and if WebGL is unavailable or reduced motion is on there is no overlay at all and links simply navigate. ===================================================================== */ .wipe{position:fixed;inset:0;z-index:300;display:none;pointer-events:none} html.dv-wipe-ready .wipe{display:block} /* the pre-paint cover: flat, instant, no JS beyond one class */ html.dv-wipe-cover .wipe{display:block;background:var(--wine)} :root[data-theme="dark"].dv-wipe-cover .wipe{background:var(--paper)} /* while the sheet is coming in, the page underneath stops taking clicks */ html.dv-wipe-busy body{pointer-events:none} @media (prefers-reduced-motion:reduce){ .wipe,html.dv-wipe-ready .wipe,html.dv-wipe-cover .wipe{display:none!important} } /* ---- the navbar is the page index ---------------------------------- */ .nav__link{display:inline-flex;align-items:baseline;gap:8px} .nav__link i{ font-style:normal;font-size:10px;font-weight:700;letter-spacing:.12em; color:var(--fg-3);font-variant-numeric:tabular-nums; transition:color var(--t-fast),transform var(--t-mid) var(--ease-back) } .nav__link:hover i,.nav__link:focus-visible i{color:var(--accent-text);transform:translateY(-3px) rotate(-9deg)} .nav__link[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)} .nav__link[aria-current="page"] i{color:var(--accent-text)} /* the you-are-here dot blinks once every four and a half seconds - the eye in the wordmark, borrowed. One blink per cycle, nowhere near the flash thresholds, and reduced motion stops it. */ .nav__link[aria-current="page"]::after{ content:"";width:7px;height:7px;border-radius:50%;background:var(--accent); align-self:center;flex:0 0 auto;transform-origin:50% 50%; animation:here-blink 2.4s var(--ease) 3 both } @keyframes here-blink{0%,72%,100%{transform:scaleY(1)}80%{transform:scaleY(.1)}} /* index item 04 is the destination, so its ordinal stays lit */ .nav__link--go i{color:var(--accent-text)} .nav__link--go:hover,.nav__link--go:focus-visible{border-bottom-color:var(--accent)} .sheet__link[aria-current="page"]{padding-inline-start:10px} .sheet__nav a:nth-child(4) em{color:var(--rose)} /* the CTA hangs slightly askew and straightens as you reach for it */ .nav__cta{transform:rotate(-1.4deg)} .nav__cta:hover,.nav__cta:focus-visible{transform:rotate(0deg) translate(-2px,-2px)} /* ---- the contents index, in every footer -------------------------- */ .index{display:grid;gap:var(--s3);width:100%} .index__label{ font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.09em;color:var(--fg-2) } .index__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s3)} .index__list a{ display:grid;gap:5px;align-content:start;padding-top:var(--s2); border-top:2px solid var(--hair-2);text-decoration:none; transition:border-color var(--t-fast),padding-inline-start var(--t-mid) var(--ease) } .index__list a i{ font-style:normal;font-family:var(--font-mono);font-size:11px;font-weight:700; letter-spacing:.1em;color:var(--fg-2);font-variant-numeric:tabular-nums; transition:color var(--t-fast) } .index__list a b{ font-family:var(--font-display);font-size:clamp(16px,1.5vw,19px);font-weight:700; letter-spacing:-.012em;line-height:1.25 } .index__list a em{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--fg-2)} .index__list a:hover,.index__list a:focus-visible{border-top-color:var(--fg);padding-inline-start:8px} .index__list a:hover i,.index__list a:focus-visible i{color:var(--accent-text)} .index__list a[aria-current="page"]{border-top-color:var(--accent)} .index__list a[aria-current="page"] i{color:var(--accent-text)} .foot__in{align-items:flex-start} @media (max-width:520px){ .index__list{grid-template-columns:minmax(0,1fr)} } /* ---- the index carries section links, so the anchors that used to crowd the navbar have somewhere honest to live ---------------------------- */ .index__sub{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:8px} .index__sub a{ display:inline-flex;align-items:center;min-height:32px;text-decoration:none; font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--fg-2); transition:color var(--t-fast),box-shadow var(--t-fast) } .index__sub a::before{content:"\21B3";margin-inline-end:6px;color:var(--fg-3)} [dir="rtl"] .index__sub a::before{content:"\21B2"} .index__sub a:hover,.index__sub a:focus-visible{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}