/* Contour — Formgong template. Tokens live in :root; every size comes from the fluid type scale. */
@font-face{font-family:"Geist";src:url(../fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#f4f4f0;--bg-raised:#ecece6;--ink:#0e0e0d;--muted:#65655f;--line:#0e0e0d24;--line-strong:#0e0e0d52;--control-line:#0e0e0d80;
  --accent:#2f5bff;--accent-ink:#fff;--accent-text:#2a52f0;--danger:#c02b24;
  --font-sans:"Geist",ui-sans-serif,system-ui,sans-serif;--font-mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
  --step--1:clamp(.8rem,.78rem + .1vw,.875rem);--step-0:clamp(1rem,.96rem + .2vw,1.125rem);--step-1:clamp(1.25rem,1.13rem + .6vw,1.625rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.5rem);--step-3:clamp(2.2rem,1.5rem + 3.2vw,4.5rem);--step-4:clamp(3rem,1.6rem + 6.6vw,8.5rem);--step-5:clamp(3.6rem,1.2rem + 11vw,14rem);
  --gutter:clamp(16px,2.2vw,32px);--columns:12;--col-gap:clamp(12px,1.4vw,24px);--section:clamp(88px,11vw,180px);
  --dur-1:.4s;--dur-2:.8s;--dur-3:1.2s;--ease-in-out:cubic-bezier(.76,0,.24,1);--ease-out:cubic-bezier(.25,1,.5,1);
  color-scheme:light}
:root[data-theme=dark]{--bg:#0b0b0c;--bg-raised:#151517;--ink:#edede7;--muted:#8b8b85;--line:#edede71f;--line-strong:#edede74d;--control-line:#edede773;--danger:#ff6b5e;color-scheme:dark}
:root[data-accent=blue]{--accent:#2f5bff;--accent-ink:#fff;--accent-text:#2a52f0}
:root[data-theme=dark][data-accent=blue]{--accent:#5b7cff;--accent-ink:#0e0e0d}
:root[data-accent=orange]{--accent:#ff5a1f;--accent-ink:#0e0e0d;--accent-text:#bb3505}
:root[data-accent=lime]{--accent:#c6f432;--accent-ink:#0e0e0d;--accent-text:#4f6b00}
:root[data-theme=dark]{--accent-text:var(--accent)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{font-size:var(--step-0);line-height:1.55;background:var(--bg);min-height:100dvh;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
::selection{background:var(--accent);color:var(--accent-ink)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none}
button{cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
main:focus,[tabindex="-1"]:focus{outline:0}
h1,h2,h3,h4{letter-spacing:-.035em;text-wrap:balance;font-weight:500;line-height:.95}
p{text-wrap:pretty}
[hidden]{display:none!important}

/* layout primitives */
.wrap{padding-inline:var(--gutter)}
.grid-12{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));column-gap:var(--col-gap)}
.frame::before,.frame::after{content:"";position:fixed;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none;z-index:1}
.frame::before{left:calc(var(--gutter)/2)}
.frame::after{right:calc(var(--gutter)/2)}
.section{padding-top:var(--section);position:relative}
.note{font-family:var(--font-mono);font-size:.72rem;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);font-weight:400}
.note--ink{color:var(--ink)}
.note--accent{color:var(--accent-text)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--line-strong);padding-top:.75rem;margin-bottom:clamp(48px,7vw,112px)}
.display{font-size:var(--step-5);letter-spacing:-.055em;line-height:.86}
.h1{font-size:var(--step-4);letter-spacing:-.05em;line-height:.9}
.h2{font-size:var(--step-3);letter-spacing:-.045em;line-height:.95}
.h3{font-size:var(--step-2);letter-spacing:-.03em;line-height:1.05}
.lead{font-size:var(--step-1);letter-spacing:-.015em;line-height:1.35}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--gutter);top:-4rem;z-index:100;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:99px;transition:top var(--dur-1) var(--ease-out)}
.skip:focus{top:1rem}

/* buttons + links */
.btn{--btn-bg:var(--ink);--btn-fg:var(--bg);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.75rem;height:3.25rem;padding-inline:1.4rem;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font-size:.95rem;font-weight:500;white-space:nowrap;transition:color var(--dur-1) var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);border-radius:50% 50% 0 0;transform:translateY(101%);transition:transform var(--dur-2) var(--ease-in-out),border-radius var(--dur-2) var(--ease-in-out)}
.btn:hover::before{transform:translateY(0);border-radius:0}
.btn:hover{color:var(--accent-ink)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn .arrow{transition:transform var(--dur-1) var(--ease-out)}
.btn:hover .arrow{transform:translate(3px) rotate(-45deg)}
.link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-1) var(--ease-out)}
.link:hover{background-size:100% 1px}
.link--inline{background-image:linear-gradient(color-mix(in oklab,currentColor 45%,transparent),color-mix(in oklab,currentColor 45%,transparent));background-size:100% 1px}
.link--inline:hover{background-image:linear-gradient(currentColor,currentColor)}
.outline-text{color:transparent;-webkit-text-stroke:1px var(--line-strong)}
kbd{font-family:inherit;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);border-radius:4px;padding:.05em .4em}

/* monogram */
.monogram{display:block;width:auto;height:1em;overflow:visible}
.monogram path{fill:none;stroke:currentColor;stroke-width:4.2px;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0}
.monogram__dot{fill:var(--accent);transition:fill var(--dur-1) var(--ease-out)}
.monogram.is-plotting path{animation:plot var(--dur-3) var(--ease-in-out) both}
.monogram.is-plotting .monogram__g{animation-delay:.18s}
.monogram.is-plotting .monogram__dot{animation:pop var(--dur-1) var(--ease-out) .9s both}
@keyframes plot{0%{stroke-dashoffset:1px}}
@keyframes pop{0%{transform-origin:64px 36px;transform:scale(0)}}

/* preloader */
.preloader{position:fixed;inset:0;z-index:95;display:none;grid-template-rows:auto 1fr auto;place-items:center;padding:1.25rem var(--gutter);background:var(--ink);color:var(--bg);clip-path:inset(0);animation:lift .9s var(--ease-in-out) 1.2s forwards}
html.js:not([data-preloaded]) .preloader{display:grid}
.preloader__meta{width:100%;display:flex;justify-content:space-between;color:color-mix(in oklab,var(--bg) 60%,transparent)}
.preloader .preloader__mark{font-size:clamp(5rem,16vw,12rem)}
.preloader__count{font-variant-numeric:tabular-nums}
@keyframes lift{to{clip-path:inset(0 0 100%);visibility:hidden}}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:4.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;color:var(--ink)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg)}
.hd-rule{position:absolute;inset:auto 0 0;height:7px;pointer-events:none;clip-path:inset(0 0 -1.5rem);background:linear-gradient(var(--line-strong),var(--line-strong)) bottom/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 80px) bottom/100% 7px no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) bottom/100% 3px no-repeat}
.hd-rule__fill{position:absolute;inset:auto 0 0;height:1px;background:var(--accent);transform:translateX(-100%)}
.hd-rule__tag{position:absolute;top:.45rem;right:0;padding:.1rem .35rem;font-size:.625rem;line-height:1;color:var(--accent-ink);background:var(--accent);opacity:0}
.hd-rule__tag::after{content:"";position:absolute;bottom:100%;right:0;width:1px;height:.45rem;background:var(--accent)}
/* header state is driven from main.js (compact band, ruler draw, progress) */
.site-header{transition:height var(--dur-1) var(--ease-out)}
.site-header::before{opacity:var(--band,0)}
.site-header .hd-rule{clip-path:inset(0 calc(100% - var(--draw,0) * 100%) -1.5rem 0)}
.site-header .hd-rule__fill{transform:translateX(calc(var(--prog,0) * 100% - 100%))}
.site-header .hd-rule__tag{opacity:var(--tag,0)}
.site-header.is-compact{height:3.75rem}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:.75rem;padding-left:.75rem}
.brand .brand__mark{font-size:1.6rem}
.brand__role{color:var(--muted)}
.nav ul{display:flex;gap:clamp(1rem,2.4vw,2.5rem)}
.nav__link{display:inline-flex;align-items:baseline;gap:.4rem;font-size:.95rem}
.nav__label{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.2}
.nav__label::after{content:attr(data-label);position:absolute;top:100%;left:0;color:var(--accent-text)}
.nav__label,.nav__label::after{transition:transform var(--dur-1) var(--ease-in-out)}
.nav__link:hover .nav__label{transform:translateY(-100%)}
.nav__link:hover .nav__label::after{transform:translateY(0)}
.tools{justify-self:end;display:flex;align-items:center;gap:.5rem;padding-right:.75rem}
.tool{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.tool:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.tool:active{transform:scale(.92)}
.tool svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.5px}
.tool svg path{fill:currentColor;stroke:none}
.tool--kbd{width:auto;padding-inline:.7rem;color:var(--ink)}
.swatch{width:.9rem;height:.9rem;border-radius:999px;background:var(--accent);transition:background var(--dur-1) var(--ease-out)}
.tool--menu{display:none;width:auto;padding-inline:.9rem;color:var(--ink)}
.header-cta{height:2.25rem;margin-left:.25rem;padding-inline:1rem;font-size:.85rem}
@media (max-width:960px){.site-header{grid-template-columns:1fr auto}.nav,.brand__role,.tool--kbd{display:none}.tool--menu{display:grid}}
@media (max-width:480px){.header-cta{display:none}}

/* command palette (also the phone menu) */
.palette{width:min(640px,calc(100vw - 2*var(--gutter)));max-height:70vh;margin:12vh auto auto;padding:0;border:0;background:none;color:var(--ink);overflow:visible}
.palette::backdrop{background:color-mix(in oklab,var(--bg) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.palette[open] .palette__box{animation:palette-in var(--dur-1) var(--ease-out)}
@keyframes palette-in{0%{opacity:0;transform:translateY(12px) scale(.98)}}
.palette__box{display:flex;flex-direction:column;max-height:70vh;overflow:hidden;border-radius:18px;background:var(--bg-raised);box-shadow:0 0 0 1px var(--line-strong),0 30px 80px -20px #00000059}
.palette__search{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.palette__search:focus-within{box-shadow:inset 0 -2px 0 var(--accent-text)}
.palette__search input{flex:1;min-width:0;border:0;outline:0;font-size:1.1rem;color:var(--ink)}
.palette__list{padding:.4rem;overflow-y:auto}
.palette__list [role=option]{display:flex;justify-content:space-between;gap:1rem;padding:.65rem .75rem;border-radius:10px;cursor:pointer}
.palette__list [role=option]>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette__list [role=option]>span:first-child{flex:auto}
.palette__list [role=option]>.note{flex:0 auto;max-width:45%}
.palette__list [aria-selected=true]{background:var(--ink);color:var(--bg)}
.palette__list [aria-selected=true] .note{color:inherit;opacity:.7}
.palette__group{padding:.9rem .75rem .35rem}
.palette__empty{padding:1rem .75rem}
@media (max-width:560px){.palette__list [role=option]{flex-direction:column;gap:.15rem}.palette__list [role=option]>.note{max-width:100%}}

/* grid overlay */
.grid-overlay{position:fixed;inset:0;z-index:90;padding-inline:var(--gutter);pointer-events:none;opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.grid-overlay>div{height:100%}
.grid-overlay span{background:color-mix(in oklab,var(--accent) 9%,transparent);border-inline:1px solid color-mix(in oklab,var(--accent) 35%,transparent)}
:root[data-grid=on] .grid-overlay{opacity:1}

/* cursor */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor{position:fixed;inset:0;z-index:97;pointer-events:none;opacity:0;transition:opacity var(--dur-1)}
.cursor.is-visible{opacity:1}
.cursor__h,.cursor__v{position:absolute;background:var(--line-strong);opacity:.55}
.cursor__h{top:0;left:0;right:0;height:1px}
.cursor__v{top:0;bottom:0;left:0;width:1px}
.cursor__pt{position:absolute;top:0;left:0}
.cursor__ring{position:absolute;top:-5px;left:-5px;width:10px;height:10px;border:1px solid var(--ink);background:var(--accent);transition:transform var(--dur-1) var(--ease-out),border-radius var(--dur-1) var(--ease-out),background var(--dur-1)}
.cursor.is-hover .cursor__ring{border-color:var(--accent);background:none;border-radius:50%;transform:scale(4.2) rotate(45deg)}
.cursor.is-down .cursor__ring{transform:scale(.6)}
.cursor__label{position:absolute;top:12px;left:14px;white-space:nowrap;color:var(--ink);font-size:.62rem}
.cursor.is-hover .cursor__label{top:-6px;left:30px;color:var(--accent-text)}

/* hero */
[data-hero]{position:relative;isolation:isolate}
.hero{display:grid;grid-template-rows:auto 1fr auto auto;gap:1.5rem;min-height:100svh;padding-top:6rem;padding-bottom:2rem}
.hero__top{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line-strong);padding-top:.75rem}
.hero__title{display:flex;flex-direction:column;align-self:end;gap:.35em;font-weight:500}
.hero__human{display:block;margin-left:-.05em;color:var(--ink);-webkit-text-stroke:0 var(--ink)}
.hero__machine{display:block;max-width:24ch;color:var(--ink)}
html.js:not(.motion-ready) :is([data-hero-generate],[data-hero-human]){visibility:hidden;animation:0s 2.5s forwards failsafe}
@keyframes failsafe{to{visibility:visible}}
.gen-word{display:inline-block;will-change:filter,opacity}
.gen-caret{display:inline-block;position:relative;width:0;height:.82em;vertical-align:-.04em}
.gen-caret::after{content:"";position:absolute;inset:0 auto 0 .08em;width:.08em;background:var(--accent)}
.gen-caret.is-idle::after{animation:blink 1.1s step-end 4}
@keyframes blink{50%{opacity:0}}
.hero__notes{display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.hero__terrain{display:none}
.hero.has-terrain .hero__terrain{display:block;animation:terrain-in .8s var(--ease-out) both}
@keyframes terrain-in{0%{opacity:0;transform:translateY(6px)}}
.hero__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;border-top:1px solid var(--line);padding-top:1.5rem}
.hero__intro{max-width:34ch;color:var(--muted)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-gl{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 2s var(--ease-out)}
.hero-gl.is-on{opacity:1}
.bp{position:absolute;inset:0;z-index:2;pointer-events:none}
.bp__box{position:absolute;outline:1px dashed color-mix(in oklab,var(--accent) 70%,transparent);outline-offset:4px;background:color-mix(in oklab,var(--accent) 4%,transparent)}
.bp__box::before,.bp__box::after{content:"";position:absolute;width:9px;height:9px;border:solid var(--accent-text)}
.bp__box::before{border-width:1px 0 0 1px;top:-8px;left:-8px}
.bp__box::after{border-width:0 1px 1px 0;bottom:-8px;right:-8px}
.bp__label{position:absolute;bottom:calc(100% + 8px);left:-4px;white-space:nowrap;color:var(--accent-text);font-size:.65rem}
.bp__guide{position:absolute;background:color-mix(in oklab,var(--accent) 45%,transparent)}
.bp__guide--h{left:0;right:0;height:1px;transform-origin:0}
.bp__guide--v{top:0;bottom:0;width:1px;transform-origin:top}
@media (max-width:767px){.hide-sm{display:none}}

/* manifesto */
.wf{font:inherit;letter-spacing:inherit}
.wf-row{display:block;position:relative}
.wf-line{display:block;position:relative;width:fit-content;max-width:100%;white-space:nowrap}
.wf-solid{position:absolute;inset:0;clip-path:inset(-.35em 0 -.45em);will-change:clip-path}
.wf-solid__inner{display:block}
.wf-dim{position:absolute;top:.6em;right:0;color:var(--accent-text)}
.wf-row:nth-of-type(2) .wf-line{margin-left:8vw}
.wf-row:nth-of-type(3) .wf-line{margin-left:16vw}
.manifesto__body{margin-top:clamp(48px,7vw,112px)}
.manifesto__body p{grid-column:7/-1}
@media (max-width:767px){.wf-line{white-space:normal;font-size:var(--step-3)}.wf-row:nth-of-type(n) .wf-line{margin-left:0}.wf-dim{display:none}.manifesto__body p{grid-column:1/-1}}

/* work stage */
.work__intro{font-weight:400;letter-spacing:-.015em;line-height:1.35;text-wrap:pretty;max-width:40ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.ws{display:grid;gap:clamp(3rem,8vw,5rem)}
.ws__count,.ws__stages{display:none}
.ws__item{display:flex;flex-direction:column-reverse;gap:1.25rem}
.ws__art{position:relative;aspect-ratio:8/5;overflow:hidden;border-radius:4px;color:var(--ink);background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/3.125% 5%,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/3.125% 5%,var(--bg-raised)}
.ws__art svg,.ws__photo{position:absolute;inset:0;width:100%;height:100%}
.ws__photo{object-fit:cover;transform-origin:0 50%}
.ws__meta{display:flex;justify-content:space-between;gap:1rem}
.ws__title{margin-top:.9rem}
.ws__client{margin-top:.5rem}
.ws__summary{max-width:42ch;margin-top:.75rem;color:var(--muted)}
.ws__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.ws__actions:not(:has(>:not([hidden]))){display:none}
.ws.is-pinned{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--col-gap);row-gap:1.5rem;height:calc(100svh - 5.5rem);padding-block:1.5rem}
.ws.is-pinned .ws__count{display:block;grid-area:1/1/auto/span 4}
.ws.is-pinned .ws__stages{display:block;grid-area:3/1/auto/span 4}
.ws.is-pinned .ws__item{display:contents}
.ws.is-pinned .ws__text{grid-area:2/1/auto/span 4;align-self:center}
.ws.is-pinned .ws__art{grid-area:1/5/span 3/span 8;align-self:center}
.ws.is-pinned :is(.ws__text,.ws__art){will-change:opacity,transform}
.ws.is-pinned .ws__item:not([data-current]) :is(.ws__text,.ws__art){pointer-events:none}
.ws__count{font-size:var(--step-4);font-weight:500;letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums}
.ws__n{display:inline-block}
.ws__stages ol{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ws__stages li{position:relative;border-top:2px solid var(--line);padding-top:10px}
.ws__stages li i{position:absolute;top:-2px;left:0;width:100%;height:2px;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:0}
.ws__stages li[data-on] span{color:var(--accent-text)}
.ws__stages li[data-on] i{background:var(--accent)}
.ws__stages b{display:block;margin-top:4px;font-family:var(--font-sans);font-size:var(--step-0);font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.ws__rail{display:flex;gap:8px;margin-top:1.25rem}
.ws__rail i{flex:1;height:4px;background:var(--line);transition:background-color var(--dur-1)}
.ws__rail i[data-on]{background:var(--ink)}
svg [pathLength="1"]{stroke-dasharray:1 2}
.guide{fill:none;stroke:var(--accent);stroke-opacity:.7;stroke-dasharray:3 5}
.wire{fill:none;stroke:currentColor;stroke-opacity:.55}
.veil{fill:#0e0e0d;fill-opacity:.28}
.track{fill:#f4f4f0;fill-opacity:.35}
.track-on{fill:#f4f4f0}
.chip{fill:#f4f4f0;fill-opacity:.92}
.hill{fill:none;stroke:#f4f4f0;stroke-opacity:.45}
.hill--a{stroke:var(--accent);stroke-opacity:1;stroke-width:2px}
.lbl{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;fill:currentColor;fill-opacity:.6}
.lbl--a{fill:var(--accent);fill-opacity:1}
.lbl--ink{fill:#0e0e0d;fill-opacity:1}
.lbl--lg{font-size:15px}
.lbl--light{fill:#f4f4f0;fill-opacity:1}
.ws__art .live{opacity:1}

/* services */
.services{position:relative;isolation:isolate;border-bottom:1px solid var(--line)}
.service{border-top:1px solid var(--line)}
.service__link{position:relative;align-items:baseline;row-gap:.75rem;padding-block:clamp(1.5rem,3vw,2.75rem);transition:color var(--dur-1) var(--ease-out)}
.service__link::before{content:"";position:absolute;inset:0 calc(-1*var(--gutter));z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur-2) var(--ease-in-out)}
html:not(.fill-js) .service__link:hover,.service__link[data-hot]{color:var(--bg)}
html:not(.fill-js) .service__link:hover::before,.service__link[data-hot]::before{transform:scaleY(1);transform-origin:top}
html:not(.fill-js) .service__link:hover .note,.service__link[data-hot] .note{color:color-mix(in oklab,var(--bg) 65%,transparent)}
.service__n{grid-column:1/span 1}
.service__title{grid-column:2/span 6}
.service__body{grid-column:8/span 4;opacity:.8}
.service__tags{grid-column:8/span 4;display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.service__arrow{grid-area:1/12;justify-self:end;font-size:var(--step-2);transition:transform var(--dur-2) var(--ease-in-out),color var(--dur-1)}
html:not(.fill-js) .service__link:hover .service__arrow,.service__link[data-hot] .service__arrow{color:var(--accent-text);transform:rotate(-45deg)}

/* process */
.process__claim{max-width:18ch;margin-bottom:clamp(3rem,6vw,5rem)}
.process__line{height:1px;background:var(--ink);transform-origin:0}
.process{row-gap:2.5rem}
.step{position:relative;grid-column:span 3;padding-top:1.5rem}
.step__dot{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:99px;background:var(--accent)}
.step__title{font-size:var(--step-1);margin:.6rem 0 .5rem}
.step__body{max-width:30ch;color:var(--muted)}

/* notes */
.posts{border-bottom:1px solid var(--line)}
.posts li{border-top:1px solid var(--line)}
.post{align-items:baseline;row-gap:.4rem;padding-block:1.6rem}
.post__date{grid-column:1/span 2}
.post__title{grid-column:3/span 7;transition:transform var(--dur-2) var(--ease-in-out),color var(--dur-1)}
.post__pillar{grid-column:11/span 2;justify-self:end}
.post:hover .post__title{color:var(--accent-text);transform:translateX(1rem)}

/* contact */
.cta__title{max-width:11ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(2rem,4vw,3.5rem)}
.cta__form{margin-top:clamp(64px,8vw,128px);border-top:1px solid var(--line);padding-top:clamp(1.5rem,3vw,2.75rem);row-gap:2rem}
.cta__lead{grid-column:1/span 5;max-width:26ch;color:var(--muted)}
.fg{position:relative;grid-column:7/-1}
.fg-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem var(--col-gap)}
.fld{display:flex;flex-direction:column;gap:.5rem}
.fld-wide{grid-column:1/-1}
.fld input,.fld select,.fld textarea{width:100%;border:0;border-bottom:1px solid var(--control-line);border-radius:0;padding:.55rem 0;font-size:var(--step-1);letter-spacing:-.015em;transition:border-color var(--dur-1) var(--ease-out)}
.fld select{appearance:none;cursor:pointer;background:linear-gradient(45deg,transparent 50%,currentColor 50%) right 6px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,currentColor 50%) right 0 center/6px 6px no-repeat}
.fld select option{background:var(--bg);color:var(--ink)}
.fld textarea{resize:vertical;min-height:6.5rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--accent-text)}
.fg-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.fg-status{font-size:.9rem;color:var(--muted)}
.fg-status.err{color:var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fg-sent{display:none}
.fg.is-sent .fg-fields{display:none}
.fg.is-sent .fg-sent{display:block}
.fg-sent-h{margin-bottom:1rem}
.fg-sent p:not(.fg-sent-h){color:var(--muted);margin-bottom:1.5rem}
.credit{margin-top:1.5rem}

/* footer */
.site-footer{position:relative;overflow:clip;padding-top:var(--section);padding-bottom:1.25rem}
.footer-top{row-gap:2.5rem;padding-bottom:clamp(48px,8vw,120px)}
.footer-claim{grid-column:1/span 6;max-width:16ch}
.footer-claim .accent{color:var(--accent-text)}
.footer-col{grid-column:span 2;display:flex;flex-direction:column;gap:.9rem}
.footer-col ul{display:flex;flex-direction:column;gap:.35rem}
.footer-sign{position:relative}
.footer-mark{font-size:clamp(4rem,18.6vw,23rem);font-weight:500;line-height:.78;letter-spacing:-.065em;white-space:nowrap;margin-inline:-.04em}
.tb{position:relative;width:max-content;max-width:100%;margin-top:2rem;border:1px solid var(--line-strong);background:var(--bg);transition:border-color var(--dur-1) var(--ease-out)}
@media (min-width:1100px){.tb{position:absolute;right:0;bottom:0;margin:0}}
.tb::before,.tb::after{content:"";position:absolute;width:9px;height:9px;border:solid var(--accent);pointer-events:none}
.tb::before{border-width:1px 0 0 1px;top:-5px;left:-5px}
.tb::after{border-width:0 1px 1px 0;bottom:-5px;right:-5px}
.tb:hover{border-color:var(--ink)}
.tb__cells{display:grid;grid-template-columns:repeat(3,auto)}
.tb__cells>div{display:flex;flex-direction:column;gap:.35rem;padding:.7rem 1rem .8rem}
.tb__cells>div+div{border-left:1px solid var(--line-strong)}
.tb dt{color:var(--muted)}
.tb__val{font-size:1.9rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tb__cap{display:flex;justify-content:space-between;gap:2rem;padding:.5rem 1rem;border-top:1px solid var(--line-strong);color:var(--muted)}
.tb__link{color:var(--accent-text)}
.tb__link::after{content:"";position:absolute;inset:0}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line)}
.copy{display:flex;flex-wrap:wrap;column-gap:.5em}
.copy span+span::before{content:"· "}
.legal-links{display:flex;gap:1.25rem}
@media (hover:none){.hint{display:none}}

/* phone */
@media (max-width:767px){
  .grid-12{--columns:4}
  .service__n,.service__title,.service__body,.service__tags{grid-column:1/-1}
  .service__arrow{display:none}
  .process__line{display:none}
  .process{row-gap:0}
  .step{--mark-y:calc(.72rem*1.4 + .6rem + var(--step-1)*.475);grid-column:1/-1;padding:0 0 2.25rem 1.75rem}
  .step>.note{display:block}
  .step::before{content:"";position:absolute;left:4px;top:var(--mark-y);bottom:calc(-1*var(--mark-y));width:1px;background:var(--ink)}
  .step:last-child{padding-bottom:0}
  .step:last-child::before{height:0;bottom:auto}
  .step__dot{top:var(--mark-y);transform:translateY(-50%)}
  .post__date,.post__title{grid-column:1/-1}
  .post__pillar{grid-column:1/-1;justify-self:start}
  .cta__lead,.fg{grid-column:1/-1}
  .fg-fields{grid-template-columns:1fr}
  .footer-claim{grid-column:1/-1}
  .footer-col{grid-column:span 2}
  .footer-bottom{flex-direction:column;gap:1rem;padding-bottom:env(safe-area-inset-bottom)}
  .legal-links{order:-1;flex-wrap:wrap;gap:.5rem 1.5rem}
  .copy{flex-direction:column;color:var(--muted)}
  .copy span+span::before{content:none}
  .grid-overlay span:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js:not(.motion-ready) :is([data-hero-generate],[data-hero-human]){visibility:visible}
}