/* Generated by scripts/build-css.mjs - do not edit. Edit the partials in src/styles/ instead. */

/* ---- fonts.css ---- */
/* Self-hosted fonts (Instrument Serif, Inter): latin + latin-ext subsets, same files Google Fonts serves. */
/* Inter is one variable file, but it is declared per weight point (matching Google CSS exactly) so that
   in-between weights like 650 or 850 snap to the same instances the site rendered with Google Fonts. */
/* latin-ext */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/instrument-serif-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/instrument-serif-italic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/instrument-serif-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/instrument-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base.css ---- */
:root {
  --bg: #f7f6f1;
  --surface: #ffffff;
  --surface-2: #ece8df;
  --text: #09111b;
  --muted: #627080;
  --line: rgba(9, 17, 27, 0.12);
  --line-strong: rgba(9, 17, 27, 0.22);
  --white: #ffffff;
  --radius: 8px;
  --pad: clamp(18px, 4vw, 64px);
  --max: 1360px;
  --shadow: 0 28px 80px rgba(31, 27, 18, 0.14);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }

h1 {
  margin-top: 0;
  max-width: 560px;
  font-size: clamp(42px, 5vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.06em;
  font-weight: 900;
}

/* ---- header.css ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad);
  border-bottom: 1px solid transparent;
  transition: padding 180ms ease, background 160ms ease, border-color 160ms ease;
}

.nav-tagline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text);
  font-size: clamp(17px, 1.42vw, 23px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.052em;
  text-align: center;
  white-space: nowrap;
  transition: font-size 180ms ease, opacity 180ms ease, transform 180ms ease, letter-spacing 180ms ease;
}

.nav-tagline span {
  color: rgba(9, 17, 27, 0.66);
  font-family: "Instrument Serif", serif;
  font-size: 1.12em;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 180ms ease, font-size 180ms ease, font-weight 180ms ease;
}

.nav-tagline strong {
  position: relative;
  display: inline-block;
  margin-left: 0.08em;
  color: var(--text);
  font-weight: 950;
  letter-spacing: -0.058em;
  transition: letter-spacing 180ms ease;
}

.nav-tagline strong::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.07em;
  right: -0.07em;
  bottom: -0.1em;
  height: 0.38em;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 90, 44, 0.18), rgba(255, 90, 44, 0.34));
  transform: rotate(-1deg);
  transition: opacity 180ms ease, height 180ms ease, bottom 180ms ease;
}

.site-header.is-scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(247, 246, 241, 0.84);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px);
}

.site-header.is-scrolled .nav-tagline {
  transform: translateX(-50%) translateY(-1px);
  font-size: clamp(13px, 0.92vw, 15px);
  letter-spacing: -0.026em;
  opacity: 0.82;
}

.site-header.is-scrolled .nav-tagline span {
  color: rgba(9, 17, 27, 0.56);
  font-family: inherit;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
}

.site-header.is-scrolled .nav-tagline strong {
  letter-spacing: -0.03em;
}

.site-header.is-scrolled .nav-tagline strong::after {
  bottom: -0.12em;
  height: 0.12em;
  opacity: 0.45;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  min-width: 0;
  height: 42px;
}

.wordmark img {
  display: block;
  width: 46px;
  height: 42px;
  object-fit: contain;
}

.wordmark span {
  display: inline-block;
  overflow: visible;
  max-width: 96px;
  color: #0d3155;
  border: 0;
  font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: none;
  white-space: nowrap;
  transform: translateY(1px);
  transform-origin: left center;
  transition: max-width 180ms ease, opacity 140ms ease, transform 180ms ease;
}

.site-header.is-scrolled .wordmark span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px) translateY(1px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.home-page .nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 1px;
  color: rgba(9, 17, 27, 0.7);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.home-page .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: #ff5a2c;
  opacity: 0;
  transform: scaleX(0.48);
  transform-origin: left center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-links a:hover { color: var(--text); }

.home-page .nav-links a:hover {
  color: var(--text);
}

.home-page .nav-links a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 17px;
  border-radius: 999px;
  background: var(--text);
  color: #fff !important;
}

.menu-button {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  place-items: center;
  gap: 4px;
}

.menu-button span {
  width: 18px;
  height: 2px;
  background: var(--text);
}

/* ---- components.css ---- */
.kicker {
  color: #ff6a3d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
  border: 1px solid transparent;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  background: var(--text);
  color: #fff;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  border-color: var(--line);
}

/* ---- hero.css ---- */
.hero {
  min-height: auto;
  padding: 88px 0 24px;
  background:
    radial-gradient(780px 420px at 16% 18%, rgba(44, 143, 216, 0.08), transparent 62%),
    radial-gradient(680px 400px at 88% 22%, rgba(255, 90, 44, 0.055), transparent 64%),
    linear-gradient(180deg, #fbfaf6 0%, #f7f6f1 82%);
}

.hero-inner {
  max-width: var(--max);
  min-height: 0;
  margin: 0 auto;
  padding: 12px var(--pad) 10px;
  display: grid;
  grid-template-columns: minmax(380px, 0.95fr) minmax(500px, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.case-wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(126px, 12.6vw);
  gap: 12px;
  transform: perspective(1200px) rotateY(5deg);
  transform-origin: left center;
}

.case-wall::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -10px clamp(46px, 6vw, 88px) -10px -10px;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 17, 27, 0.06), rgba(247, 246, 241, 0.08) 58%, rgba(9, 17, 27, 0.035)),
    repeating-linear-gradient(
      -18deg,
      rgba(9, 17, 27, 0.028) 0 1px,
      transparent 1px 13px
    );
  opacity: 0.62;
}

.show-card {
  position: relative;
  grid-column: span 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #f4f7fb;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #0d1117;
  box-shadow: 0 8px 20px rgba(31, 27, 18, 0.1);
  transition: transform 160ms ease, border-color 160ms ease;
}

.show-card::before {
  display: none;
}

.show-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.18));
  opacity: 1;
}

.show-card:hover,
.show-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  outline: none;
}

.show-card-soon {
  cursor: default;
  color: rgba(255, 255, 255, 0.62);
  background: #101418;
  box-shadow: 0 6px 16px rgba(31, 27, 18, 0.08);
  filter: grayscale(1);
}

.show-card-soon:hover,
.show-card-soon:focus-visible {
  transform: none;
  border-color: rgba(9, 17, 27, 0.08);
}

.show-card-large {
  grid-column: span 3;
  grid-row: span 2;
}

.show-card-tall {
  grid-column: span 2;
  grid-row: span 2;
}

.show-card strong {
  position: relative;
  z-index: 2;
  width: fit-content;
  display: block;
  max-width: none;
  padding: 5px 8px 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(244, 247, 251, 0.78);
  font-size: clamp(12px, 1.15vw, 17px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.hero-copy {
  justify-self: end;
  max-width: 720px;
  text-align: center;
}

.hero-copy .kicker {
  margin-bottom: 12px;
}

.hero-title {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  font-size: clamp(42px, 4.25vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.052em;
  font-weight: 900;
}

.hero-title span {
  display: inline-block;
}

.work-line,
.manual-line {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.16em;
  white-space: nowrap;
}

.work-line {
  max-width: 680px;
  justify-content: center;
}

.hero-title em {
  position: relative;
  display: inline-block;
  padding: 0.02em 0.12em 0.08em;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0;
  background: #ff5a2c;
  border-radius: 6px;
  transform: rotate(-1.5deg) translateY(-0.02em);
  box-shadow: 0 16px 34px rgba(255, 90, 44, 0.22);
}

.hero-title em::after {
  content: "";
  position: absolute;
  inset: 0.12em -0.06em auto auto;
  width: 0.24em;
  height: 0.24em;
  border-top: 0.05em solid rgba(255, 255, 255, 0.72);
  border-right: 0.05em solid rgba(255, 255, 255, 0.72);
}

.manual-line {
  position: relative;
  margin-top: 18px;
  padding-top: 0.16em;
  justify-content: center;
  color: var(--text);
}

.not-stamp {
  position: absolute;
  left: 50%;
  top: -0.8em;
  padding: 0.2em 0.56em 0.22em;
  border: 2px solid #ff5a2c;
  border-radius: 999px;
  color: #ff5a2c;
  font-size: 0.22em;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-5deg);
}

.manual-line span:not(.not-stamp) {
  position: relative;
  color: rgba(9, 17, 27, 0.56);
}

.manual-line span:not(.not-stamp)::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.04em;
  top: 53%;
  height: 0.08em;
  background: #ff5a2c;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.hero-subtext {
  margin-top: 26px;
  width: min(100%, 720px);
  max-width: 720px;
  display: grid;
  gap: 14px;
  color: var(--muted);
}

.subtext-lead {
  color: rgba(9, 17, 27, 0.74);
  font-size: clamp(18px, 1.44vw, 22px);
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: -0.018em;
  white-space: nowrap;
}

.subtext-support {
  width: 100%;
  max-width: none;
  color: rgba(9, 17, 27, 0.86);
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.5;
  font-weight: 500;
}

.hero-actions {
  width: min(100%, 720px);
  max-width: 720px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
}

.hero-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding-inline: 20px;
  border-width: 2.5px;
  border-style: solid;
  border-radius: 6px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.hero-actions .button:hover {
  transform: none;
}

.hero-actions .button-primary {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.hero-actions .button-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.hero-actions .button-primary:hover {
  background: #ff5a2c;
  color: #fff;
  border-color: #ff5a2c;
}

.hero-actions .button-secondary:hover {
  background: var(--text);
  color: #fff;
}

.hero-note {
  width: min(100%, 720px);
  max-width: 720px;
  margin-top: 18px;
  min-height: 0;
  padding-top: 22px;
  padding-bottom: 0;
  border-top: 1px solid rgba(9, 17, 27, 0.12);
  display: grid;
  align-content: start;
  color: rgba(9, 17, 27, 0.72);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 550;
  text-align: center;
}

.hero-note-lead,
.hero-note-end {
  display: block;
  line-height: 1.35;
}

.hero-note-lead {
  color: rgba(9, 17, 27, 0.86);
}

.hero-note-end {
  margin-top: 2px;
  color: rgba(9, 17, 27, 0.76);
}

.hero-note-rail {
  position: relative;
  width: min(100%, 520px);
  margin: 14px auto 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-note-rail::before {
  display: none;
}

.hero-note-rail span {
  position: relative;
  z-index: 1;
  width: fit-content;
  justify-self: center;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #ff5a2c;
  box-shadow: none;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-note-rail span:nth-child(1) { transform: none; }
.hero-note-rail span:nth-child(2) { transform: none; }
.hero-note-rail span:nth-child(3) { transform: none; }

.hero-scroll-cue {
  display: none;
}

/* ---- cases.css ---- */
.cases-section {
  max-width: none;
  margin: 0 auto;
  min-height: auto;
  padding: clamp(42px, 4.8vw, 66px) var(--pad) clamp(56px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background:
    linear-gradient(180deg, rgba(247, 246, 241, 0) 0%, #ece8df 18%, #ece8df 100%);
}

.cases-head {
  width: min(100%, var(--max));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(14px, 2vw, 22px);
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}

.cases-title {
  font-size: clamp(25px, 2.8vw, 44px);
  line-height: 0.96;
  letter-spacing: -0.052em;
  font-weight: 900;
  white-space: nowrap;
}

.case-controls {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.case-filter-stack {
  min-width: 0;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.case-controls .filter-group {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.case-controls .filter-group::-webkit-scrollbar {
  display: none;
}

.case-controls .case-search {
  flex: 0 0 auto;
}

.case-search {
  width: min(280px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.54);
}

.case-search span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.case-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.case-carousel {
  position: relative;
  width: min(100%, var(--max));
  min-height: clamp(460px, 56svh, 620px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: clamp(24px, 3vw, 42px) 0;
  border-top: 1px solid rgba(9, 17, 27, 0.1);
  border-bottom: 1px solid rgba(9, 17, 27, 0.1);
}

.home-case-grid {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, clamp(145px, 13vw, 195px));
  grid-auto-columns: clamp(175px, 14vw, 225px);
  grid-auto-rows: clamp(145px, 13vw, 195px);
  gap: clamp(10px, 1vw, 14px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--pad);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(9, 17, 27, 0.55) rgba(9, 17, 27, 0.08);
  padding: 2px 0 18px;
}

.home-case-grid.has-many-cases {
  grid-auto-flow: column dense;
  grid-template-rows: repeat(3, clamp(126px, 11vw, 172px));
  grid-auto-columns: clamp(165px, 13vw, 210px);
  grid-auto-rows: clamp(126px, 11vw, 172px);
}

.case-tile {
  position: relative;
  grid-column: span 1;
  grid-row: span 1;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  color: #f4f7fb;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(9, 17, 27, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.42)),
    linear-gradient(155deg, #182331 0%, #101820 58%, #070c13 100%);
  box-shadow: 0 16px 34px rgba(31, 27, 18, 0.16);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.case-tile-horizontal {
  grid-column: span 2;
}

.case-tile-vertical {
  grid-row: span 2;
}

.case-tile::before {
  display: none;
}

.case-tile.is-active-case {
  border-color: color-mix(in srgb, var(--accent) 68%, rgba(9, 17, 27, 0.08));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.28)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 76%, #151a20) 0%, #c94620 44%, #111821 100%);
  box-shadow: 0 22px 58px rgba(255, 90, 44, 0.28);
}

.case-tile.is-active-case .case-tile-body {
  gap: 10px;
  padding-inline: clamp(18px, 2vw, 30px);
}

.case-tile.is-active-case .case-tile-title {
  max-width: 14ch;
  font-size: clamp(40px, 3.9vw, 60px);
  line-height: 0.88;
}

.case-tile.is-active-case .case-business {
  max-width: 36ch;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1;
}

.case-tile.is-live-case {
  background: linear-gradient(180deg, rgba(12, 14, 18, 0.98), rgba(4, 6, 9, 1));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.case-tile .case-tile-title {
  width: fit-content;
  max-width: none;
  padding: 8px 12px 9px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  color: #fff;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.case-tile .case-business {
  max-width: 30ch;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(11.5px, 0.9vw, 13px);
  line-height: 1.08;
}

.case-tile-vertical .case-tile-title {
  max-width: min(100%, 12ch);
  white-space: normal;
  overflow-wrap: break-word;
  font-size: clamp(18px, 1.7vw, 26px);
}

/* The long "Photographer Back Office" title is the only one that wraps to two
   lines, so its pill reads larger than the single-line tiles. Keep it on one
   line at a footprint that matches the rest. Scoped to this card only. */
.case-tile[aria-label^="Photographer"] .case-tile-title {
  white-space: nowrap;
  max-width: none;
  padding-left: 9px;
  padding-right: 9px;
  font-size: clamp(16px, 1.7vw, 24px);
}

.case-tile[aria-label^="Rental Property Admin"] .case-tile-title {
  max-width: min(100%, 13ch);
  white-space: normal;
  overflow-wrap: break-word;
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 0.96;
}

.case-tile-vertical .case-business {
  max-width: min(100%, 18ch);
  white-space: normal;
  line-height: 1.18;
}

.case-tile .case-tile-body {
  gap: 9px;
}

.case-tile.is-live-case .case-tile-title {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
}

.case-tile.is-coming-soon .case-tile-title {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.case-tile.is-coming-soon .case-business {
  color: rgba(255, 255, 255, 0.56);
}

.case-tile.is-coming-soon {
  color: rgba(255, 255, 255, 0.42);
  cursor: default;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.34)),
    linear-gradient(155deg, #252b31 0%, #1c2228 58%, #14191e 100%);
  border-color: rgba(9, 17, 27, 0.24);
  box-shadow: none;
  filter: grayscale(1);
  opacity: 0.68;
}

.case-tile.is-coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 12px
  );
  opacity: 0.55;
}

.case-lock {
  width: 32px;
  height: 32px;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.26);
  border-radius: 9px;
  position: relative;
}

.case-lock::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: -10px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.26);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.case-status {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  transform: rotate(-1.7deg);
}

.case-tile-body {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  min-height: 100%;
  padding: clamp(14px, 1.4vw, 20px);
}

.case-country-flag {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 34px;
  height: 23px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.case-country-flag span:nth-child(1) { background: #ae1c28; }
.case-country-flag span:nth-child(2) { background: #ffffff; }
.case-country-flag span:nth-child(3) { background: #21468b; }

.case-country-flag--be {
  grid-template-rows: none;
  grid-template-columns: repeat(3, 1fr);
}

.case-country-flag--be span:nth-child(1) { background: #000000; }
.case-country-flag--be span:nth-child(2) { background: #ffd90c; }
.case-country-flag--be span:nth-child(3) { background: #ef3340; }

.case-business {
  max-width: min(100%, 24ch);
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 650;
  line-height: 1.24;
  text-align: center;
}

.case-tile-horizontal .case-business { max-width: min(100%, 32ch); white-space: nowrap; }

.case-empty {
  grid-row: 1;
  align-self: center;
  color: var(--muted);
  font-weight: 600;
}

.case-tile.is-live-case:hover,
.case-tile.is-live-case:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.34);
  outline: none;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(16px, 2vw, 30px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.filter {
  position: relative;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(9, 17, 27, 0.5);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: color 160ms ease;
}

.filter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 160ms ease, transform 160ms ease;
}

.filter:hover,
.filter.is-active {
  color: var(--text);
  box-shadow: none;
}

.filter:hover::after,
.filter.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ---- case-detail.css ---- */
.case-detail {
  background: var(--bg);
  overflow-x: hidden;
}

.case-detail-shell {
  padding-top: clamp(58px, 6vw, 78px);
}

.case-detail__back {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad);
}

.case-detail__back-link {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(9, 17, 27, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(9, 17, 27, 0.56);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.case-detail__back-link svg {
  width: 16px;
  height: 16px;
}

.case-detail__back-link:hover,
.case-detail__back-link:focus-visible {
  transform: translateX(-2px);
  border-color: rgba(9, 17, 27, 0.26);
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  outline: none;
}

.case-hero-loop {
  width: 100%;
  max-width: var(--max);
  min-height: auto;
  margin: 0 auto;
  padding: clamp(22px, 3.8vw, 42px) var(--pad) clamp(24px, 3.4vw, 42px);
  display: grid;
  align-content: center;
}

.case-hero-loop > *,
.case-stamp-point > * {
  min-width: 0;
}

/* LOCKED hero layout (see WIP.md "Case Page Hero + Mobile Standard").
   Left title block is vertically CENTERED against the right column, so the
   left side re-centers as the right copy changes length. Keep align-items: center. */
.case-hero-loop__head {
  display: grid;
  grid-template-columns: minmax(320px, 0.48fr) minmax(360px, 0.52fr);
  align-items: center;
  gap: clamp(28px, 5vw, 82px);
}

.case-hero-loop__title-block {
  display: grid;
  gap: 14px;
  padding-top: clamp(2px, 0.5vw, 8px);
}

/* Header reads "<Case name> [logo]" - the loop mark stands in for "Loop".
   baseline so the logo sits on the text baseline, not floating at center. */
.case-loop-mark {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.4vw, 16px);
}

/* Groups the h1 + built-note so the note centers under the WORD only
   (the logo is outside this group, so it is excluded from the centering). */
.case-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.case-loop-mark img {
  width: auto;
  height: clamp(30px, 3.4vw, 52px);
  transform: translateY(0.04em);
}

.case-loop-mark h1 {
  max-width: none;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

@media (min-width: 901px) {
  .case-loop-mark h1 {
    white-space: nowrap;
  }
}

/* Scoped: the long single word "Photographer" needs a smaller hero size so it
   fits without pushing the loop mark. Only this case page; others untouched. */
.case-detail--photographer-back-office .case-loop-mark h1 {
  font-size: clamp(44px, 5vw, 74px);
}

.case-detail--rental-property-admin .case-loop-mark h1 {
  font-size: clamp(40px, 4.05vw, 62px);
}

.case-detail--booking-ops .case-loop-mark h1 {
  font-size: clamp(42px, 4.35vw, 66px);
}

.case-built-note {
  max-width: 31rem;
  color: rgba(9, 17, 27, 0.48);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.38;
  font-weight: 600;
  text-align: center;
}

.case-hero-loop__reading {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}

.case-hero-loop__italic {
  width: 100%;
  max-width: 56rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(24px, 2.7vw, 40px);
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.case-detail--rental-property-admin .case-hero-loop__italic {
  white-space: normal;
}

.case-hero-loop__copy {
  width: 100%;
  max-width: 50rem;
  display: grid;
  gap: 8px;
  color: rgba(9, 17, 27, 0.72);
  font-size: clamp(15.5px, 1.1vw, 18px);
  line-height: 1.48;
  letter-spacing: -0.01em;
  font-weight: 570;
}

.case-hero-loop__copy strong {
  color: var(--text);
  font-weight: 850;
}

.case-specs {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(6px, 1.5vw, 16px) var(--pad) clamp(30px, 4vw, 54px);
  display: grid;
  gap: 0;
}

.case-stamp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 70px);
  padding-top: clamp(8px, 1vw, 14px);
}

.case-stamp-point {
  display: grid;
  align-content: start;
  gap: 11px;
  padding-top: clamp(12px, 1.5vw, 18px);
  border-top: 1px solid rgba(9, 17, 27, 0.16);
}

.case-stamp-point span {
  width: fit-content;
  padding: 5px 8px 6px;
  border: 2px solid #ff5a2c;
  border-radius: 6px;
  color: #ff5a2c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-1.7deg);
}

.case-stamp-point h2 {
  max-width: 22rem;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

@media (min-width: 901px) {
  .case-detail--content-publishing .case-stamp-point h2 {
    min-height: calc(clamp(19px, 1.7vw, 26px) * 2.06);
  }
}

.case-stamp-point p {
  width: 100%;
  max-width: 24rem;
  color: rgba(9, 17, 27, 0.68);
  font-size: clamp(13.5px, 0.96vw, 15.5px);
  line-height: 1.42;
  font-weight: 560;
}

.case-workflow {
  background: #f7f6f1;
  border-top: 1px solid var(--line);
}

/* trim the tall page-section padding above/below these case sections */
.case-workflow.start-flow {
  padding-top: clamp(48px, 5vw, 74px);
  padding-bottom: clamp(40px, 4.5vw, 66px);
}

.case-outcomes.method {
  padding-top: clamp(48px, 5vw, 74px);
  padding-bottom: clamp(52px, 6vw, 82px);
}

.case-workflow .start-copy p {
  max-width: 50rem;
}

.case-workflow .start-copy h2,
.case-outcomes .method-copy h2,
.case-cta h2 {
  white-space: nowrap;
}

.case-inline-link {
  color: #c7461e;
  font-weight: 850;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  transition: color 160ms ease, text-underline-offset 160ms ease;
}

.case-inline-link:hover,
.case-inline-link:focus-visible {
  color: var(--text);
  text-underline-offset: 0.24em;
  outline: none;
}

.case-workflow .start-inner {
  gap: clamp(22px, 2.6vw, 38px);
}

/* Horizontal workflow rail. Numbered nodes sit on the line and say what the
   step does; the ministeps above each node are the operations inside it. */
.case-flow {
  --flow-line: rgba(9, 17, 27, 0.18);
  --cp-top: clamp(96px, 9vw, 116px);
  position: relative;
  margin-top: 0;
}

/* base track + an orange pulse that runs 01 -> 06 like a current */
.case-flow::before,
.case-flow::after {
  content: "";
  position: absolute;
  left: 8.33%;
  right: 8.33%;
  top: calc(var(--cp-top) + 28px);
  height: 2px;
  transform: translateY(-1px);
}

.case-flow::before {
  background: var(--flow-line);
}

.case-flow::after {
  background-image: linear-gradient(90deg, rgba(255, 90, 44, 0), #ff5a2c, rgba(255, 90, 44, 0));
  background-size: 26% 100%;
  background-repeat: no-repeat;
  background-position: -26% 0;
  animation: case-flow-current 3s linear infinite;
}

@keyframes case-flow-current {
  to {
    background-position: 126% 0;
  }
}

@keyframes case-flow-current-v {
  to {
    background-position: 0 155%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-flow::after,
  .cp::after {
    animation: none;
    opacity: 0;
  }
}

.case-flow__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 18px);
}

.cp {
  display: grid;
  grid-template-rows: var(--cp-top) 56px auto;
  justify-items: center;
  text-align: center;
}

/* ministeps above the line - editorial serif, no boxes */
.cp__mini {
  grid-row: 1;
  align-self: end;
  justify-self: center;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 5px;
  width: fit-content;
  max-width: 12rem;
  text-align: left;
}

.cp__mini li {
  color: rgba(9, 17, 27, 0.66);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* node sits on the line */
.cp__node {
  grid-row: 2;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(9, 17, 27, 0.18);
}

/* below the line: what the step does + an optional technical dropdown */
.cp__foot {
  grid-row: 3;
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  max-width: 12rem;
}

.cp__title {
  margin: 0;
  color: #ff5a2c;
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
}

.cp__more {
  width: 100%;
}

.cp__more summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 auto;
  color: rgba(9, 17, 27, 0.5);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.cp__more summary::-webkit-details-marker {
  display: none;
}

.cp__more summary::after {
  content: "+";
  font-size: 13px;
  line-height: 1;
  color: #ff5a2c;
}

.cp__more[open] summary::after {
  content: "\2212"; /* minus */
}

.cp__more summary:hover {
  color: rgba(9, 17, 27, 0.78);
}

.cp__more ul {
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  width: fit-content;
  max-width: 12rem;
  text-align: left;
}

.cp__more li {
  position: relative;
  padding-left: 15px;
  color: rgba(9, 17, 27, 0.62);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.cp__more li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: rgba(255, 90, 44, 0.78);
  font-weight: 700;
}

.case-workflow__tag {
  width: fit-content;
  justify-self: center;
  padding: 5px 8px;
  border: 1px solid rgba(255, 90, 44, 0.26);
  color: #c94620;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.case-step-details {
  max-width: 15rem;
  color: rgba(9, 17, 27, 0.6);
  font-size: 13px;
  line-height: 1.45;
}

.case-step-details summary {
  width: fit-content;
  margin: 6px auto 0;
  color: rgba(9, 17, 27, 0.76);
  cursor: pointer;
  font-weight: 800;
}

.case-step-details p {
  margin: 8px 0 0;
}

.case-hood {
  display: grid;
  grid-template-columns: minmax(230px, 0.3fr) minmax(0, 0.7fr);
  gap: clamp(22px, 4vw, 54px);
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid rgba(9, 17, 27, 0.14);
  background: #ece8df;
}

.case-hood__copy {
  display: grid;
  align-content: start;
  gap: 12px;
}

.case-hood__copy h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.case-hood__copy p {
  max-width: 18rem;
  margin: 0;
  color: rgba(9, 17, 27, 0.66);
  font-size: 15px;
  line-height: 1.44;
  font-weight: 590;
}

.case-hood__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(9, 17, 27, 0.12);
  border: 1px solid rgba(9, 17, 27, 0.12);
}

.case-hood__grid article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 126px;
  padding: clamp(15px, 1.8vw, 20px);
  background: #f7f6f1;
}

.case-hood__grid span {
  color: #c94620;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.case-hood__grid p {
  margin: 0;
  color: rgba(9, 17, 27, 0.68);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 550;
}

.case-outcomes {
  background: #ece8df;
}

.case-outcomes .method-copy {
  align-items: end;
}

.case-outcomes .method-copy p {
  color: rgba(9, 17, 27, 0.7);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.32;
  letter-spacing: -0.022em;
  font-weight: 600;
}

/* closing call to action */
.case-cta {
  background: #ff5a2c;
  padding: clamp(26px, 3.3vw, 42px) var(--pad);
}

.case-cta__inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 6vw, 88px);
  color: var(--text);
  text-decoration: none;
  transition: transform 180ms ease;
}

.case-cta__inner:hover {
  transform: translateY(-2px);
}

.case-cta__inner:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 8px;
}

.case-cta h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.058em;
  font-weight: 900;
}

.case-cta__copy {
  display: grid;
  justify-items: start;
  gap: 9px;
  max-width: 35rem;
}

.case-cta h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 860;
}

.case-cta p {
  margin: 0;
  color: rgba(9, 17, 27, 0.72);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.45;
  font-weight: 540;
}

.case-cta__stamp {
  width: fit-content;
  justify-self: center;
  margin-top: 13px;
  padding: 10px 15px 11px;
  border: 2.5px solid var(--text);
  border-radius: 6px;
  color: var(--text);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-1.7deg);
  transition: background 180ms ease, color 180ms ease;
}

.case-cta__inner:hover .case-cta__stamp {
  background: var(--text);
  color: #ff5a2c;
}

.case-outcomes .method-orb strong {
  max-width: 9rem;
}

.case-outcomes .method-orb p {
  max-width: 10rem;
}

@media (max-width: 900px) {
  .case-hero-loop__head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .case-loop-mark {
    align-items: baseline;
    flex-direction: row;
  }

  .case-title-group {
    align-items: flex-start;
  }

  .case-built-note {
    text-align: left;
    white-space: nowrap;
    font-size: clamp(7.5px, 2.3vw, 11px);
  }

  .case-loop-mark h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(46px, 14.5vw, 62px);
  }

  .case-hero-loop__copy,
  .case-stamp-point p {
    max-width: calc(100vw - (var(--pad) * 2));
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .case-hero-loop__italic {
    max-width: calc(100vw - (var(--pad) * 2));
    white-space: nowrap;
    font-size: clamp(15px, 4.6vw, 30px);
  }

  .case-detail--rental-property-admin .case-hero-loop__italic {
    white-space: normal;
  }

  .case-stamp-grid {
    grid-template-columns: 1fr;
  }

  .case-stamp-point {
    min-height: auto;
  }

  .case-step-details,
  .case-step-details summary {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .case-workflow__tag {
    justify-self: start;
  }

  .case-flow::before,
  .case-flow::after {
    display: none;
  }

  .case-flow__track {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* vertical connecting line + downward current between step nodes */
  .cp {
    position: relative;
  }

  .cp:not(:last-child)::before,
  .cp:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 28px;
    bottom: -56px;
    width: 2px;
    transform: translateX(-1px);
    z-index: 0;
  }

  .cp:not(:last-child)::before {
    background: var(--flow-line);
  }

  .cp:not(:last-child)::after {
    background-image: linear-gradient(180deg, rgba(255, 90, 44, 0), #ff5a2c, rgba(255, 90, 44, 0));
    background-size: 100% 55%;
    background-repeat: no-repeat;
    background-position: 0 -55%;
    animation: case-flow-current-v 3s linear infinite;
  }

  .cp:nth-child(2)::after { animation-delay: 0.5s; }
  .cp:nth-child(3)::after { animation-delay: 1s; }
  .cp:nth-child(4)::after { animation-delay: 1.5s; }
  .cp:nth-child(5)::after { animation-delay: 2s; }

  .cp {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: start;
    align-items: start;
    text-align: left;
    column-gap: 18px;
    row-gap: 12px;
  }

  .cp__node {
    grid-row: 1;
    grid-column: 1;
  }

  /* let the title, mini steps and dropdown stack as their own rows */
  .cp__foot {
    display: contents;
  }

  .cp__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  .cp__mini {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    margin: 0;
    max-width: none;
    text-align: left;
  }

  .cp__more {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    margin-top: 2px;
  }

  .cp__more summary {
    margin: 0;
  }

  .cp__mini li {
    position: relative;
    padding-left: 14px;
  }

  .cp__mini li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(9, 17, 27, 0.3);
  }

  .case-hood {
    grid-template-columns: 1fr;
    padding: clamp(20px, 6vw, 28px);
  }

  .case-hood__copy p {
    max-width: 34rem;
  }

  .case-hood__grid {
    grid-template-columns: 1fr;
  }

  .case-cta__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-cta h2 {
    max-width: none;
  }

  .case-cta__copy {
    max-width: 34rem;
  }
}

@media (max-width: 720px) {
  .case-detail-shell {
    padding-top: 68px;
  }

  .case-hero-loop {
    min-height: auto;
    padding-top: 14px;
  }

  .cp__mini span {
    font-size: 10.5px;
  }
}

/* ---- method.css ---- */
.page-section {
  min-height: 100svh;
  padding: clamp(86px, 9vw, 124px) var(--pad) clamp(56px, 7vw, 96px);
  display: grid;
  place-items: center start;
  border-top: 1px solid var(--line);
}

.page-section h2 {
  width: min(100%, var(--max));
  margin: 0 auto;
  font-size: clamp(38px, 6vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.065em;
  font-weight: 900;
  white-space: nowrap;
}

.task-ledger {
  --ledger-pad: clamp(56px, 6vw, 84px);
  background: #f7f6f1;
  min-height: auto;
  padding-top: var(--ledger-pad);
  padding-bottom: var(--ledger-pad);
  place-items: start;
}

.task-ledger__inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.34fr) minmax(520px, 0.66fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
}

.task-ledger__left {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: clamp(18px, 2.4vw, 30px);
}

.task-ledger__intro {
  display: grid;
  gap: 10px;
}

.task-ledger h2 {
  width: auto;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  white-space: nowrap;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.task-ledger__title-sub {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(9, 17, 27, 0.5);
}

.task-ledger__copy {
  max-width: 31rem;
  margin-inline: auto;
  color: #46515d;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 650;
  line-height: 1.42;
}

.task-ledger__count {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.task-ledger__count span {
  color: #09111b;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(54px, 6vw, 92px);
  line-height: 0.85;
  font-weight: 850;
  letter-spacing: -0.06em;
}

.task-ledger__count strong {
  color: rgba(9, 17, 27, 0.6);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-ledger__table-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(9, 17, 27, 0.12);
  background: transparent;
}

.task-ledger__table-wrap.is-scrollable::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(rgba(247, 246, 241, 0), rgba(247, 246, 241, 0.92));
}

.task-ledger__table {
  display: grid;
  grid-auto-rows: min-content;
  gap: 0;
  max-height: clamp(360px, 48svh, 504px);
  overflow-y: auto;
  counter-reset: task-rank;
  scrollbar-width: thin;
  scrollbar-color: rgba(9, 17, 27, 0.32) rgba(9, 17, 27, 0.08);
}

.task-ledger__row {
  display: grid;
  grid-template-columns: clamp(48px, 4.4vw, 60px) minmax(0, 1fr);
  align-items: center;
}

.task-ledger__row::before,
.task-ledger__row strong {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.task-ledger__row {
  min-height: 42px;
  position: relative;
  border-bottom: 1px solid rgba(9, 17, 27, 0.08);
  background: transparent;
  counter-increment: task-rank;
  transition: background 120ms ease;
}

.task-ledger__row:last-child {
  border-bottom: 0;
}

.task-ledger__row:hover {
  background: rgba(255, 90, 44, 0.06);
}

.task-ledger__row::before {
  content: counter(task-rank, decimal-leading-zero);
  color: rgba(9, 17, 27, 0.5);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.task-ledger__row strong {
  color: #09111b;
  min-width: 0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.2;
  letter-spacing: -0.006em;
  font-weight: 560;
}

.task-ledger__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 330px);
  padding: 0 18px;
  color: #09111b;
  border: 2px solid rgba(9, 17, 27, 0.72);
  border-radius: 6px;
  background: rgba(247, 246, 241, 0.64);
  box-shadow: 0 10px 22px rgba(31, 27, 18, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-1.4deg);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.task-ledger__cta:hover {
  background: #ff5a2c;
  border-color: #ff5a2c;
  color: #fff;
  transform: rotate(-1.4deg) translateY(-2px);
}

@media (max-width: 1024px) {
  .task-ledger {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 62px;
  }

  .task-ledger h2 {
    font-size: clamp(36px, 11vw, 54px);
  }

  .task-ledger__inner {
    grid-template-columns: 1fr;
  }

  .task-ledger__table {
    max-height: 440px;
  }

  .task-ledger__row {
    min-height: 42px;
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

.method {
  min-height: auto;
  padding-top: clamp(54px, 6vw, 78px);
  padding-bottom: clamp(54px, 6vw, 82px);
  background: #ece8df;
  place-items: start;
}

.method-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  gap: clamp(34px, 5vw, 70px);
}

.method-copy {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(320px, 0.58fr);
  align-items: end;
  gap: clamp(22px, 4vw, 64px);
}

.method h2 {
  width: auto;
  margin: 0;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.065em;
  font-weight: 900;
}

.method-copy p {
  max-width: 44rem;
  color: rgba(9, 17, 27, 0.7);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.28;
  letter-spacing: -0.028em;
  font-weight: 650;
}

.method-orbits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 34px);
}

.method-orb {
  width: min(100%, clamp(136px, 17vw, 214px));
  aspect-ratio: 1;
  perspective: 900px;
  cursor: default;
}

.method-orb:focus-visible {
  outline: 2px solid #ff5a2c;
  outline-offset: 8px;
  border-radius: 50%;
}

.method-orb__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.method-orb:hover .method-orb__inner,
.method-orb:focus-visible .method-orb__inner {
  transform: rotateY(180deg);
}

.method-orb__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 50%;
  border: 1px solid rgba(9, 17, 27, 0.12);
  backface-visibility: hidden;
  text-align: center;
}

.method-orb__front {
  background: rgba(247, 246, 241, 0.82);
  box-shadow: 0 18px 48px rgba(31, 27, 18, 0.1);
}

.method-orb__back {
  background: #09111b;
  color: #fff;
  transform: rotateY(180deg);
}

.method-orb strong {
  max-width: 9ch;
  font-size: clamp(18px, 1.75vw, 29px);
  line-height: 0.95;
  letter-spacing: -0.048em;
  font-weight: 900;
}

.method-orb p {
  max-width: 13ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.018em;
}

@media (max-width: 1024px) {
  .method {
    padding-top: 72px;
    padding-bottom: 62px;
  }

  .method-copy {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .method h2 {
    font-size: clamp(36px, 12vw, 58px);
  }

  .method-copy p {
    font-size: 17px;
  }

  .method-orbits {
    gap: 14px;
  }

  .method-orb {
    width: min(100%, 164px);
  }
}

@media (max-width: 380px) {
  .method-orb {
    width: min(100%, 176px);
  }
}

/* ---- start.css ---- */
.start-flow {
  background: var(--bg);
  min-height: auto;
  place-items: start;
  padding-top: clamp(54px, 6vw, 78px);
  padding-bottom: clamp(58px, 7vw, 92px);
}

.start-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  gap: clamp(44px, 5vw, 76px);
}

.start-copy {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(320px, 0.58fr);
  align-items: end;
  gap: clamp(22px, 4vw, 64px);
}

.start-copy h2 {
  width: max-content;
  max-width: 100%;
  margin: 0;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.065em;
  font-weight: 900;
  white-space: nowrap;
}

.start-copy p {
  max-width: 44rem;
  margin: 0;
  color: rgba(9, 17, 27, 0.7);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.32;
  letter-spacing: -0.022em;
  font-weight: 600;
}

.start-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: clamp(18px, 2.4vw, 36px);
}

/* connecting rail behind the number circles */
.start-steps::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
}

.start-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  text-align: center;
}

.start-step__num {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--text);
  color: var(--white);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(9, 17, 27, 0.18);
}

.start-step__body {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.start-step__title {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 13px;
  font-weight: 700;
  color: #ff5a2c;
}

.start-step__desc {
  margin: 0;
  max-width: 15rem;
  color: rgba(9, 17, 27, 0.66);
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 500;
}

.start-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(6px, 1.5vw, 16px);
}

.start-play {
  display: grid;
  place-items: center;
  width: clamp(76px, 8vw, 96px);
  height: clamp(76px, 8vw, 96px);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 2px solid var(--line-strong);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease,
    background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.start-play:hover,
.start-play:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 46px rgba(9, 17, 27, 0.26);
}

.start-play:focus-visible {
  outline: 2px solid #ff5a2c;
  outline-offset: 6px;
}

.start-play svg {
  width: 42%;
  height: 42%;
}

@media (max-width: 1024px) {
  .start-copy {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .start-steps {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 34px);
  }

  .start-steps::before {
    top: 0;
    bottom: 0;
    left: 35px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .start-step {
    grid-template-columns: 72px 1fr;
    align-items: start;
    justify-items: start;
    column-gap: 20px;
    text-align: left;
  }

  .start-step__body {
    justify-items: start;
    padding-bottom: 6px;
  }

  .start-step__desc {
    max-width: none;
  }
}

/* ---- footer.css ---- */
.site-footer {
  background: #232c38;
  color: rgba(255, 255, 255, 0.68);
  padding: clamp(30px, 4vw, 52px) var(--pad) 24px;
  font-size: 14px;
}

.footer-top {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 54px);
  padding-bottom: clamp(24px, 3vw, 36px);
}

.footer-brand-col {
  display: grid;
  gap: 14px;
  align-content: start;
  max-width: 280px;
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 5vw, 80px);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}

.footer-brand img {
  display: block;
  width: 28px;
  height: 26px;
  object-fit: contain;
  background: #f7f6f1;
  padding: 6px;
  border-radius: 8px;
  box-sizing: content-box;
}

.footer-brand span {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.footer-tagline {
  margin: 0;
  color: #fff;
  font-size: clamp(17px, 1.42vw, 22px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.052em;
  white-space: nowrap;
}

.footer-tagline span {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Instrument Serif", serif;
  font-size: 1.12em;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.footer-tagline strong {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-left: 0.08em;
  color: #fff;
  font-weight: 950;
  letter-spacing: -0.058em;
}

.footer-tagline strong::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.07em;
  right: -0.07em;
  bottom: -0.1em;
  height: 0.38em;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 90, 44, 0.28), rgba(255, 90, 44, 0.46));
  transform: rotate(-1deg);
}

.footer-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.footer-col h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.footer-col a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 140ms ease;
}

.footer-col a:hover {
  color: #fff;
}

.footer-col .footer-soon {
  color: rgba(255, 255, 255, 0.32);
  font-size: 14px;
  font-weight: 600;
  cursor: default;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.04);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.footer-social svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.footer-social__mark {
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 700;
}

.footer-bottom span:first-child {
  color: #fff;
  font-weight: 900;
}

@media (max-width: 1024px) {
  .footer-brand-col {
    max-width: none;
  }

  .footer-cols {
    gap: 32px 48px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
}

/* ---- legal.css ---- */
/* Legal / policy pages (privacy, terms, cookies) */

.legal-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) var(--pad) clamp(64px, 9vw, 120px);
}

.legal-back {
  margin-bottom: clamp(20px, 4vw, 36px);
}

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease;
}

.legal-back-link:hover { color: var(--text); }
.legal-back-link svg { width: 18px; height: 18px; }

.legal-hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.legal-hero h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1;
}

.legal-meta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.legal-meta .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.legal-meta .date {
  font-weight: 700;
  color: var(--text);
}

.legal-body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
}

.legal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
}

.legal-card h3 {
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.legal-card h4 {
  margin: 18px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.legal-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 10px;
}

.legal-card p:last-child { margin-bottom: 0; }

.legal-card strong { color: var(--text); font-weight: 700; }

.legal-card ul {
  margin: 8px 0 12px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.legal-card li { margin-bottom: 6px; }

.legal-card a {
  color: #ff5a2c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-card a:hover { color: #e3491f; }

.legal-card .muted {
  font-size: 13px;
  color: var(--muted);
}

.legal-card .small { font-size: 13px; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}

.legal-table th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {
  .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- faq.css ---- */
/* FAQ page and homepage taster */

.faq-section {
  background: var(--bg);
  min-height: auto;
  place-items: start;
  padding-top: clamp(54px, 6vw, 76px);
  padding-bottom: clamp(54px, 6vw, 76px);
}

.faq-taster {
  border-top: 1px solid var(--line);
}

.faq-taster__inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.faq-taster__copy {
  display: grid;
  gap: 16px;
  align-self: center;
}

.faq-taster__copy h2 {
  font-size: clamp(42px, 5.8vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-weight: 900;
}

.faq-taster__copy p {
  max-width: none;
  color: rgba(9, 17, 27, 0.68);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 6px;
}

.faq-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.faq-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: clip;
}

.faq-item[open] {
  border-color: var(--line-strong);
  box-shadow: 0 18px 46px rgba(31, 27, 18, 0.08);
}

.faq-item summary {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 18px clamp(16px, 2.2vw, 24px);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.faq-item summary span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.faq-item[open] summary::after {
  content: "-";
}

.faq-item summary:focus-visible {
  outline: 2px solid #ff5a2c;
  outline-offset: -4px;
}

.faq-answer {
  padding: 0 clamp(16px, 2.2vw, 24px) 22px;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
}

.faq-more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-left: clamp(16px, 2.2vw, 24px);
  color: #ff5a2c;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.faq-more:hover {
  color: #e3491f;
}

.faq-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(58px, 6vw, 78px) var(--pad) clamp(64px, 8vw, 104px);
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.faq-back {
  width: 100%;
  padding: 0;
}

.faq-hero {
  padding: clamp(8px, 1vw, 14px) 0 clamp(4px, 1vw, 12px);
}

.faq-loop-mark {
  width: fit-content;
}

.faq-loop-mark h1 {
  max-width: none;
  font-size: clamp(56px, 8.5vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.072em;
  font-weight: 900;
}

.faq-loop-mark img {
  height: clamp(32px, 4.2vw, 60px);
}

.faq-title-group {
  align-items: flex-start;
}

.faq-built-note {
  max-width: 28rem;
  text-align: left;
}

.faq-search {
  width: min(100%, 42rem);
  display: grid;
  gap: 8px;
}

.faq-search span {
  color: rgba(9, 17, 27, 0.56);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-search input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  outline: none;
}

.faq-search input:focus {
  border-color: rgba(255, 90, 44, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 90, 44, 0.14);
}

.faq-page .faq-list {
  gap: 12px;
}

.faq-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
}

.faq-cta__inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 6vw, 88px);
}

.faq-cta h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.058em;
  font-weight: 900;
}

.faq-cta__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.faq-cta__card {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 9px;
  min-height: 184px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 2px solid rgba(9, 17, 27, 0.28);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}

.faq-cta__card:hover,
.faq-cta__card:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  outline: none;
}

.faq-cta__card:hover .case-cta__stamp,
.faq-cta__card:focus-visible .case-cta__stamp {
  background: var(--text);
  color: #ff5a2c;
}

.faq-cta__label {
  color: rgba(9, 17, 27, 0.66);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-cta__card strong {
  max-width: 18rem;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 860;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .faq-taster__inner,
  .faq-cta__inner {
    grid-template-columns: 1fr;
  }

  .faq-cta__actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .faq-shell {
    width: 100%;
    max-width: 100%;
    padding-top: 68px;
    overflow-x: clip;
  }

  .faq-search,
  .faq-list {
    width: calc(100vw - (var(--pad) * 2));
    max-width: calc(100vw - (var(--pad) * 2));
    justify-self: start;
  }

  .faq-item {
    width: 100%;
    max-width: 100%;
  }

  .faq-section {
    padding-top: 46px;
    padding-bottom: 48px;
  }

  .faq-taster__inner {
    gap: 24px;
  }

  .faq-taster__copy h2 {
    font-size: clamp(38px, 13vw, 54px);
  }

  .faq-loop-mark {
    align-items: baseline;
    gap: 9px;
  }

  .faq-loop-mark h1 {
    font-size: clamp(54px, 20vw, 82px);
  }

  .faq-loop-mark img {
    height: clamp(30px, 12vw, 46px);
  }

  .faq-built-note {
    max-width: 18rem;
  }

  .faq-item summary {
    gap: 12px;
    min-height: 58px;
    padding: 16px 14px;
    font-size: 16px;
  }

  .faq-item summary::after {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  .faq-answer {
    padding: 0 14px 18px;
    font-size: 14.5px;
    line-height: 1.62;
  }

  .faq-cta__card {
    min-height: 162px;
  }

  .footer-cols {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    min-width: 0;
  }

  .footer-col {
    min-width: 0;
  }

  .footer-col:nth-child(3) {
    grid-column: 1 / -1;
  }

  .footer-col a,
  .footer-bottom span {
    overflow-wrap: anywhere;
  }
}

/* ---- responsive.css ---- */
html { scroll-padding-top: 92px; }

@media (max-width: 1120px) {
  .nav-tagline {
    font-size: 15px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-copy {
    order: 1;
    justify-self: start;
    max-width: 740px;
  }

  .case-wall {
    order: 2;
    transform: none;
    grid-auto-rows: minmax(128px, 18vw);
  }

  .method {
    grid-template-columns: 1fr;
  }

  .home-case-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, clamp(138px, 18vw, 185px));
    grid-auto-columns: clamp(170px, 24vw, 215px);
    grid-auto-rows: clamp(138px, 18vw, 185px);
  }

  .home-case-grid.has-many-cases {
    grid-template-rows: repeat(3, clamp(126px, 16vw, 170px));
    grid-auto-columns: clamp(160px, 22vw, 205px);
    grid-auto-rows: clamp(126px, 16vw, 170px);
  }

  .method-grid {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    overflow-x: auto;
    padding-bottom: 10px;
  }
}

@media (max-width: 1024px) {
  .site-header {
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 10px;
  }

  .wordmark,
  .menu-button {
    flex: 0 0 auto;
  }

  .wordmark {
    height: 30px;
    gap: 6px;
  }

  .wordmark img {
    width: 33px;
    height: 30px;
  }

  .wordmark span {
    max-width: 43px;
    font-size: 15px;
  }

  .nav-tagline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: none;
    width: max-content;
    max-width: calc(100% - 130px);
    min-width: 0;
    font-size: clamp(11px, 3vw, 13px);
    letter-spacing: -0.03em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 160ms ease, font-size 160ms ease;
  }

  .site-header.is-scrolled .nav-tagline {
    position: static;
    left: auto;
    transform: none;
    flex: 1;
    width: auto;
    max-width: none;
    margin-left: 4px;
    text-align: left;
    font-size: clamp(11px, 3vw, 13px);
    letter-spacing: -0.03em;
    opacity: 0.82;
  }

  .nav-links {
    position: absolute;
    inset: 62px var(--pad) auto;
    display: none;
    grid-template-columns: 1fr;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(247, 246, 241, 0.96);
    box-shadow: var(--shadow);
  }

  .nav-links.is-open { display: grid; }
  .menu-button {
    display: grid;
    width: 34px;
    height: 34px;
    gap: 3px;
  }

  .menu-button span {
    width: 15px;
    height: 1.5px;
  }

  .hero {
    position: relative;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
    padding-top: 50px;
    padding-bottom: 28px;
    background:
      linear-gradient(180deg, rgba(247, 246, 241, 0) 0 235px, #f7f6f1 310px),
      radial-gradient(520px 280px at 24% 4%, rgba(44, 143, 216, 0.18), transparent 64%),
      radial-gradient(420px 250px at 92% 8%, rgba(255, 90, 44, 0.1), transparent 64%),
      #f7f6f1;
  }

  .hero-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    gap: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: stretch;
  }

  h1 {
    max-width: 360px;
    font-size: clamp(34px, 10.5vw, 48px);
    letter-spacing: -0.055em;
  }

  .hero-title {
    max-width: 100%;
    font-size: clamp(23px, 6vw, 32px);
    line-height: 1;
  }

  .work-line {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1;
    gap: 0.12em;
  }

  .work-line span,
  .work-line em {
    margin-right: 0;
  }

  .manual-line {
    width: fit-content;
    max-width: 100%;
    flex-wrap: nowrap;
    margin: 24px auto 0;
    padding-top: 0.24em;
    white-space: nowrap;
  }

  .not-stamp {
    top: -1.55em;
    padding: 0.22em 0.62em 0.24em;
    border-width: 2.5px;
    font-size: 0.38em;
    font-weight: 900;
    letter-spacing: 0.15em;
  }

  .hero-subtext {
    margin-top: clamp(18px, 2.5svh, 26px);
    width: auto;
    max-width: 34rem;
    gap: 9px;
  }

  .subtext-lead {
    font-size: 16px;
    line-height: 1.18;
    white-space: normal;
  }

  .subtext-support {
    font-size: 14px;
    line-height: 1.4;
  }

  .case-wall {
    order: 1;
    justify-self: center;
    width: min(100%, 340px);
    align-self: start;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, clamp(44px, 12.5vw, 58px));
    grid-auto-rows: auto;
    gap: 7px;
    padding: 0 9px 8px;
    overflow: hidden;
    transform: none;
  }

  .case-tile.is-active-case .case-tile-title {
    font-size: clamp(24px, 8vw, 32px);
    max-width: 12ch;
  }

  .case-tile.is-active-case .case-business {
    max-width: 22ch;
    white-space: normal;
    line-height: 1.16;
  }

  .case-tile .case-tile-title {
    font-size: clamp(13px, 3.6vw, 19px);
    padding: 6px 8px 7px;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .case-tile .case-business,
  .case-tile-horizontal .case-business {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }

  .case-tile-body {
    padding: 10px;
    gap: 8px;
  }

  .hero-copy {
    order: 2;
    justify-self: center;
    width: min(100%, 350px);
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(18px, 3.4svh, 28px) var(--pad) clamp(56px, 9svh, 88px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(247, 246, 241, 0.88), #f7f6f1 28%);
  }

  .show-card,
  .show-card-large,
  .show-card-tall {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 0;
    padding: 8px;
    background: #101418;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    color: rgba(255, 255, 255, 0.82);
  }

  .show-card::before {
    opacity: 0.07;
  }

  .show-card::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.18));
    opacity: 1;
  }

  .show-card:nth-child(1) {
    grid-column: 1 / span 3;
    grid-row: 1 / span 1;
  }

  .show-card:nth-child(2) {
    grid-column: 4 / span 2;
    grid-row: 1 / span 1;
  }

  .show-card:nth-child(3) {
    grid-column: 6 / span 1;
    grid-row: 1 / span 2;
    padding: 8px;
  }

  .show-card:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 2 / span 2;
  }

  .show-card:nth-child(5) {
    grid-column: 3 / span 3;
    grid-row: 2 / span 1;
  }

  .show-card:nth-child(6) {
    grid-column: 3 / span 4;
    grid-row: 3 / span 1;
  }

  .show-card strong {
    font-size: clamp(7.5px, 2.15vw, 10.5px);
    padding: 3px 5px 4px;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .case-wall::after {
    inset: -6px 4px 0;
    border-radius: 10px;
    opacity: 0.54;
  }

  .show-card:nth-child(3) strong {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    max-width: none;
    max-height: 100%;
    padding: 7px 5px 8px;
    transform: rotate(-1.5deg);
  }

  .work-line span:last-child {
    flex-basis: auto;
  }

  .hero-copy p:not(.kicker, .hero-subtext) {
    margin-top: 14px;
    font-size: 15px;
  }

  .hero-actions {
    width: 100%;
    max-width: 34rem;
    min-width: 0;
    margin-top: clamp(20px, 3svh, 30px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .button {
    width: 100%;
    min-width: 0;
    min-height: 47px;
  }

  .hero-note {
    width: 100%;
    max-width: 34rem;
    margin-top: clamp(16px, 2.4svh, 24px);
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .hero-note-lead,
  .hero-note-end {
    display: block;
  }

  .hero-note-rail {
    width: 100%;
    margin: clamp(10px, 1.8svh, 16px) auto clamp(9px, 1.4svh, 14px);
    grid-template-columns: 1fr;
    gap: clamp(7px, 1.3svh, 11px);
  }

  .hero-note-rail::before {
    left: 50%;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(255, 90, 44, 0.28), transparent);
    transform: translateX(-50%);
  }

  .hero-note-rail span {
    min-width: min(100%, 220px);
    min-height: 29px;
    padding: 0 10px;
    font-size: 13px;
    justify-self: center;
  }

  .hero-scroll-cue {
    position: absolute;
    left: 50%;
    top: calc(100dvh - 34px);
    bottom: auto;
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(9, 17, 27, 0.24);
    border-bottom: 2px solid rgba(9, 17, 27, 0.24);
    transform: translateX(-50%) rotate(45deg);
  }

  .cases-head {
    margin-bottom: 16px;
    gap: 14px;
  }

  .cases-title {
    white-space: normal;
  }

  .case-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .page-section {
    min-height: auto;
    place-items: start;
    padding-top: clamp(48px, 10vw, 76px);
    padding-bottom: clamp(44px, 8vw, 64px);
  }

  html { scroll-padding-top: 66px; }

  .cases-section {
    min-height: auto;
    justify-content: flex-start;
    padding-top: clamp(56px, 14vw, 82px);
    padding-bottom: clamp(36px, 7vw, 56px);
    border-top: 1px solid rgba(9, 17, 27, 0.1);
    background: #ece8df;
  }

  .case-carousel {
    min-height: auto;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .case-controls .case-search {
    width: 100%;
  }

  .filter-row {
    align-items: flex-start;
    gap: 8px;
  }

  .home-case-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, clamp(142px, 42vw, 188px));
    grid-auto-columns: minmax(158px, 46vw);
    grid-auto-rows: clamp(142px, 42vw, 188px);
    gap: 10px;
  }

  .case-tile,
  .case-tile-large,
  .case-tile-tall,
  .case-tile-wide {
    grid-column: span 1;
    grid-row: span 1;
  }

  .case-tile:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }

  .filter-group {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 4px;
  }

  .filter { flex: none; }
  .method-grid { grid-template-columns: 1fr; overflow: visible; }
  .site-footer { display: grid; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .hero {
    min-height: 0;
    padding: 78px 0 40px;
  }

  .hero-inner {
    align-items: start;
    align-content: start;
    gap: 26px;
  }

  .hero-copy,
  .case-wall {
    width: min(100%, 640px);
  }

  .case-wall {
    grid-template-rows: repeat(3, clamp(88px, 11vw, 116px));
    gap: 12px;
    padding: 0 12px 12px;
  }

  .show-card strong {
    font-size: clamp(12px, 1.5vw, 15px);
    padding: 6px 9px 7px;
  }

  .show-card:nth-child(3) strong {
    padding: 9px 6px 10px;
  }
}

@media (max-width: 720px) and (max-height: 820px) {
  .site-header {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .hero {
    padding-top: 46px;
    padding-bottom: 24px;
  }

  .case-wall {
    grid-template-rows: repeat(3, clamp(32px, 10vw, 42px));
    gap: 5px;
    padding-bottom: 7px;
  }

  .show-card,
  .show-card-large,
  .show-card-tall {
    padding: 7px;
  }

  .show-card strong {
    font-size: clamp(7px, 1.9vw, 9px);
  }

  .hero-copy {
    padding-top: 13px;
    padding-bottom: 28px;
  }

  .hero-title {
    font-size: clamp(22px, 5.8vw, 30px);
  }

  .manual-line {
    margin-top: 22px;
  }

  .hero-subtext {
    margin-top: 14px;
    gap: 7px;
  }

  .subtext-lead {
    font-size: 15px;
  }

  .subtext-support {
    font-size: 13px;
    line-height: 1.34;
  }

  .hero-actions {
    margin-top: 14px;
    gap: 8px;
  }

  .button {
    min-height: 43px;
  }

  .hero-note {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 12px;
  }

  .hero-note-rail {
    margin: 8px auto 7px;
    gap: 5px;
  }

  .hero-note-rail span {
    min-height: 24px;
    min-width: min(100%, 198px);
    font-size: 12px;
  }

  .hero-scroll-cue {
    top: calc(100dvh - 28px);
    display: block;
    width: 16px;
    height: 16px;
    border-width: 1.5px;
  }
}

@media (max-width: 360px) {
  .hero-title {
    font-size: 22px;
  }

  .work-line {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .draft-page {
    overflow-x: hidden;
  }

  .draft-page article {
    width: min(100%, 350px);
    min-width: 0;
  }

  .draft-page h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(31px, 8vw, 42px);
    letter-spacing: -0.055em;
  }

  .draft-page p,
  .draft-page li {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}