/* Ferrow Plumbing Co. (an illustrative business by Matt's Websites). Hand written; prefix fw-.
   Asset URLs are absolute (/examples/ferrow/...), as build.mjs moves stylesheets to /static/. */

@font-face{font-family:"Inter";src:url(/examples/ferrow/fonts/inter-400-opsz32.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/examples/ferrow/fonts/inter-tight-400-500.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
/* the clients wall only: the same two families, light to black, cut down to the wall's letters */
@font-face{font-family:"Inter Wall";src:url(/examples/ferrow/fonts/inter-wall.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight Wall";src:url(/examples/ferrow/fonts/inter-tight-wall.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --ground:#e9e4df;--grid:#f3efeb;--ink:#19170e;--dark:#35311f;--dark-strong:#2f2c1c;--light:#f3efeb;
  --olive:#9b926a;--mark:#b1a781;--rule:#d1cac3;--pill:#000c;
  --ease:cubic-bezier(.85,.09,.15,.91);--ease-label:cubic-bezier(0,0,.15,.91);--ease-page:cubic-bezier(.78,0,.22,1);
  --ease-reveal:cubic-bezier(0,.55,.45,1);--ease-step:cubic-bezier(.33,1,.68,1);--ease-circ:cubic-bezier(.85,0,.15,1);
  --gutter:20px;--gap-c-sm:4px;--gap-c-md:8px;--gap-c-lg:12px;--gap-c-xl:18px;
  --gap-k-sm:16px;--gap-k-md:20px;--gap-k-lg:24px;
  --gap-s-sm:32px;--gap-s-md:48px;--gap-s-lg:80px;--gap-s-xl:100px;
  --pad-sm:24px;--pad-md:48px;--pad-lg:80px;--pad-xl:160px;
  --bar:28px;--nav-h:48px;--nav-m:24px;
  --fs-xl:3.5rem;--fs-l:2.5rem;--fs-lead:2.25rem;--fs-body:1.5rem;--fs-quote:1.5rem;--fs-small:1rem;--fs-cap:.75rem;--fs-pre:3rem;
  --svh:100vh;--lvh:100vh;
}
@supports (height:100svh){:root{--svh:100svh;--lvh:100lvh}}
/* the Lead size stays 36 px down to 360 px windows; below that it drops so a paragraph keeps 4 or 5 words a line */
@media (max-width:359px){:root{--fs-lead:1.75rem}}
@media (min-width:480px){:root{--fs-xl:4.5rem;--fs-l:4rem;--fs-pre:4.5rem}}
@media (min-width:768px){:root{--gutter:48px}}
@media (min-width:992px){:root{--fs-xl:8rem;--fs-l:5rem;--fs-lead:3rem;--fs-body:1.75rem;--fs-quote:2.5rem;--fs-small:1.25rem;--fs-cap:.875rem;--fs-pre:8rem;
  --gap-s-sm:40px;--gap-s-md:56px;--gap-s-lg:88px;--gap-s-xl:128px;--pad-sm:40px;--pad-md:80px;--pad-lg:96px;--pad-xl:200px}}
@media (min-width:1920px){:root{--fs-xl:12rem;--fs-l:6rem;--fs-lead:3.5rem;--fs-body:2rem;--fs-quote:3rem;--fs-small:1.5rem;--fs-cap:1rem;--fs-pre:12rem;
  --gap-k-md:24px;--gap-k-lg:32px;--gap-s-sm:48px;--gap-s-md:64px;--gap-s-lg:96px;--gap-s-xl:192px;--pad-sm:48px;--pad-md:96px;--pad-lg:128px;--pad-xl:256px}}

/* Section themes (the reference's light and dark token sets) */
.fw-dark,.fw-fg-light{--bg:var(--dark);--bg-strong:var(--ink);--tip-text:var(--dark);--tip-bg:#ffffff80;--t-strong:#fff;--t:#ffffffb3;--t-brand:var(--olive);--t-subtle:#fff9;--border:#ffffff4d;--border-subtle:#ffffff1a}
.fw-light,.fw-fg-dark,.fw-plight{--bg:var(--light);--bg-strong:#fff;--tip-text:#fff;--tip-bg:#00000080;--t-strong:var(--dark);--t:#0009;--t-brand:var(--olive);--t-subtle:#0009;--border:#0000004d;--border-subtle:#0000001a}
/* the profile's dark sections: olive running text, pale strong text */
.fw-pdark{--bg:var(--dark);--bg-strong:var(--dark-strong);--t:var(--olive);--t-strong:#fff9;--t-subtle:#fff9;--border-subtle:#ffffff1a}

/* programmatic and anchor scrolls jump (the shared base glides them); our own glides run in site.js */
html{background:var(--ground);scroll-padding-top:0;scroll-behavior:auto}
body.fw{margin:0;font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-weight:400;font-variation-settings:"opsz" 32;letter-spacing:-.01em;color:var(--t,#0009);background:var(--bg,var(--ground));-webkit-font-smoothing:antialiased;text-rendering:geometricprecision}
/* resets carry no weight (:where), so every component rule below wins over them */
:where(.fw) *,:where(.fw) *::before,:where(.fw) *::after{box-sizing:border-box}
:where(.fw) :where(h1,h2,h3,p,dl,dd,ul,figure,fieldset,legend,blockquote){margin:0;padding:0}
:where(.fw) ul{list-style:none}
:where(.fw) a{color:inherit}
:where(.fw) img{display:block;max-width:none}
:where(.fw) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;letter-spacing:inherit;cursor:pointer}
:where(.fw) :focus-visible{outline:2px solid currentColor;outline-offset:4px}
.fw-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fw .skip-link{font:500 14px/1 "Inter Tight",sans-serif;letter-spacing:.04em;text-transform:uppercase;border-radius:8px;z-index:1200}
.fw-container{width:100%;max-width:calc(1824px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}

/* ---------- the illustrative notice bar (house contract) */
.fw-bar{position:relative;z-index:120;height:var(--bar);display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#ffffffb3;
  font:500 11px/1 "Inter Tight",sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-variation-settings:normal}
.fw-bar p{margin:0}
.fw-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;padding:8px 0;margin:-8px 0}
.fw-bar a:focus-visible{outline-offset:2px}
@media (max-width:389px){.fw-bar{font-size:9.5px;letter-spacing:.02em;gap:8px}}
.fw-home .fw-bar{position:fixed;top:0;left:0;right:0}

/* ---------- the nav pill (signature 3) */
.fw-nav{--y:0px;position:fixed;top:calc(var(--bar) + var(--nav-m));left:50%;z-index:100;transform:translate(-50%,var(--y));border-radius:8px;padding:4px;display:flex;
  font-family:"Inter Tight",sans-serif;font-variation-settings:normal;letter-spacing:.04em;
  --t-strong:#fff;--t:#ffffffb3;--border-subtle:#ffffff1a}
.fw-nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pill);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:none}
.fw-nav__menu{display:flex;align-items:center;gap:4px}
.fw-nav__logo{display:flex;align-items:center;justify-content:center;box-sizing:content-box!important;width:24px;height:24px;padding:8px;color:var(--mark);transition:color .3s ease-in-out;position:relative;border-radius:4px}
/* the logo is 40 px square in the 48 px pill, as the reference; its tap area reaches 44 px, as the links' do */
.fw-nav__logo::before{content:"";position:absolute;inset:-2px}
.fw-nav__logo svg{width:18px;height:16px;display:block}
.fw-nav__logo svg *{stroke:currentColor}
.fw-nav__logo svg rect{fill:currentColor;stroke:none}
.fw-nav__logo.is-hover,.fw-nav__logo:focus-visible{color:#fff}
.fw-nav .fw-nav__link{min-height:0;min-width:0}
.fw-nav__link{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:11.5px 8px;font:500 12px/17px "Inter Tight",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--t);text-decoration:none;border-radius:4px;transition:color .15s ease-in-out;white-space:nowrap}
.fw-nav__link::before{content:"";position:absolute;inset:-2px;z-index:1}
@media (min-width:375px){.fw-nav__link{font-size:14px}}
.fw-nav__link.is-active,.fw-nav__link.is-hover,.fw-nav__link[aria-expanded=true]{color:var(--t-strong)}
.fw-nav__hover{position:absolute;top:4px;bottom:4px;left:0;width:40px;z-index:-1;border-radius:4px;background:#ffffff1a;opacity:0;pointer-events:none;
  transition:opacity .3s ease-in-out,transform .3s var(--ease),width .3s var(--ease)}
.fw-nav__hover.is-on{opacity:1}
/* the projects list: opens by height and 20 px of travel in 0.37 s (circ in out), closes in 0.28 s, as measured */
.fw-nav__submenu{position:absolute;top:100%;left:0;width:100%;margin-top:4px;border-radius:8px;overflow:hidden;z-index:-100;display:grid;visibility:hidden;height:0;transform:translateY(-20px);
  transition:height .28s var(--ease-circ),transform .28s var(--ease-circ),visibility 0s linear .28s}
.fw-nav__submenu::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pill);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:none}
.fw-nav__submenu[data-open]{visibility:visible;transform:none;transition:height .37s var(--ease-circ),transform .37s var(--ease-circ),visibility 0s}
.fw-nav__submenu li+li{border-top:1px solid #ffffff1a;margin-top:-1px}
.fw-nav__sublink{display:block;padding:8px 16px;font:400 12px/1.2 "Inter Tight",sans-serif;letter-spacing:-.01em;color:#ffffffb3;text-decoration:none;transition:background-color .15s ease-in-out,color .3s ease-in-out}
@media (min-width:992px){.fw-nav__sublink{font-size:14px}}
@media (min-width:1920px){.fw-nav__sublink{font-size:16px}}
@media (hover:hover){.fw-nav__sublink:hover{color:#fff;background-color:#ffffff1a}}
.fw-nav__sublink:focus-visible{color:#fff;background-color:#ffffff1a;outline:2px solid #fff;outline-offset:-4px}
.fw-nav__sublink[aria-current=page]{color:#fff}
@media (pointer:coarse),(max-width:991px){.fw-nav__sublink{min-height:44px;display:flex;align-items:center}}
/* the shared menu contract sizes the open list to the room left in the window; it scrolls inside it */
.fw-nav__submenu[data-open] .fw-nav__list{max-height:var(--fw-room,70vh);overflow-y:auto;overscroll-behavior:contain}
.fw-nav__list{display:block}
/* without JavaScript the list opens on hover and keyboard focus */
html:not(.fw-js) .fw-nav__projects:hover .fw-nav__submenu,html:not(.fw-js) .fw-nav__projects:focus-within .fw-nav__submenu{visibility:visible;height:auto;transform:none}
html:not(.fw-js) .fw-nav__submenu .fw-nav__list{max-height:calc(100vh - 120px);overflow-y:auto}
/* the drop in after the home intro: 0.42 s, y on a quick ease in, opacity on the css ease */
.fw-nav-enter .fw-nav{opacity:0;visibility:hidden;--y:-100px}
.fw-nav-in .fw-nav{transition:opacity .42s ease,--y .42s cubic-bezier(.11,0,.5,0)}
@property --y{syntax:"<length>";inherits:false;initial-value:0px}

/* ---------- the custom cursor (fine pointers only; signature 3) */
.fw-cursor{display:none}
@media (pointer:fine){
  .fw-js .fw-cursor{display:flex;position:fixed;top:0;left:0;z-index:1100;pointer-events:none;width:17px;height:17px;border-radius:12px;align-items:center;overflow:hidden;
    background:var(--c-bg,#00000080);color:var(--c-fg,#fff);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);will-change:transform;opacity:0;
    font:400 12px/1.3 "Inter Tight",sans-serif;letter-spacing:-.01em;font-variation-settings:normal;
    transition:width .15s ease-in-out,height .15s ease-in-out,border-radius .15s ease-in-out,background-color .15s ease-in-out,color .15s ease-in-out,opacity .15s ease-in-out}
  .fw-js .fw-cursor.is-on{opacity:1}
  .fw-js .fw-cursor.is-link{width:24px;height:24px}
  .fw-js .fw-cursor.is-card{width:130px;height:40px;border-radius:4px}
  .fw-js .fw-cursor.is-dark{--c-bg:#ffffff80;--c-fg:var(--dark)}
  .fw-js .fw-cursor.is-arrow{width:77px;height:77px;border-radius:50%;--c-bg:#fff3;--c-fg:#fff}
}
.fw-cursor__pill{display:flex;align-items:center;justify-content:space-between;gap:8px;width:130px;padding:0 12px;flex:none;opacity:0;transition:opacity .15s ease-in-out;white-space:nowrap}
.fw-cursor.is-card .fw-cursor__pill{opacity:1}
.fw-cursor__pill svg{width:16px;height:16px;flex:none}
.fw-cursor__arrow{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .15s ease-in-out}
.fw-cursor__arrow svg{width:24px;height:24px}
.fw-cursor.is-arrow .fw-cursor__arrow{opacity:1}
.fw-cursor.is-arrow-left .fw-cursor__arrow svg{transform:scaleX(-1)}
/* a text only label (the Next band's "Go to Next Project"), sized to its words */
@media (pointer:fine){
  .fw-js .fw-cursor.is-text{width:var(--cw,150px);height:var(--ch,37px);border-radius:4px}
  .fw-js .fw-cursor.is-spin{width:20px;height:20px;border-radius:50%;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;color:#0009}
  .fw-js .fw-cursor.is-spin.is-dark{color:#ffffffb3}
}
.fw-cursor.is-text .fw-cursor__pill{opacity:1;width:max-content;padding:0 10px;font-size:12px;line-height:1.2}
@media (min-width:992px){.fw-cursor.is-text .fw-cursor__pill{font-size:14px}}
@media (min-width:1920px){.fw-cursor.is-text .fw-cursor__pill{font-size:16px}}
.fw-cursor.is-text .fw-cursor__pill svg{display:none}
/* while the next page loads after a transition: a small spinning ring of our own */
.fw-cursor.is-spin .fw-cursor__pill,.fw-cursor.is-spin .fw-cursor__arrow{opacity:0}
.fw-cursor.is-spin::after{content:"";position:absolute;inset:2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:fw-spin 1s var(--ease-page) -.5s infinite}
@keyframes fw-spin{to{transform:rotate(360deg)}}

/* ---------- home: the tile grid canvas (signature 1), a window tall and set down 28 px under the notice bar: the
   plane, the name and the nav pill keep the reference's relations at the same window size, all 28 px lower (the
   plane's bottom 28 px fall below the window) */
html.fw-home,html.fw-home body{height:100%;overflow:hidden;overscroll-behavior:none}
.fw-home body{background:var(--ground)}
.fw-canvas{position:fixed;top:var(--bar);left:0;width:100%;height:100%;z-index:0;overflow:hidden;background-color:var(--ground);isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  transition:background-color 1.5s var(--ease)}
.fw-canvas.is-dragging{cursor:grabbing}
.fw-canvas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/examples/ferrow/tile.svg) 50%;transition:opacity 1s ease-in-out 1s}
.fw-plane{position:absolute;left:50%;top:50%;width:4450px;height:2870px;margin:-1435px 0 0 -2225px;transform-origin:50% 50%}
@media (max-width:1199px){.fw-plane{width:3400px;height:2470px;margin:-1235px 0 0 -1700px}}
.fw-wrap,.fw-dup{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none}
@media (max-width:1199px){.fw-wrap,.fw-dup{left:var(--xp);top:var(--yp)}}
.fw-wrap{z-index:3}
.fw-wrap--under{z-index:1}
.fw-wrap--under:has(:focus-visible){z-index:4}
.fw-card{position:relative;display:block;width:100%;height:100%;pointer-events:auto;text-decoration:none;color:inherit;will-change:transform;transition:opacity .5s ease-in-out;-webkit-user-drag:none}
.fw-card::before{content:"";position:absolute;inset:0;z-index:1;background:var(--ground);opacity:0;pointer-events:none;transition:all .5s ease-in-out}
.fw-card.is-inactive::before{opacity:.4;transition-duration:.3s}
.fw-card.is-deselected{opacity:0}
.fw-card.is-deselected::before{opacity:.4;background-color:#6a6243;transition-duration:.5s}
.fw-card:focus-visible{outline:2px solid var(--dark);outline-offset:4px}
.fw-card__inner{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#d8d1c9}
.fw-card__image{position:absolute;inset:0;display:block;will-change:transform}
.fw-card__image img,.fw-card__image picture{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.fw-card__image picture img{position:static;width:100%;height:100%;transform:none}
/* with script, a card photo loads only once the card comes within 0.6 of a window of the view (site.js);
   without it the browser's own lazy loading decides */
.fw-js .fw-card__image img:not(.is-near){display:none}
.fw-card__cap{position:absolute;left:0;top:100%;padding-top:var(--gap-c-sm);font:400 12px/1.3 "Inter Tight",sans-serif;letter-spacing:-.01em;color:var(--dark);white-space:nowrap;transition:opacity .3s ease-in-out;font-variation-settings:normal}
@media (pointer:fine){.fw-card__cap{opacity:0}.fw-card:focus-visible .fw-card__cap{opacity:1}}
/* a caption whose card has gone up under the notice bar and the nav pill fades, so no bare street name floats
   between them (site.js sets it from the plane's own numbers) */
.fw-wrap.is-tucked .fw-card__cap{opacity:0}
.fw-dup{z-index:3;opacity:0;transition:opacity .3s ease-in-out}
.fw-dup.is-on{opacity:1}
.fw-dup__in{position:relative;display:block;width:100%;height:100%;overflow:hidden;will-change:transform}
/* the huge two line name (signature 2) */
.fw-name{position:absolute;inset:0;z-index:2;display:grid;align-content:center;justify-items:center;pointer-events:none;color:#fff;font-weight:400;font-size:3rem;line-height:1;letter-spacing:-.01em;font-kerning:none;text-align:center;white-space:pre}
@media (min-width:360px){.fw-name{font-size:3.5rem}}
@media (min-width:480px){.fw-name{font-size:4.5rem}}
@media (min-width:992px){.fw-name{font-size:8rem}}
@media (min-width:1920px){.fw-name{font-size:12rem}}
.fw-name__outer{display:grid;width:100%;margin:0 0 -.1em;line-height:110%;overflow:hidden}
.fw-name__line{grid-area:1/1;display:block}
.fw-name__line--intro{visibility:hidden}
.fw-char{display:inline-block;margin:0 -.005em;will-change:transform}
/* the two titles that go back to plain text once their letters land keep the plain text's own spacing while split, so
   nothing shifts when they do (with the margins the project title moved 9 px at the end of its roll) */
.fw-hero__title .fw-char,.fw-clients__title .fw-char{margin:0}
/* the first visit intro: dark ground, grid at 10%, progress line, the statement (safety timers end it with no script) */
.fw-indicator{position:fixed;top:var(--bar);left:0;width:100%;height:3px;z-index:5;pointer-events:none;opacity:0;transition:opacity .2s}
.fw-indicator span{display:block;height:3px;width:0;background:var(--grid)}
.fw-intro .fw-canvas,.fw-canvas.is-intro{background-color:var(--ink);cursor:default}
.fw-intro .fw-canvas::before,.fw-canvas.is-intro::before{opacity:.1}
.fw-intro .fw-plane,.fw-canvas.is-intro .fw-plane{opacity:0;transform:scale(1.2);z-index:3}
.fw-intro .fw-name__line,.fw-hold .fw-name__line{visibility:hidden}
html.fw-hold .fw-plane{opacity:0;animation:fw-safe-o 0s 9s forwards}
html.fw-intro .fw-canvas{animation:fw-safe-bg 0s 9s forwards}
html.fw-intro .fw-canvas::before{animation:fw-safe-o 0s 9s forwards}
html.fw-intro .fw-plane{animation:fw-safe-plane 0s 9s forwards}
html.fw-intro .fw-name__line:not(.fw-name__line--intro),html.fw-hold .fw-name__line:not(.fw-name__line--intro){animation:fw-safe-vis 0s 9s forwards}
html.fw-intro .fw-nav{animation:fw-safe-nav 0s 9s forwards}
@keyframes fw-safe-bg{to{background-color:var(--ground)}}
@keyframes fw-safe-o{to{opacity:1}}
@keyframes fw-safe-plane{to{opacity:1;transform:none}}
@keyframes fw-safe-vis{to{visibility:visible}}
@keyframes fw-safe-nav{to{opacity:1;visibility:visible;--y:0px}}
.fw-canvas.is-playing .fw-name__line{visibility:visible}
.fw-canvas.is-playing .fw-indicator{opacity:1}
.fw-plane.is-entering{z-index:3}
.fw-plane.is-entering-slow{transition:opacity 1.5s var(--ease),transform 1.5s var(--ease)}
.fw-plane.is-entering-fast{transition:opacity .5s var(--ease)}
/* the home's quiet disclosure (the inner pages carry it in the footer): a small dark pill of the nav's family,
   one solid plate at all times */
.fw-note{position:fixed;left:var(--gutter);bottom:20px;z-index:90;width:max-content;max-width:calc(100% - 2 * var(--gutter));padding:6px 9px;border-radius:8px;text-wrap:balance;
  font:400 11px/1.3 "Inter Tight",sans-serif;letter-spacing:-.01em;color:#ffffffb3;font-variation-settings:normal;pointer-events:none;isolation:isolate}
.fw-note::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pill);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
@media (min-width:768px){.fw-note{left:24px;bottom:24px;max-width:calc(100% - 48px);padding:7px 10px;font-size:12px}}
@media (max-width:369px){.fw-note span{display:block}}
.fw-intro .fw-note{opacity:0;animation:fw-safe-o 0s 9s forwards}
.fw-note.is-in{opacity:1;transition:opacity .5s ease-in-out}
/* the image grow, slide up and thumbnail grow page transitions (played before a page load) */
/* under the nav pill and the notice bar, as the reference keeps its nav over the moving photo */
.fw-shift{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}
.fw-shift__box{position:absolute;overflow:hidden}
.fw-shift__box img{position:absolute;object-fit:cover;max-width:none}
.fw-shift__hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease-in-out}
.fw-shift__veil{position:absolute;inset:0;background:#000000b3;opacity:0}
/* the notice bar's ground, faded in over the top 28 px when the page's own bar has scrolled away, so the moving photo
   ends exactly where the next page's first screen puts it (under its bar) */
.fw-shift__bar{position:absolute;left:0;right:0;top:0;height:var(--bar);background:var(--ink);opacity:0}

/* ---------- inner pages */
.fw-page{position:relative;z-index:1}
.fw-wrapper{position:relative;z-index:0}
/* the page fades in whole (the sticky Next band too), 0.5 s ease in out */
.fw-js .fw-wrapper,.fw-js .fw-contact{animation:fw-page-in .5s ease-in-out both}
.fw-arrived .fw-wrapper,.fw-arrived .fw-contact{animation:none}
@keyframes fw-page-in{from{opacity:0}to{opacity:1}}
.fw-leaving .fw-wrapper,.fw-leaving .fw-contact,.fw-leaving .fw-canvas,.fw-leaving .fw-note{opacity:0;transition:opacity .3s ease-in-out}
/* the project hero */
.fw-hero{position:relative;z-index:1;display:grid;overflow:hidden;color:var(--t);--t-strong:#fff;--t:#ffffffb3;--t-subtle:#fff9}
.fw-hero__media{grid-area:1/-1;position:relative;z-index:-1;width:100%;height:calc(var(--svh) - var(--bar));min-height:320px;overflow:hidden;background:var(--bg-strong)}
.fw-hero__img{width:100%;height:100%;will-change:transform}
.fw-hero__img img{width:100%;height:100%;object-fit:cover}
/* a light veil (our photos are darker than the reference's, under its #0000004d), plus soft pools of the palette's
   darkest colour that follow the text at every size: one behind the title, a tighter one behind the scope line
   (70% white) and a fade under the credits (legibility; ledger 36). The rest of the photo stays airy */
.fw-hero__content{grid-area:1/-1;display:grid;grid-template-rows:1fr auto;background:#00000026;isolation:isolate}
.fw-hero__header::before,.fw-hero__sub::before,.fw-hero__meta::before{content:"";position:absolute;z-index:-1;pointer-events:none}
.fw-hero__header::before{inset:-12% -8%;border-radius:40%;background:#19170e80;filter:blur(56px)}
.fw-hero__sub{position:relative}
.fw-hero__sub::before{inset:-26px -44px;border-radius:999px;background:#19170e99;filter:blur(20px)}
.fw-hero__meta::before{inset:-60% 0 0;background:linear-gradient(to top,#19170ee0,#19170ec7 45%,#19170e80 65%,#19170e40 82%,#19170e00)}
.fw-hero__header{position:relative;grid-area:1/1/-1/-1;place-self:center;display:grid;justify-items:center;gap:1rem;text-align:center;padding:0 var(--gutter);max-width:100%}
.fw-hero__title{font-size:var(--fs-xl);line-height:.95;letter-spacing:-.01em;font-weight:400;color:var(--t-strong);font-kerning:none;margin-right:.5px;text-wrap:balance}
.fw-hero__sub{font-size:var(--fs-body);line-height:1.3;color:var(--t);text-wrap:balance}
.fw-hero__meta{position:relative;grid-area:2/1/-1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:var(--pad-sm);font-size:var(--fs-small);line-height:1.2}
@media (min-width:992px){.fw-hero__meta{display:flex;justify-content:space-evenly}}
.fw-hero__item{display:grid;justify-items:start;gap:.5rem}
@media (min-width:992px){.fw-hero__item{justify-items:center}}
.fw-hero__item dt{color:var(--t);grid-row:1}
.fw-hero__item dd{color:var(--t-strong);grid-row:2;margin:0}
/* split title letters and words */
.fw-word{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.075em;margin-block:-.075em}
.fw-roll .fw-char{transform:translate3d(0,100%,0)}
.fw-roll .fw-char.is-in{transform:none;transition:transform 1.25s var(--ease)}
.fw-js .fw-hero__title{visibility:hidden;animation:fw-safe-vis 0s 2.5s forwards}
.fw-js .fw-hero__title.is-ready{visibility:visible;animation:none}
/* from 1.25 s with 0.1 s between them, 0.5 s ease out (the source's values): the scope line drops 20 px from above,
   each credit comes 20 px from the left */
.fw-js .fw-hero__sub,.fw-js .fw-hero__item{opacity:0;animation:fw-safe-show 0s 3s forwards}
.fw-js .fw-hero__sub:not(.is-in){transform:translate3d(0,-20px,0)}
.fw-js .fw-hero__item:not(.is-in){transform:translate3d(-20px,0,0)}
.fw-hero__sub.is-in,.fw-hero__item.is-in{opacity:1;transform:none;animation:none;transition:opacity .5s ease-out,transform .5s ease-out}
/* the overview lockup */
.fw-project{background:var(--bg);color:var(--t)}
.fw-lockup-outer{position:relative;z-index:0;background:var(--bg)}
@media (min-width:1200px){.fw-lockup-outer{min-height:var(--svh);padding-block:300px}}
.fw-lockup{display:grid;align-content:center;gap:var(--gap-k-md) var(--gap-s-md);padding-block:var(--pad-xl);color:var(--t)}
@media (min-width:992px){.fw-lockup{--small:308px;grid-template-columns:var(--small) 1fr;align-items:start}}
@media (min-width:1200px){.fw-lockup-outer .fw-lockup{min-height:var(--svh);padding-block:0;will-change:transform}}
@media (min-width:1400px){.fw-lockup{--small:438px}}
.fw-lockup__label{font-size:var(--fs-small);line-height:1.2;color:var(--t-subtle);font-weight:400;font-kerning:none}
.fw-lockup__content{display:flex;flex-direction:column;gap:var(--gap-s-lg)}
.fw-lockup__body{font-size:var(--fs-lead);line-height:1.3;color:var(--t);text-indent:1.62em;font-kerning:none;max-width:30em}
.fw-details-btn{display:inline-flex;align-items:center;gap:.3em;font-size:var(--fs-small);line-height:1.2;color:var(--t);min-height:44px;text-decoration:none;transition:color .15s ease-in-out}
.fw-details-btn svg{width:.75em;height:.75em;margin-top:.1em;transform:rotate(90deg)}
@media (hover:hover){.fw-details-btn:hover{color:var(--t-strong)}}
/* reveals: shown at rest without script or with reduced motion */
.fw-js .fw-rise{opacity:0;transform:translate3d(0,50px,0)}
.fw-js .fw-rise.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease-label),transform .75s var(--ease-label)}
.fw-js .fw-words .fw-w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.075em;margin-block:-.075em;text-indent:0}
.fw-js .fw-words .fw-w>span{display:inline-block;transform:translate3d(0,110%,0)}
.fw-js .fw-words.is-in .fw-w>span{transform:none;transition:transform .75s var(--ease-label)}
.fw-js .fw-rise,.fw-js .fw-words .fw-w>span{animation:fw-safe-show 0s 4s forwards}
.fw-reveal .fw-rise,.fw-reveal .fw-words .fw-w>span{animation:none}
@keyframes fw-safe-show{to{opacity:1;transform:none}}
.fw-js .is-in,.fw-js .is-in .fw-w>span{animation:none}
/* the gallery: full, partial and half blocks with a reveal and a soft parallax */
.fw-gallery{position:relative;z-index:1;display:grid;gap:var(--gap-c-lg);padding-bottom:var(--pad-xl);background:var(--bg)}
.fw-block{display:flex;gap:var(--gap-c-lg)}
.fw-block--full{--size:100%}.fw-block--partial{--size:84.375%}.fw-block--half{--size:50%}.fw-block--pair{--size:calc(50% - var(--gap-c-lg) / 2)}
.fw-block--left{justify-content:flex-start}.fw-block--right{justify-content:flex-end}
.fw-block__image{position:relative;width:var(--size,100%)}
.fw-block__parallax{position:relative;overflow:hidden;background:#0000001a}
.fw-block__parallax::before{content:"";display:block;width:100%;padding-top:var(--ratio)}
.fw-block__inner{position:absolute;top:0;left:0;width:100%;height:130%;will-change:transform}
.fw-block__reveal{position:absolute;inset:0;display:grid}
.fw-block__reveal::before{content:"";position:absolute;inset:0;z-index:1;background:var(--bg-strong);opacity:0;pointer-events:none}
.fw-block__reveal img,.fw-block__reveal picture{grid-area:1/-1;width:100%;height:100%;object-fit:cover}
.fw-js .fw-block__reveal.is-wait{transform:scale(1.1)}
.fw-js .fw-block__reveal.is-wait::before{opacity:1}
.fw-js .fw-block__reveal.is-shown{transition:transform .8s var(--ease-reveal)}
.fw-js .fw-block__reveal.is-shown::before{transition:opacity .8s var(--ease-reveal)}
/* a quote: the name over the role and place in the small column, the words at the Quote size beside it */
.fw-testimonial{position:relative;z-index:1;background:var(--bg);padding-bottom:var(--pad-xl)}
.fw-quote{display:grid;gap:var(--gap-k-md) var(--gap-s-md);margin:0;color:var(--t)}
@media (min-width:992px){.fw-quote{grid-template-columns:308px 1fr;align-items:start}}
@media (min-width:1400px){.fw-quote{grid-template-columns:438px 1fr}}
.fw-quote__by{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--fs-small);line-height:1.2;color:var(--t-subtle)}
.fw-quote__name{font-size:var(--fs-body);line-height:1.3;color:var(--t-strong)}
.fw-quote__text{font-size:var(--fs-quote);line-height:1.3;color:var(--t);text-indent:1.62em;font-kerning:none;max-width:32em}
.fw-quote__text p{margin:0}
/* Project Details */
.fw-details{position:relative;z-index:1;background:var(--bg);min-height:var(--svh);padding-block:var(--pad-xl)}
.fw-details__grid{display:grid;gap:var(--gap-k-md) var(--gap-s-md)}
@media (min-width:992px){.fw-details__grid{grid-template-columns:308px 1fr}}
@media (min-width:1400px){.fw-details__grid{grid-template-columns:438px 1fr}}
.fw-details__label{font-size:var(--fs-small);line-height:1.2;color:var(--t-subtle);font-weight:400}
.fw-details__text{display:grid;gap:1.3em;font-size:var(--fs-body);line-height:1.3;color:var(--t);max-width:34em}
/* the Next (and Featured) Project band, revealed as the page above scrolls off it */
.fw-next{position:sticky;bottom:0;z-index:0;min-height:100vh;display:grid;background:var(--next-bg);color:var(--t);--foot-h:200px}
@supports (height:100lvh){.fw-next{min-height:100lvh}}
/* the footer's room at the band's foot: site.js sets the footer's own height; these are its measured heights for
   when script is off */
@media (min-width:480px){.fw-next{--foot-h:184px}}
@media (min-width:992px){.fw-next{--foot-h:208px}}
@media (min-width:1200px){.fw-next{--foot-h:184px}}
@media (min-width:1400px){.fw-next{--foot-h:120px}}
@media (min-width:1920px){.fw-next{--foot-h:136px}}
.fw-next__link{position:relative;display:grid;align-content:center;justify-items:center;gap:var(--gap-k-sm);text-align:center;padding:96px var(--gutter) calc(var(--foot-h) + 24px);color:inherit;text-decoration:none}
.fw-next__head{font-size:var(--fs-small);line-height:1.2;color:var(--t-subtle)}
.fw-next__title{font-size:min(var(--fs-xl),max(2.5rem,calc((var(--lvh) - 136px - var(--foot-h) - 1.2 * var(--fs-small)) / 1.9)));line-height:.95;font-weight:400;color:var(--t-strong);font-kerning:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .4em;margin-right:.5px}
.fw-next__word{display:inline-block}
.fw-next__head{will-change:transform,opacity}
.fw-next__thumb{display:flex;align-items:center;height:1em;overflow:hidden;flex:none}
.fw-next__thumb img{display:block;width:1em;height:1em;border-radius:8px;object-fit:cover}
@media (min-width:480px){.fw-next__thumb img{width:.75em;height:.75em}}
/* the footer is not part of the band: it sits over the band's foot at the band's own place, so it rides in only at
   the very end of the page, once the band is uncovered, as the reference's does */
.fw-next-foot{position:relative;z-index:1;height:0;color:var(--t)}
.fw-next-foot>.fw-footer{position:absolute;left:0;right:0;bottom:0}
/* a window too short for the pill, the title and the footer together: the band is an ordinary section and the
   footer follows it, so nothing can meet */
@media (max-height:459px){
  .fw-next{position:relative;min-height:0}
  .fw-next__link{padding-bottom:48px}
  .fw-next__title{font-size:var(--fs-xl)}
  .fw-next-foot{height:auto;background:var(--next-bg)}
  .fw-next-foot>.fw-footer{position:static}
}
/* footer (inner pages) */
.fw-footer{display:grid;grid-template-areas:"logo logo" "content content";gap:1.5rem var(--gap-c-lg);padding:var(--pad-sm);font:400 var(--fs-cap)/1.2 "Inter Tight",sans-serif;letter-spacing:-.01em;color:var(--t-subtle);font-variation-settings:normal}
@media (min-width:1400px){.fw-footer:not(.fw-footer--contact){grid-template-areas:"logo content";grid-template-columns:auto 1fr;align-items:center}}
.fw-footer a{color:var(--t-subtle);text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s ease-in-out}
@media (hover:hover){.fw-footer a:hover{color:var(--t-strong)}}
.fw-footer__logo{grid-area:logo;position:relative;display:flex;align-items:center;gap:10px;color:var(--t-strong);text-decoration:none;width:max-content}
/* a tap area at least 44 px tall around the 34 px mark */
.fw-footer__logo::before{content:"";position:absolute;inset:min(0px,calc(50% - 22px)) 0}
.fw-footer__logo svg{width:27px;height:24px;color:var(--mark)}
.fw-footer__logo svg *{stroke:currentColor}.fw-footer__logo svg rect{fill:currentColor;stroke:none}
.fw-footer__logo span{font:400 16px/1.05 "Inter",sans-serif;font-variation-settings:"opsz" 32;color:var(--t-subtle)}
.fw-footer__content{grid-area:content;display:flex;flex-direction:column;gap:var(--gap-c-md) var(--gap-k-sm)}
.fw-footer__content p{margin:0}
@media (min-width:768px){.fw-footer__content{flex-direction:row;flex-wrap:wrap;align-items:center}}
@media (min-width:1400px){.fw-footer:not(.fw-footer--contact) .fw-footer__content{justify-content:center}}
@media (min-width:1024px){.fw-footer--contact .fw-footer__content{flex-direction:column;align-items:flex-start}}
@media (min-width:1600px){.fw-footer--contact .fw-footer__content{flex-direction:row;align-items:center}}

/* ---------- profile: the two slide hero (the second photo uncovered from the bottom by scroll) */
.fw-profile-page{background:var(--dark)}
.fw-slides{position:relative;z-index:0;display:grid}
.fw-slides__stage{display:grid}
.fw-slide{position:relative;display:grid;place-items:center;height:var(--lvh);min-height:320px;color:#fff;background:var(--ink)}
.fw-slide__image{position:absolute;inset:0;overflow:hidden}
.fw-slide__image img,.fw-slide__image picture{width:100%;height:100%;object-fit:cover}
/* the reference's light veil and a soft pool of the palette's darkest colour behind the title (legibility; ledger 36) */
.fw-slide__image::after{content:"";position:absolute;inset:0;background:radial-gradient(46% 20% at 50% 50%,#19170e80,#19170e00),#00000040;pointer-events:none}
@media (max-width:991px){.fw-slide__image::after{background:radial-gradient(78% 17% at 50% 50%,#19170e99,#19170e00),#00000040}}
.fw-slide__title{position:relative;z-index:1;padding-inline:.5em;font-size:var(--fs-xl);line-height:.95;font-weight:400;text-align:center;font-kerning:none;margin-right:.5px;text-wrap:balance;color:#fff}
/* on the phone each slide title sets its two words on two lines, as the reference does */
@media (max-width:767px){.fw-slide__title{width:min-content}.fw-slide__title .fw-word{white-space:nowrap}}
/* with script and motion: the slides share one sticky stage over 3.2 windows (the reference's 2.2 of hero and the
   story rising over the still photo); slide 2's photo is uncovered from the bottom, both titles sit over both photos */
@media (prefers-reduced-motion:no-preference){
  .fw-js .fw-slides{height:calc(var(--lvh) * 3.2)}
  .fw-js .fw-slides__stage{position:sticky;top:0;height:var(--lvh);min-height:320px;overflow:hidden}
  .fw-js .fw-slide{grid-area:1/1;height:100%;background:none}
  .fw-js .fw-slide--1{background:var(--ink)}
  .fw-js .fw-slide--2 .fw-slide__image{clip-path:inset(var(--clip,100%) 0 0 0)}
  .fw-js .fw-story{margin-top:calc(var(--lvh) * -1)}
}
/* the profile's section grounds sit over the hero */
.fw-pdark,.fw-plight{position:relative;z-index:1;background:var(--bg);color:var(--t)}
/* story: the content lockup with a small photo beside the second paragraph */
.fw-lockup--story{padding-block:var(--pad-xl)}
.fw-secondary{display:flex;flex-direction:column;gap:var(--gap-s-sm)}
@media (min-width:768px){.fw-secondary{flex-direction:row}}
@media (min-width:992px){.fw-secondary{flex-direction:column}}
@media (min-width:1200px){.fw-secondary{flex-direction:row}}
.fw-secondary__photo{flex:none;width:284px;height:186px;overflow:hidden;background:#0000001a}
.fw-secondary__photo img{width:100%;height:100%;object-fit:cover}
.fw-secondary__text{margin-top:-.25em;font-size:var(--fs-body);line-height:1.3;color:var(--t);text-indent:1.62em;max-width:26em}
/* team: a carousel of work photos, the next one peeking; invisible halves step it on desktop, touch swipes */
.fw-team{scroll-margin-top:max(88px,calc(var(--lvh) / 7))}
.fw-carousel{position:relative;overflow:hidden}
.fw-carousel__track{display:flex;gap:24px;padding:0 48px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:48px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fw-carousel__track::-webkit-scrollbar{display:none}
.fw-carousel__slide{flex:none;width:70vw;scroll-snap-align:start}
@media (min-width:768px){.fw-carousel__slide{width:77.36vw}}
.fw-carousel__frame{position:relative;aspect-ratio:1500/1000;overflow:hidden;background:#0000001a}
/* each photo is 1.2 times its frame's height and drifts through it as the page scrolls (site.js), as the reference */
.fw-carousel__frame .fw-block__reveal{align-items:start}
.fw-carousel__frame .fw-block__reveal img{height:120%;will-change:transform}
.fw-carousel__controls{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:1fr 1fr}
.fw-carousel__half{position:relative;opacity:1;cursor:none}
.fw-carousel__key{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border-radius:50%;background:#fff3;color:#fff;opacity:0;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}
.fw-carousel__half:first-child .fw-carousel__key{left:24px}.fw-carousel__half:last-child .fw-carousel__key{right:24px}
.fw-carousel__half:first-child .fw-carousel__key svg{transform:scaleX(-1)}
.fw-carousel__half:focus-visible{outline:none}
.fw-carousel__half:focus-visible .fw-carousel__key{opacity:1;outline:2px solid #fff;outline-offset:3px}
@media (pointer:coarse),(hover:none){.fw-carousel__controls{display:none}}
@media not (pointer:fine){.fw-carousel__half{cursor:pointer}}
html:not(.fw-js) .fw-carousel__controls{display:none}
html:not(.fw-js) .fw-carousel__track{scrollbar-width:thin}
/* services: the intro and four cards, a window tall from 1200 px; as each one leaves the top it slips down by up to
   60% of a window (an ease in) and darkens to half black while the next slides over it (site.js) */
.fw-layers{display:grid}
.fw-layer{position:relative;z-index:0;display:grid;background:var(--bg);color:var(--t);min-width:0}
.fw-layer+.fw-layer{border-top:1px solid #000}
.fw-layer::before{content:"";position:absolute;inset:0;z-index:2;background:#000;opacity:var(--shade,0);pointer-events:none}
.fw-layer__inner{min-width:0}
@media (min-width:1200px){.fw-layer{min-height:var(--svh)}.fw-js .fw-layer:not(:last-child){will-change:transform}}
.fw-svc-intro{display:grid;align-content:center;gap:0 var(--gap-s-md);width:100%;max-width:calc(1824px + 2 * var(--gutter));margin:0 auto;padding:var(--pad-xl) var(--gutter)}
@media (min-width:992px){.fw-svc-intro{grid-template-columns:308px 1fr;align-items:start}}
@media (min-width:1400px){.fw-svc-intro{grid-template-columns:438px 1fr}}
.fw-svc-intro__pre{grid-column:1/-1;margin-bottom:var(--gap-s-lg);font-size:var(--fs-pre);line-height:.95;color:var(--t);font-kerning:none}
.fw-svc-intro__title{margin-bottom:var(--gap-k-md);font-size:var(--fs-small);line-height:1.2;font-weight:400;color:var(--t-strong)}
.fw-svc-intro__body{font-size:var(--fs-body);line-height:1.3;color:var(--t);max-width:30em}
.fw-svc{display:grid;height:100%;padding:var(--gutter);gap:var(--gap-s-sm) var(--gap-s-lg);grid-template-areas:"title" "body" "media";grid-template-rows:auto auto auto}
@media (min-width:1200px){.fw-svc{grid-template:"title media" auto "body media" 1fr / 1fr 1fr}}
.fw-svc__title{grid-area:title;font-size:var(--fs-l);line-height:.95;font-weight:400;color:var(--t);font-kerning:none}
@media (min-width:1200px){.fw-svc__title{margin-top:var(--gutter)}}
.fw-svc__body{grid-area:body;font-size:var(--fs-body);line-height:1.3;color:var(--t)}
@media (min-width:768px){.fw-svc__body{max-width:85%}}
@media (min-width:1200px){.fw-svc__body{max-width:none}}
@media (min-width:1400px){.fw-svc__body{max-width:85%}}
.fw-svc__media{grid-area:media;min-width:0;aspect-ratio:350/354}
@media (min-width:1200px){.fw-svc__media{aspect-ratio:auto;min-height:0}}
/* a cross fade of photos, one shown (autoplay 4 s with a 1 s fade, in site.js) */
.fw-fade{position:relative;display:grid;overflow:hidden;background:#0000001a}
.fw-fade__slide{grid-area:1/1;position:relative;z-index:0;min-height:0;opacity:0;transition:opacity 1s ease}
.fw-fade__slide.is-on{z-index:1;opacity:1}
.fw-fade__slide.is-under{opacity:1;transition:none}
.fw-fade__slide img,.fw-fade__slide picture{width:100%;height:100%;object-fit:cover}
/* clients: the wall of 14 ruled 3:2 tiles, two on the first row, the last one blank (it holds the calling card) */
.fw-clients__in{display:grid;gap:calc(var(--gap-s-lg) * 2);padding-block:var(--pad-xl);overflow:hidden}
.fw-clients__title{font-size:3rem;line-height:.95;font-weight:400;color:var(--t-strong);font-kerning:none;margin-right:.5px;text-wrap:balance;max-width:13em}
@media (min-width:480px){.fw-clients__title{font-size:var(--fs-xl)}}
/* the tiles move as the wall assembles, so the browser never pins the page to one (a jump straight to the wall, or a
   find in page, would otherwise slide the page with them) */
.fw-wall{display:grid;grid-template-columns:1fr;min-width:0;overflow-anchor:none}
@media (min-width:480px){.fw-wall{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.fw-wall{grid-template-columns:repeat(3,1fr)}.fw-wall__tile:nth-child(3){grid-column-start:1}}
@media (min-width:1200px){.fw-wall{grid-template-columns:repeat(4,1fr)}}
.fw-wall__tile{position:relative;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;margin:-.5px;padding:16px;border:1px solid var(--rule);text-align:center;container-type:inline-size}
/* thirteen invented firms' marks, each its own setting of the site's two families (light to black, cases, tracking,
   stacks and a few small drawn marks), about half a tile wide as the reference's logos; sized by the tile itself */
.fw-mk{--k:8;display:inline-flex;flex-direction:column;align-items:center;max-width:100%;font-size:calc(var(--k) * 3.37px);line-height:1;
  color:var(--t-strong);font-family:"Inter Wall","Inter",sans-serif;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
@supports (width:1cqw){.fw-mk{font-size:calc(var(--k) * 1cqw)}}
.fw-mk__a,.fw-mk__b,.fw-mk__c{display:block}
.fw-mk--tarn .fw-mk__b,.fw-mk--hollo .fw-mk__b,.fw-mk--ellery,.fw-mk--hessel .fw-mk__b,.fw-mk--pellowe,
.fw-mk--kinloch,.fw-mk--fennick .fw-mk__b,.fw-mk--moss .fw-mk__b,.fw-mk--vane .fw-mk__a,.fw-mk--marrable .fw-mk__w,.fw-mk--verran .fw-mk__b,
.fw-mk--brindle{font-family:"Inter Tight Wall","Inter Tight",sans-serif}
.fw-mk--tarn{--k:9.2}
.fw-mk--tarn .fw-mk__a{font-weight:800;line-height:.9;text-transform:uppercase;letter-spacing:-.025em}
.fw-mk--tarn .fw-mk__b{margin:.55em -.62em 0 0;font-size:max(9px,.26em);font-weight:500;text-transform:uppercase;letter-spacing:.62em}
.fw-mk--hollo{--k:8.4}
.fw-mk--hollo .fw-mk__a{font-weight:300;letter-spacing:-.035em}
.fw-mk--hollo .fw-mk__b{margin:.62em -.7em 0 0;font-size:max(9px,.24em);text-transform:uppercase;letter-spacing:.7em}
.fw-mk--ottlin{--k:9.4;flex-direction:row;align-items:baseline;gap:.12em}
.fw-mk--ottlin .fw-mk__a{font-weight:300;text-transform:lowercase;letter-spacing:-.03em}
.fw-mk--ottlin .fw-mk__b{font-weight:800;text-transform:lowercase;letter-spacing:-.05em}
.fw-mk--vane{--k:5}
.fw-mk--vane .fw-mk__m{display:grid;place-items:center;width:2.8em;height:2.8em;margin-bottom:.75em;border:max(1px,.06em) solid;border-radius:50%}
.fw-mk--vane .fw-mk__m span{font-size:1.15em;font-weight:300;letter-spacing:-.04em}
.fw-mk--vane .fw-mk__a{margin-right:-.32em;font-weight:500;text-transform:uppercase;letter-spacing:.32em}
.fw-mk--ellery{--k:7.2;font-weight:600;text-transform:uppercase;letter-spacing:.55em}
.fw-mk--ellery .fw-mk__a,.fw-mk--ellery .fw-mk__b{margin-right:-.55em;line-height:1.3}
.fw-mk--ellery .fw-mk__c{margin:.6em -.55em 0 0;font-size:max(9px,.34em);font-weight:400}
.fw-mk--hessel{--k:19;align-items:flex-end}
.fw-mk--hessel .fw-mk__a{font-weight:200;line-height:.85;text-transform:lowercase;letter-spacing:-.03em}
.fw-mk--hessel .fw-mk__b{margin:.28em -.55em 0 0;font-size:max(9px,.15em);font-weight:500;text-transform:uppercase;letter-spacing:.55em}
.fw-mk--pellowe{--k:7.6;flex-direction:row;align-items:center;gap:.32em}
.fw-mk--pellowe .fw-mk__a{padding:.12em .3em .18em;background:var(--t-strong);color:var(--bg,#f3efeb);font-weight:900;line-height:1;letter-spacing:-.04em}
.fw-mk--pellowe .fw-mk__b{font-weight:300;letter-spacing:-.02em}
.fw-mk--kinloch{--k:8.2;align-items:flex-start;font-weight:900;line-height:.86;text-transform:uppercase;letter-spacing:-.015em}
.fw-mk--kinloch span{display:block}
.fw-mk--fennick{--k:9.2}
.fw-mk--fennick .fw-mk__a{font-weight:800;line-height:.85;text-transform:uppercase;letter-spacing:.04em;margin-right:-.04em}
.fw-mk--fennick .fw-mk__b{margin:.32em -.3em 0 0;font-size:.42em;font-weight:300;text-transform:uppercase;letter-spacing:.3em}
.fw-mk--moss{--k:13.4}
.fw-mk--moss .fw-mk__a{font-weight:500;line-height:.9;text-transform:lowercase;letter-spacing:-.05em}
.fw-mk--moss .fw-mk__a::after{content:"";display:inline-block;width:.2em;height:.2em;margin-left:.06em;border-radius:50%;background:currentColor}
.fw-mk--moss .fw-mk__b{margin-top:.42em;font-size:max(9px,.24em);text-transform:lowercase;letter-spacing:.12em}
.fw-mk--marrable{--k:5.2;flex-direction:row;gap:.7em}
.fw-mk--marrable .fw-mk__m{position:relative;flex:none;width:1.7em;height:1.7em}
.fw-mk--marrable .fw-mk__m::before,.fw-mk--marrable .fw-mk__m::after{content:"";position:absolute;inset:.25em;border:max(1px,.07em) solid;transform:rotate(45deg)}
.fw-mk--marrable .fw-mk__m::after{inset:.62em;border:0;background:currentColor}
.fw-mk--marrable .fw-mk__w{display:flex;flex-direction:column;align-items:flex-start}
.fw-mk--marrable .fw-mk__a{font-weight:500;text-transform:uppercase;letter-spacing:.24em}
.fw-mk--marrable .fw-mk__b{margin-top:.45em;font-size:max(9px,.36em);text-transform:uppercase;letter-spacing:.5em}
.fw-mk--verran{--k:15}
.fw-mk--verran .fw-mk__a{font-weight:600;line-height:.85;letter-spacing:-.045em}
.fw-mk--verran .fw-mk__b{margin:.25em -.5em 0 0;padding-top:.7em;border-top:1px solid;font-size:max(9px,.17em);font-weight:500;text-transform:uppercase;letter-spacing:.5em}
.fw-mk--brindle{--k:7;flex-direction:row;align-items:center;gap:.3em}
.fw-mk--brindle .fw-mk__a{padding:.06em .42em .14em;border:max(1px,.075em) solid;border-radius:999px;font-weight:700;line-height:1;text-transform:lowercase;letter-spacing:-.04em}
.fw-mk--brindle .fw-mk__b{font-weight:300;text-transform:lowercase;letter-spacing:-.02em}
.fw-cat{position:absolute;left:30%;bottom:0;height:clamp(40px,28%,88px);width:auto;transform:translateY(36%);pointer-events:none}
/* endorsements: one quote at a time with its project and a pair of its photos */
.fw-endorse{padding-block:0 var(--pad-xl)}
.fw-endorse__head{display:flex;align-items:center;gap:var(--gap-k-sm);margin-bottom:var(--gap-s-sm)}
.fw-endorse__label{font-size:var(--fs-small);line-height:1.2;font-weight:400;color:var(--t-subtle)}
.fw-controls{margin-left:auto;display:flex;align-items:center;gap:var(--gap-k-sm)}
.fw-controls__count{font-size:var(--fs-small);line-height:1.2;color:var(--t-subtle)}
.fw-controls__btn{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--t);transition:color .15s ease-in-out}
.fw-controls__btn::before{content:"";position:absolute;inset:-10px}
/* on touch the second arrow sits 4 px further over, so the two 44 px tap areas meet without overlapping */
@media (pointer:coarse),(max-width:991px){.fw-controls__btn+.fw-controls__btn{margin-left:4px}}
.fw-controls__btn svg{width:100%;height:auto}
.fw-controls__btn--prev svg{transform:scaleX(-1)}
@media (hover:hover){.fw-controls__btn:hover{color:var(--t-strong)}}
.fw-controls__btn:focus-visible{color:var(--t-strong)}
html:not(.fw-js) .fw-controls{display:none}
.fw-endorse__slides{position:relative;display:grid;gap:var(--gap-s-lg)}
.fw-quote__body{display:grid;gap:var(--gap-s-lg)}
.fw-quote__project{position:relative;z-index:2;display:grid;gap:var(--gap-k-sm);justify-self:start;font-size:var(--fs-small);line-height:1.2;color:var(--t);text-decoration:none;transition:color .15s ease-in-out}
@media (hover:hover){.fw-quote__project:hover{color:var(--t-strong)}}
.fw-quote__cards{display:flex;gap:var(--gap-c-lg)}
.fw-quote__card{display:block;width:169px;aspect-ratio:356/236;overflow:hidden;background:#0000001a}
/* 356 px each from 992 px, shrinking together where the quote column is narrower (992 to about 1180 px windows); the
   link takes its width from the column, not its photos, so the cards keep their size while the photos load */
@media (min-width:992px){.fw-quote__card{width:auto;flex:0 1 356px;min-width:0}.fw-quote__project{width:100%;max-width:calc(712px + var(--gap-c-lg))}}
@media (max-width:389px){.fw-quote__card{width:calc((100vw - 2 * var(--gutter) - 12px) / 2)}}
.fw-quote__card img{width:100%;height:100%;object-fit:cover}
/* with script: one at a time, cross faded in 0.3 s (the slider's own speed); the words of the new quote rise in */
.fw-js .fw-endorse__slides{gap:0;touch-action:pan-y}
.fw-js .fw-quote--endorse{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.fw-js .fw-quote--endorse.is-on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
/* the bottom sub navigation pill: sticky to the window's foot while the profile's content is in view, it leaves with
   the end of the page content, over the Featured band and footer */
.fw-subnav{position:sticky;bottom:24px;z-index:9;width:max-content;max-width:calc(100% - 16px);margin:-64px auto 24px;padding:4px;border-radius:8px;font-family:"Inter Tight",sans-serif;font-variation-settings:normal;isolation:isolate}
.fw-subnav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pill);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:none}
.fw-subnav__menu{display:flex;gap:4px}
.fw-subnav__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:11.5px 8px;border-radius:4px;font:500 12px/17px "Inter Tight",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#ffffffb3;text-decoration:none;transition:all .15s ease-in-out;white-space:nowrap}
.fw-subnav__btn::before{content:"";position:absolute;inset:-2px}
@media (min-width:375px){.fw-subnav__btn{font-size:14px}}
@media (max-width:374px){.fw-subnav__btn{padding-inline:5px;min-width:40px}}
@media (hover:hover){.fw-subnav__btn:hover{background-color:#ffffff1a}}
.fw-subnav__btn:focus-visible{background-color:#ffffff1a;outline:2px solid #fff;outline-offset:0}
.fw-subnav__btn.is-active{color:#fff}
/* with script it is fixed to the window's foot, rises in after half a second, and slips down out of the way as the
   end of the profile passes 80% to 50% of the window (site.js); without script it is sticky inside the page */
.fw-js .fw-subnav{position:fixed;left:50%;bottom:24px;margin:0;transform:translate3d(-50%,var(--sy,calc(100% + 24px)),0);animation:fw-safe-sub 0s 3s forwards}
@keyframes fw-safe-sub{to{transform:translate3d(-50%,0,0)}}
.fw-js .fw-subnav.is-gone{visibility:hidden}
[data-subnav-target]:focus{outline:none}

/* ---------- contact: one dark screen, the photo left and the column aligned to the bottom */
.fw-contact-page{--bg:var(--ink);background:var(--ink)}
.fw-contact{display:grid;gap:var(--gap-s-sm);min-width:0;padding:96px var(--pad-sm) var(--pad-sm);min-height:calc(var(--svh) - var(--bar));background:var(--ink);color:var(--olive);
  --t-strong:#fff;--t:#ffffffb3;--t-subtle:#fff9;--border-subtle:#ffffff1a}
@media (min-width:1024px){.fw-contact{grid-template-columns:1fr 1fr;padding-top:var(--pad-sm)}}
/* 350 px as the reference, shorter in short phone windows so the heading's two lines stay whole on the first screen */
.fw-contact__photo{position:relative;height:clamp(240px,calc(var(--svh) - 260px),350px);overflow:hidden;background:#2a271d}
@media (min-width:1024px){.fw-contact__photo{height:auto;min-height:100%}}
.fw-contact__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fw-contact__col{display:grid;align-content:end;gap:var(--gap-s-lg);min-width:0}
/* beside the photo the column never starts under the nav pill: when it is taller than the window it starts 24 px
   below the pill and the page scrolls */
@media (min-width:1024px){.fw-contact__col{padding-top:56px}}
.fw-contact__inner{display:grid;gap:var(--gap-s-sm);min-width:0}
.fw-contact__heading{font-size:var(--fs-l);line-height:.95;color:var(--olive);font-weight:400;font-kerning:none}
.fw-form fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;border-top:1px solid #fff3}
.fw-field-row{display:grid}
@media (min-width:1024px){.fw-field-row{grid-template-columns:1fr 1fr;column-gap:var(--gap-k-lg)}}
.fw-field{position:relative;display:grid;gap:2px;padding:10px 0;border-bottom:1px solid #fff3}
/* the whole ruled field takes a tap (its label stretched over it), so the one line fields are well over 44 px to aim at */
.fw-field label::after{content:"";position:absolute;inset:0}
.fw-field label{font-size:var(--fs-small);line-height:1.2;color:#fff9}
.fw-field textarea{field-sizing:content;max-height:5.2em}
.fw-field input,.fw-field textarea{display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--olive);font:400 var(--fs-body)/1.3 "Inter",sans-serif;
  font-variation-settings:"opsz" 32;letter-spacing:-.01em;resize:none;min-height:0}
.fw-field input,.fw-field textarea{position:relative;z-index:1}
.fw-field input:focus-visible,.fw-field textarea:focus-visible{outline:2px solid #fff;outline-offset:4px}
.fw-send{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:8px 0;font-size:var(--fs-body);line-height:1.3;color:var(--olive);transition:color .15s ease-in-out;justify-self:start}
.fw-send svg{width:.7em;height:.7em}
@media (hover:hover){.fw-send:hover{color:#fff}}
.fw-send:focus-visible{color:#fff;outline:2px solid #fff;outline-offset:4px}
.fw-result{display:grid;gap:12px;font-size:var(--fs-body);line-height:1.3;color:var(--olive);border-top:1px solid #fff3;padding-top:12px}
.fw-result:focus{outline:none}
.fw-result__title{color:#fff9;font-size:var(--fs-small)}
.fw-result__summary{white-space:pre-line}
.fw-result [data-form-message]{font-size:var(--fs-small);color:#fff9}
.fw-result [data-form-message] a{color:#fff}
.fw-contact__area{font-size:var(--fs-small);line-height:1.3;color:#fff9;padding:0 0 12px;border-bottom:1px solid #fff3}
.fw-contact__foot .fw-footer{padding:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fw-js .fw-wrapper,.fw-js .fw-contact,.fw-nav-in .fw-nav{animation:none!important}
  .fw *,.fw *::before,.fw *::after{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important}
  .fw-card__image,.fw-dup__in .fw-card__image,.fw-hero__img,.fw-lockup,.fw-block__inner,.fw-layer,.fw-carousel__frame img,.fw-next__head,.fw-next .fw-char,.fw-next__thumb img,.fw-slide__title .fw-char{transform:none!important}
  .fw-next__head{opacity:1!important}
  .fw-layer::before{opacity:0!important}
  .fw-js .fw-rise,.fw-js .fw-words .fw-w>span,.fw-name .fw-char,.fw-roll .fw-char{opacity:1!important;transform:none!important}
  .fw-js .fw-hero__title,.fw-intro .fw-name__line:not(.fw-name__line--intro){visibility:visible!important}
  .fw-js .fw-hero__sub,.fw-js .fw-hero__item{opacity:1!important;transform:none!important}
  .fw-js .fw-block__reveal.is-wait{transform:none!important}.fw-js .fw-block__reveal.is-wait::before{opacity:0!important}
}