/* ═══════════════════════════════════════════════════════════════════
   SEPHYR DESIGN — Independent Digital Design Studio

   Deep forest green and cream, with lime kept for the moments that
   matter. Flat colour only — no gradients, no glass. One sans
   (Instrument Sans, as in the wordmark) and a great deal of space.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────── */
:root{
  /* the brand palette (Sephyr Design - Logo Files) */
  --forest:   #0F3A2B;
  --forest-2: #0A2C20;   /* a step deeper, for stages */
  --forest-3: #1A4A38;   /* a step lighter, for raised details */
  --lime:     #CFF25B;
  --cream:    #F4F1E4;
  --cream-2:  #EAE6D6;
  --moss:     #6E9A55;   /* "DESIGN" in the wordmark on cream */
  --black:    #0A0F0D;   /* device frames */

  --f-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: var(--f-sans);   /* small labels: the same face, uppercase and tracked */

  --gut: clamp(20px, 5.5vw, 104px);
  --maxw: 1480px;
  --head-h: 68px;
  --sec-pad: clamp(8rem, 20vh, 16rem);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .3s;
  --t-mid: .6s;
  --t-slow: 1.1s;
}
@media (min-width: 900px){ :root{ --head-h: 88px; } }

/* Tones. Each section sets the same roles (--bg, --ink, --muted …) to
   one of three tones, so every component adapts wherever it sits.
   Forest is the default; cream and lime sections alternate with it. */
:root, .site-head, .menu-panel, .live, .worknav,
.hero, .work.page-first, .case, .studio, .services, .contact, .legal__head{
  --bg: var(--forest); --bg-2: var(--forest-2); --surface: var(--forest-3);
  --ink: var(--cream); --muted: #A9BFB2; --soft: var(--lime); --accent: var(--lime);
  --line: rgba(244,241,228,.2); --line-2: rgba(244,241,228,.11);
  --btn: var(--lime); --btn-ink: var(--forest); --btn-hover: var(--cream); --btn-hover-ink: var(--forest);
  --focus: var(--lime); --err: #FFB4A6; --good: var(--lime);
}
.work, .process, .case__kit, .app-feats, .legal__body, .site-foot{
  --bg: var(--cream); --bg-2: var(--cream-2); --surface: #DEDAC8;
  --ink: var(--forest); --muted: #4B5F55; --soft: #5E8A47; --accent: #46733A;
  --line: rgba(15,58,43,.2); --line-2: rgba(15,58,43,.1);
  --btn: var(--forest); --btn-ink: var(--cream); --btn-hover: var(--lime); --btn-hover-ink: var(--forest);
  --focus: var(--forest); --err: #A3361F; --good: #46733A;
}
.cta{
  --bg: var(--lime); --ink: var(--forest); --muted: #2E5A44; --soft: #3D6B4A; --accent: var(--forest);
  --line: rgba(15,58,43,.24); --line-2: rgba(15,58,43,.12);
  --btn: var(--forest); --btn-ink: var(--cream); --btn-hover: var(--cream); --btn-hover-ink: var(--forest);
  --focus: var(--forest);
}
.hero, .work, .case, .case__kit, .app-play, .app-feats, .studio, .services, .process, .contact, .cta,
.legal__head, .legal__body, .site-foot{ background-color: var(--bg); color: var(--ink); }

/* ── 2 · Reset & base ───────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.7 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
@media (min-width: 900px){ body{ font-size: 1.0625rem; } }
img, svg, video, canvas{ display: block; max-width: 100%; }
button, input, textarea{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure{ margin: 0; }
h1, h2, h3, h4{ font-weight: 500; }
a{ color: inherit; }
::selection{ background: var(--ink); color: var(--bg); }
[id]{ scroll-margin-top: calc(var(--head-h) + 8px); }

:focus-visible{ outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link{
  position: fixed; top: 10px; left: 10px; z-index: 400;
  padding: .75rem 1.1rem; background: var(--ink); color: var(--bg);
  font: 500 .8125rem/1 var(--f-sans); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible{ transform: none; }
.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.shell{ width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; }

/* ── 3 · Type ───────────────────────────────────────────────────── */
.display{
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(2.8rem, 6.6vw, 7.6rem);
  text-wrap: balance;
}
.display--l{ font-size: clamp(2.3rem, 4.6vw, 5.2rem); letter-spacing: -.035em; line-height: 1.03; }
/* the second line of a headline: lighter, in the tone's second colour
   (lime on forest, moss on cream) — like DESIGN beside SEPHYR */
.hero__title-soft, .work__title-soft, .studio__title-soft, .services__title-soft,
.process__title-soft, .contact__title-soft, .legal__title-soft{ font-weight: 400; color: var(--soft); }

.label, .eyebrow{
  font: 600 .6875rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.label span{ color: var(--accent); margin-left: .6rem; }

/* masked line reveals — visible by default; hidden only once JS confirms motion */
.mask{ display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.mask__in{ display: block; }
html.js:not(.rm) .mask__in{ transform: translate3d(0, 105%, 0); opacity: 0; }
html.js:not(.rm) .is-in .mask__in,
html.js:not(.rm) [data-reveal].is-in .mask__in{
  transform: none; opacity: 1;
  transition: transform 1.3s var(--ease-out) var(--d, 0ms), opacity 1s var(--ease-out) var(--d, 0ms);
}
html.js:not(.rm) p[data-reveal], html.js:not(.rm) li[data-reveal]{ opacity: 0; transform: translateY(14px); }
html.js:not(.rm) p[data-reveal].is-in, html.js:not(.rm) li[data-reveal].is-in{
  opacity: 1; transform: none;
  transition: opacity 1.2s var(--ease-out) var(--d, 0ms), transform 1.2s var(--ease-out) var(--d, 0ms);
}

/* ── 4 · Buttons & links ────────────────────────────────────────── */
.btn{
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  min-height: 52px; padding: 0 1.7rem; border: 1px solid transparent; border-radius: 999px;
  font: 600 .9375rem/1 var(--f-sans); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.btn--sm{ min-height: 42px; padding: 0 1.2rem; font-size: .8125rem; }
.btn--wide{ width: 100%; justify-content: space-between; }
/* pills: lime on forest, forest on cream and lime */
.btn--solid{ background: var(--btn); color: var(--btn-ink); }
.btn--solid:hover, .btn--solid:focus-visible{ background: var(--btn-hover); color: var(--btn-hover-ink); }
.btn--ghost, .btn--line{ border-color: var(--line); color: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible,
.btn--line:hover, .btn--line:focus-visible{ border-color: var(--ink); }
.btn__arrow{ display: inline-block; transition: transform var(--t-mid) var(--ease-out); }
.btn:hover .btn__arrow{ transform: translateX(4px); }
.btn__ext{ font-size: .95em; line-height: 0; }
.btn.is-busy{ pointer-events: none; opacity: .7; }

/* a quiet secondary action: text with a hairline that redraws on hover */
.text-link, .link-btn{
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  font: 500 .9375rem/1 var(--f-sans); text-decoration: none; color: var(--ink);
  /* a solid 1px underline in the tone's accent, drawn as a background so it can retract */
  background: linear-gradient(var(--accent), var(--accent)) 0 calc(50% + .8em) / 100% 1px no-repeat;
  transition: background-size var(--t-mid) var(--ease-out), color var(--t-fast);
}
.link-btn{ font-size: .8125rem; }
.text-link:hover, .link-btn:hover{ background-size: 0 1px; background-position: 100% calc(50% + .8em); }

.rnd{
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out);
}
.rnd svg{ width: 18px; height: 18px; }
.rnd:hover{ border-color: var(--ink); }

/* ── 5 · Header & menu ──────────────────────────────────────────── */
/* always forest: clear over the forest page tops, solid once scrolled */
.site-head{
  position: fixed; inset: 0 0 auto; z-index: 100; color: var(--ink);
  transition: background-color var(--t-mid) var(--ease-out);
}
.site-head.is-stuck{ background: var(--forest); }
.site-head.is-stuck::after{ content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line-2); }
.site-head__bar{
  width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; min-height: var(--head-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}
/* the reversed lockup: symbol, then SEPHYR (cream, 600) and DESIGN (lime, 400),
   in the proportions of the supplied artwork (symbol ≈ 2.5× the type size) */
.brand{
  --fs: clamp(.75rem, .95vw, .875rem);
  display: flex; align-items: center; gap: calc(var(--fs) * 1.45); flex: none; text-decoration: none; color: var(--ink);
}
.brand__mark{ width: calc(var(--fs) * 2.5); height: auto; aspect-ratio: 1; overflow: visible; }
.brand__word{
  font: 400 var(--fs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--lime);
}
.brand__word b{ font-weight: 600; color: var(--cream); margin-right: .15em; }
.site-nav{ display: none; margin-left: auto; }
.site-nav__list{ display: flex; gap: clamp(1.4rem, 2.6vw, 2.8rem); }
.site-nav__list a{
  position: relative; display: block; padding: .5rem 0; text-decoration: none;
  font-size: .875rem; color: var(--muted); transition: color var(--t-fast) var(--ease-out);
}
.site-nav__list a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease-out);
}
.site-nav__list a:hover, .site-nav__list a[aria-current]{ color: var(--ink); }
.site-nav__list a:hover::after, .site-nav__list a[aria-current]::after{ transform: scaleX(1); }
/* the one lime button in the header */
.site-head__cta{ display: none; background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.site-head__cta:hover, .site-head__cta:focus-visible, .site-head__cta[aria-current]{ background: var(--btn-hover); color: var(--btn-hover-ink); border-color: transparent; }
@media (min-width: 900px){
  .site-nav{ display: block; }
  .site-head__cta{ display: inline-flex; margin-left: clamp(.5rem, 1.5vw, 1.5rem); }
}

.menu-btn{
  margin-left: auto; display: flex; align-items: center; gap: .75rem; min-height: 44px;
  font: 500 .6875rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
}
.menu-btn__lines{ display: grid; gap: 6px; width: 22px; }
.menu-btn__lines i{ height: 1px; background: currentColor; transition: transform var(--t-fast) var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child{ transform: translateY(3.5px) rotate(20deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child{ transform: translateY(-3.5px) rotate(-20deg); }
@media (min-width: 900px){ .menu-btn{ display: none; } }

.menu-panel{
  position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--head-h) + 2rem) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  background: var(--bg); opacity: 0; transition: opacity .5s var(--ease-out);
}
.menu-panel[hidden]{ display: none; }
.menu-panel.is-open{ opacity: 1; }
.menu-panel__nav li{ border-top: 1px solid var(--line-2); }
.menu-panel__nav li:last-child{ border-bottom: 1px solid var(--line-2); }
.menu-panel__nav a{
  display: flex; align-items: baseline; gap: 1rem; padding: clamp(.75rem, 2.6vh, 1.1rem) 0; text-decoration: none;
  font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 400; letter-spacing: -.04em; line-height: 1;
}
.menu-panel__nav a[aria-current] { color: var(--lime); }
.menu-panel__num{ font: 500 .6875rem/1 var(--f-mono); letter-spacing: .16em; color: var(--accent); }
.menu-panel__foot{ display: grid; gap: .5rem; }
.menu-panel__foot a{ font-size: 1.05rem; text-decoration: none; }

/* ── 6 · Hero ───────────────────────────────────────────────────── */
.hero{
  --u: 0;
  position: relative; min-height: max(100svh, 720px);
  display: flex; flex-direction: column;
  overflow: clip;   /* the symbol lingers as the hero leaves; the next section slides over it */
}
.hero__inner{
  flex: 1; display: grid; align-items: end;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  padding-top: calc(var(--head-h) + clamp(2rem, 6vh, 5rem)); padding-bottom: clamp(3rem, 9vh, 7rem);
}
/* the copy holds the left; the symbol stands clear of it on the right */
.hero__copy{
  grid-column: 1 / span 7; grid-row: 1;
  position: relative; z-index: 2; display: grid; gap: clamp(1.6rem, 3.5vh, 2.6rem);
  opacity: clamp(0, calc(1 - var(--u) * 1.6), 1); transform: translate3d(0, calc(var(--u) * -6vh), 0);
}
.hero__title{ font-size: clamp(2.8rem, 4.6vw, 5.8rem); }
@media (min-width: 900px){ .hero__title .mask{ white-space: nowrap; } }
.hero__title .mask:nth-child(2) .mask__in{ --d: 140ms; }
.hero__foot{ display: grid; gap: 2rem; max-width: 30rem; }
.hero__lead{ font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.6; color: var(--muted); }
.hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; }

/* The symbol, drawn exactly as supplied: flat lime and cream, whole and
   upright at rest, with clear space all round. As the hero scrolls away
   (--u, 0 → 1, from site.js) it turns gently, lifts in scale and lingers
   behind the scroll, while the cream piece slides out across the flat
   edge like a phase of the moon (it is clipped to the lime shape).
   Everything pivots on the circle's own centre, not the box's. */
.hero__mark{
  grid-column: 7 / span 6; grid-row: 1;
  position: relative; z-index: 1; align-self: center; justify-self: end;
  width: 100%; max-width: min(41vw, calc(100svh - var(--head-h) - 8rem), 700px);
  margin-right: calc(var(--gut) * -.4);
  transform-origin: 52.84% 47.16%;
  --drift: 42vh;   /* how far it lingers behind the scroll */
  transform: translate3d(0, calc(var(--u) * var(--drift)), 0) rotate(calc(var(--u) * -40deg)) scale(calc(1 + var(--u) * .1));
}
.hero__mark svg{ width: 100%; height: auto; overflow: visible; transform-origin: 52.84% 47.16%; }
.mark__lime{ fill: var(--lime); }
/* the phase runs early, while the whole symbol is still in view */
.mark__cream{ fill: var(--cream); transform: translate(calc(min(var(--u) * 2, 1) * 15px), calc(min(var(--u) * 2, 1) * -15px)); }
/* on arrival it turns into place and the cream settles in; then it floats, barely */
html.js:not(.rm) .hero__mark svg{ animation: mark-in 1.8s var(--ease-out) both, mark-float 9s ease-in-out 1.8s infinite; }
html.js:not(.rm) .mark__cream{ animation: cream-in 1.6s var(--ease-out) .35s backwards; }
@keyframes mark-in{ from{ opacity: 0; transform: rotate(28deg) scale(.9); } }
@keyframes mark-float{ 50%{ transform: translate3d(0, -1.4%, 0) rotate(-1.5deg); } }
@keyframes cream-in{ from{ transform: translate(26px, -26px); } }

.hero__meta{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem;
  padding-block: 1.3rem; border-top: 1px solid var(--line-2);
}
.hero__scroll{ text-decoration: none; transition: color var(--t-fast); }
.hero__scroll:hover{ color: var(--ink); }

@media (max-width: 899px){
  .hero{ min-height: 0; }
  .hero__copy, .hero__mark{ grid-column: 1 / -1; grid-row: auto; }
  .hero__inner{ grid-template-columns: 1fr; padding-top: calc(var(--head-h) + 2rem); padding-bottom: 3.5rem; row-gap: 2.5rem; }
  /* above the copy on narrower screens: set to the right and tucked a little
     behind the copy (its lower curve passes beside the label, never under text);
     it travels with the page rather than lingering into the text */
  .hero__mark{
    order: -1; justify-self: end; max-width: min(64vw, 44svh, 440px); --drift: 0px;
    margin: 0 calc(var(--gut) * -.35) -14% 0;
  }
  /* tablets and narrow windows: the headline is short enough for the symbol to sink lower beside it */
  @media (min-width: 820px){ .hero__mark{ margin-bottom: -26%; } }
  .hero__meta .label:nth-child(2){ display: none; }
}

/* ── 6b · Inner pages ─────────────────────────────────────────────
   The first section of an inner page clears the header with room to
   spare; every page closes on the same quiet invitation. */
.page-first{ padding-top: calc(var(--head-h) + clamp(4rem, 14vh, 9rem)) !important; }
.section-more{ margin-top: clamp(2.5rem, 6vh, 4rem); }
.studio__links{ display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.cta{ padding-block: var(--sec-pad); }
.cta__inner{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.cta__title{ font-size: clamp(2.8rem, 6.4vw, 7.2rem); }
.cta__title .mask:nth-child(2) .mask__in{ --d: 110ms; }
.cta__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; margin-top: clamp(1rem, 3vh, 2rem); }

/* ── 7 · Selected work ──────────────────────────────────────────── */
.work{ position: relative; padding-top: var(--sec-pad); padding-bottom: calc(var(--sec-pad) * .7); }
.work__intro{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: clamp(4rem, 12vh, 8rem); }
@media (min-width: 1000px){
  .work__intro{ grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: end; }
  .work__intro .label{ grid-column: 1 / -1; }
}
.work__title .mask:nth-child(2) .mask__in{ --d: 100ms; }
.work__note{ color: var(--muted); }

.work__index{ border-top: 1px solid var(--line); }
.work__index li{ border-bottom: 1px solid var(--line); }
.work__index a{
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center;
  gap: .4rem clamp(1rem, 3vw, 3rem); padding: clamp(1.5rem, 3.4vw, 2.6rem) 0; text-decoration: none;
}
.work__index-num{ font: 500 .75rem/1 var(--f-mono); letter-spacing: .14em; color: var(--accent); }
.work__index-name{
  font-size: clamp(1.8rem, 3.8vw, 4rem); font-weight: 400; letter-spacing: -.04em; line-height: 1;
  transition: transform var(--t-slow) var(--ease-out), color var(--t-mid) var(--ease-out);
}
.work__index-kind{ grid-column: 2; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.work__index-go{ grid-column: 3; grid-row: 1 / span 2; font-size: 1.3rem; color: var(--muted); transition: transform var(--t-mid) var(--ease-out), color var(--t-mid); }
.work__index a:hover .work__index-name, .work__index a:focus-visible .work__index-name{ transform: translateX(clamp(6px, 1vw, 16px)); }
.work__index a:hover .work__index-go{ transform: translateX(6px); color: var(--ink); }
.work__index:hover a:not(:hover) .work__index-name{ color: var(--muted); }
@media (min-width: 900px){
  .work__index a{ grid-template-columns: 6rem minmax(0, 1fr) auto 3rem; }
  .work__index-kind{ grid-column: 3; grid-row: 1; }
  .work__index-go{ grid-column: 4; grid-row: 1; justify-self: end; }
}

/* ── 7a · Project chapters ──────────────────────────────────────────
   Each project is a case study: a signature opener, the real site
   scrolling in a browser and phone, then its design kit. The client's
   own colour lives in its work; the frame around it stays graphite.
   Pinned stages are a tall track with a sticky full-screen stage;
   site.js writes the scroll progress into each one. */
.case{
  --c-bg: var(--bg); --c-bg2: var(--bg-2); --c-ink: var(--ink); --c-soft: var(--muted);
  --c-rule: var(--line); --c-pop: var(--accent);
  position: relative; scroll-margin-top: 0; color: var(--ink); border-top: 1px solid var(--line-2);
}
.case__open{ position: relative; height: 200svh; }
.case__open--torch{ height: 170svh; }
.case__open--porthole{ height: 185svh; }
.case__open--tide{ height: 190svh; }
.case__tour{ position: relative; height: 290svh; background: var(--bg-2); }
.case--ncm .case__tour{ height: 190svh; }
.case__sticky{ position: sticky; top: 0; height: 100svh; overflow: hidden; }
.case__stage{ position: absolute; inset: 0; z-index: 1; }

.case__open .case__sticky{ display: flex; align-items: center; }
.case__head{
  position: relative; z-index: 3;
  display: grid; justify-items: start; align-content: center; gap: clamp(1rem, 2.2vh, 1.5rem);
  padding-top: var(--head-h);
}
.case__head > *{ max-width: min(28rem, 31vw); }
.case__num{ font: 500 .75rem/1 var(--f-mono); letter-spacing: .2em; color: var(--accent); }
.case__num::after{ content: " / 04"; color: var(--muted); }
.case__title{ font-size: clamp(2.6rem, 4.8vw, 5.4rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.case__lede{ color: var(--muted); font-size: clamp(.95rem, 1.05vw, 1.0625rem); line-height: 1.75; }
.case__tags{ display: flex; flex-wrap: wrap; gap: 0 .2rem; }
.case__tags li{ font: 500 .625rem/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case__tags li + li::before{ content: "/"; margin-right: .5rem; color: var(--line); }
.case__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; margin-top: .4rem; }
.case__hint{
  display: flex; align-items: center; gap: .8rem; margin-top: .6rem;
  font: 500 .625rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.case__hint::before{ content: ""; width: 24px; height: 1px; background: var(--line); }
html:not(.js) .case__hint, html.rm .case__hint{ display: none; }

@media (max-width: 899px){
  .case__open, .case__open--torch, .case__open--porthole, .case__open--tide{ height: auto; }
  .case__open .case__sticky{
    position: relative; height: auto; overflow: visible;
    display: flex; flex-direction: column; align-items: stretch;
  }
  .case__open .case__sticky::after{ content: ""; order: 2; display: block; height: 100svh; }
  .case__head{ order: 0; padding-top: calc(var(--head-h) + 3rem); padding-bottom: 3rem; gap: .9rem; }
  .case__head > *{ max-width: 100%; }
  .case__stage{ order: 1; position: sticky; inset: auto; top: 0; height: 100svh; overflow: hidden; }
  .case__hint{ display: none; }
}
@media (min-width: 900px) and (max-height: 760px){
  .case__tags, .case__hint{ display: none; }
  .case__title{ font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
  .case__lede{ font-size: .95rem; }
}

/* ── Signature 1 · Birds of Praa: the site as a picture book ───── */
.book{
  --pw: min(24vw, 46svh, 390px); --ph: calc(var(--pw) * 980 / 780);
  position: absolute; z-index: 2;
  top: calc(50% + var(--head-h) / 2); right: max(var(--gut), (100vw - var(--maxw)) / 2);
  width: calc(var(--pw) * 2); height: var(--ph);
  transform: translateY(-50%);
}
.book__inner{ position: absolute; inset: 0; transform: translateX(calc((1 - var(--open, 0)) * -25%)); }
.book__board{
  position: absolute; top: -1.6%; bottom: -1.6%; left: calc(50% - 1%); right: -1.6%;
  background: #2D5566; border-radius: 3px 8px 8px 3px;
  box-shadow: 0 60px 100px -50px rgba(0,0,0,.8);
}
.book__board::before{
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: calc(100% - 1%);
  background: inherit; border-radius: 8px 3px 3px 8px; box-shadow: inherit;
  opacity: clamp(0, calc(var(--open, 0) * 2 - 1), 1);
}
.book__base, .leaf{ position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.book__base{ background: #FBF6EC; }
.leaf{
  transform-origin: 0 50%; transform-style: preserve-3d; z-index: var(--z, 1);
  transform: perspective(2600px) rotateY(calc(var(--t, 0) * -180deg));
}
.leaf__face{ position: absolute; inset: 0; overflow: hidden; background: #FBF6EC; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf__back{ transform: rotateY(180deg); }
.leaf__face img, .book__base img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.leaf__face::after, .book__base::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(31,49,56,.3), rgba(31,49,56,0) 22%);
  opacity: calc(.6 + var(--bend, 0) * .4);
}
.leaf__back::after{ background: linear-gradient(270deg, rgba(31,49,56,.3), rgba(31,49,56,0) 22%); }
.cover{ display: flex; flex-direction: column; gap: 4%; padding: 9% 9% 7%; background: #2D5566; color: #FBF6EC; }
.cover__kicker{ font-family: var(--f-mono); font-size: max(.5rem, calc(var(--pw) * .028)); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.cover__title{ font-family: "Fraunces", Georgia, serif; font-size: calc(var(--pw) * .12); line-height: 1; letter-spacing: -.01em; }
.cover__art{ flex: 1; min-height: 0; border-radius: calc(var(--pw) * .03); overflow: hidden; box-shadow: 0 0 0 calc(var(--pw) * .012) rgba(251,246,236,.85); }
.cover__art img{ width: 100%; height: 100%; object-fit: cover; }
.cover__foot{ font-family: var(--f-mono); font-size: max(.5rem, calc(var(--pw) * .026)); letter-spacing: .14em; opacity: .7; }
@media (max-width: 899px){
  .book{ --pw: min(45vw, 34svh, 300px); top: calc(50% + var(--head-h) / 2 - 36px); right: auto; left: 50%; transform: translate(-50%, -50%); }
}
html:not(.js) .leaf--cover, html.rm .leaf--cover{ --t: 1; }
html:not(.js) .book__inner, html.rm .book__inner{ transform: none; }
html:not(.js) .book__board::before, html.rm .book__board::before{ opacity: 1; }

/* ── Signature 2 · NIGHTCITY MEDIA: lit by torchlight ──────────── */
.torch{ position: absolute; inset: 0; z-index: 1; --tx: 62%; --ty: 38%; --tr: 15vmax; }
.torch__scene{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.torch__glow{
  position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; opacity: var(--glow-o, 1);
  background: radial-gradient(circle at var(--tx) var(--ty), rgba(244,241,228,.14), rgba(244,241,228,0) calc(var(--tr) * 1.15));
}
.torch__dark{
  position: absolute; inset: 0; background: var(--bg);
  -webkit-mask-image: radial-gradient(circle at var(--tx) var(--ty), transparent 0, transparent calc(var(--tr) * .55), #000 var(--tr));
          mask-image: radial-gradient(circle at var(--tx) var(--ty), transparent 0, transparent calc(var(--tr) * .55), #000 var(--tr));
}
@media (min-width: 900px){
  .case__open--torch .case__head > *{ max-width: min(30rem, 34vw); }
  .torch{
    inset: auto max(var(--gut), (100vw - var(--maxw)) / 2) auto 44%;
    top: calc(50% + var(--head-h) / 2); transform: translateY(-50%);
    aspect-ratio: 1440 / 900; overflow: hidden; border-radius: 2px;
    box-shadow: 0 0 0 1px var(--line-2);
  }
}
@media (max-width: 899px){ .case__open--torch .case__head > *{ max-width: 100%; } }
html:not(.js) .torch__dark, html.rm .torch__dark, html:not(.js) .torch__glow, html.rm .torch__glow{ display: none; }

/* ── Signature 3 · Ship Ashore: through the porthole ───────────── */
.case__open--porthole .case__head{ opacity: var(--head-o, 1); }
.porthole{ position: absolute; inset: 0; z-index: 1; --r: min(23vmin, 230px); --cx: 72%; --cy: 55%; }
.porthole__glass{ position: absolute; inset: 0; background: #16263F; clip-path: circle(var(--r) at var(--cx) var(--cy)); }
.porthole__scene{
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; object-position: 60% 50%;
  animation: bob 7s ease-in-out infinite;
}
@keyframes bob{
  0%, 100%{ transform: translate3d(0, -1.1%, 0) rotate(-.5deg); }
  50%{ transform: translate3d(0, 1.1%, 0) rotate(.5deg); }
}
.porthole__ring{
  position: absolute; left: var(--cx); top: var(--cy);
  width: calc(var(--r) * 2.44); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: var(--ring-o, 1); pointer-events: none;
  background:
    radial-gradient(1.5% 1.5% at 95.5% 50%, #56627A 55%, transparent 100%),
    radial-gradient(1.5% 1.5% at 82.2% 82.2%, #56627A 55%, transparent 100%),
    radial-gradient(1.5% 1.5% at 50% 95.5%, #56627A 55%, transparent 100%),
    radial-gradient(1.5% 1.5% at 17.8% 82.2%, #56627A 55%, transparent 100%),
    radial-gradient(1.5% 1.5% at 4.5% 50%, #56627A 55%, transparent 100%),
    radial-gradient(1.5% 1.5% at 17.8% 17.8%, #56627A 55%, transparent 100%),
    radial-gradient(1.5% 1.5% at 50% 4.5%, #56627A 55%, transparent 100%),
    radial-gradient(1.5% 1.5% at 82.2% 17.8%, #56627A 55%, transparent 100%),
    radial-gradient(circle closest-side, transparent 81.5%, #C9C0AE 82%, #FFFDF8 85%, #F2ECDF 93%, #D9D0BE 99%, transparent 100%);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
@media (max-width: 899px){ .porthole{ --r: min(34vmin, 170px); --cx: 50%; --cy: 50%; } }

/* ── Signature 4 · Els-y-Môr: the tide goes out ───────────────── */
.tide{ position: absolute; inset: 0; overflow: hidden; background: #E4DACA; --wt: 0px; --wx: 0px; --fs: 1; }
@media (min-width: 900px){
  .tide{
    inset: auto max(var(--gut), (100vw - var(--maxw)) / 2) auto 44%;
    top: calc(50% + var(--head-h) / 2); transform: translateY(-50%);
    aspect-ratio: 5 / 4; max-height: calc(100svh - var(--head-h) - 3rem); border-radius: 2px;
    box-shadow: 0 60px 100px -60px rgba(0,0,0,.7);
  }
}
.tide__frame{
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 76%; aspect-ratio: 1440 / 900;
  transform: translate(-50%, -50%) scale(var(--fs)); overflow: hidden; border-radius: 4px; background: #F8F6F1;
  box-shadow: 0 30px 60px -30px rgba(28,40,38,.45), 0 0 0 1px rgba(28,40,38,.08);
}
.tide__frame img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tide__sea{
  position: absolute; z-index: 2; left: -5%; right: -5%; top: 0; height: 130%;
  transform: translate3d(0, var(--wt), 0);
  background: linear-gradient(180deg, #F8F6F1 0, #DCE7DF 22px, #B9D2C8 18%, #6F9C91 62%, #1F4B47 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q27.5 0 55 13 T110 13 T165 13 T220 13 V26 H0Z'/%3E%3C/svg%3E") var(--wx) 0 / 220px 26px repeat-x, linear-gradient(#000, #000) 0 25px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q27.5 0 55 13 T110 13 T165 13 T220 13 V26 H0Z'/%3E%3C/svg%3E") var(--wx) 0 / 220px 26px repeat-x, linear-gradient(#000, #000) 0 25px / 100% 100% no-repeat;
}
.tide__sea::before{
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 40px; background: rgba(248,246,241,.5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q27.5 0 55 13 T110 13 T165 13 T220 13 V26 H0Z'/%3E%3C/svg%3E") calc(var(--wx) * -.6 + 70px) 0 / 180px 22px repeat-x, linear-gradient(#000, #000) 0 21px / 100% 6px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q27.5 0 55 13 T110 13 T165 13 T220 13 V26 H0Z'/%3E%3C/svg%3E") calc(var(--wx) * -.6 + 70px) 0 / 180px 22px repeat-x, linear-gradient(#000, #000) 0 21px / 100% 6px no-repeat;
}
.tide__glass{
  position: absolute; z-index: 3; aspect-ratio: 1; height: auto; max-width: none;
  border-radius: 50%; object-fit: cover; will-change: transform;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 22px -10px rgba(28,40,38,.55), inset 0 0 0 1px rgba(255,255,255,.35);
}
@media (max-width: 899px){
  .tide__frame{ width: min(58%, calc(64svh * 780 / 1688)); aspect-ratio: 780 / 1688; top: calc(50% + var(--head-h) / 2 - 30px); }
}
html:not(.js) .tide__sea, html.rm .tide__sea{ display: none; }

/* ── Scroll-through: the real site, top to bottom ─────────────── */
.case__tour .case__sticky{ display: flex; align-items: center; }
.tour{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: clamp(2.5rem, 5vw, 6rem); align-items: center; padding-top: var(--head-h);
}
.tour__notes{ display: grid; margin-top: 1.6rem; }
.tour__notes li{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--line);
  opacity: .3; transition: opacity var(--t-mid) var(--ease-out);
}
.tour__notes li:last-child{ border-bottom: 1px solid var(--line); }
.tour__notes li.is-on{ opacity: 1; }
.tour__notes p{ font-size: clamp(.95rem, 1.05vw, 1.0625rem); line-height: 1.6; }
.tour__idx{ font: 500 .6875rem/1.9 var(--f-mono); letter-spacing: .12em; color: var(--accent); }

.tour__devices{
  position: relative; justify-self: end;
  width: min(100%, calc((100svh - var(--head-h) - 6rem - 34px) * 1.52));
  padding: 0 6% 7% 0;
}
.browser{
  margin: 0; overflow: hidden; border-radius: 4px; background: #fff;
  box-shadow: 0 70px 120px -70px rgba(0,0,0,.85), 0 0 0 1px var(--line);
}
.browser__bar{ display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--surface); }
.browser__bar i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(244,241,228,.24); }
.browser__bar span{
  margin-left: 10px; flex: 0 1 46%; height: 20px; padding: 0 10px; border-radius: 2px; background: var(--bg-2);
  font: 500 .6875rem/20px var(--f-mono); letter-spacing: .04em; color: var(--muted);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.browser__view{ position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #fff; }
.browser__page, .phone__page{ will-change: transform; }
.browser__page img, .phone__page img{ display: block; width: 100%; height: auto; }
.phone{
  position: absolute; right: 0; bottom: 0; width: 23%; margin: 0;
  padding: 2.1%; border-radius: 15% / 7%; background: var(--black);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1.5px var(--line);
}
.phone__view{ position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 11% / 5%; background: #fff; }
.phone__view::before{
  content: ""; position: absolute; z-index: 2; top: 1.6%; left: 50%; width: 30%; height: 3.4%;
  transform: translateX(-50%); border-radius: 99px; background: var(--black);
}
@media (max-width: 899px){
  .tour{
    display: flex; flex-direction: column; gap: 1rem; height: 100svh;
    padding-top: calc(var(--head-h) + 1rem); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  }
  .tour__copy{ flex: none; }
  .tour__notes{ display: grid; margin-top: .8rem; }
  .tour__notes li{ grid-area: 1 / 1; opacity: 0; border-bottom: 0 !important; }
  .tour__notes li.is-on{ opacity: 1; }
  .tour__devices{ flex: 1 1 0; min-height: 0; width: 100%; padding: 0; display: flex; justify-content: center; }
  .browser{ display: none; }
  .phone{ position: relative; right: auto; bottom: auto; display: flex; width: auto; padding: 8px; border-radius: 34px; }
  .phone__view{ height: 100%; width: auto; border-radius: 26px; }
}

html:not(.js) .case__open, html.rm .case__open,
html:not(.js) .case__tour, html.rm .case__tour{ height: auto; }
html:not(.js) .case__sticky, html.rm .case__sticky{ position: relative; height: auto; min-height: 100svh; }
html:not(.js) .case__tour .case__sticky, html.rm .case__tour .case__sticky{ min-height: 0; padding-block: 4rem 6rem; }
@media (max-width: 899px){
  html:not(.js) .case__open .case__sticky, html.rm .case__open .case__sticky{ min-height: 0; }
  html:not(.js) .case__open .case__sticky::after, html.rm .case__open .case__sticky::after{ display: none; }
  html:not(.js) .case__stage, html.rm .case__stage{ position: relative; height: 80svh; }
}
html:not(.js) .browser__view, html.rm .browser__view,
html:not(.js) .phone__view, html.rm .phone__view{ overflow-y: auto; overscroll-behavior: contain; }
html:not(.js) .tour__notes li, html.rm .tour__notes li{ position: static; opacity: 1; }

/* ── Design kit: open columns divided by hairlines, no boxes ───── */
.case__kit{ position: relative; padding-block: clamp(5rem, 14vh, 9rem); }
.kit{ display: grid; gap: clamp(2.5rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px){ .kit{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.kit__panel{ margin: 0; display: grid; align-content: start; gap: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.kit__label{ font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.swatches{ display: grid; grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr)); gap: 1.2rem .8rem; }
.swatches li{ display: grid; gap: .4rem; }
.swatch{ aspect-ratio: 1; background: var(--sw); box-shadow: inset 0 0 0 1px var(--line-2); }
.swatches b{ font-size: .8125rem; font-weight: 500; line-height: 1.2; }
.swatches code{ font: 500 .625rem/1.2 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.spec{
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: end;
  padding-bottom: 1.3rem; border-bottom: 1px solid var(--line-2);
}
.spec:last-child{ border-bottom: 0; padding-bottom: 0; }
.spec__aa{ grid-row: span 2; font-size: clamp(3rem, 4.4vw, 4.4rem); line-height: .85; }
.spec__name{ font-size: 1.25rem; line-height: 1.1; }
.spec__role{ font: 500 .625rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.spec__sample{ grid-column: 1 / -1; margin-top: .8rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; }
.kit__panel--detail img, .kit__wide img{ display: block; width: 100%; height: auto; }
.kit figcaption, .kit__wide figcaption{ font-size: .875rem; line-height: 1.6; color: var(--muted); }
.kit__wide{ margin: clamp(3rem, 6vw, 5rem) 0 0; display: grid; gap: 1rem; }
.kit__wide img{ box-shadow: 0 0 0 1px var(--line-2); }

html.js:not(.rm) .kit__panel, html.js:not(.rm) .kit__wide{ opacity: 0; transform: translateY(24px); }
html.js:not(.rm) .kit__panel:nth-child(2){ --d: 120ms; }
html.js:not(.rm) .kit__panel:nth-child(3){ --d: 240ms; }
html.js:not(.rm) .kit__panel.is-in, html.js:not(.rm) .kit__wide.is-in{
  opacity: 1; transform: none;
  transition: opacity 1.2s var(--ease-out) var(--d, 0ms), transform 1.2s var(--ease-out) var(--d, 0ms);
}

/* ── Project rail ───────────────────────────────────────────────── */
.worknav{
  position: fixed; z-index: 90; right: 14px; top: 50%; transform: translateY(-50%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
}
.worknav.is-on{ opacity: 1; visibility: visible; transition: opacity var(--t-mid) var(--ease-out); }
.worknav ol{
  display: grid; justify-items: end; gap: 2px; padding: 3px; border-radius: 22px;
  background: var(--forest); border: 1px solid var(--line);
}
.worknav a{
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-width: 38px; min-height: 38px; padding: 0 .65rem; border-radius: 19px;
  font: 500 .6875rem/1 var(--f-mono); letter-spacing: .1em; text-decoration: none; color: var(--muted);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.worknav a:hover{ color: var(--ink); }
.worknav i{ font-style: normal; text-transform: uppercase; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width var(--t-mid) var(--ease-out); }
.worknav a:hover i, .worknav a:focus-visible i{ max-width: 14rem; }
.worknav a[aria-current="true"]{ background: var(--lime); color: var(--forest); }
@media (max-width: 899px){
  .worknav{ top: auto; right: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateX(50%); }
  .worknav ol{ grid-auto-flow: column; }
  .worknav a{ min-width: 44px; min-height: 44px; }
  .worknav a[aria-current="true"] i{ max-width: 14rem; }
}

/* ── 7c · App portfolio ─────────────────────────────────────────────
   Apps share the chapter frame of the websites, but are shown running.
   Each opener dims the page from forest to the app's own background
   (--void) while something of the app's gathers in the frame; the real
   app then plays inline on that same colour, so one flows into the next. */
.case__num[data-of]::after{ content: " / " attr(data-of); }
.case__title .dot{ color: var(--lime); }

/* site.js sets --night (0 → 1): the page mixes from forest to --void,
   flat colour, never a gradient */
.case__open--glow, .case__open--forms{
  --night: 0;
  background-color: color-mix(in srgb, var(--forest), var(--void) calc(var(--night) * 100%));
}

/* firefly.: night falls and the page's own pixel fireflies fly into the
   forest; the painting brightens (--lit) as they arrive */
.case__open--glow{ --void: #08121A; --lit: 1; height: 210svh; }
.glow{ position: absolute; z-index: 1; overflow: hidden; background: #08121A; }
.glow picture, .glow__scene{ display: block; width: 100%; height: 100%; }
.glow__scene{ object-fit: cover; filter: brightness(var(--lit)) saturate(calc(.55 + var(--lit) * .45)); }
.glow__flies{ position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
html:not(.js) .glow__flies{ display: none; }
@media (min-width: 900px){
  .case__open--glow .case__head > *{ max-width: min(28rem, 32vw); }
  .glow{
    inset: auto max(var(--gut), (100vw - var(--maxw)) / 2) auto 42%;
    top: calc(50% + var(--head-h) / 2); transform: translateY(-50%);
    aspect-ratio: 1456 / 816; border-radius: 4px;
    box-shadow: 0 0 0 1px var(--line-2), 0 60px 100px -60px rgba(0,0,0,.7);
  }
}
@media (max-width: 899px){
  .case__open--glow{ height: auto; }
  .glow{
    left: 50%; top: calc(50% + var(--head-h) / 2 - 20px); transform: translate(-50%, -50%);
    width: min(66vw, calc((100svh - var(--head-h) - 7rem) * 816 / 1456)); aspect-ratio: 816 / 1456;
    border-radius: 18px; box-shadow: 0 0 0 1px var(--line-2);
  }
}

/* FORM.: the page dims to the app's black while a cloud of points
   (drawn by site.js) gathers into its six forms in turn */
.case__open--forms{ --void: #050505; height: 270svh; }
.forms{ position: absolute; z-index: 1; overflow: hidden; background: #050505; }
.forms__still{ display: none; width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .forms__still{ display: block; }
.forms__label{
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1; margin: 0;
  font: 600 .625rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(238,241,232,.62);
}
.forms__label span{ color: var(--lime); margin-right: .7em; }
html:not(.js) .forms__label{ display: none; }
.forms__dots{ position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
html:not(.js) .forms__dots{ display: none; }
@media (min-width: 900px){
  .case__open--forms .case__head > *{ max-width: min(28rem, 32vw); }
  .forms{
    inset: auto max(var(--gut), (100vw - var(--maxw)) / 2) auto 42%;
    top: calc(50% + var(--head-h) / 2); transform: translateY(-50%);
    aspect-ratio: 1440 / 900; border-radius: 4px;
    box-shadow: 0 0 0 1px var(--line-2), 0 60px 100px -60px rgba(0,0,0,.7);
  }
}
@media (max-width: 899px){
  .case__open--forms{ height: auto; }
  .forms{
    left: 50%; top: calc(50% + var(--head-h) / 2 - 20px); transform: translate(-50%, -50%);
    width: min(66vw, calc((100svh - var(--head-h) - 7rem) * 816 / 1456)); aspect-ratio: 816 / 1456;
    border-radius: 18px; box-shadow: 0 0 0 1px var(--line-2);
  }
}

/* Play it here: the live app in a computer- or phone-shaped screen.
   It loads only when asked, and unloads (falling quiet) once scrolled away.
   Each section sits on its app's own background colour. */
.app-play{ --bg: #08121A; position: relative; padding-block: var(--sec-pad); }
.app-play--form{ --bg: #050505; }
.app-play__head{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: clamp(3rem, 8vh, 5rem); }
@media (min-width: 1000px){
  .app-play__head{ grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; column-gap: clamp(2rem, 5vw, 6rem); }
  .app-play__head .label{ grid-column: 1 / -1; }
}
.app-play__title .mask:nth-child(2) .mask__in{ --d: 100ms; }
.app-play__soft, .app-feats__soft, .app-tech__soft{ font-weight: 400; color: var(--soft); }
.app-play__copy{ display: grid; gap: 1.3rem; justify-items: start; color: var(--muted); }
.app-play__modes{ display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; }
.app-play__modes button{
  min-height: 44px; padding: 0 1.25rem; color: var(--muted);
  font: 600 .6875rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.app-play__modes button:hover{ color: var(--ink); }
.app-play__modes button[aria-pressed="true"]{ background: var(--lime); color: var(--forest); }
.app-play__note{ font-size: .875rem; }

/* --ww/--wh and --pw/--ph: the computer and phone screen proportions,
   matched to each app's own captures */
.player{
  --room: calc(100svh - var(--head-h) - 7rem); --ww: 1456; --wh: 816; --pw: 816; --ph: 1456;
  display: grid; justify-items: center;
}
.player--form{ --ww: 1440; --wh: 900; --pw: 390; --ph: 844; }
.player__screen{
  position: relative; overflow: hidden; background: var(--bg);
  width: min(100%, var(--room) * var(--ww) / var(--wh)); aspect-ratio: var(--ww) / var(--wh); border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line), 0 60px 120px -60px rgba(0,0,0,.8);
}
.player[data-shape="phone"] .player__screen{
  width: min(100%, var(--room) * var(--pw) / var(--ph), 26rem); aspect-ratio: var(--pw) / var(--ph); border-radius: 30px;
  box-shadow: 0 0 0 9px var(--black), 0 0 0 10px var(--line), 0 60px 120px -60px rgba(0,0,0,.8);
}
.player__poster{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player__poster--phone, .player[data-shape="phone"] .player__poster--wide{ display: none; }
.player[data-shape="phone"] .player__poster--phone{ display: block; }
/* a flat veil over the still, so the button reads */
.player__screen::after{ content: ""; position: absolute; inset: 0; background: rgba(8,18,26,.38); }
.player__start{ position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.player__screen iframe{ position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.player.is-live .player__start, .player.is-live .player__screen::after{ display: none; }
.player__foot{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 1.4rem; font-size: .875rem; color: var(--muted);
}
html:not(.js) .player__start, html:not(.js) .app-play__modes, html:not(.js) .app-play__note{ display: none; }

/* Inside the clearing: close-ups of what lives there */
.app-feats, .app-tech{ position: relative; padding-block: var(--sec-pad); }
.app-feats__head, .app-tech__head{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: clamp(3.5rem, 9vh, 6rem); }
.feats{ display: grid; gap: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.feat{ display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .55rem .5rem; align-content: start; }
.feat img{
  grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin-bottom: 1rem; border-radius: 4px; background: #08121A;
}
.feat__num{ font: 600 .6875rem/1.9 var(--f-mono); letter-spacing: .16em; color: var(--accent); }
.feat__name{ font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.feat p:not(.feat__num){ grid-column: 2; color: var(--muted); }
html.js:not(.rm) .feat:nth-child(3n+2){ --d: 100ms; }
html.js:not(.rm) .feat:nth-child(3n+3){ --d: 200ms; }

/* Design kit extras: the pixel face, the hand-drawn wordmark, the icons */
.spec__aa--pixel, .spec__name--pixel, .spec__sample--pixel{ font-family: "Silkscreen", ui-monospace, monospace; letter-spacing: 0; }
.spec__aa--pixel{ font-size: clamp(2.4rem, 3.4vw, 3.4rem); }
.spec__sample--pixel{ font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.5; }
.spec__img{ grid-row: span 2; width: 140px; height: auto; margin-right: .4rem; border-radius: 4px; image-rendering: pixelated; background: #08121A; }
.kit__panel--detail .kit__icon{ width: min(100%, 8.5rem); border-radius: 22%; }
.kit__panel--detail .kit__pixels{ border-radius: 8px; background: #08121A; }
.kit__panel--detail .kit__panel-shot{ width: min(100%, 15rem); border-radius: 12px; background: #050505; }
.spec__sample--mono{ font-size: clamp(.8rem, 1vw, .95rem); letter-spacing: .08em; line-height: 1.5; }
/* two captures side by side at equal height: columns in proportion to their widths */
.pair{ display: grid; grid-template-columns: minmax(0, var(--a, 1784fr)) minmax(0, var(--b, 560fr)); gap: clamp(.8rem, 2vw, 1.5rem); align-items: start; }
.pair img{ border-radius: 4px; }

/* ── 8 · Studio — an asymmetric editorial spread ────────────────── */
.studio{ position: relative; padding-block: var(--sec-pad); border-top: 1px solid var(--line-2); }
.studio__grid{ display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px){
  .studio__grid{ grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2vw, 2.5rem); row-gap: clamp(4rem, 10vh, 7rem); }
  .studio .label{ grid-column: 1 / span 3; }
  .studio__title{ grid-column: 1 / span 10; }
  .studio__body{ grid-column: 7 / span 5; }
}
.studio__title .mask:nth-child(2) .mask__in{ --d: 100ms; }
.studio__title .mask:nth-child(3) .mask__in{ --d: 200ms; }
.studio__body{ display: grid; gap: 1.5rem; color: var(--muted); }
.studio__body p:first-child{ color: var(--ink); font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.6; }
.studio__body p:nth-child(2){ --d: 100ms; }

/* Home: the symbol, large, in the open space beside the studio text.
   site.js feeds --s (0 → 1 as it crosses the screen) and --px/--py (the
   pointer, -1 → 1). It turns as it passes and leans towards the pointer,
   and its cream piece drifts after the pointer inside the lime shape.
   A click spins it once. Desktop only, where the space is. */
.studio__mark{ display: none; }
@media (min-width: 1000px){
  .studio__mark{
    --s: .5; --px: 0; --py: 0;
    display: block; grid-column: 1 / span 5; grid-row: 3; align-self: center; justify-self: center;
    width: min(100%, 30rem); cursor: pointer;
    transform-origin: 52.84% 47.16%;
    transform: rotate(calc((var(--s) - .5) * -56deg + var(--px) * 12deg));
  }
  .studio__mark svg{ width: 100%; height: auto; overflow: visible; transform-origin: 52.84% 47.16%; }
  .studio__lime{ fill: var(--lime); }
  .studio__cream{ fill: var(--cream); transform: translate(calc(var(--px) * 16px), calc(var(--py) * 16px)); }
  .studio__mark.is-spun svg{ animation: mark-spin 1.4s var(--ease-out); }
  html.js:not(.rm) .studio__mark{ opacity: 0; transition: opacity 1.4s var(--ease-out); }
  html.js:not(.rm) .studio__mark.is-in{ opacity: 1; }
}
@keyframes mark-spin{ from{ transform: rotate(-360deg); } }

/* ── 9 · Services — a typographic list, not a card grid ─────────── */
.services{ position: relative; padding-block: var(--sec-pad); }
.services__head{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: clamp(4rem, 10vh, 7rem); }
.services__title .mask:nth-child(2) .mask__in{ --d: 100ms; }
.services__list{ border-top: 1px solid var(--line); }
.service{
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .6rem 1rem; align-items: baseline;
  padding: clamp(1.8rem, 4vh, 2.8rem) 0; border-bottom: 1px solid var(--line);
}
.service:nth-child(2){ --d: 80ms; } .service:nth-child(3){ --d: 160ms; } .service:nth-child(4){ --d: 240ms; }
.service__num{ font: 500 .6875rem/1 var(--f-mono); letter-spacing: .16em; color: var(--accent); }
.service__name{ font-size: clamp(1.5rem, 2.6vw, 2.6rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.service p{ grid-column: 2; color: var(--muted); max-width: 40ch; }
@media (min-width: 900px){
  .service{ grid-template-columns: 6rem minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .service p{ grid-column: 3; }
}

/* ── 10 · Process — heading holds its place, steps run beside it ── */
.process{ position: relative; padding-block: var(--sec-pad); }
.process__grid{ display: grid; gap: clamp(3rem, 8vh, 5rem); }
@media (min-width: 1000px){
  .process__grid{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .process__head{ position: sticky; top: calc(var(--head-h) + 3rem); }
}
.process__head{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.process__title .mask:nth-child(2) .mask__in{ --d: 100ms; }
.process__steps{ border-top: 1px solid var(--line); }
.step{
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .7rem 1rem;
  padding: clamp(2rem, 5vh, 3rem) 0; border-bottom: 1px solid var(--line);
}
.step:nth-child(2){ --d: 90ms; } .step:nth-child(3){ --d: 180ms; } .step:nth-child(4){ --d: 270ms; }
.step__num{ font: 500 .6875rem/2.2 var(--f-mono); letter-spacing: .16em; color: var(--accent); }
.step__name{ font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.step p{ grid-column: 2; color: var(--muted); max-width: 44ch; }

/* ── 11 · Contact ───────────────────────────────────────────────── */
.contact{ position: relative; padding-block: var(--sec-pad) clamp(6rem, 14vh, 10rem); border-top: 1px solid var(--line-2); }
.contact__head{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: clamp(4rem, 10vh, 7rem); }
.contact__title{ font-size: clamp(2.8rem, 6.4vw, 7.2rem); }
.contact__title .mask:nth-child(2) .mask__in{ --d: 110ms; }
.contact__grid{ display: grid; gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 1000px){ .contact__grid{ grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: start; column-gap: clamp(3rem, 8vw, 9rem); } }
.contact__sub{ max-width: 34ch; font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.6; color: var(--muted); }
.contact__direct{ display: grid; gap: .7rem; margin-top: clamp(2.5rem, 6vh, 3.5rem); }
.contact__direct a{
  font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.03em; text-decoration: none; width: fit-content;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .15em;
  transition: background-size var(--t-mid) var(--ease-out);
}
.contact__direct a:hover{ background-size: 0 1px; background-position: 100% 100%; }

/* fields: a single hairline underneath, no boxes */
.enquiry{ display: grid; gap: 2rem; }
.field{ display: grid; gap: .5rem; }
.field label{ font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.req{ color: var(--accent); }
.field input, .field textarea{
  width: 100%; min-height: 50px; padding: .7rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); font-size: 1.125rem; line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease-out);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input:hover, .field textarea:hover{ border-color: var(--muted); }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.hint{ font-size: .875rem; color: var(--muted); }
.err{ display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--err); }
.err[hidden]{ display: none; }
.err::before{ content: ""; width: 5px; height: 5px; flex: none; background: currentColor; }
.field.is-bad input, .field.is-bad textarea{ border-color: var(--err); }
.enquiry__summary{ padding: 1rem 0 1rem 1.2rem; border-left: 1px solid var(--err); color: var(--err); }
.enquiry__summary[hidden]{ display: none; }
.enquiry__summary h3{ font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem; }
.enquiry__summary ul{ display: grid; gap: .3rem; list-style: square; padding-left: 1.1rem; }
.enquiry__summary a{ color: inherit; }
.enquiry__status:empty{ display: none; }
.enquiry__status{ padding: 1rem 0 1rem 1.2rem; font-size: .9375rem; line-height: 1.6; border-left: 1px solid var(--accent); color: var(--ink); }
.enquiry__status a{ color: var(--ink); text-underline-offset: 3px; }
.enquiry__status code{ font-family: var(--f-mono); font-size: .85em; color: var(--accent); }
.enquiry__status.is-good{ border-left-color: var(--good); }
.enquiry__status.is-bad{ border-left-color: var(--err); }
.enquiry__todo{ display: block; margin-top: .5rem; font-size: .85em; color: var(--muted); }
.hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── 12 · Footer: every page ends in light ─────────────────────────
   Cream, closing on the wordmark set as large as the page allows. */
.site-foot{
  position: relative; overflow: hidden;
  padding-top: clamp(5rem, 12vh, 8rem); border-top: 1px solid var(--line-2);
}
.site-foot__top{ display: grid; gap: 3rem 4rem; }
@media (min-width: 800px){ .site-foot__top{ grid-template-columns: minmax(0, 30rem) auto; justify-content: space-between; } }
.site-foot__about{ display: grid; gap: 1.1rem; }
.site-foot__about p:not(.label){ color: var(--muted); max-width: 38ch; }
.site-foot__mail{ width: fit-content; font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: .2rem; transition: border-color var(--t-fast); }
.site-foot__mail:hover{ border-color: var(--ink); }
.site-foot__nav ul{ display: grid; gap: .6rem; }
@media (min-width: 800px){ .site-foot__nav ul{ grid-template-columns: repeat(2, auto); column-gap: 4rem; } }
.site-foot__nav a{ font-size: .9375rem; color: var(--muted); text-decoration: none; transition: color var(--t-fast); }
.site-foot__nav a:hover, .site-foot__nav a[aria-current]{ color: var(--ink); }
/* the wordmark as on cream: SEPHYR in forest at 600, DESIGN in moss at 400,
   tracked +.12em and sized to the width of the page (container units) */
.site-foot__mark{
  display: block; container-type: inline-size; text-decoration: none;
  margin: clamp(5rem, 14vh, 9rem) 0 clamp(1.4rem, 3vh, 2.2rem);
}
.site-foot__word{
  display: block; width: fit-content; margin-right: -.12em; white-space: nowrap;
  font: 400 9vw/.8 var(--f-sans); font-size: 10.45cqw; letter-spacing: .12em; text-transform: uppercase;
  color: var(--moss); padding-block: .06em;
}
.site-foot__word b{ font-weight: 600; color: var(--ink); margin-right: .1em; }
.site-foot__legal{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem;
  padding: 1.5rem 0 calc(env(safe-area-inset-bottom, 0px) + 2rem); border-top: 1px solid var(--line);
  font: 500 .625rem/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.site-foot__colophon{ display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.site-foot__legal a{ text-decoration: none; transition: color var(--t-fast); }
.site-foot__legal a:hover{ color: var(--ink); }
.site-foot__colophon a[aria-current="page"]{ color: var(--ink); }

/* ── 13 · Live preview dialog ───────────────────────────────────── */
.live{
  width: min(100% - 2rem, 1320px); height: min(100svh - 2rem, 920px); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.live[open]{ display: grid; grid-template-rows: auto minmax(0, 1fr); animation: live-in .5s var(--ease-out); }
.live::backdrop{ background: rgba(6,24,17,.88); }
@keyframes live-in{ from{ opacity: 0; transform: translateY(12px) } to{ opacity: 1; transform: none } }
.live__bar{
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .6rem .6rem .6rem 1.25rem; border-bottom: 1px solid var(--line-2);
}
.live__title{ margin-right: auto; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.live__title b{ font-weight: 500; color: var(--ink); margin-left: .4rem; }
.live__modes{ display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; }
.live__modes button{ min-height: 38px; padding: 0 1rem; font: 500 .625rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.live__modes button[aria-pressed="true"]{ background: var(--lime); color: var(--forest); }
.live__open{ font: 500 .625rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-underline-offset: 4px; }
.live__stage{ display: grid; place-items: center; min-height: 0; padding: clamp(.75rem, 2vw, 1.5rem); background: var(--black); }
.live__device{
  width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background: #fff;
  transition: width var(--t-slow) var(--ease-out), border-radius var(--t-mid) var(--ease-out);
}
.live__device.is-phone{ width: min(390px, 100%); height: min(844px, 100%); border-radius: 30px; box-shadow: 0 0 0 10px var(--forest-2), 0 0 0 11px var(--line); }
.live__device iframe{ display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 699px){
  .live{ width: 100%; height: 100%; border: 0; }
  .live__modes{ display: none; }
  .live__stage{ padding: 0; }
  .live__device, .live__device.is-phone{ width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}

/* ── 14 · Privacy policy page ───────────────────────────────────── */
.legal__back{ margin-left: auto; }
.legal__head{ padding-block: calc(var(--head-h) + clamp(4rem, 14vh, 9rem)) clamp(4rem, 10vh, 7rem); border-bottom: 1px solid var(--line-2); }
.legal__title{ margin: clamp(1.4rem, 3vh, 2.2rem) 0 clamp(1.8rem, 4vh, 2.6rem); font-size: clamp(2.8rem, 6.4vw, 6.8rem); }
.legal__title .mask:nth-child(2) .mask__in{ font-weight: 400; color: var(--soft); }
.legal__lead{ max-width: 52ch; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.65; color: var(--muted); }
.legal__body{ padding-block: clamp(2rem, 6vh, 4rem) var(--sec-pad); }
.legal__sec{ display: grid; gap: 1rem clamp(1.5rem, 5vw, 5rem); padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line-2); }
@media (min-width: 900px){ .legal__sec{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.legal__h{ display: flex; align-items: baseline; gap: clamp(.9rem, 2vw, 1.5rem); font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.legal__idx{ font: 500 .6875rem/1 var(--f-mono); letter-spacing: .14em; color: var(--accent); flex: none; }
.legal__text{ display: grid; gap: 1rem; max-width: 62ch; color: var(--muted); }
.legal__text ul{ display: grid; gap: .6rem; }
.legal__text li{ position: relative; padding-left: 1.4rem; color: var(--ink); }
.legal__text li::before{ content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--accent); }
.legal__contact{ color: var(--ink); line-height: 1.8; }
.legal__contact a{ color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.legal__contact a:hover{ color: var(--accent); }
.legal__return{ margin-top: clamp(3rem, 7vh, 4.5rem); }

/* Page swipe between pages: the incoming page sweeps in on a diagonal
   behind a solid band of lime.
   Browsers without cross-document view transitions navigate normally. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
}
::view-transition-group(root){
  background: var(--lime);
  animation-duration: 1s; animation-timing-function: var(--ease-in-out);
}
::view-transition-old(root), ::view-transition-new(root){
  mix-blend-mode: normal; animation-duration: 1s; animation-timing-function: var(--ease-in-out);
}
/* into any inner page the swipe runs forward; back home it runs in reverse */
:root:not([data-page="home"])::view-transition-old(root){ animation-name: swipe-fwd-old; }
:root:not([data-page="home"])::view-transition-new(root){ animation-name: swipe-fwd-new; }
:root[data-page="home"]::view-transition-old(root){ animation-name: swipe-back-old; }
:root[data-page="home"]::view-transition-new(root){ animation-name: swipe-back-new; }
@keyframes swipe-fwd-new{
  from{ clip-path: polygon(-90% -30%, -30% -30%, -60% 130%, -90% 130%); }
  to  { clip-path: polygon(-90% -30%, 150% -30%, 120% 130%, -90% 130%); }
}
@keyframes swipe-fwd-old{
  from{ clip-path: polygon(-18% -30%, 200% -30%, 200% 130%, -48% 130%); }
  to  { clip-path: polygon(162% -30%, 200% -30%, 200% 130%, 132% 130%); }
}
@keyframes swipe-back-new{
  from{ clip-path: polygon(150% -30%, 200% -30%, 200% 130%, 120% 130%); }
  to  { clip-path: polygon(-30% -30%, 200% -30%, 200% 130%, -60% 130%); }
}
@keyframes swipe-back-old{
  from{ clip-path: polygon(-90% -30%, 138% -30%, 108% 130%, -90% 130%); }
  to  { clip-path: polygon(-90% -30%, -42% -30%, -72% 130%, -90% 130%); }
}

/* ── 15 · Reduced motion ────────────────────────────────────────── */
@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;
  }
}

/* ── 16 · Print ─────────────────────────────────────────────────── */
@media print{
  .site-head, .menu-panel, .worknav, .live, .book, .torch, .porthole, .tide{ display: none !important; }
  body, html{ background: #fff; color: #000; }
  .case__open, .case__tour{ height: auto; }
  .case__sticky{ position: static; height: auto; }
}