/* ==========================================================================
   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);
  --accent:#2036D6; --accent-2:#182BAE; --on-accent:#fff; --accent-soft:rgba(32,54,214,.08);
  --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;
  --gap-section:clamp(5rem,11vw,10rem);
  --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:#8FA3FF; --accent-2:#A6B6FF; --on-accent:#0E1330; --accent-soft:rgba(143,163,255,.12);
  --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:#8FA3FF; --accent-2:#A6B6FF; --on-accent:#0E1330; --accent-soft:rgba(143,163,255,.12);
    --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)}
.section-lead{max-width:56ch;color:var(--ink-2);margin-top:1.1rem;font-size:1.06rem}

/* 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)}
.h2{font-size:clamp(1.95rem,4.6vw,3.5rem);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}
.pain-item p,.index-body p,.bento-cell p,.stack-text p,.faq-body p,
.about-copy p,.section-lead,.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}

/* ---------- 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 ---------- */
.hero{position:relative;z-index:2;min-height:calc(100dvh - var(--header-h));display:flex;align-items:center;
  padding-block:clamp(2.5rem,7vw,5rem) clamp(3rem,8vw,6rem)}
.hero-grid{display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center}
.hero-title{font-size:clamp(2.15rem,4.4vw,3.5rem);padding-bottom:.02em;margin-bottom:1.4rem;font-weight:var(--w-display)}
.hero-title em{color:var(--accent)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

.hero-visual{position:relative;isolation:isolate;width:min(100%,640px);aspect-ratio:4/3;margin-inline:auto}
.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)}
.frame-phone{border-radius:26px;border-width:5px;border-color:var(--ink);padding:0;box-shadow:var(--shadow)}
.frame-phone img{border-radius:20px}

.hero-photo{position:absolute;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%;height:100%;object-fit:cover;display:block}
.hero-photo-process{z-index:0;top:0;right:0;width:58%;aspect-ratio:4/3;opacity:.94}
.hero-photo-process img{object-position:50% 50%;filter:saturate(.66) contrast(.95) brightness(.99)}
.hero-photo-team{z-index:1;left:0;bottom:0;width:72%;aspect-ratio:4/3}
.hero-photo-team img{object-position:50% 45%;filter:saturate(.76) contrast(.96) brightness(.98)}
.deco{width:26px;height:26px;color:var(--accent);position:absolute;opacity:.5}
.deco-star-a{top:-26px;left:0;width:28px;height:28px;z-index:3}
@media (min-width:600px){.deco-star-a{top:-30px;left:-26px;width:32px;height:32px}}
@media (max-width:599px){
  .hero{padding-block:2rem 2.25rem}
  .hero-grid{gap:1.5rem}
  .hero-visual{width:min(100%,520px);aspect-ratio:4/3}
}
.deco-star-b{right:22%;bottom:-8%;width:20px;height:20px;opacity:.6}
.deco-star-c{left:-14px;bottom:26px;width:30px;height:30px}

@media (min-width:900px){
  .hero-grid{grid-template-columns:1fr .92fr}
}
@media (min-width:1180px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:5rem}
}

/* ---------- Manifest band + the page's one moving marquee ---------- */
.marquee{position:relative;z-index:2;overflow:hidden;display:flex;user-select:none}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-group{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem}

.manifest-band{position:relative;z-index:2;display:flex;justify-content:center;overflow:hidden;
  user-select:none;background:var(--accent);color:var(--on-accent);padding-block:.85rem;
  border-block:1px solid var(--accent)}
.manifest-group{display:flex;align-items:center;gap:1.6rem;flex:none}
.manifest-group span{font-family:var(--font-mono);font-weight:500;
  font-size:clamp(.8rem,1.5vw,.95rem);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.marquee-star{width:12px;height:12px;flex:none;opacity:.85}

.section-tech{padding-block:var(--gap-section);position:relative;z-index:2}
.tech-title{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);font-weight:500;margin-bottom:1.6rem}
.tech-marquee{max-width:1040px;margin-inline:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent)}
.tech-marquee:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--r-card)}
.tech-track{align-items:center}
.tech-list{list-style:none;display:flex;align-items:center;gap:.7rem;padding-right:.7rem;flex:none}
.logo-chip{min-width:132px;min-height:58px;border-radius:var(--r-card);display:flex;align-items:center;gap:.7rem;
  padding:.72rem .9rem;background:#FFFCF6;color:#17140F;border:1px solid rgb(23 20 15 / .15)}
.logo-chip img{width:28px;height:28px;object-fit:contain}
.logo-chip span{font-size:.88rem;font-weight:650;line-height:1.15;white-space:nowrap}
@media (max-width:520px){
  .tech-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 .85rem,#000 calc(100% - .85rem),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 .85rem,#000 calc(100% - .85rem),transparent)}
  .logo-chip{min-width:124px}
}

/* ---------- Pain points ---------- */
.section-pain{position:relative;z-index:2}
.pain-list{margin-top:clamp(2.5rem,6vw,4.5rem);display:grid;gap:0}
.pain-item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;align-items:start;
  padding-block:clamp(1.5rem,3vw,2.2rem);border-top:1px solid var(--line)}
.pain-item:last-child{border-bottom:1px solid var(--line)}
.pain-num{font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--accent);
  letter-spacing:.08em;padding-top:.62rem}
.pain-item p{font-family:var(--font-serif);font-size:clamp(1.2rem,2.5vw,1.78rem);
  line-height:1.46;max-width:30ch;font-weight:var(--w-prose)}
@media (min-width:820px){
  .pain-item{grid-template-columns:5rem 1fr}
  .pain-item p{max-width:34ch}
}
.pain-turn{display:flex;gap:1rem;align-items:flex-start;margin-top:clamp(2.2rem,5vw,3.5rem);
  font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;font-weight:500}
.turn-arrow{width:22px;height:22px;flex:none;color:var(--accent);margin-top:.35rem}

/* ---------- Bento ---------- */
.section-values{position:relative;z-index:2;background:var(--paper-3)}
.bento{margin-top:clamp(2.5rem,6vw,4rem);display:grid;gap:1rem}
.bento-cell{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column;gap:.7rem}
.bento-cell h3{font-family:var(--font-display);font-size:1.3rem;font-weight:var(--w-display);
  letter-spacing:-.012em;line-height:1.26}
.bento-cell p{color:var(--ink-2);font-size:1rem}
.bento-icon{width:30px;height:30px;color:var(--accent);margin-bottom:.4rem}

.bento-photo{padding:0;overflow:hidden;position:relative;background:var(--paper-3)}
.bento-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;min-height:280px;flex:1 1 auto}
.bento-photo-copy{padding:clamp(1.4rem,3vw,2rem);background:var(--paper-2);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.6rem}
.bento-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bento-accent p{color:color-mix(in srgb,var(--on-accent) 82%,transparent)}
.bento-accent .bento-icon{color:var(--on-accent)}
.bento-video{padding:0;overflow:hidden;background:var(--paper-2)}
.bento-motion-media{position:relative;isolation:isolate;display:grid;place-items:center;
  width:100%;aspect-ratio:4/3;min-height:220px;overflow:hidden;
  padding:clamp(.8rem,2vw,1.15rem);background:#D8D2C8}
.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% 50%}
.motion-code{--code-size:clamp(.48rem,1.05vw,.58rem);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 #9AA9FF;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(143 163 255 / .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 .bento-video .motion-site-reveal,
.js .bento-video .motion-site-reveal .motion-shot,
.js .bento-video .motion-reveal-edge{animation-play-state:paused}
.js .bento-video.is-playing .motion-site-reveal,
.js .bento-video.is-playing .motion-site-reveal .motion-shot,
.js .bento-video.is-playing .motion-reveal-edge{animation-play-state:running}
.bento-video-copy{padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;gap:.6rem;
  background:var(--paper-2);border-top:1px solid var(--line);flex:1}

@media (min-width:760px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-photo{grid-row:span 2}
}
@media (max-width:759px){
  .bento-photo img{height:auto;aspect-ratio:4/5;min-height:0}
}
@media (min-width:1080px){
  /* 5 items, 5 cells, no empty slots */
  .bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,auto)}
  .bento-photo{grid-column:1;grid-row:1 / span 2}
  .bento-accent{grid-column:2 / span 2;grid-row:1}
  .bento-video{grid-column:2;grid-row:2}
  .bento-cell:nth-of-type(4){grid-column:3;grid-row:2}
  .bento-cell:nth-of-type(5){grid-column:1 / span 3;grid-row:3;
    display:grid;grid-template-columns:auto 1fr 1.4fr;gap:1.4rem;align-items:center}
  .bento-cell:nth-of-type(5) .bento-icon{margin:0}
  .bento-cell:nth-of-type(5) p{max-width:60ch}
}

/* ---------- 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(--accent);line-height:1;font-weight:var(--w-display);font-style:normal;letter-spacing:-.02em}
.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}
.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:rotate(0) scale(1.06)}
@media (min-width:900px){
  .index-row{grid-template-columns:6rem 1fr auto;gap:2rem}
  .index-row:hover{background:var(--accent-soft);padding-inline:1.4rem}
}

/* ---------- Process sticky stack ---------- */
.section-process{position:relative;z-index:2;padding-bottom:calc(var(--gap-section) / 2)}
.stack{margin-top:clamp(2rem,5vw,3.5rem)}
.stack-card{position:sticky;top:calc(var(--header-h) + 1.2rem);padding-bottom:1.2rem}
.stack-inner{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.6rem,4vw,3.2rem);display:grid;gap:2rem;box-shadow:var(--shadow)}
.stack-num{font-family:'Geist Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.2em;color:var(--accent)}
.stack-text h3{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:.5rem 0 1.4rem;font-weight:var(--w-display)}
.stack-text p{color:var(--ink-2);max-width:48ch;margin-bottom:1.5rem}
.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}
/* One treatment for all three process shots: same box, same fit, same shadow,
   same alignment. The devices are cut out, so the dark card shows through and
   nothing reads as a pasted white rectangle. */
.stack-visual{align-self:center;display:grid;place-items:center;
  min-height:clamp(200px,42vw,335px)}
.stack-shot{max-width:min(100%,320px);max-height:clamp(200px,42vw,335px);
  width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(52,42,25,.24))}
.stack-visual-structure{min-height:clamp(280px,72vw,380px);padding-inline:clamp(.75rem,3vw,1.75rem)}
.stack-shot-structure{max-width:min(92%,310px);max-height:clamp(260px,68vw,360px);
  margin-left:auto;margin-right:clamp(.75rem,2.5vw,1.5rem);
  filter:drop-shadow(0 18px 26px rgba(52,42,25,.24)) drop-shadow(0 0 1px rgba(52,42,25,.2))}
:root[data-theme="dark"] .stack-shot{filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
:root[data-theme="dark"] .stack-shot-structure{filter:drop-shadow(0 18px 30px 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"]) .stack-shot{filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
  :root:not([data-theme="light"]) .stack-shot-structure{filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.2))}
}
@media (min-width:900px){
  .stack-inner{grid-template-columns:1fr .8fr;gap:3.5rem;align-items:center}
  .stack-card{top:calc(var(--header-h) + 2rem);padding-bottom:2rem}
}

/* ---------- Work rail ---------- */
.section-work{position:relative;z-index:2;overflow:hidden}
.work-head{margin-bottom:clamp(2rem,5vw,3rem)}
.rail{display:flex;gap:1.1rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x;
  padding-inline:max(1.25rem,calc((100vw - var(--shell)) / 2));padding-block:.5rem 1.4rem;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail{align-items:flex-start}
.rail-item{flex:0 0 auto;width:clamp(255px,76vw,470px);scroll-snap-align:center}
.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-zoom:hover img{transform:scale(1.03)}
.rail-cap{font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-top:.9rem}
.rail-controls{display:flex;gap:.6rem;margin-top:.5rem}
.rail-btn{width:52px;height:52px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);
  background:transparent;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.rail-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rail-btn svg{width:20px;height:20px}
.rail-btn .flip{transform:scaleX(-1)}

/* ---------- Facts ----------
   The one deliberate colour block on the page. Everything inside is driven by
   three local tokens so the light and dark variants stay in sync, and the
   accent is lifted to its dark-ground tint so it clears WCAG AA on ink. */
.section-facts{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:#8FA3FF;
  background:var(--fact-bg);color:var(--fact-fg)}
:root[data-theme="dark"] .section-facts{--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-facts{
  --fact-bg:var(--paper-3);--fact-fg:var(--ink);--fact-muted:var(--ink-2);--fact-line:var(--line)}}
.section-facts .h2{color:var(--fact-fg)}
.section-facts .display em{color:var(--accent)}
.facts{margin-top:clamp(2.5rem,6vw,4rem);display:grid;gap:0}
.fact{padding-block:1.8rem;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(3rem,8vw,5.2rem);line-height:.95;font-weight:var(--w-display);display:flex;align-items:baseline;gap:.12em}
.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}}

/* ---------- About ---------- */
.section-about{position:relative;z-index:2}
.about-grid{display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.about-media{position:relative}
.about-figure{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.about-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;
  filter:saturate(.82) contrast(.97)}
.about-copy p{color:var(--ink-2);margin-top:1.2rem;max-width:54ch}
.about-copy .h2{margin-bottom:.4rem}
.about-sign{font-family:var(--font-serif);font-style:normal;font-size:clamp(1.16rem,1.9vw,1.4rem);
  font-weight:500;color:var(--ink)!important;line-height:1.5;
  border-left:2px solid var(--accent);padding:.1em 0 .1em 1rem;margin-top:1.6rem}
.about-copy .btn{margin-top:1.8rem}
@media (min-width:900px){.about-grid{grid-template-columns:.85fr 1fr}}

/* ---------- 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;background:var(--paper-3)}
.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);text-underline-offset:3px;text-decoration-color:var(--accent)}
.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}}
@keyframes bs-drift{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(14deg)}
}

@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}

  /* loose florets drift instead of sitting there */
  .deco-star{animation:bs-drift 9s ease-in-out infinite}
  .deco-star-b{animation-duration:11s;animation-delay:-3.5s}
  .deco-star-c{animation-duration:10s;animation-delay:-1.8s}
}

/* ---------- Motion ---------- */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}

@keyframes marquee-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-track[data-running]{animation:marquee-left var(--dur,38s) linear infinite}
.marquee:hover .marquee-track[data-running],
.marquee:focus-within .marquee-track[data-running]{animation-play-state:paused}

/* Gentle hero parallax via scroll-driven animation. No scroll listeners.
   Browsers without support simply render the hero static. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px){
    @keyframes drift-slow{to{transform:translateY(-22px)}}
    @keyframes drift-fast{to{transform:translateY(34px)}}
    [data-parallax="slow"]{animation:drift-slow linear both;animation-timeline:view();animation-range:entry 20% exit 90%}
    [data-parallax="fast"]{animation:drift-fast linear both;animation-timeline:view();animation-range:entry 20% exit 90%}
  }
}

@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}
  .marquee-track{animation:none!important;transform:none!important}
  .tech-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .tech-track{display:block;width:100%}
  .tech-list{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
    gap:.7rem;padding-right:0}
  .tech-list[aria-hidden="true"]{display:none}
  .work-zoom:hover img{transform:none}
  .motion-site-reveal{animation:none!important;transform:none!important;opacity:1;
    clip-path:inset(0 50% 0 0)}
  .motion-site-reveal .motion-shot{animation:none!important;transform:none!important}
  .motion-reveal-edge{inset:0 auto 0 50%;width:2px;border:0;background:#9AA9FF;
    animation:none!important;transform:translateX(-1px)!important;opacity:1}
  .motion-reveal-edge::after{display:none}
}