/* Self-hosted variable fonts. Removes the render-blocking Google Fonts
   stylesheet plus two third-party origins (googleapis + gstatic) from the
   critical path. One file per family covers every weight we use. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("/assets/fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bone:   #EFEDE6;
  --ink:    #090909;
  --ink-2:  #121212;
  --ink-3:  #1A1A1A;
  --mute:   rgba(239,237,230,0.62);
  /* 0.52 not 0.38: at 0.38 this token rendered small label and helper text
     at 3.15:1 on --ink, below the 4.5:1 AA floor. 0.52 gives 5.01:1. */
  --mute-2: rgba(239,237,230,0.52);
  --line:   rgba(239,237,230,0.14);

  /* signal: strong red. --signal is the brand red (AA on bone and on ink at
     large sizes). --signal-hi is the legible-on-dark variant used only for
     small text/icons on the ink surfaces. --signal-dk is the hover darken. */
  --signal:    #C8102E;
  --signal-hi: #FF3B41;
  --signal-dk: #A50D24;
  --signal-a08: rgba(200,16,46,0.08);
  --signal-a35: rgba(200,16,46,0.35);
  --signal-a45: rgba(200,16,46,0.45);

  /* real rendered height of the fixed nav island, measured in site.js.
     every top clearance on the site derives from this so the header can
     never sit on top of a headline, eyebrow or CTA. */
  --nav-h: 72px;
  --nav-gap: 1rem;

  --e:  cubic-bezier(0.22, 1, 0.36, 1);
  --t1: 340ms;
  --t2: 700ms;
  --t3: 1050ms;

  --gutter: clamp(1.15rem, 4.2vw, 4rem);
  --sec-y:  clamp(4.5rem, 11vh, 8.5rem);
  --max:    1400px;
  --mat:    12px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
p, h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
section[id],
.stack-card[id],
[id="top"] { scroll-margin-top: calc(var(--nav-h) + var(--nav-gap) + 0.75rem); }
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; }
.close :focus-visible,
.foot :focus-visible,
.page-hero.is-light :focus-visible { outline-color: var(--signal); }

/* ---------- type ---------- */
.display {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.048em;
  line-height: 0.98;
  text-wrap: balance;
  overflow: visible;
}
.d1 {
  font-size: clamp(2rem, 5.4vw, 4.35rem);
  letter-spacing: -0.048em;
  line-height: 1;
}
.d2 {
  font-size: clamp(1.65rem, 3.7vw, 2.95rem);
  letter-spacing: -0.042em;
  line-height: 1.06;
}
.d3 {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  letter-spacing: -0.028em;
  line-height: 1.18;
  font-weight: 700;
}
.d4 {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  line-height: 1.32;
}
.lead {
  font-size: clamp(0.96rem, 1.05vw, 1.055rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--mute);
  max-width: 40ch;
  font-weight: 400;
}
.body {
  color: var(--mute);
  font-size: 0.945rem;
  line-height: 1.6;
  max-width: 48ch;
}
.body-s {
  color: var(--mute);
  font-size: 0.89rem;
  line-height: 1.55;
  max-width: 36ch;
}

/* labels: Manrope, not mono */
.tag, .eyebrow, .meta, .label {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.eyebrow { display: block; }
.em {
  font-style: italic;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--signal-hi);
  padding-inline-end: 0.04em;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec { padding-block: var(--sec-y); }

/* Film grain. Was an inline SVG feTurbulence filter, which the browser had
   to rasterise on every page. This is the same effect as a precomputed tile,
   so there is no filter work at all, and it is dropped entirely on small
   screens where the compositing cost is least affordable and least visible. */
.grain { display: none; }

@media (min-width: 769px) {
  .grain {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("/assets/noise.png");
    background-repeat: repeat;
    background-size: 64px 64px;
  }
}

/* ---------- interactions ---------- */
.swap {
  display: inline-grid;
  overflow: hidden;
  line-height: 1.2;
  vertical-align: bottom;
}
.swap > span {
  grid-area: 1 / 1;
  transition: transform var(--t1) var(--e);
}
.swap > span + span {
  transform: translateY(110%);
  color: var(--signal-hi);
}
.nlink:hover .swap > span,
.tlink:hover .swap > span { transform: translateY(-110%); }
.nlink:hover .swap > span + span,
.tlink:hover .swap > span + span { transform: translateY(0); }

.nlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mute);
  transition: color var(--t1) var(--e);
}
.nlink:hover { color: var(--bone); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bone);
  transition: color var(--t1) var(--e), gap var(--t2) var(--e);
}
/* inline sprite icons: sized in em so existing font-size rules still drive them */
.ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
  vertical-align: -0.125em;
}

.tlink .ic {
  font-size: 0.95rem;
  transition: transform var(--t1) var(--e), color var(--t1) var(--e);
}
.tlink:hover { color: var(--signal-hi); gap: 0.8rem; }
.tlink:hover .ic { transform: translateX(3px); color: var(--signal-hi); }

/* button: pill shell + circular icon chip. one hover: surface swap. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 46px;
  padding: 0.45rem 0.45rem 0.45rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--bone);
  color: var(--bone);
  background: transparent;
  /* no overflow:hidden - nothing here may clip a glyph or the chip */
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--sc, 1));
  transition:
    color var(--t1) var(--e),
    background-color var(--t1) var(--e),
    border-color var(--t1) var(--e),
    transform var(--t1) var(--e);
}
.btn .nib {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color var(--t1) var(--e), border-color var(--t1) var(--e);
}
.btn .nib .ic {
  font-size: 0.85rem;
  transition: transform var(--t1) var(--e);
}
.btn:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn:hover .nib .ic { transform: translate(2px, -2px); }
.btn:active { --sc: 0.985; }

.btn-solid {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.btn-solid:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--bone);
}

.btn-signal {
  background: var(--signal);
  color: var(--bone);
  border-color: var(--signal);
}
.btn-signal:hover {
  background: var(--signal-dk);
  border-color: var(--signal-dk);
  color: var(--bone);
}

/* pill buttons sitting on the bone surfaces (footer, contact, light hero) */
.close .btn:not(.btn-solid):not(.btn-signal),
.page-hero.is-light .btn:not(.btn-solid):not(.btn-signal),
.foot .btn:not(.btn-solid):not(.btn-signal) {
  border-color: rgba(9,9,9,0.6);
  color: var(--ink);
}
.close .btn:not(.btn-solid):not(.btn-signal):hover,
.page-hero.is-light .btn:not(.btn-solid):not(.btn-signal):hover,
.foot .btn:not(.btn-solid):not(.btn-signal):hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.close .btn-solid,
.page-hero.is-light .btn-solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.close .btn-solid:hover,
.page-hero.is-light .btn-solid:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--bone);
}

/* photo plate: mat only, no outer decorative frame */
.plate { display: block; }
.media {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.9);
  transform: scale(1.001);
  transition: transform 1.35s var(--e), filter var(--t2) var(--e);
}
.plate .media::after {
  content: "";
  position: absolute; inset: var(--mat); z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(239,237,230,0.5);
  transition: inset var(--t2) var(--e), border-color var(--t2) var(--e);
}
.plate:hover .media::after {
  inset: calc(var(--mat) + 7px);
  border-color: rgba(239,237,230,0.9);
}
.plate:hover .media img {
  transform: scale(1.05);
  filter: grayscale(0.3) contrast(1.05) brightness(0.95);
}

/* ---------- nav island ---------- */
.nav {
  position: fixed;
  top: 1rem; left: 0; right: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav-island {
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.2rem;
  gap: 0.25rem;
  min-height: 56px;
  padding: 0.35rem 0.35rem 0.35rem 0.95rem;
  background: rgba(9,9,9,0.78);
  border: 1px solid rgba(239,237,230,0.16);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 16px 40px -24px rgba(0,0,0,0.9);
  max-width: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding-right: 0.85rem;
  margin-right: 0.25rem;
}
.brand img { width: 26px; height: 26px; }
.brand .wm {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--bone);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.nav-links .nlink {
  padding-inline: 0.7rem;
  font-size: 0.86rem;
}
.nav-cta {
  margin-left: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mute);
  white-space: nowrap;
  transition: color var(--t1) var(--e);
}
.nav-phone:hover { color: var(--bone); }
.nav-island.is-light .nav-phone { color: rgba(9,9,9,0.62); }
.nav-island.is-light .nav-phone:hover { color: var(--ink); }
.nav-cta .btn {
  min-height: 40px;
  gap: 0.55rem;
  padding: 0.35rem 0.35rem 0.35rem 0.95rem;
  font-size: 0.8rem;
}
.nav-cta .btn .nib { width: 24px; height: 24px; }
.nav-cta .btn .nib .ic { font-size: 0.72rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  margin-left: 0.15rem;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 17px; height: 1.5px;
  background: var(--bone);
  transition: transform var(--t2) var(--e);
}
.burger span:nth-child(1) { transform: translate(-50%, -4px); }
.burger span:nth-child(2) { transform: translate(-50%, 4px); }
body.nav-open .burger span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: 69;
  background: rgba(9,9,9,0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.1rem;
  padding: calc(var(--nav-h) + var(--nav-gap) + 2rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t2) var(--e), visibility var(--t2) var(--e);
}
body.nav-open .sheet { opacity: 1; visibility: visible; }
.sheet a {
  display: inline-flex;
  align-items: center;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 4.4vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  padding: 0.35rem 0;
  min-height: 48px;
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity var(--t2) var(--e), transform var(--t2) var(--e), color var(--t1) var(--e);
}
body.nav-open .sheet a { opacity: 1; transform: none; }
.sheet a:nth-of-type(1) { transition-delay: 0.05s; }
.sheet a:nth-of-type(2) { transition-delay: 0.1s; }
.sheet a:nth-of-type(3) { transition-delay: 0.15s; }
.sheet a:nth-of-type(4) { transition-delay: 0.2s; }
.sheet a:nth-of-type(5) { transition-delay: 0.25s; }
.sheet a:nth-of-type(6) { transition-delay: 0.3s; }
.sheet a:hover { color: var(--signal-hi); }
/* the sheet's own primary action reads as a pill, not as another section link */
.sheet a.btn {
  margin-top: 1.1rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.012em;
  padding: 0.45rem 0.45rem 0.45rem 1.15rem;
  min-height: 46px;
}
.sheet a.btn:hover { color: var(--bone); }

.sheet .sfoot {
  margin-top: 1.85rem;
  display: grid;
  gap: 0;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity var(--t2) var(--e) 0.22s, transform var(--t2) var(--e) 0.22s;
}
body.nav-open .sheet .sfoot { opacity: 1; transform: none; }
.sheet .sfoot a {
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  opacity: 1;
  transform: none;
  color: var(--mute);
}
.sheet .sfoot a:hover { color: var(--signal-hi); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding-bottom: clamp(2.25rem, 6.5vh, 4.5rem);
}
.hero-film {
  position: absolute; inset: 0; z-index: -2;
  background: #050505;
}
.hero-film video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: grayscale(1) contrast(1.12) brightness(0.76);
  transform-origin: 60% 42%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-film video { animation: drift 28s var(--e) infinite alternate; }
}
@keyframes drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); }
}
.hero-film::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(110% 80% at 50% 40%, rgba(5,5,5,0) 28%, rgba(5,5,5,0.5) 100%),
    linear-gradient(to top,
      rgba(9,9,9,0.97) 0%,
      rgba(9,9,9,0.72) 20%,
      rgba(9,9,9,0.12) 50%,
      rgba(9,9,9,0.22) 78%,
      rgba(9,9,9,0.5) 100%);
}

.hero-meta {
  /* sits in the flow directly above the headline it introduces. It used to be
     absolutely positioned against the top of the viewport while the hero type
     is bottom-anchored, which left it stranded mid-hero. As the first flow
     child it now also carries the nav clearance for the whole hero. */
  position: relative;
  z-index: 3;
  padding-top: calc(var(--nav-h) + var(--nav-gap) + 1rem);
  margin-bottom: 0.85rem;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-2);
  pointer-events: none;
}
.hero-meta a,
.hero-meta .live { pointer-events: auto; }
.hero-meta a {
  color: inherit;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--t1) var(--e);
}
.hero-meta a:hover { color: var(--bone); }
.hero-meta .live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-meta .dot {
  width: 6px; height: 6px;
  background: var(--signal-hi);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,59,65,0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-meta .dot { animation: pulse 2.4s var(--e) infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,65,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255,59,65,0); }
}

/* hero type sits below the meta strip, which itself sits below the nav */
.hero-type {
  position: relative;
  z-index: 2;
  overflow: visible;
}
.hero-type .d1 { max-width: min(15ch, 100%); overflow: visible; }
.hero-row {
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  align-items: end;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* ---------- materials strip ---------- */
.strip {
  background: var(--ink-2);
  overflow: hidden;
  padding-block: clamp(1.05rem, 2.2vh, 1.6rem);
}
.strip-track { display: flex; width: max-content; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  .strip-track { animation: slide 48s linear infinite; }
}
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes slide {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.strip-set { display: flex; flex: 0 0 auto; }
.strip-set span {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.45rem);
  letter-spacing: -0.026em;
  line-height: 1.2;
  color: var(--bone);
  padding-inline: clamp(1.1rem, 2.5vw, 2.2rem);
  white-space: nowrap;
}
.strip-set span:nth-child(even) { color: var(--mute-2); }
.strip-set .sig { color: var(--signal-hi) !important; }

/* ---------- brand marquee ---------- */
/* Second marquee on the page, so it is deliberately differentiated from the
   materials strip: darker ground, a pinned label, and it travels the other
   way. Wordmarks, not logos - see the note in the commit. */
.strip-brands {
  background: var(--ink);
  border-block: 1px solid var(--line);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.strip-brands .strip-label {
  flex: 0 0 auto;
  padding-inline: var(--gutter) clamp(1rem, 2vw, 1.75rem);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-2);
  white-space: nowrap;
  border-right: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.strip-brands .strip-view {
  flex: 1 1 auto;
  overflow: hidden;
  padding-block: clamp(0.9rem, 1.8vh, 1.35rem);
  /* fade the leading edge so words do not collide with the label */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}
.strip-brands .strip-track { animation-direction: reverse; animation-duration: 56s; }
.strip-brands .strip-set span {
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  color: var(--mute);
  padding-inline: clamp(0.9rem, 2vw, 1.8rem);
}
.strip-brands .strip-set span.sig { color: var(--signal-hi) !important; }

/* Real brand logos, when the files exist. Normalised to one optical height
   and recoloured to bone so a strip of marks from 16 different houses reads
   as one row rather than a ransom note. Drop a file in assets/brands/ and
   swap that brand's span - see the README there. */
.strip-brands .blogo {
  height: clamp(15px, 1.6vw, 21px);
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
  /* black artwork -> bone, at the same weight as the wordmarks beside it */
  filter: brightness(0) invert(1);
  opacity: 0.62;
  transition: opacity var(--t1) var(--e);
}
.strip-brands a:hover .blogo,
.strip-brands .strip-set span:hover .blogo { opacity: 1; }
/* a logo sits in the same slot as a wordmark, so kill the text padding twice */
.strip-brands .strip-set span:has(.blogo) {
  display: flex;
  align-items: center;
}
.strip-brands:hover .strip-track { animation-play-state: paused; }

@media (max-width: 700px) {
  .strip-brands { display: block; }
  .strip-brands .strip-label {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-block: 0.7rem;
    justify-content: flex-start;
  }
  .strip-brands .strip-view {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  }
}

/* ---------- about / positioning ---------- */
.pos-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.pos-head > .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0.15rem;
}
.pos-head .d2 {
  max-width: min(14ch, 100%);
  overflow: visible;
}

.pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.pos-card {
  background: var(--ink-2);
  padding: clamp(1.5rem, 2.8vw, 2.15rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  min-height: 12.5rem;
  transition: background-color var(--t2) var(--e), transform var(--t2) var(--e);
}
.pos-card:hover {
  background: var(--ink-3);
  transform: translateY(-3px);
}
.pos-card .mark {
  width: 28px; height: 2px;
  background: var(--signal);
}
.pos-card .d4 { color: var(--bone); }
.pos-card .body-s { max-width: 28ch; }

/* ---------- services ---------- */
.svc { background: var(--ink-2); }
.svc-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.svc-head { margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem); }
.svc-head .d2 { margin-top: 0.7rem; max-width: min(16ch, 100%); overflow: visible; }
.svc-head .lead { max-width: 38ch; }

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.15rem, 2vh, 1.5rem) 0.85rem;
  cursor: pointer;
  isolation: isolate;
  transition: padding var(--t2) var(--e);
}
.svc-row::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t2) var(--e);
}
.svc-row.is-on::before,
.svc-row:hover::before { transform: scaleY(1); }
.svc-row .d3 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  transition: transform var(--t2) var(--e), color var(--t1) var(--e);
}
.svc-row.is-on .d3,
.svc-row:hover .d3 {
  transform: translateX(6px);
  color: var(--bone);
}
.svc-row .tag {
  display: block;
  margin-top: 0.35rem;
  transition: transform var(--t2) var(--e), color var(--t1) var(--e);
}
.svc-row.is-on .tag,
.svc-row:hover .tag {
  transform: translateX(6px);
  color: var(--mute);
}
.svc-row .go {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  transition: background-color var(--t1) var(--e), border-color var(--t1) var(--e);
}
.svc-row .go .ic {
  font-size: 1rem;
  transition: transform var(--t1) var(--e), color var(--t1) var(--e);
  color: var(--mute-2);
}
.svc-row.is-on .go,
.svc-row:hover .go { background: var(--signal); border-color: var(--signal); }
.svc-row.is-on .go .ic,
.svc-row:hover .go .ic { transform: translate(2px, -2px); color: var(--bone); }

.svc-panel { position: sticky; top: calc(var(--nav-h) + var(--nav-gap) + 1.25rem); }
.svc-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* line drawings, not photos -- a warm off-white ground reads as a page,
     not a photo plate, and keeps the ink linework legible. */
  background: var(--bone);
}
.svc-frame .pv {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  /* tighter than a photo plate needs -- the drawing should own the frame */
  padding: clamp(0.85rem, 2.4vw, 1.5rem);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--t2) var(--e), transform 1.4s var(--e);
}
.svc-frame .pv.is-on { opacity: 1; transform: scale(1); }
.svc-draw { width: 100%; height: 100%; overflow: visible; }
/* thinner, sharp-jointed strokes read as a drafted line drawing rather
   than a felt-tip sketch; .ln-soft brings the round caps/joins back for
   the handful of organic, curved elements (the mural, paint, the peel) */
.svc-draw .ln-a { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: butt; stroke-linejoin: miter; }
.svc-draw .ln-c { fill: none; stroke: var(--signal); stroke-width: 1.3; stroke-linecap: butt; stroke-linejoin: miter; }
.svc-draw .ln-soft { stroke-linecap: round; stroke-linejoin: round; }
.svc-draw .dot-c { fill: var(--signal); stroke: none; }
.svc-draw .svc-scale { transform-box: view-box; transform-origin: 50% 50%; transform: scale(1.2); }
@media (max-width: 640px) {
  .svc-frame .pv { padding: clamp(0.3rem, 1.6vw, 0.55rem); }
  .svc-draw .svc-scale { transform: scale(1.22); }
}
.svc-frame::after {
  content: "";
  position: absolute; inset: var(--mat); z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(9,9,9,0.14);
}

/* ---------- service drawings: one quiet, consistent activation ---------- */
/* Every drawing does exactly the same thing when its row goes active: the
   linework draws in together, fast, once. No per-drawing pantomime, no
   loops, no idle motion -- a promise this fires on nearly every hover as
   someone scans the row list, so it has to resolve almost instantly or it
   just reads as flicker. pathLength="1" lets any shape (line, rect, path)
   share one 0-to-1 dash animation regardless of its real geometry. */
.svc-draw .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pv.is-on .svc-draw .dr { animation: svc-dr 280ms var(--e) forwards; }
@keyframes svc-dr { to { stroke-dashoffset: 0; } }

.svc-draw .dot-c { opacity: 0; }
.pv.is-on .svc-draw .dot-c { animation: svc-dot 220ms var(--e) 90ms forwards; }
@keyframes svc-dot { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .svc-frame .pv { transition: none !important; }
  .svc-draw .dr { animation: none !important; stroke-dashoffset: 0 !important; }
  .svc-draw .dot-c { animation: none !important; opacity: 1 !important; }
}
.svc-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.95rem;
}
.svc-cap #svc-name {
  color: var(--bone);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ---------- work sticky stack ---------- */
.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4.5vh, 3.25rem);
}
.work-head .d2 { max-width: min(14ch, 100%); margin-top: 0.7rem; overflow: visible; }

.stack { display: grid; gap: 0; }
.stack-card {
  position: sticky;
  top: calc(var(--nav-h) + var(--nav-gap) + 0.5rem);
  min-height: calc(100dvh - var(--nav-h) - var(--nav-gap) - 1.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  background: var(--ink);
  overflow: hidden;
}
.stack-card:nth-child(even) { direction: rtl; }
.stack-card:nth-child(even) > * { direction: ltr; }

.stack-media {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
  background: var(--ink-3);
}
.stack-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.86);
  transition: transform 1.35s var(--e), filter var(--t2) var(--e);
}
.stack-card:hover .stack-media img {
  transform: scale(1.045);
  filter: grayscale(0.18) contrast(1.05) brightness(0.94);
}
.stack-media::after {
  content: "";
  position: absolute; inset: var(--mat); z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(239,237,230,0.4);
}
.stack-body {
  display: grid;
  align-content: center;
  gap: 1.1rem;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  background: var(--ink);
}
.stack-body .meta { color: var(--signal-hi); }
.stack-body .d3 { max-width: 13ch; }
.stack-body .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.stack-body .chip {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--mute);
  background: var(--ink-2);
  padding: 0.35rem 0.7rem;
}

/* ---------- process ---------- */
.proc { background: var(--ink-2); }
.proc-in {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.proc-shot .media img { aspect-ratio: 4 / 5; }
.proc-copy .d2 { max-width: min(14ch, 100%); margin-top: 0.7rem; overflow: visible; }
.proc-copy .lead { margin-top: 1.25rem; }

.steps {
  margin-top: clamp(2rem, 4vh, 3rem);
  display: grid;
  gap: 0.65rem;
}
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding: 1.15rem 1.2rem;
  background: var(--ink);
  transition: background-color var(--t1) var(--e), transform var(--t2) var(--e);
}
.step:hover {
  background: var(--ink-3);
  transform: translateX(4px);
}
.step .label { color: var(--signal-hi); }
.step .d4 { color: var(--bone); }
.step .body-s { max-width: 44ch; }

/* ---------- voices ---------- */
.voice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.voice-lead { position: relative; }
.voice-lead .qm {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(3.25rem, 6.6vw, 5.75rem);
  line-height: 0.55;
  color: var(--signal-hi);
  position: absolute;
  left: -0.05em; top: -0.18em;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}
.voice-lead blockquote {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.voice-side {
  display: grid;
  gap: clamp(1.75rem, 3.5vh, 2.5rem);
  padding-top: 0.35rem;
}
.voice-side blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mute);
  max-width: 34ch;
}
.attr { margin-top: 1.15rem; }
.attr .nm {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bone);
}
.attr .rl {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--mute-2);
}

/* ---------- contact ---------- */
.close {
  background: var(--bone);
  color: var(--ink);
}
.close .eyebrow, .close .tag, .close .meta, .close .label {
  color: rgba(9,9,9,0.6);
}
.close .body, .close .lead, .close .body-s {
  color: rgba(9,9,9,0.62);
}
.close .d2 { color: var(--ink); }
.close .d2 .em { color: var(--signal); }

.close-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 5.5vw, 5rem);
  align-items: start;
  padding-block: var(--sec-y);
}
.close-left .d2 { max-width: min(14ch, 100%); margin-top: 0.7rem; overflow: visible; }
.close-left .lead { margin-top: 1.35rem; }

.nap {
  margin-top: clamp(2.25rem, 4.5vh, 3rem);
  display: grid;
  gap: 1.35rem;
}
.nap .tag { display: block; margin-bottom: 0.4rem; }
.nap .lines {
  color: rgba(9,9,9,0.7);
  font-size: 0.96rem;
  line-height: 1.55;
}
.nap .lines a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  transition: color var(--t1) var(--e);
}
.nap .lines a:hover { color: var(--signal); }
.nap .tel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.5rem;
}
.nap .tel a {
  position: relative;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  letter-spacing: -0.028em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
}
.nap .tel a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t2) var(--e);
}
.nap .tel a:hover::after { transform: scaleX(1); }

/* Shared contact icon squares - perfectly centered, never clipped */
.ico {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: visible;
  border: 1px solid rgba(9,9,9,0.14);
  background: rgba(9,9,9,0.03);
  color: var(--ink);
  vertical-align: middle;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.ico .ic {
  width: 1.05rem;
  height: 1.05rem;
}

.nap .ico {
  width: 2.25rem;
  height: 2.25rem;
  border-color: rgba(9,9,9,0.6);
  background: rgba(9,9,9,0.03);
  color: var(--ink);
}
.nap .tel .ico {
  width: 2rem;
  height: 2rem;
  border-color: var(--signal-a35);
  background: var(--signal-a08);
  color: var(--signal);
}
.nap .tel .ico .ic {
  width: 0.95rem;
  height: 0.95rem;
}
.nap .lines .ico {
  width: 2.25rem;
  height: 2.25rem;
}

.channels {
  display: grid;
  gap: 0.35rem;
}
.channel {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: rgba(9,9,9,0.78);
  font-size: 0.98rem;
  transition: color var(--t1) var(--e);
}
.channel:hover { color: var(--signal); }
.channel .ico {
  width: 2.25rem;
  height: 2.25rem;
  border-color: rgba(9,9,9,0.6);
  background: rgba(9,9,9,0.03);
  color: var(--ink);
}
.channel:hover .ico {
  border-color: var(--signal-a45);
  color: var(--signal);
  background: var(--signal-a08);
}
.areas {
  margin-top: 0.35rem;
  color: rgba(9,9,9,0.6);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 36ch;
}
.foot-brand .channels { margin-top: 1.15rem; gap: 0.4rem; }
.foot .channel { color: rgba(9,9,9,0.68); font-size: 0.92rem; }
.foot .channel .ico {
  width: 2.25rem;
  height: 2.25rem;
  border-color: rgba(9,9,9,0.6);
  background: transparent;
  color: var(--ink);
}
.foot .channel:hover .ico {
  border-color: var(--signal-a45);
  color: var(--signal);
  background: var(--signal-a08);
}
.foot-areas {
  margin-top: 1rem;
  color: rgba(9,9,9,0.6);
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 34ch;
}

.form-shell {
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
  box-shadow: 0 36px 70px -36px rgba(9,9,9,0.45);
}
.form-shell::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(300px circle at var(--px, 50%) var(--py, 0%),
              rgba(200,16,46,0.16), transparent 68%);
  transition: opacity var(--t2) var(--e);
}
.form-shell:hover::before { opacity: 1; }

.form {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 2.8vw, 2.35rem);
  display: grid;
  gap: 1.35rem;
}
.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.field .in { position: relative; display: grid; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0;
  background: transparent;
  color: var(--bone);
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  transition: border-color var(--t1) var(--e);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field select option { background: var(--ink-2); color: var(--bone); }
.field input::placeholder,
.field textarea::placeholder { color: var(--mute-2); }
.field .in::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--signal-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t2) var(--e);
}
.field .in:focus-within::after { transform: scaleX(1); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(239,237,230,0.28); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; }
.field input[type="file"] {
  padding: 0.7rem 0;
  font-size: 0.9rem;
  color: var(--mute);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: 0.85rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--bone);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t1) var(--e), border-color var(--t1) var(--e), color var(--t1) var(--e);
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.field .help { font-size: 0.82rem; color: var(--mute-2); }
.field .err {
  display: none;
  font-size: 0.82rem;
  color: var(--signal-hi);
  font-weight: 600;
}
.field:has(input:not(:placeholder-shown):invalid) .err { display: block; }
.field:has(input:not(:placeholder-shown):invalid) .help { display: none; }
.field-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.form-foot .fine {
  font-size: 0.82rem;
  color: var(--mute-2);
  max-width: 20ch;
}

/* ---------- footer ---------- */
.foot {
  background: var(--bone);
  color: var(--ink);
}
.foot-mark {
  padding-top: clamp(2.25rem, 5vh, 3.75rem);
  padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
}
.foot-mark .wordmark {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  /* fit the full name inside the wrap on every viewport */
  font-size: clamp(1.45rem, 5.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.foot-mark .wordmark span { color: var(--signal); }

.foot-in {
  padding-block: clamp(1.75rem, 4vh, 3rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.foot-brand img {
  width: 36px; height: 36px;
  filter: invert(1);
}
.foot-brand p {
  margin-top: 0.9rem;
  color: rgba(9,9,9,0.6);
  font-size: 0.92rem;
  max-width: 26ch;
  line-height: 1.55;
}
.fcol > h2 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(9,9,9,0.6);
}
.fcol-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0 0 0.95rem;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
}
/* the chevron only exists in the mobile accordion */
.fcol-i {
  display: none;
  width: 0.62rem; height: 0.62rem;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t1) var(--e);
}
.fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.05rem;
}
.fcol .nlink {
  color: rgba(9,9,9,0.68);
  font-size: 0.92rem;
}
.fcol .nlink:hover { color: var(--ink); }
.fcol .swap > span + span { color: var(--signal); }

.foot-base {
  padding-block: 1.35rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(9,9,9,0.6);
}
/* build credit: same small-caps footer voice, one notch quieter than the
   legal line so it reads as a signature rather than a nav item */
.credit { color: rgba(9,9,9,0.6); font-size: 0.76rem; }
.credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(9,9,9,0.3);
  transition: color var(--t1) var(--e), text-decoration-color var(--t1) var(--e);
}
.credit a:hover { color: var(--signal); text-decoration-color: var(--signal); }

.foot-base nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.foot-base a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--t1) var(--e);
}
.foot-base a:hover { color: var(--signal); }

/* ---------- reveals ---------- */
.r {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--t2) var(--e) var(--d, 0s),
    transform var(--t2) var(--e) var(--d, 0s);
}
.r.in { opacity: 1; transform: none; }

.ln {
  display: block;
  overflow: hidden;
  /* room for italic descenders (y/g/p) + Syne overshoot so masks don't eat glyphs */
  padding-block: 0.12em 0.22em;
  margin-block: -0.12em -0.08em;
}
.ln > span {
  display: inline-block;
  max-width: 100%;
  padding-inline-end: 0.06em; /* italic trailing overshoot */
}
/* scroll-triggered headlines: JS adds .in when they enter the viewport */
.rw:not(.rw-load) .ln > span {
  transform: translate3d(0, 115%, 0);
  transition: transform var(--t3) var(--e) var(--d, 0s);
}
.rw.in:not(.rw-load) .ln > span { transform: translate3d(0, 0, 0); }

/* the hero headline animates from CSS alone, never from JS */
@media (prefers-reduced-motion: no-preference) {
  .rw-load .ln > span { animation: ln-rise var(--t3) var(--e) both; }
}
@keyframes ln-rise {
  from { transform: translate3d(0, 115%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.rw:not(.rw-load) .ln:nth-child(2) > span { transition-delay: 0.08s; }
.rw:not(.rw-load) .ln:nth-child(3) > span { transition-delay: 0.16s; }
.rw:not(.rw-load) .ln:nth-child(4) > span { transition-delay: 0.24s; }

.rw-load .ln:nth-child(1) > span { animation-delay: 0.06s; }
.rw-load .ln:nth-child(2) > span { animation-delay: 0.16s; }
.rw-load .ln:nth-child(3) > span { animation-delay: 0.26s; }

/* page heroes: keep long lines fully legible */
.page-hero .d1,
.page-hero .d2 {
  max-width: min(18ch, 100%);
  overflow: visible;
}
.page-hero .lead {
  max-width: 48ch;
}

/* above-the-fold stagger. Runs from CSS alone, so a throttled rAF or a JS
   failure can never leave the hero blank. */
.load { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .load { animation: load-in 620ms var(--e) var(--d, 0s) both; }
}
@keyframes load-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .svc-in { grid-template-columns: 1fr; gap: 2rem; }
  .svc-panel { position: static; max-width: 30rem; order: -1; }
  .svc-frame { aspect-ratio: 16 / 10; }
  .stack-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .stack-card:nth-child(even) { direction: ltr; }
  .stack-media { aspect-ratio: 16 / 10; min-height: 0; }
  .proc-in { grid-template-columns: 1fr; }
  .proc-shot { max-width: 28rem; }
  .voice-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .voice-side { grid-template-columns: 1fr 1fr; }
  .close-in { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .pos-grid { grid-template-columns: 1fr; }
  .pos-head { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 980px) {
  .nav-phone { display: none; } /* CTA + sheet keep the number visible */
}

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }
  .nav-island {
    width: 100%;
    justify-content: space-between;
    padding-right: 0.3rem;
  }
  .brand { margin-right: 0; padding-right: 0; }
}

@media (max-width: 480px) {
  .ico,
  .channel .ico,
  .nap .ico,
  .nap .lines .ico,
  .foot .channel .ico {
    width: 2.125rem;
    height: 2.125rem;
  }
  .ico .ic {
    width: 1rem;
    height: 1rem;
  }
}

/* Small screens: land the above-the-fold content in one quick pass instead
   of a stagger that keeps painting for over a second. The stagger is what
   Speed Index measures, and on a throttled connection it dominates. */
@media (max-width: 768px) {
  .load {
    animation-delay: 0s;
    animation-duration: 320ms;
  }
  .rw-load .ln > span {
    animation-duration: 420ms;
    animation-delay: 0s;
  }
}

@media (max-width: 768px) {
  :root {
    --sec-y: clamp(3.5rem, 9vh, 5rem);
    --mat: 8px;
    --gutter: 1.15rem;
  }
  body { font-size: 15.5px; }
  .hero { padding-bottom: 2.15rem; }
  .hero-film video { object-position: 62% center; }
  .hero-meta { font-size: 0.66rem; }
  .hero-type .d1 { max-width: 100%; }
  .hero-row {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
  .hero-cta { width: 100%; }
  .hero-cta .btn {
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .pos-card { min-height: 0; }
  .svc-panel { max-width: none; }
  .svc-frame { aspect-ratio: 4 / 3; }
  .svc-row {
    padding-inline: 0.55rem;
  }
  .svc-row.is-on .d3,
  .svc-row:hover .d3,
  .svc-row.is-on .tag,
  .svc-row:hover .tag { transform: translateX(3px); }
  .stack-body { padding: 1.4rem 1.1rem 1.75rem; gap: 0.9rem; }
  .proc-shot { max-width: none; }
  .proc-shot .media img { aspect-ratio: 4 / 3; }
  .step { padding: 1rem 1rem; }
  .step:hover { transform: none; }
  .voice-side { grid-template-columns: 1fr; }
  .voice-lead .qm { font-size: 4rem; }
  .field-2 { grid-template-columns: 1fr; }
  .foot-mark .wordmark {
    font-size: clamp(1.45rem, 7.6vw, 2.1rem);
  }
  .foot-in {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .foot-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .form-foot .btn { width: 100%; justify-content: space-between; }
}

/* ---------- prose: articles and legal pages ---------- */
.prose {
  max-width: 68ch;
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.72;
}
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: var(--bone);
  margin-top: 2.6rem;
}
.prose h3 {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin-top: 1.9rem;
}
.prose h2 + p, .prose h3 + p { margin-top: 0.75rem; }
.prose ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.prose ul li {
  position: relative;
  padding-left: 1.3rem;
  max-width: 62ch;
}
/* the marker is a signal-coloured rule, not a bullet glyph */
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 12px; height: 1.5px;
  background: var(--signal-hi);
}
.prose a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--signal-hi);
  transition: color var(--t1) var(--e);
}
.prose a:hover { color: var(--signal-hi); }
.prose strong { color: var(--bone); font-weight: 600; }

/* inline links inside body copy: never use .tlink here, its min-height
   inflates the paragraph line box */
.link-inline {
  color: var(--bone);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--signal-hi);
  transition: color var(--t1) var(--e);
}
.link-inline:hover { color: var(--signal-hi); }
.close .link-inline, .page-hero.is-light .link-inline {
  color: var(--ink); text-decoration-color: var(--signal);
}
.close .link-inline:hover { color: var(--signal); }
@media (max-width: 768px) {
  a.link-inline[href^="tel:"],
  a.link-inline[href^="sms:"],
  a.link-inline[href^="mailto:"] {
    padding-block: 0.72rem;
    margin-block: -0.72rem;
  }
}

/* Inline prose links are usually WCAG-exempt from the 44px target rule, but
   phone and email in body copy are worth tapping. Vertical padding on an
   inline box grows the hit area without moving the text or the line box. */
@media (max-width: 768px) {
  .prose a[href^="tel:"],
  .prose a[href^="sms:"],
  .prose a[href^="mailto:"] {
    padding-block: 0.72rem;
    margin-block: -0.72rem;
  }
}

/* light surfaces reuse the same prose block */
.close .prose, .page-hero.is-light .prose { color: rgba(9,9,9,0.68); }
.close .prose h2, .close .prose h3 { color: var(--ink); }
.close .prose ul li::before { background: var(--signal); }
.close .prose a { color: var(--ink); text-decoration-color: var(--signal); }
.close .prose a:hover { color: var(--signal); }

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.article-figure { margin: 0 0 clamp(1.75rem, 4vh, 2.75rem); }
.article-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink-3);
}

/* ---------- post cards (blog index, category) ---------- */
.post-list { display: grid; gap: 1rem; max-width: 62rem; }
.post {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  background: var(--ink-2);
  transition: background-color var(--t2) var(--e), transform var(--t2) var(--e);
}
.post:hover { background: var(--ink-3); transform: translateY(-3px); }
.post .shot { overflow: hidden; background: var(--ink-3); }
.post .shot img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.05) brightness(0.92);
  transition: transform var(--t3) var(--e), filter var(--t2) var(--e);
}
.post:hover .shot img { transform: scale(1.04); filter: grayscale(0) contrast(1.05) brightness(0.98); }
.post .cap { padding: clamp(1.25rem, 2.5vw, 1.9rem) clamp(1.25rem, 2.5vw, 1.9rem) clamp(1.25rem, 2.5vw, 1.9rem) 0; }
/* the card is an <a>, so its parts are spans: they still need to stack */
.post .cap > span { display: block; }
.post .cap > span.tlink { display: inline-flex; }
.post .cap .d3 { margin-top: 0.5rem; max-width: 22ch; }
.post .cap .body-s { margin-top: 0.7rem; max-width: 46ch; }
.post .cap .tlink { margin-top: 1rem; }
@media (max-width: 760px) {
  .post { grid-template-columns: 1fr; }
  .post .cap { padding: 1.15rem 1.15rem 1.5rem; }
}

/* ---------- checklist blocks (submit a project, become an installer) ---------- */
.checklist { display: grid; gap: 0.55rem; margin-top: 1.35rem; }
.checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem 1rem;
  background: var(--ink-2);
  color: var(--mute);
  font-size: 0.945rem;
  line-height: 1.55;
}
.checklist .ic { color: var(--signal-hi); font-size: 1.05rem; margin-top: 0.2em; }
.list-reset { list-style: none; margin: 0; padding: 0; }

/* ---------- single-message pages (thank you, 404) ---------- */
.note-page {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--nav-h) + var(--nav-gap) + 2rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
.note-page .d2 { max-width: 16ch; margin-top: 0.85rem; }
.note-page .lead { margin-top: 1.25rem; max-width: 46ch; }
.note-actions {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* ---------- mobile footer accordion ---------- */
@media (max-width: 768px) {
  .fcol { border-top: 1px solid rgba(9,9,9,0.1); }
  .fcol-t {
    min-height: 48px;
    padding-block: 0.35rem;
    cursor: pointer;
    color: rgba(9,9,9,0.62);
  }
  .fcol-i { display: block; transform: rotate(45deg); }
  .fcol.is-open .fcol-t { color: var(--ink); }
  .fcol.is-open .fcol-i { transform: rotate(-135deg); }

  /* collapsed by default; JS adds .is-open. no JS means the list stays open. */
  .fcol.js-acc > ul {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
      max-height var(--t2) var(--e),
      opacity var(--t1) var(--e);
  }
  .fcol.js-acc.is-open > ul {
    max-height: 30rem;
    opacity: 1;
    padding-bottom: 0.9rem;
  }
  .foot-in { gap: 0; }
  .foot-brand { padding-bottom: 1.5rem; }
}

/* ---------- form: honeypot, validation, status ---------- */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.field.is-err input,
.field.is-err textarea { border-bottom-color: var(--signal-hi); }
.field.is-err .err { display: block; }
.field.is-err .help { display: none; }

.form-status {
  display: none;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--bone);
}
.form-status.is-on { display: grid; grid-template-columns: auto 1fr; }
.form-status .ic { font-size: 1.15rem; margin-top: 0.14em; }
.form-status a {
  color: var(--signal-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-status.ok {
  border-color: rgba(239,237,230,0.3);
  background: rgba(239,237,230,0.05);
}
.form-status.bad {
  border-color: var(--signal-a45);
  background: rgba(200,16,46,0.1);
}
.form-status .st-t { font-weight: 600; }
.form-status .st-b { color: var(--mute); margin-top: 0.2rem; }

.form.is-sending { opacity: 0.6; pointer-events: none; }
.btn[aria-busy="true"] .nib .ic { animation: nib-spin 0.8s linear infinite; }
@keyframes nib-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .r, .load { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ln > span { transform: none !important; animation: none !important; }
  main { animation: none !important; opacity: 1 !important; }
  .media img, .stack-media img { transform: none !important; }
  .strip-track { animation: none !important; }
  .hero-film video { animation: none !important; }
}


/* ---------- page entrance ---------- */
/* Pure CSS so it does not wait on JS or requestAnimationFrame, opacity only
   so nothing shifts, and short enough not to hold back LCP. No blur: it is
   expensive to composite and it was part of the old flash. */
/* Deliberately NO fill-mode. With `both`, the backwards fill pins main at
   opacity:0 before the animation starts, so anything that stops the animation
   from running leaves the whole page invisible. Without it, the worst case is
   simply no fade -- the page is always readable. */
main { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  main { animation: page-fade 150ms linear; }
}
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }

/* active nav: swap the label to the signal-coloured second span. Without the
   matching rule for span+span the link renders blank, because both spans stay
   translated out of the .swap mask. */
.nlink.is-active { color: var(--bone); }
.nlink.is-active .swap > span:first-child { transform: translateY(-110%); }
.nlink.is-active .swap > span + span { transform: translateY(0); }
.nav-island.is-light {
  background: rgba(239,237,230,0.86);
  border-color: rgba(9,9,9,0.6);
  color: var(--ink);
  box-shadow: 0 18px 40px -24px rgba(9,9,9,0.35);
}
.nav-island.is-light .wm { color: var(--ink); }
.nav-island.is-light .brand img { filter: invert(1); }
.nav-island.is-light .nlink { color: rgba(9,9,9,0.62); }
.nav-island.is-light .nlink:hover,
.nav-island.is-light .nlink.is-active { color: var(--ink); }
/* the light island's translucent bone sits darker than pure bone, so the
   mid red only reaches 3.7:1 at this size. The dark red clears AA. */
.nav-island.is-light .swap > span + span { color: var(--signal-dk); }
.nav-island.is-light .burger span { background: var(--ink); }
.nav-island.is-light .btn:not(.btn-signal):not(.btn-solid) {
  color: var(--ink);
  border-color: rgba(9,9,9,0.6);
}

/* inner page hero */
/* inner page hero: clears the real measured nav height, never a guess */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--nav-gap) + clamp(2.25rem, 5.5vh, 4rem));
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
  overflow: visible;
}

/* the contact page opens straight into the light .close section, so it needs
   the same nav clearance an inner page hero gets */
main > .close:first-child > .close-in,
main > .close:first-child { scroll-margin-top: 0; }
main > .close:first-child > .close-in {
  padding-top: calc(var(--nav-h) + var(--nav-gap) + clamp(2.25rem, 5.5vh, 4rem));
}
.page-hero .wrap { position: relative; z-index: 1; overflow: visible; }
.page-hero .eyebrow { margin-bottom: 0.85rem; }
.page-hero .d1,
.page-hero .d2 {
  max-width: min(18ch, 100%);
  overflow: visible;
}
.page-hero .lead {
  margin-top: 1.35rem;
  max-width: 48ch;
}
.page-hero-row {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}
.page-hero.is-light {
  background: var(--bone);
  color: var(--ink);
}
.page-hero.is-light .eyebrow,
.page-hero.is-light .tag,
.page-hero.is-light .meta,
.page-hero.is-light .label { color: rgba(9,9,9,0.6); }
.page-hero.is-light .lead,
.page-hero.is-light .body,
.page-hero.is-light .body-s { color: rgba(9,9,9,0.62); }
.page-hero.is-light .d1,
.page-hero.is-light .d2 { color: var(--ink); }
.page-hero.is-light .em { color: var(--signal); }

/* project detail */
.proj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.proj-copy .lead { margin-top: 1rem; }
.proj-copy .body { margin-top: 1.15rem; max-width: 48ch; }
.proj-copy .body + .body { margin-top: 0.9rem; }
.proj-meta-list {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.85rem;
}
.proj-meta-list .row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}
.proj-meta-list .k {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.proj-more {
  margin-top: clamp(2.5rem, 5vh, 4rem);
}
.proj-more-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.proj-more a {
  display: grid;
  gap: 0.75rem;
  background: var(--ink-2);
  transition: transform var(--t2) var(--e), background-color var(--t2) var(--e);
}
.proj-more a:hover { transform: translateY(-3px); background: var(--ink-3); }
.proj-more .media { aspect-ratio: 4/3; overflow: hidden; }
.proj-more img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) contrast(1.05) brightness(0.92);
  transition: transform var(--t3) var(--e), filter var(--t2) var(--e);
}
.proj-more a:hover img {
  transform: scale(1.04);
  filter: grayscale(0.05) contrast(1.05) brightness(0.96);
}
.proj-more .cap { padding: 0 1rem 1.1rem; }
.proj-more .cap .meta { display: block; margin-bottom: 0.25rem; }
.proj-more a.is-text { padding: 1.5rem 1.25rem 1.4rem; }
.proj-more a.is-text .cap { padding: 0; }
@media (max-width: 900px) {
  .proj-grid { grid-template-columns: 1fr; }
  .proj-more-grid { grid-template-columns: 1fr; }
}

/* ---------- text-only project entries (no photo yet) ---------- */
.stack-card.is-text { grid-template-columns: 1fr; }
.stack-card.is-text .stack-body {
  max-width: 46ch;
  margin-inline: auto;
  padding: clamp(2.25rem, 6vw, 4.5rem);
  text-align: left;
}
.stack-card.is-text .stack-body .d3 { max-width: none; }

.proj-grid.is-text { grid-template-columns: 1fr; max-width: 62ch; }

/* ---------- Card Sound home highlight: slow crossfade ---------- */
.cs-highlight { background: var(--ink-3); }
.cs-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 900ms var(--e);
}
.cs-slide.is-on { opacity: 1; z-index: 1; }
.cs-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.08) brightness(0.9);
  transition: filter 900ms var(--e), transform 1.6s var(--e);
}
.cs-slide.is-on img { filter: grayscale(0.15) contrast(1.05) brightness(0.96); }
.stack-card:hover .cs-slide.is-on img { transform: scale(1.03); filter: grayscale(0) contrast(1.05) brightness(0.98); }
@media (prefers-reduced-motion: reduce) {
  .cs-slide { transition: none; }
  .cs-slide img { transition: none; }
}

.cs-ticks {
  position: absolute; z-index: 3;
  left: 50%; bottom: calc(var(--mat) + 0.85rem);
  transform: translateX(-50%);
  display: flex; gap: 0.4rem;
}
.cs-tick {
  width: 1.35rem; height: 2px;
  background: rgba(239,237,230,0.4);
  border: 0; padding: 0; cursor: pointer;
  transition: background-color var(--t1) var(--e), width var(--t1) var(--e);
}
.cs-tick.is-on { background: var(--bone); width: 2rem; }

/* ---------- Card Sound editorial gallery (masonry, not a tile grid) ---------- */
.cs-gallery {
  margin-top: 1.5rem;
  column-count: 1;
  column-gap: clamp(0.85rem, 2vw, 1.5rem);
}
@media (min-width: 620px) { .cs-gallery { column-count: 2; } }
@media (min-width: 1000px) { .cs-gallery { column-count: 3; } }
.cs-gallery button {
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.85rem, 2vw, 1.5rem);
  break-inside: avoid;
  background: var(--ink-3);
  position: relative;
  cursor: zoom-in;
}
.cs-gallery img {
  display: block;
  width: 100%; height: auto;
  filter: grayscale(0.75) contrast(1.06) brightness(0.92);
  transition: filter var(--t2) var(--e), transform 1.4s var(--e);
}
.cs-gallery button:hover img,
.cs-gallery button:focus-visible img {
  filter: grayscale(0) contrast(1.03) brightness(0.98);
  transform: scale(1.015);
}
.cs-gallery button::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(239,237,230,0.16);
  transition: border-color var(--t2) var(--e);
}
.cs-gallery button:hover::after,
.cs-gallery button:focus-visible::after { border-color: rgba(239,237,230,0.55); }

/* ---------- Card Sound lightbox ---------- */
.cs-lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid;
  background: rgba(9,9,9,0.94);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t2) var(--e);
}
.cs-lightbox.is-on { opacity: 1; visibility: visible; }
.cs-lightbox-frame {
  position: relative;
  place-self: center;
  width: min(92vw, 1400px);
  height: min(86vh, 1400px);
  display: grid; place-items: center;
}
.cs-lightbox-frame img {
  position: absolute;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  opacity: 0;
  transition: opacity 900ms var(--e);
  filter: contrast(1.03) brightness(0.99);
}
.cs-lightbox-frame img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cs-lightbox-frame img { transition: none; }
}
.lb-btn {
  position: absolute; z-index: 4;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(9,9,9,0.55);
  color: var(--bone);
  transition: background-color var(--t1) var(--e), border-color var(--t1) var(--e);
}
.lb-btn:hover { background: var(--signal); border-color: var(--signal); }
.lb-btn .ic { font-size: 1.1rem; }
.lb-close { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lb-prev { left: clamp(0.5rem, 1.5vw, 1.25rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(0.5rem, 1.5vw, 1.25rem); top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute; left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem);
  transform: translateX(-50%);
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--mute-2);
}
@media (max-width: 640px) {
  .lb-prev, .lb-next { width: 38px; height: 38px; }
}

/* ---------- studio update (coming soon, replaces the retired projects) ---------- */
.soon-in { max-width: 62ch; }
.soon-mark {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.soon-dot {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--signal-hi);
}
@media (prefers-reduced-motion: no-preference) {
  .soon-dot { animation: soon-pulse 2.6s ease-in-out infinite; }
}
@keyframes soon-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
.soon-rule {
  display: block;
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.3s var(--e);
}
.soon-rule.in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .soon-rule { transition: none; transform: scaleX(1); }
}
/* on the homepage the panel sits inside a stack-card, matching the Card
   Sound highlight's rhythm; on /our-projects/ it's a plain section below */
.stack-card.is-soon .stack-body { max-width: 46ch; margin-inline: auto; padding: clamp(2.25rem, 6vw, 4.5rem); }

/* ---------- daily bilingual greeting ---------- */
.daily-greeting { max-width: 70ch; }
.daily-greeting,
.daily-greeting > * { min-width: 0; }
.daily-day { margin: 0; text-wrap: balance; }
.daily-es { margin: 0; color: var(--mute-2, var(--ink-3)); font-family: "Manrope", sans-serif; font-size: clamp(0.62rem, 0.6rem + 0.06vw, 0.68rem); font-weight: 500; line-height: 1.45; }
.daily-day-es { margin-top: 0.35rem; }
.daily-message { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 60ch; }
.daily-message-es { margin-top: 0.42rem; max-width: 60ch; }
.daily-text { display: inline-flex; align-items: center; gap: 0.48rem; margin-top: 1.25rem; color: var(--signal); font-family: "Manrope", sans-serif; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em; }
.daily-text .ic { width: 1.05rem; height: 1.05rem; }
.daily-static { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1rem; border-top: 1px solid var(--line); max-width: 60ch; }
.daily-static .body { margin: 0; }
.daily-static .daily-es { margin-top: 0.35rem; }
@media (prefers-reduced-motion: no-preference) {
  /* the heading animates via the shared .rw line-rise instead (see below) */
  .daily-greeting.is-entering > :not(.daily-static):not(.rw) { animation: daily-in 520ms var(--e) both; will-change: opacity, transform; }
  .daily-greeting.is-entering > :nth-child(2) { animation-delay: 35ms; }
  .daily-greeting.is-entering > :nth-child(3) { animation-delay: 70ms; }
  .daily-greeting.is-entering > :nth-child(4) { animation-delay: 105ms; }
  .daily-greeting.is-entering > :nth-child(5) { animation-delay: 140ms; }
}
@keyframes daily-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .daily-es { font-size: 0.74rem; line-height: 1.4; }
  .daily-message { margin-top: 1.35rem; max-width: 100%; overflow-wrap: anywhere; }
  .daily-message-es,
  .daily-static { max-width: 100%; overflow-wrap: anywhere; }
  .daily-static { margin-top: 1.75rem; }
}

/* ---------- About section: two-tone ambient wash behind the whole preview ---------- */
#about-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#about-preview::before,
#about-preview::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
#about-preview::before {
  top: -28%;
  right: -10%;
  width: min(50rem, 64vw);
  height: min(50rem, 64vw);
  background: radial-gradient(circle, var(--signal-a08) 0%, transparent 68%);
}
#about-preview::after {
  bottom: -32%;
  left: -12%;
  width: min(36rem, 46vw);
  height: min(36rem, 46vw);
  background: radial-gradient(circle, rgba(216, 184, 74, 0.05) 0%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  #about-preview::before { animation: about-glow-drift-a 24s var(--e) infinite alternate; }
  #about-preview::after { animation: about-glow-drift-b 30s var(--e) infinite alternate; }
}
@keyframes about-glow-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5%, 4%, 0) scale(1.12); }
}
@keyframes about-glow-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -5%, 0) scale(1.08); }
}
#about-preview.is-night::before {
  background: radial-gradient(circle, rgba(216, 184, 74, 0.07) 0%, transparent 68%);
}
#about-preview.is-night::after {
  background: radial-gradient(circle, var(--signal-a08) 0%, transparent 70%);
}

/* ---------- About heading: wallpaper-unroll wipe reveal ---------- */
.about-d2 {
  font-size: clamp(2.15rem, 4.6vw, 3.75rem);
  max-width: min(15ch, 100%);
  overflow: visible;
}
.about-reveal { overflow: hidden; }
.about-reveal .about-d2 { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .about-reveal .about-d2 {
    transition: clip-path 950ms cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
  }
  .about-reveal.in .about-d2 { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .about-reveal .about-d2 { clip-path: none; }
}
.about-rule {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--signal);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

/* ---------- About clock: digital readout, red neon, live seconds ---------- */
.digital-clock {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin: 1.1rem 0 0;
}
.digital-clock-time {
  font-family: "Manrope", sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: 0.01em;
  color: var(--signal-hi);
  text-shadow:
    0 0 4px rgba(255, 59, 65, 0.85),
    0 0 12px rgba(255, 59, 65, 0.55),
    0 0 26px rgba(255, 59, 65, 0.35);
  min-width: 6.5ch;
  display: inline-block;
}
.digital-clock-ampm {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.06em;
}
@media (prefers-reduced-motion: no-preference) {
  .digital-clock-time { animation: neon-flicker 3.4s ease-in-out infinite; }
}
@keyframes neon-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.92; } }
.digital-clock-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mute-2);
}
.digital-clock-meta .dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--signal-hi);
}
@media (prefers-reduced-motion: no-preference) {
  .digital-clock-meta .dot { animation: pulse 2.4s var(--e) infinite; }
}

/* small neon one-liner under the clock, rotating every 4s. Deliberately
   quiet: smaller and dimmer than the clock itself, not another headline. */
.clock-ticker {
  margin: 0.6rem 0 0;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: var(--signal-hi);
  opacity: 0.8;
  text-shadow: 0 0 3px rgba(255, 59, 65, 0.65), 0 0 8px rgba(255, 59, 65, 0.35);
  max-width: 30ch;
}
@media (prefers-reduced-motion: no-preference) {
  .clock-ticker { transition: opacity 320ms var(--e); }
  .clock-ticker.is-swapping { opacity: 0; }
}

/* ---------- organized daily greeting ---------- */
.pos-head .daily-greeting { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .daily-greeting {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
    grid-template-areas:
      "day message"
      "day-es message-es"
      "clock action"
      ". static";
    column-gap: clamp(3rem, 7vw, 7rem);
    row-gap: 0;
    max-width: none;
    align-items: start;
  }
  .daily-day { grid-area: day; max-width: 11ch; }
  #about-preview .about-reveal { grid-area: day; }
  .daily-day-es { grid-area: day-es; margin-top: .55rem; }
  #about-preview .digital-clock { grid-area: clock; }
  .daily-message { grid-area: message; margin-top: .65rem; max-width: 44ch; }
  .daily-message-es { grid-area: message-es; margin-top: .55rem; max-width: 44ch; }
  .daily-text { grid-area: action; justify-self: start; }
  .daily-static { grid-area: static; margin-top: clamp(2rem, 4vw, 3rem); width: 100%; }
  #about-preview .pos-head { display: block; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
  #about-preview .pos-head > .eyebrow { display: block; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .page-hero .daily-greeting { margin-top: .25rem; }

  /* desktop only, per request: crop-mark corners around the message
     column instead of a plain box - reads as a technical/precision
     frame rather than another rounded card. */
  #about-preview .msg-frame {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 2.75rem);
  }
  #about-preview .msg-frame .daily-message { margin-top: 0; }
  .msg-frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
  }
  .msg-frame-corner.tl { top: 0; left: 0; border-top: 1.5px solid var(--signal); border-left: 1.5px solid var(--signal); }
  .msg-frame-corner.tr { top: 0; right: 0; border-top: 1.5px solid var(--line); border-right: 1.5px solid var(--line); }
  .msg-frame-corner.br { bottom: 0; right: 0; border-bottom: 1.5px solid var(--line); border-right: 1.5px solid var(--line); }
  .msg-frame-corner.bl { bottom: 0; left: 0; border-bottom: 1.5px solid var(--line); border-left: 1.5px solid var(--line); }
}
@media (max-width: 900px) {
  .msg-frame-corner { display: none; }
}
/* ---------- editorial service photography ---------- */
.svc-frame {
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px rgba(239,237,230,.12);
}
.svc-frame .pv {
  padding: 0;
  inset: 0;
  display: block;
  transform: none !important;
  transition: opacity 360ms var(--e);
}
.svc-frame .pv.is-on { transform: none !important; }
.svc-frame .pv::before,
.svc-frame .pv::after { content: none; }
.svc-frame .svc-draw { display: none; }
.svc-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04) brightness(.94);
}
.svc-frame::after {
  inset: var(--mat);
  border-color: rgba(239,237,230,.2);
}
@media (prefers-reduced-motion: reduce) {
  .svc-frame .pv { transition: none; }
}

/* Keep every bilingual pair on one left edge; Spanish is the accent caption. */
.daily-greeting,
.daily-greeting > * { text-align: left; justify-self: start; }
.daily-es { color: #d8b84a; }
.daily-message-es,
.daily-static .daily-es { width: 100%; }
@media (min-width: 901px) {
  .daily-greeting {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
    align-items: start;
  }
  .daily-day,
  .daily-day-es { justify-self: start; }
  .daily-message,
  .daily-message-es,
  .daily-text,
  .daily-static { justify-self: start; }
}
@media (max-width: 640px) {
  .svc-frame .pv,
  .svc-frame .pv.is-on { inset: 0; padding: 0; transform: none !important; }
}