/* ==========================================================================
   Blaustern
   Editorial / kinetic-type language. Warm cream ground, deep ink, one accent.

   SHAPE RULE (applies everywhere, no exceptions):
     buttons + pills .......... radius 999px
     cards, media, inputs ..... radius 14px
   COLOR RULE:
     exactly one accent (cobalt) across the whole page, in both themes.
   ========================================================================== */

/* ---------- Fonts ----------
   Three roles, strictly separated. Self-hosted, subset to latin + latin-ext in
   one file per face (no unicode-range splitting), axis-instanced to the ranges
   this site actually uses.

     Bricolage    every heading. A bold low-contrast grotesque: nothing thin to
                  lose at any size, in either theme. Replaced Bodoni Moda, whose
                  Didone hairlines were the readability complaint.
     Newsreader   editorial prose that is not a heading (the pain list, the pull
                  quote). opsz pinned at 16, the text cut.
     Geist        body and UI.  Geist Mono  labels, numerals, captions.
   ---------------------------------------------------------------------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(../fonts/bricolage.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:380 650;font-display:swap;
  src:url(../fonts/newsreader.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:380 700;font-display:swap;
  src:url(../fonts/geist.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/geist-mono.woff2) format('woff2')}
/* The logo wordmark is the only Newsreader above the fold, so it gets its own
   1.6 KB cut containing exactly the nine letters of "Blaustern" instead of
   pulling the full 68 KB face onto the critical path. */
@font-face{font-family:'Blaustern Wordmark';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/wordmark.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --paper:#F7F3EA; --paper-2:#FFFCF6; --paper-3:#EFE9DB;
  --ink:#14120F; --ink-2:#565046;
  --line:rgba(20,18,15,.13); --line-strong:rgba(20,18,15,.26);
  /* Scilla ink, not cobalt. Same hue family as the squill the mark is drawn
     from, saturation pulled well down so the accent stops being the loudest
     thing on a warm, muted page. 7.4:1 on the cream ground - the exact ratio
     the retired #2036D6 held, so nothing downstream loses contrast. */
  --accent:#35479E; --accent-2:#2A3A85; --on-accent:#fff; --accent-soft:rgba(53,71,158,.09);
  /* Petal wash. A real surface, not an alpha tint: this is what lets a block
     read as deliberately filled instead of merely empty. */
  --accent-surface:#DCE2F4;
  --error:#A33232;
  --shadow:0 24px 60px -28px rgba(52,42,25,.42);

  --font-display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Weight rises a step in dark mode: light-on-dark blooms and eats stroke. */
  --w-body:400; --w-med:500; --w-strong:600;
  --w-prose:500; --w-serif-head:600; --w-display:700;
  --track:0em;

  --r-card:14px; --r-pill:999px;
  --header-h:68px;
  --shell:1280px;
  /* Two values, not one. A single uniform gap gave the page no tempo: every
     section arrived with the same pause, so the space read as absence rather
     than pacing. --gap-section is the pause inside an argument; --gap-turn is
     the larger one, spent only at the three narrative turns (into the work,
     into the ink band, into contact). */
  --gap-section:clamp(2.75rem,5.2vw,4.75rem);
  --gap-turn:clamp(4rem,8vw,7.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#131210; --paper-2:#1B1916; --paper-3:#232019;
  --ink:#EAE4D7; --ink-2:#A9A294;
  --line:rgba(234,228,215,.15); --line-strong:rgba(234,228,215,.3);
  --accent:#A9B6E9; --accent-2:#C0C9F0; --on-accent:#0E1330; --accent-soft:rgba(169,182,233,.14);
  --accent-surface:#252B45;
  --error:#FF9B9B;
  --shadow:0 24px 60px -28px rgba(0,0,0,.7);
  --w-body:430; --w-med:530; --w-strong:630;
  --w-prose:530; --w-serif-head:625; --w-display:720;
  --track:.008em;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131210; --paper-2:#1B1916; --paper-3:#232019;
    --ink:#EAE4D7; --ink-2:#A9A294;
    --line:rgba(234,228,215,.15); --line-strong:rgba(234,228,215,.3);
    --accent:#A9B6E9; --accent-2:#C0C9F0; --on-accent:#0E1330; --accent-soft:rgba(169,182,233,.14);
    --accent-surface:#252B45;
    --error:#FF9B9B;
    --shadow:0 24px 60px -28px rgba(0,0,0,.7);
    --w-body:430; --w-med:530; --w-strong:630;
    --w-prose:530; --w-serif-head:625; --w-display:720;
    --track:.008em;
    color-scheme:dark;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;line-height:1.65;font-weight:var(--w-body);letter-spacing:var(--track);
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,dialog{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{fill:currentColor}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-160%);
  background:var(--accent);color:var(--on-accent);padding:.7rem 1.2rem;border-radius:var(--r-pill);font-weight:600;text-decoration:none}
.skip-link:focus{transform:none}

.shell{width:min(100% - 2.5rem,var(--shell));margin-inline:auto}
.section{padding-block:var(--gap-section)}
/* The three narrative turns, and only those, get the wide pause: the page
   opens up when the subject changes and stays tight while it argues. */
.section-work{padding-top:var(--gap-turn)}
.section-why{padding-block:var(--gap-turn)}
.section-contact{padding-top:var(--gap-turn)}

/* Paper grain, fixed + non-interactive so it never repaints on scroll */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grain{mix-blend-mode:screen;opacity:.16}}

/* ---------- Type ---------- */
/* Every heading is the grotesque now, at any size. A bold low-contrast face has
   no hairlines to lose, so the 30px floor the Didone needed is gone. */
.display{font-family:var(--font-display);font-weight:var(--w-display);
  letter-spacing:-.021em;line-height:1.1;text-wrap:balance}
/* Key words are marked with the accent colour, upright, never italic. Colour
   picks the word out instantly and costs nothing in readability, where a
   slanted cut always costs something. */
.display em{font-style:normal;font-weight:var(--w-display);color:var(--accent)}
/* The ceiling was the problem, not the system. Headings capped at 3.5rem
   against 17px body is a 3.3x scale ratio; the studios this page is measured
   against run 5-8x. Raising the ceiling is what claims the width that used to
   sit unused beside every heading. Body, lead and mono labels are unchanged. */
.h2{font-size:clamp(2.2rem,5vw,4.25rem);padding-bottom:.02em}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:1.4rem}
.lead{font-size:clamp(1.06rem,1.7vw,1.28rem);color:var(--ink-2);max-width:44ch;line-height:1.62;
  text-wrap:pretty}

/* German runs long. Let paragraphs break compound words instead of leaving
   canyons of space, and stop last lines stranding a single word. */
p,li,dd,dt,summary{text-wrap:pretty}
.why-pain-item p,.index-body p,.craft-copy p,.faq-body p,.why-about p,
.index-note,.work-note,.work-cap-goal,.fact dd{hyphens:auto;-webkit-hyphens:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;white-space:nowrap;
  padding:.95rem 1.7rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-size:1rem;font-weight:var(--w-strong);text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s,border-color .18s,color .18s}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--accent-soft)}
.btn:active{transform:scale(.975)}
.btn-sm{padding:.62rem 1.15rem;font-size:.92rem}
.btn[disabled]{opacity:.6;cursor:progress}
/* A quiet brand echo on the page's large calls to action: the floret turns,
   nothing else moves. */
.btn-bloom .btn-floret{width:14px;height:14px;opacity:.8;transition:transform .45s var(--ease)}
.btn-bloom:hover .btn-floret,.btn-bloom:focus-visible .btn-floret{transform:rotate(30deg)}
/* Inline prose links draw their underline instead of switching it on. */
.link-draw{position:relative;text-decoration:none;color:var(--ink);font-weight:var(--w-strong)}
.link-draw::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:var(--accent);transition:right .15s var(--ease)}
.link-draw:hover::after,.link-draw:focus-visible::after{right:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.site-header[data-stuck]{border-bottom-color:var(--line)}
@supports not (backdrop-filter:blur(4px)){.site-header{background:var(--paper)}}
.nav-row{height:var(--header-h);display:flex;align-items:center;gap:1.5rem}
/* ---------- Brand lockup ----------
   Mark + wordmark, horizontal. The mark carries the blue, the word stays ink:
   one accent per lockup reads faster than a two-tone word. */
.brand{position:relative;display:inline-flex;align-items:center;gap:.46em;
  font-family:var(--font-serif);font-size:1.42rem;font-weight:var(--w-serif-head);
  line-height:1;text-decoration:none;letter-spacing:-.005em;margin-right:auto}
/* ---------- Brand lockup ----------
   The flower is the supplied artwork, isolated from its paper. The wordmark is
   live text rather than the artwork's own lettering, so it recolours with the
   theme and stays crisp at any size; Newsreader at 500 with open tracking is
   the nearest living relative of the original serif.
   No frame: the hairline circle vanished below ~40px and a filled disc cropped
   the stem, and the plant's silhouette is distinctive enough on its own. */
.brand{display:inline-flex;align-items:center;gap:.5em;margin-right:auto;
  font-family:'Blaustern Wordmark',var(--font-serif);font-size:1.32rem;font-weight:500;
  letter-spacing:.11em;line-height:1;text-decoration:none;white-space:nowrap}
.brand-mark{flex:none;width:1.55em;height:2.1em;
  background:center/contain no-repeat url(../brand/plant-light-88.webp);
  transition:transform .8s var(--ease)}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:rotate(-5deg) scale(1.07)}

/* dark theme swaps in the re-inked variant: same drawing, light ink on dark
   paper, so nothing has to be washed out behind a plate */
:root[data-theme="dark"] .brand-mark{background-image:url(../brand/plant-dark-88.webp)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-mark{background-image:url(../brand/plant-dark-88.webp)}
}

/* ---------- Stacked lockup (footer) ---------- */
.brand-stacked{flex-direction:column;gap:.85rem;margin:0;align-items:center;
  font-size:1.5rem;letter-spacing:.14em}
.brand-stacked .brand-mark{width:clamp(104px,19vw,132px);height:clamp(142px,26vw,180px);
  background-image:url(../brand/plant-light-300.webp)}
:root[data-theme="dark"] .brand-stacked .brand-mark{background-image:url(../brand/plant-dark-300.webp)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-stacked .brand-mark{background-image:url(../brand/plant-dark-300.webp)}
}
.brand-stacked:hover .brand-mark{transform:none}
.brand-rule{display:block;width:118px;height:1px;background:var(--line-strong);position:relative}
.brand-rule::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}

.nav{display:none;gap:1.75rem}
.nav a{text-decoration:none;font-size:.95rem;font-weight:500;color:var(--ink-2);position:relative;padding-block:.35rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent);transition:right .28s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.nav-side{display:flex;align-items:center;gap:.6rem}
.nav-cta{display:none}

.theme-toggle{width:40px;height:40px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);
  background:transparent;display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle-dot{width:15px;height:15px;border-radius:var(--r-pill);background:var(--ink);
  box-shadow:inset -5px -3px 0 0 var(--paper);transition:box-shadow .3s var(--ease),background-color .3s}
:root[data-theme="dark"] .theme-toggle-dot{box-shadow:inset 0 0 0 0 var(--paper);background:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle-dot{box-shadow:inset 0 0 0 0 var(--paper);background:var(--accent)}}

.burger{width:44px;height:44px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);
  background:transparent;display:grid;place-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);transition:transform .28s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}

@media (min-width:1000px){
  :root{--header-h:76px}
  .nav{display:flex}
  .nav-cta{display:inline-flex}
  .nav-cta-mobile{display:none}
  .burger{display:none}
}

/* Mobile menu panel */
@media (max-width:999px){
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;display:flex;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.5rem;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .25s,visibility .25s}
  .nav[data-open]{transform:none;opacity:1;visibility:visible}
  .nav a{font-size:1.3rem;font-family:var(--font-serif);font-weight:var(--w-serif-head);color:var(--ink);
    padding:.85rem 0;border-bottom:1px solid var(--line);min-height:48px;display:flex;align-items:center}
  .nav a::after{display:none}
  /* the CTA is a button first and a nav link second, so it has to win over
     the .nav a rules above (2 classes beats 1 class + 1 type) */
  .nav .nav-cta-mobile{margin-top:1.2rem;border:1.5px solid var(--accent);
    color:var(--on-accent);background:var(--accent);
    font-family:var(--font-sans);font-size:1rem;font-weight:600;
    justify-content:center;padding:.95rem 1.7rem;border-radius:var(--r-pill)}
}

/* ---------- Hero ----------
   The headline spans the whole shell instead of sharing a two-column row with
   the image. That is what allows an 88px display size: in the old split layout
   the copy column was ~620px, which capped the type at 56px and left the width
   beside it doing nothing. Supporting copy and the photo sit in a row beneath.
   No forced 100dvh any more - the work section showing above the fold on a tall
   monitor is a feature, not a bug. */
.hero{position:relative;z-index:2;
  padding-block:clamp(2.25rem,5vw,3.75rem) clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.hero-title{font-size:clamp(2.45rem,6.4vw,5.5rem);padding-bottom:.02em;font-weight:var(--w-display)}
.hero-title em{color:var(--accent)}
/* Top-aligned, not bottom-aligned. Hanging the copy off the bottom edge to
   meet the photograph opened a hole directly under the headline - the exact
   unclaimed space this redesign exists to remove. Reading order wins: headline,
   lead, manifest, call to action, in one uninterrupted column. */
.hero-support{display:grid;gap:clamp(2rem,4.5vw,3rem);align-items:start}
@media (min-width:900px){
  .hero-support{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
/* The scrolling manifest band, reduced to one static line. Same three claims,
   no second moving element competing with the craft stage further down. */
.hero-manifest{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-top:1.5rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2)}
.hero-manifest svg{width:11px;height:11px;flex:none;color:var(--accent);opacity:.85}

/* Shared frame chrome. Lives here for historical reasons but the work cards
   are its main consumer now, so it must survive any hero change. */
.frame{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.frame-bar{display:flex;gap:6px;padding:10px 13px;background:var(--paper-3);border-bottom:1px solid var(--line)}
.frame-bar span{width:9px;height:9px;border-radius:var(--r-pill);background:var(--line-strong)}

/* One photograph, one frame, sitting on the baseline. It used to be the lower
   tile of a two-photo collage with drifting florets and parallax over it, which
   read as staging - exactly the decoration this page is meant to have dropped.
   The studio's only real trust asset gets shown plainly instead. */
.hero-photo{margin:0;overflow:hidden;border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow)}
.hero-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 42%;display:block;
  filter:saturate(.88) contrast(.99)}
/* The caption is what turns a photograph into evidence: unnamed, it reads as
   stock; named, it is the two people the visitor will actually be talking to. */
.hero-photo-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  padding:.85rem 1.05rem;border-top:1px solid var(--line);background:var(--paper-2);
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2)}
.hero-photo-cap svg{width:11px;height:11px;flex:none;color:var(--accent);opacity:.85}
@media (max-width:599px){
  .hero{padding-block:1.75rem 2.25rem}
  .hero-grid{gap:1.25rem}
}

/* ---------- Craft stage ----------
   The code-to-site comparison used to be one cell in a five-cell bento. It is
   now the page's single signature animation, full width inside the ink band. */
.why-craft{margin-block:clamp(3rem,7vw,5rem)}
.craft-stage{margin:0;max-width:1000px;margin-inline:auto}
.craft-media{position:relative;isolation:isolate;display:grid;place-items:center;
  width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-card);
  border:1px solid var(--fact-line);padding:clamp(.8rem,2vw,1.3rem);background:#D8D2C8}
/* Wide and shallow on desktop: the snippet is 13 lines, so a taller frame just
   adds empty editor. The finished screenshot is anchored to its top edge. */
@media (min-width:760px){.craft-media{aspect-ratio:2/1}}

.motion-browser{width:100%;height:100%;overflow:hidden;border:1px solid rgb(20 18 15 / .2);
  border-radius:calc(var(--r-card) - 5px);background:#161109;
  box-shadow:0 18px 34px rgb(35 26 18 / .2)}
.motion-browser-bar{height:24px;display:flex;align-items:center;gap:5px;padding-inline:10px;
  background:#F1EEE8;border-bottom:1px solid rgb(20 18 15 / .16)}
.motion-browser-bar span{width:6px;height:6px;border-radius:var(--r-pill);background:#ADA59A}
.motion-viewport{position:relative;height:calc(100% - 24px);overflow:hidden;background:#171006}
.motion-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.motion-code{--code-size:clamp(.56rem,1.15vw,.84rem);position:absolute;inset:0;overflow:hidden;
  background:#10141D;color:#D8DEE9;font-family:var(--font-mono);font-size:var(--code-size);
  line-height:1.42;text-align:left}
.motion-code-file{height:24px;display:flex;align-items:center;padding-inline:.8rem;
  border-bottom:1px solid rgb(255 255 255 / .09);color:#AAB3C2;background:#151B26;
  font-size:.76em;letter-spacing:.05em}
.motion-code pre{height:calc(100% - 24px);margin:0;padding:.6rem .55rem .65rem 0;overflow:hidden}
.motion-code code{display:block;counter-reset:code-line;white-space:pre;font-size:0;line-height:0}
.motion-code-line{display:block;min-height:1.42em;font-size:var(--code-size);line-height:1.42}
.motion-code-line::before{counter-increment:code-line;content:counter(code-line);display:inline-block;
  width:2.5em;margin-right:1em;text-align:right;color:#596477;user-select:none}
.code-tag,.code-selector{color:#91A4FF}
.code-attr,.code-property{color:#E1C18D}
.code-string{color:#B8CDA8}
.motion-site-reveal{position:absolute;inset:0;overflow:hidden;opacity:1;
  transform:translate3d(-100%,0,0);animation:motion-site-shell 8.2s var(--ease) infinite}
.motion-site-reveal .motion-shot{transform:translate3d(100%,0,0);
  animation:motion-site-image 8.2s var(--ease) infinite}
.motion-reveal-edge{position:absolute;z-index:2;inset:0;pointer-events:none;
  border-right:2px solid #A9B6E9;transform:translate3d(-100%,0,0);
  animation:motion-edge 8.2s var(--ease) infinite}
.motion-reveal-edge::after{content:"";position:absolute;inset:0 0 0 auto;width:18%;
  background:linear-gradient(90deg,transparent,rgb(169 182 233 / .16))}
@keyframes motion-site-shell{
  0%,12%,88%,100%{transform:translate3d(-100%,0,0);opacity:1}
  58%,78%{transform:translate3d(0,0,0);opacity:1}
  82%{transform:translate3d(0,0,0);opacity:0}
  87%{transform:translate3d(-100%,0,0);opacity:0}
}
@keyframes motion-site-image{
  0%,12%,88%,100%{transform:translate3d(100%,0,0)}
  58%,82%{transform:translate3d(0,0,0)}
  87%{transform:translate3d(100%,0,0)}
}
@keyframes motion-edge{
  0%,11%,90%,100%{transform:translate3d(-100%,0,0);opacity:0}
  12%{transform:translate3d(-100%,0,0);opacity:1}
  58%{transform:translate3d(0,0,0);opacity:1}
  62%{transform:translate3d(0,0,0);opacity:0}
  87%{transform:translate3d(-100%,0,0);opacity:0}
}
.js .craft-stage .motion-site-reveal,
.js .craft-stage .motion-site-reveal .motion-shot,
.js .craft-stage .motion-reveal-edge{animation-play-state:paused}
.js .craft-stage.is-playing .motion-site-reveal,
.js .craft-stage.is-playing .motion-site-reveal .motion-shot,
.js .craft-stage.is-playing .motion-reveal-edge{animation-play-state:running}
.craft-copy{display:grid;gap:.6rem;margin-top:clamp(1.2rem,3vw,1.8rem)}
.craft-copy h3{font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.15}
.craft-copy p{color:var(--fact-muted);max-width:62ch;font-size:1rem}
@media (min-width:900px){
  .craft-copy{grid-template-columns:.85fr 1.15fr;gap:2.5rem;align-items:start}
}

/* ---------- Services index ---------- */
.index-list{margin-top:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--line)}
.index-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1rem 1.3rem;align-items:center;
  padding-block:clamp(1.6rem,3.2vw,2.4rem);border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease),padding-inline .3s var(--ease)}
.js .index-row{cursor:pointer}
.index-num{font-family:var(--font-display);font-size:clamp(1.35rem,2.6vw,2rem);
  color:var(--ink-2);line-height:1;font-weight:var(--w-display);font-style:normal;letter-spacing:-.02em;
  transition:color .25s var(--ease)}
.index-row:hover .index-num,.index-row:focus-within .index-num{color:var(--accent)}
.index-body h3{font-family:var(--font-display);font-size:clamp(1.3rem,2.5vw,1.85rem);
  font-weight:var(--w-display);letter-spacing:-.015em;line-height:1.2;margin-bottom:.42rem}
.index-body p{color:var(--ink-2);max-width:58ch;font-size:1rem}
/* A number per service. The audience is price-anxious and mostly asks by
   email; a visible starting figure removes the one question that stops people
   writing at all. Mono and small, so it anchors without becoming a price list. */
.index-price{margin-top:.72rem;font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.index-link{width:48px;height:48px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);
  display:grid;place-items:center;flex:none;transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.index-link svg{width:19px;height:19px}
.index-row:hover .index-link,.index-link:focus-visible{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent);transform:translate(2px,-2px)}
/* Responsive layout and animations are not orderable items; they are in every
   build, so they close the list instead of padding it. */
.index-note{margin-top:clamp(1.6rem,3.5vw,2.4rem);color:var(--ink-2);max-width:64ch;font-size:1rem}
@media (min-width:900px){
  .index-row{grid-template-columns:6rem 1fr auto;gap:2rem}
  .index-row:hover{background:var(--accent-surface);padding-inline:1.4rem}
}

/* ---------- Process steps ----------
   Three columns. This was three full-height sticky cards carrying the same
   nine lines of content. */
/* A tonal ground rather than more hairlines. Whitespace bounded by a surface
   change reads as deliberate; the same whitespace between two 1px rules reads
   as a gap nobody filled. This is the page's quiet band, the ink section is
   its loud one. */
.section-process{position:relative;z-index:2;background:var(--paper-2);
  border-block:1px solid var(--line)}
.steps{margin-top:clamp(2.5rem,6vw,4rem);display:grid;gap:clamp(2.5rem,6vw,3rem)}
.step{display:grid;gap:.75rem;align-content:start}
.step-visual{display:grid;place-items:center;height:clamp(170px,30vw,215px);
  margin-bottom:.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.step-shot{max-height:clamp(170px,30vw,215px);max-width:100%;width:auto;height:auto;
  object-fit:contain;filter:drop-shadow(0 14px 22px rgba(52,42,25,.24))}
.step-shot-structure{filter:drop-shadow(0 14px 22px rgba(52,42,25,.24)) drop-shadow(0 0 1px rgba(52,42,25,.2))}
:root[data-theme="dark"] .step-shot{filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
:root[data-theme="dark"] .step-shot-structure{filter:drop-shadow(0 14px 24px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.2))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .step-shot{filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
  :root:not([data-theme="light"]) .step-shot-structure{filter:drop-shadow(0 14px 24px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.2))}
}
.step-num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.2em;color:var(--accent)}
.step h3{font-family:var(--font-display);font-size:clamp(1.45rem,2.6vw,1.85rem);
  font-weight:var(--w-display);letter-spacing:-.015em;line-height:1.18;margin-bottom:.3rem}
.tick-list{display:grid;gap:.6rem}
.tick-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem}
.tick-list svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:.32rem}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:2.6rem}}

/* ---------- Work grid ----------
   This was an auto-scrolling rail: six concepts at 470px, roughly two and a
   half of them visible, the rest behind a drag or a pair of arrow buttons. The
   page's strongest content had its smallest, most effortful presentation. Now
   all six are on screen, static, at up to 700px.

   Note on sizing: the concept screenshots are 700px native, so nothing here is
   allowed to exceed that. The two featured rows get their hierarchy from the
   full-width row and a caption column set at heading scale, not from stretching
   a 700px image across a 1280px shell. */
.section-work{position:relative;z-index:2}
.work-head{margin-bottom:clamp(2rem,5vw,3rem)}
.work-note{color:var(--ink-2);margin-top:1.1rem;max-width:54ch;font-size:1.02rem}

.work-grid{display:grid;gap:clamp(2.25rem,4.5vw,3.5rem)}
.work-item{display:grid;gap:1.05rem;align-content:start}
.work-card{overflow:hidden}
.work-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
/* one card silhouette for every concept, whatever the screenshot's own ratio */
.work-zoom img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top center;
  transition:transform .5s var(--ease)}
.work-item:hover .work-zoom img,.work-item:focus-within .work-zoom img{transform:scale(1.02)}
/* Every concept carries the intent behind it, so the grid shows thinking
   rather than screenshots. */
.work-cap{display:grid;gap:.4rem;align-content:start}
.work-cap-name{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);
  font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.work-cap-name svg{width:13px;height:13px;color:var(--accent);transition:transform .25s var(--ease)}
.work-cap-goal{color:var(--ink-2);font-size:.92rem;line-height:1.5;max-width:40ch}
.work-item:hover .work-cap-name svg,
.work-item:focus-within .work-cap-name svg{transform:translate(2px,-2px)}

@media (min-width:860px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,2.5rem)}
  .work-item-wide{grid-column:1 / -1;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:clamp(1.75rem,3.5vw,3.25rem);align-items:center}
  /* The featured pair spends its extra width on type, not on pixels it does
     not have: the goal line steps up to reading size and gets room to breathe. */
  .work-item-wide .work-cap{gap:.8rem}
  .work-item-wide .work-cap-goal{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.55;max-width:32ch}
}

/* ---------- Why us ----------
   The page's one inverted band, and the only place the palette flips: cream
   above, cream below. Local tokens keep the light and dark variants in sync,
   and the accent is lifted to its dark-ground tint so it clears WCAG AA on ink.
   This section replaces what used to be four: pain points, values bento,
   facts and about. */
.section-why{position:relative;z-index:2;
  --fact-bg:var(--ink);--fact-fg:#F7F3EA;--fact-muted:rgba(247,243,234,.74);--fact-line:rgba(247,243,234,.2);
  --accent:#A9B6E9;--accent-2:#C0C9F0;--on-accent:#0E1330;--accent-soft:rgba(169,182,233,.16);
  background:var(--fact-bg);color:var(--fact-fg)}
:root[data-theme="dark"] .section-why{--fact-bg:var(--paper-3);--fact-fg:var(--ink);
  --fact-muted:var(--ink-2);--fact-line:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .section-why{
  --fact-bg:var(--paper-3);--fact-fg:var(--ink);--fact-muted:var(--ink-2);--fact-line:var(--line)}}
.section-why .h2,.section-why h3{color:var(--fact-fg)}
.section-why .display em{color:var(--accent)}
.section-why .eyebrow{color:var(--fact-muted)}

/* Problem framing: the two sharpest lines, not a four-item section. */
.why-pain{margin-top:clamp(2rem,5vw,3rem);display:grid;gap:0}
.why-pain-item{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.4rem;align-items:start;
  padding-block:clamp(1.4rem,3vw,2rem);border-top:1px solid var(--fact-line)}
.why-pain-item:last-child{border-bottom:1px solid var(--fact-line)}
.why-pain-num{font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--accent);
  letter-spacing:.08em;padding-top:.62rem}
.why-pain-item p{font-family:var(--font-serif);font-size:clamp(1.18rem,2.4vw,1.7rem);
  line-height:1.46;max-width:34ch;font-weight:var(--w-prose)}
@media (min-width:820px){.why-pain-item{grid-template-columns:5rem 1fr}}
.why-turn{display:flex;gap:1rem;align-items:flex-start;margin-top:clamp(1.8rem,4vw,2.6rem);
  font-size:clamp(1.05rem,2vw,1.28rem);max-width:46ch;font-weight:500}
.turn-arrow{width:22px;height:22px;flex:none;color:var(--accent);margin-top:.35rem}

/* The numbers, now a proof strip inside the band rather than their own section. */
.facts{display:grid;gap:0}
.fact{padding-block:1.7rem;border-top:1px solid var(--fact-line);display:grid;gap:.5rem}
.fact:last-child{border-bottom:1px solid var(--fact-line)}
.fact-num{font-size:clamp(3.2rem,8vw,6.5rem);line-height:.95;font-weight:var(--w-display);
  display:flex;align-items:baseline;gap:.12em;font-variant-numeric:tabular-nums}
.fact-unit{font-family:var(--font-display);font-size:.34em;font-style:normal;
  color:var(--accent);font-weight:var(--w-display);letter-spacing:-.01em}
.fact dd{color:var(--fact-muted);max-width:34ch;font-size:1rem}
@media (min-width:720px){
  .facts{grid-template-columns:repeat(2,1fr);column-gap:3rem}
  .fact:nth-child(2){border-top:1px solid var(--fact-line)}
  .fact:nth-last-child(2){border-bottom:1px solid var(--fact-line)}
}
@media (min-width:1080px){.facts{grid-template-columns:repeat(4,1fr);column-gap:2rem}}

/* Studio introduction, one paragraph. */
.why-about{margin-top:clamp(3rem,7vw,4.5rem)}
.why-about-title{font-size:clamp(1.9rem,3.8vw,3rem);margin-bottom:.9rem}
.why-about p{color:var(--fact-muted);max-width:60ch}
.why-about .btn{margin-top:1.8rem}

/* ---------- FAQ ---------- */
.section-faq{position:relative;z-index:2}
.faq-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
.faq-head p{color:var(--ink-2);margin-top:1rem;max-width:34ch}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:1.35rem;cursor:pointer;list-style:none;min-height:48px;font-family:var(--font-display);
  font-size:clamp(1.04rem,2vw,1.24rem);font-weight:var(--w-med);line-height:1.46}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-mark{width:19px;height:19px;flex:none;color:var(--accent);margin-top:.3rem;transition:transform .3s var(--ease)}
.faq-item[open] .faq-mark{transform:rotate(135deg)}
.faq-body{overflow:hidden}
.faq-body p{color:var(--ink-2);padding-bottom:1.5rem;max-width:62ch}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .faq-item[open] .faq-body{animation:faq-in .32s var(--ease)}
}
@media (min-width:960px){.faq-grid{grid-template-columns:.72fr 1fr}}

/* ---------- Contact ---------- */
.section-contact{position:relative;z-index:2}
.contact-grid{display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:start}
.contact-intro>p{color:var(--ink-2);margin-top:1.2rem;max-width:46ch}
.contact-request{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.4rem,3.5vw,2.35rem);box-shadow:var(--shadow)}
.contact-form-label{font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.contact-form{display:grid;gap:1.25rem;margin-top:1rem}
.form-field{display:grid;gap:.42rem}
.form-field label{font-size:.96rem;font-weight:var(--w-strong);color:var(--ink)}
.select-control{position:relative}
.select-control select,.form-field textarea{width:100%;border:1.5px solid var(--line-strong);
  border-radius:var(--r-card);background:var(--paper);color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.select-control select{min-height:56px;padding:.85rem 3.1rem .85rem 1rem;
  appearance:none;-webkit-appearance:none;cursor:pointer}
.select-control svg{position:absolute;top:50%;right:1rem;width:18px;height:18px;pointer-events:none;
  color:var(--accent);transform:translateY(-50%)}
.form-field textarea{min-height:180px;padding:1rem;line-height:1.55;resize:vertical}
.form-field textarea::placeholder{color:color-mix(in srgb,var(--ink-2) 80%,transparent);opacity:1}
.select-control select:hover,.form-field textarea:hover{border-color:var(--ink-2)}
.select-control select:focus,.form-field textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);outline:0}
.select-control select[aria-invalid="true"],.form-field textarea[aria-invalid="true"]{border-color:var(--error);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--error) 12%,transparent)}
.form-help{color:var(--ink-2);font-size:.82rem;line-height:1.5}
.field-error{min-height:1.3em;color:var(--error);font-size:.84rem;font-weight:var(--w-med);line-height:1.45}
.form-submit{justify-self:start}
html:not(.js) .form-submit{display:none}
.form-submit svg{width:20px;height:20px}
.contact-noscript{padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r-card)}
.contact-direct-note{margin-top:1.35rem;padding-top:1.15rem;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:.9rem;max-width:50ch}
.contact-direct-note a{color:var(--ink);font-weight:var(--w-strong)}
.contact-privacy{display:flex;align-items:flex-start;gap:.7rem;margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid var(--line);color:var(--ink-2);font-size:.9rem}
.contact-privacy svg{width:20px;height:20px;flex:none;margin-top:.15rem;color:var(--accent)}
.form-status{font-size:.9rem;font-weight:var(--w-med);min-height:1.4em;color:var(--ink-2)}
.form-status.is-error{color:var(--error)}
.contact-request.is-service-picked{animation:contact-picked .8s var(--ease)}
@keyframes contact-picked{0%,100%{border-color:var(--line);box-shadow:var(--shadow)}45%{border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft),var(--shadow)}}
@media (min-width:960px){.contact-grid{grid-template-columns:.9fr 1.1fr}}
@media (max-width:520px){
  .form-submit{width:100%}
  .form-field textarea{min-height:160px}
}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:2;border-top:1px solid var(--line);
  padding-block:clamp(3rem,7vw,4.5rem)}
/* The stacked lockup is a tall composition, so the footer is one centred
   column at every width rather than a three-slot row. */
.footer-row{display:flex;flex-direction:column;align-items:center;gap:1.7rem;text-align:center}
.footer-links{justify-content:center}
.footer-links{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer-links button{background:none;border:0;padding:.35rem 0;cursor:pointer;font-size:.93rem;
  color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.footer-links button:hover{color:var(--ink)}
.footer-copy{font-size:.93rem;color:var(--ink-2)}
@media (min-width:820px){.footer-links{justify-content:center}}

/* ---------- Dialogs ---------- */
.dlg{border:0;padding:0;background:transparent;max-width:min(100% - 2rem,640px);width:100%;color:var(--ink)}
.dlg::backdrop,.lightbox::backdrop{background:rgba(15,12,8,.62);backdrop-filter:blur(3px)}
.dlg-inner{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,4vw,2.5rem);position:relative;max-height:min(84dvh,720px);overflow-y:auto}
.dlg-inner h2{font-family:var(--font-display);font-size:1.58rem;font-weight:var(--w-display);margin-bottom:1.1rem;padding-right:2.5rem}
.dlg-inner p{margin-bottom:.9rem;color:var(--ink-2);font-size:.98rem}
.dlg-inner p strong{color:var(--ink)}
.dlg-inner [data-placeholder]{border-left:2px solid var(--accent);padding-left:.9rem;font-family:var(--font-mono);font-size:.86rem}
/* No synthetic oblique: Geist ships no italic, so this reads as a note via
   size and rule rather than a faked slant. */
.dlg-hint{border-top:1px solid var(--line);padding-top:.9rem;font-size:.86rem!important}
.dlg-list{display:grid;gap:.5rem;margin-bottom:1rem}
.dlg-list li{font-size:.95rem;color:var(--ink-2)}
.dlg-list strong{color:var(--ink);display:block}
.dlg-close{position:absolute;top:.9rem;right:.9rem;width:42px;height:42px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);background:var(--paper-2);display:grid;place-items:center;cursor:pointer;z-index:2}
.dlg-close:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.dlg-close svg{width:16px;height:16px}

.lightbox{border:0;background:transparent;padding:0;max-width:min(100% - 1.5rem,1100px);width:100%}
.lightbox img{width:100%;border-radius:var(--r-card);border:1px solid var(--line);background:var(--paper-2)}
.lightbox-close{position:fixed;top:1rem;right:1rem}

/* ---------- Brand entrance ----------
   Botanical, so it grows rather than pops. Header: the six tepals open outward
   from the centre in sequence, the stamens follow, the wordmark wipes in.
   Footer: the whole plant builds - arc drawn, stem up, leaves unfurled, bud
   swung out, bloom opened, dots settled - triggered when it scrolls into view.
   Both are pure CSS; the footer reuses the existing reveal observer. */
@keyframes bs-bloom-in{
  0%{opacity:0;clip-path:circle(0% at 50% 44%);transform:scale(.94)}
  100%{opacity:1;clip-path:circle(80% at 50% 44%);transform:scale(1)}
}
@keyframes bs-word-in{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-.3em)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes bs-fade{from{opacity:0}to{opacity:1}}
@keyframes bs-rule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* The artwork is a watercolour, so it arrives the way a wash spreads: a soft
     circular bleed out of the centre of the bloom, then the wordmark wipes in.
     Header once per session, footer when it scrolls into view. */
  :root[data-intro] .site-header .brand-mark{animation:bs-bloom-in .78s var(--ease) both}
  :root[data-intro] .site-header .brand-word{animation:bs-word-in .5s .3s var(--ease) both}
  .brand-stacked.is-in .brand-mark{animation:bs-bloom-in 1.05s var(--ease) both}
  .brand-stacked.is-in .brand-word{animation:bs-word-in .55s .5s var(--ease) both}
  .brand-stacked.is-in .brand-rule{transform-origin:50% 50%;animation:bs-rule .55s .78s var(--ease) both}
}

/* ---------- Motion ----------
   Shorter travel, shorter duration. At 20px over .7s the reveal was a
   performance you waited out; at 12px over .45s a section reads as placed by
   the time your eye arrives. The craft-stage wipe stays the one thing on this
   page that is allowed to take its time.

   Hero parallax was removed with the collage: it moved two photographs against
   each other, and there is one photograph now. */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .work-item:hover .work-zoom img,.work-item:focus-within .work-zoom img{transform:none}
  /* The finished site takes the RIGHT half, not the left. The snippet is
     left-aligned and only ~350px wide, so clipping the site to the left half
     parked it directly on top of the code and left a blank panel beside it -
     the one comparison this fallback exists to show. Code left, site right also
     matches the direction the wipe travels when motion is allowed. */
  .motion-site-reveal{animation:none!important;transform:none!important;opacity:1;
    clip-path:inset(0 0 0 50%)}
  .motion-site-reveal .motion-shot{animation:none!important;transform:none!important}
  .motion-reveal-edge{inset:0 auto 0 50%;width:2px;border:0;background:#A9B6E9;
    animation:none!important;transform:translateX(-1px)!important;opacity:1}
  .motion-reveal-edge::after{display:none}
}