/* Lumina Designed. Home.
   Pale plaster ground with a violet cast, one light serif with italic emphasis, tracked caps for
   everything small, brass only on hairlines and numerals. Nothing casts a shadow.

   Paths here and in index.html are RELATIVE, not absolute from the deploy root, so the folder
   renders correctly when index.html is opened straight from disk as well as when it is served.
   CSS url() resolves against this stylesheet, hence ../fonts/. Keep it that way: an absolute
   /fonts/... path sends a file:// browser to the root of the drive and the page loses its type. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-400-latin.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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-400-italic-latin.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:'Montserrat';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/montserrat-400-500-600-latin.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}

:root{
  --ground:#f4f2f5;         /* plaster with a violet cast: the light ground */
  --ground-2:#ebe7ef;       /* one step deeper, for alternating sections */
  --white:#ffffff;
  --ink:#1f1b26;            /* text on light */
  --ink-70:rgba(31,27,38,.72);
  --ink-50:rgba(31,27,38,.5);
  --plum-deep:#1a1620;      /* violet-black: dark sections, loader, menu */
  --plum:#3c384f;           /* brand slate-violet: the statement band */
  --plum-soft:#817d91;      /* brand: muted text */
  --silver:#d9d6de;         /* body on dark */
  --brass:#c9a962;
  --brass-rule:rgba(201,169,98,.6);
  --line:rgba(31,27,38,.14);
  --line-dark:rgba(255,255,255,.14);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(1.25rem,4vw,4rem);
  --nav-h:4.75rem;          /* the sticky bar: fixed so its negative margin matches exactly */
  --sec:clamp(6rem,12vw,11rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Nothing toggles overflow on <html> any more. iOS stops painting position:fixed elements when
   overflow:hidden is removed from the root and only repaints them on the next scroll, which is
   exactly the nav-missing-until-you-scroll fault. The loader blocks scrolling on its own below. */
/* The page opens on the dark hero, so the ground behind the document is dark too: if a mobile
   browser ever overscrolls or resizes its bar mid-paint, the sliver that shows is the hero's
   colour rather than a flash of near-white. Sections set their own grounds over the top. */
html{background:var(--plum-deep)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
::selection{background:var(--plum);color:#fff}
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--ink);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}

/* ---------- type roles ---------- */
.display,h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.9rem)}
h2{font-size:clamp(2.1rem,4.1vw,3.9rem)}
.display em,h1 em,h2 em,.statement em{font-style:italic;font-weight:400}
.label{font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--plum-soft)}
.on-dark .label{color:var(--brass)}
.serif-lede{font-family:var(--serif);font-size:clamp(1.35rem,1.8vw,1.75rem);line-height:1.3;color:var(--ink)}
.body{font-size:.9375rem;line-height:1.85;color:var(--ink-70);max-width:44ch}
.body+.body{margin-top:1.1rem}
.on-dark .body{color:var(--silver)}
.arrow{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);position:relative;padding-bottom:.35rem}
.arrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(.25);transform-origin:left;transition:transform .6s var(--ease)}
.arrow:focus-visible::after{transform:scaleX(1)}
.arrow svg{width:1.5rem;height:.6rem;flex:none;transition:transform .5s var(--ease)}
.on-dark .arrow{color:#fff}

/* ---------- layout ---------- */
.container{width:100%;max-width:1520px;margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem)}
section{position:relative}
.on-dark{background:var(--plum-deep);color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;min-height:3.25rem;padding:0 2rem;font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;border:1px solid currentColor;border-radius:0;position:relative;overflow:hidden;transition:color .5s var(--ease),border-color .5s var(--ease),transform .16s ease-out;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:currentColor;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:-1}
.btn:focus-visible::before{transform:scaleY(1)}
.btn:active{transform:scale(.985)}
.btn-fill{background:#fff;color:var(--ink);border-color:#fff}
.btn-fill::before{background:var(--ink)}
.btn-fill:focus-visible{color:#fff;border-color:var(--ink)}
.btn-line{color:#fff}
.btn-line::before{background:#fff}
.btn-line:focus-visible{color:var(--ink)}
.btn-ink{color:var(--ink)}
.btn-ink::before{background:var(--ink)}
.btn-ink:focus-visible{color:#fff}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:90;touch-action:none;overscroll-behavior:contain;background:var(--plum-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s var(--ease-io),visibility 0s linear 1s;will-change:transform}
.loader-mark{width:clamp(200px,32vw,420px)}
.loader-mark svg{width:100%;height:auto;display:block;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease-io) .15s}
.loader-rule{width:clamp(200px,32vw,420px);height:1px;background:var(--brass-rule);margin-top:1.6rem;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-io) .35s}
.loader-line{margin-top:1.4rem;font-size:.625rem;letter-spacing:.32em;text-transform:uppercase;color:var(--plum-soft);opacity:0;transition:opacity .8s ease .7s}
.loader-count{position:absolute;right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);line-height:1;color:var(--plum-soft);font-variant-numeric:tabular-nums}
html.loading .loader.in .loader-mark svg{clip-path:inset(0 0 0 0)}
html.loading .loader.in .loader-rule{transform:scaleX(1)}
html.loading .loader.in .loader-line{opacity:1}
/* pointer-events go the instant it starts leaving. Visibility only flips when the 1s slide ends,
   and the hero buttons are already on screen by then, so without this the curtain silently eats
   the first tap on a CTA. */
.loader.out{transform:translateY(-100%);visibility:hidden;pointer-events:none}
html:not(.js) .loader{display:none}

/* ---------- header ---------- */
/* One bar, one colour, always. It used to be transparent over the hero and take its colour from
   whichever section sat beneath it, which read as a distraction on the way down and, worse, meant
   the nav's visibility depended on a script getting that answer right: when it guessed light over
   the dark hero the header was present, correct and invisible. An opaque brand-purple bar cannot
   be mistimed, cannot be mismatched, and needs no JavaScript to be seen. It is also not hidden
   during load — the loader covers it (z-index 90 over 50) and lifts away to reveal it, so nothing
   has to remember to bring it back. */
/* Transparent over the hero so the film is unobstructed, then brand purple from the first scroll
   on and it stays purple. The text is white throughout: the bar's fill changes, its colour never
   does, so there is no state in which the nav can be painted to match what is behind it.
   The fill lives on a pseudo-element and fades by opacity, because a backdrop blur cannot be
   transitioned and would frost the video while the bar is meant to be invisible.
   Default is purple and JS REMOVES it at the top, not the reverse: if the script never runs the
   nav is a solid visible bar rather than transparent white text over whatever it lands on. */
/* STICKY, NOT FIXED. Chrome for iOS lays a position:fixed top:0 element out against a viewport
   whose top edge moves with its collapsible address bar, and at load it can place the bar
   underneath that toolbar: drawn, but off screen until a finger scroll moves the toolbar and
   the viewport is recomputed. A script scroll does not move the toolbar, which is why the
   one-pixel settle never cured it. A sticky element is laid out in normal flow, so at load it
   is exactly where the document says it is; it then pins to the top as the page scrolls. The
   bar has a fixed height and a matching negative bottom margin so the hero still runs under it. */
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;height:var(--nav-h);margin-bottom:calc(-1 * var(--nav-h));padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;color:#fff;transform:translateZ(0)}
/* Solid fill, no backdrop blur: a backdrop-filter inside a position:fixed element is a known WebKit
   compositing fault that can leave the whole element unpainted. The header also takes its own
   compositing layer (translateZ) so its painting never depends on the layers around it. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--plum);border-bottom:1px solid rgba(255,255,255,.10);opacity:1;transition:opacity .5s var(--ease)}
html.at-top .site-header::before{opacity:0}
/* With no bar behind it the nav is white text on the film, and two of the three clips are bright
   kitchens: measured across all 495 frames the links fell below the 4.5:1 minimum for a third of
   the loop, bottoming at 3.54:1. This is the lightest scrim that clears it on every frame (0.25,
   worst case 4.69:1) — a soft fade over the top of the hero, not a bar, so the film still reads. */
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;height:180%;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(26,22,32,.25),rgba(26,22,32,0));opacity:0;transition:opacity .5s var(--ease)}
html.at-top .site-header::after{opacity:1}

/* the menu is its own full-screen ground, so the bar steps back and lets it through rather than
   sitting on top as a strip of a slightly different purple */
body.menu-open .site-header::before{opacity:0}
.brand{display:block;width:clamp(120px,10.5vw,158px)}
.brand svg{width:100%;height:auto;display:block;fill:currentColor}
.nav{display:flex;align-items:center;gap:2.4rem}
.nav>a,.nav-item>a{font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;position:relative;padding:.4rem 0}
.nav>a::after,.nav-item>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav>a[aria-current]::after,.nav-item>a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav .nav-cta{padding:.6rem 1.3rem;border:1px solid currentColor;transition:background-color .5s var(--ease),color .5s var(--ease)}
.nav .nav-cta::after{display:none}

/* ---------- the services dropdown ----------
   One plain list under the word: the nine services in order and the hub, on the footer's ground,
   a hairline round it and nothing else. The item is as tall as the bar so the pointer can travel
   from the word down into the list without leaving it. Keyboard focus opens it; Escape closes it. */
.nav-item{position:relative;display:flex;align-items:center;height:var(--nav-h)}
.nav-drop{position:absolute;left:-1.5rem;top:100%;min-width:17.5rem;background:var(--plum-deep);color:#fff;border:1px solid var(--line-dark);padding:.6rem 0 .7rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .3s var(--ease),visibility 0s linear .3s;cursor:default}
.nav-drop a{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.55rem 1.5rem;font-family:var(--serif);font-size:1.2rem;line-height:1.3;letter-spacing:0;text-transform:none;font-weight:400;color:#ece9f1;white-space:nowrap;transition:color .25s ease,background-color .25s ease,padding-left .35s var(--ease)}
.nav-drop a::after{content:"";width:1.25rem;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-drop a.all{margin-top:.5rem;padding-top:.9rem;border-top:1px solid var(--line-dark);font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.nav-drop a.all::after{display:none}
.nav-drop a:focus-visible{color:#fff;background:rgba(255,255,255,.06);outline-offset:-2px}
.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.site-header:has(.nav-item:focus-within)::before{opacity:1}
.nav-toggle{display:none;align-items:center;gap:.9rem;font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;min-height:44px}
.nav-toggle i{display:block;width:26px;height:9px;position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.nav-toggle i::before{top:0}.nav-toggle i::after{top:8px}
body.menu-open .nav-toggle i::before{top:4px;transform:rotate(45deg)}
body.menu-open .nav-toggle i::after{top:4px;transform:rotate(-45deg)}

/* ---------- mobile menu ---------- */
.mnav{position:fixed;inset:0;z-index:45;background:var(--plum-deep);color:#fff;opacity:0;pointer-events:none;transition:opacity .6s var(--ease);overflow:auto;padding:calc(5.5rem + env(safe-area-inset-top)) var(--pad) calc(2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.mnav.open{opacity:1;pointer-events:auto}
.mnav ol{list-style:none;margin:0;padding:0}
.mnav li{border-bottom:1px solid var(--line-dark);overflow:hidden}
.mnav li>a,.mnav li>button{display:flex;align-items:baseline;gap:1rem;width:100%;padding:1.05rem 0;font-family:var(--serif);font-size:clamp(2rem,8vw,2.75rem);line-height:1.1;text-align:left;transform:translateY(110%);transition:transform .9s var(--ease)}
.mnav li>a small,.mnav li>button small{font-family:var(--sans);font-size:.625rem;letter-spacing:.22em;color:var(--brass);min-width:1.6rem}
.mnav.open li>a,.mnav.open li>button{transform:translateY(0)}
.mnav li:nth-child(1)>*{transition-delay:.08s}.mnav li:nth-child(2)>*{transition-delay:.14s}.mnav li:nth-child(3)>*{transition-delay:.2s}.mnav li:nth-child(4)>*{transition-delay:.26s}.mnav li:nth-child(5)>*{transition-delay:.32s}.mnav li:nth-child(6)>*{transition-delay:.38s}
.mnav-acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.mnav-acc>div{overflow:hidden}
.mnav-acc a{display:block;padding:.55rem 0 .55rem 2.6rem;font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.mnav li.exp .mnav-acc{grid-template-rows:1fr}
.mnav li>button::after{content:"+";margin-left:auto;font-family:var(--sans);font-size:1.25rem;color:var(--plum-soft);transition:transform .5s var(--ease)}
.mnav li.exp>button::after{transform:rotate(45deg)}
.mnav-foot{margin-top:auto;padding-top:2.5rem;display:flex;flex-direction:column;gap:1rem}
.mnav-foot a{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}
.mnav-foot .btn{margin-top:.5rem}

/* ---------- hero ---------- */
/* Hero height, mobile first: 100svh is the viewport with the address bar EXPANDED, so the moment
   Chrome collapses its bar the visible area grows and a band of the near-white body ground shows
   under a hero that stayed short. 100dvh tracks the visible area at all times, which keeps the
   bottom-anchored buttons on screen either way. vh and svh are fallbacks for older engines. */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;min-height:100dvh;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;background:var(--plum-deep);padding:calc(6rem + env(safe-area-inset-top)) var(--pad) calc(5rem + env(safe-area-inset-bottom))}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-media video{opacity:0;transition:opacity 1.4s ease}
.hero.video-live .hero-media video{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 52%,rgba(26,22,32,.42) 0%,rgba(26,22,32,0) 100%),linear-gradient(180deg,rgba(26,22,32,.4) 0%,rgba(26,22,32,.12) 40%,rgba(26,22,32,.5) 100%)}
.hero-copy{position:relative;z-index:1;text-align:center;max-width:56rem;display:flex;flex-direction:column;align-items:center}
.hero-copy .label{color:rgba(255,255,255,.8);margin-bottom:1.75rem}
.hero-copy h1{text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero-copy .sub{margin-top:1.75rem;font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.45;color:rgba(255,255,255,.88);max-width:34rem;text-wrap:pretty;text-shadow:0 1px 24px rgba(0,0,0,.35)}
.hero-cta{display:flex;gap:1rem;margin-top:2.5rem;flex-wrap:wrap;justify-content:center}
.hero-scroll{position:absolute;left:50%;bottom:calc(1.75rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:.9rem;font-size:.5625rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-scroll i{display:block;width:1px;height:3.5rem;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:0;width:100%;height:50%;background:#fff;animation:drop 2.4s var(--ease-io) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(200%)}}
.hero-proof{position:absolute;left:var(--pad);bottom:calc(1.75rem + env(safe-area-inset-bottom));z-index:1;font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.62)}
/* line-mask entrances, released when the loader leaves */
.rise{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rise>span{display:block;transform:translateY(112%);transition:transform 1.3s var(--ease)}
.hero-copy .label,.hero-copy .sub,.hero-cta,.hero-scroll,.hero-proof{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.2s var(--ease)}
html.hero-in .rise>span{transform:translateY(0)}
html.hero-in .hero-copy .label,html.hero-in .hero-copy .sub,html.hero-in .hero-cta,html.hero-in .hero-scroll,html.hero-in .hero-proof{opacity:1;transform:none}
html.hero-in .hero-copy .label{transition-delay:.05s}
html.hero-in .rise:nth-of-type(1)>span{transition-delay:.1s}
html.hero-in .rise:nth-of-type(2)>span{transition-delay:.2s}
html.hero-in .hero-copy .sub{transition-delay:.3s}
html.hero-in .hero-cta{transition-delay:.42s}
html.hero-in .hero-scroll,html.hero-in .hero-proof{transition-delay:.9s}
html.loading .rise>span,html.loading .hero-copy .label,html.loading .hero-copy .sub,html.loading .hero-cta,html.loading .hero-scroll,html.loading .hero-proof{transition:none}
html.js .hero-media picture{opacity:0;transition:opacity .9s ease}
html.js .hero.poster-in .hero-media picture{opacity:1}
html:not(.js) .rise>span,html:not(.js) .hero-copy .label,html:not(.js) .hero-copy .sub,html:not(.js) .hero-cta,html:not(.js) .hero-scroll,html:not(.js) .hero-proof{transform:none;opacity:1}

/* ---------- reveal system ---------- */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.2s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease-io)}
html.js .rv-img img{transform:scale(1.1);transition:transform 1.8s var(--ease-io)}
html.js .rv-img.in{clip-path:inset(0 0 0 0)}
html.js .rv-img.in img{transform:none}
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-io)}
.on-dark .rule{background:var(--line-dark)}
.rule.in{transform:scaleX(1)}
[style*="--d"]{transition-delay:var(--d)!important}

/* plates: a photograph with its caption */
.plate{position:relative}
.plate .frame{overflow:hidden;background:var(--ground-2)}
.plate img{width:100%;height:auto;transition:transform 1.4s var(--ease)}
.plate a:focus-visible img{transform:scale(1.035)}
.cap{display:flex;flex-direction:column;gap:.4rem;margin-top:1.1rem;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft)}
.cap b{font-family:var(--serif);font-weight:400;font-size:1.4rem;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.15}
.cap b a{position:relative}
.cap b a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass-rule);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.on-dark .cap b{color:#fff}
.cap .go,.folio-name .go{display:inline-flex;align-items:center;gap:.65rem;margin-top:.45rem;align-self:flex-start;font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft);padding-bottom:.3rem;border-bottom:1px solid var(--line);transition:color .4s ease,border-color .4s ease}
.cap .go svg,.folio-name .go svg{width:1.5rem;height:.6rem;flex:none;transition:transform .5s var(--ease)}
/* a photograph that opens a page says so under the pointer: one word, centred, on a soft wash */
.frame[data-vp]{position:relative}
/* a quiet translucent button, always there, on every picture that opens a page */
.frame[data-vp]::after{content:attr(data-vp);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;padding:.85rem 1.35rem;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--sans);font-size:.625rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.35);transition:background .5s ease,border-color .5s ease;pointer-events:none}
a:focus-visible>.frame[data-vp]::after,.folio-card:focus-visible .frame[data-vp]::after{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.7)}
/* parallax: the picture is taller than its frame and drifts */
.plx .frame{position:relative}
.plx .frame img{will-change:transform}

/* ---------- statement ---------- */
.statement-sec{padding:var(--sec) 0 calc(var(--sec) * .55)}
.statement{font-family:var(--serif);font-size:clamp(2rem,4.4vw,4.35rem);line-height:1.08;text-align:center;max-width:22ch;margin-inline:auto;letter-spacing:-.005em;text-wrap:balance}
.statement .w{display:inline-block;opacity:.18;transition:opacity 1s ease}
.statement.in .w{opacity:1}

/* ---------- the two doors ----------
   The first choice a visitor makes is the one they already understand: a home, or a place of
   business. Two tall photographs side by side, tops level, each with its name, a line on what the
   studio does there, the services as small underlined words, and the way through to the portfolio. */
.doors{padding:var(--sec) 0 calc(var(--sec) * .9)}
.doors-head{grid-column:1/8;margin-bottom:clamp(3rem,6vw,5rem)}
.doors-head h2{max-width:13ch}
.door{display:flex;flex-direction:column}
.door-res{grid-column:1/7}
.door-com{grid-column:7/13}
.door .frame{aspect-ratio:4/5}
.door .frame img{height:100%;object-fit:cover}
.door-copy{padding-top:1.75rem}
.door h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,4.2vw,3.9rem);line-height:1;letter-spacing:-.005em}
.door h3 em{font-style:normal;color:var(--brass)}
.door-copy .body{margin-top:1.1rem;max-width:40ch}
.door-links{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem 1.5rem}
.door-links a{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding-bottom:.3rem;border-bottom:1px solid var(--line);transition:border-color .4s ease,color .4s ease}
.door-links a:focus-visible{border-color:var(--ink)}
.door-copy .arrow{margin-top:2rem;align-self:flex-start}

/* ---------- intro ---------- */
.intro{padding:0 0 var(--sec)}
.intro-copy{grid-column:1/5;align-self:start;position:sticky;top:8rem;padding-top:.4rem}
.intro-copy .serif-lede{margin-bottom:1.6rem}
.intro-copy .arrow{margin-top:2rem}
.intro-plate{grid-column:6/13}
@supports (animation-timeline:view()){
  .intro-plate .frame img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
@keyframes drift{from{transform:translateY(-6%) scale(1.12)}to{transform:translateY(6%) scale(1.12)}}

/* ---------- selected work ---------- */
.work{padding:0 0 var(--sec)}
.work-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;gap:2rem;padding-bottom:1.75rem;margin-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line)}
.work-head h2{max-width:14ch}
/* four rooms in two level rows of two, the same frame every time, with one line of text between the rows */
.work-a,.work-c{grid-column:1/7}
.work-b,.work-d{grid-column:7/13}
.work .plate .frame{aspect-ratio:4/5}
.work .plate .frame img{height:100%;object-fit:cover}
.work-b .frame img{object-position:50% 55%}
.work-c .frame img{object-position:50% 45%}
.work-mid{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem);align-items:end;padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,4.5vw,4rem);margin-top:clamp(2rem,4vw,3.5rem);border-top:1px solid var(--line)}
.work-mid .serif-lede{grid-column:1/7;max-width:22ch}
.work-mid .work-note{grid-column:8/13;max-width:38ch}
.work-mid .arrow{margin-top:1.5rem}
.work-more{grid-column:1/-1;display:flex;justify-content:center;margin-top:clamp(3.5rem,7vw,6rem)}

/* ---------- light band ---------- */
.band{background:var(--plum);color:#fff;padding:calc(var(--sec) * .8) 0;overflow:hidden}
.band .container{display:flex;flex-direction:column;align-items:center;text-align:center}
.band-glow{position:absolute;left:50%;top:50%;width:min(70vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(201,169,98,.16) 0%,rgba(201,169,98,0) 60%);pointer-events:none}
.band .statement{color:#fff;max-width:26ch;font-size:clamp(1.8rem,3.6vw,3.5rem)}
.band .rule{width:4rem;margin-top:2.75rem;background:var(--brass-rule);transform-origin:center}

/* ---------- services ---------- */
.services{padding:var(--sec) 0}
.services-head{grid-column:1/6}
.services-head .body{margin-top:1.5rem}
.services-view{grid-column:8/13;grid-row:1/4;align-self:start;position:sticky;top:7rem;aspect-ratio:4/5;background:var(--ground-2);overflow:hidden}
.services-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 1.6s var(--ease)}
.services-view img.on{opacity:1;transform:none}
.services-view .cap{position:absolute;left:1.25rem;right:1.25rem;bottom:1.1rem;color:rgba(255,255,255,.85);margin:0;gap:.25rem;z-index:1}
.services-view .cap b{color:#fff;font-size:1.25rem}
.services-view::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(26,22,32,.55),rgba(26,22,32,0));pointer-events:none}
.ledger{grid-column:1/7;list-style:none;margin:clamp(3rem,5vw,4.5rem) 0 0;padding:0;border-top:1px solid var(--line)}
.ledger li{border-bottom:1px solid var(--line)}
.ledger a{display:grid;grid-template-columns:3.25rem 1fr auto;align-items:start;column-gap:1.25rem;row-gap:.85rem;padding:2rem 0 2.1rem;transition:padding .5s var(--ease)}
.ledger a:focus-visible{padding-left:.75rem}
.ledger .n{font-family:var(--serif);font-size:1.05rem;color:var(--plum-soft);padding-top:.55rem;transition:color .4s ease}
.ledger li.on .n{color:var(--brass)}
.ledger .name{font-family:var(--serif);font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1.05;color:var(--ink);letter-spacing:-.005em}
.ledger .name em{display:block;font-style:italic;color:var(--plum-soft);font-size:.56em;margin-top:.4rem;letter-spacing:0}
.ledger .desc{grid-column:2;font-family:var(--sans);font-size:.8125rem;line-height:1.75;color:var(--ink-70);max-width:42ch}
.services-all{grid-column:1/7;margin-top:2rem;justify-self:start}
.ledger .go{width:1.5rem;height:.6rem;color:var(--plum-soft);opacity:0;transform:translateX(-8px);margin-top:1rem;transition:opacity .4s ease,transform .5s var(--ease)}
.ledger li.on .go{opacity:1;transform:none}
/* a grouped row lists its pages beneath the description, so every service is one click from Home */
.ledger li.has-subs>a{padding-bottom:1.1rem}
.ledger .subs{list-style:none;margin:0;padding:0 0 2.1rem calc(3.25rem + 1.25rem);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.ledger .subs li{border:0}
.ledger .subs a{display:inline-block;grid-template-columns:none;padding:0 0 .3rem;font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft);border-bottom:1px solid var(--line);transition:color .4s ease,border-color .4s ease}
.ledger .subs a:focus-visible{color:var(--ink);border-color:var(--ink)}

/* ---------- process ---------- */
.process{background:var(--plum-deep);color:#fff;overflow:hidden}
.process-media{position:absolute;inset:0;z-index:0}
.process-media img{width:100%;height:120%;object-fit:cover;opacity:.55;will-change:transform}
.process-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,22,32,.55),rgba(26,22,32,.35) 50%,rgba(26,22,32,.75))}
.process .container{position:relative;z-index:1;padding-top:var(--sec);padding-bottom:var(--sec)}
.process-head{max-width:22ch;margin-bottom:clamp(4rem,9vw,8rem)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-dark)}
.steps li{padding:2rem 2rem 0 0;position:relative}
.steps li+li{border-left:1px solid var(--line-dark);padding-left:2rem}
.steps .n{font-family:var(--serif);font-size:clamp(2.5rem,4vw,3.75rem);line-height:1;color:var(--brass);display:block;margin-bottom:1.25rem}
.steps h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2vw,1.9rem);margin-bottom:.75rem}
.steps p{font-size:.875rem;line-height:1.8;color:var(--silver);max-width:32ch}
.process .arrow{color:#fff}
.process-more{margin-top:clamp(2.75rem,5vw,4rem)}

/* ---------- studio ---------- */
.studio{padding:var(--sec) 0;background:var(--ground-2)}
.studio-plate{grid-column:1/6}
.studio-copy{grid-column:7/13;align-self:center;max-width:36rem}
.studio-copy h2{margin-bottom:1.75rem}
.studio-copy .arrow{margin-top:2.25rem}
.studio-facts{margin:2.5rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.studio-facts li{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.8125rem;color:var(--ink-70)}
.studio-facts li b{font-weight:500;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft);padding-top:.15rem}

/* ---------- contact ---------- */
.contact{background:var(--plum-deep);color:#fff;padding:var(--sec) 0 calc(var(--sec) * .7)}
.contact .grid{align-items:center}
.contact-copy{grid-column:1/6}
.contact-copy h2{max-width:12ch}
.contact-copy .serif-lede{color:var(--silver);margin-top:1.5rem;font-size:clamp(1.15rem,1.4vw,1.35rem)}
.contact-ways{margin:2.75rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line-dark)}
.contact-ways li{border-bottom:1px solid var(--line-dark);padding:1rem 0;display:grid;grid-template-columns:7rem 1fr;gap:1rem;align-items:baseline}
.contact-ways b{font-weight:500;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.contact-ways a{font-family:var(--serif);font-size:1.35rem;position:relative}
.contact-ways a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass-rule);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.serving{margin-top:1.5rem;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft)}
.form-wrap{grid-column:7/13;position:relative}
.form{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;row-gap:2rem}
.field{display:flex;flex-direction:column;gap:.4rem;position:relative;min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);transition:color .3s ease}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-dark);border-radius:0;color:#fff;font-family:var(--sans);font-size:16px;line-height:1.5;padding:.55rem 0 .7rem;outline:0;transition:border-color .4s ease;appearance:none;-webkit-appearance:none}
.field textarea{min-height:7rem;resize:vertical}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23817d91' stroke-width='1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .25rem center;padding-right:1.5rem}
.field select option{background:var(--plum-deep);color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--brass)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.field:focus-within label{color:var(--brass)}
.field .err{display:none;font-size:.6875rem;color:#e6b8b0;letter-spacing:.06em;margin-top:.25rem}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-bottom-color:#e6b8b0}
.form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:.5rem}
.form-foot .note{font-size:.6875rem;letter-spacing:.1em;color:var(--plum-soft);max-width:26rem;line-height:1.7}
.form-error{display:none;grid-column:1/-1;font-size:.8125rem;color:#e6b8b0;border-top:1px solid rgba(230,184,176,.4);padding-top:1rem}
.form.failed .form-error{display:block}
.form-success{display:none;padding:2.5rem 0 0;border-top:1px solid var(--brass-rule)}
.form-success.show{display:block}
.form-success p{font-family:var(--serif);font-size:clamp(1.5rem,2vw,2rem);line-height:1.25;max-width:24ch}
.form-success .label{margin-top:1.5rem}
.form.sent{display:none}

/* ---------- footer ---------- */
.site-footer{background:var(--plum-deep);color:#fff;padding:0 0 calc(2rem + env(safe-area-inset-bottom));border-top:1px solid var(--line-dark)}
.foot-mark{display:block;padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(2rem,4vw,3.5rem)}
.foot-mark svg{width:100%;height:auto;display:block;fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.2;transition:stroke 1s ease}
.foot-grid{padding-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--line-dark);row-gap:2.5rem}
.foot-col{grid-column:span 3}
.foot-col.wide{grid-column:span 3}
.foot-col .label{display:block;margin-bottom:1.1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot-col a{font-size:.8125rem;color:var(--silver);transition:color .3s ease}
.foot-col .big{font-family:var(--serif);font-size:1.5rem;color:#fff}
.foot-line{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft)}
.foot-line ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;flex-wrap:wrap}
.foot-line a{color:inherit;text-decoration:none;transition:color .2s}

/* ---------- sticky bar (phone) ---------- */
.msb{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .intro-copy{grid-column:1/6}.intro-plate{grid-column:6/13}
  .services-head{grid-column:1/7}.services-view{grid-column:8/13}.ledger,.services-all{grid-column:1/8}
  .contact-copy{grid-column:1/6}.form-wrap{grid-column:7/13}
}
@media (max-width:900px){
  :root{--nav-h:4.5rem}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .foot-col{grid-column:span 6}
}
@media (max-width:760px){
  :root{--sec:5.5rem}
  body{font-size:15px}
  .cap,.g-note{font-size:.6875rem}
  h1{font-size:clamp(2.5rem,11vw,3.4rem)}
  .hero{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
  .hero-copy{text-align:left;align-items:flex-start;width:100%;margin-top:auto}
  .hero-copy .sub{font-size:1.1rem;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .hero-cta{width:100%;flex-direction:column;gap:.75rem}
  .hero-cta .btn{width:100%;min-height:3rem}
  .hero-scroll{display:none}
  .hero-proof{bottom:calc(1.25rem + env(safe-area-inset-bottom))}
  .statement{font-size:clamp(1.9rem,8.4vw,2.6rem);max-width:none;text-align:left}
  .band .statement{text-align:center;font-size:clamp(1.6rem,7vw,2.2rem)}
  .intro-copy,.intro-plate,.work-a,.work-b,.work-c,.work-d,.work-mid .serif-lede,.work-mid .work-note,.doors-head,.door-res,.door-com,.services-head,.services-view,.ledger,.services-all,.studio-plate,.studio-copy,.contact-copy,.form-wrap{grid-column:1/-1}
  .intro-copy{position:static;margin-bottom:2.5rem}
  .doors{padding-bottom:calc(var(--sec) * .6)}
  .doors-head{margin-bottom:2.5rem}
  .door-com{margin-top:3.5rem}
  .door h3{font-size:clamp(2.2rem,10vw,2.8rem)}
  .work-head{flex-direction:column;align-items:flex-start}
  .work-b,.work-c,.work-d{margin-top:1.25rem}
  .work-mid{padding:2.5rem 0 1.5rem;margin-top:2.5rem}.work-mid .work-note{margin-top:1.5rem}
  .ledger .subs{padding-left:calc(2rem + .9rem);padding-bottom:1.5rem;gap:.5rem 1.1rem}
  .cap b{font-size:1.25rem}
  .services-view{display:none}
  .foot-col.cont{margin-top:-1.5rem}.foot-col.cont .label{display:none}
  .ledger{margin-top:2rem}
  .ledger a{grid-template-columns:2rem 1fr auto;column-gap:.9rem;row-gap:.6rem;padding:1.5rem 0}
  .ledger .name{font-size:1.7rem}
  .ledger .name em{font-size:.6em}
  .ledger .desc{font-size:.8125rem}
  .work-more .btn{width:100%}
  .steps{grid-template-columns:1fr}
  .steps li{padding:1.75rem 0}
  .steps li+li{border-left:0;border-top:1px solid var(--line-dark);padding-left:0}
  .studio-copy{margin-top:2.5rem}
  /* the form comes first on a phone; the details follow it */
  .contact-copy{display:contents}
  .contact-copy>*{grid-column:1/-1}
  .form-wrap{order:1;margin-top:2.5rem}
  .contact-ways{order:2;margin-top:2.5rem}
  .contact-ways~*{order:3}
  /* on the contact page the opening already carries the title, so the form sits straight under it */
  .page-hero:has(+ .contact-lead) .ph-b{display:none}
  .contact-lead + .contact .contact-copy > :not(.contact-ways){display:none}
  .page-hero+.contact-lead+.contact{padding-top:2.5rem}
  .contact-lead + .contact .form-wrap{margin-top:0}
  .form{grid-template-columns:1fr}
  .field{grid-column:1/-1}
  .foot-col{grid-column:span 12}
  .msb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(26,22,32,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-dark);padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));gap:.6rem;transform:translateY(115%);transition:transform .45s var(--ease)}
  .msb.msb-show{transform:none}
  .msb a{flex:1;min-height:2.85rem;padding:0 .5rem;font-size:.625rem}
  .msb .btn-fill{background:#fff;color:var(--ink);border-color:#fff}
}

/* ---------- hover states ----------
   Every hover style lives here and nowhere else, behind a pointer query, because a touch screen
   has no hover to leave. iOS latches :hover on the first tap: that tap is spent turning the state
   on rather than following the link, so a CTA needs tapping twice, and the state then sticks after
   the page has moved on. Gating it means one tap is one action, and no button is ever left in a
   state it cannot get out of. Keyboard :focus-visible equivalents stay with their own rules above.

   This block sits after the width queries on purpose: `.msb .btn-fill` repaints the sticky bar's
   button and carries the same specificity, so it has to be beaten on source order. Without that,
   hovering it filled the button dark and left the label dark on dark, which read as blank. */
@media (hover:hover) and (pointer:fine){
  .arrow:hover::after{transform:scaleX(1)}
  .arrow:hover svg{transform:translateX(.35rem)}
  .btn:hover::before{transform:scaleY(1)}
  .btn-fill:hover{color:#fff;border-color:var(--ink)}
  .btn-line:hover{color:var(--ink)}
  .btn-ink:hover{color:#fff}
  .nav>a:hover::after,.nav-item>a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav .nav-cta:hover{background:currentColor}
  .nav .nav-cta:hover span{mix-blend-mode:difference;color:#fff}
  .nav-item:hover .nav-drop{opacity:1;visibility:visible;transform:none;transition-delay:.06s,.06s,0s}
  .nav-drop a:hover{color:#fff;background:rgba(255,255,255,.06);padding-left:1.85rem}
  .nav-drop a:hover::after{transform:scaleX(1)}
  .folio-card:hover .frame img,.door .plate a:hover img{transform:scale(1.04)}
  a:hover>.frame[data-vp]::after,.folio-card:hover .frame[data-vp]::after{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.7)}
  .cap .go:hover,.folio-card:hover .go{color:var(--ink);border-color:var(--ink)}
  .cap .go:hover svg,.folio-card:hover .go svg{transform:translateX(.35rem)}
  .jl h2 a:hover{color:var(--plum-soft)}
  .svc-copy h3 a:hover{color:var(--plum-soft)}
  .site-header:has(.nav-item:hover)::before{opacity:1}
  .plate a:hover img{transform:scale(1.04)}
  .door-links a:hover,.ledger .subs a:hover{color:var(--ink);border-color:var(--ink)}
  .ledger .subs a:hover{padding-left:0}
  .cap b a:hover::after{transform:scaleX(1)}
  .ledger a:hover{padding-left:.75rem}
  .ledger a:hover .n{color:var(--brass)}
  .ledger a:hover .go{opacity:1;transform:none}
  .contact-ways a:hover::after{transform:scaleX(1)}
  .foot-mark:hover svg{stroke:#fff}
  .foot-col a:hover{color:#fff}
  .foot-line a:hover{color:#fff}
}

/* Touch gets its feedback from the press instead, which releases when the finger lifts and so
   can never stick. Quick on the way in, so the tap reads as heard; the base timing carries it
   back out. Same source-order reason for sitting here: it has to outrank `.msb .btn-fill`. */
@media (hover:none){
  .btn:active::before{transform:scaleY(1);transition-duration:.12s}
  .btn-fill:active{color:#fff;border-color:var(--ink);transition-duration:.12s}
  .btn-line:active{color:var(--ink);transition-duration:.12s}
  .btn-ink:active{color:#fff;transition-duration:.12s}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loader{display:none}
  .rise>span,.hero-copy .label,.hero-copy .sub,.hero-cta,.hero-scroll,.hero-proof{transform:none!important;opacity:1!important;transition:none!important}
  html.js .rv,html.js .rv-img{opacity:1;transform:none;clip-path:none;transition:none}
  html.js .rv-img img{transform:none;transition:none}
  .rule{transform:none}
  .statement .w{opacity:1}
  .hero-scroll i::after{animation:none}
  .intro-plate .frame img{animation:none}
  .plx .frame img{transform:none!important}
  .hero-media video{display:none}
  .mnav li>a,.mnav li>button{transform:none;transition:none}
  .btn::before,.btn,.plate img,.ledger a,.services-view img{transition:none}
  .nav-drop,.frame[data-vp]::after{transition:none}
}