*,::before,::after{box-sizing:border-box;border:0 solid;margin:0;padding:0}img,video,svg{display:block;max-width:100%}img,video{height:auto}button,input,select,textarea{font:inherit;color:inherit;background:transparent}ul,ol{list-style:none}summary{list-style:none}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.font-sans{font-family:var(--font-sans)}.text-navy{color:var(--color-navy)}.bg-cream{background:var(--color-cream)}
/* ============================================================
   SUNDAY OFFICE — restarted brand
   Calm, modern, sleek, quietly Asian. Rice paper, ink greens,
   jade accents, one vermillion seal. Generous air. Soft motion.
   Structure stays; the voice changes.
   ============================================================ */


:root {
  --color-rice: #efe6f2;
  --color-rice-2: #e9dcee;
  --color-surface: #e3d5e8;
  --color-ink: #241f26;
  --color-stone: #84798a;
  --color-line: #dccde3;
  --color-lav: #a684bb;
  --color-lav-deep: #6e4f86;
  --color-lav-soft: #c9b0d9;
  --color-gold: #b58f3f;
  --color-gold-deep: #966f26;
  --color-gold-soft: #d6bc78;
  --color-jade: #8f3f7e;
  --color-jade-deep: #7d2f6a;
  --color-jade-soft: #c9b0d9;
  --color-celadon: #efe7f1;
  --color-verm: #9e2b2e;
  --color-black: #17131b;
  --color-sand: #efe5f2;
  --color-sand-deep: #dfd0e6;
  --color-emboss: #c9b2d6;

  /* -- legacy aliases -- */
  --color-cream: #efe6f2;
  --color-cream-deep: #e9dcee;
  --color-paper: #e3d5e8;
  --color-paper-dark: #dfd0e6;
  --color-navy: #241f26;
  --color-navy-soft: #84798a;
  --color-espresso: #241f26;
  --color-print: #84798a;
  --color-sepia: #dccde3;
  --color-red: #9e2b2e;

  --font-sans: "Manrope Variable", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-cjk: "Zhi Mang Xing", "KaiTi", "STKaiti", serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  body {
    background-color: var(--color-rice);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  ::selection {
    background: var(--color-jade);
    color: var(--color-rice);
  }
  :focus-visible {
    outline: 2px solid var(--color-jade);
    outline-offset: 3px;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
  }
}

/* ---- The surface: heavily textured journal paper + sandstone. ---- */
.page-paper {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.45' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.7' numOctaves='2' seed='15' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.012' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.07'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 0%, rgba(252, 244, 252, 0.8), rgba(236, 222, 240, 0) 55%),
    radial-gradient(110% 90% at 100% 100%, rgba(178, 152, 194, 0.2), rgba(240, 230, 244, 0) 50%),
    radial-gradient(140% 120% at 85% 15%, rgba(196, 174, 212, 0.16), rgba(248, 242, 250, 0) 45%),
    linear-gradient(160deg, rgba(255, 252, 254, 0.6), rgba(244, 238, 246, 0) 46%);
}
@media (prefers-reduced-transparency: reduce) {
  .page-paper {
    display: none;
  }
}

/* ---- Layout shell ---- */
.so-shell {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

/* ---- Hairlines ---- */
.so-rule {
  height: 1px;
  background: var(--color-line);
  border: 0;
}
.so-rule-navy {
  height: 1px;
  background: rgba(245, 243, 236, 0.16);
  border: 0;
}
.so-lock {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.so-lock .so-rule {
  flex: 1;
}

/* ---- Archive/office labels ---- */
.so-micro {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-stone);
  line-height: 1.5;
}
.so-micro-red {
  color: var(--color-verm);
}
.so-micro-jade {
  color: var(--color-jade-deep);
}
.so-micro-gold {
  color: var(--color-jade-deep);
}
.so-lab {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-stone);
}

/* ---- Display: modern sans, airy, light ---- */
.so-serif {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.so-script {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--color-stone);
}
.so-cjk {
  font-family: var(--font-cjk);
}

/* ---- Buttons: soft, tactile ---- */
.so-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-rice);
  background: #1c1a1d;
  border: 1px solid #1c1a1d;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    filter 0.12s ease, transform 0.12s ease;
}
.so-btn:hover {
  background: #2a2730;
  border-color: #2a2730;
}
.so-btn:active {
  filter: brightness(0.75);
  transform: translateY(1px);
}
.so-btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.so-btn-ghost:hover {
  background: var(--color-ink);
  color: var(--color-rice);
  border-color: var(--color-ink);
}
.so-btn-verm {
  background: var(--color-verm);
  border-color: var(--color-verm);
}
.so-btn-verm:hover {
  background: #9a3a24;
}
.so-btn-small {
  padding: 9px 16px;
  font-size: 11px;
}

.so-arrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.so-arrow .arr {
  transition: transform 0.18s ease;
}
.so-arrow:hover {
  color: var(--color-verm);
}
.so-arrow:hover .arr {
  transform: translateX(4px);
}
.so-arrow:active {
  filter: brightness(0.7);
}

/* ---- Navigation ---- */
.so-nav {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(239, 230, 242, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.so-nav.is-scrolled {
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.28), 0 2px 10px -6px rgba(0, 0, 0, 0.12);
  border-bottom-color: rgba(228, 221, 208, 0.9);
}
.so-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 58px;
  transition: height 0.25s ease;
}
.so-nav.is-scrolled .so-nav-inner {
  height: 46px;
}
.so-brandlock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.so-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.so-nav-link {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  transition: color 0.15s ease;
  position: relative;
}
.so-nav-link:hover {
  color: var(--color-jade-deep);
}
.so-nav-link.cta {
  color: var(--color-verm);
}
.so-nav-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
}
.so-mobile-menu {
  display: none;
  position: relative;
}
.so-mobile-menu summary {
  list-style: none;
}
.so-mobile-menu summary::-webkit-details-marker {
  display: none;
}
.so-mobile-menu summary::marker {
  content: "";
}
@media (max-width: 860px) {
  .so-nav-links {
    display: none;
  }
  .so-nav-burger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .so-mobile-menu {
    display: block;
  }
}

/* ---- Section rhythm ---- */
.so-section {
  padding-block: clamp(44px, 6vw, 76px);
  border-bottom: 1px solid var(--color-line);
}

/* ---- Hero ---- */
.so-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(96px, 14vh, 148px) clamp(64px, 9vh, 96px);
  overflow: hidden;
  text-align: center;
}
.so-hero .so-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.so-hero-sun {
  margin-bottom: 30px;
}
@media (prefers-reduced-motion: reduce) {
  .so-title-sun {
    animation: none;
  }
}
/* The type block — all three lines move together as one quiet unit. */
.so-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Small positioning line. */
.so-hero-locale {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-top: clamp(16px, 2.4vh, 24px);
  margin-bottom: 0;
}
/* "Sunday Office." — a small, wide, architectural brand mark, not a heading. */
.so-hero-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 24px);
  line-height: 1.3;
  letter-spacing: 0.3em;
  text-indent: 0.15em; /* recenter the wide-tracked line */
  color: inherit;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .so-hero-title { font-size: clamp(18px, 5.6vw, 24px); letter-spacing: 0.18em; text-indent: 0.09em; }
}
.so-hero-title .amper {
  font-weight: 300;
  color: inherit;
}
.so-hero-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(12px, 1.5vw, 15px);
  color: var(--color-stone);
  margin-top: 18px;
  letter-spacing: 0.01em;
}
.so-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 40px;
  justify-content: center;
}
.so-hero .so-micro {
  color: var(--color-jade-deep);
}
.so-hero-rule {
  height: 1px;
  background: var(--color-line);
  margin: 34px auto 0;
  width: 100%;
}
.so-hero-frames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .so-hero-frames {
    grid-template-columns: 1fr 1fr;
  }
  .so-hero-frames .frame:nth-child(3) {
    display: none;
  }
}

/* Giant faint sun disc behind the hero — the Sunday office's quiet presence. */
.so-orb {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.orb-svg {
  width: min(80vw, 720px);
  height: auto;
  opacity: 0.04;
  animation: so-spin 70s linear infinite;
}
@keyframes so-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .orb-svg {
    animation: none;
  }
}

/* The letter-by-letter typeset — a quiet, refined assembly. */
.so-let {
  display: inline-block;
  animation: so-letter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 36ms);
}
@keyframes so-letter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-let {
    animation: none;
  }
}

/* The literal SCROLL cue is gone — the composition and the gentle hero
   motion make continuing downward obvious on their own. */
.so-dust {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: rgba(120, 102, 72, 0.5);
  pointer-events: none;
  animation: so-drift 22s ease-in-out infinite;
  opacity: 0.3;
}
@keyframes so-drift {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.12;
  }
  50% {
    transform: translateY(-28px) translateX(8px);
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-dust {
    display: none;
  }
}

/* ---- Photo placeholder frame ---- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-jade-soft);
  border-radius: 14px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(32, 36, 31, 0.08);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.6), transparent 45%);
  border-radius: inherit;
  pointer-events: none;
}
.frame .frame-art {
  position: relative;
  z-index: 2;
  opacity: 0.5;
}
.frame .frame-caption {
  position: absolute;
  left: 12px;
  bottom: 9px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone);
}
.frame-tall {
  aspect-ratio: 3 / 4;
}
.frame-wide {
  aspect-ratio: 4 / 3;
}
.frame-square {
  aspect-ratio: 1 / 1;
}

/* ---- The DARK FRAME — calm immersive gallery ---- */
.so-darkframe-section {
  background: #141518;
  padding: 0;
  border: 0;
}
.so-darkframe {
  background-color: #201d1a;
  padding: clamp(24px, 4vw, 52px) 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  position: relative;
  box-shadow: none;
  overflow: hidden;
}
.so-darkframe-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(204, 199, 187, 0.1);
  padding-bottom: 24px;
}
.so-darkframe .so-micro {
  color: rgba(245, 243, 238, 0.68);
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.09);
}
.so-darkframe-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f4eef2;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.16);
}
.so-darkframe .so-lab {
  color: #b8b2a4;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.09);
}
.so-df-tic {
  display: block;
  width: 26px;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 1px;
  margin-bottom: 14px;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9);
}
.so-darkframe-meta {
  display: grid;
  gap: 12px;
  justify-items: end;
  text-align: right;
}
.so-df-hint {
  color: #cdc7ba;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.12);
}
.so-gallery-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.so-gallery-scroll::-webkit-scrollbar {
  display: none;
}
.so-gallery-scroll.grabbing {
  cursor: grabbing;
  user-select: none;
}
.so-gallery-track {
  display: flex;
  gap: clamp(20px, 3.2vw, 44px);
  padding-inline: clamp(6px, 1.5vw, 20px);
}
.so-workcard {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 360px);
  scroll-snap-align: start;
  position: relative;
  scroll-margin-inline: 12px;
}
.so-workcard .frame {
  border: 1px solid rgba(245, 243, 236, 0.1);
  background: #2b3029;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.04);
}
/* pressed-paper inner mount line — a faint recessed window */
.so-workcard .frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(204, 199, 187, 0.1);
  border-radius: 11px;
  pointer-events: none;
  z-index: 4;
}
/* Real project screenshot in the dark frame — same shape as a placeholder. */
.so-workcard-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(245, 243, 236, 0.1);
  border-radius: 16px;
  background: #2b3029;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.04);
}
/* printed mount line over the photograph too */
.so-workcard-media::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(9, 9, 10, 0.4);
  border-radius: 11px;
  pointer-events: none;
  z-index: 4;
}
.so-workcard-media img {
  transition: transform 0.6s ease;
}
.so-workcard:hover .so-workcard-media img {
  transform: scale(1.04);
}
a.so-workcard {
  color: inherit;
  text-decoration: none;
  display: block;
}
/* Brand-color tile — the site's color with its logo centered. */
.so-workcard-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(245, 243, 236, 0.1);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.04);
}
/* pressed-paper inner window on the color mounts */
.so-workcard-tile::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 11px;
  pointer-events: none;
  z-index: 3;
}
.so-workcard-tile-logo {
  max-width: 24%;
  max-height: 24%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}
/* Wordmark logos — small serif lockup, exactly like the client's header. */
.so-workcard-tile-word {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 12px;
}
.so-tile-main {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.so-tile-sub {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.75;
}
.so-workcard .frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}
.so-workcard-cap {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.so-workcard-cap .so-micro {
  color: #a9a395;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.08);
}
.so-workcard-cap .t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  color: #f1ebf0;
  line-height: 1.12;
  text-shadow:
    0 -1px 2px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.so-workcard-cap .c {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(245, 243, 238, 0.7);
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.07);
}
.so-workcard-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(20, 24, 20, 0.5);
  color: var(--color-rice);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 5;
  border-radius: 16px;
  backdrop-filter: blur(2px);
}
.so-workcard-hover .caret {
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}
.so-workcard:hover .so-workcard-hover {
  opacity: 1;
}
@media (hover: none) {
  .so-workcard-hover {
    opacity: 0;
  }
}

/* ---- Archive ---- */
.so-archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.so-filter {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  background: transparent;
  padding: 9px 15px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    filter 0.1s ease, transform 0.1s ease;
}
.so-filter:hover {
  border-color: var(--color-jade);
  color: var(--color-jade-deep);
}
.so-filter:active {
  filter: brightness(0.82);
  transform: translateY(1px);
}
.so-filter.is-active {
  background: var(--color-ink);
  color: var(--color-rice);
  border-color: var(--color-ink);
}
.so-filter.is-active:active {
  filter: brightness(0.78);
}
.so-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .so-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .so-archive-grid {
    grid-template-columns: 1fr;
  }
}
.so-archcard-industry {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.so-archcard-industry .so-micro {
  white-space: nowrap;
}
.so-archcard-meta {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

/* ---- Profile ---- */
.so-profile {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 860px) {
  .so-profile {
    grid-template-columns: 1fr;
  }
}
.so-profile-credits {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.so-profile-credit {
  padding: 16px 0;
}
.so-profile-credit + .so-profile-credit {
  border-left: 1px solid var(--color-line);
  padding-left: 24px;
}
body,
.so-profile-body p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
}
.so-profile-body .lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  margin-bottom: 22px;
}
.so-profile-body p + p {
  margin-top: 16px;
}

/* ---- Project finder ---- */
.so-finder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.so-finder-step {
  border-top: 1px solid var(--color-line);
  padding-top: 20px;
}
.so-finder-step .q {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
/* Mobile question toggle — the panel opens/closes from its header row. */
.so-finder-qrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.so-finder-qrow:focus-visible {
  outline: 1px solid var(--color-gold-deep);
  outline-offset: 4px;
  border-radius: 4px;
}
.so-finder-qmark {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--color-stone);
  white-space: nowrap;
}
.so-finder-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .so-finder-options {
    grid-template-columns: 1fr;
  }
}
.so-fopt {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  background: transparent;
  padding: 13px 15px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    filter 0.1s ease, transform 0.1s ease;
}
.so-fopt:hover {
  border-color: var(--color-jade);
  color: var(--color-jade-deep);
}
.so-fopt:active {
  filter: brightness(0.85);
  transform: translateY(1px);
}
.so-fopt.is-sel {
  background: var(--color-ink);
  color: var(--color-rice);
  border-color: var(--color-ink);
}
.so-finder-answer {
  margin-top: 26px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 36px);
  background: #fdf8ec;
  position: relative;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='fa'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fa)' opacity='0.05'/%3E%3C/svg%3E");
}
.so-finder-answer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--color-jade);
}

/* ---- Manifesto ---- */
.so-manifesto {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.35;
  max-width: 18em;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.so-manifesto .line {
  display: block;
}
.so-manifesto .line em {
  font-style: italic;
  color: #8f3f7e;
}

/* ---- Directory ---- */
.so-directory-index {
  border-top: 1px solid var(--color-line);
}
.so-dir-row {
  border-bottom: 1px solid var(--color-line);
}
.so-dir-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 18px 8px;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.9vw, 19px);
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-ink);
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
  transition: background 0.18s ease, color 0.18s ease, filter 0.12s ease,
    transform 0.12s ease;
}
.so-dir-head:hover {
  color: var(--color-gold-deep);
  background: rgba(25, 26, 26, 0.03);
  padding-inline: 12px;
}
.so-dir-head:active {
  filter: brightness(0.85);
  transform: translateY(1px);
}
.so-dir-head.is-open {
  background: var(--color-ink);
  color: var(--color-rice);
  padding-inline: 14px;
  border-radius: 10px;
}
.so-dir-head.is-open .so-dir-head-meta {
  color: rgba(245, 243, 236, 0.55);
}
.so-dir-caret {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  color: var(--color-ink);
}
.so-dir-head.is-open .so-dir-caret {
  color: var(--color-rice);
}
.so-dir-body {
  padding: 6px 6px 18px;
}
.so-dir-item {
  padding: 12px 6px 12px 18px;
  border-bottom: 1px solid rgba(223, 221, 212, 0.7);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.so-dir-item:hover {
  color: var(--color-gold-deep);
  padding-left: 22px;
}
.so-dir-item:last-child {
  border-bottom: 0;
}

/* ---- Notes / studies lists ---- */
.so-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  border-top: 1px solid var(--color-line);
  padding-top: 30px;
}
@media (max-width: 860px) {
  .so-notes {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.so-note .frame {
  margin-bottom: 14px;
}
.so-note .t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.so-note .d {
  font-size: 14px;
  color: var(--color-stone);
  max-width: 42ch;
}

/* ---- Form ---- */
.so-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-top: 36px;
}
@media (max-width: 700px) {
  .so-form {
    grid-template-columns: 1fr;
    gap: 12px 24px;
  }
}
.so-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-field.full {
  grid-column: 1 / -1;
}
.so-field label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6b5228;
}
.so-field input,
.so-field textarea,
.so-field select {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink);
  background: #fffdf6;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color 0.15s ease;
}
.so-field textarea {
  resize: vertical;
  min-height: 110px;
}
.so-field input::placeholder,
.so-field textarea::placeholder {
  color: var(--color-stone);
  opacity: 0.7;
}
.so-field input:focus,
.so-field textarea:focus,
.so-field select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(169, 144, 88, 0.12);
}
.so-form-submit {
  grid-column: 1 / -1;
  margin-top: 6px;
}

/* ---- Footer ---- */
.so-footer {
  background: #201d1a;
  color: var(--color-rice);
  padding-block: clamp(44px, 6vw, 72px);
}
.so-footer .so-micro {
  color: rgba(245, 243, 236, 0.45);
}
.so-footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 980px) {
  .so-footer-top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .so-footer-top {
    grid-template-columns: 1fr;
  }
}
.so-footer-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.16em;
  color: #4a463f;
}
.so-footer h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 243, 236, 0.45);
  margin-bottom: 14px;
}
.so-footer a.foot-link,
.so-footer span.foot-link {
  display: block;
  font-size: 14px;
  color: rgba(245, 243, 236, 0.85);
  padding: 5px 0;
  transition: color 0.15s ease;
}
.so-footer a.foot-link:hover {
  color: var(--color-jade-soft);
}
.so-footer a.foot-link:active {
  filter: brightness(0.7);
}
.so-footer-bottom {
  border-top: 1px solid rgba(245, 243, 236, 0.14);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 20px;
  align-items: center;
}
.so-footer-seals {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---- Accent blocks: calm ---- */
.so-celadon-block {
  background: var(--color-celadon);
  border-bottom-color: var(--color-line);
}
.so-celadon-block .so-rule {
  background: rgba(62, 78, 65, 0.18);
}
.so-celadon-block .so-micro {
  color: var(--color-jade-deep);
}
.so-celadon-block p {
  color: var(--color-ink);
}
.so-celadon-block h2,
.so-celadon-block .so-serif {
  color: var(--color-ink);
}
.so-celadon-block .so-note .t {
  color: var(--color-ink);
}
.so-celadon-block .so-note .d {
  color: #4a514a;
}
.so-celadon-block .frame {
  border-color: rgba(62, 78, 65, 0.18);
}
.so-celadon-block .so-note .so-micro {
  color: var(--color-verm);
}

.so-dark-block {
  background: var(--color-ink);
  color: var(--color-rice);
  border-bottom-color: rgba(245, 243, 236, 0.14);
}
.so-dark-block .so-rule {
  background: rgba(245, 243, 236, 0.18);
}
.so-dark-block .so-micro {
  color: rgba(245, 243, 236, 0.5);
}
.so-dark-block p {
  color: rgba(245, 243, 236, 0.82);
}
.so-dark-block h2,
.so-dark-block .so-serif {
  color: var(--color-rice);
}
.so-dark-block .so-note .t {
  color: var(--color-rice);
}
.so-dark-block .so-note .d {
  color: rgba(245, 243, 236, 0.66);
}
.so-dark-block .so-note .so-micro {
  color: var(--color-jade-soft);
}
.so-dark-block .frame {
  background: #2b3029;
  border-color: rgba(245, 243, 236, 0.14);
}

.so-black-block {
  background-color: #201d1a;
  
  color: var(--color-rice);
  border-bottom-color: rgba(245, 243, 236, 0.12);
}
.so-black-block .so-finder {
  gap: 16px;
}
.so-black-block .so-finder-step {
  border-top-color: rgba(245, 243, 236, 0.12);
  padding-top: 14px;
}
.so-black-block .so-finder-options {
  gap: 9px;
}
.so-black-block .so-fopt {
  padding: 10px 13px;
  color: var(--color-rice);
  border-color: rgba(245, 243, 236, 0.22);
}
.so-black-block .so-fopt:hover {
  background: #efe6f2;
  border-color: #efe6f2;
  color: #241f26;
}
.so-black-block .so-fopt.is-sel {
  background: var(--color-rice);
  color: var(--color-black);
  border-color: var(--color-rice);
}
.so-black-block .so-rule {
  background: rgba(245, 243, 236, 0.16);
}
.so-black-block .so-micro {
  color: rgba(245, 243, 236, 0.55);
}
.so-black-block .eyebrow-cap,
.so-black-block .eyebrow-cap {
  color: var(--color-jade-soft);
}
.so-black-block p {
  color: rgba(245, 243, 236, 0.85);
}
.so-black-block h2,
.so-black-block .so-serif {
  color: var(--color-rice);
}
.so-black-block .so-finder-step .q {
  color: var(--color-rice);
}
.so-black-block .so-finder-answer {
  background: #fdf8ec;
  color: var(--color-ink);
}
.so-black-block .so-finder-answer .so-serif {
  color: var(--color-ink);
}
.so-black-block .so-finder-answer .so-micro {
  color: var(--color-verm);
}
.so-black-block .so-finder-answer p {
  color: var(--color-ink);
}

/* ---- Calm marquee (single) ---- */
.so-marquee {
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 22px 0;
}
.so-marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: so-scroll 40s linear infinite;
}
.so-marquee-group {
  display: inline-flex;
  flex: 0 0 auto;
}
.so-marquee:hover .so-marquee-track {
  animation-play-state: paused;
}
.so-marquee span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  color: var(--color-print);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(139, 122, 88, 0.28);
}
.so-marquee .dot {
  color: var(--color-gold);
  margin: 0 34px;
  font-size: 9px;
}
/* rare accent inks — "gold" and "verm" map to muted/antique gold and oxblood */
.so-marquee .ink-gold {
  color: var(--color-gold-deep);
}
.so-marquee .ink-verm {
  color: var(--color-verm);
}
@keyframes so-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}

/* ---- Helpers ---- */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.eyebrow-cap {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-stone);
}
.section-head-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.section-head-line h2 {
  font-size: clamp(26px, 4vw, 44px);
}

/* Scroll progress — a jade line that grows as you move through the office. */
.so-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-jade);
  transform-origin: 0 50%;
  z-index: 140;
  pointer-events: none;
}

/* ---- Office Hours — standout journal-page card (blends yet pops). ---- */
.so-office-card {
  position: relative;
  margin-top: 40px;
  background: #fffdf6;
  border: 1px solid var(--color-sepia);
  box-shadow: 0 18px 44px rgba(120, 102, 72, 0.14);
  padding: clamp(26px, 5vw, 56px);
  outline: 1px solid rgba(231, 225, 210, 0.7);
  outline-offset: 9px;
}
.so-office-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: #2a1d14;
}
.so-office-card::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 20px;
  width: 34px;
  height: 34px;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='5' fill='%23b5452c'/%3E%3Cg stroke='%23b5452c' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y1='11'/%3E%3Cline x1='20' y1='29' x2='20' y2='38'/%3E%3Cline x1='2' y1='20' x2='11' y2='20'/%3E%3Cline x1='29' y1='20' x2='38' y2='20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
}
@media (max-width: 640px) {
  .so-office-card::after {
    display: none;
  }
}

/* ============================================================
   PHOTOGRAPHY PORTFOLIO — calm masonry grid + lightbox
   ============================================================ */
.so-portfolio-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.so-portfolio-sub {
  max-width: 42ch;
  color: var(--color-stone);
  font-size: 15px;
}
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.portfolio-grid {
  columns: 3;
  column-gap: 20px;
}
@media (max-width: 900px) {
  .portfolio-grid {
    columns: 2;
  }
}
@media (max-width: 560px) {
  .portfolio-grid {
    columns: 1;
  }
}
.portfolio-card {
  break-inside: avoid;
  margin-bottom: 20px;
  cursor: zoom-in;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
}
.portfolio-card .frame {
  border-radius: 14px;
}
.portfolio-card .frame::after {
  transition: background 0.4s ease;
}
.portfolio-card .frame-art {
  transition: transform 0.5s ease;
}
.portfolio-card:hover .frame-art {
  transform: scale(1.06);
}
.portfolio-card:active .frame {
  transform: translateY(1px);
}
.portfolio-cap {
  margin-top: 10px;
  padding-inline: 2px;
}
.portfolio-cap .t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.portfolio-cap .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-top: 3px;
}
.portfolio-cap .m {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-stone);
}
.portfolio-card:hover .portfolio-cap .t {
  color: var(--color-jade-deep);
}

/* Lightbox */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(21, 23, 26, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lb-card {
  width: min(760px, 100%);
  background: var(--color-sand);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.lb-media {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.25), transparent 45%),
    var(--color-sand-deep);
}
.lb-media .frame {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 300px;
}
.lb-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-top: 1px solid var(--color-line);
}
.lb-body .t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.lb-body .m {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-stone);
  margin-top: 2px;
}
.lb-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lb-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lb-btn:hover {
  background: var(--color-ink);
  color: var(--color-rice);
  border-color: var(--color-ink);
}
.lb-btn:active {
  filter: brightness(0.75);
}
.lb-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-stone);
  white-space: nowrap;
}

/* ============================================================
   ENTRY — super interactive when you enter
   ============================================================ */
/* Staggered calm rise on load (fires on mount, SSR-safe). */
.so-rise {
  animation: so-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes so-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-rise {
    animation: none;
  }
}

/* The sun breathes slowly, like it's alive. */
.so-breathe {
  animation: so-breathe 7s ease-in-out infinite;
  transform-origin: center;
}
@keyframes so-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-breathe {
    animation: none;
  }
}

/* The intro overlay — a calm hello before the office opens. */
.so-intro {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, #fbf6fa, var(--color-rice) 55%),
    var(--color-rice);
}
.so-intro-inner {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}
.so-intro-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 4vw, 34px);
  letter-spacing: 0.14em;
  color: var(--color-ink);
}
.so-intro-sun {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}
.so-intro-rule {
  width: 64px;
  height: 1px;
  background: var(--color-line);
}
.so-intro-tag {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, 2vw, 20px);
  color: var(--color-stone);
}
.so-intro-micro {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-top: 4px;
}

/* Nav links sweep a quiet jade underline on hover. */
.so-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 100%;
  background: var(--color-jade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.so-nav-link:hover::after {
  transform: scaleX(1);
}
@media (hover: none) {
  .so-nav-link::after {
    display: none;
  }
}

/* ============================================================
   PRINT TYPE — blind letterpress emboss (like the reference)
   Smooth raised letters sitting in the cream paper, with a
   quiet sheen — the texture lives in the paper, not the glyphs.
   ============================================================ */
.so-emboss {
  /* A true imprint — letters pressed INTO the paper: recessed tone,
     shadow along the top inner wall, light catching the bottom floor. */
  color: var(--color-emboss);
  text-shadow:
    0 -1px 1px rgba(122, 104, 74, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.9);
}
/* The sun mark debossed exactly like the wordmark — stamped into the paper. */
.so-emboss-mark {
  filter: drop-shadow(0 -1px 1px rgba(122, 104, 74, 0.42))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
    color: var(--color-emboss);
}
/* Deboss on the dark grounds (footer etc.). */
.so-emboss-dark {
  color: var(--color-rice);
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.09);
}

/* ---- THE OFFICE — editorial mounted-photo feature (future space). ---- */
.so-slim { padding-top: 40px; }
.so-office-feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: 34px;
}
@media (max-width: 860px) {
  .so-office-feature { grid-template-columns: 1fr; gap: 30px; }
}

/* The mounted photograph — an embossed mat in a printed book. */
.so-office-photo {
  position: relative;
  margin: 0;
  padding: 18px;
  background:
    linear-gradient(160deg, rgba(255, 254, 250, 0.75), rgba(238, 230, 214, 0.4)),
    var(--color-surface);
  border: 1px solid var(--color-sepia);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(255, 255, 255, 0.7) inset,
    0 16px 38px rgba(139, 122, 88, 0.12);
}
.so-ofp-mat {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-line);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.7), transparent 45%),
    var(--color-paper);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.so-ofp-mat::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 162, 122, 0.35);
}
/* faint pressed texture inside the mount */
.so-ofp-mat::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.5;
}
.so-ofp-mount {
  position: absolute;
  top: 26%;
  width: 58%;
  height: 1px;
  background: var(--color-gold-soft);
}
.so-ofp-slot {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.so-ofp-sun svg { opacity: 0.85; }
.so-ofp-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: rgba(29, 29, 27, 0.72);
  text-transform: uppercase;
}
.so-ofp-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-stone);
}
.so-ofp-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--color-gold-deep);
  opacity: 0.6;
}
.so-ofp-corner.tl { top: 6px; left: 6px; border-top: 1px solid; border-left: 1px solid; }
.so-ofp-corner.tr { top: 6px; right: 6px; border-top: 1px solid; border-right: 1px solid; }
.so-ofp-corner.bl { bottom: 6px; left: 6px; border-bottom: 1px solid; border-left: 1px solid; }
.so-ofp-corner.br { bottom: 6px; right: 6px; border-bottom: 1px solid; border-right: 1px solid; }
.so-ofp-cap {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-print);
}
.so-ofp-cap-no { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--color-gold-deep); }

/* Office copy */
.so-office-copy h2 { margin-top: 0; }
.so-office-text {
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-print);
  margin-top: 16px;
}
.so-office-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}
.so-office-meta > div { display: grid; gap: 6px; }
.so-office-meta .so-micro { font-size: 10px; }
.so-office-meta span:last-child { font-size: 14px; color: var(--color-ink); }
.so-office-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}



/* ---- Hero future-office mount — a wide editorial plate on soft paper.
   One subtle embossed edge, one delicate antique-gold inner line, a whisper
   of linen grain. The frame almost disappears until you look closely. ---- */
.so-hero-mount {
  position: relative;
  width: min(740px, 86vw);
  margin: clamp(60px, 9vh, 108px) auto 0;
  text-align: center;
}
/* The empty plate — the real photograph will carry the weight. */
.so-hm-plate {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(25, 26, 26, 0.1);
  background:
    repeating-linear-gradient(0deg, rgba(120, 102, 72, 0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 102, 72, 0.02) 0 1px, transparent 1px 3px),
    linear-gradient(158deg, #fbf8f0 0%, #f0e8d6 62%, #ebe1cc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    0 24px 48px -22px rgba(125, 106, 74, 0.24);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
}
/* One delicate inner line — antique gold, barely there. */
.so-hm-plate::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(141, 103, 47, 0.24);
  pointer-events: none;
}
/* A tiny pressed gold diamond — the only ornament. */
.so-hm-plate::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(141, 103, 47, 0.5);
  background: rgba(185, 146, 90, 0.16);
  pointer-events: none;
  z-index: 2;
}
/* Tiny editorial caption — nothing inside the plate competes with the photo. */
.so-hm-cap {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-stone);
}
.so-hm-cap .sep {
  color: rgba(131, 133, 124, 0.55);
  letter-spacing: 0;
}

/* Stamped note inside the plate — the embossed sun + one quiet line. */
.so-hm-ph {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(125, 106, 74, 0.55);
}

/* Quiet letterpress on the dark paper — dim variant for small lines. */
.so-print-dark-dim {
  color: #a9a395;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

/* dark frame: neutralize card link/arrow colors (no color, just emboss) */
.so-workcard-cap .so-arrow {
  color: #cfc9bc;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.12);
}
.so-workcard-cap .so-arrow:hover,
.so-workcard-cap .so-arrow:active {
  color: #e8e3d8;
  filter: none;
}

/* Archive brand tile — small logo on the site's color. */
.so-arch-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.so-arch-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(32, 36, 31, 0.12);
}
.so-arch-tile-logo {
  max-width: 26%;
  max-height: 26%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Who We Are (desktop base for classed layout) ---------- */
.so-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 6vw, 90px);
  align-items: start;
  margin-top: 40px;
}
.so-about-copy {
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.5;
}
.so-fu-seal {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: 0 6px;
}
.so-fu-seal-cap {
  text-align: center;
  max-width: 150px;
}
.so-quiz-copy {
  font-size: 17px;
  margin-top: 14px;
}
.so-quiz-intro {
  margin-top: 40px;
  max-width: 42ch;
}
.so-black-block {
  padding-block: clamp(26px, 4vw, 48px);
}
.so-big-line {
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.04;
}
/* Bottom close for the archive — mobile only. */
.so-archive-close-mobile {
  display: none;
}
/* Work-card detail overlay — the "VIEW PROJECT" action. */
.so-cw-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4f2ec;
  background: #201d1a;
  border: 1px solid rgba(236, 231, 221, 0.25);
  border-radius: 999px;
  padding: 11px 18px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.so-cw-open:hover {
  background: #141518;
  border-color: rgba(236, 231, 221, 0.55);
}
.so-wiz-answer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
/* Office Hours quick-form wizard (mobile). */
.so-wiz-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  grid-column: 1 / -1;
}
.so-wiz-active {
  position: relative;
}
.so-wiz-active input,
.so-wiz-active select {
  height: 46px;
}
.so-wiz-active input,
.so-wiz-active select,
.so-wiz-active textarea {
  padding-right: 48px;
}
.so-wiz-arrow {
  position: absolute;
  right: 6px;
  top: auto;
  bottom: 6px;
  transform: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-ink);
  color: var(--color-rice);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* A slim V-shaped next chevron — two strokes meeting at a point. */
.so-wiz-chev {
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--color-rice);
  border-right: 2px solid var(--color-rice);
  transform: rotate(45deg);
  margin-left: -3px;
}
.so-wiz-arrow:hover {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
}
.so-wiz-progress {
  font-size: 10px;
}
.so-wiz-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  background: rgba(185, 146, 90, 0.1);
  border: 1px solid rgba(143, 111, 51, 0.45);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.so-wiz-full:hover {
  background: var(--color-gold-deep);
  color: #fffaf0;
  border-color: var(--color-gold-deep);
}
.so-wiz-review {
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  display: grid;
  gap: 14px;
  background: #fdf8ec;
}
.so-wiz-review-rows {
  display: grid;
  gap: 10px;
}
.so-wiz-review-row {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 8px;
  font-size: 14px;
  color: var(--color-ink);
}
.so-wiz-review-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Mobile-only: tighter, one-scroll pacing ---------- */
@media (max-width: 860px) {
  /* Hero — start tight under the header, no dead space above */
  .so-hero {
    min-height: auto;
    justify-content: flex-start;
    padding-block: 72px 36px;
  }
  .so-hero-locale {
    margin-bottom: 18px;
  }
  .so-hero-sub {
    font-size: 11px;
    margin-top: 12px;
  }
  .so-hero-mount {
    margin-top: 34px;
  }

  /* Who We Are — shorter copy, fortune seal in a small box */
  .so-about-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 28px;
  }
  .so-about-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.18em;
    line-height: 1.5;
  }
  .so-about-copy {
    font-size: 14.5px;
    line-height: 1.5;
  }
  .so-fu-seal {
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 14px 18px 16px;
    gap: 12px;
  }
  .so-fu-seal svg {
    width: 72px;
    height: 72px;
  }
  .so-fu-seal-cap {
    max-width: 132px;
    font-size: 9px;
  }
  .so-manifesto {
    font-size: 16px;
  }

  /* Current Work — everything fits ~one scroll */
  .so-darkframe {
    padding: 44px 0 24px;
  }
  .so-darkframe-head {
    margin-bottom: 18px;
    padding-bottom: 12px;
    gap: 12px;
  }
  .so-darkframe-title {
    font-size: 18px;
    letter-spacing: 0.14em;
  }
  .so-darkframe-meta {
    gap: 4px;
  }
  .so-df-tic {
    margin-bottom: 8px;
  }
  .so-gallery-track {
    gap: 18px;
  }
  .so-workcard {
    width: 60vw;
  }
  .so-workcard-media,
  .so-workcard-tile,
  .so-workcard .frame-tall {
    aspect-ratio: 1 / 1 !important;
  }
  .so-darkframe .so-shell .so-micro {
    margin-top: 16px !important;
    font-size: 10px;
    line-height: 1.5;
  }
  /* Photo-only cards on phones — tap opens the detail panel. */
  .so-workcard-cap {
    display: none;
  }
  .so-workcard-hover {
    display: none;
  }
  .so-workcard-cap .t {
    font-size: 13px;
  }
  .so-workcard-cap .c {
    font-size: 11px;
  }

  /* Meet Hana — horizontal portrait, smaller text, breathing credits */
  #about-hana .so-profile {
    gap: 24px;
  }
  #about-hana .so-profile > :first-child {
    width: min(340px, 100%);
    justify-self: center;
  }
  #about-hana .frame-tall {
    aspect-ratio: 4 / 3 !important;
  }
  #about-hana .so-profile-body p {
    font-size: 14px;
    line-height: 1.55;
  }
  #about-hana .so-profile-body .lead {
    font-size: 18px;
    margin-bottom: 12px;
  }
  #about-hana .so-profile-credits {
    margin-top: 16px;
  }
  #about-hana .so-profile-credit {
    padding: 10px 0 12px;
  }
  #about-hana .so-profile-credit + .so-profile-credit {
    padding-left: 16px;
  }
  #about-hana .so-profile-credit p {
    font-size: 12.5px;
    margin-top: 4px !important;
    line-height: 1.4;
  }
  #about-hana .so-profile-credit .so-micro {
    font-size: 9px;
  }
  #about-hana .so-serif {
    font-size: 24px !important;
  }

  /* What do you need? — the quiz fits one screen */
  .so-black-block {
    padding: 34px 0 52px;
  }
  .so-quiz-intro {
    margin-top: 16px;
  }
  .so-big-line {
    font-size: 26px;
    line-height: 1.15;
  }
  .so-quiz-copy {
    font-size: 12.5px;
    margin-top: 6px;
    line-height: 1.45;
  }
  .so-black-block .so-finder {
    gap: 8px;
  }
  .so-finder .eyebrow-cap {
    font-size: 10px;
    margin-bottom: 6px;
    line-height: 1.5;
  }
  .so-finder-step {
    padding-top: 8px;
  }
  .so-finder-step .q {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .so-finder-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    grid-auto-rows: 1fr;
    margin: 14px 0 18px;
  }
  .so-fopt {
    font-size: 11.5px;
    padding: 6px 10px;
    border-radius: 999px;
    text-align: center;
    line-height: 1.35;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.so-finder-answer {
    margin-top: 22px;
    padding: 18px;
  }
  .so-finder-answer h3 {
    font-size: 17px !important;
  }

  /* Archive — close it from the bottom */
  .so-archive-close-mobile {
    display: block;
    margin-top: 34px;
    text-align: center;
  }
}

/* Inline jump link — refined text button, no underline, scrolls to the finder. */
.so-link-jump {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.so-link-jump:hover { color: var(--color-gold-deep); }

/* ---- Current Work click detail — dark embossed in-page card. ---- */
.so-cw-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(12, 12, 14, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 48px);
}
.so-cw-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  background-color: #1a1b1e;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6 0.5' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 50% 0%, rgba(66, 64, 60, 0.35), transparent 58%);
  border: 1px solid rgba(236, 231, 221, 0.14);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.so-cw-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  background: none;
  border: 1px solid rgba(236, 231, 221, 0.25);
  color: #cfc9bc;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.so-cw-close:hover {
  background: #cfc9bc;
  color: #141518;
}
.so-cw-media {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid rgba(236, 231, 221, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  background: #141518;
}
.so-cw-media img {
  width: 100%;
  display: block;
  max-height: 52dvh;
  object-fit: cover;
}
.so-cw-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
}
.so-cw-tile-logo {
  max-width: 22%;
  max-height: 22%;
  object-fit: contain;
}
.so-cw-body .so-micro {
  color: rgba(236, 231, 221, 0.55);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.so-cw-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: #ece7dd;
  margin-top: 8px;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.16);
}
.so-cw-meta {
  color: #9d988b;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-top: 8px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.07);
}
.so-cw-note {
  color: rgba(236, 231, 221, 0.55);
  font-size: 13px;
  font-style: italic;
  margin-top: 14px;
}
/* Work cards are clickable buttons now */
.so-workcard-btn {
  cursor: pointer;
}

/* Header CTA — always a curved pill, magenta-pink. */
.so-nav-link.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #201d1a;
  color: #f6f1f4;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.so-nav-link.cta:hover {
  background: #16130f;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(26, 21, 18, 0.55);
  transform: translateY(-1px);
}
.so-nav-link.cta::after {
  display: none;
}

/* Letterpress imprint for SVG seals — pressed into the surface like the sun. */
.so-stamp-emboss {
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}
.so-stamp-emboss svg {
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

/* Office Hours — the line under the heading: cool, light gray-brown. */
#office-hours .so-rule {
  background: #4a4640;
}
#office-hours {
  border-bottom-color: #4a4640;
}

/* ---- Photography gallery ---- */
.so-photo-grid {
  columns: 3;
  column-gap: 18px;
}
@media (max-width: 900px) { .so-photo-grid { columns: 2; } }
@media (max-width: 560px) { .so-photo-grid { columns: 1; } }
.so-photo-cell {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  break-inside: avoid;
}
.so-photo-cell img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.so-photo-ratio-tall { aspect-ratio: 3 / 4; }
.so-photo-ratio-wide { aspect-ratio: 4 / 3; }
.so-photo-ratio-square { aspect-ratio: 1 / 1; }
.so-photo-cell:hover img { transform: scale(1.04); }
.so-photo-cap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.so-photo-lb .so-photo-lb-card {
  max-width: min(900px, 92vw);
}
.so-photo-lb-card img {
  width: 100%;
  max-height: 82dvh;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.so-photo-lb-meta {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ---- Mobile: scrolled nav becomes a solid black bar ---- */
@media (max-width: 860px) {
  .so-nav.is-scrolled {
    background: #0d0d0f;
    --so-nav-ink: #f3ede2;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5);
  }
  .so-nav.is-scrolled .so-brandlock {
    color: #f3ede2;
  }
  .so-nav.is-scrolled .so-nav-burger {
    color: #f3ede2;
  }
}


/* ---- Archive: two rooms of Sunday Office (STUDIO / OFFICE) ---- */
.archive-room {
  --ax-bg: var(--color-paper, #efe6f2);
  --ax-ink: var(--color-ink);
  --ax-muted: var(--color-stone);
  --ax-line: var(--color-sepia);
  --ax-chip: rgba(26, 21, 18, 0.05);
  --ax-chip-ink: var(--color-ink);
  --ax-active-bg: #1a1512;
  --ax-active-ink: #f3ede2;
  transition: background-color 0.5s ease, color 0.5s ease;
}
.archive-room.is-studio {
  --ax-bg: #131210;
  --ax-ink: #eae6dc;
  --ax-muted: #9b968a;
  --ax-line: rgba(236, 230, 216, 0.15);
  --ax-chip: rgba(255, 255, 255, 0.05);
  --ax-chip-ink: #eae6dc;
  --ax-active-bg: #eae6dc;
  --ax-active-ink: #131210;
}
.archive-room .so-arrow .arr,
.archive-room .so-arrow {
  color: var(--ax-muted);
}
.archive-toggle {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--ax-line);
  border-radius: 999px;
  padding: 4px;
  background: var(--ax-chip);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.archive-toggle .tog-label {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 108px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
  padding: 11px 10px;
  border-radius: 999px;
  text-align: center;
  color: var(--ax-muted);
  pointer-events: none;
  transition: color 0.25s ease;
}
.archive-toggle .tog-label.on {
  color: var(--ax-active-ink);
  font-weight: 700;
}
.archive-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--ax-active-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Archive panel worlds — the dropped-open scrollable drawer */
.so-drawer-scroll {
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 150, 138, 0.55) transparent;
}

/* Paper texture overlay for logo tiles (featured + archive) */
.so-workcard-tile::after,
.so-arch-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(rgba(120, 100, 60, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
  mix-blend-mode: multiply;
}

/* Boat party reel slot — text left, sticky reel right */
.so-reel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 44px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 860px) {
  .so-reel-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .so-reel-side {
    position: static !important;
    max-width: 220px;
  }
}

/* Brand page — world intro with the portrait */
.so-brand-world {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 420px);
  gap: 34px;
  align-items: center;
  margin-top: 26px;
}
@media (max-width: 860px) {
  .so-brand-world {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Logo + identity — case study grid */
.so-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) {
  .so-cases {
    grid-template-columns: 1fr;
  }
}

/* Essential Brows — feature carousel */
.so-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.so-carousel::-webkit-scrollbar {
  display: none;
}
.so-carousel-card {
  scroll-snap-align: start;
}
.so-carousel-btn {
  border: 1px solid var(--color-sepia);
  border-radius: 999px;
  background: transparent;
  color: var(--color-print);
  font-size: 15px;
  line-height: 1;
  width: 34px;
  height: 34px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.so-carousel-btn:hover {
  border-color: var(--color-verm);
  color: var(--color-verm);
}

/* Case page — Studio + Before | Now */
.so-case-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}
@media (max-width: 860px) {
  .so-case-cols {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* Mobile INQUIRE bar — fixed bottom, black; hides at office hours */
.so-inquire-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: #131210;
  color: #f5f2ea;
  text-align: center;
  padding: 15px 20px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: none;
  border-top: 1px solid rgba(245, 242, 234, 0.16);
  display: none;
  transition: opacity 0.35s ease;
}
@media (max-width: 900px) {
  .so-inquire-bar {
    display: block;
  }
}

/* Jazmin's case — brand text + guide image pair */
.so-brand-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 30px;
  align-items: start;
}
@media (max-width: 860px) {
  .so-brand-pair {
    grid-template-columns: 1fr;
  }
}

/* Websites page — 3-up stats band */
.so-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .so-stats3 { grid-template-columns: 1fr; }
}

/* Discreet about button — plus only, no nav item */
.so-about-plus {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--color-sepia);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  color: var(--color-print);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.so-about-plus:hover {
  border-color: var(--color-verm);
  color: var(--color-verm);
}

/* About — story navigator */
.so-chapters-inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}
.so-chapters-nav {
  border-right: 1px solid var(--color-sepia);
}
.so-chapters-mnav {
  display: none;
  overflow-x: auto;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-sepia);
}
.so-chapter-pane {
  padding: 34px 38px 26px;
  min-height: 400px;
}
.so-chapter-fade {
  animation: so-fadein 0.32s ease both;
}
@keyframes so-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .so-chapters-inner {
    grid-template-columns: 1fr;
  }
  .so-chapters-nav {
    display: none;
  }
  .so-chapters-mnav {
    display: flex;
  }
  .so-chapter-pane {
    padding: 26px 22px 22px;
    min-height: 0;
  }
}

/* ============================================================
   FILE NO. 003 — THE FOUR ROOMS
   Editorial head (title left, intro right) over four photo-led
   rooms. Desktop: four columns. Tablet: 2 × 2. Phone: an index
   of rows — thumbnail beside the words, easy to thumb through.
   ============================================================ */
.so-rooms-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-line);
}
.so-rooms-title {
  font-size: clamp(34px, 5.4vw, 64px);
  margin-top: 14px;
  line-height: 1.02;
  color: var(--color-ink);
}
.so-rooms-intro p {
  margin: 0;
  max-width: 44ch;
  color: var(--color-print);
  line-height: 1.5;
}
.so-rooms-intro .so-rooms-tag {
  margin-top: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #55286f;
  font-size: clamp(17px, 1.9vw, 22px);
}

.so-rooms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.so-room {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.so-room-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.so-room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
  filter: saturate(0.92);
}
.so-room-key {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-ink);
  background: rgba(239, 230, 242, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 5px 9px 4px;
  border-radius: 999px;
}
.so-room-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--color-line);
}
.so-room-no {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--color-verm);
}
.so-room-title {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.so-room-desc {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-print);
}
.so-room-open {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-verm);
  display: inline-flex;
  gap: 8px;
}
.so-room-open .arr {
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .so-room:hover .so-room-media img {
    transform: scale(1.045);
    filter: saturate(1);
  }
  .so-room:hover .so-room-title {
    color: var(--color-verm);
  }
  .so-room:hover .so-room-open .arr {
    transform: translateX(5px);
  }
}
.so-room:active .so-room-media {
  filter: brightness(0.9);
}
@media (prefers-reduced-motion: reduce) {
  .so-room-media img,
  .so-room-open .arr {
    transition: none;
  }
}

@media (max-width: 980px) {
  .so-rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
  .so-room-media {
    aspect-ratio: 5 / 4;
  }
}
@media (max-width: 640px) {
  .so-rooms-head {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 22px;
  }
  .so-rooms-intro p {
    font-size: 15px;
  }
  .so-rooms {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 6px;
  }
  .so-room {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-line);
  }
  .so-room-media {
    aspect-ratio: 4 / 5;
    border-radius: 12px;
  }
  .so-room-key {
    display: none;
  }
  .so-room-body {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .so-room-title {
    margin-top: 5px;
    font-size: 19px;
  }
  .so-room-desc {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
  }
  .so-room-open {
    padding-top: 10px;
  }
}

/* ============================================================
   Small fixes + mobile polish
   ============================================================ */

/* Meet Hana credits: the third credit wraps to a new row, so it
   shouldn't carry the divider/indent meant for the second column. */
.so-profile-credit:nth-child(2n + 1) {
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* Directory rows: breathing room between "05 · OPEN" and the + */
.so-dir-head-side {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---- Mobile menu: a full-width index panel under the header ---- */
.so-mobile-menu {
  position: static !important;
}
.so-nav-burger {
  cursor: pointer;
  list-style: none;
  padding: 10px 0 10px 12px;
  -webkit-tap-highlight-color: transparent;
}
.so-burger-lines {
  display: inline-grid;
  gap: 5px;
  width: 18px;
}
.so-burger-lines span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease;
}
.so-burger-label::after {
  content: "Menu";
}
.so-mobile-menu[open] .so-burger-label::after {
  content: "Close";
}
.so-mobile-menu[open] .so-burger-lines span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.so-mobile-menu[open] .so-burger-lines span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}
.so-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-rice);
  color: var(--color-ink);
  border-top: 1px solid var(--color-line);
  padding: 26px clamp(20px, 5vw, 60px) calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  animation: so-menu-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes so-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.so-menu-file {
  color: var(--color-verm);
}
.so-menu-list {
  margin-top: 14px;
  border-top: 1px solid var(--color-line);
}
.so-menu-link {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
  -webkit-tap-highlight-color: transparent;
}
.so-menu-no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-stone);
}
.so-menu-name {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.so-menu-arr {
  font-size: 18px;
  color: var(--color-verm);
  transition: transform 0.2s ease;
}
.so-menu-link:active .so-menu-name {
  color: var(--color-verm);
}
.so-menu-link:active .so-menu-arr {
  transform: translateX(4px);
}
.so-menu-cta {
  margin-top: 26px;
  display: block;
  text-align: center;
  background: var(--color-ink);
  color: var(--color-rice);
  border-radius: 999px;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.so-menu-cta:active {
  filter: brightness(1.3);
}
.so-menu-foot {
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--color-print);
}
@media (prefers-reduced-motion: reduce) {
  .so-menu-panel {
    animation: none;
  }
}
/* When the scrolled header turns black, the burger follows it,
   but the panel itself stays on paper. */
.so-nav.is-scrolled .so-menu-panel {
  color: var(--color-ink);
}

@media (max-width: 640px) {
  /* iOS zooms into any field under 16px — keep the form still */
  .so-field input,
  .so-field textarea,
  .so-field select {
    font-size: 16px;
  }
  .so-field label {
    font-size: 10px;
  }

  /* "Back to …" links: easier to hit with a thumb */
  .so-arrow {
    padding-block: 10px;
  }

  /* Text-heavy three-up grids stack into one column */
  .so-stack-sm {
    grid-template-columns: 1fr !important;
  }
  .so-stack-sm > button img,
  .so-stack-sm > button > div[style*="aspect-ratio"] {
    aspect-ratio: 16 / 10 !important;
  }

  /* Four- and five-up grids become two-up */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Wide banner → a taller crop so the overlaid words don't collide */
  .so-feature-banner img {
    aspect-ratio: 4 / 3 !important;
  }

  /* Closing black band: stack instead of three squeezed columns */
  .so-cta-band {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 28px 24px !important;
    text-align: left;
  }
  .so-cta-band > div {
    text-align: left !important;
  }
}

/* ---- Phones: floating "Start a project" button at the bottom ---- */
.so-startbar {
  display: none;
}
@media (max-width: 860px) {
  .so-startbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 0 clamp(20px, 5vw, 60px) env(safe-area-inset-bottom, 0px);
    background: #17131b;
    color: #f3ede2;
    border-top: 1px solid rgba(243, 237, 226, 0.12);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 -10px 28px -14px rgba(23, 19, 27, 0.45);
    transform: translateY(100%);
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .so-startbar.is-visible {
    transform: none;
    pointer-events: auto;
  }
  .so-startbar:active {
    background: #2a2330;
  }
  .so-startbar .arr {
    font-size: 16px;
    color: var(--color-lav-soft);
  }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .so-startbar {
    transition: none;
  }
}

/* ---- Directory: items and categories that open a page ---- */
.so-dir-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-ink);
  text-decoration: none;
}
.so-dir-item-link .arr {
  color: var(--color-verm);
  font-size: 13px;
  transition: transform 0.2s ease;
}
.so-dir-item-link:hover .arr {
  transform: translateX(4px);
}
.so-dir-room {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px 18px;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-verm);
  text-decoration: none;
}
.so-dir-room .arr {
  transition: transform 0.2s ease;
}
.so-dir-room:hover .arr {
  transform: translateX(4px);
}

/* ============================================================
   FILE NO. 001 — BUILD YOUR WORLD
   Brand-led: the statement, then a guided path. Brand is the
   large first step ("Start here"); Digital, Image and Direction
   follow as the rooms that bring the world to life.
   ============================================================ */
.so-build-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: center;
  margin-top: 30px;
}
.so-build-title {
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: 1;
  margin: 6px 0 22px;
  color: var(--color-ink);
}
.so-build-head .so-rooms-tag {
  margin-top: 20px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #55286f;
  font-size: clamp(18px, 2vw, 23px);
}

.so-path {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 36px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}
.so-path-lead {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.so-path-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.so-path-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.so-path-start {
  position: absolute;
  left: 14px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-rice);
  background: var(--color-ink);
  padding: 7px 12px 6px;
  border-radius: 999px;
}
.so-path-body {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}
.so-path-title {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.so-path-lead-line {
  display: block;
  margin-top: 10px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #55286f;
  font-size: clamp(17px, 1.7vw, 20px);
}
.so-path-lead .so-room-desc {
  font-size: 15px;
  max-width: 46ch;
}
.so-path-cta {
  align-self: flex-start;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-ink);
  color: var(--color-rice);
  padding: 13px 20px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.so-path-cta .arr {
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .so-path-lead:hover .so-path-media img {
    transform: scale(1.04);
  }
  .so-path-lead:hover .so-path-title {
    color: var(--color-verm);
  }
  .so-path-lead:hover .so-path-cta .arr {
    transform: translateX(5px);
  }
}
.so-path-rest {
  display: flex;
  flex-direction: column;
}
.so-path-then {
  color: var(--color-verm);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
/* The three following rooms read as an index: thumbnail beside words. */
.so-room.so-path-room {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}
.so-path-room .so-room-media {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
}
.so-path-room .so-room-body {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.so-path-room .so-room-title {
  margin-top: 5px;
  font-size: 20px;
}
.so-path-room .so-room-desc {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
}
.so-path-room .so-room-desc em {
  font-style: italic;
  color: var(--color-ink);
}
.so-path-room .so-room-open {
  padding-top: 10px;
}
.so-build-manifesto {
  margin-top: 44px;
}

@media (max-width: 900px) {
  .so-build-head,
  .so-path {
    grid-template-columns: 1fr;
  }
  .so-path {
    gap: 28px;
    margin-top: 34px;
    padding-top: 24px;
  }
}
@media (max-width: 640px) {
  .so-build-head {
    margin-top: 22px;
    gap: 22px;
  }
  .so-build-title {
    margin-bottom: 16px;
  }
  .so-path-media {
    aspect-ratio: 5 / 4;
    border-radius: 14px;
  }
  .so-room.so-path-room {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
  }
  .so-path-room .so-room-title {
    font-size: 18px;
  }
  .so-build-manifesto {
    margin-top: 32px;
  }
}

/* ============================================================
   FILE NO. 003 — THE PROOF
   ============================================================ */
.so-proof-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px 48px;
  align-items: end;
  margin-top: 24px;
}
.so-proof-title {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.02;
  color: var(--color-ink);
}
.so-proof-intro {
  margin: 0;
  max-width: 40ch;
  color: var(--color-print);
  line-height: 1.5;
}
.so-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--color-line);
}
.so-proof-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 22px 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.so-proof-item + .so-proof-item {
  border-left: 1px solid var(--color-line);
  padding-left: 22px;
}
.so-proof-n {
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #55286f;
  font-variant-numeric: tabular-nums;
}
.so-proof-u {
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-ink);
}
.so-proof-d {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-print);
}
.so-proof-p {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-verm);
}
.so-proof-p .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}
.so-proof-item:hover .so-proof-p .arr {
  transform: translateX(4px);
}
@media (max-width: 900px) {
  .so-proof-head {
    grid-template-columns: 1fr;
  }
  .so-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .so-proof-item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .so-proof-item:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }
}
@media (max-width: 640px) {
  .so-proof-item {
    padding: 18px 14px 18px 0;
  }
  .so-proof-item + .so-proof-item {
    padding-left: 14px;
  }
  .so-proof-item:nth-child(odd) {
    padding-left: 0;
  }
  .so-proof-d {
    font-size: 13px;
  }
}

/* ============================================================
   FILE NO. 005 — START A PROJECT (finder + form, one place)
   ============================================================ */
.so-finder-card {
  margin-top: 30px;
  border-radius: 20px;
  padding: clamp(22px, 4vw, 40px);
}
.so-finder-card-copy {
  margin: 8px 0 0;
  max-width: 48ch;
}
@media (max-width: 640px) {
  .so-finder-card {
    border-radius: 16px;
  }
}
@media (max-width: 860px) {
  .so-black-block.so-finder-card {
    padding: 24px 20px 28px;
  }
}

/* Brand photo: trim the thin white edge in the original, keep her face in frame. */
.so-path-media img {
  transform: scale(1.04);
  object-position: 70% 30%;
}
@media (hover: hover) {
  .so-path-lead:hover .so-path-media img {
    transform: scale(1.08);
  }
}

/* ---- Room pages: "Also in this room" link ---- */
.so-room-more {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}
.so-room-more-link {
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  display: inline-flex;
  gap: 12px;
  align-items: baseline;
}
.so-room-more-link .arr {
  color: var(--color-verm);
  transition: transform 0.2s ease;
}
.so-room-more-link:hover .arr {
  transform: translateX(5px);
}

/* ============================================================
   Philosophy lines (Hana's own words) + the quiet "where the
   work went" list — story first, the figure as a footnote.
   ============================================================ */
.so-interlude {
  padding-block: clamp(48px, 8vw, 96px);
  border-bottom: 1px solid var(--color-line);
}
.so-quote {
  margin: 0;
  max-width: 30ch;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #55286f;
  text-wrap: balance;
}
.so-quote-by {
  margin-top: 18px;
  color: var(--color-stone);
}
.so-quote-small {
  margin-top: 36px;
  font-size: clamp(18px, 2vw, 24px);
  max-width: 40ch;
}

.so-notes-list {
  margin-top: 30px;
  border-top: 1px solid var(--color-line);
}
.so-note-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto auto;
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.so-note-p {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.so-note-d {
  color: var(--color-print);
  font-size: 15px;
  line-height: 1.55;
}
.so-note-f {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-stone);
  white-space: nowrap;
}
.so-note-arr {
  color: var(--color-verm);
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .so-note-row:hover .so-note-p {
    color: var(--color-verm);
  }
  .so-note-row:hover .so-note-arr {
    transform: translateX(4px);
  }
}
@media (max-width: 640px) {
  .so-note-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 16px 0;
  }
  .so-note-p {
    grid-column: 1;
  }
  .so-note-arr {
    grid-column: 2;
    grid-row: 1;
  }
  .so-note-d {
    grid-column: 1 / -1;
    font-size: 14px;
  }
  .so-note-f {
    grid-column: 1 / -1;
  }
}

/* "brand. digital. image. direction." — pressed into the paper,
   lettered exactly like the "Sunday Office." wordmark. */
.so-build-head .so-rooms-tag.so-emboss {
  margin-top: 26px;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 24px);
  line-height: 1.5;
  letter-spacing: 0.22em;
  color: var(--color-emboss);
  text-shadow:
    0 -1px 1px rgba(122, 104, 74, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.9);
}
@media (max-width: 480px) {
  .so-build-head .so-rooms-tag.so-emboss {
    font-size: clamp(14px, 4.1vw, 17px);
    letter-spacing: 0.12em;
  }
}

/* "The world behind the work." — same pressed-in lettering as the wordmark. */
.so-path-lead .so-path-lead-line {
  margin-top: 12px;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  letter-spacing: 0.18em;
  color: var(--color-emboss);
  text-shadow:
    0 -1px 1px rgba(122, 104, 74, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.9);
}
@media (max-width: 480px) {
  .so-path-lead .so-path-lead-line {
    letter-spacing: 0.12em;
  }
}

/* Large opening quote mark, upper left of each philosophy line — pressed into the paper. */
.so-quote-mark {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(72px, 9vw, 120px);
  line-height: 0.7;
  height: 0.42em;
  margin-left: -0.04em;
  margin-bottom: 14px;
  color: var(--color-emboss);
  user-select: none;
}

/* Numbers: visible again, but still sitting inside the story rows. */
.so-note-row .so-note-f {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: none;
  color: #55286f;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.so-note-row .so-note-u {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-stone);
}
.so-note-row {
  align-items: center;
}
@media (max-width: 640px) {
  .so-note-row .so-note-f {
    font-size: 22px;
    margin-top: 4px;
  }
}

/* ============================================================
   PHONES — make every box, card and grid read cleanly.
   ============================================================ */
@media (max-width: 640px) {
  /* Detail lines that sit right-aligned on desktop read as mistakes on
     a phone — everything lines up on the left edge instead. */
  .so-shell [style*="text-align:right"],
  .so-shell [style*="text-align: right"] {
    text-align: left !important;
  }

  /* Stacked boxes never touch each other */
  .so-stack-sm {
    gap: 14px !important;
  }

  /* Two-column case openings always stack, even with inline columns */
  .so-case-cols {
    grid-template-columns: 1fr !important;
  }

  /* Photo captions: readable, and never sprawling across a face */
  .so-photo-cap {
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.45;
    padding: 5px 8px 4px;
    border-radius: 8px;
    background: rgba(18, 16, 20, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: none;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: max-content;
    max-width: calc(100% - 16px);
  }

  /* Cast + crew credits: handle drops under the name, never wraps mid-word */
  .so-credit-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .so-credit-row > a,
  .so-credit-row > span,
  .so-credit-row > div:last-child .so-micro {
    white-space: nowrap;
  }

  /* Jaydyn F. results line: calmer and left-aligned */
  .so-jd-stats {
    font-size: 17px !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
  }

  /* Logo + Identity: identity cards as full-width cards */
  .so-identities [style*="aspect-ratio"] {
    aspect-ratio: 16 / 9 !important;
  }

  /* Websites showcase covers: shorter so one card isn't a whole screen */
  .so-showcase [style*="aspect-ratio"] {
    aspect-ratio: 4 / 3 !important;
  }

  /* Creative Direction numbers: a tidy 2-up grid, no stray dividers */
  .so-cd-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .so-cd-stats > div {
    border-left: 0 !important;
    padding: 14px 0 12px !important;
    border-bottom: 1px solid var(--color-sepia);
  }
  .so-cd-stats > div:last-child {
    border-bottom: 0;
  }

  /* Creative Direction "selected work": image beside the words */
  .so-selected-work {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .so-selected-work > a {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }
  .so-selected-work > a > img {
    grid-row: span 2;
    aspect-ratio: 1 / 1 !important;
  }
  .so-selected-work > a > p {
    margin-top: 0 !important;
  }

  /* Exhibition banner on Creative Direction: words under the photo */
  .so-feature-banner > span:not(:first-of-type) {
    position: static !important;
    display: flex;
    padding-top: 12px;
  }
  .so-feature-banner > span:first-of-type {
    display: none;
  }
  .so-feature-banner > span:last-child {
    text-align: left !important;
    padding-top: 4px;
  }

  /* Empty "image to be added" slots inside stacked approach cards: a slim band, not a blank screen */
  .so-stack-sm > button > div[style*="aspect-ratio"] {
    aspect-ratio: auto !important;
    height: 64px;
  }

  /* Boxes in the same row match heights */
  [style*="grid-template-columns"] {
    align-items: stretch;
  }

  /* Easier to tap */
  .so-link-jump {
    padding-block: 10px;
  }
  .so-shell a.so-micro {
    display: inline-block;
    padding-block: 8px;
  }
}

/* Phones: on narrow photo tiles show only the frame number
   (the full caption still shows when the photo is opened). */
@media (max-width: 640px) {
  .so-photo-cell .so-cap-label {
    display: none;
  }
  .so-photo-cell[style*="span 6"] .so-cap-label,
  .so-photo-cell[style*="span 12"] .so-cap-label {
    display: inline;
  }
}

@media (max-width: 640px) {
  /* Websites results: one clean row per figure */
  .so-web-results {
    flex-direction: column;
    gap: 0;
  }
  .so-web-results > div {
    border-left: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--color-sepia);
    flex: none !important;
  }
  .so-web-results > div:last-child {
    border-bottom: 0;
    padding-bottom: 0 !important;
  }
}
@media (max-width: 640px) {
  .so-profile > * {
    min-width: 0;
  }
  .so-form,
  .so-form > * {
    min-width: 0;
    max-width: 100%;
  }
}

/* ---- Photography rooms (People / Brands / Events / Creative) ---- */
.so-room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.so-room-photo {
  display: block;
  color: inherit;
  text-decoration: none;
}
.so-room-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  transition: opacity 0.25s ease;
}
.so-room-photo:hover img {
  opacity: 0.85;
}
.so-room-photo-cap {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone);
}
.so-room-photo:hover .so-room-photo-cap {
  color: var(--color-verm);
}
.so-room-book {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
@media (max-width: 640px) {
  .so-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
  .so-room-photo-cap {
    font-size: 10px;
    margin-top: 7px;
  }
}
@media (max-width: 640px) {
  /* 2 across on phones: keep rows even */
  .so-room-grid > .so-room-photo:nth-child(9) {
    display: none;
  }
}

/* ---- Hero: two photos, tap to switch ---- */
.so-hm-swap {
  width: 100%;
  padding: 0;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.so-hm-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.so-hm-shot.is-on {
  opacity: 1;
}
.so-hm-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}
.so-hm-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease;
}
.so-hm-dots span.is-on {
  background: #fff;
}
.so-hm-swap:focus-visible {
  outline: 2px solid var(--color-jade);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .so-hm-shot {
    transition: none;
  }
}

/* No gold diamond on the hero photo */
.so-hm-plate::after {
  display: none;
}
/* Dots stay visible on light photos too */
.so-hm-dots span {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(23, 19, 27, 0.35);
}
.so-hm-dots span.is-on {
  background: #fff;
  border-color: rgba(23, 19, 27, 0.6);
}

/* Featured Work: a cool dark brown instead of black */
.so-darkframe-section {
  background: #2c2724;
}
.so-darkframe {
  background-color: #2c2724;
  background-image: radial-gradient(120% 90% at 20% 0%, rgba(120, 108, 100, 0.16), rgba(44, 39, 36, 0) 60%),
    linear-gradient(180deg, #2f2a27 0%, #28231f 100%);
  border-top-color: #1d1916;
  border-bottom-color: #1d1916;
}

/* Where people start: three quiet rows under the rooms. */
.so-starts {
  margin-top: clamp(48px, 7vw, 84px);
}
.so-starts-cap {
  color: var(--color-stone);
}
.so-starts .so-notes-list {
  margin-top: 14px;
}
.so-note-row .so-note-f.so-starts-go {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-stone);
}
@media (max-width: 640px) {
  .so-note-row .so-note-f.so-starts-go {
    font-size: 10px;
    margin-top: 6px;
  }
}

/* Featured Work: a quiet filter by kind of business. Text, not pills. */
.so-niche-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 18px;
}
.so-niche {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.45);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.so-niche:hover {
  color: rgba(244, 239, 230, 0.8);
}
.so-niche.is-on {
  color: #f4efe6;
  border-bottom-color: rgba(244, 239, 230, 0.6);
}
.so-niche:focus-visible {
  outline: 1px solid rgba(244, 239, 230, 0.6);
  outline-offset: 3px;
}

/* Form actions: Send and the form toggle get their own room. */
.so-form-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.so-form-submit .so-wiz-full {
  margin-top: 0;
}
.so-form-submit > p.mt-4 {
  margin-top: 4px;
}
/* The finder's "ask for an introduction" lands on the form, clear of the nav. */
#inquiry {
  scroll-margin-top: 84px;
}

/* ============================================================
   BUILD A WORLD (/branding) — one clear path down the page.
   ============================================================ */
.so-bw-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 24px;
}
.so-bw-jump a {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-stone);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3px;
}
.so-bw-jump a:hover {
  color: var(--color-verm);
  border-color: var(--color-verm);
}
.so-bw-sec {
  margin-top: clamp(72px, 10vw, 120px);
  scroll-margin-top: 90px;
}
.so-bw-h {
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.15;
  margin-top: 12px;
  max-width: 22ch;
}
.so-bw-sub {
  margin-top: 8px;
  color: var(--color-print);
}
.so-bw-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--color-verm);
}
.so-bw-t {
  font-weight: 600;
  font-size: 18px;
  margin-top: 10px;
  color: var(--color-ink);
}
.so-bw-d {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-print);
}
.so-bw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  margin-top: 30px;
  border-top: 1px solid var(--color-line);
}
.so-bw-item {
  padding-top: 20px;
}
.so-bw-link {
  display: inline-block;
  margin-top: 12px;
}
.so-bw-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  margin-top: 22px;
  counter-reset: none;
}
.so-bw-steps li {
  border-top: 2px solid var(--color-ink);
  padding-top: 16px;
}
.so-bw-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}
.so-bw-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.so-bw-card-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--color-sepia);
  background: #f6f2ea;
}
.so-bw-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.so-bw-card-w {
  margin-top: 14px;
  color: var(--color-stone);
}
.so-bw-card-c {
  font-weight: 600;
  font-size: 18px;
  margin-top: 6px;
}
.so-bw-card-c .arr {
  color: var(--color-verm);
}
@media (hover: hover) {
  .so-bw-card:hover .so-bw-card-img img {
    transform: scale(1.04);
  }
}
.so-bw-next {
  margin-top: 18px;
  border-bottom: 1px solid var(--color-line);
}
.so-bw-next-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  padding: 16px 0 14px;
  border-top: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
}
.so-bw-next-t {
  font-size: clamp(19px, 2.4vw, 26px);
}
.so-bw-next-t .arr {
  color: var(--color-verm);
  display: inline-block;
  transition: transform 0.2s ease;
}
.so-bw-next-row:hover .so-bw-next-t .arr {
  transform: translateX(4px);
}
.so-bw-next-c {
  color: var(--color-stone);
}
.so-bw-why {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.so-bw-pull {
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.18;
  margin-top: 14px;
  max-width: 20ch;
}
.so-bw-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 18px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-verm);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.so-bw-personal {
  margin-top: 20px;
  display: grid;
  gap: 12px;
  max-width: 58ch;
}
.so-bw-personal p {
  margin: 0;
  line-height: 1.5;
}
.so-bw-cta {
  margin-top: clamp(72px, 10vw, 110px);
  padding: 26px 28px;
  border-radius: 18px;
  background: #131210;
  color: #f5f2ea;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.so-bw-cta-t {
  font-size: clamp(22px, 2.8vw, 32px);
  margin: 0;
  color: #f5f2ea;
  line-height: 1.2;
}
.so-bw-cta-s {
  margin-top: 8px;
  color: rgba(245, 242, 234, 0.7);
}
.so-bw-cta-btn {
  text-decoration: none;
  background: #f5f2ea;
  color: #131210;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .so-bw-grid,
  .so-bw-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 22px;
  }
  .so-bw-grid {
    border-top: 0;
  }
  .so-bw-item {
    border-top: 1px solid var(--color-line);
  }
  .so-bw-why {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .so-bw-grid,
  .so-bw-steps {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .so-bw-work {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .so-bw-cta {
    padding: 22px 20px;
  }
  .so-bw-cta-btn {
    width: 100%;
    text-align: center;
  }
}

/* Build a World — calmer: a list beside its heading, then one quiet timeline. */
.so-bw-inc {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}
.so-bw-inc .so-bw-h {
  font-size: clamp(24px, 2.8vw, 34px);
  max-width: 16ch;
}
.so-bw-list {
  border-bottom: 1px solid var(--color-line);
}
.so-bw-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--color-line);
}
.so-bw-row .so-bw-t,
.so-bw-row .so-bw-d {
  margin: 0;
}
.so-bw-t {
  font-size: 16px;
}
.so-bw-inline {
  color: var(--color-verm);
  text-decoration: none;
  white-space: nowrap;
}
.so-bw-inline:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.so-bw-how {
  padding: 26px 28px 28px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-paper) 90%, #fffaf2);
  border: 1px solid var(--color-line);
}
.so-bw-steps {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 20px;
}
.so-bw-steps::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 11px;
  height: 1px;
  background: var(--color-sepia);
}
.so-bw-steps li {
  position: relative;
  border-top: 0;
  padding-top: 0;
}
.so-bw-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #f5f2ea;
  font-family: var(--font-mono);
  font-size: 10px;
}
.so-bw-steps .so-bw-t {
  margin-top: 12px;
}
.so-bw-steps .so-bw-d {
  margin-top: 4px;
  font-size: 14px;
}
@media (max-width: 960px) {
  .so-bw-inc {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .so-bw-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
  }
  .so-bw-steps::before {
    display: none;
  }
}
@media (max-width: 640px) {
  .so-bw-row {
    grid-template-columns: 1fr;
  }
  .so-bw-how {
    padding: 22px 18px;
  }
  .so-bw-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .so-bw-steps li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 14px;
    padding: 12px 0;
  }
  .so-bw-steps li .so-bw-dot {
    grid-row: 1 / span 2;
  }
  .so-bw-steps li .so-bw-t {
    margin-top: 1px;
  }
  .so-bw-steps li::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 40px;
    bottom: -10px;
    width: 1px;
    background: var(--color-sepia);
  }
  .so-bw-steps li:last-child::after {
    display: none;
  }
}

/* Build a World — the photo takes over, edge to edge. */
.so-bw-hero {
  display: block;
  position: relative;
  width: 100vw;
  margin: 28px calc(50% - 50vw) 0;
  padding: 0;
  border: 0;
  background: #111;
  cursor: pointer;
  overflow: hidden;
}
.so-bw-hero img {
  display: block;
  width: 100%;
  height: min(86vh, 56.25vw);
  min-height: 420px;
  object-fit: cover;
  object-position: 70% 35%;
  transition: filter 0.6s ease;
}
.so-bw-hero img.is-bw {
  filter: grayscale(1) contrast(1.4) brightness(0.86);
}
.so-bw-hero-hint {
  position: absolute;
  right: 20px;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.28);
  padding: 7px 11px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.so-bw-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}
.so-bw-intro-lead {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  max-width: 40ch;
}
@media (max-width: 860px) {
  .so-bw-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
  }
}
@media (max-width: 640px) {
  .so-bw-hero img {
    height: 68svh;
    min-height: 0;
    object-position: 84% 40%;
  }
  .so-bw-hero-hint {
    right: 14px;
    bottom: 14px;
  }
}

/* Logo + Identity — one real picture of the identity in use. */
.so-li-shot {
  display: block;
  margin-top: clamp(32px, 5vw, 56px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-sepia);
  background: #f3efe6;
  text-decoration: none;
  color: inherit;
}
.so-li-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}
.so-li-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-sepia);
  background: color-mix(in srgb, var(--color-paper) 92%, #fffaf2);
}
.so-li-cap .so-micro {
  color: var(--color-stone);
}
.so-li-cap .so-li-cap-go {
  color: var(--color-verm);
}
@media (hover: hover) {
  .so-li-shot:hover img {
    transform: scale(1.015);
  }
}
.so-li-tips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px;
  margin-top: 16px;
}
.so-li-tips .so-bw-t {
  margin: 0;
}
.so-li-work {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#direction {
  scroll-margin-top: 90px;
}
@media (max-width: 760px) {
  .so-li-tips {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .so-li-work {
    grid-template-columns: 1fr;
  }
  #direction {
    padding: 22px 18px !important;
  }
}

/* ============================================================
   ESSENTIAL BROWS — case file
   ============================================================ */
.so-eb-facts {
  display: grid;
  grid-template-columns: 1fr 2fr 1.2fr 0.6fr;
  gap: 16px 28px;
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.so-eb-facts dt {
  color: var(--color-stone);
}
.so-eb-facts dd {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.so-eb-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  margin-top: 18px;
}
.so-eb-before,
.so-eb-now {
  border-radius: 18px;
  padding: 24px 26px;
}
.so-eb-before {
  border: 1px solid var(--color-line);
}
.so-eb-before .so-micro {
  color: var(--color-stone);
}
.so-eb-now {
  background: #1a1917;
  color: #f4efe6;
}
.so-eb-now .so-micro {
  color: rgba(244, 239, 230, 0.6);
}
.so-eb-now .so-bw-d {
  color: rgba(244, 239, 230, 0.78);
}
.so-eb-now-big {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  margin: 12px 0 0;
  color: #f4efe6;
}
.so-eb-kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}
.so-eb-feel {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 10px 26px;
  margin-top: 22px;
  padding: 0;
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-ink);
}
.so-eb-kit-img,
.so-eb-fig {
  margin: 0;
}
.so-eb-kit-img img,
.so-eb-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--color-sepia);
}
.so-eb-kit-img figcaption,
.so-eb-fig figcaption {
  margin-top: 10px;
  color: var(--color-stone);
}
.so-eb-voice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--color-line);
}
.so-eb-voice .so-serif {
  margin: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.3;
}
.so-eb-voice .so-micro {
  margin: 0;
  color: var(--color-stone);
  text-align: right;
}
.so-eb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 22px;
  margin-top: 26px;
}
.so-eb-card-img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-sepia);
  background: #f3f1ed;
}
.so-eb-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.so-eb-card .so-bw-t {
  margin-top: 14px;
}
.so-eb-card .so-bw-n {
  margin-right: 6px;
}
.so-eb-card .so-bw-d {
  margin-top: 4px;
  font-size: 14px;
}
.so-eb-phone {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
.so-eb-quote {
  border-left: 3px solid var(--color-verm);
  padding: 4px 0 4px 26px;
  max-width: 62ch;
}
.so-eb-quote .so-serif {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.45;
  margin: 0;
}
.so-eb-quote .so-micro {
  margin-top: 14px;
  color: var(--color-stone);
}
.so-eb-credit {
  margin-top: 28px;
  color: var(--color-stone);
  line-height: 1.5;
}
@media (max-width: 960px) {
  .so-eb-facts {
    grid-template-columns: 1fr 1fr;
  }
  .so-eb-split,
  .so-eb-kit,
  .so-eb-phone {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .so-eb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .so-eb-facts {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .so-eb-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .so-eb-feel {
    grid-template-columns: repeat(2, auto);
  }
  .so-eb-voice {
    grid-template-columns: 1fr;
  }
  .so-eb-voice .so-micro {
    text-align: left;
  }
  .so-eb-before,
  .so-eb-now {
    padding: 20px;
  }
  .so-li-tips[style] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   JAZMIN'S EVENTS — case file
   ============================================================ */
.so-jz-hero {
  position: relative;
  margin-top: clamp(30px, 5vw, 50px);
  padding: clamp(56px, 9vw, 110px) 24px;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 177, 122, 0.14), transparent 60%),
    #2f4639;
  text-align: center;
  overflow: hidden;
  color: #f6f1e4;
}
.so-jz-mono {
  width: clamp(74px, 9vw, 108px);
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0.95;
}
.so-jz-tag {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.05;
  margin: 28px 0 0;
  color: #f6f1e4;
  font-weight: 400;
}
.so-jz-tag2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 26px);
  margin: 12px 0 0;
  color: #c9b17a;
}
.so-jz-small {
  margin-top: 26px;
  color: rgba(246, 241, 228, 0.6);
}
.so-jz-seal {
  position: absolute;
  right: clamp(14px, 4vw, 48px);
  bottom: clamp(14px, 4vw, 40px);
  width: clamp(64px, 9vw, 110px);
  height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.so-jz-stages {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  position: relative;
}
.so-jz-stages::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 13px;
  height: 1px;
  background: var(--color-sepia);
}
.so-jz-stages li {
  position: relative;
}
.so-jz-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  border: 1px solid var(--color-sepia);
  background: var(--color-paper, #f2ecf2);
}
.is-done .so-jz-dot {
  background: #2f4639;
  border-color: #2f4639;
  color: #f6f1e4;
}
.is-now .so-jz-dot {
  border: 2px solid #c9b17a;
  box-shadow: 0 0 0 4px rgba(201, 177, 122, 0.2);
}
.so-jz-stages .so-bw-t {
  margin-top: 12px;
}
.so-jz-state {
  margin-top: 4px;
  color: var(--color-stone);
}
.is-done .so-jz-state {
  color: #2f4639;
}
.is-now .so-jz-state {
  color: #9a7f43;
}
.so-jz-stages .so-bw-d {
  font-size: 14px;
  margin-top: 6px;
}
.so-jz-stages .so-bw-inline {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
}
.so-jz-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.so-jz-quote {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  margin: 14px 0 0;
  max-width: 18ch;
}
.so-jz-from {
  margin-top: 16px;
  color: var(--color-stone);
}
.so-jz-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.so-jz-sw {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  max-width: 64px;
}
.so-jz-swatches .so-bw-t {
  font-size: 14px;
  margin-top: 8px;
}
.so-jz-swatches .so-micro {
  color: var(--color-stone);
  margin-top: 2px;
}
.so-jz-why {
  margin-top: 22px;
  max-width: 48ch;
}
.so-jz-why strong {
  color: var(--color-ink);
}
.so-jz-type {
  margin-top: 18px;
  border-top: 1px solid var(--color-line);
}
.so-jz-type p {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.so-jz-type .so-micro {
  min-width: 6.5rem;
  color: var(--color-stone);
}
.so-jz-pair {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: start;
}
.so-jz-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
}
.so-jz-sitebtn {
  background: #2f4639;
  color: #f6f1e4;
}
.so-jz-seals {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.so-jz-seals img {
  width: 64px;
  height: auto;
}
.so-jz-seals .so-bw-d {
  margin: 0 0 0 8px;
  max-width: 46ch;
}
.so-jz-process {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.so-jz-process li {
  padding: 8px 14px;
  border: 1px solid var(--color-sepia);
  border-radius: 999px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.35);
}
.so-jz-process .so-bw-n {
  margin-right: 4px;
}
@media (max-width: 960px) {
  .so-jz-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }
  .so-jz-stages::before {
    display: none;
  }
  .so-jz-story,
  .so-jz-pair {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 640px) {
  .so-jz-stages {
    grid-template-columns: 1fr;
  }
  .so-jz-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .so-jz-seal {
    width: 58px;
  }
  .so-jz-head .so-jz-sitebtn {
    width: 100%;
    text-align: center;
  }
}

/* The one-line statement of what Sunday Office is. */
.so-build-statement {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--color-ink);
  max-width: 44ch;
}

/* Build a World — "then bring it to life" folded into the closing box. */
.so-bw-cta-full {
  display: block;
}
.so-bw-cta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.so-bw-cta-next {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 242, 234, 0.16);
}
.so-bw-cta-next .so-micro {
  color: rgba(245, 242, 234, 0.55);
}
.so-bw-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
}
.so-bw-cta-links a {
  color: #f5f2ea;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(245, 242, 234, 0.28);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.so-bw-cta-links a:hover {
  background: #f5f2ea;
  color: #131210;
}

/* Build a World — the moving picture (homepage card + page hero). */
.so-path-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) {
  .so-path-lead:hover .so-path-media video {
    transform: scale(1.04);
  }
}
.so-bw-hero {
  cursor: default;
}
.so-bw-hero video {
  display: block;
  width: 100%;
  height: min(86vh, 56.25vw);
  min-height: 420px;
  object-fit: cover;
  object-position: 70% 35%;
}
@media (max-width: 640px) {
  .so-bw-hero video {
    height: 68svh;
    min-height: 0;
    object-position: 84% 40%;
  }
}

/* ============================================================
   SERVICE STEPS — tap a step, it lifts into its own tinted box
   ============================================================ */
.so-steps-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.so-steps-hint {
  color: var(--color-stone);
}
.so-steps-row {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}
.so-step {
  appearance: none;
  width: 100%;
  height: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.so-step:hover {
  background: rgba(255, 255, 255, 0.35);
}
.so-step.is-on {
  background: #fbf6ee;
  border-color: var(--color-sepia);
  box-shadow: 0 10px 24px -16px rgba(40, 20, 50, 0.35);
  transform: translateY(-3px);
}
.so-step-dot {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid var(--color-sepia);
  color: var(--color-stone);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.so-step.is-past .so-step-dot {
  background: var(--color-sepia);
  color: var(--color-ink);
}
.so-step.is-on .so-step-dot {
  background: var(--color-verm);
  border-color: var(--color-verm);
  color: #fff;
}
.so-step-t {
  font-weight: 600;
  font-size: 16px;
  margin-top: 6px;
  color: var(--color-ink);
}
.so-step-d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-print);
}
.so-step-more {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #1a1917;
  color: #f4efe6;
}
.so-step-more .so-micro {
  color: rgba(244, 239, 230, 0.55);
}
.so-step-more p {
  margin: 8px 0 0;
  line-height: 1.5;
  max-width: 64ch;
  color: rgba(244, 239, 230, 0.9);
}
.so-step-next {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-top: 12px;
  font: inherit;
  font-size: 14px;
  color: #e4c9a0;
  cursor: pointer;
}
.so-step-next:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .so-steps-row {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
  .so-step {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px;
  }
  .so-step-dot {
    grid-row: 1 / span 2;
  }
  .so-step-t {
    margin-top: 2px;
  }
  .so-step.is-on {
    transform: none;
  }
}

/* Photography room directory */
.so-ph-rooms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.so-ph-room {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.so-ph-room-img {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--color-sepia);
}
.so-ph-room-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.so-ph-room:hover .so-ph-room-img img {
  transform: scale(1.04);
}
.so-ph-room .so-bw-t {
  margin-top: 12px;
}
.so-ph-room .so-bw-t .arr {
  color: var(--color-verm);
}
.so-ph-room .so-micro {
  color: var(--color-stone);
  margin-top: 4px;
  line-height: 1.5;
}
.so-ph-hs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.so-ph-hs-faces {
  display: flex;
  gap: 10px;
}
.so-ph-hs-faces img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-sepia);
}
/* Moving image — the feature film */
.so-mi-film {
  margin: clamp(30px, 5vw, 50px) 0 0;
}
.so-mi-film video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #111;
  border: 1px solid var(--color-sepia);
}
.so-mi-film figcaption {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
}
.so-mi-film figcaption .so-micro {
  color: var(--color-stone);
}
.so-mi-film figcaption a {
  color: var(--color-verm);
  text-decoration: none;
}
/* Creative direction — numbers row */
.so-cd-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}
.so-cd-proof div {
  min-width: 110px;
}
.so-cd-proof b {
  display: block;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #55286f;
}
.so-cd-proof span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone);
}
.so-cd-note {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--color-sepia);
  border-radius: 18px;
  background: #fbf6ee;
  padding: 24px 26px;
  transition: border-color 0.2s ease;
}
.so-cd-note:hover {
  border-color: var(--color-verm);
}
.so-cd-note .so-serif {
  display: block;
  font-size: clamp(22px, 3vw, 30px);
  margin-top: 10px;
  line-height: 1.2;
}
.so-cd-note .so-bw-d {
  display: block;
  max-width: 60ch;
}
.so-cd-note .so-micro {
  display: block;
}
.so-cd-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 20px;
}
.so-cd-two > div {
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 22px 24px;
}
.so-cd-two .so-bw-t {
  margin: 0;
  font-size: 18px;
}
.so-cd-two ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.so-cd-two li {
  padding: 9px 0;
  border-top: 1px solid var(--color-line);
  font-size: 15px;
  color: var(--color-print);
}
@media (max-width: 900px) {
  .so-ph-rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .so-cd-two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .so-bw-work[style] {
    grid-template-columns: 1fr !important;
  }
}

.so-eb-card-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Steps — calmer: equal boxes, no lift, no focus ring on tap. */
.so-step {
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.22);
}
.so-step:hover {
  border-color: var(--color-sepia);
  background: rgba(255, 255, 255, 0.4);
}
.so-step.is-on {
  background: #fbf6ee;
  border-color: var(--color-sepia);
  box-shadow: none;
  transform: none;
}
.so-step:focus {
  outline: none;
}
.so-step:focus-visible {
  outline: 2px solid var(--color-verm);
  outline-offset: 2px;
}
.so-step-t {
  margin-top: 8px;
}
.so-step-more {
  background: #fbf6ee;
  color: var(--color-ink);
  border: 1px solid var(--color-sepia);
}
.so-step-more .so-micro {
  color: var(--color-verm);
}
.so-step-more p {
  color: var(--color-print);
}
.so-step-next {
  color: var(--color-verm);
  font-weight: 600;
}

/* Pricing */
.so-prices {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}
.so-price {
  position: relative;
  border: 1px solid var(--color-sepia);
  border-radius: 16px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.3);
}
.so-price .so-bw-t {
  margin: 0;
}
.so-price-p {
  margin: 10px 0 0;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #55286f;
  font-variant-numeric: tabular-nums;
}
.so-price .so-bw-d {
  font-size: 14.5px;
}
.so-price-tag {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--color-verm);
}
.so-price-foot {
  margin-top: 16px;
  max-width: 64ch;
}
@media (max-width: 760px) {
  .so-prices {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   TAP STORY — tabs on the side, one paragraph at a time
   ============================================================ */
.so-tap {
  display: grid;
  grid-template-columns: minmax(200px, 0.75fr) minmax(0, 2fr);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #2a2724;
  background: #1a1917;
  color: #f4efe6;
  min-height: 380px;
}
.so-tap-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 18px;
  border-right: 1px solid rgba(244, 239, 230, 0.1);
  background: #211f1c;
}
.so-tap-label {
  color: rgba(244, 239, 230, 0.45);
  margin: 0 8px 14px;
}
.so-tap-tab {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: rgba(244, 239, 230, 0.55);
  font-size: 15px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: baseline;
  transition: background 0.25s ease, color 0.25s ease;
}
.so-tap-tab:hover {
  color: #f4efe6;
  background: rgba(244, 239, 230, 0.05);
}
.so-tap-tab.is-on {
  color: #1a1917;
  background: #f4efe6;
}
.so-tap-no {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.so-tap-tab.is-on .so-tap-no {
  color: var(--color-verm);
  opacity: 1;
}
.so-tap-tab:focus {
  outline: none;
}
.so-tap-tab:focus-visible {
  outline: 2px solid #e4c9a0;
  outline-offset: 2px;
}
.so-tap-body {
  appearance: none;
  border: 0;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(201, 120, 140, 0.12), transparent 60%),
    transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.so-tap-body:focus {
  outline: none;
}
.so-tap-inner {
  display: block;
}
.so-tap-count {
  display: block;
  color: rgba(244, 239, 230, 0.4);
}
.so-tap-head {
  display: block;
  margin-top: 16px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 22ch;
  color: #f4efe6;
}
.so-tap-text {
  display: block;
  margin-top: 16px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  max-width: 58ch;
  color: rgba(244, 239, 230, 0.78);
}
.so-tap-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(244, 239, 230, 0.1);
}
.so-tap-dots {
  display: flex;
  gap: 6px;
}
.so-tap-dots span {
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: rgba(244, 239, 230, 0.18);
  transition: background 0.3s ease, width 0.3s ease;
}
.so-tap-dots span.is-on {
  width: 34px;
  background: #e4c9a0;
}
.so-tap-next {
  color: #e4c9a0;
}
@media (max-width: 760px) {
  .so-tap {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .so-tap-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 239, 230, 0.1);
    scrollbar-width: none;
  }
  .so-tap-tabs::-webkit-scrollbar {
    display: none;
  }
  .so-tap-label {
    display: none;
  }
  .so-tap-tab {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 8px 12px;
    white-space: nowrap;
  }
  .so-tap-body {
    padding: 24px 20px;
  }
}

/* Websites showcase — browser frame with the phone beside it */
.so-web-show {
  position: relative;
  margin-top: clamp(34px, 5vw, 56px);
  padding-bottom: clamp(40px, 7vw, 90px);
}
.so-web-browser {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-sepia);
  background: #f6f4f1;
  box-shadow: 0 30px 60px -40px rgba(40, 20, 50, 0.45);
  text-decoration: none;
  width: 88%;
}
.so-web-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #ece8e3;
  border-bottom: 1px solid #ddd7cf;
}
.so-web-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d3ccc3;
}
.so-web-url {
  margin-left: 12px;
  flex: 1;
  max-width: 340px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8a837a;
  background: #f6f4f1;
  border-radius: 999px;
  padding: 4px 12px;
}
.so-web-browser img {
  display: block;
  width: 100%;
  height: auto;
}
.so-web-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-sepia);
  background: #f6f4f1;
  box-shadow: 0 30px 60px -30px rgba(40, 20, 50, 0.5);
}
.so-web-phone img {
  display: block;
  width: 100%;
  height: auto;
}
.so-web-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 14px;
}
.so-web-cap .so-micro {
  color: var(--color-stone);
}
.so-web-cap a {
  color: var(--color-verm);
  text-decoration: none;
}
@media (max-width: 760px) {
  .so-web-show {
    padding-bottom: 0;
  }
  .so-web-browser {
    width: 100%;
  }
  .so-web-phone {
    position: relative;
    width: 100%;
    margin-top: 14px;
  }
}

/* Homepage "Build your world" — one size for all three paragraphs. */
.so-build-head .so-about-copy,
.so-build-head .so-build-statement {
  font-size: clamp(17px, 1.45vw, 19px);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--color-ink);
}
.so-build-head .so-about-copy + .so-about-copy {
  margin-top: 14px !important;
}
@media (max-width: 640px) {
  .so-build-head .so-about-copy,
  .so-build-head .so-build-statement {
    font-size: 16.5px;
  }
}

/* Service page tops — more air between title, intro and the showcase. */
.so-bw-intro {
  margin-top: clamp(28px, 3.5vw, 44px) !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  column-gap: clamp(40px, 7vw, 120px);
  row-gap: 24px;
}
.so-bw-intro > div {
  max-width: 38ch;
  padding-top: 6px;
}
.so-bw-intro .so-bw-d {
  line-height: 1.5;
}
.so-bw-jump {
  margin-top: 30px;
  gap: 12px 26px;
}
.so-web-show,
.so-li-shot,
.so-mi-film {
  margin-top: clamp(56px, 8vw, 104px) !important;
}
.so-bw-sec {
  margin-top: clamp(88px, 11vw, 140px);
}
@media (max-width: 860px) {
  .so-bw-intro {
    grid-template-columns: 1fr;
  }
  .so-bw-intro > div {
    max-width: none;
    padding-top: 0;
  }
}
.so-bw-intro > div {
  max-width: 44ch;
}
.so-bw-jump {
  gap: 12px 22px;
}

/* Hero photo: no outline after a tap, only for keyboard focus. */
.so-hm-swap:focus {
  outline: none;
}
.so-hm-swap:focus-visible {
  outline: 2px solid var(--color-verm);
  outline-offset: 3px;
}

/* Homepage — three starting points, as equal cards */
.so-starts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.so-start-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 24px 24px 22px;
  background: rgba(255, 255, 255, 0.28);
}
.so-start-no {
  color: var(--color-verm);
}
.so-start-p {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.so-start-d {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-print);
  flex: 1;
}
.so-start-label {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  color: var(--color-stone);
}
.so-start-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin-top: 10px;
}
.so-start-step {
  display: inline-flex;
  align-items: center;
}
.so-start-plus {
  margin: 0 8px;
  color: var(--color-stone);
  font-size: 13px;
}
.so-start-path a {
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--color-sepia);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.so-start-path a:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #f5f2ea;
}
@media (max-width: 860px) {
  .so-starts-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .so-start-path a {
    font-size: 13px;
    padding: 6px 10px;
  }
  .so-start-plus {
    margin: 0 5px;
  }
}

/* Nine Vicious × Custom Grillz */
.so-gg-hero {
  display: block;
  width: 100%;
  margin-top: clamp(40px, 6vw, 72px);
  padding: 0;
  border: 0;
  background: #111;
  border-radius: 18px;
  overflow: hidden;
  cursor: zoom-in;
}
.so-gg-hero img {
  display: block;
  width: 100%;
  height: min(78vh, 760px);
  object-fit: cover;
  object-position: center 40%;
}
.so-gg-cred {
  margin-top: 10px;
  color: var(--color-stone);
}
.so-gg-results {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.9fr;
  gap: 16px;
  margin-top: 18px;
}
.so-gg-res {
  border: 1px solid var(--color-sepia);
  border-radius: 18px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.28);
}
.so-gg-res.is-main {
  background: #1a1917;
  border-color: #1a1917;
  color: #f4efe6;
}
.so-gg-res .so-micro {
  color: var(--color-stone);
}
.so-gg-res.is-main .so-micro {
  color: rgba(244, 239, 230, 0.6);
}
.so-gg-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 14px;
}
.so-gg-nums b {
  display: block;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #55286f;
}
.so-gg-res.is-main .so-gg-nums b {
  color: #f4efe6;
}
.so-gg-nums span {
  font-size: 13px;
  color: var(--color-stone);
}
.so-gg-res.is-main .so-gg-nums span {
  color: rgba(244, 239, 230, 0.6);
}
.so-gg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.so-gg-cell {
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  background: #111;
}
.so-gg-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.so-gg-cell:hover img {
  transform: scale(1.03);
}
.so-gg-links {
  display: flex;
  gap: 22px;
  margin-top: 16px;
}
@media (max-width: 860px) {
  .so-gg-results {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .so-gg-hero img {
    height: auto;
    aspect-ratio: 1;
  }
  .so-gg-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Angie Tiara */
.so-at-feel {
  margin-top: clamp(48px, 7vw, 80px);
  padding: 26px 28px;
  border-radius: 20px;
  background: #fbf6ee;
  border: 1px solid var(--color-sepia);
}
.so-at-feel .so-micro,
.so-at-use .so-micro {
  color: var(--color-stone);
}
.so-at-feel-t {
  margin: 10px 0 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 36ch;
}
.so-at-use {
  margin-top: clamp(48px, 7vw, 80px);
  max-width: 62ch;
}
.so-at-use-t {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-ink);
}

/* Essential Brows — one feature at a time */
.so-fv {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
  gap: 22px;
  margin-top: 24px;
  align-items: start;
}
.so-fv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.so-fv-item {
  appearance: none;
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-align: left;
  font: inherit;
  font-size: 15px;
  color: var(--color-print);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 12px 6px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.so-fv-item:hover {
  color: var(--color-ink);
}
.so-fv-item.is-on {
  color: var(--color-ink);
  font-weight: 600;
  background: #fbf6ee;
}
.so-fv-item:focus {
  outline: none;
}
.so-fv-item:focus-visible {
  outline: 2px solid var(--color-verm);
  outline-offset: -2px;
}
.so-fv-no {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-stone);
}
.so-fv-item.is-on .so-fv-no {
  color: var(--color-verm);
}
.so-fv-screen {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-sepia);
  background: #f3f1ed;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 60px -44px rgba(40, 20, 50, 0.5);
  animation: so-fadein 0.35s ease both;
}
.so-fv-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.so-fv-cap {
  margin-top: 16px;
}
.so-fv-cap .so-bw-t {
  margin: 0;
  font-size: 18px;
}
.so-fv-next {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-top: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-verm);
  cursor: pointer;
}
@media (max-width: 860px) {
  .so-fv {
    grid-template-columns: 1fr;
  }
  .so-fv-list {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    border-top: 0;
    padding-bottom: 4px;
    scrollbar-width: none;
    order: 2;
  }
  .so-fv-list::-webkit-scrollbar {
    display: none;
  }
  .so-fv-item {
    white-space: nowrap;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13.5px;
  }
  .so-fv-stage {
    order: 1;
  }
}

/* Public House — small note about the night, under the shoot copy */
.so-ph-note {
  justify-self: end;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
}
.so-ph-note img {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--color-sepia);
}
.so-ph-note .so-micro {
  margin-top: 10px;
  color: var(--color-stone);
  line-height: 1.5;
}
@media (max-width: 860px) {
  .so-ph-note {
    max-width: 220px;
    margin-left: 0;
  }
}

/* Starting points — tinted, tappable cards */
.so-start-card {
  --tint: #f6e4e7;
  --ink-tint: #9c3b4f;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.so-start-card:hover,
.so-start-card.is-on {
  background: var(--tint);
  border-color: color-mix(in srgb, var(--ink-tint) 35%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -24px rgba(40, 20, 50, 0.35);
}
.so-start-card.is-dim {
  opacity: 0.6;
}
.so-start-card:focus {
  outline: none;
}
.so-start-card:focus-visible {
  outline: 2px solid var(--ink-tint);
  outline-offset: 3px;
}
.so-start-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.so-start-card .so-start-no {
  color: var(--ink-tint);
}
.so-start-check {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-sepia);
  font-size: 15px;
  color: var(--color-stone);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.so-start-card:hover .so-start-check {
  transform: rotate(90deg);
  border-color: var(--ink-tint);
  color: var(--ink-tint);
}
.so-start-card.is-on .so-start-check {
  transform: none;
  background: var(--ink-tint);
  border-color: var(--ink-tint);
  color: #fff;
}
.so-start-d {
  min-height: 3.2em;
}
.so-start-path {
  gap: 8px;
}
.so-start-path a {
  font-size: 13.5px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.55);
}
.so-start-card:hover .so-start-path a,
.so-start-card.is-on .so-start-path a {
  border-color: color-mix(in srgb, var(--ink-tint) 40%, transparent);
}
.so-start-path a:hover {
  background: var(--ink-tint);
  border-color: var(--ink-tint);
  color: #fff;
}
.so-start-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ink-tint) 40%, transparent);
}
.so-start-go a {
  font-size: 14px;
  color: var(--ink-tint);
  text-decoration: none;
}
.so-start-go a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.so-start-go .so-start-go-main {
  background: var(--ink-tint);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.so-start-go .so-start-go-main:hover {
  text-decoration: none;
  filter: brightness(1.08);
}
@media (hover: none) {
  .so-start-card:hover:not(.is-on) {
    background: rgba(255, 255, 255, 0.28);
    transform: none;
    box-shadow: none;
  }
}

/* Homepage lead card, text only (no photo) */
.so-path-lead.is-text {
  align-self: start;
  background: #f6e4e7;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: clamp(24px, 3.4vw, 40px);
  transition: background 0.25s ease, transform 0.25s ease;
}
.so-path-lead.is-text .so-path-body {
  padding-top: 0;
}
.so-path-start.so-path-start-inline {
  position: static;
  align-self: flex-start;
  margin-bottom: 18px;
}
@media (hover: hover) {
  .so-path-lead.is-text:hover {
    background: #f1dade;
    transform: translateY(-2px);
  }
}

.so-gg-pfp {
  margin-top: 10px;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* Lead line: solid and readable on the cream card */
.so-path-lead.is-text .so-path-lead-line {
  color: var(--color-ink);
  text-shadow: none;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(17px, 1.7vw, 20px);
}

/* Calmer "Build your world" block: lead card fills the column, fewer labels */
.so-path {
  align-items: stretch;
}
.so-path-lead.is-text {
  align-self: stretch;
  padding: clamp(28px, 4vw, 52px);
}
.so-path-lead.is-text .so-path-body {
  flex: 1;
}
.so-path-lead.is-text .so-path-title {
  font-size: clamp(34px, 4.4vw, 58px);
  margin-top: auto;
}
.so-path-lead.is-text .so-path-cta {
  margin-top: 28px;
}
.so-path-room .so-room-title .arr {
  display: inline-block;
  opacity: 0.35;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) {
  .so-path-room:hover .so-room-title .arr {
    opacity: 1;
    transform: translateX(4px);
  }
}
.so-start-card .so-start-path {
  margin-top: auto;
  padding-top: 18px;
}
@media (max-width: 860px) {
  .so-path-lead.is-text .so-path-title {
    margin-top: 0;
  }
}

.so-note-row.is-ext .so-note-u {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Proof rows: arrow sits right after the title */
.so-note-row {
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
}
.so-note-p .so-note-arr {
  display: inline-block;
  margin-left: 4px;
  grid-column: auto;
  grid-row: auto;
}
@media (max-width: 640px) {
  .so-note-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Featured work: back / forward buttons */
.so-gallery-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.so-gallery-bar .so-niche-row {
  margin: 0;
}
.so-gallery-nav {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex: none;
}
.so-gallery-btn {
  appearance: none;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: #f4efe6;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .so-gallery-btn:hover:not(:disabled) {
    opacity: 1;
    background: #f6e4e7;
    color: #9c3b4f;
    border-color: #f6e4e7;
  }
}
.so-gallery-btn:active:not(:disabled) {
  transform: scale(0.94);
}
.so-gallery-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.so-gallery-scroll:focus-visible {
  outline: 2px solid #f6e4e7;
  outline-offset: 4px;
}
@media (max-width: 640px) {
  .so-gallery-bar {
    align-items: flex-start;
  }
  .so-gallery-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* Work cards: image, label, name and note line up across every card */
@supports (grid-template-rows: subgrid) {
  .so-bw-work {
    grid-auto-rows: auto;
  }
  .so-bw-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  .so-bw-card > .so-bw-card-w {
    align-self: start;
  }
  .so-bw-card > .so-bw-card-c {
    align-self: start;
  }
  .so-bw-card > .so-bw-d {
    align-self: start;
  }
}
.so-bw-card-w {
  line-height: 1.5;
}

/* Packages */
.so-pk-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
}
.so-pk-lead {
  color: var(--color-print);
  font-size: 16px;
  line-height: 1.5;
  max-width: 48ch;
}
.so-pk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}
.so-pk-card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.so-pk-card.is-feat {
  background: #f6e4e7;
  border-color: rgba(156, 59, 79, 0.3);
}
.so-pk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.so-pk-name {
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.so-pk-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: #9c3b4f;
  padding: 5px 9px 4px;
  border-radius: 999px;
  white-space: nowrap;
}
.so-pk-who {
  margin-top: 8px;
  color: var(--color-print);
  font-size: 14.5px;
  line-height: 1.5;
  min-height: 3em;
}
.so-pk-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 9px;
}
.so-pk-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-ink);
}
.so-pk-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9c3b4f;
  opacity: 0.55;
}
.so-pk-foot {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.so-pk-foot .so-micro {
  color: var(--color-stone);
}
.so-pk-go {
  font-weight: 600;
  font-size: 14px;
  color: #9c3b4f;
}
.so-pk-go .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .so-pk-card:hover {
    background: #f6e4e7;
    border-color: rgba(156, 59, 79, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -24px rgba(40, 20, 50, 0.35);
  }
  .so-pk-card:hover .so-pk-go .arr {
    transform: translateX(4px);
  }
}
.so-pk-alc {
  margin-top: 22px;
  color: var(--color-print);
  font-size: 15px;
}
@media (max-width: 1080px) {
  .so-pk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .so-pk-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .so-pk-grid {
    grid-template-columns: 1fr;
  }
  .so-pk-who {
    min-height: 0;
  }
}
@supports (grid-template-rows: subgrid) {
  .so-pk-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .so-pk-who {
    min-height: 0;
  }
  .so-pk-list {
    align-content: start;
  }
  .so-pk-foot {
    align-self: end;
  }
}

/* =====================================================================
   SUNDAY OFFICE · v2 "after hours"
   Deep aubergine, lilac paper, silver type, an editorial serif.
   ===================================================================== */
:root {
  --sx-night: #170b1c;
  --sx-aub: #1f0f26;
  --sx-plum: #3a1846;
  --sx-violet: #5b2a73;
  --sx-orchid: #c9a3dc;
  --sx-lilac: #efe3f5;
  --sx-silver: #c8bfd0;
  --sx-mist: rgba(239, 227, 245, 0.62);
  --sx-hair: rgba(239, 227, 245, 0.14);
}

/* Editorial serif for every headline */
.so-serif,
.so-build-title,
.so-path-title,
.so-pk-name,
.so-room-title,
.so-start-p,
.so-proof-title,
.so-darkframe-title,
.so-hx-title,
.so-footer-wordmark,
.so-note-p,
.so-bw-card-c,
.so-path-room .so-room-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em {
  font-style: italic;
  font-weight: 400;
  color: var(--sx-violet);
}
.so-section {
  padding-block: clamp(64px, 9vw, 128px);
}

/* ---------- Hero ---------- */
.so-hero.so-hero-v2 {
  min-height: 100dvh;
  text-align: left;
  color: var(--sx-lilac);
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(91, 42, 115, 0.55), rgba(31, 15, 38, 0) 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(58, 24, 70, 0.7), rgba(31, 15, 38, 0) 70%),
    var(--sx-aub);
  padding-block: clamp(88px, 12vh, 130px) clamp(56px, 8vh, 96px);
  border-bottom: 0;
}
.so-hero-v2 .so-shell.so-hx {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.so-hx-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.so-hx-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sx-silver);
}
.so-hx-title {
  margin-top: clamp(18px, 3vh, 30px);
  font-size: clamp(72px, 11.5vw, 184px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: #fbf6fd;
}
.so-hx-line {
  display: block;
  white-space: nowrap;
}
.so-hx-line + .so-hx-line {
  font-style: italic;
  font-weight: 400;
  color: var(--sx-orchid);
  padding-left: 0.42em;
}
.so-hx-tag {
  margin-top: clamp(22px, 3.4vh, 34px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 34px);
  color: #fbf6fd;
}
.so-hx-sub {
  margin-top: 12px;
  max-width: 40ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--sx-mist);
}
.so-hx-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: clamp(26px, 4vh, 40px);
}
.so-hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--sx-lilac);
  color: var(--sx-aub);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.so-hx-btn:hover {
  background: #fff;
  transform: translateY(-2px);
}
.so-hx-link {
  color: var(--sx-lilac);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: rgba(239, 227, 245, 0.4);
}
.so-hx-link:hover {
  text-decoration-color: var(--sx-lilac);
}
.so-hx-photo {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 520px;
  justify-self: end;
}
.so-hx-photo .so-hm-plate {
  aspect-ratio: 4 / 5;
  width: 100%;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(239, 227, 245, 0.08);
  cursor: pointer;
}
.so-hx-photo .so-hm-plate::before {
  inset: 14px;
  border: 1px solid rgba(239, 227, 245, 0.22);
  z-index: 2;
}
.so-hx-photo .so-hm-shot {
  object-position: center 35%;
}
.so-hx-cap {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sx-silver);
}
@media (max-width: 900px) {
  .so-hero.so-hero-v2 {
    min-height: auto;
    padding-block: 64px 48px;
  }
  .so-hero-v2 .so-shell.so-hx {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .so-hx-title {
    font-size: clamp(64px, 21vw, 120px);
  }
  .so-hx-photo {
    max-width: none;
    justify-self: stretch;
  }
  .so-hx-photo .so-hm-plate {
    aspect-ratio: 4 / 4.6;
  }
}

/* ---------- Build your world ---------- */
.so-build-title {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.so-path-lead.is-text {
  background: var(--sx-aub);
  border-color: transparent;
  color: var(--sx-lilac);
}
.so-path-lead.is-text .so-path-title {
  color: #fbf6fd;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 0.98;
}
.so-path-lead.is-text .so-path-lead-line {
  color: var(--sx-orchid);
  font-family: var(--font-display);
  font-weight: 400;
}
.so-path-lead.is-text .so-room-desc {
  color: var(--sx-mist);
}
.so-path-lead.is-text .so-path-cta {
  background: var(--sx-lilac);
  color: var(--sx-aub);
}
.so-path-lead.is-text .so-path-start {
  background: transparent;
  color: var(--sx-orchid);
  border: 1px solid rgba(201, 163, 220, 0.5);
}
@media (hover: hover) {
  .so-path-lead.is-text:hover {
    background: var(--sx-plum);
  }
}
.so-path-room .so-room-title {
  font-size: clamp(20px, 1.8vw, 26px);
}
.so-start-p {
  font-size: 26px;
}

/* ---------- Featured work ---------- */
.so-darkframe-section,
.so-darkframe {
  background: var(--sx-night);
  background-image:
    radial-gradient(80% 60% at 15% 0%, rgba(91, 42, 115, 0.35), rgba(23, 11, 28, 0) 60%);
  border-color: #000;
}
.so-darkframe-title {
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.95;
  text-shadow: none;
  color: #fbf6fd;
}
.so-darkframe-title em {
  color: var(--sx-orchid);
}
.so-darkframe .so-micro,
.so-darkframe .so-lab {
  text-shadow: none;
}

/* ---------- Proof ---------- */
.so-proof-title {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.so-note-row {
  padding: 26px 0;
}
.so-note-p {
  font-size: clamp(20px, 1.8vw, 26px);
}
.so-note-f {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--sx-violet);
  line-height: 1;
}
.so-note-f .so-note-u {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-left: 4px;
}
.so-note-row.is-ext .so-note-f {
  font-size: 15px;
  font-family: var(--font-sans);
}
.so-note-row.is-ext .so-note-u {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}

/* ---------- Packages: after hours ---------- */
.so-section.so-pk-section {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(91, 42, 115, 0.45), rgba(31, 15, 38, 0) 60%),
    var(--sx-aub);
  color: var(--sx-lilac);
  border-bottom: 0;
}
.so-pk-section .so-micro {
  color: var(--sx-silver);
}
.so-pk-section .so-rule {
  border-color: var(--sx-hair);
  background: var(--sx-hair);
}
.so-pk-section .so-serif {
  color: #fbf6fd;
  font-size: clamp(44px, 6vw, 96px) !important;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.so-pk-section .so-serif em {
  color: var(--sx-orchid);
}
.so-pk-lead,
.so-pk-alc {
  color: var(--sx-mist);
}
.so-pk-alc .so-bw-inline {
  color: var(--sx-orchid);
}
.so-pk-card {
  background: rgba(239, 227, 245, 0.035);
  border-color: var(--sx-hair);
  color: var(--sx-lilac);
  border-radius: 8px;
  padding: 30px 26px 24px;
}
.so-pk-name {
  color: #fbf6fd;
  font-size: 28px;
}
.so-pk-who {
  color: var(--sx-mist);
}
.so-pk-list {
  border-top-color: var(--sx-hair);
}
.so-pk-list li {
  color: var(--sx-lilac);
}
.so-pk-list li::before {
  background: var(--sx-orchid);
  opacity: 0.9;
}
.so-pk-foot .so-micro {
  color: var(--sx-silver);
}
.so-pk-go {
  color: var(--sx-orchid);
}
.so-pk-tag {
  background: var(--sx-aub);
  color: var(--sx-lilac);
}
.so-pk-card.is-feat {
  background: var(--sx-lilac);
  border-color: var(--sx-lilac);
  color: var(--sx-aub);
}
.so-pk-card.is-feat .so-pk-name {
  color: var(--sx-aub);
}
.so-pk-card.is-feat .so-pk-who,
.so-pk-card.is-feat .so-pk-foot .so-micro {
  color: #6e5c78;
}
.so-pk-card.is-feat .so-pk-list {
  border-top-color: rgba(31, 15, 38, 0.14);
}
.so-pk-card.is-feat .so-pk-list li {
  color: var(--sx-aub);
}
.so-pk-card.is-feat .so-pk-list li::before {
  background: var(--sx-violet);
}
.so-pk-card.is-feat .so-pk-go {
  color: var(--sx-violet);
}
@media (hover: hover) {
  .so-pk-card:hover {
    background: rgba(239, 227, 245, 0.08);
    border-color: rgba(201, 163, 220, 0.45);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  }
  .so-pk-card.is-feat:hover {
    background: #fff;
    border-color: #fff;
  }
}

/* ---------- Meet Hana + Start ---------- */
#about-hana .so-serif {
  line-height: 0.95;
}
.so-start-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}
.so-start-head .so-serif {
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.so-start-side p:first-child {
  color: var(--color-print);
  font-size: 16px;
  line-height: 1.5;
  max-width: 44ch;
}
.so-start-side .so-micro {
  margin-top: 14px;
  color: var(--sx-violet);
}
@media (max-width: 760px) {
  .so-start-head {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */
.so-footer {
  background: var(--sx-night);
}
.so-footer-wordmark {
  color: #fbf6fd;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.02em;
  font-style: italic;
  font-weight: 400;
}

/* ---------- Nav: after hours ---------- */
.so-nav {
  background: rgba(23, 11, 28, 0.9);
  border-bottom-color: rgba(239, 227, 245, 0.1);
  color: var(--sx-lilac);
}
.so-nav.is-scrolled {
  border-bottom-color: rgba(239, 227, 245, 0.12);
}
.so-nav .so-brandlock,
.so-nav .so-nav-link,
.so-nav .so-nav-burger {
  color: var(--sx-lilac);
}
.so-nav .so-brandlock svg {
  color: var(--sx-lilac);
}
.so-nav .so-nav-link {
  font-size: 12.5px;
}
.so-nav .so-nav-link:hover {
  color: var(--sx-orchid);
}
.so-nav .so-nav-link.cta {
  background: var(--sx-lilac);
  color: var(--sx-aub);
}
.so-nav .so-nav-link.cta:hover {
  background: #fff;
  color: var(--sx-aub);
}

/* ---------- Packages card top ---------- */
.so-pk-top {
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}
.so-pk-name {
  font-size: clamp(24px, 2vw, 28px);
}

/* ---------- The inquiry ---------- */
.so-office-card {
  background: #fbf7fd;
  border: 1px solid rgba(91, 42, 115, 0.14);
  border-radius: 10px;
  outline: 0;
  box-shadow: 0 40px 80px -48px rgba(31, 15, 38, 0.45);
}
.so-office-card::before,
.so-office-card::after {
  display: none;
}
.so-office-card .eyebrow-cap {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sx-aub);
}
.so-field label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--sx-violet);
}
.so-field input,
.so-field textarea,
.so-field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(31, 15, 38, 0.22);
  border-radius: 0;
  padding: 12px 2px;
  font-size: 16px;
}
.so-field textarea {
  border: 1px solid rgba(31, 15, 38, 0.18);
  border-radius: 6px;
  padding: 14px;
  min-height: 130px;
}
.so-field input:focus,
.so-field textarea:focus,
.so-field select:focus {
  border-color: var(--sx-violet);
  box-shadow: none;
}
.so-form .so-btn:not(.so-btn-ghost) {
  background: var(--sx-aub);
  color: var(--sx-lilac);
  padding: 16px 30px;
  font-size: 13px;
}
.so-form .so-btn:not(.so-btn-ghost):hover {
  background: var(--sx-plum);
}
@media (max-width: 640px) {
  .so-hx-kicker {
    letter-spacing: 0.2em;
    font-size: 10px;
  }
}
.so-nav {
  --so-nav-ink: var(--sx-lilac);
}
.so-profile-body .lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 2.6vw, 38px);
  color: var(--sx-aub);
}

/* ---------- Hero v3: back on the paper, bigger and bolder ---------- */
.so-hero.so-hero-v2 {
  background: transparent;
  color: var(--color-ink);
  text-align: center;
  min-height: auto;
  padding-block: clamp(72px, 11vh, 120px) clamp(48px, 7vh, 80px);
}
.so-hero-v2 .so-shell.so-hx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.so-hx-copy {
  align-items: center;
}
.so-hx-kicker {
  color: var(--color-stone);
}
.so-hx-title {
  margin-top: clamp(14px, 2.4vh, 22px);
  font-size: clamp(56px, 10.5vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  white-space: nowrap;
}
.so-hx-line {
  display: inline;
}
.so-hx-line + .so-hx-line {
  padding-left: 0.22em;
  color: var(--sx-violet);
}
.so-hx-tag {
  margin-top: clamp(14px, 2.2vh, 22px);
  color: var(--color-ink);
  font-size: clamp(20px, 2vw, 28px);
}
.so-hx-photo {
  max-width: min(1100px, 100%);
  width: 100%;
  justify-self: center;
  margin-top: clamp(36px, 6vh, 64px);
}
.so-hx-photo .so-hm-plate {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  box-shadow: 0 50px 90px -50px rgba(31, 15, 38, 0.55), 0 0 0 1px rgba(31, 15, 38, 0.08);
}
.so-hx-photo .so-hm-shot {
  object-position: center 40%;
}
.so-hx-cap {
  color: var(--color-stone);
}
@media (max-width: 900px) {
  .so-hero.so-hero-v2 {
    padding-block: 48px 36px;
  }
  .so-hx-title {
    font-size: clamp(48px, 15.5vw, 96px);
  }
  .so-hx-photo .so-hm-plate {
    aspect-ratio: 4 / 5;
  }
}

/* Nav back to the paper */
.so-nav {
  background: rgba(239, 230, 242, 0.92);
  border-bottom-color: var(--color-line);
  color: var(--color-ink);
  --so-nav-ink: var(--color-ink);
}
.so-nav .so-brandlock,
.so-nav .so-nav-link,
.so-nav .so-nav-burger,
.so-nav .so-brandlock svg {
  color: var(--color-ink);
}
.so-nav .so-nav-link:hover {
  color: var(--sx-violet);
}
.so-nav .so-nav-link.cta {
  background: var(--sx-aub);
  color: var(--sx-lilac);
}
.so-nav .so-nav-link.cta:hover {
  background: var(--sx-plum);
  color: #fff;
}

/* Start building: stacked and aligned */
.so-start-head {
  display: block;
  margin-top: clamp(18px, 3vw, 32px);
}
.so-start-head .so-serif {
  margin-top: 0 !important;
}
.so-start-side {
  margin-top: clamp(16px, 2vw, 24px);
}
.so-start-side p:first-child {
  max-width: 52ch;
}
.so-start-section .so-rule {
  border-color: var(--color-line);
  background: var(--color-line);
  opacity: 1;
}
.so-start-head .so-serif {
  font-size: clamp(52px, 7.5vw, 112px) !important;
  line-height: 0.92;
}
.so-start-section .so-lock .so-rule {
  border: 0 !important;
  height: 1px;
  background: var(--color-line) !important;
}

/* =========================  Scroll moments  ========================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hero photo: opens to the full width as you scroll */
.so-hero.so-hero-v2 {
  overflow: visible;
  padding-bottom: clamp(20px, 4vh, 40px);
}
.so-hx-photo.so-hx-bleed {
  max-width: none;
  width: 100%;
  margin: clamp(36px, 6vh, 64px) 0 0;
}
.so-hx-clip {
  overflow: hidden;
  will-change: clip-path;
  clip-path: inset(0% 11% 0% 11% round 8px);
}
.so-hx-zoom {
  will-change: transform;
}
.so-hx-bleed .so-hm-plate {
  width: 100%;
  aspect-ratio: auto;
  height: min(88vh, 62vw);
  border-radius: 0;
  box-shadow: none;
}
.so-hx-bleed .so-hm-plate::before {
  display: none;
}
.so-hx-bleed .so-hx-cap {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .so-hx-clip {
    clip-path: inset(0% 5% 0% 5% round 6px);
  }
  .so-hx-bleed .so-hm-plate {
    height: 78vh;
    aspect-ratio: auto;
  }
  .so-hx-bleed .so-hx-cap span:nth-child(2) {
    display: none;
  }
}

/* Marquee */
.so-mq {
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-block: clamp(14px, 2vw, 22px);
}
.so-mq-track {
  display: flex;
  width: max-content;
  animation: so-mq 48s linear infinite;
}
.so-mq:hover .so-mq-track {
  animation-play-state: paused;
}
.so-mq-row {
  display: flex;
  flex: none;
}
.so-mq-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  padding-right: clamp(18px, 2.4vw, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  white-space: nowrap;
}
.so-mq-it {
  font-style: italic;
  color: var(--sx-violet);
}
.so-mq-dot {
  font-size: 0.32em;
  color: var(--sx-violet);
  opacity: 0.6;
}
@keyframes so-mq {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-mq-track {
    animation: none;
  }
}

/* Lit statement */
.so-lit {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 30ch;
}
.so-lit-w {
  transition: opacity 0.1s linear;
}

/* Pinned reel */
.so-reel {
  position: relative;
  border-bottom: 1px solid var(--color-line);
}
.so-reel-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 36px);
  overflow: hidden;
}
.so-reel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.so-reel-title {
  font-size: clamp(44px, 6vw, 92px) !important;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.so-reel-bar {
  position: relative;
  width: clamp(90px, 14vw, 200px);
  height: 2px;
  margin-bottom: 14px;
  background: var(--color-line);
  overflow: hidden;
}
.so-reel-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--sx-violet);
}
.so-reel-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 36px);
  padding-inline: max(16px, calc((100vw - 1120px) / 2));
  width: max-content;
  will-change: transform;
}
.so-reel-card {
  flex: none;
  display: block;
  color: inherit;
  text-decoration: none;
}
.so-reel-img {
  display: block;
  height: min(58vh, 560px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-surface);
}
.so-reel-card.is-low {
  margin-top: clamp(30px, 7vh, 80px);
}
.so-reel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.so-reel-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.so-reel-t {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-ink);
}
.so-reel-cap .so-micro {
  color: var(--color-stone);
}
@media (hover: hover) {
  .so-reel-card:hover .so-reel-img img {
    transform: scale(1.05);
  }
  .so-reel-card:hover .so-reel-t {
    color: var(--sx-violet);
  }
}
.so-reel.is-static .so-reel-pin {
  position: static;
  height: auto;
  padding-block: 64px;
}
.so-reel.is-static .so-reel-track {
  overflow-x: auto;
  width: auto;
}
@media (max-width: 760px) {
  .so-reel-img {
    height: 52vh;
  }
  .so-reel-card.is-low {
    margin-top: 28px;
  }
}
figure.so-hx-bleed > figcaption.so-hx-cap {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  margin-top: 14px;
}

/* =========================  Cover hero  ========================= */
.so-cover {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  margin-top: -59px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fbf6fd;
  text-align: center;
  background: var(--sx-aub);
}
.so-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 40%;
  animation: so-cover-zoom 22s ease-out both;
}
@keyframes so-cover-zoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
.so-cover-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 11, 28, 0.55) 0%, rgba(23, 11, 28, 0.25) 38%, rgba(23, 11, 28, 0.45) 72%, rgba(23, 11, 28, 0.78) 100%),
    rgba(91, 42, 115, 0.22);
  mix-blend-mode: normal;
}
.so-cover-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px 0;
}
.so-cover-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  margin: 0;
}
.so-cover-caps {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 168px);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 0.9;
}
.so-cover-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(58px, 9.4vw, 148px);
  line-height: 0.8;
  margin-top: -0.32em;
  letter-spacing: -0.02em;
  color: #e9d3f2;
  text-shadow: 0 6px 30px rgba(23, 11, 28, 0.35);
  opacity: 0;
  animation: so-rise-in 1.2s 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes so-rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.so-cover-sub {
  margin-top: clamp(26px, 4vh, 44px);
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.35;
  color: #fbf6fd;
}
.so-cover-btn {
  display: inline-block;
  margin-top: clamp(26px, 4vh, 40px);
  padding: 18px 40px;
  background: rgba(201, 163, 220, 0.85);
  color: var(--sx-aub);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.so-cover-btn:hover {
  background: #fbf6fd;
}
.so-cover-down {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 246, 253, 0.85);
  display: grid;
  place-items: center;
  color: #fbf6fd;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.25s ease;
}
.so-cover-down:hover {
  background: rgba(251, 246, 253, 0.14);
}
.so-cover-down span {
  animation: so-bob 2.4s ease-in-out infinite;
}
@keyframes so-bob {
  50% {
    transform: translateY(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-cover-img,
  .so-cover-script,
  .so-cover-down span {
    animation: none;
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .so-cover-caps {
    font-size: clamp(48px, 16vw, 72px);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
  .so-cover-script {
    font-size: clamp(50px, 17vw, 80px);
  }
  .so-cover-img {
    object-position: 38% 40%;
  }
}

/* Nav goes clear over the cover photo */
.so-nav.is-on-cover {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  --so-nav-ink: #fbf6fd;
}
.so-nav.is-on-cover .so-brandlock,
.so-nav.is-on-cover .so-nav-link,
.so-nav.is-on-cover .so-nav-burger,
.so-nav.is-on-cover .so-brandlock svg {
  color: #fbf6fd;
}
.so-nav.is-on-cover .so-nav-link.cta {
  background: transparent;
  color: #fbf6fd;
  border: 1px solid rgba(251, 246, 253, 0.85);
  border-radius: 0;
}
.so-nav.is-on-cover .so-nav-link.cta:hover {
  background: rgba(251, 246, 253, 0.14);
}
.so-cover-caps {
  white-space: nowrap;
  font-size: clamp(56px, 10vw, 156px);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}
.so-cover-shade {
  background:
    linear-gradient(180deg, rgba(23, 11, 28, 0.5) 0%, rgba(23, 11, 28, 0.2) 38%, rgba(23, 11, 28, 0.4) 72%, rgba(23, 11, 28, 0.75) 100%),
    rgba(91, 42, 115, 0.12);
}
@media (max-width: 760px) {
  .so-cover-caps {
    font-size: 13.5vw;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
  }
  .so-cover-script {
    font-size: 17vw;
  }
}

/* =====================================================================
   v4 · Matching the feed: dusty mauve, lilac paper, soft black + cream,
   a soft italic serif (Fraunces) and a calligraphy script (Pinyon).
   ===================================================================== */
:root {
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-script: "Pinyon Script", "Fraunces", cursive;
  --sx-violet: #6b5678;
  --sx-mauve: #8b779a;
  --sx-mauve-deep: #7a6689;
  --sx-night: #151213;
  --sx-aub: #181415;
  --sx-plum: #2a2427;
  --sx-cream: #f3ead9;
  --sx-orchid: #d8c8e2;
  --sx-lilac: #efe5f3;
  --sx-mist: rgba(243, 234, 217, 0.66);
  --sx-hair: rgba(243, 234, 217, 0.16);
  --sx-silver: #cfc5c2;
}
.so-serif,
.so-build-title,
.so-path-title,
.so-pk-name,
.so-room-title,
.so-start-p,
.so-proof-title,
.so-darkframe-title,
.so-footer-wordmark,
.so-note-p,
.so-bw-card-c,
.so-reel-t,
.so-reel-title,
.so-lit,
.so-cover-sub,
.so-profile-body .lead,
.so-office-card .eyebrow-cap,
.so-note-f {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-weight: 400;
}
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em,
.so-reel-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--sx-violet);
}

/* Cover: script "Office" in cream, neutral night shade */
.so-cover {
  background: var(--sx-night);
}
.so-cover-shade {
  background:
    linear-gradient(180deg, rgba(21, 18, 19, 0.55) 0%, rgba(21, 18, 19, 0.22) 38%, rgba(21, 18, 19, 0.42) 72%, rgba(21, 18, 19, 0.8) 100%);
}
.so-cover-caps {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "opsz" 144;
  font-weight: 300;
  color: var(--sx-cream);
}
.so-cover-script {
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(76px, 12vw, 200px);
  line-height: 0.7;
  margin-top: -0.3em;
  letter-spacing: 0;
  color: var(--sx-cream);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}
.so-cover-sub {
  color: var(--sx-cream);
  font-weight: 300;
}
.so-cover-btn {
  background: var(--sx-mauve);
  color: var(--sx-cream);
}
.so-cover-btn:hover {
  background: var(--sx-cream);
  color: var(--sx-night);
}
@media (max-width: 760px) {
  .so-cover-script {
    font-size: 24vw;
  }
}

/* Dark sections: soft black + cream */
.so-darkframe-section,
.so-darkframe {
  background: var(--sx-night);
  background-image: none;
}
.so-darkframe-title {
  color: var(--sx-cream);
}
.so-darkframe-title em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.15em;
  color: var(--sx-cream);
}
.so-footer {
  background: var(--sx-night);
}
.so-footer-wordmark {
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(44px, 5vw, 68px);
  color: var(--sx-cream);
  letter-spacing: 0;
  line-height: 1;
}

/* Packages: the mauve panel from the 9.30 post */
.so-section.so-pk-section {
  background: var(--sx-mauve);
  color: var(--sx-cream);
}
.so-pk-section .so-serif {
  color: var(--sx-cream);
}
.so-pk-section .so-serif em {
  color: #3f3247;
}
.so-pk-section .so-micro,
.so-pk-foot .so-micro {
  color: rgba(243, 234, 217, 0.8);
}
.so-pk-lead,
.so-pk-alc,
.so-pk-who {
  color: rgba(243, 234, 217, 0.85);
}
.so-pk-alc .so-bw-inline,
.so-pk-go {
  color: var(--sx-cream);
}
.so-pk-card {
  background: rgba(243, 234, 217, 0.07);
  border-color: rgba(243, 234, 217, 0.28);
}
.so-pk-name,
.so-pk-list li {
  color: var(--sx-cream);
}
.so-pk-list {
  border-top-color: rgba(243, 234, 217, 0.25);
}
.so-pk-list li::before {
  background: var(--sx-cream);
}
.so-pk-card.is-feat {
  background: var(--sx-lilac);
  border-color: var(--sx-lilac);
}
.so-pk-card.is-feat .so-pk-name,
.so-pk-card.is-feat .so-pk-list li {
  color: #2b2330;
}
.so-pk-card.is-feat .so-pk-who,
.so-pk-card.is-feat .so-pk-foot .so-micro {
  color: #6b5678;
}
.so-pk-card.is-feat .so-pk-go {
  color: var(--sx-violet);
}
.so-pk-tag {
  background: var(--sx-night);
  color: var(--sx-cream);
}
@media (hover: hover) {
  .so-pk-card:hover {
    background: rgba(243, 234, 217, 0.14);
    border-color: rgba(243, 234, 217, 0.5);
  }
}

/* Build lead card: soft black like the script post */
.so-path-lead.is-text {
  background: var(--sx-night);
  color: var(--sx-cream);
}
.so-path-lead.is-text .so-path-title {
  color: var(--sx-cream);
}
.so-path-lead.is-text .so-path-lead-line {
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(30px, 2.6vw, 40px);
  color: var(--sx-cream);
}
.so-path-lead.is-text .so-room-desc {
  color: var(--sx-mist);
}
.so-path-lead.is-text .so-path-cta {
  background: var(--sx-cream);
  color: var(--sx-night);
}
.so-path-lead.is-text .so-path-start {
  color: var(--sx-cream);
  border-color: rgba(243, 234, 217, 0.45);
}
@media (hover: hover) {
  .so-path-lead.is-text:hover {
    background: var(--sx-plum);
  }
}

/* Small things in the mauve */
.so-start-side .so-micro,
.so-field label {
  color: var(--sx-violet);
}
.so-note-f {
  color: var(--sx-violet);
}
.so-nav .so-nav-link.cta {
  background: var(--sx-night);
  color: var(--sx-cream);
}
.so-form .so-btn:not(.so-btn-ghost) {
  background: var(--sx-night);
  color: var(--sx-cream);
}
.so-reel-bar span {
  background: var(--sx-violet);
}
.so-gallery-btn {
  color: var(--sx-cream);
}

.so-mv-list {
  margin-top: 14px;
  border-top: 1px solid var(--color-line);
}
.so-mv-list li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}
.so-mv-t {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--color-ink);
}
.so-mv-s {
  color: var(--sx-violet);
}
.so-mv-note {
  margin-top: 56px;
  padding: 22px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.so-mv-note .so-mv-t {
  display: block;
  margin-top: 8px;
  font-size: clamp(24px, 2.6vw, 34px);
}
.so-reel-row.is-solo {
  grid-template-columns: 1fr;
}

/* Inner-page top bar */
.so-sitebar {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(239, 230, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}
.so-sitebar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 58px;
}
.so-sitebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.so-sitebar-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.so-sitebar-links a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
}
.so-sitebar-links a:hover {
  color: var(--sx-violet);
}
.so-sitebar-links .so-sitebar-cta {
  background: var(--sx-night);
  color: var(--sx-cream);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.so-sitebar-links .so-sitebar-cta:hover {
  background: var(--sx-plum);
  color: #fff;
}
.so-sitebar + .so-shell {
  padding-top: clamp(40px, 6vw, 72px) !important;
}
@media (max-width: 640px) {
  .so-sitebar-links a:not(.so-sitebar-cta) {
    display: none;
  }
  .so-sitebar-in {
    height: 54px;
  }
}

/* Inner page titles: bigger, softer */
.so-sitebar ~ .so-shell h1.so-serif {
  font-size: clamp(48px, 7.6vw, 112px) !important;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Cover wordmark: script sits under SUNDAY, smaller, light overlap */
.so-cover-script {
  font-size: clamp(60px, 8.4vw, 132px);
  line-height: 1;
  margin-top: -0.28em;
  margin-bottom: 0.05em;
}
.so-cover-sub {
  margin-top: clamp(30px, 5vh, 56px);
}
@media (max-width: 760px) {
  .so-cover-script {
    font-size: 17vw;
    margin-top: -0.22em;
  }
}

/* "Office" sits higher and cuts through SUNDAY, like a monogram */
.so-cover-title {
  position: relative;
}
.so-cover-script {
  position: relative;
  z-index: 2;
  margin-top: -0.42em;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.07em #141112;
  text-shadow: none;
}
@media (max-width: 760px) {
  .so-cover-script {
    margin-top: -0.36em;
    -webkit-text-stroke: 0.06em #141112;
  }
}

/* Script accents cut through the line above, like the wordmark */
:root {
  --cut: #e8dfeb;
}
.so-darkframe,
.so-path-lead.is-text,
.so-footer,
.so-cover {
  --cut: #151213;
}
.so-pk-section {
  --cut: #8b779a;
}
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em,
.so-reel-title em,
.so-start-head em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: normal;
  display: inline-block;
  font-size: 1.12em;
  line-height: 0.8;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
  padding: 0 0.04em;
  transform: translateY(-0.06em);
  paint-order: stroke fill;
  -webkit-text-stroke: 0.06em var(--cut);
}

/* Cover wordmark as one drawing, with a true see-through cut */
.so-cover-title {
  display: block;
  width: min(1040px, 92vw);
}
.so-cover-mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: so-rise-in 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.so-mark-caps {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 168px;
  letter-spacing: 0.12em;
  fill: var(--sx-cream);
}
.so-mark-script {
  font-family: var(--font-script);
  font-size: 210px;
  fill: var(--sx-cream);
}
.so-cover-sub {
  margin-top: clamp(8px, 2vh, 24px);
}
@media (max-width: 760px) {
  .so-cover-title {
    width: 94vw;
  }
}
.so-mark-caps {
  font-size: 150px;
  font-weight: 300;
  letter-spacing: 0.1em;
}
.so-mark-script {
  font-size: 150px;
}
.so-cover-title {
  width: min(960px, 90vw);
}
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em,
.so-reel-title em,
.so-start-head em {
  font-size: 1em;
  -webkit-text-stroke-width: 0.04em;
}

/* Cover photo: a slow, video-like push in */
.so-cover-img {
  transform-origin: 46% 38%;
  animation: so-cover-push 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes so-cover-push {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-cover-img {
    animation: none;
  }
}

/* Cover photo stays still */
.so-cover-img {
  animation: none !important;
  transform: none;
}

/* Mobile menu: soft black and cream, like the opening */
.so-menu-panel {
  background: var(--sx-night) !important;
  color: var(--sx-cream);
  border-color: transparent !important;
}
.so-menu-panel .so-menu-file,
.so-menu-panel .so-menu-no,
.so-menu-panel .so-menu-foot .so-micro {
  color: rgba(243, 234, 217, 0.55) !important;
}
.so-menu-panel .so-menu-link {
  border-color: rgba(243, 234, 217, 0.14) !important;
}
.so-menu-panel .so-menu-list {
  border-color: rgba(243, 234, 217, 0.14) !important;
}
.so-menu-panel .so-menu-name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--sx-cream) !important;
}
.so-menu-panel .so-menu-arr {
  color: var(--sx-cream) !important;
}
.so-menu-panel .so-menu-cta {
  background: var(--sx-cream) !important;
  color: var(--sx-night) !important;
}
.so-menu-panel .so-menu-foot a {
  color: rgba(243, 234, 217, 0.8) !important;
}
.so-mobile-menu[open] ~ * ,
.so-nav:has(.so-mobile-menu[open]) {
  background: var(--sx-night);
  --so-nav-ink: var(--sx-cream);
}
.so-nav:has(.so-mobile-menu[open]) .so-brandlock,
.so-nav:has(.so-mobile-menu[open]) .so-nav-burger {
  color: var(--sx-cream);
}

/* Over the cover, the bar shows only the sun mark (the big wordmark does the talking) */
.so-brandlock span {
  transition: opacity 0.3s ease;
}
.so-nav.is-on-cover .so-brandlock span {
  opacity: 0;
}

/* Build your world: compact, words left, photo right */
.so-build-head.so-bw2 {
  display: block;
}
.so-bw2-left {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.so-bw2-left > * {
  grid-column: 1;
}
.so-wp {
  display: contents;
}
.so-wp-photo {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: stretch;
}
.so-bw2 .so-build-title {
  font-size: clamp(52px, 6.4vw, 96px);
}
.so-bw2 .so-lit {
  margin-top: 18px !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  max-width: 26ch;
}
.so-bw2-p {
  margin-top: 14px !important;
  font-size: 15.5px !important;
  max-width: 46ch;
  color: var(--color-print);
}
.so-wp-words {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.so-wp-word {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-ink);
  -webkit-tap-highlight-color: transparent;
}
.so-wp-k {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  min-width: 5.2em;
  opacity: 0.35;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.so-wp-line {
  font-size: 14px;
  color: var(--color-stone);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.so-wp-word.is-on .so-wp-k {
  opacity: 1;
  color: var(--sx-violet);
  transform: translateX(6px);
}
.so-wp-word.is-on .so-wp-line {
  opacity: 1;
  transform: none;
}
.so-wp-photo {
  position: relative;
  display: block;
  min-height: 440px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sx-night);
  text-decoration: none;
  box-shadow: 0 40px 80px -50px rgba(21, 18, 19, 0.6);
}
.so-wp-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.so-wp-photo img.is-on {
  opacity: 1;
  transform: none;
}
.so-wp-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 40px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(21, 18, 19, 0.72));
  color: var(--sx-cream);
  font-size: 14px;
}
.so-wp-cap .so-micro {
  color: rgba(243, 234, 217, 0.75);
}
@media (max-width: 860px) {
  .so-bw2-left {
    grid-template-columns: 1fr;
  }
  .so-wp-photo {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    margin-top: 22px;
  }
  .so-wp-line {
    display: none;
  }
}

/* Script words styled like the "Office" wordmark: same colour as the
   heading, a touch bigger and fuller, so they read as one family */
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em,
.so-reel-title em,
.so-start-head em {
  color: inherit !important;
  font-size: 1.22em;
  line-height: 0.7;
  transform: translateY(0.04em);
  paint-order: normal;
  -webkit-text-stroke: 0.018em currentColor;
}

/* Script word tucks up under the line above, like Office under SUNDAY */
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em,
.so-reel-title em,
.so-start-head em {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: -0.28em;
  margin-left: 0.45em;
  transform: none;
  line-height: 1;
}

/* Case study lead photo */
.so-case-cover {
  margin: clamp(26px, 4vw, 44px) 0 clamp(8px, 2vw, 16px);
  overflow: hidden;
  border-radius: 6px;
  background: var(--sx-night);
  aspect-ratio: 16 / 8.5;
  max-height: 78vh;
  box-shadow: 0 40px 80px -55px rgba(21, 18, 19, 0.65);
}
.so-case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: so-cover-in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes so-cover-in {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 760px) {
  .so-case-cover {
    aspect-ratio: 4 / 5;
    margin-left: -4px;
    margin-right: -4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .so-case-cover img {
    animation: none;
  }
}

/* Status tag: red means still being worked on */
.so-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 5px;
  border-radius: 999px;
  background: #9e2b2e;
  color: #fbf3ee;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.so-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: so-status-pulse 1.8s ease-in-out infinite;
}
@keyframes so-status-pulse {
  50% {
    opacity: 0.3;
  }
}
.so-status-on-card {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
}
.so-bw-card-img {
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  .so-status::before {
    animation: none;
  }
}

/* Featured Work: "On the desk now" filter for projects in progress */
.so-niche-now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e58b8d;
}
.so-niche-now:hover,
.so-niche-now.is-on {
  color: #f3a7a9;
  border-bottom-color: #e58b8d;
}
.so-niche-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9474b;
  animation: so-status-pulse 1.8s ease-in-out infinite;
}

/* Menu button on every screen size: Start a project + Menu */
.so-mobile-menu {
  display: block;
}
.so-nav-burger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.so-nav-links .so-nav-link:not(.cta) {
  display: none;
}
.so-nav-inner > .so-nav-links {
  margin-left: auto;
  margin-right: 18px;
}
@media (min-width: 861px) {
  .so-menu-panel {
    padding: clamp(40px, 6vh, 72px) max(24px, calc((100vw - 1120px) / 2)) 48px;
  }
  .so-menu-panel .so-menu-name {
    font-size: clamp(44px, 5.4vw, 80px) !important;
    line-height: 1.05;
  }
  .so-menu-panel .so-menu-cta {
    max-width: 420px;
  }
}
@media (max-width: 860px) {
  .so-nav-links {
    display: none !important;
  }
}


/* Menu first, then Start a project */
.so-nav-inner > .so-mobile-menu {
  order: 1;
  margin-left: auto;
}
.so-nav-inner > .so-nav-links {
  order: 2;
  margin-left: 22px;
  margin-right: 0;
}
.so-nav-burger {
  padding-left: 0;
}

/* The cut: the script word slices a clean gap through the letters above,
   like the J in the Joe Lopez logo. The stroke is drawn in the section's
   background colour, behind the script's own fill. */
:root {
  --cut: #ece2ef;
}
.so-darkframe,
.so-darkframe-section,
.so-path-lead.is-text,
.so-footer {
  --cut: #151213;
}
.so-section.so-pk-section {
  --cut: #8b779a;
}
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em,
.so-reel-title em,
.so-start-head em {
  position: relative;
  z-index: 2;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.075em var(--cut);
}

/* Meet Hana matches the other section headings */
#about-hana h2.so-serif {
  font-size: clamp(52px, 7vw, 104px) !important;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* One size for every homepage section heading */
.so-build-title,
.so-darkframe-title,
.so-proof-title,
.so-reel-title,
#about-hana h2.so-serif,
#packages h2.so-serif,
.so-start-head h2.so-serif {
  font-size: clamp(52px, 6.4vw, 96px) !important;
  line-height: 0.92 !important;
}

/* "see." is short, so it sits bigger and higher, tucked under "actually"
   so its strokes cross the letters and get the same cut */
.so-proof-title em {
  font-size: 1.55em !important;
  margin-top: -0.42em !important;
  margin-left: 1.6em !important;
}

/* Script sits BEHIND the serif: the serif letters cut a gap through it */
.so-build-title,
.so-darkframe-title,
.so-proof-title,
.so-reel-title,
.so-serif {
  isolation: isolate;
  position: relative;
}
.so-build-title,
.so-darkframe-title,
.so-proof-title,
.so-reel-title,
#about-hana h2.so-serif,
#packages h2.so-serif,
.so-start-head h2.so-serif {
  paint-order: stroke fill;
  -webkit-text-stroke: 0.05em var(--cut);
}
.so-serif em,
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head em,
.so-reel-title em,
.so-start-head em {
  z-index: -1 !important;
  -webkit-text-stroke: 0 transparent !important;
}

/* Meet Hana: the script sits in FRONT, cutting through "Meet" */
#about-hana h2.so-serif {
  -webkit-text-stroke: 0 transparent !important;
}
#about-hana h2.so-serif em {
  z-index: 1 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.075em var(--cut) !important;
}

/* Cover: keep the scroll arrow clear of the button */
.so-cover-inner {
  padding-bottom: clamp(90px, 13vh, 130px);
}
@media (max-height: 780px) {
  .so-cover-down {
    display: none;
  }
  .so-cover-inner {
    padding-bottom: 24px;
  }
}
/* A lone last price card stretches across the row */
.so-prices > .so-price:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}
/* Launched: a calm black tag, no blinking */
.so-status.is-live {
  background: #151213;
  color: #f3ead9;
}
.so-status.is-live::before {
  animation: none;
  background: #9fd4a3;
}

/* Pricing as pillars: four tall columns with arched tops */
.so-prices > .so-price:last-child:nth-child(3n + 1) {
  grid-column: auto;
}
.so-prices {
  gap: 14px;
  align-items: stretch;
}
.so-price {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 44px 24px 28px;
  border-radius: 999px 999px 10px 10px;
  text-align: center;
  align-items: center;
}
.so-price .so-bw-t {
  margin-top: 12px;
}
.so-price-p {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-size: clamp(34px, 3vw, 46px);
  letter-spacing: -0.02em;
  color: var(--sx-violet);
}
.so-price .so-bw-d {
  margin-top: auto;
  padding-top: 18px;
  font-size: 14.5px;
}
.so-price.is-quoted {
  background: var(--sx-night);
  border-color: var(--sx-night);
  color: var(--sx-cream);
}
.so-price.is-quoted .so-bw-t,
.so-price.is-quoted .so-price-p {
  color: var(--sx-cream);
}
.so-price.is-quoted .so-price-p {
  font-family: var(--font-script);
  font-size: clamp(48px, 4.2vw, 64px);
}
.so-price.is-quoted .so-bw-d {
  color: rgba(243, 234, 217, 0.75);
}
.so-price.is-quoted .so-price-tag {
  color: rgba(243, 234, 217, 0.7);
}
@media (max-width: 1000px) {
  .so-prices[style] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .so-prices[style] {
    grid-template-columns: 1fr !important;
  }
  .so-price {
    min-height: 0;
  }
}
.so-price .so-bw-d {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.so-price.is-quoted .so-bw-d {
  border-top-color: rgba(243, 234, 217, 0.18);
}
.so-price {
  min-height: 340px;
  justify-content: flex-start;
}

/* ===== Headshots page ===== */
.so-hs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.so-hs-title {
  margin-top: 14px;
  font-size: clamp(64px, 9vw, 140px) !important;
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.so-hs-title em {
  display: inline-block !important;
  margin: 0 !important;
}
.so-hs-lead {
  margin-top: 22px;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-print);
}
.so-hs-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 28px;
}
.so-hs-btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--sx-night);
  color: var(--sx-cream);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.so-hs-btn:hover {
  background: var(--sx-plum);
  transform: translateY(-2px);
}
.so-hs-btn.is-light {
  background: var(--sx-cream);
  color: var(--sx-night);
}
.so-hs-btn.is-light:hover {
  background: #fff;
}
.so-hs-fan {
  position: relative;
  height: clamp(340px, 34vw, 480px);
}
.so-hs-fan img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  border: 8px solid #fbf7fd;
  box-shadow: 0 30px 60px -36px rgba(31, 15, 38, 0.6);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.so-hs-fan img:nth-child(1) {
  transform: translate(-98%, -46%) rotate(-7deg);
}
.so-hs-fan img:nth-child(2) {
  transform: translate(-50%, -54%) rotate(0deg);
  z-index: 2;
}
.so-hs-fan img:nth-child(3) {
  transform: translate(-2%, -46%) rotate(7deg);
}
.so-hs-fan:hover img:nth-child(1) {
  transform: translate(-108%, -46%) rotate(-10deg);
}
.so-hs-fan:hover img:nth-child(3) {
  transform: translate(8%, -46%) rotate(10deg);
}

.so-hs-kinds {
  margin-top: 18px;
  border-top: 1px solid var(--color-line);
}
.so-hs-kind {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(32px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--color-line);
  align-items: center;
}
.so-hs-kind.is-text {
  grid-template-columns: 1fr;
}
.so-hs-kind-t {
  margin-top: 8px;
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1;
}
.so-hs-kind-lead {
  margin-top: 10px;
  font-family: var(--font-script);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.1;
  color: var(--sx-violet);
}
.so-hs-kind .so-bw-d {
  max-width: 46ch;
}
.so-hs-feel {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--sx-mauve);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-print);
  max-width: 44ch;
}
.so-hs-kind-imgs {
  display: grid;
  gap: 12px;
}
.so-hs-kind-imgs.n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.so-hs-kind-imgs.n1 {
  grid-template-columns: minmax(0, 300px);
}
.so-hs-kind-imgs img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) {
  .so-hs-kind-imgs img:hover {
    transform: translateY(-6px);
  }
}

.so-hs-tips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.so-hs-tip {
  padding: 24px 22px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
}
.so-hs-tip-n {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--sx-violet);
}
.so-hs-tip-t {
  margin-top: 14px;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-ink);
}
.so-hs-tip .so-bw-d {
  font-size: 14px;
}

.so-hs-close {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 10px;
  overflow: hidden;
}
.so-hs-note {
  appearance: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  background: var(--sx-lilac);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-ink);
  font: inherit;
}
.so-hs-note .so-micro {
  color: var(--sx-violet);
}
.so-hs-note-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.35;
}
.so-hs-close-cta {
  background: var(--sx-night);
  color: var(--sx-cream);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.so-hs-close-t {
  font-size: clamp(40px, 4.4vw, 64px) !important;
  line-height: 0.95;
  color: var(--sx-cream);
}
.so-hs-close-t em {
  color: var(--sx-cream) !important;
  -webkit-text-stroke: 0 transparent !important;
}
.so-hs-more {
  color: var(--sx-cream);
  text-decoration: underline;
  text-underline-offset: 5px;
  font-size: 14px;
}

@media (max-width: 900px) {
  .so-hs-hero,
  .so-hs-kind,
  .so-hs-close {
    grid-template-columns: 1fr;
  }
  .so-hs-tips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .so-hs-fan {
    height: 340px;
  }
}
@media (max-width: 560px) {
  .so-hs-tips {
    grid-template-columns: 1fr;
  }
  .so-hs-fan img {
    width: 56%;
  }
}
.so-hs-fan {
  overflow: visible;
}
@media (max-width: 560px) {
  .so-hs-fan {
    overflow: hidden;
    margin: 0 -16px;
  }
  .so-hs-fan img {
    width: 46%;
  }
}
.so-price {
  position: relative;
}
.so-price .so-price-tag {
  position: static;
  order: -1;
  margin-bottom: -4px;
  color: var(--sx-violet);
}

/* Top bar spans the full width: logo far left, buttons far right */
.so-nav .so-shell.so-nav-inner {
  max-width: none;
  width: 100%;
  padding-left: clamp(16px, 3vw, 44px);
  padding-right: clamp(16px, 3vw, 44px);
}
.so-nav .so-brandlock svg {
  width: 34px;
  height: 34px;
}

/* Direction photo: keep her face and the Space Needle in frame */
.so-wp-photo img[src*="kk-05"] { object-position: 50% 18%; }

/* Start a project: black, white boxes, runs straight into the black footer */
.so-section.so-start-section {
  --cut: #151213;
  background: #151213;
  color: #f3ead9;
  border-bottom: 0;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.so-start-section .so-serif,
.so-start-section .so-serif em,
.so-start-section .so-start-head {
  color: #f3ead9;
}
.so-start-section .so-micro,
.so-start-section .so-micro-red {
  color: rgba(243, 234, 217, 0.62);
}
.so-start-section p {
  color: rgba(243, 234, 217, 0.82);
}
.so-start-section .so-rule,
.so-start-section hr {
  border-color: rgba(243, 234, 217, 0.18);
  background: rgba(243, 234, 217, 0.18);
}
/* the boxes */
.so-start-section .so-start-path,
.so-start-section .so-office-card {
  --color-ink: #151213;
  --color-stone: #6f6474;
  --color-line: #e4dbe8;
  --color-rice: #ffffff;
  --cut: #ffffff;
  background: #ffffff;
  color: #151213;
  border-color: #ffffff;
  box-shadow: none;
}
.so-start-section .so-start-path *,
.so-start-section .so-office-card * {
  border-color: #e4dbe8;
}
.so-start-section .so-start-path p,
.so-start-section .so-start-path .so-serif,
.so-start-section .so-office-card p,
.so-start-section .so-office-card label,
.so-start-section .so-office-card .so-serif,
.so-start-section .so-office-card .so-serif em,
.so-start-section .so-office-card h2,
.so-start-section .so-office-card h3 {
  color: #151213;
}
.so-start-section .so-start-path .so-micro,
.so-start-section .so-office-card .so-micro {
  color: #6f6474;
}
.so-start-section .so-office-card input,
.so-start-section .so-office-card select,
.so-start-section .so-office-card textarea {
  color: #151213;
  border-color: #d9cfdf;
  background: transparent;
}
.so-start-section .so-start-path:hover,
.so-start-section .so-start-path.is-on {
  background: #f6f0f8;
}
.so-footer {
  background: #151213;
  border-top: 0;
  margin-top: 0;
}

.so-start-section .so-start-card {
  --cut: #ffffff;
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #151213 !important;
}
.so-start-section .so-start-card:hover,
.so-start-section .so-start-card.is-on {
  background: #f6f0f8 !important;
}
.so-start-section .so-start-card .so-start-p,
.so-start-section .so-start-card .so-start-check,
.so-start-section .so-start-card a {
  color: #151213 !important;
  border-color: #d9cfdf !important;
}
.so-start-section .so-start-card .so-start-d,
.so-start-section .so-start-card .so-micro {
  color: #6f6474 !important;
}
.so-start-section .so-start-path {
  background: transparent !important;
}


/* ============================================================
   Rhythm, like the feed: light paper pages, black for Featured
   work and the ending, mauve for the standout moments.
   ============================================================ */
/* Inner pages: the pricing band is the mauve moment */
.so-bw-sec.so-pricing {
  --cut: #8b779a;
  position: relative;
  background: #8b779a;
  box-shadow: 0 0 0 100vmax #8b779a;
  clip-path: inset(0 -100vmax);
  color: #f3ead9;
  padding-block: clamp(56px, 7vw, 96px);
  margin-block: clamp(40px, 6vw, 80px);
  border-top: 0;
}
.so-bw-sec.so-pricing > .so-micro { color: rgba(243, 234, 217, 0.8) !important; }
.so-bw-sec.so-pricing .so-bw-h,
.so-bw-sec.so-pricing .so-bw-h em { color: #f3ead9 !important; }
.so-bw-sec.so-pricing .so-price:not(.is-quoted) {
  background: rgba(243, 234, 217, 0.1);
  border-color: rgba(243, 234, 217, 0.32);
}
.so-bw-sec.so-pricing .so-price:not(.is-quoted) .so-bw-t,
.so-bw-sec.so-pricing .so-price:not(.is-quoted) .so-price-p { color: #f3ead9 !important; }
.so-bw-sec.so-pricing .so-price:not(.is-quoted) .so-bw-d,
.so-bw-sec.so-pricing .so-price:not(.is-quoted) .so-price-tag { color: rgba(243, 234, 217, 0.85) !important; }
.so-bw-sec.so-pricing .so-price-foot,
.so-bw-sec.so-pricing .so-price-foot a { color: rgba(243, 234, 217, 0.9) !important; }

/* ============================================================
   Service pages, booking-first pieces
   ============================================================ */
:root {
  --so-k-ink: #241f26;
  --so-k-soft: #6f6474;
  --so-k-line: #dccde3;
  --so-k-card: #fbf7fd;
  --so-k-mauve: #8b779a;
  --so-k-night: #151213;
  --so-k-cream: #f3ead9;
}

/* How it works: every step visible */
.so-flow-head { display: grid; gap: 8px; margin-bottom: clamp(20px, 3vw, 32px); }
.so-flow-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--so-k-line); }
.so-flow-step {
  display: grid;
  grid-template-columns: 56px minmax(180px, 0.9fr) 1.6fr;
  gap: 8px 28px;
  align-items: start;
  padding: 22px 12px;
  border-bottom: 1px solid var(--so-k-line);
  border-radius: 12px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.so-flow-step:hover { background: rgba(139, 119, 154, 0.08); }
.so-flow-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--so-k-mauve); padding-top: 6px; }
.so-flow-t { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; color: var(--so-k-ink); margin: 0; }
.so-flow-d { margin: 6px 0 0; font-size: 14px; color: var(--so-k-soft); }
.so-flow-more { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--so-k-ink); max-width: 60ch; }
@media (max-width: 760px) {
  .so-flow-step { grid-template-columns: 40px 1fr; padding: 18px 4px; }
  .so-flow-more { grid-column: 2; font-size: 15px; }
}

/* Question box: list on the left, answer on the right, no jumping */
.so-qa-head { display: grid; gap: 8px; margin-bottom: clamp(18px, 3vw, 28px); }
.so-qa {
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}
.so-qa-item { display: contents; }
.so-qa-tab {
  grid-column: 1;
  grid-row: var(--qa-row);
  display: grid;
  grid-template-columns: 30px 1fr 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  margin-bottom: 6px;
  border: 1px solid var(--so-k-line);
  border-radius: 12px;
  background: transparent;
  color: var(--so-k-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.so-qa-tab:hover { border-color: var(--so-k-mauve); }
.so-qa-tab:focus-visible { outline: 2px solid var(--so-k-mauve); outline-offset: 2px; }
.so-qa-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--so-k-soft); }
.so-qa-plus { font-size: 16px; color: var(--so-k-soft); text-align: right; }
.so-qa-item.is-on .so-qa-tab { background: var(--so-k-night); border-color: var(--so-k-night); color: var(--so-k-cream); }
.so-qa-item.is-on .so-qa-no, .so-qa-item.is-on .so-qa-plus { color: rgba(243, 234, 217, 0.65); }
.so-qa-panel {
  grid-column: 2;
  grid-row: 1 / span var(--qa-n);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 6px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 16px;
  background: var(--so-k-card);
  border: 1px solid var(--so-k-line);
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.so-qa-item.is-on .so-qa-panel { visibility: visible; opacity: 1; transform: none; transition: opacity 0.35s ease, transform 0.35s ease; }
.so-qa-panel-h { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.12; color: var(--so-k-ink); text-wrap: balance; }
.so-qa-panel-b { margin: 0; font-size: 16px; line-height: 1.65; color: var(--so-k-ink); max-width: 58ch; }
.so-qa-nav { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--so-k-line); }
.so-qa-nav .so-micro { color: var(--so-k-soft); }
.so-qa-nav-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.so-qa-nav-btns button { border: 1px solid var(--so-k-line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--so-k-ink); background: transparent; cursor: pointer; }
.so-qa-nav-btns button:hover { background: var(--so-k-night); color: var(--so-k-cream); border-color: var(--so-k-night); }
@media (max-width: 760px) {
  .so-qa { display: block; }
  .so-qa-item { display: block; }
  .so-qa-panel { display: none; margin: -2px 0 10px; padding: 20px; transform: none; }
  .so-qa-item.is-on .so-qa-panel { display: flex; }
  .so-qa-item.is-on .so-qa-tab { border-radius: 12px 12px 0 0; margin-bottom: 0; }
  .so-qa-item.is-on .so-qa-panel { border-radius: 0 0 12px 12px; }
  .so-qa-nav { display: none; }
}

/* FAQ */
.so-faq-sec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .so-faq-sec { grid-template-columns: 1fr; } }
.so-faq-mail { user-select: all; color: var(--so-k-ink); text-decoration: underline; text-underline-offset: 3px; }
.so-faq { display: grid; border-top: 1px solid var(--so-k-line); }
.so-faq-item { border-bottom: 1px solid var(--so-k-line); }
.so-faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  color: var(--so-k-ink);
}
.so-faq-item summary::-webkit-details-marker { display: none; }
.so-faq-item summary:focus-visible { outline: 2px solid var(--so-k-mauve); outline-offset: 2px; border-radius: 6px; }
.so-faq-icon { position: relative; flex: 0 0 26px; height: 26px; border: 1px solid var(--so-k-line); border-radius: 50%; }
.so-faq-icon::before, .so-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--so-k-ink); transform: translate(-50%, -50%); transition: transform 0.25s ease; }
.so-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.so-faq-item[open] .so-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.so-faq-item[open] .so-faq-icon { background: var(--so-k-night); border-color: var(--so-k-night); }
.so-faq-item[open] .so-faq-icon::before, .so-faq-item[open] .so-faq-icon::after { background: var(--so-k-cream); }
.so-faq-a { padding: 0 4px 22px; font-size: 15.5px; line-height: 1.65; color: var(--so-k-soft); max-width: 62ch; }
.so-faq-a a { color: var(--so-k-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Which one fits */
.so-fit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
@media (max-width: 860px) { .so-fit { grid-template-columns: 1fr; } }
.so-fit-q { display: grid; gap: 10px; align-content: start; }
.so-fit-opts { display: grid; gap: 8px; margin-top: 8px; }
.so-fit-opt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 15px 18px; border-radius: 12px; border: 1px solid var(--so-k-line);
  background: transparent; color: var(--so-k-ink); font-size: 15.5px; line-height: 1.4; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.so-fit-opt:hover { border-color: var(--so-k-mauve); }
.so-fit-opt:focus-visible { outline: 2px solid var(--so-k-mauve); outline-offset: 2px; }
.so-fit-dot { flex: 0 0 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--so-k-soft); }
.so-fit-opt.is-on { border-color: var(--so-k-night); background: rgba(139, 119, 154, 0.1); }
.so-fit-opt.is-on .so-fit-dot { border: 5px solid var(--so-k-night); }
.so-fit-a { border-radius: 18px; background: var(--so-k-night); color: var(--so-k-cream); padding: clamp(24px, 3.4vw, 40px); display: flex; min-height: 280px; }
.so-fit-a .so-micro { color: rgba(243, 234, 217, 0.6); }
.so-fit-empty { display: grid; gap: 12px; align-content: center; }
.so-fit-empty p:last-child { margin: 0; color: rgba(243, 234, 217, 0.78); line-height: 1.6; max-width: 40ch; }
.so-fit-card { display: grid; gap: 10px; align-content: start; width: 100%; }
.so-fit-pick { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; }
.so-fit-price { margin: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: #c9b0d9; }
.so-fit-why { margin: 4px 0 0; line-height: 1.6; color: rgba(243, 234, 217, 0.85); max-width: 46ch; }
.so-fit-go { justify-self: start; margin-top: 10px; padding: 13px 20px; border-radius: 999px; background: var(--so-k-cream); color: var(--so-k-night); font-weight: 600; font-size: 14px; text-decoration: none; transition: transform 0.2s ease; }
.so-fit-go:hover { transform: translateX(3px); }

/* Card rail */
.so-rail-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.so-rail-head > div:first-child { display: grid; gap: 8px; }
.so-rail-btns { display: flex; align-items: center; gap: 8px; }
.so-rail-btns .so-micro { margin-right: 6px; color: var(--so-k-soft); }
.so-rail-btns button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--so-k-line); background: transparent; color: var(--so-k-ink); font-size: 16px; cursor: pointer; }
.so-rail-btns button:hover { background: var(--so-k-night); color: var(--so-k-cream); border-color: var(--so-k-night); }
.so-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 32%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.so-rail::-webkit-scrollbar { display: none; }
.so-rail:focus-visible { outline: 2px solid var(--so-k-mauve); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 760px) { .so-rail { grid-auto-columns: 82%; } }
.so-rail-card { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 16px; background: var(--so-k-card); border: 1px solid var(--so-k-line); min-height: 220px; }
.so-rail-card .so-micro { color: var(--so-k-mauve); }
.so-rail-t { margin: 0; font-family: var(--font-display); font-size: 23px; line-height: 1.15; color: var(--so-k-ink); }
.so-rail-d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--so-k-soft); }

/* Price cards: one tap to ask about a package */
.so-price-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: inherit; }
.so-price-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.so-bw-sec.so-pricing .so-price:not(.is-quoted) .so-price-go { color: #f3ead9 !important; }
.so-price.is-quoted .so-price-go { color: #f3ead9 !important; }
.so-price { display: flex; flex-direction: column; }

/* What happens next, inside the closing box */
.so-next { list-style: none; margin: 26px 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid rgba(243, 234, 217, 0.18); }
@media (max-width: 760px) { .so-next { grid-template-columns: 1fr; } }
.so-next .so-micro { color: rgba(243, 234, 217, 0.55) !important; }
.so-next-t { margin: 6px 0 4px; font-family: var(--font-display); font-size: 20px; color: #f3ead9; }
.so-next-d { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(243, 234, 217, 0.72); }

/* Booking bar that follows you down the page */
.so-bookbar {
  position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%); opacity: 0;
  display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px;
  background: var(--so-k-night); color: var(--so-k-cream); border-radius: 999px;
  box-shadow: 0 14px 40px rgba(21, 18, 19, 0.28);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
  max-width: calc(100vw - 32px);
}
.so-bookbar.is-on { transform: translate(-50%, 0); opacity: 1; }
.so-bookbar-t { display: flex; gap: 10px; align-items: baseline; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.so-bookbar-t span { color: rgba(243, 234, 217, 0.65); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; }
.so-bookbar a { flex: 0 0 auto; padding: 11px 18px; border-radius: 999px; background: var(--so-k-cream); color: var(--so-k-night); font-weight: 600; font-size: 13.5px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .so-bookbar, .so-qa-panel { transition: none; } }

/* Service pricing uses the Packages cards */
.so-pricing .so-pk-price {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f3ead9;
}
.so-pricing .so-pk-card.is-feat .so-pk-price { color: #241f26; }
.so-pricing .so-pk-who { margin-top: 12px; min-height: 0; color: rgba(243, 234, 217, 0.85); }
.so-pricing .so-pk-card.is-feat .so-pk-who { color: #5c5062; }
.so-pricing .so-pk-foot { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.so-pricing .so-pk-card { min-height: 100%; }
.so-pricing .so-pk-card:not(.is-feat) {
  background: rgba(243, 234, 217, 0.08);
  border-color: rgba(243, 234, 217, 0.3);
  color: #f3ead9;
}
.so-pricing .so-pk-card:not(.is-feat) .so-pk-name { color: #f3ead9; }
.so-pricing .so-pk-card:not(.is-feat) .so-pk-list { border-top-color: rgba(243, 234, 217, 0.22); }
.so-pricing .so-pk-card:not(.is-feat) .so-pk-list li { color: #f3ead9; }
.so-pricing .so-pk-card:not(.is-feat) .so-pk-list li::before { background: #f3ead9; }
.so-pricing .so-pk-card:not(.is-feat) .so-pk-foot .so-micro { color: rgba(243, 234, 217, 0.7); }
.so-pricing .so-pk-card:not(.is-feat) .so-pk-go { color: #f3ead9; }
@media (hover: hover) {
  .so-pricing .so-pk-card:hover { transform: translateY(-3px); background: rgba(243, 234, 217, 0.14); }
  .so-pricing .so-pk-card.is-feat:hover { background: #fbf6fd; }
}
@media (max-width: 1000px) { .so-pricing .so-pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px) { .so-pricing .so-pk-grid { grid-template-columns: 1fr !important; } }
.so-bw-sec.so-pricing .so-price-foot { color: rgba(243, 234, 217, 0.85) !important; }
.so-bw-sec.so-pricing .so-price-foot a { color: #f3ead9 !important; }
@supports (grid-template-rows: subgrid) {
  .so-pricing .so-pk-card { grid-row: span 5; }
  .so-pricing .so-pk-price { align-self: end; }
}
@media (max-width: 480px) {
  .so-bookbar { left: 16px; right: 16px; transform: translateY(140%); justify-content: space-between; }
  .so-bookbar.is-on { transform: none; }
  .so-bookbar-t span { display: none; }
}
.so-pricing .so-pk-card.is-feat { transform: translateY(-10px); box-shadow: 0 24px 50px -24px rgba(21, 18, 19, 0.55); }
@media (hover: hover) { .so-pricing .so-pk-card.is-feat:hover { transform: translateY(-13px); } }
@media (max-width: 620px) { .so-pricing .so-pk-card.is-feat { transform: none; } }

.so-bw-sec.so-pricing + .so-bw-sec.so-pricing { margin-top: calc(-1 * clamp(40px, 6vw, 80px)); padding-top: 0; }
.so-pricing .so-pk-card.is-feat .so-pk-tag { background: #151213; color: #f3ead9; }

/* Start a project first, then Menu */
.so-nav-inner > .so-nav-links { order: 1; margin-left: auto; margin-right: 0; }
.so-nav-inner > .so-mobile-menu { order: 2; margin-left: 22px; }

/* Top bar buttons: two matching pills, so they read as a pair */
.so-nav .so-nav-link.cta,
.so-nav .so-nav-burger {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.so-nav-inner > .so-mobile-menu { margin-left: 10px; }
/* Over the cover photo: cream pill + frosted glass pill */
.so-nav.is-on-cover .so-nav-link.cta {
  background: #f3ead9;
  color: #151213 !important;
  border: 1px solid #f3ead9;
}
.so-nav.is-on-cover .so-nav-link.cta:hover { background: #fff; border-color: #fff; }
.so-nav.is-on-cover .so-nav-burger {
  background: rgba(243, 234, 217, 0.12);
  border: 1px solid rgba(243, 234, 217, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f3ead9;
}
/* After scrolling: black pill + outlined pill */
.so-nav:not(.is-on-cover) .so-nav-link.cta {
  background: #151213;
  color: #f3ead9 !important;
  border: 1px solid #151213;
}
.so-nav:not(.is-on-cover) .so-nav-burger {
  border: 1px solid rgba(21, 18, 19, 0.2);
  background: transparent;
}
.so-nav .so-nav-link.cta, .so-nav .so-nav-burger { border-radius: 999px !important; }

/* Top bar: real breathing room, quieter progress line */
.so-progress { height: 2px !important; opacity: 0.55; background: #c9b0d9 !important; }
.so-nav .so-shell.so-nav-inner {
  min-height: 92px !important;
  height: auto !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  transition: min-height 0.3s ease, padding 0.3s ease;
}
.so-nav.is-scrolled .so-shell.so-nav-inner,
.so-nav:not(.is-on-cover) .so-shell.so-nav-inner {
  min-height: 72px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.so-nav .so-nav-link.cta, .so-nav .so-nav-burger { height: 40px; padding: 0 18px; font-size: 13.5px; }
.so-nav .so-brandlock svg { width: 34px !important; height: 34px !important; }
.so-nav.is-on-cover,
.so-nav.is-on-cover .so-nav-inner,
.so-nav.is-on-cover .so-shell.so-nav-inner {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.so-nav.is-on-cover::before, .so-nav.is-on-cover::after { display: none !important; }
/* The cover tucks under the taller top bar */
.so-cover { margin-top: -93px !important; }
/* Over the cover the big button is right there, so the top one waits */
.so-nav .so-nav-links { transition: opacity 0.3s ease, transform 0.3s ease; }
.so-nav.is-on-cover .so-nav-links { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* The cover button "moves" into the bar: once it scrolls under, its twin appears beside Menu */
.so-nav .so-nav-links { transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.so-nav:not(.cta-in) .so-nav-links { opacity: 0 !important; transform: translateX(-14px) !important; pointer-events: none; }
.so-nav.cta-in .so-nav-links { opacity: 1 !important; transform: none !important; pointer-events: auto; }
@media (max-width: 860px) {
  .so-nav .so-nav-links { display: flex !important; }
  .so-nav .so-nav-link.cta { height: 38px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
  .so-nav .so-nav-burger { height: 38px; padding: 0 14px; }
  .so-nav-inner > .so-mobile-menu { margin-left: 8px; }
  /* the pair up top replaces the bottom bar on the homepage */
  .so-startbar { display: none !important; }
}
/* no pink ring after tapping Menu; keep a ring for keyboard users */
.so-nav .so-nav-burger:focus { outline: none; }
.so-nav .so-nav-burger:focus-visible { outline: 2px solid #c9b0d9; outline-offset: 3px; }
@media (max-width: 860px) {
  .so-nav .so-brandlock { flex-shrink: 0; }
  .so-nav .so-brandlock svg { width: 32px !important; height: 32px !important; min-width: 32px; flex-shrink: 0; }
  .so-nav .so-brandlock span { display: none !important; }
  /* scrolled bar on phones is black: cream pill + outlined pill */
  .so-nav:not(.is-on-cover) .so-nav-link.cta { background: #f3ead9 !important; color: #151213 !important; border-color: #f3ead9 !important; }
  .so-nav:not(.is-on-cover) .so-nav-burger { border: 1px solid rgba(243, 234, 217, 0.35) !important; color: #f3ead9; }
}

/* ============================================================
   Landing page headings: option 4, a modern serif with one
   italic word. One line, nothing overlapping. Meet Hana keeps
   its own look.
   ============================================================ */
.so-build-title,
.so-proof-title,
.so-darkframe-title,
.so-pk-head .so-serif,
.so-start-head .so-serif,
.so-reel-title {
  font-family: "Instrument Serif", "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}
.so-build-title em,
.so-proof-title em,
.so-darkframe-title em,
.so-pk-head .so-serif em,
.so-start-head .so-serif em,
.so-reel-title em {
  font-family: inherit !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1em !important;
  line-height: inherit !important;
  letter-spacing: -0.01em !important;
  display: inline !important;
  position: static !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  z-index: auto !important;
  color: #8b779a !important;
}
/* on dark sections the italic word goes soft lilac, on the mauve panel it goes cream */
.so-darkframe-title em,
.so-start-head .so-serif em { color: #c9b0d9 !important; }
.so-pk-head .so-serif em { color: #f3ead9 !important; }

/* ---------- Calmer pages: fewer blocks, more air ---------- */
.so-bw-jump { display: none !important; }
.so-faq-more { border-top: 0; }
.so-faq-more > summary { list-style: none; cursor: pointer; padding: 18px 0 6px; display: inline-flex; gap: 10px; align-items: center; opacity: .7; }
.so-faq-more > summary::-webkit-details-marker { display: none; }
.so-faq-more[open] > summary { display: none; }
.so-faq-more > summary:hover { opacity: 1; }
.so-bw-cta-full .so-next { margin-bottom: 0; }

/* ---------- Case studies: plain reading rows ---------- */
.so-case-read { margin-top: 56px; }
.so-case-read-list { margin-top: 14px; border-top: 1px solid var(--color-sepia); }
.so-case-read-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 32px; padding: 20px 0; border-bottom: 1px solid var(--color-sepia); }
.so-case-read-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-verm); font-weight: 600; padding-top: 4px; }
.so-case-read-d { line-height: 1.6; max-width: 62ch; }
.so-case-read-d p + p { margin-top: 10px; }
@media (max-width: 700px) { .so-case-read-row { grid-template-columns: 1fr; } }

/* ---------- Build notes: each case study in its client's colors ---------- */
.bn { background: var(--bn-paper); color: var(--bn-ink); min-height: 100dvh; font-family: var(--font-sans); font-size: 17px; line-height: 1.55; position: relative; padding-inline: clamp(16px, 4.5vw, 64px); }
.bn::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .04; mix-blend-mode: multiply; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.bn .so-sitebar { margin-inline: calc(-1 * clamp(16px, 4.5vw, 64px)); }
.bn-wrap { max-width: 1200px; margin-inline: auto; padding-top: 72px; position: relative; z-index: 1; }
.bn img { display: block; max-width: 100%; height: auto; }
.bn a { color: var(--bn-accent); text-underline-offset: 3px; }
.bn h1, .bn h2, .bn h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; margin: 0; letter-spacing: -.01em; text-wrap: balance; color: var(--bn-ink); }
.bn h1 em, .bn h2 em, .bn h3 em { font-style: italic; color: var(--bn-accent); }
.bn p { margin: 0; text-wrap: pretty; }
.bn-note { font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-mute); }
.bn-note b { color: var(--bn-accent); font-weight: 500; }
.bn a.bn-back { color: var(--bn-ink); text-decoration: none; }
.bn a.bn-back:hover { color: var(--bn-accent); }

.bn-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px; border-bottom: 1px solid var(--bn-rule); }

.bn-hero { padding-block: clamp(44px, 7vw, 96px) clamp(30px, 4vw, 52px); display: grid; gap: 24px; }
.bn-hero h1 { font-size: clamp(50px, 9vw, 132px); line-height: .9; max-width: 15ch; }
.bn-lede { font-size: clamp(19px, 2vw, 22px); line-height: 1.45; color: var(--bn-ink-2); max-width: 58ch; }
.bn-status { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bn-ink); border: 1px solid var(--bn-rule); border-radius: 999px; padding: 8px 12px; }
.bn-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bn-accent); }

.bn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin: 0; padding-block: 18px; border-block: 1px solid var(--bn-rule); }
.bn-facts dt { margin-bottom: 6px; }
.bn-facts dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--bn-ink); }

.bn-tn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 8px; }
.bn-panel { border: 1px solid var(--bn-rule); background: var(--bn-paper-2); display: grid; grid-template-rows: auto 1fr auto; min-width: 0; margin: 0; }
.bn-chrome { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--bn-rule); min-width: 0; }
.bn-chrome i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bn-rule); }
.bn-chrome span { margin-left: 10px; font: 400 12px/1 var(--font-mono); color: var(--bn-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-panel figcaption, .bn-cap { padding: 12px 14px; border-top: 1px solid var(--bn-rule); font: 400 12px/1.45 var(--font-mono); color: var(--bn-mute); }
.bn-then { padding: clamp(22px, 3.4vw, 40px); display: grid; align-content: center; gap: 18px; }
.bn-then blockquote { margin: 0; font: italic 400 clamp(22px, 2.4vw, 30px)/1.25 "Instrument Serif", Georgia, serif; color: var(--bn-ink); }
.bn-then-meta { display: grid; gap: 6px; }
.bn-panel-now { background: var(--bn-deep); border-color: var(--bn-deep); }
.bn-panel-now .bn-chrome { border-color: rgba(255,255,255,.12); }
.bn-panel-now .bn-chrome i { background: rgba(255,255,255,.22); }
.bn-panel-now .bn-chrome span, .bn-panel-now figcaption { color: var(--bn-deep-mute); border-color: rgba(255,255,255,.12); }
.bn-now-img { display: block; overflow: hidden; }
.bn-now-img img { width: 100%; height: 100%; object-fit: cover; }

.bn-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 6vw, 96px); padding-block: clamp(52px, 7vw, 100px); border-top: 1px solid var(--bn-rule); margin-top: clamp(40px, 5vw, 72px); }
.bn-sec + .bn-sec { margin-top: 0; }
.bn-sec h2 { font-size: clamp(36px, 4.8vw, 64px); line-height: .98; margin-top: 16px; }
.bn-body { display: grid; gap: 18px; align-content: start; color: var(--bn-ink-2); font-size: 18px; max-width: 64ch; }
.bn-body strong { color: var(--bn-ink); font-weight: 600; }
.bn-pull { font: 400 clamp(26px, 3vw, 38px)/1.12 "Instrument Serif", Georgia, serif !important; color: var(--bn-ink) !important; border-left: 2px solid var(--bn-accent); padding-left: 20px; }
.bn-pull small { display: block; margin-top: 12px; font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-mute); }

.bn-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; counter-reset: bnr; }
.bn-rules div { border-top: 1px solid var(--bn-rule); padding-block: 18px 20px; display: grid; gap: 6px; }
.bn-rules h3 { font-size: 26px; line-height: 1.1; }
.bn-rules h3::before { counter-increment: bnr; content: "0" counter(bnr); display: block; font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--bn-accent); margin-bottom: 10px; }
.bn-rules p { font-size: 16px; color: var(--bn-ink-2); }

.bn-cmp { width: 100%; border-collapse: collapse; font-size: 16px; }
.bn-cmp th, .bn-cmp td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid var(--bn-rule); }
.bn-cmp thead th { font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-mute); border-top: 0; padding-bottom: 10px; }
.bn-cmp tbody th { font: 400 22px/1.15 "Instrument Serif", Georgia, serif; color: var(--bn-ink); width: 22%; }
.bn-cmp td { color: var(--bn-ink-2); width: 39%; }
.bn-cmp td.now { color: var(--bn-ink); }
.bn-cmp td.now::before { content: "→ "; color: var(--bn-accent); }

.bn-decisions { border-top: 1px solid var(--bn-rule); padding-top: clamp(52px, 7vw, 100px); }
.bn-decisions > header { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.bn-decisions > header h2 { font-size: clamp(40px, 6vw, 84px); line-height: .94; max-width: 16ch; }
.bn-dec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 5vw, 72px); padding-block: clamp(32px, 4vw, 52px); border-top: 1px solid var(--bn-rule); }
.bn-dec h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.02; margin-top: 12px; }
.bn-txt { display: grid; gap: 14px; align-content: start; min-width: 0; }
.bn-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 18px; font-size: 17px; color: var(--bn-ink-2); margin: 0; }
.bn-kv dt { font: 500 11.5px/1.9 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-accent); }
.bn-kv dd { margin: 0 0 10px; }
.bn-kv dd strong { color: var(--bn-ink); font-weight: 600; }
.bn-shot { margin: 6px 0 0; border: 1px solid var(--bn-deep); background: var(--bn-deep); min-width: 0; }
.bn-shot img, .bn-shot video { width: 100%; display: block; }
.bn-shot figcaption { padding: 10px 14px; font: 400 12px/1.45 var(--font-mono); color: var(--bn-deep-mute); border-top: 1px solid rgba(255,255,255,.12); }
.bn-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bn-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.bn-sw { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bn-sw div { aspect-ratio: 1; border: 1px solid var(--bn-rule); display: flex; align-items: flex-end; padding: 8px; font: 400 10.5px/1.3 var(--font-mono); }
.bn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bn-stats div { border-top: 1px solid var(--bn-accent); padding-top: 12px; display: grid; gap: 6px; align-content: start; }
.bn-stats b { font: 400 clamp(36px, 4vw, 52px)/.95 "Instrument Serif", Georgia, serif; color: var(--bn-ink); }
.bn-stats span { font-size: 15px; color: var(--bn-ink-2); line-height: 1.4; }

.bn-logo-note { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 5vw, 64px); align-items: center; background: var(--bn-deep); color: var(--bn-deep-ink); padding: clamp(24px, 4vw, 48px); margin-block: clamp(32px, 5vw, 56px); }
.bn-logo-media img { max-width: 260px; width: 100%; }
.bn-logo-note h3 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.02; color: var(--bn-deep-ink); }
.bn-logo-note p { color: var(--bn-deep-ink); opacity: .82; margin-top: 12px; }
.bn-logo-note .bn-note { color: var(--bn-deep-mute); opacity: 1; margin-top: 0; }

.bn-next { list-style: none; margin: 0; padding: 0; display: grid; }
.bn-next li { border-top: 1px solid var(--bn-rule); padding-block: 14px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 17px; color: var(--bn-ink-2); }
.bn-next-mark { color: var(--bn-accent); }
.bn-next strong { color: var(--bn-ink); font-weight: 600; }

.bn-quote { font: italic 400 clamp(24px, 2.8vw, 34px)/1.25 "Instrument Serif", Georgia, serif; color: var(--bn-ink); }

.bn-close { text-align: center; padding-block: clamp(64px, 10vw, 140px); border-top: 1px solid var(--bn-rule); display: grid; gap: 22px; justify-items: center; margin-top: clamp(40px, 5vw, 72px); }
.bn-close h2 { font-size: clamp(44px, 7.6vw, 112px); line-height: .92; max-width: 14ch; }
.bn-close > p:not(.bn-note) { color: var(--bn-ink-2); max-width: 52ch; font-size: 18px; }
.bn .bn-btn { display: inline-flex; gap: 8px; align-items: center; background: var(--bn-ink); color: var(--bn-paper); text-decoration: none; font: 600 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; padding: 16px 22px; border-radius: 999px; margin-top: 6px; }
.bn .bn-btn:hover { background: var(--bn-accent); }
.bn-credit { border-top: 1px solid var(--bn-rule); padding-block: 26px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; font-size: 14px; color: var(--bn-mute); }
.bn-credit p { max-width: 68ch; }
.bn-credit b { display: block; margin-bottom: 8px; font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-ink); }

@media (max-width: 900px) {
  .bn-tn, .bn-sec, .bn-dec, .bn-logo-note { grid-template-columns: 1fr; }
  .bn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bn { font-size: 16px; }
  .bn-rules, .bn-two, .bn-stats { grid-template-columns: 1fr; }
  .bn-three { grid-template-columns: 1fr; }
  .bn-sw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bn-kv { grid-template-columns: 1fr; }
  .bn-kv dd { margin-bottom: 14px; }
  .bn-bar .bn-note:last-child { display: none; }
  .bn-cmp thead { display: none; }
  .bn-cmp, .bn-cmp tbody, .bn-cmp tr, .bn-cmp th, .bn-cmp td { display: block; width: 100%; }
  .bn-cmp tr { border-top: 1px solid var(--bn-rule); padding-block: 14px; }
  .bn-cmp th, .bn-cmp td { border: 0; padding: 4px 0; }
  .bn-cmp td:not(.now)::before { content: "Then: "; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bn-mute); }
  .bn-cmp td.now::before { content: "Now → "; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
}
.bn .so-sitebar { background: color-mix(in srgb, var(--bn-paper) 90%, transparent) !important; border-bottom-color: var(--bn-rule) !important; }
.bn .so-sitebar a:not(.so-sitebar-cta) { color: var(--bn-ink) !important; }
.bn .so-sitebar .so-sitebar-cta { background: var(--bn-ink) !important; color: var(--bn-paper) !important; }
.bn-logo-media img { background: var(--bn-paper); }
.bn-logo-media img.bn-mark { background: var(--bn-paper); padding: clamp(22px, 3vw, 40px); max-width: 300px; width: 100%; aspect-ratio: 789 / 907; object-fit: contain; box-sizing: border-box; }

/* Build notes: motion + interaction */
.bn-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--bn-accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 400; pointer-events: none; }
.bn-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--bn-d, 0ms); }
.bn-rv.is-in { opacity: 1; transform: none; }
@media (min-width: 901px) {
  .bn-dec > div:first-child, .bn-sec > div:first-child { position: sticky; top: 96px; align-self: start; }
}
.bn-rules > div { transition: background .25s ease, padding .25s ease; }
.bn-rules > div:hover { background: var(--bn-paper-2); padding-inline: 14px; }
.bn-cmp tbody tr { transition: background .2s ease; }
.bn-cmp tbody tr:hover { background: var(--bn-paper-2); }
.bn-shot img, .bn-now-img img { cursor: zoom-in; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bn-shot { overflow: hidden; }
.bn-shot:hover img { transform: scale(1.015); }
.bn-sw div { transition: transform .25s ease; }
.bn-sw div:hover { transform: translateY(-4px); }
.bn-zoom { position: fixed; inset: 0; z-index: 500; background: rgba(10,10,10,.88); display: grid; place-items: center; gap: 14px; padding: 24px; border: 0; cursor: zoom-out; align-content: center; }
.bn-zoom img { max-width: min(1400px, 100%); max-height: 84vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.bn-zoom .bn-note { color: rgba(255,255,255,.7); }

.bn-tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 56px); padding-block: clamp(52px, 7vw, 100px); border-top: 1px solid var(--bn-rule); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.bn-tour-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.bn-tour-list button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; text-align: left; background: none; border: 0; border-top: 1px solid var(--bn-rule); padding: 14px 8px; cursor: pointer; color: var(--bn-ink-2); font: inherit; transition: background .2s ease, color .2s ease; }
.bn-tour-list li:last-child button { border-bottom: 1px solid var(--bn-rule); }
.bn-tour-list button:hover { background: var(--bn-paper-2); }
.bn-tour-list button.is-on { background: var(--bn-deep); color: var(--bn-deep-ink); }
.bn-tour-no { font: 500 11.5px/1.7 var(--font-mono); letter-spacing: .08em; color: var(--bn-accent); }
.bn-tour-list button.is-on .bn-tour-no { color: var(--bn-deep-mute); }
.bn-tour-t { display: block; font: 400 21px/1.15 "Instrument Serif", Georgia, serif; color: inherit; }
.bn-tour-list button:not(.is-on) .bn-tour-t { color: var(--bn-ink); }
.bn-tour-d { display: block; font-size: 14px; line-height: 1.4; margin-top: 4px; opacity: .85; }
.bn-tour-note { margin-top: 14px !important; font-size: 14px; color: var(--bn-mute); }
.bn-tour-frame { margin: 0; background: var(--bn-deep); border: 1px solid var(--bn-deep); position: sticky; top: 96px; }
.bn-tour-frame .bn-chrome { border-color: rgba(255,255,255,.12); }
.bn-tour-frame .bn-chrome i { background: rgba(255,255,255,.22); }
.bn-tour-frame .bn-chrome span { color: var(--bn-deep-mute); }
.bn a.bn-tour-visit { margin-left: auto; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bn-deep-ink); text-decoration: none; }
.bn-tour-screen { position: relative; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.bn-tour-screen video, .bn-tour-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; animation: bnFade .45s ease; }
.bn-tour-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--bn-deep-mute); transform-origin: 0 50%; animation-name: bnGrow; animation-timing-function: linear; animation-fill-mode: both; }
.bn-tour-frame figcaption { padding: 10px 14px; font: 400 12px/1.45 var(--font-mono); color: var(--bn-deep-mute); border-top: 1px solid rgba(255,255,255,.12); }
@keyframes bnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bnGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .bn-tour { grid-template-columns: 1fr; }
  .bn-tour-frame { position: relative; top: 0; order: -1; }
  .bn-tour-side { order: 1; }
}
@media (prefers-reduced-motion: reduce) { .bn-rv { opacity: 1; transform: none; } }

/* Light frames everywhere: Now panel, screenshots and the tour match the Then panel */
.bn .bn-panel-now { background: var(--bn-paper-2); border-color: var(--bn-rule); }
.bn .bn-panel-now .bn-chrome, .bn .bn-panel-now figcaption { border-color: var(--bn-rule); }
.bn .bn-panel-now .bn-chrome i { background: var(--bn-rule); }
.bn .bn-panel-now .bn-chrome span, .bn .bn-panel-now figcaption { color: var(--bn-mute); }
.bn .bn-shot { background: var(--bn-paper-2); border-color: var(--bn-rule); }
.bn .bn-shot figcaption { color: var(--bn-mute); border-top-color: var(--bn-rule); }
.bn .bn-tour-frame { background: var(--bn-paper-2); border-color: var(--bn-rule); }
.bn .bn-tour-frame .bn-chrome { border-color: var(--bn-rule); }
.bn .bn-tour-frame .bn-chrome i { background: var(--bn-rule); }
.bn .bn-tour-frame .bn-chrome span, .bn .bn-tour-frame figcaption { color: var(--bn-mute); border-top-color: var(--bn-rule); }
.bn a.bn-tour-visit { color: var(--bn-ink); }
.bn-tour-bar { background: var(--bn-accent); }
.bn-strip-sec { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 14px; }
.bn-strip { display: grid; grid-template-columns: repeat(var(--bn-cols, 3), minmax(0, 1fr)); gap: 8px; }
.bn-strip figure { margin: 0; aspect-ratio: var(--bn-ratio, 4 / 5); overflow: hidden; background: var(--bn-paper-2); }
.bn-strip img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.bn-strip figure:hover img { transform: scale(1.03); }
@media (max-width: 900px) { .bn-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bn-tour-screen img { object-fit: contain; object-position: center; background: var(--bn-paper-2); }

/* Photo tours: a plain box, no browser bar */
.bn .bn-tour-frame.is-photos { background: transparent; border: 0; }
.bn-tour-frame.is-photos .bn-tour-screen { aspect-ratio: auto; height: min(74vh, 680px); background: transparent; display: grid; place-items: center; }
.bn-tour-frame.is-photos .bn-tour-screen img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: none; border: 1px solid var(--bn-rule); }
.bn-tour-frame.is-photos .bn-tour-bar { display: none; }
.bn .bn-tour-frame.is-photos figcaption { border-top: 0; padding: 12px 0 0; text-align: center; }
.bn a.bn-tour-link { display: inline-block; margin-top: 14px; font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-ink); text-decoration: none; border-bottom: 1px solid var(--bn-accent); padding-bottom: 2px; }
@media (max-width: 900px) { .bn-tour-frame.is-photos .bn-tour-screen { height: auto; max-height: 72vh; } .bn-tour-frame.is-photos .bn-tour-screen img { max-height: 72vh; } }

:root{--font-sans:"Manrope","Helvetica Neue",Arial,sans-serif;--font-display:"Playfair Display",Georgia,serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;--font-cjk:"Zhi Mang Xing","KaiTi",serif;}
html,body{background:var(--color-rice);}