/* Runbase v2 · Always On. Brand: Signal #FF5A1F, Ink #111110, Paper #F5F2EB. Signal actions on Ink. */
@font-face {
  font-family: Geist;
  src: url(/assets/fonts/geist.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url(/assets/fonts/geist-mono.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url(/assets/fonts/instrument-serif.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url(/assets/fonts/instrument-serif-italic.woff2) format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Permanent Marker';
  src: url(/assets/fonts/permanent-marker.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  --sig: #ff5a1f;
  --ink: #111110;
  --paper: #f5f2eb;
  --stone: #e4dfd3;
  --graph: #5c5a55;
  --ink2: #2a2926;
  --white: #fbfaf6;
  --hh: 72px;
  --sat: env(safe-area-inset-top, 0px);
  --space: 8px;
  --radius: 18px;
  --control-height: 54px;
  --line: rgba(17, 17, 16, 0.1);
  --line2: rgba(17, 17, 16, 0.16);
  --sans:
    Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gut: clamp(20px, 3.4vw, 48px);
  --max: 1440px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hh) + var(--sat) + 16px);
}
body {
  margin: 0;
  padding-top: calc(var(--hh) + var(--sat));
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--sig);
  color: var(--ink);
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.35);
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.mono {
  font-family: var(--mono);
}
.kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graph);
}
.kick::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--sig);
}
.h2 {
  font: 600 clamp(40px, 5.4vw, 76px)/0.95 var(--sans);
  letter-spacing: -0.05em;
  margin-top: 22px;
  text-wrap: balance;
}
.lead {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--graph);
  letter-spacing: -0.01em;
  max-width: 600px;
  margin-top: 22px;
  text-wrap: pretty;
}
.lead b,
.lead strong {
  color: var(--ink);
  font-weight: 500;
}
.sec {
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 99px;
  font: 600 15px/1 var(--sans);
  letter-spacing: -0.01em;
  white-space: normal;
  text-align: center;
  flex-shrink: 0;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background 0.2s,
    color 0.2s;
}
.btn:active {
  transform: translateY(1px);
}
.btn-sig,
.btn-ink {
  background: var(--ink);
  color: var(--sig);
  border: 0;
}
.btn-sig:hover,
.btn-ink:hover {
  background: #242421;
  color: #ff8052;
}
.btn-sig:focus-visible,
.btn-ink:focus-visible {
  outline-color: var(--sig);
}
.btn-ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 0 1px var(--line2);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.75);
}
.btn-lg {
  min-height: 54px;
  padding: 16px 26px;
  font-size: 16px;
}
.arr {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.btn:hover .arr {
  transform: translateX(3px);
}

/* Header: one definition, fixed with safe-area support. */
.hdr {
  transition: box-shadow 0.2s;
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: var(--sat) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background: rgba(245, 242, 235, 0.96);
  backdrop-filter: blur(16px);
}
.hdr.scrolled {
  box-shadow: 0 10px 28px -24px rgba(17, 17, 16, 0.3);
}
.hdr .wrap {
  height: var(--hh);
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  display: flex;
  align-items: center;
  flex: none;
  padding: 4px 0;
}
.logo img {
  height: 28px;
  width: auto;
}
.nav {
  display: flex;
  gap: 4px;
  margin-left: 28px;
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--graph);
  padding: 10px 12px;
  border-radius: 99px;
}
.nav a:hover,
.nav a[aria-current='page'] {
  background: rgba(17, 17, 16, 0.05);
  color: var(--ink);
}
.hdr-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hdr-cta .s {
  display: none;
}
.mobile-menu {
  display: none;
}
.menu-btn {
  list-style: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.menu-btn::-webkit-details-marker {
  display: none;
}
.menu-btn .bars {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.menu-btn .bars i {
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform 0.2s,
    opacity 0.2s,
    top 0.2s;
}
.menu-btn .bars i:nth-child(1) {
  top: 0;
}
.menu-btn .bars i:nth-child(2) {
  top: 6px;
}
.menu-btn .bars i:nth-child(3) {
  top: 12px;
}
.mobile-menu[open] .menu-btn .bars i:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.mobile-menu[open] .menu-btn .bars i:nth-child(2) {
  opacity: 0;
}
.mobile-menu[open] .menu-btn .bars i:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}
.mnav {
  display: none;
}
.dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sig);
}
@media (max-width: 1024px) {
  .nav {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
  .menu-btn {
    display: inline-flex;
  }
  .mnav {
    position: fixed;
    inset: calc(var(--hh) + var(--sat)) 0 auto;
    z-index: 49;
    display: grid;
    gap: 2px;
    max-height: calc(100dvh - var(--hh) - var(--sat));
    overflow: auto;
    background: var(--paper);
    padding: 12px var(--gut) calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .mnav a {
    font: 600 24px/1.2 var(--sans);
    padding: 14px 0;
  }
  .mnav .btn {
    font-size: 16px;
    letter-spacing: normal;
    border: 0;
    margin-top: 12px;
  }
}
@media (max-width: 480px) {
  .hdr-cta .l {
    display: none;
  }
  .hdr-cta .s {
    display: inline;
  }
  .hdr .wrap {
    gap: 12px;
  }
}
.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
}
.ctas > .btn {
  flex: 0 0 auto;
}
.ctas-stack {
  flex-direction: column;
  align-items: stretch;
}
.ctas-stack > .btn {
  flex-basis: auto;
  width: 100%;
}
/* footer */
.ftr {
  background: var(--sig);
  color: var(--ink);
  padding: 32px 0 28px;
  position: relative;
  isolation: isolate;
}

.ftr .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
  padding-top: 8px;
}
.ftr .logo img {
  height: 26px;
}
.ftr nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  justify-content: center;
  font-weight: 500;
  font-size: 15px;
}
.ftr nav a:hover,
.ftr .mail:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ftr .mail {
  font-weight: 600;
  padding: 12px 0;
}
.ftr nav a {
  padding: 12px 0;
}
.ftr .small {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
  margin-top: 10px;
  font: 500 12px/1.5 var(--mono);
}

@media (max-width: 640px) {
  :root {
    --hh: 64px;
  }
  .ctas {
    align-items: stretch;
    flex-direction: column;
  }
  .ctas > .btn {
    width: 100%;
    flex-basis: auto;
  }
  .ctas .lnk {
    align-self: flex-start;
  }
  .hdr-r .btn {
    padding: 12px 14px;
  }
  .ftr .wrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ftr nav {
    justify-content: flex-start;
    gap: 0 20px;
  }
}
@media (max-width: 360px) {
  .hdr .logo img {
    height: 22px;
  }
  .hdr-r,
  .hdr .wrap {
    gap: 8px;
  }
  .hdr-r .btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared public offers and comparison. */
.plan {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  padding: 32px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.plan .tg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graph);
}
.plan .badge {
  flex: none;
  background: var(--sig);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.plan h3 {
  font: 600 30px/1.1 var(--sans);
  letter-spacing: -0.04em;
  margin-top: 18px;
}
.plan .pr {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 18px;
}
.plan .pr small {
  font: 500 14px/1 var(--sans);
  color: var(--graph);
  margin-right: 2px;
}
.plan .pr b {
  font: 600 clamp(44px, 4.4vw, 58px)/1.08 var(--sans);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.plan .pr span {
  font: 500 15px/1 var(--sans);
  color: var(--graph);
}
.plan .note {
  margin-top: 8px;
  min-height: 2.9em;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--graph);
}
.plan .for {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}
.plan ul {
  margin-top: 18px;
  display: grid;
  gap: 11px;
  flex: 1;
  align-content: start;
}
.plan li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--graph);
}
.plan li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--stone)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M5.2 9.3l2.4 2.4 5-5.3' fill='none' stroke='%23111110' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/18px no-repeat;
}
.plan .btn {
  white-space: normal;
  line-height: 1.2;
  text-align: center;
  margin-top: 30px;
  width: 100%;
}
.plan.feat {
  background: var(--ink);
  color: var(--paper);
  box-shadow:
    0 0 0 1px var(--ink),
    0 16px 36px -26px rgba(17, 17, 16, 0.3);
}

.plan.feat .tg,
.plan.feat .pr small,
.plan.feat .pr span,
.plan.feat .note,
.plan.feat li {
  color: #b4b0a6;
}
.plan.feat .for {
  color: var(--paper);
}
.plan.feat li::before {
  background-color: var(--sig);
}
.plan.quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line2);
}
.plan.quiet:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}
.plan-comparison {
  margin-top: 40px;
  border: 1px solid var(--line2);
  border-radius: 20px;
  background: rgba(251, 250, 246, 0.5);
  overflow: hidden;
}
.plan-comparison > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
}
.plan-comparison > summary::-webkit-details-marker {
  display: none;
}
.plan-comparison > summary b {
  display: block;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.plan-comparison > summary small {
  display: block;
  font-size: 14px;
  color: var(--graph);
  margin-top: 4px;
}
.compare-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 24px;
  transition: transform 0.2s;
}
.plan-comparison[open] .compare-plus {
  transform: rotate(45deg);
}
.plan-comparison .tblw {
  margin: 0 24px 24px;
}
.comparison-hint {
  display: none;
}
.tblw {
  margin-top: 20px;
  overflow-x: auto;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.plan-comparison table {
  min-width: 560px;
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  table-layout: fixed;
}
.plan-comparison th,
.plan-comparison td {
  padding: 15px 20px;
  text-align: center;
  vertical-align: middle;
}
.plan-comparison thead th {
  font: 600 15px/1.2 var(--sans);
  letter-spacing: -0.01em;
  padding-top: 20px;
}
.plan-comparison tbody th {
  text-align: left;
  width: 38%;
}
.plan-comparison tbody tr:nth-child(even) {
  background: rgba(17, 17, 16, 0.025);
}
.plan-comparison thead td,
.plan-comparison tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
}
.plan-comparison tbody tr:nth-child(even) th {
  background: #f5f4f0;
}
.plan-comparison tbody th {
  font-weight: 500;
  color: var(--ink);
}
.plan-comparison tbody td {
  color: var(--graph);
}

.plan-comparison .ck,
.plan-comparison .no {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.plan-comparison .ck {
  background: var(--ink)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M5.2 9.3l2.4 2.4 5-5.3' fill='none' stroke='%23F5F2EB' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/18px no-repeat;
}
.plan-comparison .no {
  width: 12px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--line2);
}
.plan .pr-launch {
  align-items: baseline;
  flex-wrap: wrap;
}
.plan .pr-launch span.price-token {
  display: inline;
  font: 600 clamp(44px, 4.4vw, 58px)/1.08 var(--sans);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.plan.feat .pr-launch span.price-token {
  color: var(--paper);
}
.plan .pr-launch .price-token span {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* Same struck treatment as the hero: 0.6em, weight 600, solid Signal strike.
   Ink on the paper cards; Paper on the dark featured card so it stays readable. */
.plan .pr-launch .price-token .price-was {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--ink);
}
.plan.feat .pr-launch .price-token .price-was {
  color: var(--paper);
}
.plan .addon {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--graph);
  box-shadow: inset 0 0 0 1px var(--line2);
}
.plan.feat .addon {
  color: #b4b0a6;
  box-shadow: inset 0 0 0 1px rgba(245, 242, 235, 0.18);
}
.plan.next-step .tg {
  color: var(--ink);
}
.plan .gate {
  margin-top: 24px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--graph);
}
.plan .gate + .btn {
  margin-top: 12px;
}

.price-was {
  text-decoration-color: var(--sig);
  text-decoration-thickness: 0.1em;
  text-decoration-skip-ink: none;
}
.plan-scope {
  max-width: 800px;
  margin: 28px auto 0;
  color: var(--graph);
  font-size: 14px;
  text-align: center;
}
@media (max-width: 640px) {
  .plan {
    padding: 28px 24px;
  }
  .plan-comparison > summary {
    padding: 20px;
  }
  .plan-comparison .tblw {
    margin: 0 16px 16px;
  }
  .comparison-hint {
    display: block;
    padding: 0 20px 12px;
    color: var(--graph);
    font-size: 13px;
  }
}

/* One creative-study component, shared by the site and unlisted reviews. */
.study {
  min-width: 0;
}
.study-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.study-preview {
  display: block;
  position: relative;
  border-radius: 6px;
  background: var(--white);
  overflow: hidden;
}
.study-preview img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: contain;
}
.study-preview:hover img {
  filter: brightness(0.97);
}
.study-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--graph);
}
.study-meta b {
  color: var(--ink);
}
.study-meta span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fine {
  font-size: 12px;
}
.fine {
  color: var(--graph);
  font-size: 13px;
  line-height: 1.65;
}
.study-dialog {
  width: min(1000px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  margin: auto;
  background: var(--paper);
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.study-dialog::backdrop {
  background: rgba(17, 17, 16, 0.65);
  backdrop-filter: blur(5px);
}
.study-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.study-dialog-head h2 {
  font-size: 22px;
  letter-spacing: -0.03em;
}
.study-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 32px;
  align-items: start;
}
.study-dialog-body > img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.study-dialog > .fine {
  margin-top: 20px;
}
.review {
  padding: clamp(40px, 6vw, 80px) 0;
}
.review-intro {
  max-width: 800px;
  margin-bottom: 48px;
}
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.review figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.review figcaption {
  margin-top: 16px;
}
.review-notes {
  display: grid;
  gap: 32px;
}
.review-notes h2 {
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 16px 0;
}
.review-notes p:not(.kick) {
  color: var(--graph);
  line-height: 1.7;
}
.review-notes .fine {
  margin-top: 14px;
}
.review-sources {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.review-sources a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-comparison {
  margin-top: 64px;
}
.review-comparison h2 {
  font-size: 32px;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.review-offer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
  margin-top: 80px;
}
.review-offer .lnk {
  margin-top: 24px;
}
.review-access {
  margin-top: 56px;
  color: var(--graph);
  font-size: 13px;
  line-height: 1.65;
}
.review-access .lnk {
  margin-top: 20px;
}
@media (max-width: 760px) {
  .study-grid,
  .review-grid,
  .review-offer {
    grid-template-columns: 1fr;
  }
  .study-grid {
    gap: 36px;
    max-width: 520px;
    margin: 0 auto;
  }
  .study-dialog {
    padding: 20px;
  }
  .study-dialog-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .review .hdr .btn {
    font-size: 13px;
  }
}

.portfolio-open {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--paper);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}
.study-preview:hover .portfolio-open,
.study-preview:focus-visible .portfolio-open {
  opacity: 1;
}
.portfolio-study .study-meta {
  margin-top: 16px;
  font-size: 14px;
}
.portfolio-study .study-meta span {
  font-size: 9px;
}
.portfolio-note {
  font-size: 11px;
  line-height: 1.6;
  margin-top: 28px;
  color: var(--graph);
}
.portfolio-dialog {
  width: min(760px, calc(100% - 32px));
}
.portfolio-dialog .study-dialog-body {
  grid-template-columns: 1fr;
}
.portfolio-dialog .study-dialog-body > img {
  max-height: 70dvh;
  object-fit: contain;
}

@media (max-width: 540px) {
  .portfolio-study .study-meta {
    font-size: 12px;
  }
  .portfolio-study .study-meta span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-open {
    transition: none;
  }
}

/* Illustrative formats, available in the About lab. */
.card {
  position: relative;
  border-radius: 16px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 0 0 1px var(--line);
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 560px;
  justify-content: flex-end;
}
.chips button {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 99px;
  font: 500 13.5px/1 var(--sans);
  box-shadow: inset 0 0 0 1px var(--line2);
  color: var(--graph);
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.chips button:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.chips button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.gal {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  margin-top: 48px;
  align-items: start;
}
.tile {
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.tile[hidden] {
  display: none;
}
.tile .card {
  padding: 7px;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.tile:hover .card {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(17, 17, 16, 0.08),
    0 2px 4px rgba(17, 17, 16, 0.06),
    0 24px 44px -14px rgba(17, 17, 16, 0.32);
}
.tile .meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graph);
}
.tile .meta b {
  color: var(--ink);
  font-weight: 500;
}
.tile .why {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--graph);
  text-wrap: pretty;
}
.galfoot {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--graph);
}
.galfoot p {
  max-width: 560px;
}

/* Sample concepts can be inspected without leaving the page. */
.tile figure {
  position: relative;
}
.preview-open {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 8px rgba(17, 17, 16, 0.1);
}
.preview-open svg {
  width: 20px;
  height: 20px;
}
.preview-open:hover {
  background: var(--sig);
}
.preview-ready .card {
  cursor: zoom-in;
}
.concept-dialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background: var(--white);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 80px rgba(17, 17, 16, 0.25);
}
.concept-dialog::backdrop {
  background: rgba(17, 17, 16, 0.55);
  backdrop-filter: blur(6px);
}
.concept-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.concept-dialog-head h2 {
  font: 600 18px/1.3 var(--sans);
  letter-spacing: -0.025em;
}
.concept-dialog-head button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  font-size: 28px;
  line-height: 1;
}
.concept-dialog-body {
  max-width: 380px;
  margin: 0 auto;
}
.concept-dialog-body .card {
  padding: 7px;
}
.concept-dialog-body .meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 500 10px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 20px;
}
.concept-dialog-body .why {
  font-size: 14px;
  line-height: 1.6;
  color: var(--graph);
  margin-top: 8px;
}
.concept-disclaimer {
  max-width: 380px;
  margin: 20px auto 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--graph);
}
body.concept-open {
  overflow: hidden;
}

.format-lab {
  margin-top: 48px;
}
.format-lab > summary {
  font-weight: 600;
  cursor: pointer;
  padding: 18px 0;
  min-height: 44px;
}
.format-lab .chips {
  justify-content: flex-start;
  margin-top: 24px;
}
@media (max-width: 1024px) {
  .gal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .gal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 16px;
    padding: 12px 4px 24px;
  }
  .tile {
    flex: 0 0 min(80vw, 300px);
    scroll-snap-align: start;
  }
  .chips {
    justify-content: flex-start;
  }
}

/* Founder and expanded creative lab. */
.about-hero {
  padding-top: clamp(48px, 7vw, 88px);
}
.about-hero .art-h {
  max-width: 720px;
}
.about .lab {
  padding: clamp(64px, 9vw, 120px) 0;
}
.lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.about .lab .lead,
.about .lab p {
  color: var(--graph);
  max-width: 520px;
}
.about .lab .lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
}
.about .lab .body {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.55;
}
.lab-note {
  margin-top: 18px;
  font: 500 12px/1.45 var(--mono);
  color: var(--graph);
  max-width: 520px;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.method {
  padding: clamp(64px, 9vw, 120px) 0;
  background: rgba(17, 17, 16, 0.03);
}
.method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: 28px;
}
.about .steps {
  counter-reset: step;
  display: grid;
  gap: 14px;
}
.about .method .steps {
  grid-template-columns: 1fr;
  margin-top: 0;
  padding-left: 0;
}
.about .steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.about .steps li::before {
  counter-increment: step;
  content: counter(step);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font: 600 14px/1 var(--mono);
  background: var(--sig);
  color: var(--ink);
}
.about .steps strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}
.about .steps span {
  color: var(--graph);
  font-size: 15px;
  line-height: 1.45;
}
.async {
  padding: 22px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
}
.async .kick {
  color: rgba(245, 242, 235, 0.7);
}
.async .kick::before {
  background: var(--sig);
}
.async p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(245, 242, 235, 0.88);
}

.founder {
  padding: clamp(64px, 9vw, 120px) 0;
}
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.founder-photo {
  margin: 0;
}
/* Founder slot: 4:5 portrait, up to 420 CSS px, radius 20, cover. A plain 840x1050+ headshot drops in with no CSS change.
   Current 548x685 jpg is a placeholder only (not upscaled). */
.founder-photo img {
  width: 100%;
  height: auto;
  max-width: 420px;
  border-radius: 20px;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--stone);
}
.founder .role {
  margin-top: 14px;
  font: 500 12px/1.45 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graph);
}
.founder .bio {
  margin-top: 18px;
  color: var(--graph);
  font-size: 17px;
  line-height: 1.55;
  max-width: 560px;
}
.founder .bio p + p {
  margin-top: 14px;
}
.founder .links {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font: 500 14px/1 var(--sans);
}
.founder .links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Last section before the footer: one gap only (was band padding 128 + box margin 120 at 1440) */
.cta-band {
  padding: 0 0 clamp(40px, 5vw, 72px);
}
.cta-band .cta-box {
  margin: 0;
}

@media (max-width: 980px) {
  .lab-grid,
  .method-grid,
  .founder-grid {
    grid-template-columns: 1fr;
  }
  .spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .spec-grid {
    grid-template-columns: 1fr;
  }
}

.ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.ways li {
  padding: 18px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.ways strong {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.ways span {
  color: var(--graph);
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ways {
    grid-template-columns: 1fr;
  }
}

/* faq */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq .side {
  position: sticky;
  top: 110px;
}

.qs summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font: 600 clamp(18px, 1.6vw, 21px)/1.3 var(--sans);
  letter-spacing: -0.02em;
}
.qs summary::-webkit-details-marker {
  display: none;
}
.qs summary i {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line2);
  transition:
    background 0.25s,
    transform 0.35s var(--ease);
}
.qs summary i::before,
.qs summary i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.6px;
  margin: -0.8px 0 0 -5.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease);
}
.qs summary i::after {
  transform: rotate(90deg);
}
.qs details[open] summary i {
  background: var(--sig);
  box-shadow: none;
  transform: rotate(180deg);
}
.qs details[open] summary i::after {
  transform: rotate(0);
}
.qs summary:hover i {
  box-shadow: inset 0 0 0 1px var(--ink);
}
.qs .a {
  padding: 0 60px 26px 0;
  color: var(--graph);
  line-height: 1.6;
  max-width: 680px;
}
.qs .a p + p {
  margin-top: 10px;
}
.qs .a small {
  font: 500 12px/1.5 var(--mono);
}
.qs .a a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Runbase's own brand leads; client concepts support the story. */
.home {
  --section-gap: clamp(72px, 7.6vw, 112px);
}
.brand-site {
  --serif: var(--sans);
}
.brand-site h1,
.brand-site h2,
.brand-site h3 {
  font-family: var(--sans);
  font-weight: 550;
  letter-spacing: -0.055em;
}
.brand-site em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}
.eyebrow {
  font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.capabilities {
  padding: 22px 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.capability-track {
  display: flex;
  width: max-content;
  animation: capability-run 48s linear infinite;
  animation-play-state: paused;
}
.capabilities[data-active='true'] .capability-track {
  animation-play-state: running;
}
.capabilities:hover .capability-track {
  animation-play-state: paused;
}
.capability-track > div {
  display: flex;
  align-items: center;
}
.capability-track span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 32px;
  padding: 0 16px;
  font: 450 18px/1.2 var(--sans);
  letter-spacing: -0.025em;
}
.capability-track i {
  color: var(--sig);
  font-size: 24px;
  font-style: normal;
}
@keyframes capability-run {
  to {
    transform: translateX(-50%);
  }
}
.home-section {
  padding: var(--section-gap) 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.section-heading h2,
.kickoff-context h2,
.faq h2 {
  font-size: clamp(38px, 4.9vw, 72px);
  line-height: 1.02;
  margin-top: 22px;
}
.section-dek {
  max-width: 350px;
  color: var(--graph);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 4px;
}
.value-section {
  padding-bottom: clamp(72px, 7.6vw, 112px);
}
.value-section .section-heading {
  margin-bottom: 58px;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 80px);
}
.value-symbol {
  display: block;
  height: 64px;
  font: 400 62px/0.85 var(--sans);
  margin-bottom: 24px;
}
.value-craft {
  font-size: 66px;
}
.value-grid h3 {
  font-size: 25px;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.04em;
}
.value-grid p {
  color: var(--graph);
  font-size: 15px;
  line-height: 1.65;
  max-width: 340px;
}
.services-section {
  background: #eae6dd;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.service-art {
  aspect-ratio: 1.2;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
.art-coordinate {
  position: absolute;
  top: 20px;
  left: 20px;
  font: 450 9px/1.5 var(--mono);
  letter-spacing: 0.02em;
}
.art-foot {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font: 400 10px/1.4 var(--mono);
}
.service-copy {
  padding-top: 26px;
}
.service-number {
  font: 500 11px/1.4 var(--mono);
}
.service-copy h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  margin-top: 16px;
  max-width: 300px;
}
.service-copy > p:not(.service-number) {
  font-size: 15px;
  color: var(--graph);
  line-height: 1.65;
  margin-top: 18px;
  max-width: 365px;
}
.service-deliverables {
  display: block;
  margin-top: 24px;
  font: 400 10px/1.6 var(--mono);
  color: var(--graph);
}
.research-orbit {
  position: absolute;
  inset: 22% 16% 25%;
}
.research-orbit > i {
  position: absolute;
  width: 61%;
  height: 100%;
  border: 2px solid var(--ink);
  border-radius: 50%;
  top: 0;
  left: 0;
}
.research-orbit > i:nth-child(2) {
  left: 20%;
}
.research-orbit > i:nth-child(3) {
  left: 40%;
  border-color: var(--sig);
  border-width: 9px;
  animation: research-shift 8s var(--ease) infinite alternate;
  animation-play-state: paused;
}
.research-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font: 550 clamp(22px, 2.5vw, 36px)/0.95 var(--sans);
  letter-spacing: -0.05em;
  background: var(--paper);
  padding: 12px 6px;
}
@keyframes research-shift {
  to {
    transform: translateX(-65%);
  }
}
.creative-art {
  background: var(--ink);
  color: var(--paper);
}
.format-composition {
  position: absolute;
  inset: 24% 16% 24%;
}
.format-square {
  background: var(--paper);
  color: var(--ink);
  width: 64%;
  aspect-ratio: 1;
  position: absolute;
  top: 10%;
  left: 0;
  padding: 20px;
  transform: rotate(-8deg);
}
.format-square > span {
  position: absolute;
  font: 600 clamp(25px, 2.6vw, 38px)/0.9 var(--sans);
  letter-spacing: -0.06em;
  bottom: 16%;
}
.format-square > i {
  position: absolute;
  width: 40%;
  aspect-ratio: 1;
  background: var(--sig);
  border-radius: 50%;
  top: 10%;
  right: 10%;
}
.format-portrait {
  background: var(--sig);
  color: var(--ink);
  width: 42%;
  aspect-ratio: 9/16;
  position: absolute;
  right: 0;
  top: -11%;
  padding: 15px;
  transform: rotate(8deg);
  animation: format-shift 8s var(--ease) infinite alternate;
  animation-play-state: paused;
}
.format-portrait > span {
  font: 600 clamp(18px, 1.9vw, 28px)/0.98 var(--sans);
  letter-spacing: -0.05em;
}
.format-portrait > svg {
  width: 40%;
  height: auto;
  margin: 28% auto 0;
  fill: var(--ink);
}
@keyframes format-shift {
  to {
    transform: rotate(3deg) translateY(-8px);
  }
}
.learning-glyph {
  position: absolute;
  inset: 21% 7% 21%;
}
.learning-glyph > svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.learning-loop {
  stroke: var(--sig);
  stroke-width: 35;
}
.learning-arrow {
  stroke: var(--ink);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.learning-glyph > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font: 550 clamp(22px, 2.3vw, 34px)/0.95 var(--sans);
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.service-motion[data-active='true'] .research-orbit i,
.service-motion[data-active='true'] .format-portrait {
  animation-play-state: running;
}
.management-note {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--paper);
}
.management-mark {
  font: 400 45px/1 var(--sans);
}
.management-note > div {
  flex: 1;
}
.management-note h3 {
  font-size: 20px;
  letter-spacing: -0.03em;
}
.management-note p {
  max-width: 680px;
  color: var(--graph);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 7px;
}
.management-note > a {
  flex-shrink: 0;
  font-size: 13px;
}
.work-section {
  background: var(--paper);
}
.work-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.work-rail:focus-visible {
  outline-offset: 8px;
}
.case-surface {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}
.study-preview {
  border-radius: 0;
  background: var(--stone);
}
.case-surface > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.45s var(--ease);
}
.study-preview:hover .case-surface > img {
  transform: scale(1.025);
  filter: none;
}
.case-index {
  display: none;
}
.case-open {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  transition: background 0.2s;
}
.study-preview:hover .case-open {
  background: var(--sig);
}
.study-meta {
  margin-top: 18px;
  font-size: 13px;
  align-items: baseline;
}
.study-meta > span {
  font: 400 9px/1.5 var(--mono);
}
.study-copy > h3 {
  margin-top: 9px;
  font-size: 18px;
  letter-spacing: -0.035em;
  line-height: 1.3;
  font-weight: 450;
}
.portfolio-foot {
  font: 400 11px/1.6 var(--sans);
  color: var(--graph);
  margin-top: 30px;
  max-width: 720px;
}
.method-section {
  background: var(--ink);
  color: var(--paper);
}
.method-section .section-heading .eyebrow {
  color: #bcb8ad;
}
.method-section .section-dek {
  color: #bcb8ad;
}
.method-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 28px;
}
.method-foot p {
  color: #bcb8ad;
  font: 400 11px/1.6 var(--mono);
}
.method-foot a {
  font-size: 13px;
}
.kickoff-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(48px, 9vw, 144px);
  align-items: center;
}
.kickoff-context h2 {
  font-size: clamp(54px, 6.5vw, 96px);
  line-height: 0.98;
}
.signal-stop {
  color: var(--sig);
}
.kickoff-context .lead {
  margin-top: 28px;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.45;
}
.kickoff-description {
  color: var(--graph);
  max-width: 410px;
  font-size: 15px;
  margin-top: 20px;
}
.kickoff-delivery {
  display: flex;
  gap: 36px;
  margin-top: 32px;
}
.kickoff-delivery span {
  display: grid;
  gap: 8px;
  color: var(--graph);
  font: 400 10px/1.5 var(--mono);
}
.kickoff-delivery b {
  font: 450 42px/1 var(--sans);
  letter-spacing: -0.05em;
  color: var(--ink);
}
.kickoff-credit {
  color: var(--graph);
  max-width: 400px;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 24px;
}
.home-offer {
  padding: clamp(28px, 3.1vw, 48px);
  background: var(--white);
  border-radius: 6px;
}
.home-offer-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.home-offer h3 {
  font-size: 28px;
  letter-spacing: -0.045em;
}
.home-offer .pr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font: 550 clamp(40px, 4vw, 58px)/1 var(--sans);
  letter-spacing: -0.06em;
}
.home-offer .pr > span:last-child {
  color: var(--graph);
  font: 400 13px/1.5 var(--sans);
  letter-spacing: 0;
}
.home-offer .price-was {
  font-size: 0.5em;
}
.home-offer .offer-summary {
  font-size: 18px;
  margin-top: 24px;
  letter-spacing: -0.025em;
}
.offer-note {
  color: var(--graph);
  font-size: 13px;
  line-height: 1.65;
  margin-top: 16px;
}
.home-offer > .btn {
  margin-top: 28px;
  width: 100%;
  border-radius: 5px;
}
.offer-details {
  margin-top: 20px;
  border-top: 1px solid var(--line2);
}
.offer-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-height: 58px;
  gap: 18px;
  font-size: 14px;
  list-style: none;
}
.offer-details summary::-webkit-details-marker {
  display: none;
}
.offer-details summary > span {
  font-size: 23px;
  font-weight: 300;
}
.offer-details[open] summary > span {
  transform: rotate(45deg);
}
.offer-details ul {
  display: grid;
  gap: 12px;
  list-style: disc;
  padding-left: 18px;
  margin: 12px 0 24px;
  font-size: 14px;
  color: var(--graph);
}
.offer-details p {
  font-size: 12px;
  color: var(--graph);
  line-height: 1.7;
  margin: 14px 0;
}
.offer-currency {
  font: 400 10px/1.6 var(--mono);
  color: var(--graph);
}
.ongoing-options {
  margin-top: 48px;
  padding: 0 28px;
  background: #eae6dd;
}
.ongoing-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.025em;
  list-style: none;
}
.ongoing-options > summary::-webkit-details-marker {
  display: none;
}
.ongoing-options summary small {
  display: block;
  font: 400 13px/1.6 var(--sans);
  color: var(--graph);
  margin-top: 5px;
}
.ongoing-options > summary > span:last-child {
  font: 300 30px/1 var(--sans);
}
.ongoing-options[open] > summary > span:last-child {
  transform: rotate(45deg);
}
.ongoing-body {
  padding: 0 0 28px;
}
.continuation-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 0;
}
.continuation-option h3 {
  font-size: 24px;
}
.continuation-option p:not(.continuation-price) {
  font-size: 14px;
  color: var(--graph);
  max-width: 440px;
  margin-top: 10px;
}
.continuation-option > div:last-child {
  text-align: right;
  flex-shrink: 0;
}
.continuation-price {
  font: 500 32px/1 var(--sans);
  letter-spacing: -0.05em;
  margin-bottom: 12px;
}
.continuation-price > span {
  font: 400 12px/1 var(--sans);
  letter-spacing: 0;
  margin-left: 6px;
}
.continuation-option .lnk {
  font-size: 12px;
}
.ongoing-body .tblw {
  margin-top: 28px;
}
.founder-note {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 36px;
  max-width: 820px;
  margin: 72px auto 0;
}
.founder-note > img {
  width: 160px;
  height: 200px;
  object-fit: cover;
}
.founder-note h3 {
  font-size: 28px;
  line-height: 1.08;
  margin-top: 12px;
}
.founder-note p {
  font-size: 14px;
  color: var(--graph);
  max-width: 470px;
  line-height: 1.6;
  margin-top: 14px;
}
.founder-note a {
  font-size: 12px;
  margin-top: 16px;
}
.conversation-section {
  padding-top: 0;
  padding-bottom: 32px;
}
.home .faq {
  padding: 0;
  margin-bottom: 88px;
}
.home .faq h2 {
  font-size: clamp(30px, 3vw, 44px);
}
.conversation {
  position: relative;
  padding: clamp(40px, 6vw, 88px);
  background: var(--sig);
  overflow: hidden;
}
.conversation h2 {
  font-size: clamp(46px, 7.2vw, 104px);
  line-height: 0.99;
  margin: 28px 0 24px;
  max-width: 840px;
}
.conversation > p:not(.eyebrow) {
  font-size: 17px;
  max-width: 450px;
  line-height: 1.55;
}
.btn-ink {
  border-radius: 5px;
}
.conversation > .btn {
  margin-top: 30px;
}
.conversation .write-alternative {
  font-size: 12px !important;
  margin-top: 20px;
}
.write-alternative a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.write-alternative .arr {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.conversation-arrow {
  position: absolute;
  right: 5%;
  bottom: 5%;
  font: 300 clamp(140px, 24vw, 350px)/0.8 var(--sans);
}

@media (max-width: 1000px) {
  .section-heading {
    align-items: start;
    gap: 32px;
  }
  .section-dek {
    max-width: 300px;
    font-size: 14px;
  }
  .service-grid {
    gap: 20px;
  }
  .art-coordinate,
  .art-foot {
    left: 14px;
    font-size: 8px;
  }
  .art-coordinate {
    top: 14px;
  }
  .art-foot {
    bottom: 14px;
  }
  .format-square {
    padding: 12px;
  }
  .format-portrait {
    padding: 10px;
  }
  .work-rail {
    gap: 16px;
  }
  .study-meta {
    flex-wrap: wrap;
    gap: 4px;
  }
  .kickoff-layout {
    gap: 40px;
  }
  .management-note {
    padding: 24px;
    gap: 20px;
  }
  .management-note .management-mark {
    display: none;
  }
  .conversation-arrow {
    right: 3%;
    bottom: 8%;
    font-size: 200px;
  }
}
@media (max-width: 760px) {
  .section-heading {
    display: block;
    margin-bottom: 32px;
  }
  .section-dek {
    margin-top: 24px;
    max-width: 410px;
    font-size: 15px;
  }
  .section-heading h2 {
    margin-top: 18px;
  }
  .value-grid {
    gap: 30px;
  }
  .value-grid h3 {
    font-size: 23px;
  }
  .value-grid p {
    font-size: 14px;
  }
  .service-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .service-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
  }
  .service-copy {
    padding-top: 0;
  }
  .service-copy h3 {
    font-size: 27px;
  }
  .service-copy > p:not(.service-number) {
    font-size: 14px;
  }
  .service-deliverables {
    margin-top: 16px;
  }
  .research-center {
    font-size: 29px;
  }
  .format-square > span {
    font-size: 31px;
  }
  .format-portrait > span {
    font-size: 22px;
  }
  .learning-glyph > span {
    font-size: 30px;
  }
  .management-note {
    display: block;
  }
  .management-note > a {
    margin-top: 16px;
  }
  .work-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    gap: 20px;
  }
  .work-rail .study {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }
  .portfolio-foot {
    margin-top: 16px;
  }
  .kickoff-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .kickoff-context .lead {
    max-width: 450px;
  }
  .home-offer {
    max-width: 600px;
  }
  .conversation-arrow {
    font-size: 170px;
    right: 5%;
    bottom: 16%;
  }
}
@media (max-width: 540px) {
  .capabilities {
    padding: 19px 0;
  }
  .capability-track span {
    font-size: 16px;
    gap: 24px;
    padding: 0 12px;
  }
  .value-section .section-heading {
    margin-bottom: 36px;
  }
  .value-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .value-grid article {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 20px;
  }
  .value-symbol {
    grid-row: span 2;
    font-size: 48px;
    margin: 4px 0 0;
    height: 50px;
  }
  .value-grid h3 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .value-grid p {
    font-size: 15px;
  }
  .service-item {
    display: block;
  }
  .service-art {
    aspect-ratio: 1.3;
  }
  .service-copy {
    margin-top: 24px;
  }
  .art-coordinate {
    font-size: 10px;
    top: 20px;
    left: 20px;
  }
  .art-foot {
    font-size: 10px;
    bottom: 20px;
    left: 20px;
  }
  .service-copy h3 {
    font-size: 31px;
    max-width: 330px;
  }
  .service-copy > p:not(.service-number) {
    font-size: 15px;
  }
  .research-center {
    font-size: 38px;
  }
  .format-square > span {
    font-size: 40px;
  }
  .format-portrait > span {
    font-size: 28px;
  }
  .learning-glyph > span {
    font-size: 37px;
  }
  .management-note {
    padding: 24px;
    margin-top: 36px;
  }
  .management-note h3 {
    font-size: 23px;
    line-height: 1.15;
    max-width: 260px;
  }
  .work-rail .study {
    flex-basis: 80%;
  }
  .study-meta {
    flex-wrap: nowrap;
  }
  .study-copy > h3 {
    font-size: 20px;
  }
  .method-foot {
    display: block;
  }
  .method-foot a {
    margin-top: 18px;
  }
  .kickoff-context h2 {
    font-size: 66px;
  }
  .kickoff-context .lead {
    font-size: 21px;
  }
  .kickoff-delivery {
    gap: 28px;
  }
  .kickoff-delivery b {
    font-size: 38px;
  }
  .home-offer .pr {
    font-size: 49px;
  }
  .home-offer {
    padding: 28px;
  }
  .ongoing-options {
    padding: 0 22px;
    margin-top: 32px;
  }
  .ongoing-options summary {
    font-size: 21px;
  }
  .ongoing-options summary small {
    font-size: 12px;
    max-width: 230px;
  }
  .continuation-option {
    display: block;
  }
  .continuation-option > div:last-child {
    text-align: left;
    margin-top: 24px;
  }
  .continuation-option h3 {
    font-size: 25px;
  }
  .founder-note {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    margin-top: 48px;
  }
  .founder-note > img {
    width: 88px;
    height: 110px;
  }
  .founder-note .eyebrow {
    font-size: 9px;
  }
  .founder-note h3 {
    font-size: 25px;
  }
  .founder-note p {
    font-size: 13px;
  }
  .home .faq {
    margin-bottom: 56px;
  }
  .conversation {
    padding: 34px 24px;
  }
  .conversation h2 {
    font-size: 46px;
  }
  .conversation > p:not(.eyebrow) {
    font-size: 15px;
  }
  .conversation-arrow {
    position: static;
    display: block;
    font-size: 112px;
    margin-top: 40px;
    text-align: right;
  }
  .conversation .btn {
    font-size: 13px;
  }
  .conversation .write-alternative {
    font-size: 11px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .capability-track,
  .research-orbit > i,
  .format-portrait {
    animation: none;
  }
  .capabilities {
    overflow: visible;
    padding: 18px var(--gut);
  }
  .capability-track {
    width: auto;
  }
  .capability-track > div:first-child {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 0;
  }
  .capability-track > div[aria-hidden] {
    display: none;
  }
  .capability-track span {
    font-size: 13px;
    gap: 16px;
    padding: 5px 8px;
  }
  .capability-track i {
    font-size: 17px;
  }
  .case-surface > img {
    transition: none;
  }
}
.no-js .capability-track > div[aria-hidden] {
  display: none;
}
.no-js .capability-track {
  width: auto;
}
.no-js .capability-track > div {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.capability-band {
  position: relative;
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: var(--gut);
}
.capability-band .capabilities {
  flex: 1;
  min-width: 0;
}

@media (max-width: 540px) {
  .capability-band {
    gap: 8px;
    padding-right: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .capability-band {
    padding-right: 0;
  }
}

/* Packages are visible together. The entry price is a purchase, not a maze of prerequisites. */
.packages-section {
  background: var(--paper);
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.package-card {
  min-width: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 16px;
}
.package-card h3 {
  font-size: 30px;
  line-height: 1.1;
}
.package-description {
  font-size: 16px;
  color: var(--graph);
  line-height: 1.5;
  min-height: 4.5em;
  margin-top: 20px;
}
.package-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font: 550 clamp(36px, 3.5vw, 50px)/1.1 var(--sans);
  letter-spacing: -0.055em;
  margin-top: 28px;
  min-height: 70px;
}
.package-amount > span:last-child:not(.price-token) {
  display: block;
  width: 100%;
  font: 400 13px/1.5 var(--sans);
  color: var(--graph);
  letter-spacing: 0;
}
.package-amount .package-from {
  font: 400 13px/1 var(--sans);
  color: var(--graph);
  letter-spacing: 0;
}
.package-amount .price-was {
  font-size: 0.48em;
}
.package-card ul {
  display: grid;
  gap: 14px;
  margin: 32px 0;
  flex: 1;
  align-content: start;
}
.package-card li {
  font-size: 15px;
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}
.package-card li:before {
  content: '↗';
  position: absolute;
  left: 0;
  color: var(--graph);
}
.package-card > .btn {
  width: 100%;
  border-radius: 7px;
  font-size: 14px;
}
.package-details {
  margin-top: 20px;
}
.package-details > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--graph);
}
.package-details summary::-webkit-details-marker {
  display: none;
}
.package-details summary > span {
  font-size: 22px;
  font-weight: 300;
}
.package-details[open] summary > span {
  transform: rotate(45deg);
}
.package-details > p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--graph);
  margin: 12px 0 0;
}
.entry-package {
  background: #eae5d8;
}
.launch-banner {
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: 18px;
  margin-top: 18px;
}
.launch-banner > p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #c8c5ba;
}
.launch-banner > p > span {
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.launch-banner strong {
  display: block;
  color: var(--paper);
  font-size: 14px;
  font-weight: 550;
}
.launch-countdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  width: 100%;
}
.entry-package .launch-countdown > span {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 9px;
  color: #c8c5ba;
  min-width: 0;
}
.launch-countdown b {
  font: 500 26px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--paper);
}
.launch-countdown > i {
  font-style: normal;
  font-size: 18px;
  color: #c8c5ba;
  align-self: flex-start;
  line-height: 26px;
}
.package-terms {
  font-size: 13px;
  color: var(--graph);
  margin-top: 24px;
}
@media (max-width: 1000px) {
  .package-grid {
    gap: 16px;
  }
  .package-card {
    padding: 24px;
  }
  .package-card h3 {
    font-size: 27px;
  }
  .package-description {
    font-size: 15px;
  }
  .package-card li {
    font-size: 14px;
  }
  .package-card > .btn {
    font-size: 12px;
    padding-inline: 12px;
  }
}
@media (max-width: 760px) {
  .package-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .package-card {
    padding: 32px;
  }
  .package-description {
    min-height: 0;
    max-width: 500px;
    font-size: 16px;
  }
  .package-card h3 {
    font-size: 32px;
  }
  .package-amount {
    margin-top: 24px;
    font-size: 48px;
    min-height: 0;
  }
  .package-card ul {
    margin: 26px 0;
  }
  .package-card li {
    font-size: 16px;
  }
  .package-card > .btn {
    font-size: 15px;
  }
}
@media (max-width: 360px) {
  .package-card {
    padding: 26px;
  }
}

/* ================= subpages: blog, article, book, privacy, 404 ================= */
.bc {
  padding-top: clamp(28px, 4vw, 48px);
}
.bc ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--graph);
}
.bc li {
  display: flex;
  align-items: center;
}
.bc li + li::before {
  content: '/';
  margin: 0 10px;
  opacity: 0.5;
}
.bc a {
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 3px;
}
.bc a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
.bc [aria-current] {
  color: var(--ink);
}
.lnk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  border-bottom: 1.5px solid var(--ink);
  padding: 6px 0 3px;
}
.lnk .arr {
  transition: transform 0.25s var(--ease);
}
.lnk:hover .arr {
  transform: translateX(3px);
}

/* post cards */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(36px, 4vw, 56px);
}
.pgrid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pgrid.two + .pgrid {
  margin-top: 18px;
}
.pgrid.two .pc-t {
  font-size: clamp(23px, 2.1vw, 30px);
}
.pgrid.two .pcard a {
  padding: 30px 30px 26px;
}
.pcard a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 26px 24px;
  border-radius: 22px;
  background: var(--white);
  box-shadow:
    0 0 0 1px var(--line),
    0 1px 2px rgba(17, 17, 16, 0.04),
    0 8px 24px -22px rgba(17, 17, 16, 0.2);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.pcard a:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--line2),
    0 2px 4px rgba(17, 17, 16, 0.05),
    0 12px 28px -22px rgba(17, 17, 16, 0.24);
}
.pc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graph);
}
.pc-n {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
.pc-new {
  margin-left: auto;
  padding: 6px 9px;
  border-radius: 99px;
  background: var(--sig);
  color: var(--ink);
  font-weight: 600;
}
.pc-t {
  margin-top: 22px;
  font: 600 clamp(21px, 1.75vw, 24px)/1.18 var(--sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pc-d {
  display: block;
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--graph);
  text-wrap: pretty;
}
.pc-m {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 26px;
  font: 500 12px/1 var(--mono);
  color: var(--graph);
}
.pc-go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  transition:
    background 0.25s,
    transform 0.25s var(--ease);
}
.pcard a:hover .pc-go {
  background: var(--sig);
  box-shadow: none;
}
.ntop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* blog index */
.blog-h {
  max-width: 900px;
  padding: clamp(28px, 4vw, 48px) 0 0;
}
.h-blog,
.h-nf {
  font: 600 clamp(44px, 6.2vw, 92px)/1 var(--sans);
  letter-spacing: -0.055em;
  margin-top: 22px;
  text-wrap: balance;
  padding-bottom: 0.06em;
}
.h-blog {
  font-size: clamp(44px, 5.4vw, 78px);
}
.rss {
  margin-top: 18px;
  font: 500 12px/1 var(--mono);
}
.rss a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--graph);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rss a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sig);
}
.bfeat {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: 28px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  box-shadow: 0 20px 44px -36px rgba(17, 17, 16, 0.3);
  transition: transform 0.35s var(--ease);
}
.bfeat:hover {
  transform: translateY(-4px);
}
.bfeat-art {
  position: relative;
  min-height: 340px;
  background:
    radial-gradient(90% 80% at 20% 100%, rgba(255, 90, 31, 0.32), transparent 60%),
    linear-gradient(180deg, #1c1c1b, #121211);
  overflow: hidden;
}

.fa-card {
  position: absolute;
  width: 150px;
  aspect-ratio: 4/5;
  border-radius: 14px;
  background: linear-gradient(160deg, #fbfaf6, #e4dfd3);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.6);
}
.fa-card::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  height: 46%;
  border-radius: 8px;
  background: linear-gradient(140deg, #ff7a40, #ff5a1f);
}
.fa-card::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 62%;
  width: 70%;
  height: 9px;
  border-radius: 5px;
  background: #111110;
  box-shadow: 0 18px 0 -1px rgba(17, 17, 16, 0.25);
}
.fa1 {
  left: 12%;
  top: 22%;
  transform: rotate(-6deg);
  filter: saturate(0.15) brightness(0.8);
  opacity: 0.75;
}
.fa2 {
  left: 38%;
  top: 14%;
  transform: rotate(3deg);
}
.fa3 {
  left: 60%;
  top: 30%;
  transform: rotate(9deg);
}
.fa3::before {
  background: linear-gradient(140deg, #2a2926, #5c5a55);
}
.fa-lbl {
  position: absolute;
  left: 9%;
  bottom: 12%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 9px;
  background: rgba(245, 242, 235, 0.1);
  box-shadow: inset 0 0 0 1px rgba(245, 242, 235, 0.14);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9c3b5;
  backdrop-filter: blur(6px);
}
.fa-lbl i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8f8b82;
}
.fa-lbl.l2 {
  left: auto;
  right: 9%;
  bottom: auto;
  top: 10%;
}
.fa-lbl.l2 i {
  background: var(--sig);
}
.bfeat-body {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 48px);
}
.bfeat .pc-top {
  color: #a9a59b;
}
.bfeat .pc-n {
  background: rgba(245, 242, 235, 0.08);
  box-shadow: inset 0 0 0 1px rgba(245, 242, 235, 0.12);
  color: var(--paper);
}
.bfeat-t {
  margin-top: 24px;
  font: 600 clamp(28px, 3vw, 42px)/1.08 var(--sans);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.bfeat .pc-d {
  color: #b4b0a6;
  font-size: 17px;
}
.bfeat .pc-m {
  color: #a9a59b;
}
.bfeat .pc-go {
  background: var(--sig);
  box-shadow: none;
}

/* CTA box */
.cta-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 40px;
  margin: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 120px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 28px;
  background: var(--stone);
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-box::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -200px;
  z-index: -1;
  width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 90, 31, 0.5), rgba(255, 90, 31, 0));
}
.cta-box h2 {
  margin-top: 14px;
  font: 600 clamp(28px, 3vw, 40px)/1.08 var(--sans);
  letter-spacing: -0.04em;
}
.cta-box p:not(.kick) {
  margin-top: 12px;
  max-width: 560px;
  color: var(--graph);
  line-height: 1.55;
}
.cta-box .ctas {
  margin-top: 0;
  justify-content: flex-end;
}

/* article */
.art-h {
  max-width: 860px;
  padding: clamp(28px, 4vw, 52px) 0 0;
}
.h-art {
  margin-top: 22px;
  font: 600 clamp(36px, 4.6vw, 64px)/1.04 var(--sans);
  letter-spacing: -0.045em;
  text-wrap: balance;
  padding-bottom: 0.04em;
}
.dek {
  margin-top: 22px;
  max-width: 720px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--graph);
  text-wrap: pretty;
}
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 26px;
  font: 500 12px/1.4 var(--mono);
  color: var(--graph);
}
.byline span + span::before {
  content: '·';
  margin: 0 10px;
  opacity: 0.6;
}
.art-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 720px);
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
}
.toc {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 130px);
  overflow: auto;
}
.toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--graph);
  list-style: none;
  cursor: pointer;
}
.toc > summary::-webkit-details-marker {
  display: none;
}
.toc > summary > span {
  font: 400 20px var(--sans);
  transition: transform 0.2s;
}
.toc[open] > summary > span {
  transform: rotate(45deg);
}
.toc ol {
  margin-top: 14px;
  display: grid;
  gap: 2px;
  counter-reset: t;
}
.toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--graph);
  transition: color 0.2s;
  counter-increment: t;
}
.toc a::before {
  content: counter(t, decimal-leading-zero);
  font: 500 11px/1.9 var(--mono);
  opacity: 0.6;
}
.toc a:hover,
.toc a.on {
  color: var(--ink);
}
.toc a.on::before {
  color: var(--sig);
  opacity: 1;
}
.prose {
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.006em;
  color: #2a2926;
}
.prose.solo {
  max-width: 720px;
  margin-top: clamp(36px, 4vw, 56px);
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  margin-top: 2.2em;
  font: 600 clamp(26px, 2.4vw, 32px)/1.18 var(--sans);
  letter-spacing: -0.03em;
  color: var(--ink);
  scroll-margin-top: 96px;
  text-wrap: balance;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  margin-top: 1.8em;
  font: 600 20px/1.3 var(--sans);
  letter-spacing: -0.018em;
  color: var(--ink);
  scroll-margin-top: 96px;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 0.7em;
}
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 90, 31, 0.7);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.prose a:hover {
  text-decoration-color: var(--ink);
}
.prose strong {
  color: var(--ink);
  font-weight: 600;
}
.prose ul,
.prose ol {
  display: grid;
  gap: 0.55em;
}
.prose ul > li {
  position: relative;
  padding-left: 24px;
}
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--sig);
}
.prose ol {
  counter-reset: o;
}
.prose ol > li {
  position: relative;
  padding-left: 38px;
  counter-increment: o;
}
.prose ol > li::before {
  content: counter(o);
  position: absolute;
  left: 0;
  top: 0.2em;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font: 600 12px/1 var(--mono);
}
.prose ul.check {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  gap: 0.75em;
}
.prose ul.check > li {
  padding-left: 34px;
}
.prose ul.check > li::before {
  left: 0;
  top: 0.3em;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--ink);
}
.prose ul.check > li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: calc(0.3em + 5px);
  width: 8px;
  height: 4.5px;
  border: solid var(--sig);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--stone);
  border-left: 3px solid var(--sig);
  color: var(--ink);
}
.prose blockquote p + p {
  margin-top: 0.6em;
}
.prose code {
  font: 500 0.86em var(--mono);
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--stone);
}
.tbl {
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.tbl:focus-visible {
  outline-offset: 2px;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.5;
}
.prose th {
  text-align: left;
  font: 600 12px/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graph);
  background: var(--paper);
  padding: 13px 16px;
}
.prose tbody tr:nth-child(even) {
  background: rgba(17, 17, 16, 0.025);
}
.prose td {
  padding: 13px 16px;
  vertical-align: top;
}

.prose td:first-child {
  font-weight: 500;
  color: var(--ink);
}
.prose h2#sources + ul {
  font-size: 15.5px;
  line-height: 1.55;
}
.related {
  padding-bottom: clamp(72px, 9vw, 120px);
}
.rel-h {
  font: 600 clamp(28px, 3vw, 40px)/1.08 var(--sans);
  letter-spacing: -0.04em;
}
.related .pgrid {
  margin-top: 28px;
}
.art .cta-box {
  margin-bottom: clamp(56px, 7vw, 96px);
}
.legal .prose.solo {
  margin-bottom: clamp(80px, 10vw, 140px);
}

/* 404 */
.nf {
  padding: clamp(72px, 12vw, 160px) 0 clamp(96px, 12vw, 170px);
}
.h-nf {
  font-size: clamp(48px, 8vw, 120px);
}

@media (max-width: 1024px) {
  .pgrid {
    grid-template-columns: 1fr 1fr;
  }
  .pgrid > .pcard:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
  .bfeat {
    grid-template-columns: minmax(0, 1fr);
  }
  .bfeat-art {
    min-height: 260px;
  }
  .art-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .toc {
    position: static;
    max-height: none;
    margin-bottom: 36px;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 0 0 1px var(--line);
  }
  .toc ol {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  .cta-box {
    grid-template-columns: minmax(0, 1fr);
  }
  .cta-box .ctas {
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .pgrid,
  .pgrid.two {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pgrid.two + .pgrid {
    margin-top: 14px;
  }
  .pgrid.two .pcard a {
    padding: 22px;
  }
  .pcard a {
    padding: 22px;
  }
  .pc-t {
    margin-top: 18px;
  }
  .bfeat {
    border-radius: 24px;
  }
  .bfeat-art {
    min-height: 220px;
  }
  .fa-card {
    width: 116px;
  }
  .toc ol {
    grid-template-columns: 1fr;
  }
  .prose {
    font-size: 17px;
    line-height: 1.68;
  }
  .prose table {
    font-size: 14.5px;
  }
  .prose th,
  .prose td {
    padding: 11px 12px;
  }
  .tbl table {
    min-width: 520px;
  }
  .prose ul.check {
    padding: 18px;
  }
  .cta-box {
    border-radius: 24px;
  }
  .cta-box .ctas .btn {
    flex: 0 0 auto;
    width: 100%;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
  .bk-submit .btn {
    flex: 1 1 100%;
  }
  .nf .ctas .btn {
    flex: 0 0 auto;
    width: 100%;
  }
}
/* ---------- secondary "prefer to talk" link ---------- */
.talk {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--graph);
}
.talk a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
  white-space: nowrap;
}
.final .talk {
  text-align: center;
}
.mnav a[href='/call'] {
  font-size: 15px;
}
/* ---------- article polish ---------- */
.art .wrap {
  position: relative;
}
.rprog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: var(--sig);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: rprog linear both;
  animation-timeline: scroll(root);
}
@supports not (animation-timeline: scroll()) {
  .rprog {
    display: none;
  }
}
@keyframes rprog {
  to {
    transform: scaleX(1);
  }
}
.art-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
  margin-top: 30px;
}
.art-meta div {
  padding: 14px 16px 13px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.art-meta dt {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graph);
}
.art-meta dd {
  margin: 9px 0 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.art-meta small {
  font: 500 12px var(--mono);
  color: var(--graph);
}
.prose {
  max-width: 68ch;
}
.prose > p:first-child {
  font-size: 1.14em;
  line-height: 1.6;
  color: var(--ink);
}
.prose h2 {
  padding-top: 0.2em;
}
.prose h2::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--sig);
  margin-bottom: 16px;
}
.prose h2:first-child::before {
  display: none;
}
.prose blockquote {
  padding: 22px 26px;
  font-size: 1.06em;
  line-height: 1.55;
  border-left: 0;
  box-shadow: inset 3px 0 0 var(--sig);
  border-radius: 4px 16px 16px 4px;
}
.prose blockquote p:last-child {
  font-size: 0.88em;
  color: var(--graph);
}
.prose blockquote p:only-child {
  font-size: 1em;
  color: var(--ink);
}
.rel-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pc-m > span:first-child {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .art-meta {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .art-meta div {
    padding: 12px 14px;
  }
  .art-meta dd {
    font-size: 15px;
  }
  .prose > p:first-child {
    font-size: 1.08em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rprog {
    display: none;
  }
}

/* Acquisition: calm surfaces, one decision at a time. */
.bk > .wrap {
  max-width: 964px;
}
.bk-intro {
  padding-top: clamp(32px, 4.5vw, 64px);
  max-width: 850px;
}
.bk-intro .h-bk {
  margin-top: 0;
}
.bk-intro .lead {
  margin-top: 14px;
  max-width: 650px;
  font-size: 18px;
}
.h-bk {
  font: 600 clamp(38px, 4.7vw, 64px)/1.04 var(--sans);
  letter-spacing: -0.05em;
  margin-top: 18px;
  text-wrap: balance;
}
.bk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0 72px;
  align-items: start;
}
.bk-app {
  position: relative;
  min-width: 0;
  padding: 32px;
  border-radius: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px -28px rgba(17, 17, 16, 0.24);
  scroll-margin-top: 100px;
}
.bk-alt {
  font-size: 14px;
  color: var(--graph);
  text-align: center;
}
.bk-alt a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.flow-footer {
  padding: 0 0 24px;
  font-size: 12px;
  color: var(--graph);
}
.flow-footer .wrap {
  max-width: 964px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flow-footer nav {
  display: flex;
  gap: 20px;
}
.flow-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.flow-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.booking-progress {
  display: flex;
  gap: 28px;
  margin-bottom: 28px;
}
.booking-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--graph);
}
.booking-progress li > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
  font: 500 11px var(--mono);
  border: 1px solid var(--line);
}
.booking-progress [aria-current='step'] {
  color: var(--ink);
}
.booking-progress [aria-current='step'] > span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.bk-tz {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
  max-width: 100%;
}
.bk-tz label {
  font-size: 13px;
  color: var(--graph);
  white-space: nowrap;
}
.bk-app .bk-tz select {
  flex: 1;
  min-width: 0;
  max-width: 360px;
  font-size: 13px;
  min-height: 44px;
  background: transparent;
  border-color: var(--line);
}
.bk-app fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  min-width: 0;
}
.bk-app legend {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 24px;
  letter-spacing: -0.035em;
}
.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
}
.f.wide,
.note-toggle.wide {
  grid-column: 1/-1;
}
.f label,
.slot-field label,
.manage-change label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.bk-app input,
.bk-app textarea,
.bk-app select,
.manage-change select {
  width: 100%;
  min-height: var(--control-height);
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #d8d5cd;
  border-radius: 12px;
  font: 400 16px/1.5 var(--sans);
  color: var(--ink);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.bk-app input::placeholder,
.bk-app textarea::placeholder {
  color: #77746d;
  opacity: 1;
}
.bk-app :is(input, textarea, select):hover {
  border-color: #a6a299;
}
.bk-app select,
.manage-change select {
  padding-right: 28px;
}
.bk-app textarea {
  resize: vertical;
  min-height: 112px;
}
.bk-app [aria-invalid='true'] {
  border-color: #a52e09;
  background: #fff6f1;
}
.bk-app :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: none;
}
.err {
  font-size: 13px;
  line-height: 1.5;
  color: #a52e09;
  margin-top: 8px;
}
.err:empty,
#form-msg:empty {
  display: none;
}
#form-msg:not(:empty) {
  padding: 14px 16px;
  margin-bottom: 24px;
  border: 1px solid #a52e09;
  border-radius: 12px;
  background: #fff6f1;
  font-size: 14px;
  line-height: 1.6;
}
.opt {
  font-weight: 400;
  color: var(--graph);
  font-size: 13px;
}
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.note-toggle > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.note-toggle > summary::-webkit-details-marker {
  display: none;
}
.note-plus {
  margin-left: auto;
  font-size: 22px;
  font-weight: 400;
}
.note-toggle[open] .note-plus {
  transform: rotate(45deg);
}
.note-toggle .f {
  padding: 4px 0 16px;
}
.note-toggle textarea {
  min-height: 100px;
}
.bk-submit {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.bk-submit .btn {
  justify-self: stretch;
}
.fine {
  font-size: 12px;
  line-height: 1.7;
  color: var(--graph);
}
.fine a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.form-notice {
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 14px;
}
.form-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  margin-bottom: 8px;
}
.form-context a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  text-decoration: underline;
}
.form-notice[role='alert'] {
  border-color: #a52e09;
}
.bk-hint {
  font-size: 15px;
  color: var(--graph);
  margin: 16px 0;
}
.picker-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 28px;
  min-height: 278px;
}
.calendar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.calendar-heading h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.calendar-arrows {
  display: flex;
  gap: 4px;
}
.calendar-arrows button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 17px;
}
.calendar-arrows button:hover:enabled {
  background: var(--paper);
}
.calendar-arrows button:disabled {
  opacity: 0.25;
  cursor: default;
}
.calendar-week,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  gap: 4px;
}
.calendar-week {
  font: 500 11px/28px var(--mono);
  color: var(--graph);
  margin-bottom: 6px;
}
.calendar-days button {
  width: min(100%, 44px);
  aspect-ratio: 1;
  height: auto;
  justify-self: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  background: #eeeae1;
  position: relative;
  transition:
    background 0.15s,
    transform 0.15s;
}
.calendar-days button:disabled {
  background: transparent;
  color: #9b978e;
  font-weight: 400;
  cursor: default;
}
.calendar-days button:enabled:hover {
  background: #e0dbcf;
}
.calendar-days button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.calendar-days button[aria-current='date']::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sig);
  bottom: 4px;
  left: calc(50% - 1.5px);
}
.calendar-days button:enabled:active {
  transform: scale(0.94);
}
.picker-times h2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  min-height: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.picker-empty {
  grid-column: 1/-1;
  font-size: 14px;
  line-height: 1.65;
  color: var(--graph);
}
.time-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.time-buttons button {
  min-height: 44px;
  border: 1px solid #d8d5cd;
  background: white;
  border-radius: 10px;
  font: 500 14px var(--sans);
  font-variant-numeric: tabular-nums;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.time-buttons button:hover {
  background: var(--paper);
  border-color: var(--ink);
}
.time-buttons button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.picker-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.picker-next p {
  font-size: 13px;
  color: var(--graph);
}
.picker-next .btn {
  min-width: 150px;
  margin-left: auto;
}
.picker-next p:empty {
  display: none;
}
/* Keep calendar text readable while a time-zone refresh is in progress.
   aria-busy, inert controls and the live status communicate the pending state. */
#time-picker[aria-busy='true'] {
  cursor: progress;
}
.selected-call {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.selected-call .kick {
  font-size: 10px;
}
.selected-call p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  margin-top: 10px;
}
.selected-call small {
  display: block;
  color: var(--graph);
  font-size: 12px;
  margin-top: 4px;
}
.selected-call button {
  flex: none;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
}
#booking-details:not([hidden]),
#booking-time:not([hidden]) {
  animation: step-in 0.24s var(--ease);
}
@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.receipt {
  max-width: 720px;
  margin: clamp(32px, 6vw, 80px) auto;
  padding: clamp(24px, 4vw, 48px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
}
.receipt > p {
  margin-top: 24px;
}
.receipt .fine {
  margin-top: 28px;
}
.receipt .h-bk {
  font-size: clamp(34px, 4vw, 52px);
}
.receipt a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.receipt p .btn {
  margin: 0 8px 12px 0;
}
.done-when {
  font-weight: 500;
}
.receipt form {
  margin: 20px 0;
}
.manage-change {
  margin-top: 28px;
  padding-top: 20px;
}
.manage-change summary {
  cursor: pointer;
  font-weight: 500;
  min-height: 44px;
}
.manage-change select {
  margin-bottom: 16px;
}
.management-picker {
  margin: 24px 0;
}
.plan-scope {
  text-align: center;
  max-width: 720px;
  margin: 28px auto 0;
  color: var(--graph);
  font-size: 15px;
}
@media (max-width: 720px) {
  .bk-intro {
    padding-top: 28px;
  }
  .bk-intro .h-bk {
    margin-top: 0;
  }
  .bk-intro .lead {
    font-size: 16px;
    max-width: 340px;
  }
  .bk-grid {
    padding-top: 24px;
    padding-bottom: 56px;
  }
  .bk-app {
    padding: 24px 20px;
    border-radius: 24px;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
  .bk-tz {
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
  }
  .bk-tz label {
    font-size: 12px;
  }
  .bk-app .bk-tz select {
    font-size: 12px;
    padding: 10px 24px 10px 10px;
    min-height: 42px;
    max-width: none;
  }
  .booking-progress {
    gap: 22px;
    margin-bottom: 24px;
  }
  .booking-progress li {
    font-size: 12px;
    gap: 7px;
  }
  .picker-layout {
    gap: 20px;
  }
  .selected-call {
    align-items: start;
  }
  .selected-call p {
    font-size: 14px;
  }
  .selected-call button {
    font-size: 11px;
  }
}
@media (max-width: 580px) {
  .picker-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
  }
  .calendar-days {
    gap: 3px;
  }
  .calendar-heading {
    margin-bottom: 8px;
  }
  .picker-times h2 {
    margin-bottom: 12px;
    min-height: 0;
  }
  .time-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
  .picker-next {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }
  .picker-next p {
    text-align: center;
  }
  .picker-next .btn {
    width: 100%;
  }
  .booking-progress {
    justify-content: space-between;
    gap: 12px;
  }
  .calendar-heading h2 {
    font-size: 16px;
  }
  .calendar-days button {
    font-size: 13px;
  }
  .calendar-arrows button {
    width: 36px;
    height: 36px;
  }
  .management-picker .time-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  #booking-details,
  #booking-time {
    animation: none;
  }
  .calendar-days button,
  .time-buttons button {
    transition: none;
  }
}

.scope-toggle {
  font-size: 13px;
  line-height: 1.6;
  color: var(--graph);
  margin: 0 0 18px;
}
.scope-toggle summary {
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
}
.scope-toggle p {
  margin-top: 8px;
}
.scope-toggle a {
  text-decoration: underline;
}

/* The method is an inspectable sequence of artifacts, not a claim of results. */
.idea-lab {
  background: #242421;
  color: var(--paper);
}
.lab-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--ink);
  gap: 8px;
  padding-bottom: 16px;
}
.lab-tabs button {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 20px;
  min-height: 76px;
  background: #242421;
  color: var(--paper);
  border: 0;
  cursor: pointer;
  font: 500 19px/1.2 var(--sans);
  letter-spacing: -0.035em;
}
.lab-tabs button > span {
  font: 400 10px/1 var(--mono);
  color: #bcb8ad;
}
.lab-tabs button > i {
  font: 400 22px/1 var(--sans);
  font-style: normal;
  margin-left: auto;
}
.lab-tabs button:hover {
  background: #33332d;
}
.lab-tabs button[aria-pressed='true'] {
  background: var(--sig);
  color: var(--ink);
}
.lab-tabs button[aria-pressed='true'] > span {
  color: var(--ink);
}
.lab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  min-height: 470px;
}
.lab-visual {
  display: grid;
  align-items: center;
  min-width: 0;
  background: #2e2e28;
  padding: clamp(28px, 3vw, 48px);
  position: relative;
  overflow: hidden;
}
.lab-narrative {
  padding: clamp(32px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.lab-narrative .eyebrow {
  color: #bcb8ad;
}
.lab-narrative h3 {
  font-size: clamp(30px, 3.4vw, 49px);
  line-height: 1.04;
  margin-top: 28px;
  max-width: 400px;
}
.lab-narrative > p:not(.eyebrow) {
  color: #c8c5ba;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 24px;
  max-width: 400px;
}
.method-output {
  margin-top: 32px;
  padding-left: 16px;
  border-left: 2px solid var(--sig);
  max-width: 375px;
}
.method-output > span {
  font: 400 10px/1.5 var(--mono);
  text-transform: uppercase;
  color: #c8c5ba;
}
.method-output > p {
  font-size: 12px;
  line-height: 1.65;
  margin-top: 8px;
}
.lab-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: var(--ink);
}
.lab-controls button {
  width: 42px;
  height: 42px;
  border: 1px solid #8b8a7d;
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font: 400 23px/1 var(--sans);
  cursor: pointer;
}
.lab-controls button:hover:not(:disabled) {
  background: var(--paper);
  color: var(--ink);
}
.lab-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}
.lab-counter {
  font: 400 11px/1.5 var(--mono);
  color: #bcb8ad;
  margin-right: auto;
}
.method-control-hint {
  font: 400 10px/1.5 var(--mono);
  color: #bcb8ad;
  margin-right: 8px;
}
.idea-lab button:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -5px;
}
.lab-tabs button[aria-pressed='true']:focus-visible {
  outline-color: var(--ink);
}
.artifact-label {
  font: 500 10px/1.5 var(--mono);
  letter-spacing: 0.03em;
}
.artifact-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  margin-bottom: 28px;
}
.artifact-title > span:last-child {
  font: 400 8px/1.5 var(--mono);
  max-width: 120px;
  text-align: right;
}
/* Research becomes a brief: source material above a single editorial direction. */
.dig-board {
  width: 100%;
  max-width: 520px;
  margin: auto;
}
.dig-sources {
  padding: 8px 24px 14px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px 12px 0 0;
  margin: 0 14px;
}
.dig-source {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 18px 0;
}
.dig-source + .dig-source {
  border-top: 1px solid #d9d5cb;
}
.dig-source > svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dig-source strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.dig-source span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--graph);
  margin-top: 5px;
}
.dig-brief {
  position: relative;
  background: var(--sig);
  color: var(--ink);
  border-radius: 12px;
  padding: 28px 30px;
}
.dig-brief > strong {
  display: block;
  font: 550 clamp(30px, 3.1vw, 45px)/1.02 var(--sans);
  letter-spacing: -0.055em;
  margin-top: 28px;
}
.dig-brief-rule {
  height: 1px;
  background: var(--ink);
  opacity: 0.25;
  margin-top: 28px;
}
.dig-brief p {
  font-size: 13px;
  line-height: 1.55;
  margin-top: 16px;
  max-width: calc(100% - 38px);
}
.dig-brief > svg {
  position: absolute;
  right: 24px;
  bottom: 26px;
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.concept-map > .artifact-label {
  display: block;
  margin-bottom: 28px;
}
.concept-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.concept-cards > div {
  aspect-ratio: 4/6;
  background: var(--paper);
  color: var(--ink);
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
}
.concept-cards > div:nth-child(2) {
  background: var(--sig);
  margin-top: 28px;
  margin-bottom: -28px;
}
.concept-cards > div:nth-child(3) {
  background: #ddd5c1;
}
.concept-cards div > span {
  font: 400 8px/1.4 var(--mono);
  display: block;
}
.concept-cards strong {
  font: 600 clamp(20px, 2.7vw, 38px)/0.96 var(--sans);
  letter-spacing: -0.06em;
  display: block;
  margin-top: 25px;
}
.concept-cards div:nth-child(2) strong {
  position: absolute;
  bottom: 16px;
}
.concept-dot {
  position: absolute;
  width: 70px;
  height: 70px;
  background: var(--sig);
  border-radius: 50%;
  bottom: -23px;
  right: -10px;
}
.concept-play {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 30px;
  font-style: normal;
}
.concept-map > p {
  font: 400 10px/1.5 var(--mono);
  color: #c8c5ba;
  margin-top: 58px;
}
.test-artifact {
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
}
.ab-pair {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: center;
  gap: 6px;
}
.ab-pair > div {
  background: var(--stone);
  padding: 16px;
  min-height: 145px;
}
.ab-pair > div:last-child {
  background: var(--sig);
}
.ab-pair > div > span {
  font: 500 10px/1 var(--mono);
}
.ab-pair strong {
  display: block;
  font: 550 clamp(22px, 2.1vw, 30px)/1.03 var(--sans);
  letter-spacing: -0.05em;
  margin-top: 24px;
}
.ab-vs {
  text-align: center;
  font: 400 10px/1 var(--mono);
}
.test-artifact dl {
  margin-top: 26px;
}
.test-artifact dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  margin-top: 12px;
}
.test-artifact dt {
  font: 500 9px/1.6 var(--mono);
}
.test-artifact dd {
  font-size: 11px;
  line-height: 1.6;
  color: var(--graph);
}
.readout-artifact {
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
}
.readout-artifact .artifact-title {
  margin-bottom: 22px;
}
.readout-entry {
  padding-bottom: 20px;
}
.readout-entry > span {
  display: block;
  font: 400 9px/1.5 var(--mono);
  margin-bottom: 10px;
  color: var(--graph);
}
.readout-entry > strong {
  display: block;
  font: 550 clamp(26px, 2.8vw, 40px)/1.02 var(--sans);
  letter-spacing: -0.05em;
}
.readout-entry > p {
  font-size: 12px;
  line-height: 1.55;
  max-width: 360px;
}
.next-action {
  background: var(--sig);
  margin: 0 -24px -24px;
  padding: 20px 56px 22px 24px;
  position: relative;
}
.next-action > span {
  color: var(--ink);
}
.next-action > b {
  position: absolute;
  right: 20px;
  top: 25px;
  font-size: 28px;
  font-weight: 400;
}
.repeat-artifact > .artifact-label {
  display: block;
}
.repeat-ring {
  position: relative;
  width: 78%;
  max-width: 340px;
  margin: 28px auto;
}
.repeat-ring svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.repeat-ring path:first-child {
  stroke: var(--sig);
  stroke-width: 25;
}
.repeat-ring path:nth-of-type(2) {
  stroke: var(--paper);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.repeat-ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 500 clamp(25px, 2.9vw, 42px)/0.97 var(--sans);
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.repeat-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  font: 400 9px/1.5 var(--mono);
  color: #c8c5ba;
}
.lab-page {
  padding-top: clamp(48px, 6vw, 88px);
}
.lab-page-intro {
  padding-bottom: 56px;
}
.lab-page-intro h1 {
  font-size: clamp(46px, 7vw, 100px);
  line-height: 1;
  margin-top: 28px;
}
.lab-page-intro > p:not(.eyebrow) {
  font-size: 18px;
  color: var(--graph);
  line-height: 1.6;
  margin-top: 28px;
}
.lab-page .idea-lab {
  background: var(--ink);
}
.lab-page .lab-tabs {
  background: var(--paper);
}
.lab-provenance {
  max-width: 760px;
  padding: 48px 0;
}
.lab-provenance > p {
  color: var(--graph);
  font-size: 15px;
  margin-top: 20px;
  line-height: 1.7;
}
.lab-provenance > a {
  font-size: 13px;
  margin-top: 24px;
}
.lab-invitation {
  padding: 56px 0 80px;
}
.lab-invitation h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.03;
  margin: 24px 0 30px;
}
.lab-invitation > a {
  margin-right: 24px;
}
.no-js .lab-panel + .lab-panel {
  border-top: 12px solid var(--ink);
}
.portfolio-dialog {
  border-radius: 8px;
  padding: 28px;
  width: min(1060px, calc(100% - 32px));
}
.portfolio-dialog .study-dialog-body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 36px;
}
.study-reasoning > h3 {
  font: 550 31px/1.1 var(--sans);
  letter-spacing: -0.045em;
  margin-top: 18px;
}
.study-reasoning > section {
  margin-top: 24px;
}
.study-reasoning h4 {
  font: 500 10px/1.5 var(--mono);
  text-transform: uppercase;
}
.study-reasoning section p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--graph);
}
.study-provenance {
  font-size: 11px;
  color: var(--graph);
  line-height: 1.7;
  margin-top: 24px;
}
.study-reasoning > a {
  font-size: 12px;
  margin-top: 20px;
}
.about-opening {
  padding: 64px 0;
}
.about-opening h1 {
  font-size: clamp(48px, 7.5vw, 108px);
  line-height: 0.98;
  margin-top: 30px;
  max-width: 1100px;
}
.about-opening > p:not(.eyebrow) {
  font-size: 20px;
  color: var(--graph);
  margin-top: 28px;
}
.about-story {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  padding: 16px 0 88px;
}
.about-portrait img {
  width: 100%;
  height: auto;
  max-width: 450px;
}
.about-portrait figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 11px;
  color: var(--graph);
  margin-top: 20px;
  max-width: 450px;
}
.about-story-copy h2,
.about-working h2 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.03;
  margin: 24px 0;
}
.about-story-copy > p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--graph);
  max-width: 510px;
  margin-top: 18px;
}
.about-socials {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  font-size: 12px;
}
.about-belief {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(32px, 6vw, 88px);
}
.about-belief h2 {
  font-size: clamp(45px, 7vw, 100px);
  line-height: 1;
  margin: 28px 0;
}
.about-belief > p:not(.eyebrow) {
  max-width: 540px;
  font-size: 17px;
  color: #c8c5ba;
}
.about-belief > a {
  margin-top: 24px;
  font-size: 13px;
}
.about-working {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  padding: 88px 0;
}
.about .steps li {
  box-shadow: none;
  border-radius: 0;
  padding: 16px 0;
}
.about .steps li:before {
  border-radius: 50%;
}
.about-close {
  padding: clamp(32px, 6vw, 88px);
  background: var(--sig);
  margin-bottom: 32px;
}
.about-close h2 {
  font-size: clamp(46px, 7vw, 100px);
  line-height: 1;
  margin: 24px 0 32px;
}
.about-close > a {
  margin-right: 20px;
}
/* Page headings retain the brand's sans typography, including booking and articles. */
.art-h em,
.flow-title em,
.h2 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: inherit;
}
@media (max-width: 1000px) {
  .lab-tabs button {
    padding: 18px 14px;
    gap: 9px;
    font-size: 17px;
  }
  .lab-panel {
    min-height: 430px;
  }
  .lab-visual {
    padding: 26px;
  }
  .lab-narrative {
    padding: 30px;
  }
  .lab-narrative h3 {
    font-size: 34px;
  }
  .lab-narrative > p:not(.eyebrow) {
    font-size: 14px;
  }
  .concept-cards {
    gap: 8px;
  }
  .concept-cards > div {
    padding: 12px 10px;
  }
  .concept-cards div > span {
    font-size: 7px;
  }
  .concept-cards strong {
    font-size: 26px;
  }
  .concept-play {
    font-size: 25px;
  }
  .test-artifact,
  .readout-artifact {
    padding: 20px;
  }
  .next-action {
    margin: 0 -20px -20px;
    padding-left: 20px;
  }
  .test-artifact dl > div {
    grid-template-columns: 90px 1fr;
  }
}
@media (max-width: 760px) {
  .lab-tabs {
    gap: 5px;
  }
  .lab-tabs button {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    font-size: 17px;
    min-height: 80px;
    padding: 14px;
  }
  .lab-tabs button > i {
    display: none;
  }
  .lab-panel {
    grid-template-columns: 1fr;
  }
  .lab-visual {
    min-height: 430px;
    padding: 32px;
  }
  .lab-narrative {
    min-height: 340px;
    padding: 32px;
  }
  .lab-narrative h3 {
    font-size: 38px;
    margin-top: 20px;
  }
  .lab-narrative > p:not(.eyebrow) {
    margin-top: 18px;
    font-size: 15px;
    max-width: 510px;
  }
  .method-output {
    margin-top: 24px;
    max-width: 470px;
  }
  .concept-cards {
    max-width: 500px;
    margin: auto;
  }
  .concept-cards strong {
    font-size: 35px;
  }
  .concept-cards div > span {
    font-size: 9px;
  }
  .concept-cards > div {
    padding: 18px;
  }
  .concept-play {
    font-size: 42px;
    margin-top: 36px;
  }
  .concept-cards div:nth-child(2) strong {
    bottom: 22px;
  }
  .artifact-title > span:last-child {
    max-width: none;
  }
  .test-artifact,
  .readout-artifact {
    padding: 28px;
    max-width: 540px;
    width: 100%;
    margin: auto;
  }
  .next-action {
    margin: 0 -28px -28px;
    padding-left: 28px;
  }
  .ab-pair strong {
    font-size: 28px;
  }
  .test-artifact dd {
    font-size: 12px;
  }
  .readout-entry > strong {
    font-size: 40px;
  }
  .repeat-ring span {
    font-size: 42px;
  }
  .about-story {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-portrait img {
    max-width: 380px;
  }
  .about-working {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 64px 0;
  }
  .portfolio-dialog .study-dialog-body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .lab-tabs button {
    font-size: 14px;
    padding: 12px 8px;
  }
  .lab-tabs button > span {
    font-size: 9px;
  }
  .lab-visual {
    padding: 22px;
    min-height: 370px;
  }
  .lab-narrative {
    padding: 28px 24px;
    min-height: 390px;
  }
  .lab-narrative h3 {
    font-size: 35px;
  }
  .lab-narrative > p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.65;
  }
  .lab-controls {
    padding: 16px 0;
  }
  .method-control-hint {
    display: none;
  }
  .concept-cards {
    gap: 7px;
  }
  .concept-cards > div {
    padding: 12px 10px;
    aspect-ratio: 4/7;
  }
  .concept-cards strong {
    font-size: 25px;
    margin-top: 20px;
  }
  .concept-cards div > span {
    font-size: 7px;
  }
  .concept-play {
    font-size: 26px;
    margin-top: 28px;
  }
  .concept-cards div:nth-child(2) strong {
    bottom: 15px;
  }
  .concept-map > p {
    font-size: 9px;
    max-width: 240px;
  }
  .concept-dot {
    width: 50px;
    height: 50px;
  }
  .test-artifact,
  .readout-artifact {
    padding: 20px;
  }
  .artifact-label {
    font-size: 9px;
  }
  .artifact-title {
    gap: 12px;
    margin-bottom: 20px;
  }
  .artifact-title > span:last-child {
    font-size: 7px;
    max-width: 80px;
  }
  .ab-pair > div {
    padding: 12px;
    min-height: 130px;
  }
  .ab-pair strong {
    font-size: 22px;
  }
  .test-artifact dl > div {
    grid-template-columns: 80px 1fr;
    gap: 10px;
  }
  .test-artifact dt {
    font-size: 8px;
  }
  .test-artifact dd {
    font-size: 10px;
  }
  .readout-entry > strong {
    font-size: 31px;
  }
  .readout-entry > p {
    font-size: 11px;
  }
  .next-action {
    margin: 0 -20px -20px;
    padding-left: 20px;
  }
  .repeat-ring {
    width: 90%;
  }
  .repeat-ring span {
    font-size: 35px;
  }
  .repeat-notes {
    justify-content: start;
    font-size: 9px;
  }
  .lab-page-intro {
    padding-bottom: 36px;
  }
  .lab-page-intro h1 {
    font-size: 50px;
  }
  .lab-page-intro > p:not(.eyebrow) {
    font-size: 16px;
  }
  .lab-page-intro > p:not(.eyebrow) br {
    display: none;
  }
  .lab-provenance {
    padding: 36px 0;
  }
  .lab-provenance > p {
    font-size: 14px;
  }
  .lab-invitation {
    padding-top: 24px;
  }
  .lab-invitation > a {
    margin-right: 0;
    margin-top: 12px;
  }
  .portfolio-dialog {
    padding: 20px;
  }
  .study-reasoning > h3 {
    font-size: 28px;
  }
  .about-opening {
    padding: 48px 0;
  }
  .about-opening h1 {
    font-size: 52px;
  }
  .about-opening > p:not(.eyebrow) {
    font-size: 17px;
  }
  .about-story {
    padding-bottom: 64px;
  }
  .about-story-copy > p {
    font-size: 15px;
  }
  .about-belief > p:not(.eyebrow) {
    font-size: 15px;
  }
  .about-close > a {
    margin-bottom: 16px;
  }
}

@media (max-width: 760px) {
  .lab-tabs {
    position: sticky;
    top: calc(var(--hh) + var(--sat));
    z-index: 2;
  }
}
/* Less annotation. One clear heading and explanation for each part of the story. */
.home .section-heading {
  display: block;
}
.home .section-heading h2 {
  margin-top: 0;
  font-size: clamp(36px, 4.6vw, 66px);
}
.home .section-heading .section-dek {
  max-width: 620px;
  margin-top: 24px;
  padding: 0;
  font-size: 18px;
}
/* A connected service suite, with a shared art direction and scale. */
.home .services-section {
  background: #eae6dd;
}
.home .service-grid {
  gap: 16px;
}
.home .service-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  border: 1px solid #d8d4ca;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
}
.home .service-motion {
  padding: 12px 12px 0;
}
.service-art {
  aspect-ratio: 1.18;
  border-radius: 10px;
  background: #e7e3d9;
  container-type: inline-size;
}
.home .service-copy {
  margin: 0;
  padding: 28px 28px 32px;
}
.home .service-copy h3 {
  margin: 0;
  max-width: none;
  font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.05em;
}
.home .service-copy > p {
  font-size: 15px;
  line-height: 1.65;
  margin-top: 16px;
}
.strategy-sheet {
  position: absolute;
  inset: 19% 8% 17%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotate(-5deg);
}
.strategy-sheet > span,
.strategy-sheet > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6% 7%;
  background: var(--paper);
  font: 500 7.3cqw/1 var(--sans);
  letter-spacing: -0.055em;
  border-bottom: 1px solid #d7d2c7;
}
.strategy-sheet > span:nth-child(2) {
  color: var(--graph);
}
.strategy-sheet > strong {
  background: var(--sig);
  border: 0;
  transform: translateX(3%);
}
.strategy-sheet svg {
  width: 10%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.strategy-focus {
  position: absolute;
  right: 13%;
  top: 10%;
  width: 19%;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.strategy-focus:after {
  content: '';
  position: absolute;
  width: 52%;
  height: 2px;
  background: var(--ink);
  right: -37%;
  bottom: -10%;
  transform: rotate(45deg);
}
.production-art {
  background: var(--ink);
}
.production-poster {
  position: absolute;
  inset: 12% 28% 12% 12%;
  padding: 9%;
  background: var(--paper);
  transform: rotate(-7deg);
  overflow: hidden;
}
.production-poster > span {
  font-size: 5cqw;
  letter-spacing: -0.04em;
}
.production-poster > strong {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 30%;
  font: 600 9.6cqw/0.98 var(--sans);
  letter-spacing: -0.065em;
}
.production-poster > i {
  position: absolute;
  right: -18%;
  top: 13%;
  width: 66%;
  aspect-ratio: 1;
  background: var(--sig);
  border-radius: 50%;
}
.production-cut {
  position: absolute;
  right: 9%;
  bottom: 12%;
  width: 35%;
  aspect-ratio: 9/15;
  background: var(--sig);
  transform: rotate(7deg);
  padding: 7% 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.production-cut svg {
  width: 45%;
  fill: currentColor;
  align-self: center;
}
.production-cut > span {
  font: 550 6.7cqw/1 var(--sans);
  letter-spacing: -0.055em;
}
.evidence-art {
  background: #dedacd;
}
.evidence-trials {
  position: absolute;
  inset: 16% 13% 32%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10%;
  align-items: end;
}
.evidence-trials > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  justify-content: end;
}
.evidence-trials span {
  font: 500 4.5cqw/1 var(--mono);
}
.evidence-trials i {
  display: block;
  background: #b8b3a6;
  height: 44%;
  border-radius: 6px 6px 0 0;
}
.evidence-trials > div:nth-child(2) i {
  height: 80%;
  background: var(--sig);
}
.evidence-trials > div:nth-child(3) i {
  height: 58%;
  background: var(--ink);
}
.evidence-decision {
  position: absolute;
  inset: auto 8% 8%;
  padding: 7%;
  border-radius: 8px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.evidence-decision span {
  font: 550 7.3cqw/1 var(--sans);
  letter-spacing: -0.05em;
}
.evidence-decision svg {
  width: 14%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
@keyframes service-direction {
  0%,
  15%,
  85%,
  100% {
    transform: translateX(3%);
  }
  45%,
  55% {
    transform: translateX(-2%);
  }
}
@keyframes service-cut {
  0%,
  15%,
  85%,
  100% {
    transform: rotate(7deg);
  }
  45%,
  55% {
    transform: rotate(3deg) translateY(-5px);
  }
}
.service-motion .strategy-sheet > strong {
  animation: service-direction 6s var(--ease) infinite;
  animation-play-state: paused;
}
.service-motion .production-cut {
  animation: service-cut 6s var(--ease) infinite;
  animation-play-state: paused;
}
.service-motion[data-active='true'] .strategy-sheet > strong,
.service-motion[data-active='true'] .production-cut {
  animation-play-state: running;
}
@media (max-width: 1000px) and (min-width: 761px) {
  .home .service-grid {
    grid-template-columns: 1fr;
  }
  .home .service-item {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
  }
  .home .service-motion {
    padding: 12px;
  }
  .home .service-copy {
    padding: 32px;
  }
  .home .service-copy h3 {
    font-size: 32px;
  }
}
@media (max-width: 760px) {
  .home .service-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-art {
    aspect-ratio: 1.4;
  }
  .home .service-copy {
    padding: 24px;
  }
  .home .service-copy h3 {
    font-size: 30px;
  }
  .home .service-copy > p {
    max-width: none;
  }
}
.home .method-section .section-dek {
  color: #c8c5ba;
}
.home .lab-narrative h3 {
  margin-top: 0;
}
.home .method-foot {
  justify-content: flex-end;
}
.concept-source {
  margin-top: 24px;
  font-size: 13px;
}
.concept-source summary {
  cursor: pointer;
  min-height: 32px;
}
.home .founder-note {
  background: var(--ink);
  color: var(--paper);
  border-radius: 24px;
  padding: 40px;
  max-width: none;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  margin-top: 80px;
}
.founder-portrait {
  position: relative;
  padding: 12px;
  background: var(--stone);
  border-radius: 18px;
  max-width: 370px;
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/4.6;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 10px;
}
.founder-signature {
  display: block;
  color: var(--ink);
  padding: 20px 8px 8px;
  font: 500 21px/1.2 var(--sans);
  letter-spacing: -0.035em;
}
.founder-signature > span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}
.founder-experience {
  display: block;
  font-size: 16px;
  color: #c8c5ba;
  margin-bottom: 24px;
}
.home .founder-note h3 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.04;
  margin: 0;
}
.home .founder-note p {
  color: #c8c5ba;
  font-size: 17px;
  line-height: 1.65;
  margin-top: 24px;
  max-width: 530px;
}
.home .founder-note a {
  color: var(--paper);
  font-size: 15px;
  margin-top: 28px;
}
.home .conversation h2 {
  margin-top: 0;
}
.conversation-secondary {
  display: inline-flex;
  margin: 24px 0 0 24px;
  font-size: 15px;
}
@media (max-width: 760px) {
  .home .founder-note {
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 32px;
    margin-top: 56px;
  }
  .founder-portrait {
    max-width: 330px;
  }
  .home .service-copy h3 {
    font-size: 29px;
  }
}
@media (max-width: 540px) {
  .home .section-heading .section-dek {
    font-size: 16px;
    margin-top: 20px;
  }
  .research-center {
    width: 100px;
    height: 100px;
  }
  .home .founder-note {
    padding: 24px;
    border-radius: 18px;
  }
  .home .founder-note h3 {
    font-size: 34px;
  }
  .home .founder-note p {
    font-size: 16px;
  }
  .conversation-secondary {
    margin-left: 0;
    display: flex;
    width: max-content;
  }
}

/* Keep the research board legible on compact screens and respect motion preferences. */
@media (max-width: 540px) {
  .dig-sources {
    padding: 4px 16px 10px;
    margin: 0 8px;
  }
  .dig-source {
    gap: 12px;
    padding: 15px 0;
  }
  .dig-source strong {
    font-size: 16px;
  }
  .dig-source span {
    font-size: 11px;
  }
  .dig-brief {
    padding: 24px;
  }
  .dig-brief > strong {
    font-size: clamp(26px, 8.2vw, 32px);
    margin-top: 24px;
  }
  .dig-brief p {
    font-size: 12px;
  }
  .home .founder-note h3 {
    font-size: 44px;
  }
  .founder-experience {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-motion .strategy-sheet > strong,
  .service-motion .production-cut {
    animation: none;
  }
}

@media (max-width: 760px) {
  .lab-narrative {
    min-height: 0;
    padding: 36px 28px 42px;
  }
}

.program-invitation {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #d8d4ca;
  font-size: 20px;
  letter-spacing: -0.035em;
  line-height: 1.4;
}
.program-invitation .lnk {
  margin-top: 12px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

/* Final editorial pass: the same brand, with quieter surfaces and precise responses. */
:root {
  --detail-line: #d8d4ca;
  --detail-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-site :is(h1, h2, h3) {
  text-wrap: balance;
}
.brand-site :is(.section-dek, .service-copy p, .value-grid p, .founder-introduction p) {
  text-wrap: pretty;
}
.hdr:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--sig);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.nav a {
  transition:
    color 160ms,
    background 160ms;
}
.nav a[aria-current='location'] {
  color: var(--ink);
  background: #11111009;
}
.mnav a[aria-current='location'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.btn {
  -webkit-tap-highlight-color: transparent;
}
.btn-ink,
.package-card > .btn {
  border-radius: 10px;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.lnk {
  border-bottom-color: currentColor;
  text-decoration-skip-ink: auto;
  transition: gap 220ms var(--detail-ease);
}
.lnk:focus-visible {
  outline-offset: 6px;
}
.home .section-heading {
  margin-top: 0;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.home .value-grid article {
  padding-top: 28px;
}
.value-grid .value-symbol {
  color: var(--ink);
}
.home .service-copy > p {
  font-size: 16px;
}
.capability-band {
  position: relative;
}
.capability-band .capabilities {
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.case-surface,
.work-rail .study-preview {
  border-radius: 14px;
}
.work-rail .study-preview {
  transition: box-shadow 240ms var(--detail-ease);
}
.work-rail .study-preview:hover .case-surface > img {
  transform: none;
}
.case-open {
  width: 42px;
  height: 42px;
  transition:
    background 180ms,
    transform 240ms var(--detail-ease);
}
.study-meta {
  gap: 10px;
}
.study-meta > span {
  font-size: 10px;
  letter-spacing: 0;
}
.work-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}
.work-controls button,
.lab-controls button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transition:
    background 180ms,
    color 180ms,
    border-color 180ms;
}
.work-controls button {
  border-radius: 50%;
  border: 1px solid #89857c;
  font-size: 24px;
  line-height: 1;
}
.work-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}
.work-position {
  font: 400 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--graph);
}
.portfolio-dialog {
  border-radius: 22px;
  background: var(--paper);
}
.portfolio-dialog::backdrop {
  background: #111110b3;
  backdrop-filter: blur(7px);
}
.portfolio-dialog[open] {
  animation: detail-arrive 240ms var(--detail-ease) both;
}
.lab-tabs button {
  border-radius: 10px;
  transition:
    background 180ms,
    color 180ms;
}
.lab-panel {
  border-radius: 14px;
  overflow: hidden;
}
.idea-lab[data-enhanced] .lab-visual {
  min-height: var(--lab-visual-height);
}
.idea-lab[data-enhanced] .lab-narrative {
  min-height: var(--lab-narrative-height);
}
.lab-panel:not([hidden]) > :is(.lab-visual, .lab-narrative) > * {
  animation: detail-arrive 260ms var(--detail-ease) both;
}
.lab-tabs button[aria-pressed='true'] > i {
  transform: rotate(45deg);
}
.lab-tabs button > i {
  transition: transform 200ms var(--detail-ease);
}
.package-card {
  border: 0;
  border-radius: 20px;
}
.package-amount {
  font-variant-numeric: tabular-nums;
}
.package-amount b {
  font-weight: 550;
}
.package-details {
  padding-top: 10px;
}
.package-details summary > span {
  transition: transform 200ms var(--detail-ease);
}
.package-details[open] > p,
.qs details[open] .a {
  animation: detail-arrive 180ms var(--detail-ease) both;
}
.home .faq .side {
  padding-top: 25px;
}
.home .faq h2 {
  margin-top: 0;
}
.qs summary {
  padding-block: 26px;
}
.home .conversation {
  border-radius: 24px;
  padding: clamp(32px, 5vw, 72px);
}
.home .conversation h2 {
  font-size: clamp(48px, 6.4vw, 92px);
  max-width: 1000px;
  text-wrap: initial;
  margin-bottom: 28px;
}
.conversation-arrow {
  font-size: clamp(120px, 17vw, 240px);
  right: 5%;
  bottom: 8%;
}
.about-portrait {
  padding: 12px;
  background: var(--stone);
  border-radius: 20px;
  max-width: 480px;
}
.about-portrait img {
  border-radius: 12px;
  max-width: none;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: center 25%;
}
.about-portrait figcaption {
  font-size: 12px;
  padding: 0 8px 8px;
  margin-top: 18px;
}
.about-belief,
.about-close {
  border-radius: 24px;
}
.about-socials {
  flex-wrap: wrap;
}
.ftr {
  padding-top: 42px;
}
.ftr .mail {
  font-size: 17px;
  letter-spacing: -0.025em;
}
@keyframes detail-arrive {
  from {
    opacity: 0.65;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (hover: hover) and (pointer: fine) {
  .lnk:hover {
    gap: 12px;
  }
  .study-preview:hover .case-open {
    transform: translate(2px, -2px);
  }
  .work-controls button:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
}
@media (max-width: 1100px) {
  .work-rail {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #b1aca1 transparent;
  }
  .work-rail .study {
    flex: 0 0 42%;
    scroll-snap-align: start;
    min-width: 0;
  }
}

@media (min-width: 641px) and (max-width: 1000px) {
  .package-grid {
    grid-template-columns: 1fr;
  }
  .package-card {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    grid-template-areas: 'title features' 'description features' 'amount action' 'details details';
    gap: 18px 40px;
    padding: 32px;
  }
  .package-card h3 {
    grid-area: title;
    font-size: 30px;
  }
  .package-description {
    grid-area: description;
    margin: 0;
    min-height: 0;
    font-size: 16px;
  }
  .package-pricing {
    grid-area: amount;
  }
  .package-amount {
    margin: 0;
    min-height: 0;
    font-size: 44px;
  }
  .package-card ul {
    grid-area: features;
    margin: 0;
  }
  .package-card li {
    font-size: 15px;
  }
  .package-card > .btn {
    grid-area: action;
    align-self: end;
    font-size: 15px;
    padding-inline: 18px;
    margin: 0;
  }
  .package-details {
    grid-area: details;
    margin-top: 4px;
  }
}
@media (max-width: 1000px) {
  .ftr .wrap {
    grid-template-columns: 1fr auto;
    gap: 20px;
  }
  .ftr nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .ftr .mail {
    grid-column: 2;
    grid-row: 1;
  }
  .ftr .small {
    grid-row: 3;
    margin: 0;
  }
  .home .conversation h2 {
    font-size: clamp(48px, 7.2vw, 72px);
  }
  .conversation-arrow {
    font-size: 140px;
    bottom: 10%;
  }
}
@media (max-width: 760px) {
  .home .section-heading h2 {
    font-size: clamp(35px, 5.4vw, 44px);
  }
  .home .value-grid article {
    padding-top: 24px;
  }
  .home .faq .side {
    position: static;
    padding: 0;
  }
  .home .faq {
    gap: 28px;
    margin-bottom: 56px;
  }
  .lab-tabs {
    gap: 5px;
  }
  .lab-tabs button {
    border-radius: 8px;
  }
  .home .conversation h2 {
    font-size: clamp(44px, 8vw, 62px);
  }
  .home .conversation {
    border-radius: 20px;
  }
  .conversation-arrow {
    display: none;
  }
  .about-story {
    gap: 32px;
  }
  .about-portrait {
    max-width: 420px;
  }
}
@media (max-width: 640px) {
  .work-rail .study {
    flex-basis: 84%;
  }
  .work-controls {
    justify-content: space-between;
    margin-top: 20px;
  }
  .study-copy > h3 {
    font-size: 19px;
  }
  .study-meta {
    flex-wrap: wrap;
  }
  .home .conversation h2 {
    font-size: clamp(40px, 10.2vw, 62px);
  }
  .home .conversation {
    padding: 32px 24px;
  }
  .home .conversation .btn {
    width: 100%;
  }
  .conversation-secondary {
    margin: 20px 0 0;
  }
  .about-belief,
  .about-close {
    border-radius: 18px;
  }
  .ftr .wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ftr .mail {
    grid-column: 1;
    grid-row: 3;
  }
  .ftr .small {
    grid-row: 4;
    gap: 12px;
  }
  .ftr nav {
    gap: 2px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-dialog[open],
  .lab-panel:not([hidden]) > :is(.lab-visual, .lab-narrative) > *,
  .package-details[open] > p,
  .qs details[open] .a {
    animation: none;
  }
  .lnk,
  .case-open,
  .btn {
    transition: none;
  }
  .lnk:hover {
    gap: 8px;
  }
  .study-preview:hover .case-open,
  .btn:active {
    transform: none;
  }
}

/* Flat, tonal surfaces carry the identity; outlines are reserved for controls. */
.home .service-item {
  border: 0;
}
.hdr.scrolled,
.study-preview,
.pcard a,
.pcard a:hover,
.btn-sig,
.btn-sig:hover {
  box-shadow: none;
}
.home .service-item {
  background: var(--paper);
}
.package-card {
  background: #eeebe3;
}
.entry-package {
  background: #e4dfd3;
}
.program-invitation {
  border-top: 0;
}
.dig-source + .dig-source {
  border-top: 0;
}
.dig-brief-rule {
  display: none;
}
.dig-brief > p {
  margin-top: 26px;
}
.strategy-sheet > span {
  border-bottom: 0;
}

/* Two separate formats: neither the type nor the orange accents overlap. */
.production-poster {
  inset: 12% auto 12% 8%;
  width: 49%;
  padding: 6%;
  transform: rotate(-4deg);
}
.production-poster > span {
  font-size: 4.6cqw;
}
.production-poster > strong {
  position: absolute;
  left: 12%;
  bottom: 10%;
  margin: 0;
  font-size: 8.8cqw;
}
.production-poster > i {
  top: 18%;
  right: 12%;
  width: 42%;
}
.production-cut {
  right: 8%;
  bottom: 18%;
  width: 30%;
  aspect-ratio: 9 / 16;
  padding: 6% 4%;
  background: var(--stone);
  transform: rotate(4deg);
}
.production-cut > svg {
  fill: var(--ink);
  width: 55%;
}
.production-cut > span {
  font-size: 5.2cqw;
}
.service-motion .strategy-sheet > strong,
.service-motion .production-cut {
  animation: none;
}

/* No toolbar: desktop motion pauses where the visitor is interacting. */
.capability-band {
  display: block;
  padding-right: 0;
}
.capabilities:hover .capability-track,
.capabilities:focus .capability-track,
.capabilities[data-paused='true'] .capability-track {
  animation-play-state: paused;
}
.capabilities[data-paused='false']:focus:not(:hover) .capability-track {
  animation-play-state: running;
}
.capabilities:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -6px;
  box-shadow: none;
}
.no-js .capability-band .capabilities {
  overflow-x: auto;
  mask-image: none;
}
.no-js .capability-track {
  animation: none;
}
.no-js .capability-track > div[aria-hidden='true'] {
  display: none;
}

.about-experience {
  padding: 0 0 clamp(56px, 7vw, 100px);
}
.about-experience > h2,
.about-team h2 {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  max-width: 720px;
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.experience-grid article {
  background: #eae6dd;
  padding: 30px;
  border-radius: 18px;
}
.experience-grid article > span {
  font: 400 12px/1.5 var(--mono);
  color: var(--graph);
}
.experience-grid h3 {
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.045em;
  margin-top: 20px;
}
.experience-grid p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--graph);
  margin-top: 18px;
}
.experience-grid a {
  font-size: 14px;
  margin-top: 24px;
}
.career-perspective {
  max-width: 850px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--graph);
  margin-top: 32px;
}
.about-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  padding: clamp(56px, 7vw, 96px) 0 0;
}
.about-team h2 {
  margin-top: 22px;
}
.about-team p {
  color: var(--graph);
  font-size: 18px;
  line-height: 1.7;
}
.about-team p + p {
  margin-top: 18px;
}

@media (max-width: 1000px) {
  .experience-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .experience-grid article {
    padding: 28px;
  }
  .experience-grid h3 {
    margin-top: 12px;
  }
  .experience-grid p {
    max-width: 650px;
  }
}
@media (max-width: 760px) {
  .about-team {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-team p,
  .career-perspective {
    font-size: 16px;
  }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .capability-band .capabilities {
    overflow-x: auto;
    mask-image: none;
    scrollbar-width: none;
  }
  .capabilities .capability-track {
    animation: none !important;
    transform: none;
  }
  .capability-track > div[aria-hidden='true'] {
    display: none;
  }
}
@media (max-width: 640px) {
  /* Content has a fixed place; the browser toolbar and entrance cannot recenter it. */
  .capability-band .capabilities {
    overflow-x: auto;
    mask-image: none;
    scrollbar-width: none;
  }
  .capabilities .capability-track {
    animation: none !important;
    transform: none;
  }
  .capability-track > div[aria-hidden='true'] {
    display: none;
  }

  .capability-track span {
    font-size: 17px;
  }
}

/* A visible concept: creative directions -> experiment -> learning -> next round. */
.home-hero {
  background: var(--sig);
  color: var(--ink);
  padding: 32px 0 36px;
}
.hero-inner {
  min-height: calc(100svh - var(--hh) - var(--sat) - 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.brand-ident {
  width: min(72%, 900px);
  margin: 0 auto 28px;
}
.ident-wordmark {
  width: 100%;
  height: auto;
}
.home-hero h1 {
  font: 550 clamp(36px, 4.4vw, 64px)/1.02 var(--sans);
  letter-spacing: -0.055em;
  text-align: center;
  margin: 0;
  text-wrap: balance;
}
.hero-message {
  text-align: center;
  width: 100%;
}
.hero-message > p {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
  max-width: 690px;
  margin: 18px auto 0;
}
.hero-message .ctas {
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 24px;
}
.hero-message .btn {
  border-radius: 6px;
}
.hero-message .lnk {
  font-size: 15px;
}
.creative-loop {
  width: min(100%, 1120px);
  margin: 30px auto 0;
  position: relative;
}
.loop-scene {
  height: 250px;
  position: relative;
}
.loop-connections {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.connection-base,
.feedback-base {
  stroke: #11111050;
  stroke-width: 1.5;
}
.connection-draw,
.connection-head,
.feedback-draw,
.feedback-head {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-directions {
  position: absolute;
  width: 36%;
  height: 190px;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.direction {
  width: 34%;
  height: 180px;
  position: relative;
  padding: 16px;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 4px 0 #11111012;
}
.direction > span {
  font: 500 13px/1 var(--mono);
}
.direction strong {
  font: 550 clamp(18px, 1.8vw, 27px)/0.98 var(--sans);
  letter-spacing: -0.055em;
  display: block;
  position: relative;
  z-index: 1;
}
.direction-a {
  transform: rotate(-7deg) translateY(12px);
}
.direction-a strong {
  margin-top: 23px;
}
.direction-a > i {
  position: absolute;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--sig);
  bottom: -13px;
  right: -4px;
}
.direction-b {
  transform: translateY(-6px);
  background: var(--ink);
  color: var(--paper);
  z-index: 1;
}
.direction-b > svg {
  width: 45px;
  height: 45px;
  margin: 14px auto;
  fill: var(--sig);
}
.direction-b strong {
  font-size: clamp(18px, 1.65vw, 24px);
}
.direction-c {
  transform: rotate(7deg) translateY(12px);
  background: #e7ddc8;
}
.direction-c strong {
  margin-top: 23px;
}
.direction-c > i {
  position: absolute;
  bottom: 4px;
  right: 12px;
  color: #11111022;
  font: 600 76px/1 var(--sans);
}
.experiment-gate {
  position: absolute;
  left: 43%;
  top: 35px;
  width: 13%;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.experiment-gate > div {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 550 clamp(20px, 2.4vw, 34px)/1 var(--sans);
}
.experiment-gate i {
  display: block;
  height: 44px;
  width: 1px;
  background: var(--ink);
  transform: rotate(20deg);
}
.hero-next-brief {
  position: absolute;
  right: 0;
  top: 0;
  width: 29%;
  height: 200px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 22px 26px;
}
.hero-next-brief > span {
  font: 450 13px/1.4 var(--sans);
  color: #d8d3c6;
}
.hero-next-brief strong {
  font: 500 clamp(26px, 3vw, 43px)/0.98 var(--sans);
  letter-spacing: -0.055em;
  display: block;
  margin-top: 18px;
}
.hero-next-brief > i {
  position: absolute;
  right: 23px;
  bottom: 22px;
  font: 400 34px/1 var(--sans);
}
.creative-loop figcaption {
  display: grid;
  grid-template-columns: 36% 28% 36%;
  text-align: center;
  font: 500 17px/1.4 var(--sans);
  letter-spacing: -0.025em;
  margin-top: 12px;
}
.creative-loop figcaption > span:last-child {
  text-align: right;
  padding-right: 10%;
}
.creative-loop figcaption > span:first-child {
  text-align: left;
  padding-left: 10%;
}

.agency-header .wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
/* Agency partnerships. The shared brand, with its own buyer and scope. */
.agency {
  padding-bottom: 24px;
}
.agency-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 550;
}
.agency-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(64px, 8vw, 112px) 0;
}
.agency-hero h1 {
  font-size: clamp(54px, 5.8vw, 84px);
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -0.065em;
  margin: 26px 0;
}
.agency-intro {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.55;
  letter-spacing: -0.025em;
  max-width: 550px;
  color: var(--graph);
}
.agency .ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
.agency .lnk {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.agency-board {
  margin: 0;
  padding: clamp(20px, 3vw, 38px);
  border-radius: 20px;
  background: var(--stone);
  overflow: hidden;
}
.agency-board-top,
.agency-board figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.agency-board-top span:last-child {
  color: var(--graph);
}
.agency-board-cards {
  display: flex;
  align-items: center;
  padding: 52px 0 44px;
  isolation: isolate;
}
.agency-art {
  flex: 1;
  min-width: 0;
  height: clamp(190px, 19vw, 290px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  animation: agency-card-in 0.65s both;
}
.agency-art > span {
  font: 11px/1.2 var(--mono);
  position: relative;
  z-index: 1;
}
.agency-art strong {
  position: relative;
  z-index: 1;
  font-size: clamp(21px, 2.25vw, 34px);
  font-weight: 550;
  letter-spacing: -0.06em;
  line-height: 0.98;
}
.agency-art-a {
  background: var(--paper);
  transform: rotate(-7deg) translateY(6px);
}
.agency-art-b {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(3deg) translateY(-12px);
  z-index: 2;
  animation-delay: 0.1s;
}
.agency-art-c {
  background: var(--sig);
  color: var(--ink);
  transform: rotate(8deg) translateY(10px);
  animation-delay: 0.2s;
}
.agency-art-orbit {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--sig);
  position: absolute;
  top: 22%;
  right: -12px;
}
.agency-art-b i {
  width: 84px;
  height: 84px;
  position: absolute;
  bottom: -36px;
  right: -16px;
  border-radius: 50%;
  background: var(--sig);
}
.agency-art-pill {
  width: 66px;
  height: 90px;
  border-radius: 40px;
  background: var(--paper);
  position: absolute;
  right: -10px;
  top: 18%;
  transform: rotate(24deg);
}
.agency-board-arrow {
  font-size: 34px;
  line-height: 1;
}
.agency-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  padding: 16px 0 12px;
}
.agency-benefit-art {
  display: block;
  color: var(--ink);
  font-size: 52px;
  line-height: 1;
  margin-bottom: 26px;
}
.agency-benefits h2 {
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 550;
  letter-spacing: -0.045em;
  line-height: 1.15;
}
.agency-benefits p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--graph);
}
.agency-section {
  padding-top: clamp(80px, 9vw, 132px);
  scroll-margin-top: 110px;
}
.agency-section-heading {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: end;
  gap: 64px;
  margin-bottom: 40px;
}
.agency-section h2,
.agency-close h2 {
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.07;
  letter-spacing: -0.055em;
  font-weight: 550;
}
.agency-section-heading > p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--graph);
  max-width: 480px;
}
.agency-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.agency-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fffdf8;
  padding: clamp(28px, 3.5vw, 50px);
  border-radius: 20px;
}
.agency-price .eyebrow {
  line-height: 1.6;
}
.agency-price h3 {
  margin-top: 24px;
  font-size: 31px;
  font-weight: 550;
  letter-spacing: -0.045em;
}
.agency-amount {
  font-size: clamp(58px, 5vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.065em;
  margin-top: 16px;
  font-weight: 550;
}
.agency-amount > span {
  display: inline-block;
  margin-left: 12px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.agency-price-intro {
  font-size: 18px;
  line-height: 1.5;
  color: var(--graph);
  max-width: 380px;
  margin-top: 24px;
}
.agency-price ul {
  display: grid;
  gap: 14px;
  margin: 28px 0 32px;
  font-size: 16px;
  line-height: 1.5;
}
.agency-price li {
  position: relative;
  padding-left: 22px;
}
.agency-price li::before {
  content: '↗';
  position: absolute;
  left: 0;
}
.agency-price > .btn {
  margin-top: auto;
}
.agency-price-dark {
  background: var(--ink);
  color: var(--paper);
}
.agency-price-dark .eyebrow,
.agency-price-dark .agency-price-intro {
  color: #c9c6bd;
}
.agency-paper-btn {
  background: var(--paper);
  color: var(--ink);
}
.agency-paper-btn:hover {
  background: #fff;
}
.agency-package-details {
  width: 100%;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.65;
}
.agency-package-details summary {
  padding: 12px 0;
  min-height: 44px;
  cursor: pointer;
}
.agency-package-details p {
  margin-top: 10px;
}
.agency-terms {
  margin-top: 24px;
  max-width: 1000px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--graph);
}
.agency-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  margin-top: 32px;
  background: var(--stone);
  border-radius: 14px;
}
.agency-custom strong {
  font-size: 21px;
  font-weight: 550;
  letter-spacing: -0.035em;
}
.agency-custom p > span {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  color: var(--graph);
  line-height: 1.5;
}
.agency-custom .lnk {
  flex-shrink: 0;
}
.agency-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.agency-example > a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.agency-example img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.agency-example > a img {
  transition: transform 0.3s ease;
}
.agency-example > a:hover img {
  transform: scale(1.025);
}
.agency-example h3 {
  font-size: 24px;
  letter-spacing: -0.035em;
  font-weight: 550;
  line-height: 1.2;
  margin-top: 24px;
}
.agency-example > p,
.agency-example details {
  font-size: 15px;
  line-height: 1.65;
  color: var(--graph);
  margin-top: 12px;
}
.agency-example summary {
  cursor: pointer;
  padding: 12px 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.agency-example details img {
  margin-top: 12px;
}
.agency-example details p {
  margin-top: 12px;
}
.agency-example details a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.agency-sample-note {
  margin-top: 24px;
  max-width: 820px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--graph);
}
.agency-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
}
.agency-workflow > li {
  padding: 32px;
  border-radius: 16px;
  background: var(--stone);
}
.agency-workflow-mark {
  display: block;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 40px;
}
.agency-workflow h3 {
  font-size: 25px;
  letter-spacing: -0.04em;
  font-weight: 550;
  line-height: 1.15;
}
.agency-workflow p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--graph);
}
.agency-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(32px, 7vw, 100px);
}
.agency-start > div > p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--graph);
  margin-top: 24px;
}
.agency-start > div > .lnk {
  margin-top: 22px;
}
.agency-faq details {
  background: var(--stone);
  padding: 10px 24px;
  border-radius: 12px;
  margin-top: 12px;
}
.agency-faq details:first-child {
  margin-top: 0;
}
.agency-faq summary {
  font-size: 16px;
  font-weight: 550;
  line-height: 1.5;
  cursor: pointer;
  padding: 12px 0;
}
.agency-faq p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--graph);
  padding: 4px 0 16px;
}
.agency-close {
  padding: clamp(32px, 5vw, 72px);
  margin: clamp(80px, 9vw, 132px) 0 40px;
  border-radius: 20px;
  background: var(--sig);
  color: var(--ink);
}
.agency-close > p {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.5;
  max-width: 520px;
}
@keyframes agency-card-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .agency-hero {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .agency-hero-copy {
    max-width: 700px;
  }
  .agency-hero h1 {
    font-size: clamp(72px, 9vw, 90px);
  }
  .agency-board {
    max-width: 700px;
    width: 100%;
  }
  .agency-art {
    height: 260px;
    padding: 22px;
  }
  .agency-art strong {
    font-size: 36px;
  }
  .agency-section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .agency-benefits {
    gap: 24px;
  }
  .agency-price {
    padding: 28px;
  }
  .agency-amount > span {
    display: block;
    margin: 8px 0 0;
  }
  .agency-price h3 {
    font-size: 28px;
  }
  .agency-workflow {
    grid-template-columns: 1fr;
  }
  .agency-workflow > li {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 24px;
    align-items: start;
  }
  .agency-workflow-mark {
    grid-row: span 2;
    margin: 0;
  }
  .agency-workflow p {
    grid-column: 2;
  }
  .agency-start {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .agency-nav {
    gap: 16px;
    font-size: 12px;
  }
  .agency-nav > a:first-child {
    display: none;
  }
  .agency-nav .btn {
    padding: 11px 14px;
    min-height: 44px;
  }
  .agency-hero {
    grid-template-columns: 1fr;
    padding: 48px 0 56px;
    gap: 36px;
  }
  .agency-hero h1 {
    font-size: clamp(47px, 10.8vw, 68px);
    margin: 22px 0;
  }
  .agency .ctas {
    gap: 16px;
  }
  .agency .ctas > .btn {
    width: 100%;
    justify-content: space-between;
  }
  .agency-intro {
    font-size: 19px;
  }
  .agency-board {
    padding: 20px;
    border-radius: 16px;
  }
  .agency-board-top {
    font-size: 12px;
  }
  .agency-board-cards {
    padding: 36px 0 32px;
  }
  .agency-art {
    height: clamp(172px, 48vw, 265px);
    padding: 10px;
    animation-name: agency-card-fade;
  }
  .agency-art > span {
    font-size: 9px;
  }
  .agency-art strong {
    font-size: clamp(19px, 5.2vw, 30px);
  }
  .agency-board figcaption {
    font-size: 12px;
  }
  .agency-benefits {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .agency-benefits > article {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .agency-benefit-art {
    font-size: 40px;
    grid-row: span 2;
    margin: 0;
  }
  .agency-benefits p {
    grid-column: 2;
    margin-top: 10px;
  }
  .agency-section {
    padding-top: 68px;
  }
  .agency-section-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 30px;
  }
  .agency-section h2,
  .agency-close h2 {
    font-size: clamp(35px, 8vw, 48px);
  }
  .agency-prices,
  .agency-examples,
  .agency-workflow,
  .agency-start {
    grid-template-columns: 1fr;
  }
  .agency-amount > span {
    font-size: 15px;
  }
  .agency-price {
    padding: 28px 24px;
  }
  .agency-price > .btn {
    width: 100%;
    justify-content: space-between;
    font-size: 15px;
  }
  .agency-price .eyebrow {
    font-size: 10px;
  }
  .agency-price h3 {
    font-size: 29px;
  }
  .agency-custom {
    align-items: flex-start;
    flex-direction: column;
    padding: 26px;
    gap: 12px;
  }
  .agency-custom strong {
    font-size: 23px;
  }
  .agency-examples {
    gap: 36px;
  }
  .agency-workflow > li {
    padding: 28px;
  }
  .agency-workflow-mark {
    margin-bottom: 24px;
  }
  .agency-start {
    gap: 30px;
  }
  .agency-faq details {
    padding: 10px 20px;
  }
  .agency-close {
    padding: 30px 24px;
    margin-top: 68px;
  }
  .agency-close > p {
    font-size: 18px;
  }
}
@keyframes agency-card-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agency-art {
    animation: none;
  }
  .agency-example > a img {
    transition: none;
  }
}
@media print {
  .agency-nav,
  .agency .ctas,
  .agency-faq {
    display: none;
  }
  .agency-hero {
    padding: 16px 0;
  }
  .agency-hero h1 {
    font-size: 44px;
  }
  .agency-section {
    padding-top: 32px;
  }
  .agency-section h2,
  .agency-close h2 {
    font-size: 32px;
  }
  .agency-price,
  .agency-close {
    break-inside: avoid;
  }
}

@media (max-width: 360px) {
  .agency-nav > a:not(.btn) {
    display: none;
  }
  .agency-art strong {
    font-size: 17px;
  }
}
.agency-engagement {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  padding: clamp(30px, 5vw, 64px);
  border-radius: 20px;
  background: var(--ink);
  color: var(--paper);
}
.agency-engagement h3 {
  font-size: clamp(34px, 3.5vw, 50px);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -0.05em;
  margin-top: 24px;
}
.agency-engagement p:not(.eyebrow) {
  color: #c9c6bd;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
}
.agency-engagement .eyebrow {
  color: #c9c6bd;
}
.agency-engagement .lnk {
  color: var(--paper);
}
.agency-engagement ul {
  display: grid;
  gap: 28px;
  align-content: center;
}
.agency-engagement li strong {
  display: block;
  font-size: 25px;
  font-weight: 550;
  letter-spacing: -0.035em;
}
.agency-engagement li > span {
  display: block;
  margin-top: 10px;
  color: #c9c6bd;
  font-size: 17px;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .agency-engagement {
    grid-template-columns: 1fr;
  }
}

.commerce {
  padding-bottom: 40px;
}
.commerce-opening {
  padding: clamp(60px, 8vw, 112px) 0 clamp(44px, 6vw, 80px);
}
.commerce-opening h1 {
  font-size: clamp(50px, 6.7vw, 94px);
  letter-spacing: -0.065em;
  font-weight: 550;
  line-height: 1.02;
  margin-top: 26px;
  max-width: 1100px;
}
.commerce-opening > p:not(.eyebrow) {
  max-width: 700px;
  font-size: clamp(19px, 1.8vw, 25px);
  letter-spacing: -0.025em;
  color: var(--graph);
  line-height: 1.55;
  margin-top: 30px;
}
.commerce .ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
}
.commerce-opening > .btn {
  margin-top: 30px;
}
.commerce .lnk {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.commerce-section {
  padding-top: clamp(68px, 8vw, 116px);
  scroll-margin-top: 110px;
}
.commerce h2 {
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.05em;
  font-weight: 550;
}
.commerce-section-heading {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 36px;
}
.commerce-section-heading > p {
  font-size: 19px;
  color: var(--graph);
  line-height: 1.6;
  max-width: 480px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.catalog-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
}
.catalog-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalog-copy > p:not(.eyebrow) {
  flex: 1;
}
.catalog-action {
  align-self: flex-start;
}
.catalog-link:focus-visible {
  outline-offset: 8px;
}
.catalog-link:focus-visible .catalog-action,
.preview-link:focus-visible .preview-action > span:first-child {
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-link:hover .catalog-action,
  .preview-link:hover .preview-action > span:first-child {
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .catalog-link:hover .arr,
  .preview-link:hover .arr {
    transform: translateX(3px);
  }
}
.catalog-visual {
  display: block;
  background: var(--stone);
  border-radius: 18px;
  aspect-ratio: 4/3;
  padding: 28px;
  overflow: hidden;
}
.catalog-visual > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s var(--ease);
}
.catalog-visual:hover > img {
  transform: scale(1.025);
}
.catalog-copy {
  padding: 26px 4px 0;
}
.catalog-copy .eyebrow {
  color: var(--graph);
  margin-bottom: 18px;
}
.catalog-copy h2 {
  font-size: clamp(29px, 3vw, 42px);
}
.catalog-copy > p:not(.eyebrow) {
  font-size: 18px;
  color: var(--graph);
  line-height: 1.6;
  max-width: 580px;
  margin-top: 18px;
}
.catalog-copy .lnk {
  margin-top: 22px;
}
.product-feature {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: 36px;
  background: var(--stone);
  border-radius: 20px;
}
.mandate-preview {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.mandate-preview img {
  width: 100%;
  height: auto;
}
.product-feature h2 {
  font-size: clamp(50px, 5vw, 72px);
  margin: 22px 0;
}
.product-feature p:not(.eyebrow):not(.catalog-meta) {
  font-size: 20px;
  line-height: 1.6;
  color: var(--graph);
}
.product-feature .btn {
  margin-top: 28px;
}
.catalog-meta {
  margin-top: 20px;
  font-size: 13px;
  color: var(--graph);
  line-height: 1.65;
}
.commerce-note {
  padding: clamp(30px, 5vw, 64px);
  background: var(--stone);
  border-radius: 20px;
  margin-top: clamp(68px, 8vw, 116px);
}
.commerce-note > p:not(.eyebrow) {
  font-size: 20px;
  color: var(--graph);
  line-height: 1.6;
  max-width: 800px;
  margin-top: 24px;
}
.commerce-note > .lnk {
  margin-top: 24px;
}
.commerce-note .eyebrow {
  margin-bottom: 24px;
}
.commerce-note > p.fine {
  font-size: 14px;
}
.service-destinations,
.product-inclusions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.service-destinations > article {
  background: var(--stone);
  border-radius: 16px;
  padding: 36px;
}
.service-destinations article > span {
  display: block;
  font-size: 48px;
  margin-bottom: 40px;
}
.service-destinations h2,
.product-inclusions h2,
.product-inclusions h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  font-weight: 550;
  letter-spacing: -0.04em;
}
.service-destinations p,
.product-inclusions p {
  margin-top: 20px;
  font-size: 17px;
  color: var(--graph);
  line-height: 1.7;
}
.commerce-choice {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 70px;
  align-items: center;
}
.commerce-choice p {
  font-size: 20px;
  color: var(--graph);
  margin-top: 24px;
  max-width: 620px;
}
.commerce-choice .btn {
  margin-top: 28px;
}
.commerce-choice-links {
  display: grid;
  gap: 16px;
}
.commerce-choice-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  background: var(--stone);
  border-radius: 12px;
  font-size: 20px;
  letter-spacing: -0.025em;
}
.product-screenshot {
  margin: 0;
  background: var(--stone);
  padding: 36px;
  border-radius: 20px;
}
.product-screenshot img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.product-screenshot figcaption {
  margin-top: 20px;
  font-size: 13px;
  color: var(--graph);
}
.product-price {
  display: inline-block;
  color: var(--ink);
  margin-top: 16px;
}
.product-inclusions {
  margin-top: 52px;
}
.resource-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 7vw, 100px);
  align-items: start;
}
.resource-detail-grid > div > p {
  font-size: 20px;
  color: var(--graph);
  margin-top: 26px;
  line-height: 1.6;
  max-width: 600px;
}
.resource-detail-grid > div > p.fine {
  font-size: 14px;
}
.resource-detail-grid > div > .lnk {
  margin-top: 24px;
}
.resource-gate {
  background: #fffdf8;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px);
}
.resource-gate > h2 {
  font-size: clamp(29px, 3vw, 40px);
  margin-bottom: 26px;
}
.resource-form {
  display: grid;
  gap: 20px;
}
.resource-email {
  display: grid;
  gap: 10px;
  font-size: 16px;
  font-weight: 550;
}
.resource-email input {
  width: 100%;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.5 var(--sans);
  padding: 16px 18px;
  border-radius: 9px;
  min-height: 56px;
}
.resource-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--graph);
  cursor: pointer;
}
.resource-consent input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.resource-form > .btn {
  width: 100%;
  justify-content: space-between;
}
.resource-form > .fine {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--graph);
}
.resource-form .fine a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.resource-message {
  font-size: 16px;
  line-height: 1.65;
}
.resource-message:empty {
  display: none;
}
.resource-message[role='alert'] {
  padding: 14px;
  background: #ffe0d2;
  border-radius: 8px;
}
.resource-message p {
  margin: 16px 0;
}
.product-purchase .fine {
  margin-top: 18px;
}
.resource-preview {
  padding: 36px;
  background: var(--stone);
  border-radius: 20px;
  margin: 0;
}
.resource-preview > img {
  max-width: 1100px;
  width: 100%;
  height: auto;
  margin: auto;
}
.playbook-cover {
  background: var(--sig);
  color: var(--ink);
  width: 100%;
  max-width: 400px;
  min-height: 380px;
  margin: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.playbook-cover > span {
  font: 500 11px/1.5 var(--mono);
  letter-spacing: -0.02em;
}
.playbook-cover > strong {
  display: block;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 600;
  margin-top: 30px;
}
.playbook-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sig);
  font-size: 70px;
  line-height: 1;
  display: grid;
  place-items: center;
  margin: 30px 0;
  align-self: flex-end;
}
.playbook-cover > p {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.6;
}
.catalog-visual > .playbook-cover {
  height: 100%;
  min-height: 0;
  width: auto;
  max-width: 100%;
  padding: 20px;
}
.catalog-visual .playbook-cover > strong {
  font-size: clamp(28px, 3vw, 44px);
  margin-top: 22px;
}
.catalog-visual .playbook-circle {
  width: 68px;
  height: 68px;
  font-size: 46px;
  margin: 16px 0;
}
.catalog-visual .playbook-cover > span {
  font-size: 9px;
}
.catalog-visual .playbook-cover > p {
  font-size: 10px;
}
.playbook-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 7vw, 100px);
  padding: clamp(28px, 5vw, 64px);
  background: var(--stone);
  border-radius: 20px;
}
.playbook-display > div:last-child p {
  color: var(--graph);
  font-size: 19px;
  line-height: 1.65;
  margin-top: 24px;
}
.playbook-display > div:last-child p.fine {
  font-size: 13px;
}
@media (max-width: 1023px) {
  .product-feature,
  .commerce-choice,
  .playbook-display,
  .resource-detail-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .product-feature {
    padding: 28px;
  }
  .product-feature > div {
    max-width: 680px;
  }
  .service-destinations {
    grid-template-columns: 1fr;
  }
  .service-destinations > article {
    padding: 30px;
  }
  .service-destinations article > span {
    margin-bottom: 24px;
  }
  .commerce-section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-inclusions {
    gap: 24px;
  }
  .product-screenshot {
    padding: 24px;
  }
  .resource-gate {
    max-width: 720px;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .commerce-opening {
    padding-top: 48px;
  }
  .commerce-opening h1 {
    font-size: clamp(43px, 10vw, 62px);
  }
  .commerce-opening > p:not(.eyebrow) {
    font-size: 19px;
    margin-top: 24px;
  }
  .commerce h2 {
    font-size: 34px;
  }
  .commerce .ctas {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }
  .commerce-opening > .btn,
  .commerce .ctas > .btn {
    width: 100%;
    justify-content: space-between;
  }
  .catalog-grid,
  .product-inclusions {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .catalog-visual {
    padding: 20px;
  }
  .catalog-copy h2 {
    font-size: 32px;
  }
  .catalog-copy > p:not(.eyebrow) {
    font-size: 18px;
  }
  .product-feature,
  .product-screenshot,
  .resource-preview,
  .playbook-display {
    padding: 20px;
    border-radius: 16px;
  }
  .product-feature > div {
    padding: 8px 2px;
  }
  .product-feature h2 {
    font-size: 50px;
  }
  .product-feature p:not(.eyebrow):not(.catalog-meta) {
    font-size: 18px;
  }
  .commerce-note {
    padding: 30px 24px;
  }
  .commerce-note > p:not(.eyebrow) {
    font-size: 18px;
  }
  .commerce-note > p.fine {
    font-size: 13px;
  }
  .product-inclusions h2,
  .product-inclusions h3 {
    font-size: 28px;
  }
  .resource-detail-grid > div > p {
    font-size: 18px;
  }
  .resource-form > .btn {
    font-size: 15px;
  }
  .resource-gate {
    padding: 28px 24px;
  }
  .resource-gate > h2 {
    font-size: 29px;
  }
  .catalog-visual .playbook-cover > strong {
    font-size: 32px;
  }
  .catalog-visual .playbook-circle {
    width: 62px;
    height: 62px;
    font-size: 40px;
  }
  .catalog-visual > .playbook-cover {
    padding: 16px;
  }
  .playbook-cover > strong {
    font-size: 42px;
  }
  .playbook-display {
    gap: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-visual > img {
    transition: none;
  }
}

@media (max-width: 640px) {
  .catalog-visual:has(.playbook-cover) {
    aspect-ratio: auto;
    min-height: 340px;
  }
  .catalog-visual > .playbook-cover {
    height: 300px;
    width: 225px;
  }
  .catalog-visual .playbook-cover > strong {
    font-size: 31px;
    margin-top: 18px;
  }
  .catalog-visual .playbook-circle {
    margin: 14px 0;
  }
}

/* Every destination carries the same care as the front door. */
.commerce {
  padding-bottom: 0;
}
.destination-hero {
  padding: clamp(54px, 7vw, 100px) 0 0;
}
.destination-copy {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}
.destination-copy h1 {
  font: 550 clamp(58px, 8.1vw, 122px)/0.99 var(--sans);
  letter-spacing: -0.073em;
  margin: 26px 0 0;
  text-wrap: balance;
}
.destination-dek {
  max-width: 700px;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--graph);
  margin: 30px auto 0;
  letter-spacing: -0.02em;
}
.destination-copy .ctas {
  justify-content: center;
  margin-top: 30px;
}
.destination-visual {
  margin: 54px 0 0;
  overflow: hidden;
  border-radius: 20px;
}
.destination-visual img {
  width: 100%;
  height: auto;
}
.service-stage {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 0.9fr;
  background: var(--stone);
  min-height: 340px;
  gap: 12px;
  padding: 12px;
}
.service-stage > div {
  position: relative;
  border-radius: 12px;
  padding: 24px;
  overflow: hidden;
  min-width: 0;
}
.service-stage > div > span {
  position: relative;
  z-index: 2;
  font: 500 10px/1.4 var(--mono);
}
.service-insight {
  background: var(--sig);
  display: flex;
  flex-direction: column;
}
.service-insight strong {
  font-size: clamp(35px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.06em;
  font-weight: 550;
  margin-top: 44px;
}
.service-insight i {
  position: absolute;
  right: 22px;
  bottom: 14px;
  font: 400 100px/1 var(--sans);
}
.service-craft {
  background: #d5ddc5;
}
.service-craft > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  gap: 12px;
  padding: 24px 0 0;
}
.service-craft img {
  width: 45%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-7deg);
  transition: transform 0.4s var(--ease);
}
.service-craft img + img {
  transform: rotate(7deg) translateY(8px);
}
.service-craft:hover img {
  transform: rotate(-2deg) translateY(-5px);
}
.service-craft:hover img + img {
  transform: rotate(2deg) translateY(3px);
}
.service-learning {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-learning b {
  font-weight: 400;
  font-size: 95px;
  line-height: 1;
  color: var(--sig);
  margin-top: 20px;
}
.service-learning strong {
  font-size: clamp(27px, 3vw, 43px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin-top: 20px;
}
.commerce-section {
  padding-top: clamp(78px, 9vw, 132px);
}
.commerce h2 {
  font-size: clamp(35px, 4.4vw, 64px);
  letter-spacing: -0.055em;
  line-height: 1.04;
}
.commerce-section-heading {
  grid-template-columns: 1.25fr 1fr;
  align-items: end;
  gap: 48px;
  margin-bottom: 48px;
}
.commerce-section-heading > p {
  font-size: 19px;
  max-width: 510px;
}
.commerce .service-grid {
  gap: 32px;
}
.commerce .service-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}
.commerce .service-copy {
  margin: 0;
  padding-top: 26px;
}
.commerce .service-copy > p {
  font-size: 17px;
  line-height: 1.65;
  margin-top: 18px;
}
.commerce .service-item h3 {
  font-size: clamp(25px, 2.7vw, 38px);
}
.output-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.output-grid h3,
.service-options h3,
.product-steps h3,
.playbook-contents h3,
.resource-principles h3 {
  font: 550 clamp(27px, 2.5vw, 36px)/1.08 var(--sans);
  letter-spacing: -0.045em;
}
.output-grid p,
.service-options p,
.service-person p:not(.eyebrow),
.product-steps p,
.playbook-contents p,
.resource-principles p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--graph);
  margin-top: 18px;
}
.output-icon {
  display: block;
  font-size: 60px;
  line-height: 1;
  margin-bottom: 32px;
}
.output-grid article > span:last-child {
  display: block;
  margin-top: 24px;
  color: var(--graph);
  font-size: 13px;
}
.service-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.service-options article {
  background: var(--stone);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-options article:nth-child(2) {
  background: var(--ink);
  color: var(--paper);
}
.service-options article:nth-child(2) p {
  color: #c3c0b7;
}
.service-options .eyebrow {
  min-height: 32px;
  margin-bottom: 35px;
}
.service-options p {
  flex: 1;
  margin-bottom: 28px;
}
.service-option-foot {
  display: flex;
  gap: 36px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.service-person {
  margin-top: clamp(78px, 9vw, 132px);
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  align-items: center;
  gap: clamp(36px, 8vw, 120px);
}
.service-person > img {
  width: 100%;
  max-height: 510px;
  object-fit: cover;
  border-radius: 18px;
}
.service-person h2 {
  margin: 24px 0 0;
}
.service-person p {
  max-width: 600px;
}
.service-person .lnk {
  margin-top: 24px;
}
.destination-close {
  position: relative;
  margin: clamp(78px, 9vw, 132px) calc(-1 * var(--gut)) 0;
  padding: clamp(36px, 6vw, 86px) var(--gut);
  background: var(--sig);
  overflow: hidden;
}
.destination-close h2 {
  font-size: clamp(44px, 6.2vw, 92px);
  max-width: 1000px;
}
.destination-close p {
  font-size: 21px;
  max-width: 620px;
  line-height: 1.5;
  margin-top: 26px;
}
.destination-close > div {
  position: relative;
  z-index: 1;
}
.destination-arrow {
  position: absolute;
  right: 4%;
  bottom: -0.2em;
  font-size: clamp(180px, 27vw, 400px);
  font-weight: 350;
  line-height: 1;
  opacity: 0.16;
  pointer-events: none;
}
.product-flagship {
  margin-top: 56px;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(24px, 3vw, 44px);
  grid-template-columns: 1.2fr 1fr;
}
.product-flagship .mandate-frame {
  margin: 0;
  background: #292824;
}
.product-flagship h2 {
  font-size: clamp(35px, 4vw, 60px);
  margin: 28px 0;
}
.product-flagship p:not(.eyebrow):not(.catalog-meta) {
  color: #c3c0b7;
  font-size: 19px;
}
.product-flagship .catalog-meta {
  display: block;
  color: #c3c0b7;
}
.browser-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 20px;
  color: var(--paper);
  background: #292824;
  font: 400 9px/1.5 var(--mono);
}
.mandate-frame {
  background: #292824;
  padding: 0 22px 22px;
  border-radius: 14px;
}
.mandate-frame img {
  border-radius: 7px;
}
.mandate-opening {
  padding: 60px clamp(20px, 4vw, 60px) 40px;
  margin: 28px 0 0;
  background: var(--ink);
  color: var(--paper);
  border-radius: 20px;
}
.mandate-opening .destination-copy h1 {
  font-size: clamp(53px, 6.8vw, 102px);
}
.mandate-opening .destination-dek {
  color: #c3c0b7;
}
.mandate-opening .mandate-frame {
  margin-top: 48px;
  max-width: 1050px;
  margin-inline: auto;
}
.product-inclusions {
  gap: 40px;
  margin-top: 0;
}
.inclusion-symbol {
  display: block;
  font-size: 50px;
  line-height: 1;
  margin-bottom: 32px;
}
.product-inclusions h3 {
  font-size: clamp(26px, 2.6vw, 38px);
}
.product-steps > ol {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.product-steps li {
  padding: 32px;
  background: var(--stone);
  border-radius: 16px;
}
.product-steps li > span {
  font: 500 12px/1.5 var(--mono);
  display: block;
  margin-bottom: 60px;
}
.purchase-section {
  padding-bottom: clamp(72px, 8vw, 110px);
  align-items: center;
}
.purchase-section .eyebrow,
.download-section .eyebrow {
  margin-bottom: 25px;
}
.resource-shelf {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  background: var(--stone);
  padding: 32px;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
  scroll-margin-top: 110px;
}
.resource-shelf .catalog-visual {
  height: clamp(260px, 28vw, 400px);
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  padding: 16px;
}
.resource-shelf .catalog-visual > img {
  height: 100%;
  object-fit: contain;
}
.resource-shelf .catalog-card:first-child .catalog-visual img {
  transform: rotate(-3deg);
}
.resource-shelf .catalog-card:last-child .playbook-cover {
  height: 100%;
  width: auto;
  max-width: 100%;
  transform: rotate(4deg);
}
.resource-shelf .catalog-copy {
  padding: 28px 12px 0;
}
.resource-shelf .catalog-copy h2 {
  font-size: clamp(28px, 3vw, 44px);
}
.resource-shelf .catalog-copy > p:not(.eyebrow) {
  font-size: 17px;
}
.resource-shelf .catalog-copy .eyebrow {
  font-size: 10px;
  line-height: 1.7;
}
.library-note {
  margin-top: 22px;
  color: var(--graph);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.preview-link {
  display: block;
  border-radius: 8px;
}
.preview-link:focus-visible {
  outline-offset: 6px;
}
.preview-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}
.preview-action .arr {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.preview-meta {
  display: block;
  font-size: 12px;
  color: var(--graph);
  margin-top: 8px;
  line-height: 1.6;
}
.mandate-frame .preview-action {
  color: var(--paper);
}
.playbook-hero-art > .preview-link {
  width: 100%;
  max-width: 320px;
  justify-self: center;
}
.playbook-hero-art > .preview-link .playbook-cover {
  transform: rotate(4deg);
}
.resource-shelf > div {
  min-width: 0;
}
.resource-shelf > div > span {
  display: block;
  font: 500 10px/1.5 var(--mono);
  margin-bottom: 24px;
}
.resource-shelf-pack {
  padding: 12px;
}
.resource-shelf-pack img {
  transform: rotate(-3deg);
  border-radius: 8px;
}
.resource-shelf-pack > strong {
  display: block;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 550;
  letter-spacing: -0.055em;
  margin-top: 24px;
}
.resource-shelf-book {
  padding: 20px 38px;
}
.resource-shelf-book .playbook-cover {
  max-width: 275px;
  min-height: 0;
  transform: rotate(5deg);
  padding: 24px;
}
.resource-shelf-book .playbook-cover > strong {
  font-size: 39px;
  margin-top: 20px;
}
.resource-shelf-book .playbook-circle {
  width: 80px;
  height: 80px;
  font-size: 50px;
  margin: 22px 0;
}
.resource-shelf-book .playbook-cover > p {
  font-size: 10px;
}
.catalog-visual {
  padding: 28px;
}
.catalog-copy h2 {
  font-size: clamp(32px, 3.7vw, 50px);
}
.resource-principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  padding-top: clamp(78px, 9vw, 132px);
}
.resource-principles article > span {
  display: block;
  font-size: 60px;
  line-height: 1;
  margin-bottom: 32px;
}
.product-roadmap {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 64px;
  align-items: center;
}
.product-roadmap p:not(.eyebrow) {
  font-size: 19px;
  color: var(--graph);
  margin-top: 24px;
  line-height: 1.6;
}
.product-roadmap p.fine {
  font-size: 13px;
}
.roadmap-art {
  padding: 30px;
  background: var(--paper);
  border-radius: 12px;
  transform: rotate(3deg);
}
.roadmap-art > span {
  font: 400 clamp(45px, 6vw, 80px)/1 var(--mono);
  display: block;
  margin-bottom: 25px;
}
.roadmap-art > strong {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.055em;
  display: block;
}
.roadmap-art > i {
  font: 400 10px/1.5 var(--mono);
  display: block;
  margin-top: 40px;
}
.pack-hero-art {
  padding: clamp(16px, 3vw, 40px);
  background: var(--stone);
}
.pack-hero-art img {
  max-width: 1100px;
  margin: auto;
}
.direction-list {
  display: grid;
  gap: 12px;
}
.direction-list article {
  display: flex;
  gap: 48px;
  padding: 28px 36px;
  border-radius: 12px;
  background: var(--stone);
  align-items: center;
}
.direction-list article > span {
  font: 400 14px/1 var(--mono);
}
.direction-list h3 {
  font-size: clamp(25px, 2.8vw, 38px);
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.direction-list p {
  color: var(--graph);
  margin-top: 10px;
  font-size: 18px;
}
.download-section {
  align-items: center;
}
.download-benefits {
  list-style: none;
  margin: 25px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.download-benefits li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 17px;
}
.download-benefits li::before {
  content: '↗';
}
.resource-faq {
  max-width: 900px;
}
.resource-faq h2 {
  margin-bottom: 32px;
}
.resource-faq details {
  background: var(--stone);
  border-radius: 12px;
  margin: 12px 0;
  padding: 0 28px;
}
.resource-faq summary {
  font-size: 20px;
  padding: 22px 0;
  cursor: pointer;
}
.resource-faq details p {
  color: var(--graph);
  font-size: 17px;
  line-height: 1.65;
  padding: 0 0 26px;
}
.playbook-hero-art {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  background: var(--stone);
  padding: clamp(24px, 4vw, 60px);
}
.playbook-hero-art > .playbook-cover {
  max-width: 320px;
  transform: rotate(5deg);
}
.playbook-hero-art .playbook-cover > strong {
  font-size: 48px;
}
.playbook-teaser {
  background: var(--paper);
  padding: 32px;
  transform: rotate(-3deg);
}
.playbook-teaser > span {
  font: 500 10px/1.5 var(--mono);
}
.playbook-teaser > strong {
  display: block;
  margin: 40px 0;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.055em;
  font-weight: 550;
}
.playbook-teaser > div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.playbook-teaser > div > span {
  padding: 12px 18px;
  background: var(--stone);
  border-radius: 6px;
  font-size: 14px;
}
.playbook-teaser > div > span:first-child {
  background: var(--sig);
}
.playbook-teaser > p {
  font-size: 12px;
  margin-top: 40px;
}
.playbook-contents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.playbook-contents article > span {
  font: 500 10px/1.5 var(--mono);
  display: block;
  margin-bottom: 40px;
}
.playbook-example {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(32px, 7vw, 100px);
  align-items: center;
  margin-top: clamp(78px, 9vw, 132px);
  background: var(--stone);
  border-radius: 20px;
  padding: clamp(24px, 5vw, 72px);
}
.playbook-example h2 {
  margin-top: 28px;
}
.playbook-example p:not(.eyebrow) {
  color: var(--graph);
  font-size: 19px;
  margin-top: 24px;
  line-height: 1.6;
}
.playbook-example p.fine {
  font-size: 13px;
}
.playbook-example img {
  width: 100%;
  height: auto;
  transform: rotate(3deg);
}
/* The other public journeys keep their own personality and a shared scale. */
.about-opening h1,
.lab-page-intro h1 {
  font-size: clamp(62px, 8.2vw, 120px);
  letter-spacing: -0.067em;
  line-height: 1;
}
.about-opening .ctas,
.lab-page-intro .ctas {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 30px;
}
.about-opening .lnk,
.lab-page-intro .lnk {
  min-height: 44px;
  display: inline-flex;
  gap: 12px;
  align-items: center;
}
.lab-tool {
  margin-top: 64px;
  background: var(--stone);
  border-radius: 18px;
  padding: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.lab-tool h2 {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.05em;
  line-height: 1.08;
}
.lab-tool p {
  font-size: 18px;
  color: var(--graph);
  max-width: 640px;
  margin-top: 18px;
}
.blog-h .h-blog {
  font-family: var(--sans);
  font-size: clamp(62px, 8vw, 116px);
  font-weight: 550;
  letter-spacing: -0.065em;
  line-height: 1;
}
.blog-h .lead {
  max-width: 660px;
}
.art-h {
  padding-bottom: 36px;
}
.art:not(.legal) .h-art {
  font-family: var(--sans);
  font-weight: 550;
  letter-spacing: -0.055em;
}
/* Motion is a short arrival, never a dependency or an endless background. */
@media (prefers-reduced-motion: no-preference) {
  .destination-copy {
    animation: destination-arrive 0.65s var(--ease) both;
  }
  .destination-visual {
    animation: destination-arrive 0.8s 0.12s var(--ease) both;
  }
}
@keyframes destination-arrive {
  from {
    opacity: 0.15;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1023px) {
  .commerce .service-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .commerce .service-item {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 36px;
    align-items: center;
  }
  .commerce .service-copy {
    padding: 0;
  }
  .destination-copy h1 {
    font-size: clamp(58px, 8.8vw, 88px);
  }
  .service-stage {
    grid-template-columns: 1fr 1.2fr 1fr;
    min-height: 270px;
  }
  .service-stage > div {
    padding: 18px;
  }
  .service-insight strong {
    font-size: 38px;
    margin-top: 35px;
  }
  .service-insight i {
    font-size: 70px;
  }
  .service-craft > div {
    height: 200px;
  }
  .service-learning strong {
    font-size: 27px;
  }
  .service-learning b {
    font-size: 65px;
  }
  .commerce-section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .output-grid,
  .service-options,
  .playbook-contents {
    gap: 24px;
  }
  .service-options article {
    padding: 24px;
  }
  .service-options h3 {
    font-size: 28px;
  }
  .service-options p {
    font-size: 17px;
  }
  .product-flagship {
    grid-template-columns: 1fr;
  }
  .product-flagship .mandate-frame {
    max-width: none;
  }
  .resource-shelf-book {
    padding: 10px;
  }
  .resource-shelf-book .playbook-cover > strong {
    font-size: 32px;
  }
  .playbook-hero-art .playbook-cover > strong {
    font-size: 37px;
  }
  .playbook-hero-art .playbook-cover {
    min-height: 0;
  }
  .product-roadmap {
    gap: 32px;
  }
  .product-steps > ol {
    gap: 16px;
  }
  .product-steps li {
    padding: 24px;
  }
}
@media (max-width: 640px) {
  .commerce .service-item {
    display: flex;
    gap: 26px;
  }
  .commerce .service-copy > p {
    font-size: 18px;
  }
  .destination-hero {
    padding-top: 46px;
  }
  .destination-copy {
    text-align: left;
  }
  .destination-copy h1 {
    font-size: clamp(43px, 10.6vw, 68px);
    margin-top: 22px;
    letter-spacing: -0.065em;
  }
  .destination-dek {
    font-size: 19px;
    margin-top: 24px;
  }
  .destination-copy .ctas {
    align-items: stretch;
    gap: 14px;
  }
  .destination-copy .ctas > .lnk {
    align-self: flex-start;
  }
  .destination-visual {
    margin-top: 36px;
    border-radius: 14px;
  }
  .service-stage {
    grid-template-columns: 1fr 1fr;
    padding: 8px;
    gap: 8px;
    min-height: 0;
  }
  .service-stage > div {
    border-radius: 8px;
    padding: 16px;
  }
  .service-stage > div > span {
    font-size: 8px;
  }
  .service-insight strong {
    font-size: clamp(22px, 6.5vw, 32px);
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .service-insight i {
    font-size: 48px;
    bottom: 5px;
    right: 12px;
  }
  .service-craft > div {
    height: 174px;
    gap: 6px;
  }
  .service-craft img {
    width: 48%;
  }
  .service-stage .service-learning {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 0.6fr 1fr;
    align-items: center;
    column-gap: 16px;
  }
  .service-learning > span {
    grid-column: 1/-1;
  }
  .service-learning b {
    font-size: 66px;
    margin: 16px 0 0;
  }
  .service-learning strong {
    font-size: 25px;
    margin: 16px 0 0;
  }
  .commerce h2 {
    font-size: 36px;
  }
  .commerce-section-heading {
    gap: 22px;
    margin-bottom: 32px;
  }
  .commerce-section-heading > p {
    font-size: 18px;
  }
  .output-grid,
  .service-options,
  .playbook-contents,
  .resource-principles,
  .product-steps > ol {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .output-grid article {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 20px;
  }
  .output-grid article .output-icon {
    grid-row: 1/4;
    font-size: 42px;
    margin: 0;
  }
  .output-grid h3 {
    font-size: 29px;
  }
  .output-grid p {
    margin-top: 12px;
  }
  .output-grid article > span:last-child {
    grid-column: 2;
    margin-top: 16px;
  }
  .service-options {
    gap: 12px;
  }
  .service-options article {
    padding: 28px;
  }
  .service-options .eyebrow {
    min-height: 0;
    margin-bottom: 30px;
  }
  .service-options h3 {
    font-size: 35px;
  }
  .service-person {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .service-person > img {
    max-height: 390px;
    object-position: center 35%;
  }
  .service-person p {
    font-size: 18px;
  }
  .destination-close {
    padding-block: 48px;
  }
  .destination-close h2 {
    font-size: clamp(38px, 10.4vw, 56px);
  }
  .destination-close p {
    font-size: 18px;
  }
  .destination-close .ctas .lnk {
    align-self: flex-start;
  }
  .destination-arrow {
    right: 0;
    bottom: -8px;
    font-size: 190px;
    opacity: 0.1;
  }
  .browser-caption {
    padding: 12px 0;
    font-size: 8px;
  }
  .browser-caption > span:last-child {
    display: none;
  }
  .mandate-frame {
    padding: 0 12px 12px;
  }
  .mandate-opening {
    padding: 36px 20px 20px;
    margin-top: 18px;
    border-radius: 14px;
  }
  .mandate-opening .destination-copy h1 {
    font-size: clamp(39px, 9vw, 57px);
  }
  .mandate-opening .destination-dek {
    font-size: 18px;
  }
  .mandate-opening .destination-copy .btn {
    font-size: 16px;
  }
  .mandate-opening .mandate-frame {
    margin-top: 36px;
  }
  .product-flagship {
    margin-top: 36px;
    padding: 20px;
  }
  .product-flagship h2 {
    font-size: 38px;
  }
  .product-inclusions {
    gap: 36px;
  }
  .inclusion-symbol {
    font-size: 40px;
    margin-bottom: 22px;
  }
  .product-steps li {
    display: flex;
    align-items: flex-start;
    gap: 22px;
  }
  .product-steps li > span {
    margin: 5px 0 0;
  }
  .product-steps h3 {
    font-size: 29px;
  }
  .product-steps p {
    font-size: 17px;
  }
  .resource-shelf {
    gap: 40px;
    padding: 24px 18px;
    grid-template-columns: minmax(0, 1fr);
  }
  .resource-shelf .catalog-visual {
    height: auto;
    min-height: 0;
    padding: 10px;
    aspect-ratio: 4 / 3;
  }
  .resource-shelf .catalog-card:last-child .catalog-visual {
    height: 290px;
    aspect-ratio: auto;
  }
  .resource-shelf .catalog-copy {
    padding: 22px 6px 0;
  }
  .resource-shelf .catalog-copy h2 {
    font-size: 30px;
  }
  .library-note {
    text-align: left;
  }
  .resource-shelf-pack {
    padding: 0;
  }
  .resource-shelf > div > span {
    font-size: 8px;
    margin-bottom: 20px;
  }
  .resource-shelf-pack > strong {
    font-size: 27px;
    margin-top: 22px;
  }
  .resource-shelf-book {
    padding: 0;
  }
  .resource-shelf-book .playbook-cover {
    padding: 12px;
    aspect-ratio: 3/4;
  }
  .resource-shelf-book .playbook-cover > span {
    font-size: 6px;
  }
  .resource-shelf-book .playbook-cover > strong {
    font-size: 22px;
    margin-top: 16px;
  }
  .resource-shelf-book .playbook-circle {
    width: 42px;
    height: 42px;
    font-size: 28px;
    margin: 12px 0;
  }
  .resource-shelf-book .playbook-cover > p {
    font-size: 6px;
  }
  .resource-principles {
    gap: 40px;
  }
  .resource-principles h3 {
    font-size: 30px;
  }
  .product-roadmap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .roadmap-art {
    padding: 26px;
  }
  .direction-list article {
    gap: 24px;
    padding: 24px;
    align-items: flex-start;
  }
  .direction-list article > span {
    margin-top: 7px;
    font-size: 11px;
  }
  .direction-list h3 {
    font-size: 28px;
  }
  .direction-list p {
    font-size: 17px;
  }
  .pack-hero-art {
    padding: 12px;
  }
  .download-benefits li {
    font-size: 16px;
  }
  .playbook-hero-art {
    padding: 26px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .playbook-teaser {
    padding: 24px;
  }
  .playbook-teaser > strong {
    font-size: 36px;
    margin: 32px 0;
  }
  .playbook-teaser > div {
    gap: 7px;
  }
  .playbook-teaser > div > span {
    padding: 9px 14px;
  }
  .playbook-hero-art > .playbook-cover {
    width: min(220px, 100%);
    padding: 20px;
    min-height: 0;
  }
  .playbook-hero-art .playbook-cover > strong {
    font-size: 33px;
  }
  .playbook-hero-art .playbook-circle {
    width: 65px;
    height: 65px;
    font-size: 40px;
    margin: 18px 0;
  }
  .playbook-hero-art .playbook-cover > p {
    font-size: 9px;
  }
  .playbook-example {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .playbook-example p:not(.eyebrow) {
    font-size: 18px;
  }
  .playbook-example figure {
    padding: 8px;
  }
  .playbook-contents article > span {
    margin-bottom: 20px;
  }
  .playbook-contents h3 {
    font-size: 32px;
  }
  .about-opening h1,
  .lab-page-intro h1,
  .blog-h .h-blog {
    font-size: clamp(47px, 11.5vw, 68px);
  }
  .about-opening .ctas,
  .lab-page-intro .ctas {
    flex-direction: column;
    align-items: flex-start;
  }
  .lab-tool {
    padding: 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-craft img {
    transition: none;
  }
}
/* A creative exploration is something to explore, not three explanations in a row. */
.agency-workbench {
  background: var(--stone);
  border-radius: 20px;
  padding: clamp(16px, 3vw, 40px);
}
.agency-directions {
  border: 0;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.agency-directions label {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 18px 24px;
  background: var(--paper);
  border-radius: 10px;
  font-size: 21px;
  font-weight: 500;
  cursor: pointer;
}
.agency-directions label > span {
  font: 400 10px/1.5 var(--mono);
}
.agency-directions label > i {
  font-style: normal;
  margin-left: auto;
}
.agency-directions input:checked + label {
  background: var(--ink);
  color: var(--paper);
}
.agency-directions input:focus-visible + label {
  outline: 3px solid #a53811;
  outline-offset: 4px;
}
.agency-workbench .agency-examples {
  display: block;
}
.agency-workbench .agency-example {
  display: none;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.agency-workbench:has(#direction-0:checked) [data-direction='0'],
.agency-workbench:has(#direction-1:checked) [data-direction='1'],
.agency-workbench:has(#direction-2:checked) [data-direction='2'] {
  display: grid;
}
.agency-execution a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.agency-execution img {
  width: 100%;
  height: auto;
  border-radius: 0;
}
.agency-direction-copy .eyebrow {
  font-size: 11px;
}
.agency-direction-copy h3 {
  font-size: clamp(34px, 4.1vw, 62px);
  letter-spacing: -0.06em;
  line-height: 1.02;
  margin: 32px 0 0;
}
.agency-direction-copy p {
  font-size: 18px;
  color: var(--graph);
  line-height: 1.65;
  margin-top: 20px;
}
.agency-direction-copy p.direction-idea {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
}
.agency-direction-copy summary {
  min-height: 48px;
  padding-block: 14px;
  font-size: 16px;
}
.agency-direction-copy details {
  margin-top: 24px;
}
.agency-direction-copy details img {
  margin-top: 20px;
  max-width: 340px;
}
.agency-direction-copy details p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.agency-direction-copy details a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}
.agency-sample-note {
  margin: 20px 0 0;
  font-size: 13px;
  max-width: 900px;
}
.agency-sample-note summary {
  min-height: 44px;
  cursor: pointer;
  padding: 12px 0;
}
.agency-sample-note p {
  padding-top: 12px;
}
@media (max-width: 1023px) {
  .agency-workbench .agency-example {
    gap: 32px;
  }
  .agency-directions label {
    padding: 16px;
    gap: 12px;
  }
  .agency-direction-copy h3 {
    font-size: 38px;
  }
}
@media (max-width: 640px) {
  .agency-workbench {
    padding: 16px;
    border-radius: 16px;
  }
  .agency-directions {
    gap: 8px;
    margin-bottom: 20px;
  }
  .agency-directions label {
    font-size: 15px;
    padding: 14px 10px;
    gap: 6px;
    min-height: 54px;
  }
  .agency-directions label > span {
    display: none;
  }
  .agency-directions label > i {
    font-size: 14px;
  }
  .agency-workbench .agency-example {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .agency-direction-copy {
    padding: 0 8px 12px;
  }
  .agency-direction-copy h3 {
    font-size: 38px;
    margin-top: 22px;
  }
  .agency-direction-copy p {
    font-size: 17px;
  }
  .agency-direction-copy p.direction-idea {
    font-size: 21px;
  }
}
.blog .cta-box,
.art:not(.legal) .cta-box {
  background: var(--sig);
  color: var(--ink);
  border: 0;
  padding: clamp(30px, 5vw, 68px);
  border-radius: 18px;
}
.blog .cta-box h2,
.art .cta-box h2 {
  font: 550 clamp(34px, 4.7vw, 66px)/1.04 var(--sans);
  letter-spacing: -0.055em;
  max-width: 800px;
}
.blog .cta-box p,
.art .cta-box p {
  color: var(--ink);
  max-width: 650px;
}

.agency .ctas .btn {
  min-height: 56px;
}

/* Component boundaries are independent of the page that hosts them. */
.commerce .playbook-cover {
  display: block;
  padding: 0;
  min-height: 0;
  aspect-ratio: 3 / 4;
}
.commerce .playbook-cover > svg {
  width: 100%;
  height: 100%;
}
.lab-page-intro > p:not(.eyebrow) {
  max-width: 760px;
}
.concept-cards > div {
  min-width: 0;
}
.concept-cards strong {
  font-size: clamp(20px, 2.4vw, 38px);
}
.concept-cards div:nth-child(2) strong {
  position: static;
  margin-top: auto;
}
.concept-cards > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.concept-play {
  line-height: 1;
}
.test-artifact,
.readout-artifact {
  min-width: 0;
}
.artifact-title > span {
  min-width: 0;
}
.ab-pair {
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
}
.ab-pair > div {
  min-width: 0;
}
.test-artifact dl > div {
  grid-template-columns: 110px minmax(0, 1fr);
}
.toc > summary > span {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-right: 6px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .service-copy h3 {
    min-height: 2.16em;
  }
}
@media (min-width: 641px) {
  .output-grid article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .output-grid article > p {
    flex: 1;
  }
}
@media (max-width: 640px) {
  .commerce .service-item {
    align-items: stretch;
  }
  .test-artifact dl > div {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}
@media (max-width: 360px) {
  .lab-visual {
    padding: 18px;
  }
  .test-artifact,
  .readout-artifact {
    padding: 16px;
  }
  .ab-pair > div {
    padding: 10px;
    min-height: 120px;
  }
  .ab-pair strong {
    font-size: 17px;
  }
  .artifact-title {
    gap: 10px;
  }
  .artifact-title > span:last-child {
    flex: 0 1 80px;
  }
  .test-artifact dl > div {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
  }
  .next-action {
    margin-inline: -16px;
    margin-bottom: -16px;
    padding-left: 16px;
  }
}

.commerce .service-copy h3 {
  max-width: none;
  font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.08;
}
@media (max-width: 760px) {
  .home .faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .home .faq .qs {
    min-width: 0;
  }
  .qs .a {
    padding-right: 0;
    font-size: 16px;
    line-height: 1.65;
  }
}

.package-details summary > span,
.note-plus {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 6px;
}
@media (max-width: 1000px) {
  .concept-cards strong {
    font-size: 26px;
  }
}
@media (max-width: 760px) {
  .concept-cards strong {
    font-size: clamp(22px, 4vw, 30px);
  }
}
@media (max-width: 540px) {
  .concept-cards strong {
    font-size: 20px;
  }
}
@media (max-width: 360px) {
  .concept-cards strong {
    font-size: 17px;
  }
}

.concept-cards strong {
  position: relative;
  z-index: 1;
}

@media (max-width: 540px) {
  .concept-play {
    display: none;
  }
}

/* One clear message, then one useful next step. */
.invitation {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  margin: clamp(72px, 8vw, 112px) 0 40px;
  padding: clamp(36px, 5vw, 72px);
  background: var(--sig);
  color: var(--ink);
}
.invitation h2 {
  margin: 0;
  font: 500 clamp(40px, 4.8vw, 70px)/1.06 var(--sans);
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.invitation h2 > span {
  display: block;
}
.invitation h2 > span + span {
  color: inherit;
}
.invitation-next {
  min-width: 0;
}
.invitation-next > p {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.invitation .ctas {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px 24px;
  margin: 26px 0 0;
}
.invitation .btn {
  min-height: 52px;
  padding: 15px 22px;
  font-size: 16px;
}
.invitation .lnk {
  font-size: 15px;
  min-height: 52px;
}
.invitation--paper {
  background: #fff;
}
.invitation--paper h2 > span + span {
  color: var(--sig);
}
.invitation--paper .invitation-next > p {
  color: var(--graph);
}
.invitation--bleed {
  margin-inline: calc(-1 * var(--gut));
  margin-bottom: 0;
  padding-inline: var(--gut);
}
@media (max-width: 1000px) {
  .invitation {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .invitation h2 {
    font-size: clamp(38px, 6.5vw, 60px);
  }
  .invitation-next > p {
    max-width: 40ch;
  }
}
@media (max-width: 640px) {
  .invitation {
    padding: 36px 24px;
  }
  .invitation h2 {
    font-size: clamp(32px, 8.4vw, 48px);
  }
  .invitation--bleed {
    padding-inline: var(--gut);
  }
  .invitation .ctas {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .invitation .btn {
    width: auto;
    max-width: 100%;
    justify-content: space-between;
  }
}

/* Once someone chooses a product, put the action beside the thing they chose. */
.conversion-page {
  padding-bottom: 48px;
}
.sheet-back {
  padding-top: 28px;
}
.sheet-back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--graph);
}
.sheet-back a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.product-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  column-gap: clamp(32px, 6vw, 88px);
  row-gap: 30px;
  align-items: start;
  padding-top: 24px;
}
.sheet-intro {
  grid-column: 1;
  grid-row: 1;
}
.sheet-intro h1 {
  font: 550 clamp(40px, 4.8vw, 70px)/1.04 var(--sans);
  letter-spacing: -0.06em;
  margin-top: 20px;
  text-wrap: balance;
}
.sheet-intro > p:not(.eyebrow) {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--graph);
  max-width: 46ch;
  margin-top: 20px;
}
.sheet-gate {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: clamp(24px, 3vw, 40px);
  scroll-margin-top: 100px;
  min-width: 0;
}
.sheet-gate > h2 {
  font-size: clamp(26px, 2.3vw, 34px);
  margin: 0 0 26px;
}
.sheet-preview {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.sheet-preview .destination-visual {
  margin: 0;
  animation: none;
}
.sheet-pack-preview,
.sheet-book-preview {
  background: var(--stone);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 38px);
  margin: 0;
}
.sheet-pack-preview img {
  width: 100%;
  height: auto;
}
.sheet-preview figcaption {
  font-size: 12px;
  color: var(--graph);
  margin-top: 20px;
  line-height: 1.5;
}
.sheet-book-preview .playbook-cover {
  max-width: 230px;
}
.sheet-book-preview figcaption {
  text-align: center;
}
.sheet-includes {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 26px 0;
  font-size: 16px;
  line-height: 1.5;
}
.sheet-includes li::before {
  content: '✓';
  margin-right: 10px;
}
.purchase-gate > .eyebrow {
  margin-bottom: 18px;
}
.purchase-gate > h2 {
  font-size: clamp(40px, 4vw, 56px);
}
.purchase-gate .product-purchase .btn {
  width: 100%;
  justify-content: space-between;
}
.purchase-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--graph);
  margin-top: 20px;
}
.sheet-details {
  max-width: 840px;
  padding-top: 40px;
}
.sheet-details details {
  scroll-margin-top: 110px;
}
.sheet-details summary {
  cursor: pointer;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
}
.sheet-details details > div {
  padding: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--graph);
  max-width: 70ch;
}
.sheet-details p + p {
  margin-top: 16px;
}
.sheet-details ul {
  display: grid;
  gap: 12px;
  padding-left: 22px;
  list-style: disc;
}
.sheet-page-preview {
  max-width: 400px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.resource-form {
  scroll-margin-top: 110px;
}
.delivery-page {
  max-width: 680px;
  margin: clamp(30px, 7vw, 90px) auto;
  padding: 0 var(--gut);
}
.delivery-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 54px;
}
.delivery-brand img {
  width: 132px;
  height: 28px;
}
.delivery-page h1 {
  font: 550 clamp(36px, 5vw, 58px)/1.06 var(--sans);
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}
.delivery-page p {
  font-size: 18px;
  line-height: 1.6;
  margin-top: 24px;
  overflow-wrap: anywhere;
}
.delivery-page .fine {
  font-size: 14px;
  color: var(--graph);
}
.delivery-page .fine a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.delivery-page form,
.delivery-page .btn {
  margin-top: 28px;
}
.delivery-page form .btn {
  margin: 0;
}
.delivery-page strong {
  font-weight: 550;
}
@media (max-width: 760px) {
  .sheet-back {
    padding-top: 12px;
  }
  .product-sheet {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 14px;
  }
  .sheet-intro,
  .sheet-gate,
  .sheet-preview {
    grid-column: auto;
    grid-row: auto;
  }
  .sheet-intro h1 {
    font-size: clamp(34px, 7.5vw, 52px);
    margin-top: 14px;
  }
  .sheet-intro .eyebrow {
    font-size: 9px;
    line-height: 1.6;
  }
  .sheet-intro > p:not(.eyebrow) {
    font-size: 18px;
    margin-top: 16px;
  }
  .sheet-gate {
    padding: 24px;
  }
  .sheet-gate > h2 {
    font-size: 27px;
    margin-bottom: 22px;
  }
  .purchase-gate > h2 {
    font-size: 44px;
  }
  .sheet-details {
    padding-top: 24px;
  }
  .sheet-book-preview .playbook-cover {
    max-width: 200px;
  }
  .delivery-brand {
    margin-bottom: 36px;
  }
}

/* The handoff from choosing a service to starting a conversation. */
.brief-start > .wrap {
  max-width: 1256px;
}
.brief-wayfinding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 38px;
  font-size: 13px;
  color: var(--graph);
}
.brief-wayfinding > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.brief-wayfinding a:hover,
.brief-plan a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brief-wayfinding ol {
  display: flex;
  gap: 32px;
}
.brief-wayfinding li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.brief-wayfinding li > span {
  font: 11px var(--mono);
}
.brief-wayfinding [aria-current] {
  color: var(--ink);
}
.brief-wayfinding [aria-current] > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sig);
}
.brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: start;
}
.brief-intro .eyebrow {
  margin-bottom: 20px;
}
.brief-intro .h-bk {
  font-size: clamp(44px, 4.8vw, 68px);
  font-weight: 550;
  line-height: 1.01;
  letter-spacing: -0.065em;
  margin: 0;
  text-wrap: initial;
}
.brief-intro > p:last-child {
  margin-top: 22px;
  color: var(--graph);
  font-size: 18px;
  line-height: 1.55;
  max-width: 40ch;
}
.brief-plan {
  margin-top: 36px;
  padding: 28px 30px 24px;
  background: #eae6dc;
  border-radius: 16px;
}
.brief-caption {
  font: 500 10px/1.6 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--graph);
}
.brief-plan .form-context {
  margin: 4px 0 12px;
  gap: 12px;
}
.brief-plan h2 {
  font: 550 25px/1.2 var(--sans);
  letter-spacing: -0.04em;
}
.brief-plan .form-context a {
  flex: none;
  gap: 6px;
  font-size: 12px;
  text-decoration: none;
}
.brief-price {
  font: 500 42px/1.15 var(--sans);
  letter-spacing: -0.055em;
}
.brief-price > span:last-child {
  display: inline-block;
  font: 400 12px/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--graph);
  margin-left: 8px;
}
.brief-price .brief-from {
  display: block;
  font: 400 12px/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--graph);
  margin-bottom: 4px;
}
.brief-offer {
  font-size: 12px;
  margin-top: 8px;
}
.brief-inclusions {
  display: grid;
  gap: 12px;
  margin: 24px 0 16px;
  font-size: 14px;
  line-height: 1.5;
}
.brief-inclusions li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.brief-inclusions li > span {
  flex: none;
  font-size: 12px;
}
.brief-scope summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  min-height: 44px;
  cursor: pointer;
  font-size: 12px;
}
.brief-scope summary::-webkit-details-marker {
  display: none;
}
.brief-scope summary > span {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  font-size: 20px;
  line-height: 1;
}
.brief-scope[open] summary > span {
  transform: rotate(45deg);
}
.brief-scope > p,
.brief-plan-note {
  font-size: 12px;
  line-height: 1.65;
  color: var(--graph);
}
.brief-scope > p {
  padding: 4px 0 16px;
}
.brief-plan-note {
  margin-top: 8px;
}
.brief-action .bk-app {
  border: 0;
  box-shadow: none;
  border-radius: 16px;
  padding: clamp(26px, 3.2vw, 44px);
}
.brief-form-intro {
  margin-bottom: 30px;
}
.brief-form-intro h2 {
  font: 550 clamp(29px, 3vw, 39px)/1.1 var(--sans);
  letter-spacing: -0.05em;
  margin-top: 16px;
}
.brief-form-intro > p:last-child {
  margin-top: 14px;
  color: var(--graph);
  font-size: 14px;
  line-height: 1.6;
  max-width: 36ch;
}
.brief-action .fgrid {
  gap: 20px 14px;
}
.brief-action .f label {
  font-size: 13px;
}
.brief-action .bk-app input,
.brief-action .bk-app textarea {
  border-radius: 8px;
  padding-left: 14px;
}
.brief-action .bk-submit {
  margin-top: 16px;
  gap: 14px;
}
.brief-action .bk-submit .btn {
  justify-content: space-between;
  padding-inline: 22px;
}
.brief-action .bk-submit .btn::after {
  content: '↗';
  font-size: 20px;
}
.brief-action .fine {
  max-width: 38ch;
}
.brief-reassurance {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.65;
  margin-top: 24px;
}
.brief-action .bk-alt {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.8;
}
.brief-next {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  gap: 50px;
  padding: 64px 0 70px;
}
.brief-next h2 {
  margin-top: 16px;
  font: 550 30px/1.1 var(--sans);
  letter-spacing: -0.045em;
}
.brief-next ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.brief-next li > span {
  display: block;
  font: 11px/1.6 var(--mono);
  color: var(--graph);
  margin-bottom: 18px;
}
.brief-next h3 {
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.025em;
}
.brief-next li p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--graph);
  margin-top: 10px;
}
.brief-start + .flow-footer .wrap {
  max-width: 1256px;
}
@media (min-width: 761px) and (max-width: 1050px) {
  .brief-layout {
    gap: 32px;
  }
  .brief-action .fgrid {
    grid-template-columns: 1fr;
  }
  .brief-next {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .brief-next h2 br {
    display: none;
  }
}
@media (max-width: 760px) {
  .brief-wayfinding {
    padding: 12px 0 24px;
    gap: 12px;
  }
  .brief-wayfinding ol {
    gap: 0;
  }
  .brief-wayfinding li:not([aria-current]) {
    display: none;
  }
  .brief-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .brief-intro .h-bk {
    font-size: clamp(40px, 8.6vw, 62px);
  }
  .brief-intro .eyebrow {
    margin-bottom: 16px;
  }
  .brief-intro > p:last-child {
    font-size: 16px;
    margin-top: 18px;
  }
  .brief-plan {
    margin-top: 26px;
    padding: 22px 24px;
  }
  .brief-plan h2 {
    font-size: 23px;
  }
  .brief-price {
    font-size: 38px;
  }
  .brief-action .bk-app {
    padding: 28px 24px;
  }
  .brief-action .fgrid {
    grid-template-columns: 1fr;
  }
  .brief-form-intro h2 {
    font-size: 34px;
  }
  .brief-next {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 46px 0 40px;
  }
  .brief-next h2 br {
    display: none;
  }
  .brief-next ol {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .brief-next li {
    display: flex;
    gap: 18px;
  }
  .brief-next li > span {
    margin: 3px 0 0;
  }
  .brief-next li p {
    margin-top: 6px;
    max-width: 45ch;
  }
}

/* The preference is a site control, kept with the footer rather than the artwork. */
.motion-preference {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 8px 0;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.motion-preference[hidden] {
  display: none;
}
.motion-preference[aria-pressed='true'] {
  text-decoration-thickness: 2px;
}
.motion-preference:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
html[data-motion='reduce'] *,
html[data-motion='reduce'] *::before,
html[data-motion='reduce'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion='reduce'] .replay-loop {
  display: none;
}
/* Device reduction also applies before scripts run or a change event arrives. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .replay-loop {
    display: none;
  }
}

/* Trace: a single type family, flat material, and a record of each iteration. */
.trace-mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.trace-echo {
  fill: none;
  stroke: var(--trace-outline, var(--sig));
  stroke-linejoin: miter;
}
.trace-present {
  fill: var(--trace-ink, var(--ink));
}
.hdr .logo {
  min-height: 44px;
}
.hdr .logo img {
  display: block;
  width: 148px;
  height: auto;
}
.hdr.scrolled {
  box-shadow: none;
}
.hdr .nav {
  margin-left: 24px;
}
.hdr .nav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-color: var(--sig);
}
/* The original material artwork is complete and still from first paint. */
.trace-hero.home-hero {
  background: var(--paper);
  padding: 0;
}
.trace-hero .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  min-height: min(790px, calc(100svh - var(--hh)));
  padding-top: clamp(72px, 9vw, 136px);
  padding-bottom: clamp(72px, 9vw, 136px);
}
.trace-hero-copy {
  min-width: 0;
}
.trace-hero .hero-message {
  text-align: left;
  padding: 0;
}
.trace-hero h1 {
  font-size: clamp(54px, 6.35vw, 96px);
  line-height: 0.99;
  font-weight: 550;
  letter-spacing: -0.058em;
  text-align: left;
  max-width: 10.6ch;
  margin: 0;
}
.trace-hero .hero-message > p {
  max-width: 38ch;
  margin: 30px 0 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--graph);
}
.trace-hero .hero-actions {
  justify-content: flex-start;
  gap: 18px 26px;
  margin-top: 34px;
}
.trace-hero .hero-actions .btn {
  background: var(--ink);
  color: var(--paper);
  border-radius: 5px;
  padding-inline: 24px;
}
.trace-hero-art {
  min-width: 0;
  margin: 0;
}
.trace-hero-material {
  align-self: stretch;
  position: relative;
  min-height: 560px;
  margin-right: calc(-1 * var(--gut));
  margin-top: -72px;
  margin-bottom: -72px;
  overflow: hidden;
}
.trace-hero-material img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 45% 50%;
}
/* Repeated typographic rhythm across destinations, rather than repeated decorations. */
.destination-copy {
  text-align: left;
  max-width: none;
}
.destination-copy h1 {
  font-size: clamp(52px, 7.1vw, 104px);
  line-height: 1.01;
  letter-spacing: -0.058em;
  max-width: 17ch;
  margin-top: 24px;
}
.destination-dek {
  margin: 28px 0 0;
  max-width: 48ch;
  font-size: clamp(18px, 1.7vw, 23px);
}
.destination-copy .ctas {
  justify-content: flex-start;
}
.destination-hero {
  padding-top: clamp(56px, 7vw, 100px);
}
.destination-visual,
.catalog-visual,
.catalog-link,
.product-feature,
.mandate-preview,
.sheet-pack-preview,
.sheet-book-preview,
.agency-board,
.agency-execution,
.about-portrait img,
.founder-portrait,
.founder-portrait img,
.bfeat,
.bfeat-art,
.service-stage > div,
.service-options > article,
.output-grid > article,
.agency-engagement,
.agency-benefits > article,
.about .steps li {
  border-radius: 0;
  box-shadow: none;
}
.catalog-copy h2,
.service-options h3,
.agency-direction-copy h3,
.sheet-intro h1,
.about-opening h1,
.lab-page-intro h1,
.h-blog,
.h-art,
.brief-intro .h-bk {
  letter-spacing: -0.055em;
}
.catalog-link {
  background: transparent;
}
.catalog-copy {
  padding-inline: 0;
}
.catalog-visual {
  background: var(--stone);
}
.commerce-section-heading,
.section-heading {
  align-items: start;
}
.section-heading h2 {
  margin-top: 0;
}
.commerce .commerce-section-heading > p,
.section-dek {
  line-height: 1.6;
}
.service-learning .trace-mark {
  width: 72px;
  margin: 16px 0;
  --trace-surface: var(--ink);
  --trace-ink: var(--paper);
}
.service-stage {
  gap: 0;
  padding: 0;
  border-radius: 0;
}
.service-stage > div {
  padding: clamp(24px, 3vw, 42px);
}
.service-craft {
  background: var(--stone);
}
.eyebrow,
.kick,
.brief-caption {
  letter-spacing: 0.075em;
}
.btn {
  border-radius: 5px;
}
.btn .arr {
  transition: transform 220ms var(--ease);
}
.btn:hover .arr,
.lnk:hover .arr {
  transform: translateX(3px);
}
.btn:focus-visible,
.lnk:focus-visible {
  outline-offset: 5px;
}
/* Content panels stay flat and tactile; photographs and actual work retain their colour. */
.home .value-grid {
  gap: clamp(28px, 5vw, 72px);
}
.value-grid h3 {
  font-size: clamp(24px, 2.2vw, 32px);
}
.value-grid p {
  line-height: 1.65;
}
.package-card {
  border-radius: 0;
  box-shadow: none;
}
.package-card h3 {
  letter-spacing: -0.045em;
}
.package-card .btn {
  border-radius: 5px;
}
.about-opening,
.lab-page-intro,
.blog-h {
  padding-bottom: clamp(48px, 6vw, 80px);
}
.about .steps li {
  background: var(--stone);
}
.about .steps li::before {
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
}
.about-portrait {
  position: relative;
}

.agency-board {
  background: var(--stone);
}
.agency-art {
  border-radius: 0;
}
.agency-directions {
  gap: 12px;
}
.agency-directions label {
  border-radius: 0;
}
/* Focused journeys use the same paper, type, and crisp, deliberate controls. */
.brief-plan,
.brief-action .bk-app,
.sheet-gate,
.bk-app,
.booking-context {
  border-radius: 0;
  box-shadow: none;
}
.brief-plan {
  background: var(--stone);
  padding: clamp(24px, 3vw, 40px);
}
.brief-action .bk-app {
  background: #fbfaf6;
}
.brief-wayfinding [aria-current] > span {
  border-radius: 0;
}
.bk-app input:not([type='checkbox']):not([type='radio']),
.bk-app textarea,
.bk-app select,
.gate-form input:not([type='checkbox']),
.gate-form textarea {
  border-radius: 3px;
}
.bk-app input:focus,
.bk-app textarea:focus,
.bk-app select:focus {
  outline-color: var(--ink);
}
.sheet-gate {
  background: #fbfaf6;
}
.art-h {
  padding-bottom: 36px;
}
.pcard {
  border-radius: 0;
  box-shadow: none;
}
.pcard a {
  border-radius: 0;
}
/* Closing pages uses the same large, spare mark in its own space. */
.invitation {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --trace-surface: var(--sig);
  --trace-outline: var(--ink);
}
.invitation > h2,
.invitation > .invitation-next {
  position: relative;
  z-index: 1;
}
.invitation-trace {
  position: absolute;
  width: clamp(130px, 18vw, 260px);
  right: -4%;
  bottom: -30%;
  opacity: 0.055;
  z-index: 0;
  pointer-events: none;
}
.invitation--paper {
  --trace-surface: #fff;
  --trace-outline: var(--sig);
}
.ftr {
  background: var(--ink);
  color: var(--paper);
  padding-block: 64px 36px;
}
.ftr .logo img {
  width: 180px;
  height: auto;
}
.ftr .mail,
.ftr .small {
  color: var(--paper);
}
.ftr nav a:hover,
.ftr .mail:hover {
  color: var(--sig);
}
.flow-footer {
  background: var(--paper);
}
@media (max-width: 1100px) {
  .trace-hero .hero-inner {
    gap: 40px;
  }
  .trace-hero h1 {
    font-size: clamp(52px, 6.5vw, 78px);
  }
}
@media (max-width: 760px) {
  .trace-hero .hero-inner {
    grid-template-columns: 1fr;
    gap: 44px;
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 60px;
  }
  .trace-hero h1 {
    font-size: clamp(52px, 10vw, 76px);
    max-width: 11ch;
  }
  .trace-hero .hero-message > p {
    max-width: 38ch;
    margin-top: 24px;
  }
  .trace-hero .hero-actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 28px;
  }
  .trace-hero-material {
    width: calc(100% + 2 * var(--gut));
    min-height: 0;
    aspect-ratio: 1.24;
    margin: 0 calc(-1 * var(--gut)) -60px;
  }
  .trace-hero-material img {
    object-position: 46% 50%;
  }

  .destination-copy h1 {
    font-size: clamp(46px, 9vw, 72px);
  }
  .catalog-copy {
    padding-block: 24px;
  }
  .ftr {
    padding-top: 44px;
  }
}
@media (max-width: 390px) {
  .hdr .logo img {
    width: 132px;
  }
  .trace-hero .hero-inner {
    padding-top: 40px;
    gap: 36px;
  }
  .trace-hero h1 {
    font-size: 48px;
  }
  .trace-hero .hero-actions {
    gap: 16px;
  }
}

.hdr .nav a[aria-current='page'] {
  background: transparent;
}
.hdr .hdr-cta {
  border-radius: 999px;
}

.trace-repeat-art {
  width: min(72%, 240px);
  margin: 30px auto;
  --trace-ink: var(--paper);
}

/* One shared material palette connects the page and its native illustrations. */
:root {
  --trace-paper-texture: url('/assets/brand/trace-paper-texture.webp');
  --trace-ink-texture: url('/assets/brand/trace-ink-texture.webp');
}
body {
  background-color: var(--paper);
  background-image: linear-gradient(#f5f2ebb8, #f5f2ebb8), var(--trace-paper-texture);
  background-size:
    auto,
    640px 640px;
}
.trace-hero.home-hero,
.home .value-section,
.home .services-section,
.home .packages-section,
.home .conversation-section {
  background: transparent;
}
.hdr {
  background: #f5f2ebf2;
  backdrop-filter: blur(12px);
}
/* Edges dissolve into the same paper surface, rather than framing a photograph. */
.trace-hero .hero-inner {
  position: relative;
}
.trace-hero-material {
  overflow: visible;
  margin-top: calc(-1 * clamp(72px, 9vw, 136px));
  margin-bottom: calc(-1 * clamp(72px, 9vw, 136px));
  margin-left: -36px;
  z-index: 0;
}
.trace-hero-material img {
  mask-image: linear-gradient(90deg, transparent, #000 20%);
  object-position: 42% 50%;
}
@supports (mask-composite: intersect) {
  .trace-hero-material img {
    mask-image:
      linear-gradient(90deg, transparent, #000 20%),
      linear-gradient(0deg, transparent, #000 13%, #000 88%, transparent);
    mask-composite: intersect;
  }
}
.trace-hero-copy {
  position: relative;
  z-index: 1;
}
/* Illustration plates are printed matter; their typography remains native and crisp. */
.trace-plate {
  position: relative;
  width: 100%;
  aspect-ratio: 1.25;
  container-type: inline-size;
  isolation: isolate;
  color: var(--ink);
  background: transparent;
  overflow: hidden;
  border-radius: 0;
}
.trace-plate-drawing {
  display: block;
  width: 100%;
  height: 76%;
  overflow: visible;
}
.trace-plate-caption {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 7%;
}
.trace-plate-caption > strong {
  display: block;
  font: 550 8cqw/1.02 var(--sans);
  letter-spacing: -0.055em;
}
.trace-plate-note {
  position: absolute;
  inset: auto 7% 4%;
  margin: 0;
  color: var(--graph);
  font: 450 2cqw/1.5 var(--mono);
  letter-spacing: 0.04em;
}
.service-art.trace-plate {
  height: auto;
  aspect-ratio: 1.25;
  border-radius: 0;
}
.home .service-item {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.home .service-motion {
  padding: 0;
}
.home .service-copy {
  padding: 26px 0 0;
}
.home .service-grid {
  gap: clamp(24px, 4vw, 56px);
}
.home .value-symbol {
  font: 450 11px/1.5 var(--mono);
  letter-spacing: 0.08em;
  color: var(--graph);
  background: none;
  width: auto;
  height: auto;
  margin-bottom: 20px;
}
/* The method is an editorial spread: a proof on the left, the reasoning on the right. */
.home .method-section {
  background: transparent;
  color: var(--ink);
}
.home .method-section .section-dek {
  color: var(--graph);
}
.idea-lab,
.lab-page .idea-lab {
  background: transparent;
}
.lab-tabs {
  background: transparent;
  gap: 0;
  padding-bottom: 26px;
}
.lab-tabs button {
  background: transparent;
  color: var(--graph);
  font-size: clamp(13px, 1.4vw, 19px);
  padding: 18px 12px 18px 0;
  min-height: 64px;
  border-radius: 0;
}
.lab-tabs button > span {
  color: var(--graph);
}
.lab-tabs button > i {
  display: none;
}
.lab-tabs button:hover {
  color: var(--ink);
  background: transparent;
}
.lab-tabs button[aria-pressed='true'] {
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sig);
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
}
.lab-tabs button:focus-visible {
  outline-color: var(--ink);
}
.lab-visual {
  background: transparent;
  padding: 0;
  align-items: stretch;
}
.trace-method-art {
  aspect-ratio: 1.15;
  height: 100%;
  min-height: 440px;
}
.trace-method-art .trace-plate-drawing {
  height: 66%;
}
.trace-method-art .trace-plate-caption {
  bottom: 13%;
}
.trace-method-art .trace-plate-caption > strong {
  font-size: 7.2cqw;
}
.trace-method-art .trace-plate-note {
  bottom: 6%;
  font-size: 1.8cqw;
}
.lab-narrative,
.about-belief,
.ftr,
.capabilities {
  background-color: var(--ink);
  background-image: var(--trace-ink-texture);
  background-size: 640px;
  color: var(--paper);
}
.lab-narrative .eyebrow,
.lab-narrative .method-output > span {
  color: #c8c5ba;
}
.lab-narrative .method-output > p {
  color: var(--paper);
}
.lab-controls {
  background: transparent;
  color: var(--ink);
  padding: 22px 0;
}
.lab-counter,
.method-control-hint {
  color: var(--graph);
}
.lab-controls button {
  color: var(--ink);
  border-color: #77736c;
}
.lab-controls button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
/* The same proof language appears in agency and editorial openings. */
.trace-agency-board {
  background: transparent;
  padding: 0;
  overflow: visible;
}
.trace-agency-art {
  aspect-ratio: 1.15;
}
.trace-agency-art .trace-plate-caption > strong {
  font-size: 6.4cqw;
}
.agency-benefit-art {
  font: 450 11px/1.5 var(--mono);
  color: var(--graph);
}
.trace-featured-art.bfeat-art {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.trace-editorial-art {
  height: 100%;
  min-height: 400px;
}
.trace-editorial-art .trace-plate-caption > strong {
  font-size: 6.4cqw;
}
.invitation:not(.invitation--paper) {
  background-color: var(--sig);
  background-image: var(--trace-paper-texture);
  background-blend-mode: multiply;
  background-size: 640px;
}
.service-insight,
.service-learning {
  background-image: var(--trace-paper-texture);
  background-blend-mode: multiply;
  background-size: 640px;
}
.service-learning {
  background-image: var(--trace-ink-texture);
  background-blend-mode: normal;
}
@media (max-width: 1000px) and (min-width: 761px) {
  .home .service-copy {
    padding: 20px 0 20px 32px;
  }
}
@media (max-width: 760px) {
  .trace-hero-material {
    margin-top: -12px;
    margin-bottom: -60px;
    margin-left: calc(-1 * var(--gut));
    aspect-ratio: 1.1;
  }
  .trace-hero-material img {
    object-position: 46% 50%;
    mask-image: linear-gradient(0deg, transparent, #000 13%, #000 86%, transparent);
    mask-composite: add;
  }
  .home .service-grid {
    gap: 48px;
  }
  .home .service-copy {
    padding: 24px 0 0;
  }
  .service-art.trace-plate {
    aspect-ratio: 1.35;
  }
  .lab-tabs {
    padding-bottom: 20px;
    gap: 3px;
  }
  .lab-tabs button {
    padding: 14px 3px;
    min-height: 64px;
    font-size: 13px;
    gap: 9px;
  }
  .lab-tabs button > span {
    font-size: 9px;
  }
  .lab-panel {
    gap: 0;
  }
  .lab-visual {
    min-height: 0;
    padding: 0;
  }
  .trace-method-art {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.15;
  }
  .lab-narrative {
    padding: 32px 26px;
    min-height: 0;
  }
  .trace-method-art .trace-plate-note {
    font-size: 2cqw;
  }
  .trace-editorial-art {
    min-height: 320px;
  }
}

.lab-panels,
.lab-panel,
.lab-visual,
.lab-narrative {
  border-radius: 0;
}
.trace-method-art {
  background: var(--paper) var(--trace-paper-texture) 50% / 640px;
}

/* Restore the explanatory draft. The finish is material, not another metaphor. */
body {
  background-image: linear-gradient(#f5f2ebd4, #f5f2ebd4), var(--trace-paper-texture);
}
.process-hero.home-hero {
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--sig);
  background-image: var(--trace-paper-texture);
  background-blend-mode: multiply;
  background-size: 640px;
}
.process-hero .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(900px, calc(100svh - var(--hh)));
  padding-block: clamp(48px, 5vw, 76px) 56px;
}
.process-hero .brand-ident {
  width: min(64%, 660px);
  margin: 0 auto 28px;
}
.process-hero .ident-wordmark {
  display: block;
  width: 100%;
  height: auto;
}
.process-hero .hero-message {
  display: block;
  padding: 0;
  text-align: center;
}
.process-hero h1 {
  max-width: none;
  font: 550 clamp(34px, 4.05vw, 62px)/1.04 var(--sans);
  letter-spacing: -0.055em;
  text-align: center;
  margin: 0;
}
.process-hero .hero-message > p {
  max-width: 660px;
  font: 400 18px/1.5 var(--sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 18px auto 0;
}
.process-hero .hero-actions {
  justify-content: center;
  margin-top: 26px;
  gap: 20px 30px;
}
.process-hero .hero-actions .btn {
  color: var(--paper);
  background: var(--ink);
  border-radius: 5px;
}
.process-hero .hero-actions .lnk {
  color: var(--ink);
}
.process-hero .creative-loop {
  width: min(100%, 1120px);
  margin: 54px auto 0;
}
.process-hero .loop-scene {
  height: 294px;
  position: relative;
}
.process-hero .loop-connections {
  display: block;
  z-index: 0;
}
.process-hero .connection-base,
.process-hero .feedback-base {
  stroke: #11111085;
  stroke-width: 1.2;
}
.process-hero .connection-head,
.process-hero .feedback-head {
  stroke: var(--ink);
  stroke-width: 1.5;
  fill: none;
}
.process-hero .hero-directions {
  width: 36%;
  height: 220px;
  top: 10px;
  z-index: 1;
}
.process-hero .direction {
  height: 216px;
  padding: 20px 18px;
  border-radius: 2px;
  box-shadow:
    0 14px 24px -18px #11111065,
    inset 0 0 0 1px #ffffff52;
  background-image: var(--trace-paper-texture);
  background-blend-mode: multiply;
  background-size: 640px;
}
.process-hero .direction > span {
  font: 400 11px/1.4 var(--mono);
}
.process-hero .direction > strong {
  font-size: clamp(16px, 1.85vw, 27px);
  font-weight: 550;
  line-height: 1.01;
  letter-spacing: -0.055em;
}
.process-hero .direction-a {
  background-color: var(--paper);
  transform: rotate(-7deg) translateY(12px);
}
.process-hero .direction-b {
  background-color: var(--ink);
  background-image: var(--trace-ink-texture);
  color: var(--paper);
  transform: translateY(-6px);
}
.process-hero .direction-b > svg {
  margin-block: 18px;
  fill: var(--paper);
}
.process-hero .direction-c {
  background-color: #e8dfcd;
  transform: rotate(7deg) translateY(12px);
}
.process-hero .direction-c > i {
  font-style: normal;
}
.process-hero .experiment-gate {
  left: 46%;
  top: 48px;
  width: 14%;
  border: 1.5px solid #111110d9;
  background: #f5f2eb1a;
  box-shadow: inset 0 0 0 8px #f5f2eb0d;
  z-index: 1;
}
.process-hero .experiment-gate::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #11111030;
  border-radius: 50%;
}
.process-hero .experiment-gate > div {
  font-size: clamp(24px, 2.3vw, 34px);
}
.process-hero .experiment-gate i {
  height: 40px;
}
.process-hero .hero-next-brief {
  width: 28%;
  top: 10px;
  height: 226px;
  padding: 28px;
  border-radius: 2px;
  color: var(--paper);
  background: var(--ink) var(--trace-ink-texture) center / 640px;
  box-shadow:
    0 12px 22px -18px #11111080,
    inset 0 0 0 1px #ffffff15;
  z-index: 1;
}
.process-hero .hero-next-brief > span {
  color: #d8d3c6;
  font: 400 12px/1.4 var(--mono);
}
.process-hero .hero-next-brief > strong {
  font: 500 clamp(28px, 3vw, 44px)/1 var(--sans);
  letter-spacing: -0.055em;
  margin-top: 20px;
}
.process-hero .hero-next-brief > i {
  font-style: normal;
}
.process-hero .creative-loop figcaption {
  grid-template-columns: 36% 34% 30%;
  font: 450 15px/1.5 var(--sans);
  letter-spacing: -0.025em;
  margin-top: 16px;
}
.process-hero .creative-loop figcaption > span {
  text-align: center;
  padding: 0;
}
.process-hero .mobile-connector,
.process-hero .replay-loop {
  display: none;
}
/* Stillness keeps the explanation readable; controls are the only moving parts. */
.process-hero *,
.process-hero *::before,
.process-hero *::after,
.service-motion .strategy-sheet > strong,
.service-motion .production-cut {
  animation: none !important;
}
.process-hero .loop-scene::before,
.process-hero .loop-scene::after {
  display: none;
}
/* The original service meanings, finished as printed objects. */
.service-art {
  container-type: inline-size;
  border-radius: 0;
  background-color: #eae5d9;
  background-image: var(--trace-paper-texture);
  background-blend-mode: multiply;
  background-size: 640px;
}
.production-art {
  background-color: var(--ink);
  background-image: var(--trace-ink-texture);
  background-blend-mode: normal;
}
.strategy-sheet {
  transform: rotate(-4deg);
}
.strategy-sheet > span {
  background: var(--paper) var(--trace-paper-texture) center / 640px;
  border-bottom: 1px solid #d7d2c7;
}
.strategy-sheet > strong {
  background: var(--sig) var(--trace-paper-texture) center / 640px;
  background-blend-mode: multiply;
  transform: translateX(3%);
}
.production-poster,
.production-cut,
.evidence-decision {
  border-radius: 0;
  box-shadow: 0 10px 20px -16px #11111050;
}
.production-poster {
  background: var(--paper) var(--trace-paper-texture) center / 640px;
}
.production-cut {
  background: var(--sig) var(--trace-paper-texture) center / 640px;
  background-blend-mode: multiply;
}
.evidence-trials i {
  border-radius: 0;
}
.evidence-decision {
  background: var(--paper) var(--trace-paper-texture) center / 640px;
}
/* Restore the artifacts that explain the method, including the written readout. */
.lab-visual {
  padding: clamp(24px, 3vw, 42px);
  background: #eae5d9 var(--trace-paper-texture) center / 640px;
}
.dig-sources,
.dig-brief,
.test-artifact,
.readout-artifact,
.concept-cards > div {
  border-radius: 0;
}
.dig-sources {
  background: var(--paper) var(--trace-paper-texture) center / 640px;
}
.dig-brief,
.concept-cards > div:nth-child(2),
.ab-pair > div:last-child,
.next-action {
  background: var(--sig) var(--trace-paper-texture) center / 640px;
  background-blend-mode: multiply;
}
.concept-cards > div:first-child,
.test-artifact,
.readout-artifact {
  background: var(--paper) var(--trace-paper-texture) center / 640px;
}
.concept-cards > div:nth-child(3) {
  background: #ded5c0 var(--trace-paper-texture) center / 640px;
  background-blend-mode: multiply;
}
.concept-map > p,
.repeat-artifact > .artifact-label,
.repeat-notes > span {
  color: var(--graph);
}
.repeat-ring {
  background: var(--ink) var(--trace-ink-texture) center / 640px;
  padding: 12px;
}
.repeat-notes {
  gap: 12px;
}
.agency-board {
  background: #eae5d9 var(--trace-paper-texture) center / 640px;
}
.agency-art {
  box-shadow: 0 10px 20px -17px #11111060;
}
.agency-art-a,
.agency-art-c {
  background-image: var(--trace-paper-texture);
  background-blend-mode: multiply;
  background-size: 640px;
}
.agency-art-b {
  background-image: var(--trace-ink-texture);
  background-size: 640px;
}
@media (min-width: 761px) and (max-width: 1000px) {
  .process-hero .loop-scene {
    height: 250px;
  }
  .process-hero .hero-directions,
  .process-hero .direction {
    height: 184px;
  }
  .process-hero .direction {
    padding: 16px 12px;
  }
  .process-hero .hero-next-brief {
    height: 194px;
    padding: 22px;
  }
  .process-hero .experiment-gate {
    top: 42px;
  }
  .process-hero .creative-loop figcaption {
    font-size: 14px;
  }
}
@media (max-width: 760px) {
  .process-hero .hero-inner {
    min-height: 0;
    padding-block: 42px 42px;
  }
  .process-hero .brand-ident {
    width: min(90%, 380px);
    margin-bottom: 26px;
  }
  .process-hero h1 {
    font-size: clamp(32px, 8.5vw, 48px);
    line-height: 1.03;
  }
  .process-hero .hero-message > p {
    font-size: 16px;
    margin-top: 20px;
    max-width: 35ch;
  }
  .process-hero .hero-actions {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 26px;
  }
  .process-hero .creative-loop {
    margin-top: 44px;
  }
  .process-hero .loop-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    grid-template-rows: 172px 180px;
    column-gap: 28px;
    row-gap: 32px;
    height: auto;
    padding-bottom: 12px;
  }
  .process-hero .hero-directions {
    position: relative;
    grid-column: 1 / -1;
    left: auto;
    top: auto;
    width: 100%;
    height: 172px;
  }
  .process-hero .direction {
    height: 160px;
    padding: 14px 12px;
    border-radius: 2px;
  }
  .process-hero .direction > span {
    font-size: 11px;
  }
  .process-hero .direction > strong {
    font-size: clamp(16px, 4.7vw, 22px);
  }
  .process-hero .direction-b > svg {
    width: 32px;
    height: 32px;
    margin: 12px auto;
  }
  .process-hero .direction-a > i {
    width: 56px;
    height: 56px;
  }
  .process-hero .direction-c > i {
    font-size: 64px;
  }
  .process-hero .experiment-gate {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    left: auto;
    top: auto;
    width: min(100%, 116px);
    aspect-ratio: 1;
  }
  .process-hero .experiment-gate > div {
    font-size: 26px;
    gap: 10px;
  }
  .process-hero .experiment-gate i {
    height: 34px;
  }
  .process-hero .hero-next-brief {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    top: auto;
    right: auto;
    width: 100%;
    height: 180px;
    padding: 20px;
  }
  .process-hero .hero-next-brief > span {
    font-size: 10px;
  }
  .process-hero .hero-next-brief > strong {
    font-size: 32px;
    margin-top: 16px;
  }
  .process-hero .hero-next-brief > i {
    font-size: 24px;
    right: 14px;
    bottom: 16px;
  }
  .process-hero .feedback-base,
  .process-hero .feedback-head {
    display: none;
  }
  .process-hero .creative-loop figcaption {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    gap: 6px;
    margin-top: 18px;
  }
  .process-hero .creative-loop figcaption > span + span::before {
    content: '→';
    margin-right: 10px;
  }
  .lab-visual {
    padding: 24px;
  }
}
.no-js .process-hero .loop-connections {
  display: none;
}

/* The final finish: consistent edges, readable type and responses without reflow. */
main :is(h1, h2, h3) {
  text-wrap: balance;
}
main :is(.section-dek, .destination-dek, .catalog-copy > p, .output-grid p) {
  text-wrap: pretty;
}
.brand-site :is(.value-grid, .service-copy, .package-card) h3 {
  letter-spacing: -0.04em;
  line-height: 1.12;
}
.home-section + .home-section {
  padding-top: clamp(28px, 3.4vw, 48px);
}
.home .section-dek {
  max-width: 45ch;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.6;
}
.home .value-grid article {
  padding-top: 8px;
}
.home .value-grid p {
  max-width: 36ch;
}
.home .service-copy > p {
  max-width: 38ch;
  line-height: 1.65;
}
.about-portrait,
.experience-grid article,
.about-belief,
.about-close,
.product-roadmap,
.agency-workbench,
.home .founder-note,
.lab-panel,
.case-surface,
.work-rail .study-preview,
.blog .cta-box,
.art:not(.legal) .cta-box {
  border-radius: 3px;
}
.about-portrait {
  padding: 12px;
}
.about-portrait figcaption {
  padding-inline: 0;
  margin-top: 14px;
}
.lnk,
.lnk:hover {
  gap: 8px;
}
.lnk {
  transition: color 180ms var(--ease);
}
.pcard a:hover {
  transform: none;
  box-shadow: none;
  background: var(--stone);
}
.catalog-action .arr,
.preview-action .arr,
.pc-m .arr {
  transition: transform 220ms var(--ease);
}
.bk-app,
.gate-form {
  accent-color: var(--ink);
}
.bk-app :is(input, textarea, select),
.gate-form :is(input, textarea) {
  transition:
    border-color 180ms,
    background-color 180ms;
}
.bk-app input::placeholder,
.bk-app textarea::placeholder,
.gate-form input::placeholder {
  color: #77736c;
  opacity: 1;
}
.ftr > .wrap {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 40px 48px;
  align-items: start;
}
.ftr .logo {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ftr .logo img {
  width: 148px;
  filter: invert(1);
}
.ftr nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 24px;
  max-width: 650px;
}
.ftr nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}
.ftr .mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
}
.ftr .small {
  grid-column: 1 / -1;
  width: 100%;
  margin: 8px 0 0;
  padding-top: 0;
  color: #c8c5ba;
  font-size: 11px;
  line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-link:hover .catalog-action .arr,
  .preview-link:hover .preview-action .arr,
  .pcard a:hover .pc-m .arr {
    transform: translateX(3px);
  }
}
@media (max-width: 1100px) {
  .ftr > .wrap {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px 40px;
  }
  .ftr .mail {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .ftr nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ftr .small {
    grid-row: 3;
    margin-top: 16px;
  }
}
@media (max-width: 760px) {
  .home .section-dek {
    font-size: 16px;
    margin-top: 20px;
  }
  .home-section + .home-section {
    padding-top: 16px;
  }
  .ftr > .wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ftr nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 16px;
    width: 100%;
  }
  .ftr .mail {
    grid-row: 3;
    grid-column: 1;
    justify-self: start;
  }
  .ftr .small {
    grid-row: 4;
    margin: 0;
    gap: 16px 24px;
  }
}


.cr{position:relative;width:100%;container-type:inline-size;overflow:hidden;isolation:isolate;-webkit-font-smoothing:antialiased}
.cr *{box-sizing:border-box}
.r45{aspect-ratio:4/5}.r916{aspect-ratio:9/16}.r11{aspect-ratio:1/1}
.cr .tag{position:absolute;z-index:20;top:3.6cqw;left:3.6cqw;font:600 2.7cqw/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:1.6cqw 2.2cqw;border-radius:1.4cqw;background:rgba(17,17,16,.78);color:#F5F2EB;backdrop-filter:blur(6px)}
.cr .tag.lt{background:rgba(255,255,255,.82);color:#111110}
.cr .tag.rt{left:auto;right:3.6cqw}
.cr .tag.bt{top:auto;left:auto;bottom:4.6cqw;right:5cqw}
.grainy::after{content:"";position:absolute;inset:0;z-index:15;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background-image:url(/assets/grain.png);background-size:128px}

/* ---------- 1. OYLA comparison ---------- */
.oyla{background:linear-gradient(170deg,#F4E9E1,#EBDACD);color:#2B1D17;font-family:var(--serif)}
.oyla h4{margin:0;position:absolute;top:13cqw;left:6cqw;right:6cqw;font:500 8.6cqw/0.98 var(--serif);letter-spacing:-.03em}
.oyla h4 em{font-style:italic;font-weight:400;color:#9A5B3F}
.oyla .cmp{position:absolute;left:5cqw;right:5cqw;bottom:6cqw;top:42cqw;display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.oyla .cc{border-radius:4cqw;padding:4cqw;position:relative;display:flex;flex-direction:column}
.oyla .cc.old{background:rgba(43,29,23,.06)}
.oyla .cc.new{background:#2B1D17;color:#F4E9E1;box-shadow:0 3cqw 6cqw -2cqw rgba(43,29,23,.45)}
.oyla .lbl{font:600 2.6cqw/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:3cqw}
.oyla .bottles{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:8cqw;gap:2.4cqw 1.6cqw;align-items:end;height:18.4cqw;margin-bottom:2cqw}
.oyla .bottles i{display:block;border-radius:1cqw 1cqw .8cqw .8cqw;background:linear-gradient(90deg,#CDBFB4,#E3D7CD 40%,#C4B5A9);position:relative}
.oyla .bottles i::before{content:"";position:absolute;left:25%;right:25%;top:-1.6cqw;height:1.6cqw;border-radius:.5cqw .5cqw 0 0;background:#A99A8E}
.oyla .hb{height:18.4cqw;margin-bottom:2cqw;display:flex;justify-content:center;align-items:flex-end}
.oyla .drop{width:8cqw;height:13cqw;border-radius:1.6cqw;background:linear-gradient(90deg,#B4612F,#E79A5B 45%,#A4542A);position:relative;box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.12)}
.oyla .drop::before{content:"";position:absolute;left:1.8cqw;right:1.8cqw;top:-3.8cqw;height:4cqw;border-radius:2cqw 2cqw .4cqw .4cqw;background:#F4E9E1}
.oyla .drop::after{content:"OYLA";position:absolute;left:0;right:0;top:5cqw;text-align:center;font:600 1.5cqw/1 var(--sans);letter-spacing:.12em;color:#2B1D17;background:#F4E9E1;padding:.6cqw 0}
.oyla ul{list-style:none;margin:0;padding:0;font:500 3.2cqw/1.2 var(--sans);letter-spacing:-.01em}
.oyla li{display:flex;gap:1.8cqw;align-items:center;margin-top:2.1cqw}
.oyla li b{flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;position:relative}
.oyla .old li b{background:rgba(43,29,23,.14)}
.oyla .old li b::before,.oyla .old li b::after{content:"";position:absolute;left:50%;top:50%;width:1.9cqw;height:.42cqw;background:#2B1D17;border-radius:1cqw;transform:translate(-50%,-50%) rotate(45deg)}
.oyla .old li b::after{transform:translate(-50%,-50%) rotate(-45deg)}
.oyla .old li{opacity:.7;text-decoration:line-through;text-decoration-thickness:.25cqw;text-decoration-color:rgba(43,29,23,.35)}
.oyla .new li b{background:#E79A5B}
.oyla .new li b::before{content:"";position:absolute;left:1.15cqw;top:.7cqw;width:1cqw;height:1.8cqw;border:solid #2B1D17;border-width:0 .45cqw .45cqw 0;transform:rotate(45deg)}

/* ---------- 2. MORROW offer ---------- */
.morrow{background:radial-gradient(120% 80% at 70% 30%,#5A3420 0%,#2A1810 55%,#170D08 100%);color:#F6E7D3}
.morrow .kick{position:absolute;top:14cqw;left:7cqw;font:600 2.8cqw/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#E9B37A}
.morrow h4{position:absolute;margin:0;top:20cqw;left:7cqw;width:60cqw;font:400 12.5cqw/.92 var(--serif);letter-spacing:-.02em}
.morrow h4 i{color:#FFB46B}
.morrow .bag{position:absolute;right:-2cqw;bottom:16cqw;width:46cqw;height:58cqw;transform:rotate(8deg);border-radius:2cqw 2cqw 3cqw 3cqw;background:linear-gradient(95deg,#C9B49A,#EFE2CF 35%,#D9C6AE 70%,#B39C80);box-shadow:-4cqw 6cqw 10cqw rgba(0,0,0,.55)}
.morrow .bag::before{content:"";position:absolute;left:0;right:0;top:0;height:7cqw;border-radius:2cqw 2cqw 0 0;background:repeating-linear-gradient(90deg,#B49C80 0 1cqw,#CDB89D 1cqw 2cqw)}
.morrow .bag .lb{position:absolute;left:5cqw;right:5cqw;top:14cqw;bottom:9cqw;background:#1E120C;color:#F6E7D3;border-radius:1cqw;padding:4cqw 3.5cqw;display:flex;flex-direction:column}
.morrow .bag .lb b{font:400 7cqw/1 var(--serif);letter-spacing:-.01em}
.morrow .bag .lb small{font:500 2cqw/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#E9B37A;margin-top:2cqw}
.morrow .bag .lb .sun{margin-top:auto;width:11cqw;height:5.5cqw;border-radius:11cqw 11cqw 0 0;background:linear-gradient(#FFB46B,#E2762F)}
.morrow .stk{position:absolute;right:30cqw;top:46cqw;width:19cqw;height:19cqw;border-radius:50%;background:#FFB46B;color:#2A1810;display:grid;place-items:center;text-align:center;font:700 3.2cqw/1 var(--sans);letter-spacing:-.02em;transform:rotate(-12deg);box-shadow:0 2cqw 4cqw rgba(0,0,0,.4);z-index:3}
.morrow .cta{position:absolute;left:7cqw;bottom:7cqw;display:flex;align-items:center;gap:3cqw}
.morrow .cta span{background:#F6E7D3;color:#1E120C;font:600 3.4cqw/1 var(--sans);padding:3cqw 4.6cqw;border-radius:10cqw}
.morrow .cta small{font:500 2.3cqw/1.3 var(--sans);opacity:.6;width:22cqw}

/* ---------- 3. HUSHWELL UGC frame ---------- */
.hush{background:radial-gradient(60% 40% at 82% 22%,rgba(255,170,90,.55),transparent 70%),linear-gradient(180deg,#1A2236 0%,#232C44 45%,#3B3F57 100%);color:#fff}
.hush .bed{position:absolute;left:-10cqw;right:-10cqw;bottom:-6cqw;height:80cqw;background:linear-gradient(175deg,#C9CCD8,#8D93A8);border-radius:40cqw 40cqw 0 0;filter:blur(.4cqw)}
.hush .pil{position:absolute;bottom:52cqw;width:52cqw;height:24cqw;border-radius:12cqw;background:radial-gradient(70% 60% at 45% 35%,#FFFFFF,#D9DCE6 60%,#AEB3C4);box-shadow:0 3cqw 6cqw rgba(10,14,30,.4)}
.hush .p1{left:-4cqw;transform:rotate(-6deg)}.hush .p2{right:-6cqw;transform:rotate(5deg);bottom:56cqw;filter:brightness(.92)}
.hush .lamp{position:absolute;right:9cqw;top:30cqw;width:14cqw;height:12cqw;background:linear-gradient(#FFD8A8,#F19A4C);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);box-shadow:0 0 12cqw #FFB060}
.hush .clock{position:absolute;left:8cqw;top:36cqw;padding:1.8cqw 3cqw;border-radius:1.6cqw;background:#0B0D14;font:500 6.4cqw/1 var(--mono);color:#FF4D3A;text-shadow:0 0 2.4cqw rgba(255,77,58,.8);letter-spacing:.02em}
.hush .cap{position:absolute;left:8cqw;right:16cqw;top:62cqw;text-align:center;z-index:5}
.hush .cap span{display:inline;background:#fff;color:#111;font:700 5.6cqw/1.42 var(--sans);letter-spacing:-.01em;padding:.6cqw 2cqw;border-radius:1.4cqw;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hush .rail{position:absolute;right:3.5cqw;bottom:30cqw;display:flex;flex-direction:column;gap:5cqw;z-index:5}
.hush .rail i{width:8.5cqw;height:8.5cqw;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(4px);display:block;position:relative}
.hush .rail i:first-child{background:#fff}
.hush .rail i:first-child::after{content:"";position:absolute;inset:1cqw;border-radius:50%;background:linear-gradient(135deg,#8C93B5,#2F3754)}
.hush .who{position:absolute;left:5cqw;bottom:13cqw;right:18cqw;z-index:5;font:600 3.4cqw/1.3 var(--sans);text-shadow:0 .3cqw 1cqw rgba(0,0,0,.4)}
.hush .who small{display:block;font-weight:400;opacity:.85;margin-top:1cqw}
.hush .bar{position:absolute;left:0;right:0;bottom:0;height:9cqw;background:linear-gradient(transparent,rgba(0,0,0,.5));z-index:4}
.hush .bar::after{content:"";position:absolute;left:5cqw;right:5cqw;bottom:4cqw;height:.7cqw;border-radius:1cqw;background:linear-gradient(90deg,#fff 34%,rgba(255,255,255,.3) 34%)}
.hush .snd{position:absolute;top:4cqw;right:4cqw;z-index:6;font:600 2.6cqw/1 var(--sans);background:rgba(0,0,0,.4);padding:1.6cqw 2.4cqw;border-radius:5cqw}

/* ---------- 4. DAYBREAK notes app ---------- */
.notes{background:#FBF9F3;color:#1C1C1E;font-family:var(--sans)}
.notes .top{position:absolute;top:0;left:0;right:0;height:13cqw;display:flex;align-items:flex-end;justify-content:space-between;padding:0 5cqw 2.4cqw;font:500 3.8cqw/1 var(--sans);color:#886000}
.notes .top b{font-weight:500}
.notes .top span{display:flex;gap:3.4cqw}
.notes .top span i{width:4.6cqw;height:4.6cqw;border:.5cqw solid #886000;border-radius:50%;display:block}
.notes .body{position:absolute;top:16cqw;left:6cqw;right:6cqw}
.notes .dt{font:400 2.8cqw/1 var(--sans);color:#69696D;text-align:center;margin-bottom:4cqw}
.notes h4{margin:0 0 3.4cqw;font:700 7.4cqw/1.08 var(--sans);letter-spacing:-.025em}
.notes p{margin:0 0 3cqw;font:400 4.1cqw/1.42 var(--sans);letter-spacing:-.005em;color:#2C2C2E}
.notes .ck{display:flex;gap:2.6cqw;align-items:center;font:400 4.1cqw/1.3 var(--sans);margin-bottom:2.2cqw}
.notes .ck b{flex:none;width:5cqw;height:5cqw;border-radius:50%;background:#E0A400;position:relative}
.notes .ck b::after{content:"";position:absolute;left:1.75cqw;top:.9cqw;width:1.2cqw;height:2.3cqw;border:solid #fff;border-width:0 .55cqw .55cqw 0;transform:rotate(45deg)}
.notes .ck.off b{background:none;border:.45cqw solid #C7C7CC}.notes .ck.off b::after{display:none}
.notes .ck.on{color:#69696D;text-decoration:line-through}
.notes .mark{background:linear-gradient(transparent 55%,#FFE58A 55%)}
.notes .sig{position:absolute;bottom:5cqw;left:6cqw;right:6cqw;display:flex;align-items:center;gap:2.4cqw;font:600 3cqw/1 var(--sans);color:#3D5A2A}
.notes .sig i{width:6cqw;height:6cqw;border-radius:50%;background:conic-gradient(from 200deg,#8BC34A,#3D7A2A,#C6E27A,#8BC34A);display:block}

/* ---------- 5. NORTHLINE post-it on denim ---------- */
.denim{background:
 repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 .5cqw,transparent .5cqw 1.2cqw),
 repeating-linear-gradient(-45deg,rgba(0,0,0,.12) 0 .4cqw,transparent .4cqw 1cqw),
 radial-gradient(90% 70% at 30% 20%,#5A7BAA,#33507A 60%,#22385A);}
.denim .seam{position:absolute;top:-5cqw;bottom:-5cqw;left:64cqw;width:7cqw;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.07) 40%,rgba(0,0,0,.2));transform:rotate(4deg)}
.denim .seam::before,.denim .seam::after{content:"";position:absolute;top:0;bottom:0;width:0;border-left:.55cqw dashed #D9A45A}
.denim .seam::before{left:1.2cqw}.denim .seam::after{right:1.2cqw}
.denim .pocket{position:absolute;left:8cqw;bottom:-6cqw;width:50cqw;height:44cqw;border:.55cqw dashed #D9A45A;border-radius:0 0 6cqw 6cqw;border-top:none;box-shadow:inset 0 2cqw 4cqw rgba(0,0,0,.25)}
.denim .rivet{position:absolute;width:3.4cqw;height:3.4cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F1D19A,#9A6A2E);box-shadow:0 .4cqw .8cqw rgba(0,0,0,.4)}
.denim .patch{position:absolute;right:7cqw;bottom:8cqw;padding:2.2cqw 3.4cqw;background:linear-gradient(#A8754A,#7E5332);color:#F3DEC2;font:700 3cqw/1 var(--sans);letter-spacing:.16em;border-radius:1cqw;box-shadow:inset 0 0 0 .5cqw rgba(0,0,0,.15),0 1cqw 2cqw rgba(0,0,0,.3)}
.denim .postit{position:absolute;left:12cqw;top:15cqw;width:60cqw;height:56cqw;padding:7cqw 6cqw;background:linear-gradient(170deg,#FFF09A,#FFE36A);transform:rotate(-5deg);box-shadow:0 4cqw 6cqw -2cqw rgba(0,0,0,.5),0 .5cqw 1cqw rgba(0,0,0,.2);font:400 9.4cqw/1.05 'Permanent Marker',cursive;color:#1C2433;z-index:3}
.denim .postit::before{content:"";position:absolute;left:0;right:0;top:0;height:10cqw;background:linear-gradient(rgba(0,0,0,.05),transparent)}
.denim .postit u{text-decoration:none;background:linear-gradient(transparent 70%,rgba(255,90,31,.55) 70% 88%,transparent 88%)}

/* ---------- 6. BRISK split-screen ---------- */
.brisk{display:grid;grid-template-columns:1fr 1fr;background:#fff}
.brisk .l{position:relative;background:radial-gradient(18cqw 10cqw at 30% 60%,rgba(120,100,70,.35),transparent),radial-gradient(14cqw 8cqw at 70% 35%,rgba(110,95,70,.3),transparent),linear-gradient(#C9C6BE,#ABA79E);filter:saturate(.6)}
.brisk .r{position:relative;background:radial-gradient(70% 50% at 50% 40%,#FFFFFF,#DDF3EA 60%,#BFE8D8)}
.brisk .lt{position:absolute;top:13cqw;left:5cqw;right:3cqw;font:500 4.8cqw/1.05 var(--sans);letter-spacing:-.03em;color:#4A4740}
.brisk .rt{position:absolute;top:12cqw;left:6cqw;font:800 11cqw/1 var(--sans);letter-spacing:-.06em;color:#0A5C45}
.brisk .bt{position:absolute;bottom:14cqw;left:50%;transform:translateX(-50%);width:15cqw;height:34cqw}
.brisk .bt .b{position:absolute;bottom:0;left:0;right:0;height:25cqw;border-radius:3cqw 3cqw 2.4cqw 2.4cqw}
.brisk .bt .n{position:absolute;bottom:24cqw;left:3.5cqw;width:8cqw;height:4cqw}
.brisk .bt .h{position:absolute;bottom:27.4cqw;left:1cqw;width:14cqw;height:6.5cqw;border-radius:2cqw 4cqw 1cqw 1cqw}
.brisk .l .b{background:linear-gradient(90deg,#8F8B83,#B6B2A9 40%,#8A867E)}.brisk .l .n,.brisk .l .h{background:#76726B}
.brisk .r .b{background:linear-gradient(90deg,#0B7A5B,#1FC995 40%,#0A6E52);box-shadow:0 5cqw 8cqw -3cqw rgba(10,92,69,.55)}
.brisk .r .b::after{content:"BRISK";position:absolute;left:0;right:0;top:9cqw;text-align:center;font:800 2.4cqw/1 var(--sans);letter-spacing:.1em;color:#fff}
.brisk .r .n{background:#E8F7F0}.brisk .r .h{background:#F5FFFB;box-shadow:inset 0 -1cqw 0 #CDEBDF}
.brisk .mist{position:absolute;bottom:38cqw;left:-4cqw;width:20cqw;height:12cqw;background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent);filter:blur(1cqw)}
.brisk .div{position:absolute;top:0;bottom:0;left:50%;width:.6cqw;margin-left:-.3cqw;background:#fff;z-index:4}
.brisk .div::after{content:"";position:absolute;top:50%;left:50%;width:9cqw;height:9cqw;margin:-4.5cqw;border-radius:50%;background:#fff;box-shadow:0 1cqw 3cqw rgba(0,0,0,.25)}
.brisk .div::before{content:"";position:absolute;top:50%;left:50%;z-index:2;width:4cqw;height:1.6cqw;transform:translate(-50%,-50%);border-left:1.2cqw solid #333;border-right:1.2cqw solid #333;box-sizing:border-box;clip-path:polygon(0 50%,30% 0,30% 100%,0 50%,100% 50%,70% 0,70% 100%,100% 50%)}
.brisk .bf{position:absolute;bottom:4cqw;left:0;right:0;text-align:center;font:600 2.6cqw/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.brisk .l .bf{color:#5A574F}.brisk .r .bf{color:#0A5C45}

/* ---------- 7. CORESTUDIO offer ---------- */
.core{background:linear-gradient(160deg,#E7E3F7,#CFC7EE);color:#231B4A}
.core .arch{position:absolute;right:-8cqw;bottom:-4cqw;width:60cqw;height:76cqw;border-radius:30cqw 30cqw 0 0;background:linear-gradient(#B7AAE8,#9C8BE0)}
.core .arch::after{content:"";position:absolute;left:10cqw;right:10cqw;top:10cqw;bottom:0;border-radius:20cqw 20cqw 0 0;background:linear-gradient(#DCD5F5,#C6BCEF)}
.core .ball{position:absolute;right:16cqw;bottom:10cqw;width:22cqw;height:22cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFD4B8,#F08A5D 60%,#C9603A);box-shadow:0 3cqw 5cqw rgba(35,27,74,.35);z-index:2}
.core .loc{position:absolute;top:13cqw;left:7cqw;font:600 2.7cqw/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.core h4{position:absolute;margin:0;top:19cqw;left:7cqw;right:8cqw;font:700 12.6cqw/.9 var(--sans);letter-spacing:-.045em;z-index:3}
.core h5{position:absolute;margin:0;top:61cqw;left:7cqw;font:400 8cqw/1 var(--serif);font-style:italic;z-index:3}
.core .cta{position:absolute;left:7cqw;bottom:8cqw;z-index:3;background:#231B4A;color:#fff;font:600 3.4cqw/1 var(--sans);padding:3.2cqw 5cqw;border-radius:10cqw}

/* ---------- 8. KIBBLO listicle carousel ---------- */
.kib{background:#F6DFB8;color:#3A2A12}
.kib .n{position:absolute;top:12cqw;left:7cqw;font:700 3cqw/1 var(--mono);letter-spacing:.08em;background:#3A2A12;color:#F6DFB8;padding:1.6cqw 2.4cqw;border-radius:10cqw}
.kib h4{position:absolute;margin:0;top:21cqw;left:7cqw;right:8cqw;font:800 10.2cqw/.95 var(--sans);letter-spacing:-.04em}
.kib h4 span{color:#C2491D}
.kib ol{position:absolute;left:7cqw;right:40cqw;top:57cqw;margin:0;padding:0;list-style:none;font:500 3.5cqw/1.25 var(--sans);counter-reset:k}
.kib li{counter-increment:k;display:flex;gap:2cqw;margin-bottom:2.4cqw}
.kib li::before{content:counter(k);flex:none;width:4.8cqw;height:4.8cqw;border-radius:50%;border:.4cqw solid #3A2A12;display:grid;place-items:center;font:700 2.6cqw/1 var(--mono)}
.kib li.blur{filter:blur(.8cqw);opacity:.6}
.kib .bowl{position:absolute;right:-4cqw;bottom:10cqw;width:46cqw;height:20cqw;border-radius:0 0 24cqw 24cqw;background:linear-gradient(90deg,#C2491D,#E8703F 45%,#B13F16);box-shadow:0 4cqw 6cqw -2cqw rgba(58,42,18,.5)}
.kib .bowl::before{content:"";position:absolute;left:0;right:0;top:-5cqw;height:9cqw;border-radius:50%;background:radial-gradient(closest-side,#8C5A2B,#6B4220);box-shadow:inset 0 0 0 1.2cqw #E8703F}
.kib .dots{position:absolute;bottom:5cqw;left:0;right:0;display:flex;justify-content:center;gap:1.4cqw}
.kib .dots i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:rgba(58,42,18,.25)}.kib .dots i:first-child{background:#3A2A12;width:4.4cqw;border-radius:2cqw}
.kib .sw{position:absolute;right:6cqw;top:12cqw;font:500 2.7cqw/1 var(--sans);opacity:.7}

/* ---------- 9. REPWISE demographic callout ---------- */
.rep{background:radial-gradient(80% 60% at 80% 100%,#3D2BFF55,transparent 60%),#0E0F14;color:#F4F4F6}
.rep h4{position:absolute;margin:0;top:12cqw;left:7cqw;right:7cqw;font:800 10.4cqw/.94 var(--sans);letter-spacing:-.055em}
.rep h4 span{color:#C8FF4D}
.rep .ph{position:absolute;left:24cqw;right:24cqw;top:56cqw;height:70cqw;border-radius:6cqw;background:#1B1D26;border:.6cqw solid #2E3140;padding:5cqw 4cqw;box-shadow:0 6cqw 10cqw rgba(0,0,0,.6)}
.rep .ph b{display:block;font:700 3.4cqw/1.1 var(--sans);margin-bottom:3cqw}
.rep .ph .rw{height:5.4cqw;border-radius:1.6cqw;background:#262938;margin-bottom:1.8cqw;position:relative;overflow:hidden}
.rep .ph .rw::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,50%);background:linear-gradient(90deg,#3D2BFF,#8B7BFF)}
.rep .ph .ring{width:20cqw;height:20cqw;border-radius:50%;margin:1cqw auto 4cqw;background:conic-gradient(#C8FF4D 0 68%,#262938 68%);-webkit-mask:radial-gradient(closest-side,transparent 72%,#000 73%);mask:radial-gradient(closest-side,transparent 72%,#000 73%)}
.rep .rsub{position:absolute;left:7cqw;right:7cqw;top:42cqw;font:500 3.7cqw/1.3 var(--sans);color:#A7A9B6}

/* ---------- 10. LEDGERLY founder phone-shot ---------- */
.led{background:linear-gradient(180deg,#C9B79C 0%,#A99474 50%,#6E5E48 100%);color:#fff}
.led .win{position:absolute;left:-6cqw;top:6cqw;width:52cqw;height:70cqw;background:linear-gradient(180deg,#F6EEDF,#E8DCC6);filter:blur(1.4cqw);opacity:.9}
.led .shelf{position:absolute;right:-4cqw;top:26cqw;width:40cqw;height:3cqw;background:#5A4A36;filter:blur(.6cqw)}
.led .plant{position:absolute;right:10cqw;top:12cqw;width:16cqw;height:16cqw;border-radius:50% 50% 40% 40%;background:#5E7A47;filter:blur(1.2cqw)}
.led .person{position:absolute;left:16cqw;right:16cqw;bottom:0;height:120cqw}
.led .person .hd{position:absolute;left:50%;top:0;width:30cqw;height:37cqw;margin-left:-15cqw;border-radius:46% 46% 44% 44%;background:radial-gradient(70% 60% at 40% 35%,#C98E6B,#8E5A3E);filter:blur(2cqw)}
.led .person .hr{position:absolute;left:50%;top:-2cqw;width:33cqw;height:20cqw;margin-left:-16.5cqw;border-radius:50% 50% 30% 30%;background:#2B1E17;filter:blur(1.8cqw)}
.led .person .bd{position:absolute;left:0;right:0;top:32cqw;bottom:0;border-radius:30cqw 30cqw 0 0;background:linear-gradient(#2F4A5E,#1E3242);filter:blur(2cqw)}
.led .cap{position:absolute;left:7cqw;right:7cqw;top:100cqw;z-index:5;text-align:center;font:800 6.6cqw/1.12 var(--sans);letter-spacing:-.02em;text-shadow:0 .5cqw 2cqw rgba(0,0,0,.6)}
.led .cap span{color:#FFE14D}
.led .rec{position:absolute;top:4cqw;right:4cqw;z-index:6;display:flex;align-items:center;gap:1.4cqw;font:600 2.6cqw/1 var(--sans);background:rgba(0,0,0,.35);padding:1.6cqw 2.4cqw;border-radius:5cqw}
.led .rec i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#FF3B30}
.led .lt{position:absolute;left:5cqw;bottom:12cqw;z-index:6;font:600 3.4cqw/1.3 var(--sans)}
.led .lt small{display:block;font-weight:400;opacity:.85}
.led .bar{position:absolute;left:5cqw;right:5cqw;bottom:5cqw;height:.7cqw;border-radius:1cqw;background:linear-gradient(90deg,#fff 22%,rgba(255,255,255,.3) 22%);z-index:6}

/* 4:5 crops of the 9:16 frames */
.r45.led .cap{top:auto;bottom:16cqw;font-size:6cqw}.r45.led .lt{display:none}.r45.led .person{height:110cqw}
.r45.hush .cap{top:50cqw}.r45.hush .clock{top:30cqw}
/* ---------- feed chrome ---------- */
.post{background:#fff;border-radius:14px;overflow:hidden;color:#111;font-family:'Geist',var(--sans)}
.post .ph{display:flex;align-items:center;gap:8px;padding:9px 10px}
.post .av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 11px/1 var(--sans);color:#fff}
.post .nm{font:600 12px/1.1 var(--sans);letter-spacing:-.01em}
.post .nm small{display:block;font-weight:400;color:#686868;font-size:10.5px;margin-top:2px}
.post .dots3{margin-left:auto;width:14px;height:3px;background:radial-gradient(circle,#999 1.4px,transparent 1.6px) 0 0/5px 3px repeat-x}
.post .pf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;background:#F4F4F2}
.post .pf b{font:600 11.5px/1.2 var(--sans);letter-spacing:-.01em;display:block}
.post .pf small{font:400 10px/1.2 var(--sans);color:#686868;display:block;margin-bottom:2px;text-transform:lowercase}
.post .pf span{flex:none;font:600 11px/1 var(--sans);background:#E6E6E3;padding:7px 10px;border-radius:6px}