/* Archivo (variable width + weight) is Filip's own voice; Spectral is only for what clients say. */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/assets/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/assets/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-display:swap;font-weight:400;
  src:url(/assets/fonts/spectral-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:italic;font-display:swap;font-weight:400;
  src:url(/assets/fonts/spectral-latin-400-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:italic;font-display:swap;font-weight:400;
  src:url(/assets/fonts/spectral-latin-ext-400-italic.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-display:swap;font-weight:400;
  src:url(/assets/fonts/spectral-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* The brand: forest, graphite, steel and quicksilver on mist. The page is mist with forest
   ink; the night in the middle (the tree and the lab) is the forest at dark. Metal appears
   only where it is real: the eagle in the hero, rendered live. */
:root{
  --mist:#E3E8E5;
  --paper:#F8FAF9;
  --ink:#0F1A16;
  --ink-2:#4F5A55;
  --line:#C3CCC7;
  --forest:#0E2A1F;
  --graphite:#252C2B;
  --steel:#6B726E;
  --quick:#B8C1BF;
  --night:#060a07;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Spectral',Georgia,serif;
  --gut:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
/* a tap on a phone draws no grey-blue box over what was tapped: everything that can be pressed
   shows its own state, and the keyboard focus keeps its outline */
html{background:var(--mist);color:var(--ink);font:400 18px/1.55 var(--sans);font-stretch:100%;
  -webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--mist);overflow-x:clip}
img,video{max-width:100%;height:auto}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}

h1,h2,h3{margin:0;font-weight:620;font-stretch:112%;letter-spacing:-.015em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.025em}
h3{font-size:21px;font-stretch:106%;letter-spacing:-.006em;line-height:1.25}
p{margin:0}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--forest);color:var(--mist)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;min-height:54px;padding:0 28px;border:0;border-radius:4px;
  background:var(--forest);color:var(--mist);font:620 17px/1 var(--sans);font-stretch:106%;text-decoration:none;cursor:pointer;
  transition:font-stretch .35s var(--ease),background .2s}
.btn:hover{background:#183A2D;font-stretch:118%}

section{padding-top:clamp(96px,11vw,160px)}
.head{display:grid;grid-template-columns:5fr 7fr;gap:20px 56px;align-items:baseline;margin-bottom:clamp(36px,4vw,56px)}
.head p{color:var(--ink-2);max-width:54ch}
@media (max-width:860px){.head{grid-template-columns:1fr}}

/* header */
/* header: one calm line in forest ink. At the top it sits on the mist itself; once the page
   moves it gets a frosted mist glass, so it reads over the photo, the tree and the lab alike */
.bar{position:sticky;top:0;z-index:20}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(227,232,229,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 1px 0 rgba(15,26,22,.08);opacity:0;transition:opacity .35s var(--ease)}
.bar.is-scrolled::before{opacity:1}
/* over the night (the tree and the lab) the glass turns forest-dark and the ink turns to mist */
.bar::before{transition:opacity .35s var(--ease),background .35s var(--ease)}
.bar.is-dark::before{background:rgba(6,12,9,.66);box-shadow:0 1px 0 rgba(227,232,229,.08)}
.bar .top,.bar .brand,.bar .lang,.bar .brand .mark{transition:color .35s var(--ease),border-color .35s var(--ease)}
.bar.is-dark .top,.bar.is-dark .brand{color:var(--mist)}
.bar.is-dark .brand{--mark-eye:#0B1712}
.bar.is-dark .brand .mark{color:#D9DEDC}
.bar.is-dark .wordmark i{color:var(--quick)}
.bar.is-dark .lang{color:rgba(227,232,229,.6);border-color:rgba(227,232,229,.22)}
.bar.is-dark .lang [aria-current],.bar.is-dark .lang a:hover{color:var(--mist)}
.bar.is-dark .nav .nav-contact:hover,.bar.is-dark .nav .nav-contact[aria-current]{background:var(--mist);border-color:var(--mist);color:var(--forest)}
.top{display:flex;align-items:center;gap:32px;height:var(--head-h);color:var(--ink)}
.brand{--mark-eye:var(--mist);display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .mark{height:30px;width:auto;max-width:58px;flex:none;color:var(--forest);margin-top:-4px}
/* the wordmark: Archivo at its widest, light and spaced, the one place capitals are used */
.wordmark{font-weight:430;font-stretch:125%;font-size:14px;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.wordmark i{font-style:normal;color:var(--steel)}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;font-stretch:104%}
.nav a{position:relative;padding:6px 0;color:inherit;text-decoration:none}
/* a fine line draws in under a link on hover, and stays under the section you are reading */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav .nav-contact{padding:9px 16px;border:1px solid currentColor;border-radius:3px;transition:background .2s,color .2s,border-color .2s}
.nav .nav-contact::after{display:none}
.nav .nav-contact:hover,.nav .nav-contact[aria-current]{background:var(--forest);border-color:var(--forest);color:var(--mist)}
/* Services: one item that opens a small panel of the offers (hover, or click and keyboard), so the
   bar keeps five items however many offers there are; underlined while you read one of them */
.nav-more{position:relative}
.nav-drop{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 0;border:0;background:none;color:inherit;font:inherit;font-stretch:inherit;cursor:pointer}
.nav-drop svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s var(--ease)}
.nav-drop::after{content:"";position:absolute;left:0;right:17px;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-more:hover .nav-drop::after,.nav-more.open .nav-drop::after,.nav-more:has(a[aria-current]) .nav-drop::after{transform:scaleX(1)}
.nav-more:hover .nav-drop svg,.nav-more.open .nav-drop svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 14px);left:50%;width:372px;margin-left:-186px;padding:8px;border-radius:12px;background:var(--paper);color:var(--ink);
  box-shadow:0 0 0 1px rgba(15,26,22,.08),0 24px 48px rgba(14,42,31,.16);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-more:hover .drop,.nav-more:focus-within .drop,.nav-more.open .drop{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s}
.nav .drop a{display:grid;gap:2px;padding:12px 14px;border-radius:8px;color:var(--ink)}
.nav .drop a::after{display:none}
.nav .drop a:hover,.nav .drop a:focus-visible{background:var(--mist)}
.drop b{font-size:15px;font-weight:600}
.drop span{font-size:13px;font-weight:400;font-stretch:100%;color:var(--ink-2)}
/* the eagle flies above the bar (its shards land in the logo), so an open panel lifts the bar over it */
.bar:has(.nav-more:hover),.bar:has(.nav-more:focus-within),.bar:has(.nav-more.open){z-index:26}
.lang{display:flex;gap:12px;padding-left:22px;border-left:1px solid rgba(15,26,22,.16);font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--ink-2)}
.lang a{text-decoration:none}
.lang a:hover{color:var(--ink)}
.lang [aria-current]{color:var(--ink);font-weight:640}
@media (max-width:440px){.wordmark{font-size:12px;letter-spacing:.09em}.brand{gap:9px}.brand .mark{height:24px;max-width:36px}.top{gap:14px}.lang{padding-left:14px}}
/* the smallest phones: the hero's quote button replaces the header's contact link */
@media (max-width:400px){.nav{display:none}.lang{margin-left:auto;padding-left:0;border-left:0}.wordmark{font-size:11px;letter-spacing:.05em}.top{gap:10px}}
@media (max-width:760px){.nav a:not(.nav-contact){display:none}.top{gap:20px}}
/* phones: a slimmer bar, and the links move into a menu that opens over the whole page; its
   links come in large and open up, like the project names */
.menu-btn,.menu{display:none}
@media (max-width:760px){
  :root{--head-h:64px}
  .nav,.top > .lang{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:12px;margin-left:auto;height:44px;padding:0 0 0 14px;border:0;background:none;color:inherit;
    font:500 13px/1 var(--sans);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
  .menu-btn .bars{position:relative;width:22px;height:10px}
  /* open, only the cross shows; the word stays for screen readers */
  .menu-open .menu-btn{min-width:44px;justify-content:flex-end}
  .menu-open .menu-btn .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .menu-btn .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
  .menu-btn .bars i:first-child{top:0}
  .menu-btn .bars i:last-child{top:8.5px}
  .menu-open .menu-btn .bars i{top:4.25px}
  .menu-open .menu-btn .bars i:first-child{transform:rotate(45deg)}
  .menu-open .menu-btn .bars i:last-child{transform:rotate(-45deg)}
  .menu-open{overflow:hidden}
  .menu-open .bar{z-index:31}
  .menu{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;padding:calc(var(--head-h) + 3vh) var(--gut) calc(26px + env(safe-area-inset-bottom));
    background:rgba(227,232,229,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
  .menu.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
  .menu-links{display:grid;gap:8px;margin:auto 0}
  .menu-links a{justify-self:start;font-size:clamp(30px,8vw,56px);font-weight:640;letter-spacing:-.02em;line-height:1.2;color:var(--ink);text-decoration:none;
    font-stretch:72%;opacity:0;transform:translateY(16px);transition:font-stretch .9s var(--ease),opacity .5s var(--ease),transform .7s var(--ease)}
  .menu.is-open .menu-links a{font-stretch:118%;opacity:1;transform:none}
  .menu.is-open .menu-links a:nth-child(2){transition-delay:.05s}
  .menu.is-open .menu-links a:nth-child(3){transition-delay:.1s}
  .menu.is-open .menu-links a:nth-child(4){transition-delay:.15s}
  .menu.is-open .menu-links a:nth-child(5){transition-delay:.2s}
  .menu-links a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
  /* the offers, small, under Services */
  .menu-sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-4px 0 8px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) .12s,transform .7s var(--ease) .12s}
  .menu.is-open .menu-sub{opacity:1;transform:none}
  .menu-links .menu-sub a{font-size:17px;font-weight:500;font-stretch:104%;letter-spacing:0;line-height:1.4;color:var(--ink-2);opacity:1;transform:none;
    text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em;transition:color .2s}
  .menu.is-open .menu-links .menu-sub a{font-stretch:104%}
  .menu.is-open .menu-links > :nth-child(6){transition-delay:.25s}
  .menu-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid var(--line);font-size:16px}
  .menu-foot .direct-m{display:grid;gap:6px}
  .menu-foot .direct-m a{color:var(--ink)}
  .menu-foot .lang{padding-left:0;border-left:0}
}

/* ── hero: a summit stands behind the header and the eagle and dissolves downwards into the
      mist like low cloud. Liquid metal pours into the eagle over it and sets into ten facets. ── */
/* the headline always fits on the first screen, also on a 768px laptop */
:root{--head-h:76px;--stage-h:clamp(300px,min(62vh,calc(100vh - 360px)),680px);--text-gap:clamp(28px,5.5vh,72px)}
@media (max-width:960px){:root{--stage-h:clamp(260px,40vh,420px)}}
.sky{position:absolute;left:0;right:0;top:calc(-1 * var(--head-h));height:calc(var(--head-h) + var(--stage-h) + var(--text-gap));z-index:0;overflow:hidden;pointer-events:none;transform-origin:62% 40%;
  -webkit-mask-image:linear-gradient(#000 0%,#000 52%,rgba(0,0,0,.7) 68%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.08) 94%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 52%,rgba(0,0,0,.7) 68%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.08) 94%,transparent 100%)}
.sky img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block}
/* "Focus" behind the summit: the word lies in the sky and the peak, cut out of the same photo,
   stands in front of it. It fades in once the cut-out has loaded, so it never shows over the rock */
.sky-word{position:absolute;transform:translate(-50%,-50%);padding-left:.46em;white-space:nowrap;line-height:1;
  font-family:var(--sans);font-weight:300;font-stretch:125%;letter-spacing:.46em;text-transform:uppercase;color:#F1F4F2;
  opacity:0;transition:opacity 2.4s var(--ease)}
.sky.has-cut .sky-word{opacity:.62}
main{position:relative;z-index:1}
.hero{padding-top:0}
/* the hero is pinned while the scroll drives the eagle (set from the eagle script, only when it fits) */
/* the mountain grows a little during the scroll sequence; it must not widen the page */
.hero-pin{position:relative;overflow-x:clip}
.hero-pin > .steel,.hero-pin > .wrap{position:relative;z-index:1}
.hero.is-pinned .hero-pin{position:sticky;top:var(--head-h)}
/* pinned, the eagle is drawn on one layer over the whole screen, above the header */
.eagle-layer{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:25;pointer-events:none;display:block}
.steel{position:relative;height:var(--stage-h);margin-top:-8px;touch-action:pan-y;cursor:grab}
.steel:active{cursor:grabbing}
.steel canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.steel-cap{position:absolute;right:var(--gut);bottom:12px;font-size:14px;font-stretch:112%;color:var(--ink-2);pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.steel-cap.is-on{opacity:1;transform:none}
.steel .mark-metal{display:none}
.steel.no-gl{cursor:default}
.steel.no-gl .mark-metal{display:block;position:absolute;left:0;right:0;top:7%;height:86%;width:100%}
.steel.no-gl .steel-cap{display:none}
/* Create, refine, evolve: in the wordmark's letters, stacked beside the eagle on the content's
   left edge. Each word lights while the metal does it; the hairline fills as it goes */
.ethos{position:absolute;left:var(--ethos-x,var(--gut));top:var(--ethos-y,50%);transform:translateY(-50%);margin:0;padding:0;list-style:none;
  font-weight:430;font-stretch:125%;font-size:13px;letter-spacing:.24em;text-transform:uppercase;line-height:2.6;color:#A2ACA7;pointer-events:none}
.ethos li{transition:color .7s var(--ease)}
.ethos.is-still li{color:var(--ink-2)}
.ethos li.is-on{color:var(--ink)}
.ethos::after{content:"";display:block;width:44px;height:1px;margin-top:12px;background:var(--ink);opacity:.7;
  transform:scaleX(var(--ethos-p,0));transform-origin:left;transition:transform 1.1s var(--ease)}
/* where there is no room beside the eagle (phones), the words run in one line under it */
.steel.ethos-row .ethos{top:auto;bottom:36px;transform:none;display:flex;gap:20px;font-size:11px;letter-spacing:.2em;line-height:1}
.steel.ethos-row .ethos::after{display:none}
/* phones: the words centred under the eagle (the last letter's spacing taken back, so the line
   sits truly in the middle), the hint centred on its own line under them */
@media (max-width:760px){
  .steel.ethos-row .ethos{left:0;right:0;justify-content:center}
  .steel.ethos-row .ethos li:last-child{margin-right:-.2em}
  .steel.ethos-row .steel-cap{left:0;right:0;bottom:10px;font-size:13px;text-align:center}
}
.steel.no-gl .ethos{display:none}
.hero-text{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-top:var(--text-gap)}
.hero-text h1{grid-column:1/9;font-size:clamp(38px,5.2vw,72px);letter-spacing:-.03em;line-height:1.02}
.hero-side{grid-column:9/13;display:grid;gap:18px;justify-items:start;padding-bottom:6px}
.hero-side p{font-size:18px;line-height:1.5;max-width:34ch}
.hero-side .call{font-size:17px;color:var(--ink-2)}
.hero-side .call a{color:var(--ink);white-space:nowrap}
@media (max-width:960px){
  .hero-text{grid-template-columns:1fr}
  .hero-text h1,.hero-side{grid-column:auto}
}
/* phones: while the shards fly home, the work already rises over the emptied hero, so no blank
   screen follows the sequence (only when it is pinned; the hidden text is all it covers) */
@media (max-width:760px){.hero.is-pinned + section{position:relative;z-index:2;margin-top:-30svh;background:var(--mist)}}

/* ── work: the list on the left, a monitor on the right that runs the real site ── */
.work-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.projects{list-style:none;margin:0;padding:0}
.proj{min-height:58vh;padding:8px 0 40px;display:flex;flex-direction:column;justify-content:center}
.proj:first-child{min-height:44vh;justify-content:flex-start}
.proj:last-child{min-height:64vh}
/* --on = the width of the active name; studio.js breaks each name into lines at that width (.ln),
   so the stretch never moves a word to another line */
.proj-name{--on:122%;display:block;font-size:clamp(40px,4.4vw,66px);font-weight:640;letter-spacing:-.03em;line-height:1;
  font-stretch:72%;color:#A2ACA7;text-decoration:none;transition:font-stretch .7s var(--ease),color .5s}
.proj.is-on .proj-name{font-stretch:var(--on);color:var(--ink)}
.proj-name .ln{display:block;white-space:nowrap}
.proj-name:hover{text-decoration:none;color:var(--ink)}
.proj-info{margin-top:18px;display:grid;gap:4px;font-size:16px;max-width:40ch;opacity:.45;transition:opacity .5s}
.proj.is-on .proj-info{opacity:1}
.proj-info .what{color:var(--ink-2)}
.proj-shot{display:none}
.monitor{position:sticky;top:12vh}
.screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(15,26,22,.12),0 30px 60px -30px rgba(15,26,22,.35)}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;
  transform:scale(1.03);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.screen img.is-on{opacity:1;transform:none}
.screen iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;
  opacity:0;transition:opacity .6s;pointer-events:none;background:#fff}
.screen iframe.loaded{opacity:1}
.screen-cap{margin-top:14px;display:flex;justify-content:space-between;gap:16px;font-size:15px;color:var(--ink-2)}
.screen-cap a{color:var(--ink)}
.more{margin-top:clamp(56px,7vw,96px)}
.more h3{margin-bottom:24px}
.concepts{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
.concepts figure{margin:0}
.concepts .shot{display:block;overflow:hidden;border-radius:6px;box-shadow:0 0 0 1px rgba(15,26,22,.1)}
.concepts img{display:block;width:100%}
.concepts figcaption{margin-top:12px;font-size:15px;line-height:1.45}
.concepts figcaption b{display:block;font-size:16px;font-weight:620}
.concepts figcaption span{color:var(--ink-2)}
@media (max-width:860px){
  .work-grid{grid-template-columns:1fr}
  .monitor{display:none}
  .proj,.proj:first-child,.proj:last-child{min-height:0;padding:0 0 56px}
  .proj-shot{display:block;margin-bottom:18px;overflow:hidden;border-radius:6px;box-shadow:0 0 0 1px rgba(15,26,22,.1)}
  .proj-shot img{display:block;width:100%}
  .proj-name{--on:114%;font-size:clamp(34px,9vw,48px);font-stretch:92%;color:var(--ink-2)}
  .proj.is-on .proj-name{color:var(--ink)}
  .proj-info{opacity:1}
  .concepts{grid-template-columns:1fr 1fr}
}

/* ── before / after: two quiet cards on the page; the comparison opens in its own viewer ── */
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.ba{padding-top:clamp(96px,11vw,160px)}
.ba-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.ba-card{display:flex;flex-direction:column;align-items:stretch;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:10px}
.ba-card:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* a still of the comparison: the old site in grey on the left, the new one on the right */
.ba-prev{--pos:50%;position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(15,26,22,.12),0 26px 50px -30px rgba(15,26,22,.4);transition:--pos .9s var(--ease),box-shadow .5s var(--ease)}
.ba-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1.4s var(--ease)}
.ba-prev .ba-prev-b{clip-path:inset(0 calc(100% - var(--pos)) 0 0);filter:grayscale(1) contrast(.92) brightness(1.03)}
.ba-card:hover .ba-prev,.ba-card:focus-visible .ba-prev{--pos:34%;box-shadow:0 0 0 1px rgba(15,26,22,.16),0 34px 60px -30px rgba(15,26,22,.5)}
.ba-card:hover .ba-prev img{transform:scale(1.025)}
.ba-prev .ba-knob{width:42px;height:42px;margin:-21px 0 0 -21px}
.ba-meta{display:grid;grid-template-columns:1fr;gap:4px;margin-top:18px}
.ba-meta b{font-size:clamp(20px,1.6vw,24px);font-weight:620;font-stretch:108%;letter-spacing:-.015em}
.ba-meta .ba-line{grid-column:1;color:var(--ink-2);font-size:16px;max-width:46ch}
.ba-open{justify-self:start;margin-top:12px;font-size:15px;font-weight:600;font-stretch:106%;white-space:nowrap;
  padding:10px 16px;border:1px solid rgba(15,26,22,.25);border-radius:4px;transition:background .25s,color .25s,border-color .25s}
.ba-card:hover .ba-open,.ba-card:focus-visible .ba-open{background:var(--forest);border-color:var(--forest);color:var(--mist)}
@media (max-width:1100px){.ba-cards{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.ba-cards{grid-template-columns:1fr;gap:48px}}
/* phones: the projects, the concepts and the before/after cards are swipe rows. The next card
   peeks in from the right; the one in view opens its name, as on a large screen; under each row a
   counter and a hairline show where you are (the rail is written by the script) */
.rail{display:none}
@media (max-width:860px){
  .projects,.concepts,.ba-cards{display:flex;gap:16px;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .projects::-webkit-scrollbar,.concepts::-webkit-scrollbar,.ba-cards::-webkit-scrollbar{display:none}
  /* the row ends at the page's edge, as it starts */
  .projects::after,.concepts::after,.ba-cards::after{content:"";flex:0 0 1px}
  .projects > .proj,.projects > .proj:first-child,.projects > .proj:last-child{flex:0 0 84%;min-width:0;padding:0;justify-content:flex-start;scroll-snap-align:start}
  .proj-name{font-size:clamp(26px,7vw,38px)}
  .concepts > figure{flex:0 0 62%;min-width:0;scroll-snap-align:start}
  /* on a phone the live work speaks alone: the concepts and the sites in progress stay on large screens */
  .more{display:none}
  .ba-cards > .ba-card{flex:0 0 84%;min-width:0;scroll-snap-align:start}
  .ba-meta b{font-stretch:92%;color:var(--ink-2);transition:font-stretch .7s var(--ease),color .5s}
  .ba-card.is-on .ba-meta b{font-stretch:114%;color:var(--ink)}
  .rail{display:flex;align-items:center;gap:14px;margin-top:20px}
  .rail-n{flex:none;min-width:4.4em;font-weight:430;font-stretch:125%;font-size:12px;letter-spacing:.2em;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .rail-bar{position:relative;flex:1;height:1px;background:var(--line);overflow:hidden}
  .rail-bar i{position:absolute;left:0;top:0;height:1px;background:var(--ink);transition:transform .2s linear}
}

/* the viewer: the whole screen, mist and forest ink like the page */
.ba-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--mist);color:var(--ink);overflow:hidden;opacity:0;transition:opacity .35s var(--ease)}
.ba-viewer[open]{display:flex;flex-direction:column}
.ba-viewer.is-in{opacity:1}
.ba-viewer::backdrop{background:rgba(227,232,229,.6)}
.bav-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:18px var(--gut) 16px}
.bav-title{margin:0 auto 0 0;font-size:clamp(22px,2.2vw,30px);font-weight:620;font-stretch:108%;letter-spacing:-.02em}
.bav-visit{font-size:15px}
.bav-close{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid rgba(15,26,22,.22);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bav-close:hover{background:var(--forest);border-color:var(--forest);color:var(--mist)}
.bav-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.bav-stage{position:relative;flex:1;min-height:0;padding:0 var(--gut)}
.ba-frame{--pos:50%;position:relative;height:100%;overflow:hidden;border-radius:8px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(15,26,22,.12);cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;
  transform:scale(.985);transition:transform .55s var(--ease)}
.ba-viewer.is-in .ba-frame{transform:none}
.ba-frame:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.ba-layer{position:absolute;inset:0;overflow:hidden}
.ba-layer img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;pointer-events:none;will-change:transform}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-seam{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.3);display:grid;place-items:center;pointer-events:none}
.ba-knob svg{width:24px;height:24px;fill:none;stroke:var(--forest);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ba-tag{position:absolute;top:14px;padding:6px 11px;border-radius:4px;background:rgba(15,26,22,.86);color:#fff;font-size:14px;line-height:1.2;pointer-events:none}
.ba-tag--b{left:14px}
.ba-tag--a{right:14px}
/* how far down both pages you are */
.bav-rail{position:absolute;top:16px;bottom:16px;right:12px;width:3px;border-radius:2px;background:rgba(15,26,22,.14);pointer-events:none}
.bav-rail i{position:absolute;left:0;right:0;top:0;height:18%;border-radius:2px;background:var(--forest)}
.bav-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 24px;padding:14px var(--gut) 18px;font-size:15px;color:var(--ink-2)}
.bav-foot .ba-cap-a{text-align:right}
.bav-foot b{color:var(--ink);font-weight:620}
.bav-hint{font-size:14px;color:rgba(15,26,22,.5)}
@media (max-width:860px){
  .bav-bar{gap:12px 16px}
  .bav-title{width:calc(100% - 60px)}
  .bav-close{position:absolute;top:16px;right:var(--gut)}
  .bav-foot{grid-template-columns:1fr;gap:4px;font-size:14px}
  .bav-foot .ba-cap-a{text-align:left}
  .bav-hint{order:3}
}
.ba-tabs{display:flex;gap:6px;padding:4px;background:#D2DAD6;border-radius:6px}
.ba-tabs button{border:0;background:none;padding:10px 16px;border-radius:4px;font:500 16px/1 var(--sans);color:var(--ink-2);cursor:pointer;
  transition:font-stretch .4s var(--ease),background .2s,color .2s}
.ba-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);font-weight:620;font-stretch:110%;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ── the lab: the lights go out, the experiments run big and drift past as you scroll ── */
.lab{background:var(--night);color:#fff;margin-top:clamp(64px,8vw,120px);padding-top:0}
.lab-pin{padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,96px)}
.lab .head p{color:#A3ADA8}
.lab-pin > .wrap{width:100%}
.lab-track{--edge:max(var(--gut),calc((100vw - 1320px) / 2 + var(--gut)));display:flex;gap:clamp(20px,2.4vw,36px);padding:0 var(--edge);scroll-padding:0 var(--edge);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lab-track::-webkit-scrollbar{display:none}
.xp{flex:none;scroll-snap-align:start;text-decoration:none;color:#fff;display:block}
/* the clip sets the width; title and text never widen it, so stretching a title moves nothing */
.xp-title,.xp-desc{width:0;min-width:100%}
.xp-media{display:block;position:relative;height:var(--xh,min(56vh,620px));aspect-ratio:var(--ar,4/5);overflow:hidden;border-radius:8px;background:#0b0b0b}
.xp-media video,.xp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xp-title{display:block;margin-top:20px;font-size:clamp(30px,3.2vw,48px);font-weight:640;letter-spacing:-.03em;line-height:1;
  font-stretch:var(--st,100%);white-space:nowrap}
.xp-desc{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:#A3ADA8;max-width:36ch}
.xp:hover .xp-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.xp:focus-visible{outline:2px solid #fff;outline-offset:6px}
/* with motion allowed, on any screen: the track is pinned and moves sideways while the page scrolls down */
.lab.is-pinned{height:var(--lab-h,300vh)}
.lab.is-pinned .lab-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:0;padding-bottom:0;
  touch-action:pan-y pinch-zoom}
.lab.is-pinned .lab-track{overflow:visible;scroll-snap-type:none;will-change:transform}
.lab.is-pinned .head{margin-bottom:clamp(24px,4vh,48px)}
@media (max-width:860px){
  .xp-media{--xh:auto;width:78vw;height:auto}
  .xp-title{font-stretch:108%}
  /* phones: pinned under the bar, the clips as tall as the screen allows */
  .lab.is-pinned .lab-pin{height:100svh;padding-top:var(--head-h)}
  .lab.is-pinned .head{margin-bottom:20px}
  .lab.is-pinned .head p{font-size:16px}
  .lab.is-pinned .xp-media{width:auto;height:min(calc(78vw * 1.25),calc(100svh - var(--head-h) - 330px))}
  .lab.is-pinned .xp-title{margin-top:16px;font-size:26px;font-stretch:var(--st,100%)}
  .lab.is-pinned .xp-desc{font-size:14px}
}
@media (max-width:860px) and (max-height:720px){.lab.is-pinned .head p{display:none}}

/* ── the grove: the seasons tree (assets/seasons.js), bearing the clients ── */
/* the tree stands on the page's own mist; only the season brings colour */
.grove{--g-ink:var(--ink);--g-dim:var(--ink-2);background:none;color:var(--ink);padding-top:0}
/* heading, tree, ground and quote fit on one screen together, under the header */
.grove-stage{position:relative;height:clamp(560px,calc(100vh - var(--head-h) - 150px),800px);overflow:hidden}
.grove-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
/* three layers in one box: the mist and the circle, the tree, the faces */
.grove-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.grove-ui{position:absolute;inset:0;pointer-events:none}
.grove-ui .wrap{position:relative;height:100%}
.grove-ui a,.grove-ui button{pointer-events:auto}
.grove-top{padding-top:clamp(96px,11vw,160px)}
.grove-top .head{margin-bottom:0;align-items:end}
.grove-top h2{color:var(--g-ink)}
.grove-top .head p{color:var(--g-dim)}
.grove-sound{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 13px;border:1px solid rgba(15,26,22,.22);border-radius:4px;background:none;
  color:var(--g-dim);font:500 14px/1 var(--sans);cursor:pointer;pointer-events:auto}
.grove-sound:hover,.grove-sound.is-on{color:var(--g-ink);border-color:var(--forest)}
/* until it has been pressed once, the sound button breathes: a ring of forest ink leaves it every
   few seconds, so it is noticed without shouting */
.grove-sound:not(.was-used){color:var(--g-ink);border-color:var(--forest);animation:soundCall 2.6s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes soundCall{0%{box-shadow:0 0 0 0 rgba(14,42,31,.32)}70%,100%{box-shadow:0 0 0 12px rgba(14,42,31,0)}}
.grove-sound:not(.was-used) svg{animation:soundIcon 2.6s ease-in-out infinite}
@keyframes soundIcon{0%,100%{transform:none}12%{transform:scale(1.18)}24%{transform:none}}
@media (prefers-reduced-motion:reduce){.grove-sound:not(.was-used),.grove-sound:not(.was-used) svg{animation:none}}
.grove-sound svg{width:16px;height:16px;fill:currentColor}
/* while the sound plays and the tree's own button is out of sight, the switch waits in the corner
   (forest on mist and on night alike), until the sound is turned off */
.sound-dock{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:24;
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(227,232,229,.3);border-radius:4px;
  background:var(--forest);color:var(--mist);font:500 14px/1 var(--sans);cursor:pointer;box-shadow:0 8px 24px rgba(14,42,31,.22);
  visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.sound-dock.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
.sound-dock:hover{border-color:rgba(227,232,229,.7)}
.sound-dock:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.sound-dock svg{width:16px;height:16px;fill:currentColor}
@media (prefers-reduced-motion:reduce){.sound-dock,.sound-dock.is-on{transition:none}}
.sound-is-on .foot{padding-bottom:max(100px,calc(84px + env(safe-area-inset-bottom)))}
/* who is speaking: their photo, larger, beside the name */
.grove-who{margin-top:26px;display:flex;align-items:center;gap:18px}
.g-face{width:72px;height:72px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(15,26,22,.12)}
.g-txt{display:block;min-width:0}
.grove-who,.grove-quote{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.grove-who.is-on,.grove-quote.is-on{opacity:1;transform:none}
.g-name{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.6vw,24px);line-height:1.15;color:var(--g-ink)}
.g-role{display:block;margin-top:6px;font-size:15px;color:#2F6B55}
.g-link{display:inline-block;margin-top:4px;font-size:15px;color:var(--g-dim)}
.grove-side{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);width:min(27vw,380px)}
/* as tall as the longest quote, each quote set at its foot: the name and the buttons never move */
.grove-quote{margin:0;display:flex;flex-direction:column;justify-content:flex-end}
.grove-quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--g-ink)}
.grove-quote p{text-indent:-.4em}
.grove-pick{display:grid;grid-template-columns:repeat(3,max-content);justify-items:start;gap:6px 18px;margin-top:26px}
.grove-pick button{padding:6px 0;border:0;background:none;color:var(--g-dim);font:500 15px/1.2 var(--sans);cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;text-decoration-thickness:1.5px;transition:color .2s,text-decoration-color .2s}
.grove-pick button:hover{color:var(--g-ink)}
.grove-pick button[aria-pressed="true"]{color:var(--g-ink);text-decoration-color:var(--forest)}
/* under the tree: the sound and how to play with it, in one quiet line centred on the trunk */
.grove-foot{position:absolute;bottom:28px;left:var(--tree-x,50%);transform:translateX(-50%);display:flex;align-items:center;gap:20px;white-space:nowrap}
.grove-hint{margin:0;font-size:14px;color:rgba(15,26,22,.55)}
.grove-hint .t{display:none}
.grove :focus-visible{outline-color:var(--g-ink)}
@media (max-width:860px){
  .grove-top{padding-top:72px}
  .grove-stage{height:auto;display:flex;flex-direction:column;padding:0 0 56px}
  .grove-ui,.grove-ui .wrap,.grove-side{display:contents}
  .grove-canvas{position:relative;order:3;height:50vh;min-height:360px;max-height:480px;margin-top:8px}
  /* the sound and the hint stand on the ground under the trunk: they belong to the tree */
  .grove-foot{order:4;position:relative;left:auto;bottom:auto;z-index:1;transform:none;margin-top:-44px;padding:0 var(--gut);
    flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;white-space:normal}
  .grove-who{order:5;padding:0 var(--gut);margin-top:30px}
  .grove-quote{order:6;padding:0 var(--gut);margin-top:16px;justify-content:flex-start}
  .grove-pick{order:7;padding:0 var(--gut)}
  .grove-hint .m{display:none}.grove-hint .t{display:inline}
}

/* ── prices: the dodecahedron holds still on the left while the three pass on the right; the one
      in the middle of the screen is the one it shows, and its name opens up, like the projects ── */
.price-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.dodeca{position:sticky;top:calc(var(--head-h) + 4vh);height:min(76vh,640px)}
.dodeca canvas{position:absolute;inset:0 0 40px;width:100%;height:calc(100% - 40px);display:block;cursor:grab;touch-action:pan-y}
.dodeca canvas:active{cursor:grabbing}
/* its shadow on the mist */
.dodeca::before{content:"";position:absolute;left:18%;right:18%;bottom:48px;height:28px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(15,26,22,.2),rgba(15,26,22,0));filter:blur(2px)}
.dodeca-cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-weight:430;font-stretch:125%;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-2);opacity:0;transform:translateY(4px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.dodeca-cap.is-on{opacity:1;transform:none}
.dodeca.no-gl{display:none}
.prices{border-top:2px solid var(--ink)}
.price{min-height:min(52vh,460px);padding:34px 0 40px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.price-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.price h3{font-size:clamp(28px,3vw,44px);font-weight:640;letter-spacing:-.03em;line-height:1.02;font-stretch:78%;color:#A2ACA7;
  transition:font-stretch .7s var(--ease),color .5s}
.price.is-on h3{font-stretch:118%;color:var(--ink)}
.price-desc{margin-top:16px;max-width:48ch;color:var(--ink-2);transition:color .5s}
.price .ask{display:inline-block;align-self:flex-start;margin-top:14px;font-size:16px}
.amt{text-align:right;font-size:clamp(24px,2.2vw,32px);font-weight:620;font-stretch:112%;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.amt small{display:block;font-size:15px;font-weight:400;font-stretch:100%;letter-spacing:0;color:var(--ink-2);margin-top:4px}
.price-note{margin-top:28px;display:grid;gap:8px;font-size:17px}
.price-note p:last-child{color:var(--ink-2);max-width:60ch}
@media (max-width:860px){
  .price-grid{grid-template-columns:1fr;gap:0}
  /* the solid stays under the bar while the prices pass beneath it, and changes with each */
  .dodeca{top:var(--head-h);z-index:2;height:max(220px,32svh);margin:0 calc(-1 * var(--gut));background:var(--mist)}
  .dodeca::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--mist),rgba(227,232,229,0));pointer-events:none}
  .price{min-height:44svh;padding:28px 0}
  .price h3{font-stretch:92%;color:var(--ink-2)}
  .price.is-on h3{font-stretch:114%;color:var(--ink)}
  .price-top{flex-direction:column;align-items:flex-start;gap:8px}
  .amt{text-align:left}
  .amt small{display:inline;margin:0 6px 0 0}
}

/* ── getting found ── */
.find{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.find-text h3{margin-top:36px}
.find-text p{margin-top:10px;max-width:50ch}
.find-text > p:first-child{margin-top:0}
.kw{margin:0;background:var(--paper);border-radius:8px;padding:clamp(20px,3vw,36px)}
.kw table{width:100%;border-collapse:collapse;font-size:17px;font-variant-numeric:lining-nums tabular-nums}
.kw th{text-align:left;font-weight:620;font-size:15px;color:var(--ink-2);padding:0 0 12px;border-bottom:1px solid var(--line)}
.kw td{padding:13px 0;border-bottom:1px solid #E7ECE9}
.kw tr:last-child td{border-bottom:0}
.kw .n{text-align:right;padding-left:16px}
.kw td.n span{color:var(--ink-2)}
.kw figcaption{margin-top:18px;font-size:15px;color:var(--ink-2)}
@media (max-width:860px){.find{grid-template-columns:1fr;gap:40px}.kw table{font-size:15px}}
@media (max-width:560px){.btn{padding:14px 24px;line-height:1.25;text-align:left}}

/* ── about: the drawing becomes the mark. The stage holds still on the left, like the
      dodecahedron by the prices, while the three steps pass on the right; the one in the middle
      of the screen is the one it shows, and its name opens up ── */
.story{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
.story-stage{position:sticky;top:calc(var(--head-h) + 5vh);margin:0}
.story-svg{display:block;width:100%;height:auto;max-height:calc(100vh - var(--head-h) - 14vh);overflow:visible}
.st-line{fill:none;stroke:var(--forest);stroke-width:2.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.st-facet{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.st-guide,.st-pencil,.st-hatch{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;visibility:hidden}
.st-guide{stroke:#8B9590;stroke-width:1.5;opacity:.6}
.st-pencil{stroke:#38423E;stroke-width:2.2;opacity:.62}
.st-pencil.is-b{stroke-width:1.5;opacity:.4}
.st-hatch{stroke:#4C5652;stroke-width:1.5;opacity:.34}
.story-cap{margin-top:6px;text-align:center;font-weight:430;font-stretch:125%;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);min-height:1.2em;opacity:0;transform:translateY(4px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.story-cap.is-on{opacity:1;transform:none}
.story-steps{border-top:2px solid var(--ink)}
.step{min-height:min(64vh,560px);padding:36px 0 44px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.step:last-child{border-bottom:0}
.step h3{font-size:clamp(26px,2.7vw,40px);font-weight:640;letter-spacing:-.03em;line-height:1.02;font-stretch:78%;color:#A2ACA7;
  transition:font-stretch .7s var(--ease),color .5s}
.step.is-on h3{font-stretch:118%;color:var(--ink)}
.step p{margin-top:16px;max-width:44ch;color:var(--ink-2)}
/* who: the portrait beside the words */
.me{display:flex;gap:24px;align-items:flex-start;margin-top:22px}
.me figure{margin:0;flex:none;width:clamp(112px,10vw,150px)}
.me img{display:block;width:100%;height:auto;border-radius:6px}
.me figcaption{margin-top:8px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.me p{margin-top:0}
/* the whole way: one ballpoint line through the five stops, drawn as you read down it */
.way{list-style:none;margin:28px 0 0;padding:0 0 0 40px;position:relative;display:grid;gap:16px}
.way-line{position:absolute;left:0;top:0;width:28px;height:100%;overflow:visible;pointer-events:none}
.way-line .way-path{fill:none;stroke:var(--forest);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.way-line .way-head{fill:var(--forest);opacity:0;transition:opacity .3s}
.way-line circle{fill:var(--mist);stroke:var(--forest);stroke-width:1.5;transition:fill .3s}
.way-line circle.is-on{fill:var(--forest)}
.way li{display:grid;gap:2px;color:var(--ink-2)}
.way b{font-weight:620;font-stretch:112%;color:#8E9994;transition:color .5s}
.way li.is-on b{color:var(--ink)}
.way span{font-size:16px;line-height:1.45}
/* signed: his own signature from the drawing, written out once it is in view */
.sign{display:flex;align-items:flex-end;gap:22px;margin-top:40px}
.sig{display:block;flex:none;width:96px;height:auto;
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.8s cubic-bezier(.45,.05,.35,1),mask-position 1.8s cubic-bezier(.45,.05,.35,1)}
.sign.is-on .sig{-webkit-mask-position:0 0;mask-position:0 0}
.sign p{margin:0 0 6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.sig{-webkit-mask-image:none;mask-image:none}}
@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:0}
  /* the drawing stays under the bar while the steps pass beneath it, and turns into the mark as you read */
  .story-stage{top:var(--head-h);z-index:2;margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 2px;background:var(--mist)}
  .story-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--mist),rgba(227,232,229,0));pointer-events:none}
  .story-svg{height:min(34svh,calc((100vw - 2 * var(--gut)) * .818));max-height:none}
  .st-guide,.st-hatch{stroke-width:2.4}
  .st-pencil{stroke-width:3.4}
  .st-pencil.is-b{stroke-width:2.4}
  .step{min-height:0;padding:28px 0}
  .step h3{font-stretch:92%;color:var(--ink-2)}
  .step.is-on h3{font-stretch:112%;color:var(--ink)}
  .me figure{width:104px}
}

/* ── contact ── */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:40px 56px;align-items:start}
.contact-text h2{font-size:clamp(44px,6vw,88px);letter-spacing:-.035em;line-height:.98}
.contact-text p{margin-top:24px;max-width:40ch;font-size:19px}
.direct{margin:36px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 28px;font-size:17px}
.direct dt{color:var(--ink-2)}
.direct dd{margin:0}
.form{background:var(--paper);border-radius:8px;padding:clamp(20px,3.4vw,44px)}
.form fieldset{border:0;margin:0 0 28px;padding:0}
.form legend,.form label.l{display:block;font-size:16px;font-weight:620;margin-bottom:8px;padding:0}
.opt{font-weight:400;color:var(--ink-2)}
.topics{display:flex;flex-wrap:wrap;gap:12px 28px}
.topics label{display:flex;align-items:center;gap:9px;font-size:16px;cursor:pointer}
.topics input{width:18px;height:18px;margin:0;accent-color:var(--forest)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field{margin-bottom:22px}
.input{display:block;width:100%;padding:12px 14px;border:1px solid #ABB6B0;border-radius:4px;background:#fff;color:var(--ink);font:400 17px/1.4 var(--sans)}
.input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.input::placeholder{color:#7D8782}
textarea.input{resize:vertical;min-height:140px}
.hp{position:absolute;left:-9999px}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.send p{font-size:15px;color:var(--ink-2);max-width:32ch}
.status{margin-top:18px;font-size:16px}
.status:empty{display:none}
.err{margin:6px 0 0;font-size:14px;color:#9B2C1F}
.err:empty{display:none}
.field.is-bad .input{border-color:#9B2C1F}
.form.is-sending .btn{opacity:.7;cursor:progress}
/* after sending: a thank-you in the form's place (with JS), or at #contact-sent / #contact-error
   when the form was posted without JS and the server sent the page back there */
.sent,.fail{display:none}
.sent{background:var(--paper);border-radius:8px;padding:clamp(24px,3.4vw,44px)}
.sent h3{font-size:clamp(28px,3vw,40px);font-weight:640;letter-spacing:-.03em;font-stretch:112%}
.sent p{margin-top:12px;color:var(--ink-2);max-width:40ch}
.fail{padding:16px 0;color:#9B2C1F}
.contact.is-sent .form{display:none}
.contact.is-sent .sent,.sent:target,.fail:target{display:block}
.sent:focus{outline:none}
@media (min-width:861px){.sent,.fail{grid-column:2}}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

.foot{margin-top:clamp(96px,10vw,136px);border-top:1px solid var(--line);padding-top:28px;padding-bottom:44px;
  display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px;color:var(--ink-2)}
.foot a{color:var(--ink)}
.foot .end{margin-left:auto}
@media (max-width:560px){.foot .end{margin-left:0;width:100%}}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}