/* Kyndra Studios website. Editorial grid, Kyndra orange, Schibsted Grotesk and the logo bar.
   Written from scratch for Kyndra Studios. */

@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-var.woff") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #111110;
  --ink-2: #1A1A18;
  --paper: #F2F1EE;
  --white: #FBFBF9;
  --line-l: rgba(17, 17, 16, .09);
  --line-d: rgba(242, 241, 238, .09);
  --or: #DD460E;          /* accent: bars, dots, large type */
  --or-fill: #C8400C;     /* fills with white text (AA) */
  --or-on-dark: #EE6A33;  /* small orange text on dark (AA) */
  --or-on-light: #B83A0A; /* small orange text on light (AA) */
  --muted-l: #5E5D58;
  --muted-d: rgba(242, 241, 238, .64);
  --pad: clamp(16px, 2vw, 28px);
  --max: 1440px;
  --hdr: 64px;
  --sec: clamp(96px, 11vw, 168px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { font-family: var(--display); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--or-fill); color: #fff; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { left: 8px; }

/* ---------- layout + grid lines ---------- */
.wrap { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sec { position: relative; isolation: isolate; }
.sec > .wrap { z-index: 1; }
.dark { background: var(--ink); color: var(--white); }
.light { background: var(--paper); color: var(--ink); }
.white { background: var(--white); color: var(--ink); }
.gl { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gl .wrap { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.gl i { border-left: 1px solid var(--line-l); }
.gl i:last-child { border-right: 1px solid var(--line-l); }
.dark .gl i { border-color: var(--line-d); }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .gl .wrap { grid-template-columns: repeat(2, 1fr); }
  .gl i:nth-child(n+3) { display: none; }
  .gl i:nth-child(2) { border-right: 1px solid var(--line-l); }
  .dark .gl i:nth-child(2) { border-right-color: var(--line-d); }
}

/* ---------- type ---------- */
.d1, .d2, .d3, .d4 { font-family: var(--display); font-weight: 700; letter-spacing: -.065em; line-height: .9; text-wrap: balance; }
.d1 { font-size: clamp(54px, 9.4vw, 152px); }
.d2 { font-size: clamp(46px, 7.2vw, 116px); }
.d3 { font-size: clamp(34px, 4.4vw, 68px); letter-spacing: -.055em; line-height: .95; }
.d4 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.04em; line-height: 1.05; }
.d1 em, .d2 em, .d3 em { font-style: normal; color: var(--or); }
.lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; max-width: 46ch; }
.muted { color: var(--muted-l); }
.dark .muted { color: var(--muted-d); }
.small { font-size: 13px; line-height: 1.45; }
.script { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--or); letter-spacing: -.01em; line-height: 1; }

/* section label: the logo bar + plain words, with optional meta on the right */
.lbl-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 22px 0; font-size: 13px; font-weight: 600; }
.lbl { display: inline-flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 600; }
.lbl::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--or); }
.lbl-meta { color: var(--muted-l); font-weight: 500; }
.dark .lbl-meta { color: var(--muted-d); }

/* ---------- buttons, tags, links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 3px; border: 1px solid transparent; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--or-fill); }
.btn:active { transform: translateY(1px); }
.btn.or { background: var(--or-fill); }
.btn.or:hover { background: var(--ink); }
.dark .btn.or:hover { background: var(--white); color: var(--ink); }
.btn.ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn.ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.dark .btn { background: var(--white); color: var(--ink); }
.dark .btn:hover { background: var(--or-fill); color: #fff; }
.dark .btn.or { background: var(--or-fill); color: #fff; }
.dark .btn.ghost { background: transparent; color: var(--white); border-color: rgba(242,241,238,.4); }
.dark .btn.ghost:hover { background: var(--white); color: var(--ink); }
.btn .ar { transition: transform .25s var(--ease); }
.btn:hover .ar { transform: translateX(3px); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 3px; background: rgba(17,17,16,.06); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dark .tag { background: rgba(242,241,238,.1); }
.ul { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(17,17,16,.35); transition: text-decoration-color .2s; }
.ul:hover { text-decoration-color: currentColor; }
.dark .ul { text-decoration-color: rgba(242,241,238,.35); }
.dark .ul:hover { text-decoration-color: currentColor; }
.sample { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 3px; background: #FFE9A8; color: #3A2C00; white-space: nowrap; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); color: var(--white); transition: color .3s var(--ease), background .3s var(--ease); }
.hdr::before { content: ""; position: absolute; inset: 0; background: rgba(17,17,16,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .3s var(--ease); }
.hdr.scrolled::before { opacity: 1; }
.hdr.on-light { color: var(--ink); }
.hdr.on-light::before { background: rgba(242,241,238,.82); }
.hdr .wrap { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.logo { display: inline-grid; gap: 4px; text-decoration: none; width: max-content; }
.logo b { font-weight: 800; font-size: 19px; letter-spacing: .01em; line-height: .9; }
.logo i { height: 3px; border-radius: 2px; background: var(--or); }
.logo small { display: flex; justify-content: space-between; font-size: 8.5px; font-weight: 700; line-height: 1; opacity: .8; }
.hdr nav { grid-column: 2 / 4; display: flex; gap: clamp(14px, 2.2vw, 34px); font-size: 13.5px; font-weight: 600; }
.hdr nav a { text-decoration: none; opacity: .78; transition: opacity .2s; position: relative; }
.hdr nav a:hover, .hdr nav a[aria-current] { opacity: 1; }
.hdr nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--or); border-radius: 2px; }
.hdr nav sup { font-size: 10px; color: var(--or-on-dark); margin-left: 3px; }
.hdr.on-light nav sup { color: var(--or-on-light); }
.hdr .hdr-cta { justify-self: end; display: flex; gap: 10px; align-items: center; }
.hdr .btn { min-height: 38px; padding: 0 16px; font-size: 13px; background: var(--or-fill); color: #fff; }
.hdr .btn:hover { background: var(--white); color: var(--ink); }
.hdr.on-light .btn:hover { background: var(--ink); color: #fff; }
.menu-btn { display: none; background: none; border: 1px solid currentColor; border-radius: 3px; min-height: 44px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mnav { position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--white); padding: 88px var(--pad) 32px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-102%); transition: transform .45s var(--ease); }
.mnav.open { transform: none; }
.mnav a { font-size: 40px; font-weight: 700; letter-spacing: -.05em; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line-d); }
.mnav .btn { margin-top: 24px; font-size: 16px; min-height: 54px; letter-spacing: 0; border: 0; }
.mnav-close { position: absolute; top: 14px; right: var(--pad); }
@media (max-width: 900px) {
  .hdr .wrap { grid-template-columns: 1fr auto; }
  .hdr nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hdr .hdr-cta .btn { display: none; }
}

/* ---------- hero (dark) ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: -4% 0 0; z-index: -2; background: #0c0c0c url("img/streaks_src.jpg") 62% 45% / cover no-repeat; transform: translate3d(0, calc(var(--hp, 0) * 14%), 0) scale(calc(1.06 + var(--hp, 0) * .06)); animation: settle 2.4s var(--ease) both; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.45) 48%, rgba(10,10,10,.2)), linear-gradient(0deg, rgba(10,10,10,.92) 6%, transparent 52%); }
.hero canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; opacity: calc(1 - var(--hp, 0) * 1.4); }
@keyframes settle { from { transform: scale(1.14); filter: brightness(.6); } to { transform: scale(1.06); filter: none; } }
.hero-top { position: absolute; top: calc(var(--hdr) + 18px); left: 0; right: 0; }
.hero-top .cols { font-size: 12.5px; font-weight: 600; color: var(--muted-d); }
.hero-top .cols b { color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-top .cols span:last-child { justify-self: end; text-align: right; }
.hero-main { padding-bottom: clamp(36px, 6vh, 72px); }
.hero h1 { max-width: none; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .ln > span { display: block; animation: rise 1.1s var(--ease) both; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .08s; }
.hero h1 .ln:nth-child(3) > span { animation-delay: .16s; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 0; margin-top: clamp(28px, 4vh, 48px); border-top: 1px solid rgba(242,241,238,.16); padding-top: 20px; animation: fade .9s .4s var(--ease) both; }
.hero-foot .lede { grid-column: 1 / 3; color: rgba(242,241,238,.82); padding-right: 24px; }
.hero-foot .btns { grid-column: 3 / 5; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .hero-foot { grid-template-columns: 1fr; gap: 20px; }
  .hero-foot .lede, .hero-foot .btns { grid-column: auto; justify-content: flex-start; }
  .hero-top .cols { grid-template-columns: 1fr 1fr; }
  .hero-top .cols span:nth-child(-n+2) { display: none; }
}

/* ---------- sticky two-column ("What we build") ---------- */
.split { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split-l { grid-column: 1 / 2; position: sticky; top: calc(var(--hdr) + 24px); align-self: start; padding: 0 24px var(--sec) 0; }
.split-l .d3 { margin: 18px 0 18px; }
.split-l .btn { margin-top: 22px; }
.split-r { grid-column: 2 / 5; }
.area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid var(--line-l); padding: clamp(28px, 3vw, 44px) 0; gap: 0; }
.area:last-child { border-bottom: 1px solid var(--line-l); }
.area .an { padding: 0 24px; display: flex; flex-direction: column; gap: 14px; }
.area h3 { display: flex; align-items: center; gap: 12px; }
.area h3::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.area .an p { color: var(--muted-l); font-size: 15px; }
.area .from { font-size: 14px; font-weight: 700; margin-top: auto; }
.area .from small { display: block; font-size: 12px; font-weight: 500; color: var(--muted-l); }
.area .shot { padding: 0 24px; }
.area .shot figcaption { margin-top: 10px; font-size: 12.5px; color: var(--muted-l); display: flex; justify-content: space-between; gap: 12px; }
.area.simple { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .split-l { grid-column: 1 / 5; position: relative; top: 0; padding-bottom: 32px; } .split-r { grid-column: 1 / 5; } }
@media (max-width: 760px) { .area { grid-template-columns: 1fr; gap: 18px; } .area .an, .area .shot { padding: 0; } }

/* ---------- marquee + the line under the concept projects ---------- */
.marq { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); padding: 10px 0; margin-top: 18px; }
.marq-in { display: inline-flex; gap: .4em; animation: marq 26s linear infinite; font-size: clamp(64px, 10vw, 170px); font-weight: 700; letter-spacing: -.07em; line-height: .95; }
.marq-in span:nth-child(even) { color: rgba(242,241,238,.22); }
@keyframes marq { to { transform: translateX(-50%); } }
.cases-more { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- process grid (light cells) ---------- */
.proc { padding: var(--sec) 0; }
.proc-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proc-l { grid-column: 1 / 2; padding-right: 24px; }
.proc-l .d3 { margin: 18px 0; }
.cells { grid-column: 2 / 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.cell { position: relative; min-height: 300px; padding: 26px 24px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; transition: background .35s var(--ease), color .35s var(--ease); background: transparent; }
.cell .ct { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.cell .ico { width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: var(--ink); color: var(--white); transition: background .35s var(--ease); }
.cell .ico svg { width: 22px; height: 22px; }
.cell p { color: var(--muted-l); max-width: 36ch; transition: color .35s; }
.cell:hover, .cell.on { background: var(--ink); color: var(--white); }
.cell:hover .ico, .cell.on .ico { background: var(--or-fill); }
.cell:hover p, .cell.on p { color: var(--muted-d); }
.cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells.c3 .cell { min-height: 260px; }
@media (max-width: 1100px) { .proc-l { grid-column: 1 / 5; padding-bottom: 32px; } .cells { grid-column: 1 / 5; } }
@media (max-width: 640px) { .cells, .cells.c3 { grid-template-columns: 1fr; } .cell, .cells.c3 .cell { min-height: 220px; } }

/* ---------- testimonials ---------- */
.quotes { padding: var(--sec) 0 0; }
.q-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); margin-top: 28px; }
.q-g .q-head { padding: 28px 24px 28px 0; }
.qc { padding: 28px 24px; border-left: 1px solid var(--line-l); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.qc blockquote { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; letter-spacing: -.02em; font-weight: 600; }
.qc blockquote::before { content: "“"; display: block; font-size: 64px; line-height: .6; color: var(--or); margin-bottom: 12px; font-weight: 700; }
.qc p { color: var(--muted-l); font-size: 14.5px; }
.qc .who-q { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.qc .who-q i { width: 38px; height: 38px; border-radius: 4px; background: var(--ink); display: grid; place-items: center; color: var(--white); font-style: normal; font-weight: 700; font-size: 13px; }
.qc .who-q b { display: block; font-size: 14px; }
.logos { border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); overflow: hidden; margin-top: 0; }
.logos-in { display: flex; align-items: center; gap: clamp(40px, 6vw, 90px); padding: 30px 0; width: max-content; animation: marq 46s linear infinite; }
.logos-in img { height: 34px; width: auto; filter: invert(1); opacity: .62; }
.logos-note { padding: 12px 0 var(--sec); font-size: 12px; color: var(--muted-l); }
@media (max-width: 1000px) { .q-g { grid-template-columns: 1fr; } .q-g .q-head { padding-right: 0; } .qc { border-left: 0; border-top: 1px solid var(--line-l); padding-left: 0; padding-right: 0; } }

/* ---------- how we work: 90 days (dark, sticky media) ---------- */
.how { padding: var(--sec) 0; }
.how-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 64px); }
.how-media { grid-column: 1 / 3; position: sticky; top: calc(var(--hdr) + 32px); align-self: start; padding-right: 24px; }
.how-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-d); background: #0d0d0c; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.how-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.how-frame img.on { opacity: 1; transform: none; }
.how-cap { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--muted-d); }
.how-steps { grid-column: 3 / 5; position: relative; padding-left: 40px; }
.how-steps::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-d); }
.hstep { position: relative; padding: 0 0 clamp(80px, 14vh, 160px); opacity: .38; transition: opacity .4s var(--ease); }
.hstep:last-child { padding-bottom: 0; }
.hstep.on { opacity: 1; }
.hstep::before { content: ""; position: absolute; left: -40px; top: 6px; width: 15px; height: 15px; border-radius: 4px; background: var(--ink); border: 1px solid rgba(242,241,238,.4); transition: background .4s, border-color .4s; }
.hstep.on::before { background: var(--or); border-color: var(--or); }
.hstep .k { font-size: 13px; font-weight: 600; color: var(--or-on-dark); }
.hstep h3 { margin: 8px 0 12px; }
.hstep p { color: var(--muted-d); max-width: 40ch; }
@media (max-width: 900px) { .how-media { grid-column: 1 / 5; position: relative; top: 0; padding: 0 0 40px; } .how-steps { grid-column: 1 / 5; } .hstep { opacity: 1; padding-bottom: 48px; } }

/* ---------- packages (toggle) ---------- */
.pkgs { padding: var(--sec) 0; }
.pk-head { text-align: center; display: grid; justify-items: center; gap: 18px; }
.toggle { display: inline-flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 600; margin-top: 10px; }
.toggle button { background: none; border: 0; cursor: pointer; font-weight: 600; opacity: .55; padding: 6px 0; min-height: 44px; }
.toggle button[aria-pressed="true"] { opacity: 1; }
.toggle .sw { position: relative; width: 52px; height: 28px; padding: 0; border-radius: 999px; background: var(--ink); border: 0; cursor: pointer; opacity: 1; flex: none; }
.toggle .sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform .35s var(--ease); }
.toggle .sw[data-v="projects"]::after { transform: translateX(24px); background: var(--or); }
.pk-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 4vw, 60px); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.pk-g[hidden] { display: none; }
.pk { padding: 26px 22px 24px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 14px; background: transparent; }
.pk.lead { background: var(--ink); color: var(--white); }
.pk .pn { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.pk .pn span { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: var(--or-fill); color: #fff; }
.pk .pp { font-size: clamp(38px, 3.4vw, 54px); font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.pk .pp .pre { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted-l); margin-bottom: 4px; }
.pk.lead .pp .pre { color: var(--muted-d); }
.pk .pp small { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-left: 3px; color: var(--muted-l); }
.pk.lead .pp small { color: var(--muted-d); }
.pk .pt { font-size: 12.5px; font-weight: 600; color: var(--muted-l); }
.pk.lead .pt { color: var(--muted-d); }
.pk .pd { font-size: 14.5px; color: var(--muted-l); min-height: 4.4em; }
.pk.lead .pd { color: var(--muted-d); }
.pk ul { list-style: none; display: grid; gap: 8px; font-size: 14px; border-top: 1px solid var(--line-l); padding-top: 14px; margin-top: auto; }
.pk.lead ul { border-top-color: var(--line-d); }
.pk li { display: flex; gap: 10px; }
.pk li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--or); margin-top: .55em; flex: none; }
.pk .btn { margin-top: 10px; width: 100%; }
.pk-note { margin-top: 18px; font-size: 13px; color: var(--muted-l); text-align: center; }
@media (max-width: 1100px) { .pk-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pk-g { grid-template-columns: 1fr; } .pk .pd { min-height: 0; } }

/* ---------- blog ---------- */
.jr { padding: var(--sec) 0; }
.jr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.jr-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.jc { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 26px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); text-decoration: none; transition: background .3s; }
.jc:hover { background: var(--white); }
.jc .jimg { aspect-ratio: 16 / 10; border-radius: 4px; background: var(--jc, var(--ink)); color: #fff; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.jc .jimg b { font-size: clamp(34px, 3.4vw, 54px); font-weight: 700; letter-spacing: -.06em; line-height: .9; }
.jc .jimg span { font-size: 12px; font-weight: 600; opacity: .85; }
.jc .jm { display: flex; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--muted-l); }
.jc h3 { font-size: 20px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.jc p { font-size: 14.5px; color: var(--muted-l); }
@media (max-width: 1000px) { .jr-g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .jr-g { grid-template-columns: 1fr; } }

/* ---------- deck request strip ---------- */
.deck { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line-l); }
.deck-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.deck-g > div:first-child { grid-column: 1 / 3; padding-right: 24px; }
.deck-g form { grid-column: 3 / 4; padding: 0 24px; }
.deck-g .small { grid-column: 4; padding-left: 24px; color: var(--muted-l); }
.field { display: flex; border-bottom: 1px solid var(--ink); }
.field input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 14px 0; font-size: 15px; outline: none; }
.field button { background: var(--ink); color: var(--white); border: 0; width: 46px; cursor: pointer; border-radius: 3px 3px 0 0; }
.field button:hover { background: var(--or-fill); }
.formnote { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--or-on-light); min-height: 1.4em; }
.dark .formnote { color: var(--or-on-dark); }
@media (max-width: 900px) { .deck-g { grid-template-columns: 1fr; gap: 24px; } .deck-g > div:first-child, .deck-g form, .deck-g .small { grid-column: auto; padding: 0; } }

/* ---------- let's talk + footer (dark) ---------- */
.talk { padding: var(--sec) 0 clamp(48px, 6vw, 80px); }
.talk-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.talk-l { grid-column: 1 / 3; padding-right: 24px; display: grid; gap: 14px; justify-items: start; }
.talk-l p { max-width: 42ch; }
.talk-act { grid-column: 3 / 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 24px; }
.talk-l .talk-act { grid-column: auto; justify-content: flex-start; margin-top: 10px; }
.talk .mail { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.04em; text-decoration: none; border-bottom: 2px solid var(--or); }
.talk .mail:hover { color: var(--or-on-dark); }
@media (max-width: 900px) { .talk-g { grid-template-columns: 1fr; gap: 28px; } .talk-l, .talk-act { grid-column: auto; padding-right: 0; } .talk-act { justify-content: flex-start; } }
.foot { padding: clamp(40px, 5vw, 64px) 0 22px; border-top: 1px solid var(--line-d); overflow: hidden; }
.foot-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.foot-g > div { padding-right: 24px; }
.foot .fh { font-size: 12.5px; font-weight: 600; color: var(--muted-d); margin-bottom: 14px; }
.foot-g a { display: block; width: max-content; text-decoration: none; padding: 4px 0; font-size: 15px; color: rgba(242,241,238,.88); }
.foot-g a:hover { color: var(--or-on-dark); }
.foot-g p { font-size: 14px; color: var(--muted-d); max-width: 30ch; }
.foot-about { grid-column: 1 / 3; }
.foot-about p { max-width: 46ch; }
.foot-about .foot-contact { margin: 12px 0 6px; }
.foot-contact a { display: inline; padding: 0; font-size: inherit; text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }
/* the wordmark signs the page off at about a third of its old size */
.foot-word { --fw: max(7cqw, 46px); position: relative; margin-top: clamp(32px, 4vw, 56px); display: grid; justify-items: start; gap: calc(var(--fw) * .14); user-select: none; container-type: inline-size; }
.foot-word .fw { display: block; font-weight: 800; letter-spacing: -.02em; line-height: .8; font-size: var(--fw); color: var(--white); }
.foot-word .fbar { display: block; width: calc(var(--fw) * 2.76); height: max(4px, calc(var(--fw) * .062)); border-radius: 99px; background: var(--or); }
.foot-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 12px; margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line-d); font-size: 12.5px; color: var(--muted-d); }
.foot-base a { display: inline-block; padding: 12px 0; text-decoration: none; margin-left: 18px; }
.foot-base a:hover { color: var(--white); }
@media (max-width: 900px) { .foot-g { grid-template-columns: 1fr 1fr; gap: 32px 0; } .foot-about { grid-column: 1 / -1; } }

/* ---------- floating bits ---------- */
.float-cta { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 4px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .3s var(--ease), background .3s; }
.float-cta b { color: var(--or-on-dark); }
.float-cta:hover { background: var(--or-fill); }
.float-cta:hover b { color: #fff; }
.float-cta.hide { transform: translateY(160%); }
.concept { position: fixed; left: 16px; bottom: 16px; z-index: 40; font-size: 11.5px; font-weight: 700; padding: 7px 10px; border-radius: 4px; background: #FFE9A8; color: #3A2C00; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
@media (max-width: 640px) {
  .concept { bottom: 16px; transition: opacity .3s; }
  body.cta-on .concept { opacity: 0; pointer-events: none; }
  .hero-main { padding-bottom: 84px; }
}

/* ---------- inner page hero ---------- */
.phero { padding: calc(var(--hdr) + clamp(56px, 8vw, 120px)) 0 clamp(48px, 6vw, 88px); }
.phero .cols { align-items: end; }
.phero h1 { grid-column: 1 / 4; }
.phero .side { grid-column: 4; justify-self: end; text-align: right; }
.phero .lede { margin-top: 22px; }
@media (max-width: 900px) { .phero h1, .phero .side { grid-column: 1 / 5; justify-self: start; text-align: left; } .phero .side { margin-top: 20px; } }

/* ---------- services list (details rows) ---------- */
.svc-list { border-top: 1px solid var(--line-l); }
.svc { border-bottom: 1px solid var(--line-l); }
.svc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; padding: 26px 0; gap: 0; }
.svc summary::-webkit-details-marker { display: none; }
.svc summary .sa { font-size: 13px; font-weight: 600; color: var(--muted-l); display: flex; align-items: center; gap: 10px; }
.svc summary .sa::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.svc summary h3 { grid-column: 2 / 4; padding: 0 24px; }
.svc summary .sp { justify-self: end; display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; text-align: right; }
.svc summary .pm { width: 34px; height: 34px; border-radius: 3px; border: 1px solid var(--line-l); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; flex: none; }
.svc[open] summary .pm { transform: rotate(45deg); background: var(--ink); color: var(--white); border-color: var(--ink); }
.svc .sb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 0 34px; }
.svc .sb > div:first-child { grid-column: 2 / 3; padding: 0 24px; }
.svc .sb > div:nth-child(2) { grid-column: 3 / 4; padding: 0 24px; }
.svc .sb > div:last-child { grid-column: 4; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; align-items: flex-end; text-align: right; }
.svc .sb ul { list-style: none; display: grid; gap: 7px; font-size: 14.5px; }
.svc .sb li { display: flex; gap: 10px; }
.svc .sb li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--or); margin-top: .6em; flex: none; }
.svc .tagline { font-weight: 600; margin-bottom: 8px; }
@media (max-width: 900px) {
  .svc summary { grid-template-columns: 1fr auto; gap: 10px; }
  .svc summary .sa { grid-column: 1 / 3; }
  .svc summary h3 { grid-column: 1; padding: 0; }
  .svc summary .sp { grid-column: 2; grid-row: 2; }
  .svc .sb { grid-template-columns: 1fr; gap: 20px; }
  .svc .sb > div:first-child, .svc .sb > div:nth-child(2), .svc .sb > div:last-child { grid-column: auto; padding: 0; align-items: flex-start; text-align: left; }
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.filters button { min-height: 36px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--line-l); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.dark .filters button { border-color: var(--line-d); }
.dark .filters button[aria-pressed="true"] { background: var(--white); color: var(--ink); }

/* sales system strip (dark) */
.sys { padding: var(--sec) 0; }
.sys-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-d); margin-top: 40px; }
.sys-g > div { padding: 26px 24px 30px 0; border-right: 1px solid var(--line-d); }
.sys-g > div + div { padding-left: 24px; }
.sys-g > div:last-child { border-right: 0; }
.sys-g .dot { width: 12px; height: 12px; border-radius: 3px; background: var(--or); margin-bottom: 30px; }
.sys-g h3 { font-size: 21px; font-weight: 700; letter-spacing: -.035em; margin-bottom: 10px; }
.sys-g p { color: var(--muted-d); font-size: 15px; }
@media (max-width: 900px) { .sys-g { grid-template-columns: 1fr 1fr; } .sys-g > div { border-right: 0; border-bottom: 1px solid var(--line-d); padding-left: 0 !important; } }
@media (max-width: 560px) { .sys-g { grid-template-columns: 1fr; } }

/* work index grid */
.work-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.wc { display: block; text-decoration: none; }
.wc .wimg { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.wc .wimg .art { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.wc:hover .wimg .art { transform: scale(1.03); }
.wc .wmeta { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--muted-l); }
.wc h3 { margin-top: 6px; font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; max-width: 26ch; }
.wc .wimg .sample { position: absolute; top: 14px; left: 14px; z-index: 3; }
.wc[hidden] { display: none; }
@media (max-width: 760px) { .work-g { grid-template-columns: 1fr; } }

/* case study detail */
.cs-hero { padding: calc(var(--hdr) + clamp(48px, 7vw, 100px)) 0 0; }
.cs-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-d); margin-top: clamp(32px, 4vw, 56px); }
.cs-meta > div { padding: 18px 24px 22px 0; font-size: 14px; }
.cs-meta > div + div { border-left: 1px solid var(--line-d); padding-left: 24px; }
.cs-meta b { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted-d); margin-bottom: 6px; }
.cs-cover { position: relative; aspect-ratio: 16 / 8; border-radius: 6px; overflow: hidden; margin-top: 8px; }
.cs-cover .art { position: absolute; inset: 0; }
.cs-body { padding: var(--sec) 0; }
.cs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 34px 0; border-top: 1px solid var(--line-l); }
.cs-row > :first-child { font-size: 13px; font-weight: 600; }
.cs-row > :nth-child(2) { grid-column: 2 / 4; padding: 0 24px; }
.cs-row ul { list-style: none; display: grid; gap: 12px; }
.cs-row li { display: flex; gap: 12px; font-size: 17px; }
.cs-row li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--or); margin-top: .55em; flex: none; }
.cs-row .lede { font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.02em; line-height: 1.4; max-width: 34ch; font-weight: 500; }
.cs-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.cs-res > div { padding: 30px 24px 34px 0; }
.cs-res > div + div { border-left: 1px solid var(--line-l); padding-left: 24px; }
.cs-res b { display: block; font-size: clamp(48px, 6vw, 96px); font-weight: 700; letter-spacing: -.07em; line-height: .9; }
.cs-res span { display: block; margin-top: 10px; color: var(--muted-l); font-size: 15px; }
.cs-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 34px 0; }
.cs-gal .gi { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.cs-gal .gi:first-child { grid-column: 1 / 3; aspect-ratio: 16 / 7; }
.cs-gal .gi .art { position: absolute; inset: 0; }
.cs-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; padding: clamp(56px, 7vw, 100px) 0; text-decoration: none; }
.cs-next .k { font-size: 13px; font-weight: 600; color: var(--muted-d); }
.cs-next h2 { grid-column: 2 / 5; text-align: right; transition: color .3s; }
.cs-next:hover h2 { color: var(--or-on-dark); }
.cs-disc { margin-top: 26px; font-size: 13px; color: var(--muted-l); }
@media (max-width: 900px) {
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-meta > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cs-meta > div:nth-child(n+3) { border-top: 1px solid var(--line-d); }
  .cs-row { grid-template-columns: 1fr; gap: 14px; }
  .cs-row > :nth-child(2) { grid-column: auto; padding: 0; }
  .cs-res { grid-template-columns: 1fr; }
  .cs-res > div + div { border-left: 0; border-top: 1px solid var(--line-l); padding-left: 0; }
  .cs-gal { grid-template-columns: 1fr; }
  .cs-gal .gi:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
  .cs-next { grid-template-columns: 1fr; gap: 10px; }
  .cs-next h2 { grid-column: auto; text-align: left; }
}

/* about */
.story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--sec) 0; }
.story blockquote { grid-column: 1 / 3; padding-right: 24px; font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.story blockquote b { color: var(--or); font-weight: 700; }
.story .txt { grid-column: 3 / 5; padding-left: 24px; display: grid; gap: 18px; font-size: 17px; }
.story .sign { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.story .sign .script { font-size: 44px; line-height: 1; }
.pf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.pf > div { padding: 26px 24px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.pf s { display: block; color: var(--muted-l); font-size: 14px; margin-bottom: 10px; text-decoration-color: var(--or); text-decoration-thickness: 2px; }
.pf p { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.roles { border-top: 1px solid var(--line-d); }
.role { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 0; border-bottom: 1px solid var(--line-d); }
.role > :first-child { font-size: 13px; font-weight: 600; color: var(--muted-d); font-variant-numeric: tabular-nums; }
.role h3 { font-size: 21px; font-weight: 700; letter-spacing: -.035em; }
.role .rr { font-size: 14px; color: var(--or-on-dark); font-weight: 600; margin-top: 2px; }
.role p { grid-column: 3 / 5; color: var(--muted-d); font-size: 15px; padding-left: 24px; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 28px; }
  .story blockquote, .story .txt { grid-column: auto; padding: 0; }
  .pf { grid-template-columns: 1fr; }
  .role { grid-template-columns: 1fr; gap: 6px; }
  .role p { grid-column: auto; padding: 0; }
}

/* contact */
.ct-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: var(--sec); }
.ct-info { grid-column: 1 / 2; padding-right: 24px; display: grid; gap: 28px; align-content: start; }
.ct-info b { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted-l); margin-bottom: 6px; }
.ct-info a, .ct-info span { font-size: 17px; font-weight: 600; }
.ct-form { grid-column: 2 / 5; padding-left: 24px; border-left: 1px solid var(--line-l); display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.ct-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.ct-form .full { grid-column: 1 / 3; }
.ct-form input, .ct-form textarea, .ct-form select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(17,17,16,.3); padding: 12px 0; font-size: 16px; outline: none; border-radius: 0; }
.ct-form input:focus, .ct-form textarea:focus, .ct-form select:focus { border-bottom-color: var(--or); box-shadow: 0 1px 0 var(--or); }
.ct-form textarea { min-height: 120px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: inline-flex; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--line-l); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.chips input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
.ct-form .send { grid-column: 1 / 3; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px) { .ct-g { grid-template-columns: 1fr; gap: 36px; } .ct-info, .ct-form { grid-column: auto; padding: 0; border-left: 0; } .ct-form { grid-template-columns: 1fr; } .ct-form .full, .ct-form .send { grid-column: auto; } }
.faq { border-top: 1px solid var(--line-l); }
.faq details { border-bottom: 1px solid var(--line-l); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 500; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 24px; color: var(--muted-l); max-width: 70ch; }

/* pricing extras */
.fp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ink); color: var(--white); border-radius: 6px; overflow: hidden; }
.fp-l { grid-column: 1 / 2; padding: 30px 26px; background: var(--or-fill); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.fp-l b { font-size: clamp(64px, 7vw, 110px); font-weight: 700; letter-spacing: -.07em; line-height: .85; }
.fp-l b small { font-size: 16px; letter-spacing: 0; font-weight: 600; margin-left: 4px; }
.fp-m { grid-column: 2 / 4; padding: 30px 26px; }
.fp-m ul { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.fp-m li { display: flex; gap: 10px; font-size: 15px; }
.fp-m li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--or); margin-top: .6em; flex: none; }
.fp-r { grid-column: 4; padding: 30px 26px; border-left: 1px solid var(--line-d); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.fp-r .days b { display: block; font-size: 64px; font-weight: 700; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .fp { grid-template-columns: 1fr; } .fp-l, .fp-m, .fp-r { grid-column: auto; } .fp-r { border-left: 0; border-top: 1px solid var(--line-d); } }
.addons { border-top: 1px solid var(--line-l); }
.addons div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-l); font-size: 16px; }
.addons b { font-weight: 700; white-space: nowrap; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .marq-in, .logos-in { animation: none; }
  .hero canvas { display: none; }
}

/* =================================================================
   CASE STUDY ART: brand visuals for the (made-up) case studies,
   built in CSS so the concept runs fully offline.
   ================================================================= */
.art { --bg: #ddd; --ink: #111; --acc: #fff; --deep: #333; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--display); }
.art .wm { font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.art .wm em { font-style: normal; color: var(--em, var(--deep)); }
.art .ghost { position: absolute; font-weight: 800; letter-spacing: -.08em; line-height: .8; opacity: .14; white-space: nowrap; pointer-events: none; }
.art .ghost em { font-style: normal; }

/* pack: gable-top carton */
.a-pack .ghost { left: -2%; bottom: -6%; font-size: 30cqw; }
.a-pack { container-type: size; display: grid; place-items: center; }
.a-pack .carton { position: relative; width: 25cqw; height: 52cqh; min-width: 110px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.28)); transform: rotate(-6deg); }
.a-pack .carton::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; background: var(--white); clip-path: polygon(8% 100%, 50% 0, 92% 100%); }
.a-pack .carton .body { position: absolute; left: 0; right: 0; top: 17%; bottom: 0; background: var(--white); border-radius: 0 0 4px 4px; display: flex; flex-direction: column; justify-content: space-between; padding: 12% 10% 10%; }
.a-pack .carton .band { height: 34%; background: var(--bg); border-radius: 3px; display: grid; place-items: center; }
.a-pack .carton .band .wm { font-size: 4.2cqw; color: var(--ink); }
.a-pack .carton small { font-size: 1.5cqw; font-weight: 700; color: var(--ink); }
.a-pack .carton .stripe { height: 14%; border-bottom: 0; background: repeating-linear-gradient(90deg, var(--deep) 0 2px, transparent 2px 9px); opacity: .55; border-radius: 2px; }
.a-pack .side { position: absolute; right: 7%; top: 12%; width: 18cqw; display: grid; gap: 10px; }
.a-pack .side i { display: block; height: 5cqh; border-radius: 4px; background: var(--ink); opacity: .9; }
.a-pack .side i:nth-child(2) { background: var(--acc); width: 70%; }
.a-pack .side i:nth-child(3) { background: var(--deep); width: 45%; }
.a-pack .tagl { position: absolute; left: 6%; top: 12%; color: var(--on); font-size: 4.4cqw; font-weight: 800; letter-spacing: -.06em; line-height: .9; max-width: 30cqw; }

/* bottle */
.a-bottle { container-type: size; display: grid; place-items: center; background: linear-gradient(180deg, var(--bg) 0 58%, color-mix(in srgb, var(--bg) 82%, var(--acc)) 58% 100%); }
.a-bottle .waves { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: repeating-linear-gradient(0deg, transparent 0 14px, color-mix(in srgb, var(--acc) 30%, transparent) 14px 15px); }
.a-bottle .bt { position: relative; width: 16cqw; height: 60cqh; min-width: 80px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
.a-bottle .bt .cap { position: absolute; left: 30%; right: 30%; top: 0; height: 16%; background: var(--ink); border-radius: 6px 6px 2px 2px; }
.a-bottle .bt .neck { position: absolute; left: 36%; right: 36%; top: 15%; height: 6%; background: var(--deep); }
.a-bottle .bt .bod { position: absolute; left: 0; right: 0; top: 20%; bottom: 0; background: var(--acc); border-radius: 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; color: var(--white); }
.a-bottle .bt .bod .wm { font-size: 3cqw; color: var(--white); }
.a-bottle .bt .bod .wm em { color: color-mix(in srgb, var(--white) 70%, var(--acc)); }
.a-bottle .bt .bod small { font-size: 1.3cqw; font-weight: 700; opacity: .9; }
.a-bottle .bt2 { position: absolute; left: 30%; bottom: 14%; width: 11cqw; height: 26cqh; background: var(--deep); border-radius: 14px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
.a-bottle .tagl { position: absolute; left: 6%; top: 10%; font-size: 5cqw; font-weight: 800; letter-spacing: -.06em; line-height: .88; color: var(--on); max-width: 28cqw; }

/* social grid */
.a-social { container-type: size; padding: 7cqh 6cqw; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqw; align-items: center; }
.a-social .tagl { font-size: 6cqw; font-weight: 800; letter-spacing: -.065em; line-height: .86; color: var(--on); }
.a-social .tagl small { display: block; margin-top: 2.4cqh; font-size: 1.7cqw; letter-spacing: -.01em; font-weight: 700; opacity: .8; }
.a-social .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; transform: rotate(4deg); }
.a-social .grid i { aspect-ratio: 4 / 5; border-radius: 6px; background: var(--acc); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 1.6cqw; color: var(--ink); text-align: center; padding: 6px; letter-spacing: -.03em; line-height: 1; }
.a-social .grid i:nth-child(3n+2) { background: var(--ink); color: var(--acc); }
.a-social .grid i:nth-child(4n) { background: var(--deep); color: var(--white); }
.a-social .grid i:nth-child(5) { background: var(--white); }
.a-social .grid i b { display: block; font-size: 3.4cqw; letter-spacing: -.07em; }

/* pipeline dashboard */
.a-pipe { container-type: size; padding: 8cqh 6cqw; display: grid; grid-template-columns: .9fr 1.2fr; gap: 4cqw; align-items: center; }
.a-pipe .tagl { font-size: 5.4cqw; font-weight: 800; letter-spacing: -.065em; line-height: .88; color: var(--on); }
.a-pipe .tagl .wm { display: block; font-size: 2.6cqw; margin-bottom: 3cqh; color: var(--on); }
.a-pipe .win { background: var(--white); color: #111; border-radius: 10px; padding: 2.4cqh 2cqw; box-shadow: 0 30px 60px rgba(0,0,0,.3); font-size: max(10px, 1.25cqw); }
.a-pipe .win .wh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6cqh; font-weight: 700; }
.a-pipe .win .wh span { font-size: max(9px, 1cqw); padding: 3px 7px; border-radius: 3px; background: #FFE9A8; color: #3A2C00; }
.a-pipe .win .r { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1cqw; align-items: center; padding: 1.2cqh 0; border-top: 1px solid rgba(0,0,0,.08); }
.a-pipe .win .r b { font-weight: 700; }
.a-pipe .win .r span { color: #666; }
.a-pipe .win .r i { font-style: normal; font-weight: 700; font-size: max(9px, .95cqw); padding: 3px 8px; border-radius: 3px; background: var(--bg); color: var(--white); white-space: nowrap; }
.a-pipe .win .r i.g { background: #237A21; }
.a-pipe .win .r i.y { background: #E3B23C; color: #2a1d00; }
.a-pipe .win .bars { display: flex; align-items: flex-end; gap: .7cqw; height: 9cqh; margin-top: 1.6cqh; }
.a-pipe .win .bars span { flex: 1; background: var(--bg); border-radius: 3px 3px 0 0; opacity: .85; }

/* film frames */
.a-film { container-type: size; padding: 8cqh 5cqw; display: flex; flex-direction: column; justify-content: center; gap: 4cqh; }
.a-film .strip { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1.4cqw; }
.a-film .fr { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: linear-gradient(140deg, var(--deep), var(--ink)); }
.a-film .fr:nth-child(2) { background: linear-gradient(160deg, var(--acc), var(--bg)); aspect-ratio: 9 / 14; }
.a-film .fr:nth-child(3) { background: linear-gradient(200deg, var(--bg), var(--deep)); aspect-ratio: 9 / 14; }
.a-film .fr .sun { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--acc); right: 12%; top: 18%; opacity: .9; }
.a-film .fr .road { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%; border-radius: 50%; border-top: 3px solid rgba(255,255,255,.5); }
.a-film .fr .play { position: absolute; left: 50%; top: 50%; width: 5cqw; height: 5cqw; min-width: 34px; min-height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.a-film .fr .play::after { content: ""; border-left: 12px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.a-film .fr .tc { position: absolute; left: 10px; bottom: 8px; font-size: max(9px, 1cqw); font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.a-film .fr .cap { position: absolute; left: 8%; right: 8%; bottom: 10%; font-size: 1.8cqw; font-weight: 800; letter-spacing: -.05em; line-height: .95; color: var(--white); }
.a-film .tl { display: flex; justify-content: space-between; align-items: end; color: var(--on); }
.a-film .tl .wm { font-size: 4.6cqw; color: var(--on); }
.a-film .tl small { font-size: 1.5cqw; font-weight: 700; opacity: .85; }

/* deck slides */
.a-deck { container-type: size; display: grid; place-items: center; }
.a-deck .sl { position: absolute; width: 56cqw; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--deep); box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.a-deck .sl.s1 { transform: translate(-7cqw, -8cqh) rotate(-6deg); opacity: .7; }
.a-deck .sl.s2 { transform: translate(-3cqw, -4cqh) rotate(-3deg); background: var(--acc); opacity: .9; }
.a-deck .sl.s3 { background: var(--ink); color: var(--bg); padding: 3.2cqh 3cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; align-items: end; transform: translate(2cqw, 3cqh); }
.a-deck .sl.s3 .wm { font-size: 1.6cqw; color: var(--bg); grid-column: 1 / 3; align-self: start; }
.a-deck .sl.s3 .wm em { color: var(--acc); }
.a-deck .sl.s3 h4 { font-size: 3.6cqw; font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--bg); }
.a-deck .sl.s3 .ch { display: flex; align-items: flex-end; gap: .8cqw; height: 14cqh; }
.a-deck .sl.s3 .ch span { flex: 1; background: var(--acc); border-radius: 2px 2px 0 0; }
.a-deck .sl.s3 .ch span:nth-child(odd) { background: color-mix(in srgb, var(--bg) 70%, var(--acc)); }

/* logo sheet */
.a-logo { container-type: size; display: grid; place-items: center; }
.a-logo .wm { font-size: 11cqw; color: var(--on); }
.a-logo .marks { position: absolute; inset: 22% 18%; border: 1px dashed color-mix(in srgb, var(--on) 35%, transparent); }
.a-logo .marks::before, .a-logo .marks::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--on); opacity: .5; }
.a-logo .marks::before { left: -8px; top: -8px; border-right: 0; border-bottom: 0; }
.a-logo .marks::after { right: -8px; bottom: -8px; border-left: 0; border-top: 0; }
.a-logo .sw4 { position: absolute; left: 6%; bottom: 8%; display: flex; gap: 8px; }
.a-logo .sw4 i { width: 5cqw; height: 5cqw; min-width: 26px; min-height: 26px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }
.a-logo .lt { position: absolute; right: 6%; bottom: 8%; color: var(--on); font-size: max(10px, 1.3cqw); font-weight: 700; text-align: right; opacity: .75; }

/* website in a browser */
.a-site { container-type: size; padding: 8cqh 7cqw; display: grid; place-items: center; }
.a-site .br { width: 100%; height: 100%; background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.a-site .bar { height: 5.4cqh; min-height: 22px; background: #ECEBE7; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.a-site .bar i { width: 9px; height: 9px; border-radius: 50%; background: #CFCDC7; }
.a-site .bar span { margin-left: 12px; flex: 0 1 42%; height: 55%; border-radius: 4px; background: #fff; }
.a-site .pg { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 3cqw; padding: 5cqh 4cqw; align-items: center; color: #111; }
.a-site .pg .nav { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: center; font-size: max(9px, 1.2cqw); font-weight: 700; }
.a-site .pg .nav .wm { font-size: 2.2cqw; color: #111; }
.a-site .pg .nav .wm em { color: var(--deep); }
.a-site .pg .nav span { display: flex; gap: 1.6cqw; opacity: .6; }
.a-site .pg h4 { font-size: 4.6cqw; font-weight: 800; letter-spacing: -.065em; line-height: .9; }
.a-site .pg p { font-size: max(9px, 1.25cqw); color: #555; margin-top: 2cqh; line-height: 1.4; }
.a-site .pg .b { display: inline-block; margin-top: 3cqh; font-size: max(9px, 1.2cqw); font-weight: 700; padding: 1.4cqh 1.6cqw; border-radius: 4px; background: var(--ink); color: var(--white); }
.a-site .pg .img { height: 100%; min-height: 40%; border-radius: 8px; background: var(--bg); position: relative; overflow: hidden; }
.a-site .pg .img::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--acc); right: -10%; bottom: -14%; }
.a-site .pg .img::before { content: ""; position: absolute; width: 26%; aspect-ratio: 1; border-radius: 6px; background: var(--deep); left: 14%; top: 18%; transform: rotate(-8deg); }

/* phone */
.a-phone { container-type: size; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 7cqw; gap: 4cqw; }
.a-phone .tagl { font-size: 5.6cqw; font-weight: 800; letter-spacing: -.065em; line-height: .88; color: var(--on); }
.a-phone .tagl .wm { display: block; font-size: 2.4cqw; margin-bottom: 3cqh; }
.a-phone .ph { justify-self: center; width: 23cqw; min-width: 120px; aspect-ratio: 9 / 18.5; border-radius: 26px; background: var(--ink); padding: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.3); transform: rotate(5deg); }
.a-phone .ph .scr { height: 100%; border-radius: 19px; background: var(--white); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; color: #111; }
.a-phone .ph .scr .wm { font-size: max(11px, 1.6cqw); }
.a-phone .ph .scr .card { border-radius: 8px; background: var(--bg); flex: 1.3; position: relative; overflow: hidden; }
.a-phone .ph .scr .card::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--acc); right: -18%; bottom: -24%; }
.a-phone .ph .scr .row { height: 10px; border-radius: 3px; background: #E8E6E1; }
.a-phone .ph .scr .row.s { width: 60%; }
.a-phone .ph .scr .cta { border-radius: 6px; background: var(--ink); color: var(--white); font-size: max(9px, 1.05cqw); font-weight: 700; padding: 8px; text-align: center; }

/* poster */
.a-poster { container-type: size; padding: 7cqh 6cqw; display: flex; flex-direction: column; justify-content: space-between; }
.a-poster h4 { position: relative; z-index: 2; font-size: 13cqw; font-weight: 800; letter-spacing: -.08em; line-height: .78; color: var(--on); max-width: 70cqw; }
.a-poster h4 em { font-style: normal; color: var(--acc); }
.a-poster .rings { position: absolute; right: -8cqw; top: 50%; width: 52cqw; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: 3cqw solid var(--acc); opacity: .9; }
.a-poster .rings::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 2cqw solid var(--white); opacity: .5; }
.a-poster .pf2 { display: flex; justify-content: space-between; align-items: end; color: var(--on); position: relative; z-index: 2; }
.a-poster .pf2 .wm { font-size: 3.6cqw; color: var(--on); }
.a-poster .pf2 small { font-size: max(10px, 1.4cqw); font-weight: 700; }

/* =================================================================
   BUILD-OUT: nav dropdowns, screens, new pages
   ================================================================= */

/* ---------- dropdown navigation ---------- */
.hdr nav { align-items: center; }
.hdr .grp { position: relative; }
.hdr .grp > button { background: none; border: 0; cursor: pointer; font-size: 13.5px; font-weight: 600; opacity: .78; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: inherit; }
.hdr .grp > button::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
.hdr .grp:hover > button, .hdr .grp.open > button, .hdr .grp > button[aria-current] { opacity: 1; }
.hdr .grp.open > button::after { transform: rotate(-135deg) translateY(-1px); }
.hdr .menu { position: absolute; top: calc(100% + 10px); left: -18px; min-width: 300px; padding: 8px; border-radius: 6px; background: var(--ink); color: var(--white); border: 1px solid var(--line-d); box-shadow: 0 24px 60px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.hdr .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.hdr .grp:hover .menu, .hdr .grp:focus-within .menu, .hdr .grp.open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease); }
.hdr .menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 4px; opacity: 1 !important; text-decoration: none; color: var(--white); }
.hdr .menu a::after { display: none !important; }
.hdr .menu a b { font-size: 14px; font-weight: 600; }
.hdr .menu a span { font-size: 12.5px; font-weight: 500; color: var(--muted-d); }
.hdr .menu a:hover, .hdr .menu a[aria-current] { background: rgba(242,241,238,.08); }
.hdr .menu a[aria-current] b { color: var(--or-on-dark); }
.mnav h5 { font-size: 12.5px; font-weight: 600; color: var(--muted-d); margin: 18px 0 2px; }
.mnav a.sub { font-size: 26px; letter-spacing: -.04em; padding: 5px 0; }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.crumbs a { text-decoration: none; color: var(--muted-l); }
.dark .crumbs a { color: var(--muted-d); }
.crumbs a:hover { color: inherit; }
.crumbs span[aria-hidden] { color: var(--or); }

/* ---------- answer block (a plain, quotable summary) ---------- */
.answer { max-width: 62ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; letter-spacing: -.01em; }
.answer b { font-weight: 700; }

/* ---------- who we work with ---------- */
.who-sec { padding: var(--sec) 0; }
.who-list { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-l); }
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-l); text-decoration: none; transition: background .3s var(--ease); }
.who:hover { background: var(--white); }
.who .k { font-size: 13px; font-weight: 600; color: var(--or-on-light); padding-left: 0; }
.who .t { font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; padding: 0 24px; }
.who .dsc { color: var(--muted-l); font-size: 15px; padding: 0 24px; }
.who .pr { justify-self: end; display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; text-align: right; }
.who .pr i { font-style: normal; width: 40px; height: 40px; border-radius: 3px; border: 1px solid var(--line-l); display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s; flex: none; }
.who:hover .pr i { background: var(--or-fill); color: #fff; border-color: var(--or-fill); }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; } .who .t, .who .dsc { padding: 0; } .who .pr { justify-self: start; text-align: left; } }

/* ---------- branding (homepage section + page) ---------- */
.brand-sec { padding: var(--sec) 0; }
.brand-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.brand-g > div:first-child { grid-column: 1 / 2; padding-right: 24px; position: sticky; top: calc(var(--hdr) + 24px); }
.brand-g .board-wrap { grid-column: 2 / 5; padding-left: 24px; }
.brand-g .d3 { margin: 18px 0; }
.blist { list-style: none; margin: 22px 0 26px; border-top: 1px solid var(--line-d); }
.blist li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-d); font-weight: 600; font-size: 14.5px; }
.blist li span { color: var(--or-on-dark); white-space: nowrap; }
.light .blist { border-top-color: var(--line-l); }
.light .blist li { border-bottom-color: var(--line-l); }
.light .blist li span { color: var(--or-on-light); }
.board { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(56px, 6vw, 92px); gap: 12px; }
.board .tile { position: relative; border-radius: 6px; overflow: hidden; }
.board .tile .art { position: absolute; inset: 0; }
.board .t1 { grid-column: 1 / 4; grid-row: 1 / 4; }
.board .t2 { grid-column: 4 / 7; grid-row: 1 / 3; }
.board .t3 { grid-column: 4 / 7; grid-row: 3 / 6; }
.board .t4 { grid-column: 1 / 4; grid-row: 4 / 6; }
.board .lbl2 { position: absolute; right: 0; top: -34px; }
.board-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--muted-d); }
.light .board-cap { color: var(--muted-l); }
@media (max-width: 1000px) { .brand-g { grid-template-columns: 1fr; gap: 40px; } .brand-g > div:first-child, .brand-g .board-wrap { grid-column: auto; padding: 0; position: relative; top: 0; } }

/* branding explorer */
.ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.ex-ctrl { grid-column: 1 / 2; padding: 26px 24px 26px 0; display: grid; gap: 26px; align-content: start; }
.ex-ctrl h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--muted-l); }
.ex-pal { display: grid; gap: 8px; }
.ex-pal button, .ex-pair button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--line-l); background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; }
.ex-pal button[aria-pressed="true"], .ex-pair button[aria-pressed="true"] { border-color: var(--ink); background: var(--white); box-shadow: inset 3px 0 0 var(--or); }
.ex-pal .sws { display: flex; gap: 3px; }
.ex-pal .sws i { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.08); }
.ex-pair { display: grid; gap: 8px; }
.ex-out { grid-column: 2 / 5; padding: 26px 0 26px 24px; border-left: 1px solid var(--line-l); display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 16px;
  --c1: #1F1E1C; --c2: #F1EFEA; --c3: #C8400C; --c4: #4B4740; --c5: #C8C3B9; --hf: 'Instrument Serif', Georgia, serif; --hw: 400; --bf: 'Schibsted Grotesk', sans-serif; }
.ex-web { grid-column: 1 / 3; border-radius: 6px; overflow: hidden; background: var(--c2); color: var(--c1); border: 1px solid rgba(0,0,0,.06); }
.ex-web .nv { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid color-mix(in srgb, var(--c1) 12%, transparent); font-family: var(--bf); font-size: 13px; font-weight: 600; }
.ex-web .nv b { font-family: var(--hf); font-weight: var(--hw); font-size: 20px; letter-spacing: -.02em; }
.ex-web .nv span { display: flex; gap: 18px; opacity: .7; }
.ex-web .hb { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; padding: 34px 20px 30px; align-items: center; }
.ex-web h4 { font-family: var(--hf); font-weight: var(--hw); font-size: clamp(30px, 3.4vw, 52px); line-height: .95; letter-spacing: -.03em; }
.ex-web p { font-family: var(--bf); font-size: 14px; line-height: 1.5; margin-top: 12px; color: var(--c4); max-width: 34ch; }
.ex-web .b { display: inline-block; margin-top: 16px; font-family: var(--bf); font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 4px; background: var(--c3); color: var(--c2); }
.ex-web .im { height: 100%; min-height: 150px; border-radius: 6px; background: var(--c5); position: relative; overflow: hidden; }
.ex-web .im::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--c3); right: -12%; bottom: -18%; }
.ex-post { aspect-ratio: 1; border-radius: 6px; background: var(--c1); color: var(--c2); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.ex-post small { font-family: var(--bf); font-size: 12px; font-weight: 600; opacity: .7; }
.ex-post h5 { font-family: var(--hf); font-weight: var(--hw); font-size: clamp(24px, 2.4vw, 36px); line-height: .95; letter-spacing: -.02em; }
.ex-post h5 em { font-style: normal; color: var(--c3); }
.ex-card { border-radius: 6px; background: var(--c2); color: var(--c1); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(0,0,0,.06); aspect-ratio: 1.75; align-self: end; }
.ex-card b { font-family: var(--hf); font-weight: var(--hw); font-size: 26px; letter-spacing: -.02em; }
.ex-card span { font-family: var(--bf); font-size: 12px; line-height: 1.5; color: var(--c4); }
.ex-card i { display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--c3); }
.ex-note { grid-column: 1 / 3; font-size: 12.5px; color: var(--muted-l); }
@media (max-width: 1000px) { .ex { grid-template-columns: minmax(0, 1fr); } .ex-ctrl, .ex-out { grid-column: auto; padding: 22px 0; border-left: 0; } .ex-out { grid-template-columns: 1fr 1fr; } .ex-web .hb { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ex-out { grid-template-columns: 1fr; } .ex-web, .ex-note { grid-column: auto; } }

/* settles / deliverables grids */
.cells.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / 5; }
.cells.c4 .cell { min-height: 240px; }
.dl-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.dl { padding: 24px 22px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 10px; }
.dl b { font-size: 18px; letter-spacing: -.03em; }
.dl .pr { font-size: 13px; font-weight: 700; color: var(--or-on-light); }
.dl p { color: var(--muted-l); font-size: 14.5px; }
@media (max-width: 1100px) { .cells.c4, .dl-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cells.c4, .dl-g { grid-template-columns: 1fr; } }

/* ---------- StudioBook / sales system screens (built in HTML, scale like an image) ---------- */
.sbx { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #131315; color: #ECEBE8; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.25); font-family: "Geist", "Schibsted Grotesk", sans-serif; }
.sbx > .in { position: absolute; inset: 0; display: grid; grid-template-columns: 16% 1fr; font-size: 1cqw; line-height: 1.35; }
.sbx .sd { background: #161618; border-right: 1px solid rgba(255,255,255,.07); padding: 1.6em 1.2em; display: flex; flex-direction: column; gap: 1.4em; }
.sbx .br { display: flex; align-items: center; gap: .7em; }
.sbx .br i { width: 2.2em; height: 2.2em; border-radius: .5em; background: #E2470F; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 1.1em; flex: none; }
.sbx .br small { display: block; font-size: .62em; color: rgba(236,235,232,.6); }
.sbx .br b { font-size: 1.05em; }
.sbx .cl { display: flex; align-items: center; gap: .7em; padding: .9em; border-radius: .7em; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.sbx .cl i { width: 2em; height: 2em; border-radius: .45em; background: #E8935E; color: #2A1606; display: grid; place-items: center; font-style: normal; font-weight: 800; flex: none; }
.sbx .cl b { display: block; font-size: .9em; }
.sbx .cl small { font-size: .7em; color: rgba(236,235,232,.55); }
.sbx .nv { display: grid; gap: .2em; }
.sbx .nv span { font-size: .92em; padding: .45em .8em; border-radius: 999px; display: flex; align-items: center; gap: .6em; }
.sbx .nv span::before { content: ""; width: .8em; height: .8em; border-radius: .2em; border: 1.5px solid currentColor; opacity: .7; }
.sbx .nv span.on { background: #E2470F; color: #fff; }
.sbx .nv em { font-style: normal; font-size: .7em; color: rgba(236,235,232,.45); margin: .7em 0 .1em .4em; }
.sbx .mn { display: flex; flex-direction: column; min-width: 0; }
.sbx .tp { display: flex; align-items: center; gap: 1.2em; padding: 1.2em 2.2em; }
.sbx .tp .bk { font-size: .85em; padding: .4em .9em; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); }
.sbx .tp b { font-size: .95em; font-weight: 600; }
.sbx .tp .sr { flex: 1; max-width: 40%; margin: 0 auto; font-size: .85em; color: rgba(236,235,232,.5); padding: .65em 1.2em; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.sbx .tp .us { font-size: .9em; display: flex; align-items: center; gap: .6em; }
.sbx .tp .us i { font-style: normal; font-size: .72em; font-weight: 700; padding: .2em .6em; border-radius: 999px; background: #E2470F; color: #fff; }
.sbx .bd { flex: 1; padding: .6em 2.2em 1.6em; display: flex; flex-direction: column; gap: 1.1em; overflow: hidden; background: radial-gradient(60% 40% at 80% 0%, rgba(226,71,15,.07), transparent 70%); }
.sbx .ey { font-size: .85em; color: rgba(236,235,232,.55); }
.sbx .hh { font-size: 2.3em; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin-top: .1em; }
.sbx .sub { font-size: .92em; color: rgba(236,235,232,.6); max-width: 68ch; }
.sbx .c3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.sbx .c2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
.sbx .cd { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: .8em; padding: 1.1em 1.2em; min-width: 0; }
.sbx .cd.hot { border-color: rgba(226,71,15,.55); background: linear-gradient(180deg, rgba(226,71,15,.12), rgba(255,255,255,.02)); }
.sbx .cd .l { font-size: .82em; color: rgba(236,235,232,.6); }
.sbx .cd .v { font-size: 1.9em; font-weight: 700; letter-spacing: -.03em; margin-top: .25em; }
.sbx .cd .s { font-size: .78em; color: rgba(236,235,232,.55); margin-top: .2em; }
.sbx .cd h6 { font-size: .95em; font-weight: 600; margin-bottom: .5em; }
.sbx .cd p { font-size: .85em; color: rgba(236,235,232,.75); }
.sbx .rw { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 1em; align-items: center; padding: .7em 0; border-top: 1px solid rgba(255,255,255,.07); font-size: .85em; }
.sbx .rw.hd { color: rgba(236,235,232,.5); border-top: 0; padding-top: 0; }
.sbx .rw b { font-weight: 600; }
.sbx .rw span { color: rgba(236,235,232,.65); }
.sbx .pl { font-size: .72em; font-weight: 700; padding: .25em .7em; border-radius: 999px; white-space: nowrap; justify-self: start; }
.sbx .pl.ok { background: rgba(80,190,110,.16); color: #7DDB98; }
.sbx .pl.aw { background: rgba(227,178,60,.16); color: #F0C45A; }
.sbx .pl.or { background: rgba(226,71,15,.18); color: #FF8A57; }
.sbx .pl.gr { background: rgba(255,255,255,.08); color: rgba(236,235,232,.75); }
.sbx .bars { display: flex; align-items: flex-end; gap: .5em; height: 7em; margin-top: .6em; }
.sbx .bars i { flex: 1; border-radius: .25em .25em 0 0; background: rgba(226,71,15,.75); height: var(--h); }
.sbx .bars i:nth-child(odd) { background: rgba(226,71,15,.45); }
.sbx .mt { display: grid; gap: .55em; margin-top: .4em; }
.sbx .mt div { display: grid; grid-template-columns: 9em 1fr auto; gap: .8em; align-items: center; font-size: .82em; }
.sbx .mt s { text-decoration: none; height: .55em; border-radius: 999px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.sbx .mt s::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #E2470F; border-radius: 999px; }
.sbx .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .45em; }
.sbx .cal > div { min-height: 5.2em; border-radius: .5em; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); padding: .4em; display: flex; flex-direction: column; gap: .3em; font-size: .72em; }
.sbx .cal > div > small { color: rgba(236,235,232,.45); }
.sbx .cal .po { padding: .3em .45em; border-radius: .35em; background: rgba(226,71,15,.2); color: #FFB28F; font-weight: 600; }
.sbx .cal .po.b { background: rgba(95,163,181,.2); color: #A9DCE8; }
.sbx .cal .po.g { background: rgba(80,190,110,.18); color: #94E3AA; }
.sbx .fl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; }
.sbx .fl > div { border-radius: .6em; border: 1px solid rgba(255,255,255,.08); overflow: hidden; background: rgba(255,255,255,.03); }
.sbx .fl > div > i { display: block; aspect-ratio: 16 / 10; background: var(--fc, #333); position: relative; }
.sbx .fl > div > i::after { content: attr(data-t); position: absolute; left: .6em; bottom: .5em; font-style: normal; font-size: .8em; font-weight: 800; letter-spacing: -.03em; color: rgba(255,255,255,.92); }
.sbx .fl b { display: block; font-size: .78em; padding: .5em .6em 0; font-weight: 600; }
.sbx .fl small { display: block; font-size: .68em; padding: .1em .6em .6em; color: rgba(236,235,232,.5); }
.sbx .tag { position: absolute; right: 1.2cqw; bottom: 1.2cqw; z-index: 2; font-size: max(9px, .85cqw); font-weight: 700; padding: .35em .7em; border-radius: 999px; background: #FFE9A8; color: #3A2C00; }
.sbx.img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* the sales system uses the same chrome, with the studio name instead of a client */
.sbx .sd.sys .cl i { background: #2B4BFF; color: #fff; }

/* ---------- client portal page ---------- */
.tour .how-frame > * { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease), transform .8s var(--ease); border: 0; box-shadow: none; border-radius: 0; }
.tour .how-frame > .on, .how .how-frame > .on { opacity: 1; transform: none; }
.how .how-frame > .sbx { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease), transform .8s var(--ease); border: 0; border-radius: 0; box-shadow: none; }
.mods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.mods > div { padding: 22px 20px 26px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: background .3s; }
.mods > div:hover { background: var(--white); }
.mods b { font-size: 17px; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; }
.mods b::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--or); }
.mods p { color: var(--muted-l); font-size: 14px; }
@media (max-width: 1100px) { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mods { grid-template-columns: 1fr; } }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-d); }
.levels > div { padding: 26px 24px 30px 0; border-right: 1px solid var(--line-d); }
.levels > div + div { padding-left: 24px; }
.levels > div:last-child { border-right: 0; }
.levels .lv { display: inline-flex; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--or-fill); color: #fff; }
.levels h3 { margin: 18px 0 8px; font-size: 22px; letter-spacing: -.035em; }
.levels p { color: var(--muted-d); }
@media (max-width: 900px) { .levels { grid-template-columns: 1fr; } .levels > div { border-right: 0; border-bottom: 1px solid var(--line-d); padding-left: 0 !important; } }

/* ---------- brief builder ---------- */
.bb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: var(--sec); align-items: start; }
.bb-main { grid-column: 1 / 4; padding-right: 32px; }
.bb-side { grid-column: 4; position: sticky; top: calc(var(--hdr) + 20px); background: var(--ink); color: var(--white); border-radius: 6px; padding: 24px 22px; display: grid; gap: 16px; }
.bb-steps { display: flex; gap: 0; border-bottom: 1px solid var(--line-l); margin-bottom: 30px; overflow-x: auto; }
.bb-steps button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 18px 12px 0; margin-right: 18px; font-size: 14px; font-weight: 600; color: var(--muted-l); cursor: pointer; }
.bb-steps button[aria-current="step"] { color: var(--ink); border-bottom-color: var(--or); }
.bb-steps button:disabled { cursor: default; opacity: .5; }
.bb-step { display: none; }
.bb-step.on { display: block; animation: fade .5s var(--ease) both; }
.bb-step > h2 { margin-bottom: 8px; }
.bb-step > p.muted { margin-bottom: 24px; max-width: 60ch; }
.pkgs-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); }
.pkgs-pick label { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); cursor: pointer; transition: background .25s; }
.pkgs-pick label:hover { background: var(--white); }
.pkgs-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pkgs-pick .nm { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.03em; }
.pkgs-pick .nm span { font-size: 15px; white-space: nowrap; }
.pkgs-pick .cd2 { font-size: 12.5px; font-weight: 600; color: var(--muted-l); }
.pkgs-pick p { font-size: 14px; color: var(--muted-l); }
.pkgs-pick label:has(input:checked) { background: var(--ink); color: var(--white); }
.pkgs-pick label:has(input:checked) p, .pkgs-pick label:has(input:checked) .cd2 { color: var(--muted-d); }
.pkgs-pick label:has(input:checked)::after { content: "Selected"; position: absolute; right: 16px; bottom: 16px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: var(--or-fill); color: #fff; }
.pkgs-pick label:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: -2px; }
.qs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.qs label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; }
.qs .full { grid-column: 1 / 3; }
.qs input, .qs textarea, .qs select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(17,17,16,.3); padding: 12px 0; font-size: 16px; outline: none; border-radius: 0; }
.qs input:focus, .qs textarea:focus, .qs select:focus { border-bottom-color: var(--or); box-shadow: 0 1px 0 var(--or); }
.qs textarea { min-height: 96px; resize: vertical; }
.qs .opt { font-weight: 500; color: var(--muted-l); }
.adds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adds label { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line-l); border-radius: 4px; cursor: pointer; font-size: 14px; }
.adds label:has(input:checked) { border-color: var(--ink); background: var(--white); }
.adds b { display: flex; justify-content: space-between; gap: 10px; }
.adds small { display: block; color: var(--muted-l); margin-top: 3px; }
.bb-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.bb-side .k { font-size: 12.5px; font-weight: 600; color: var(--muted-d); }
.bb-side .pkn { font-size: 22px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.bb-side .pkp { font-size: 40px; font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.bb-side .pkp small { font-size: 14px; letter-spacing: 0; font-weight: 600; color: var(--muted-d); margin-left: 4px; }
.bb-side ul { list-style: none; display: grid; gap: 8px; font-size: 14px; border-top: 1px solid var(--line-d); padding-top: 14px; }
.bb-side li { display: flex; justify-content: space-between; gap: 12px; }
.bb-side li span:last-child { color: var(--muted-d); white-space: nowrap; }
.bb-side .nx { border-top: 1px solid var(--line-d); padding-top: 14px; font-size: 13.5px; color: var(--muted-d); display: grid; gap: 6px; }
.bb-side .nx b { color: var(--white); }
.bb-done { padding: 22px; border-radius: 6px; background: var(--white); border: 1px solid var(--line-l); }
@media (max-width: 1000px) { .bb { grid-template-columns: minmax(0, 1fr); gap: 28px; } .bb-main, .bb-side { grid-column: auto; padding-right: 0; position: relative; top: 0; } }
@media (max-width: 640px) { .pkgs-pick, .adds, .qs { grid-template-columns: 1fr; } .qs .full { grid-column: auto; } }

/* ---------- influencers ---------- */
.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 34px; }
.wall > div { aspect-ratio: 4 / 5; border-radius: 6px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: var(--tone, #333); color: #fff; position: relative; overflow: hidden; }
.wall > div::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -20%; top: -18%; background: rgba(255,255,255,.14); }
.wall b { font-size: clamp(16px, 1.4vw, 21px); letter-spacing: -.035em; line-height: 1.05; position: relative; z-index: 1; }
.wall span { font-size: 12px; font-weight: 600; opacity: .85; position: relative; z-index: 1; }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-d); margin-top: 36px; }
.path > div { padding: 22px 18px 26px 0; position: relative; }
.path > div + div { padding-left: 18px; border-left: 1px solid var(--line-d); }
.path .dot { width: 12px; height: 12px; border-radius: 3px; background: var(--or); margin-bottom: 26px; }
.path h3 { font-size: 19px; letter-spacing: -.03em; margin-bottom: 8px; }
.path p { color: var(--muted-d); font-size: 14px; }
@media (max-width: 1000px) { .path { grid-template-columns: repeat(2, minmax(0, 1fr)); } .path > div { border-left: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--line-d); } }
.ticks { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-l); }
.ticks li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-l); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ticks li::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--or); margin-top: .5em; flex: none; }

/* ---------- FAQ page ---------- */
.faq-cat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 36px 0; border-top: 1px solid var(--line-l); }
.faq-cat > h2 { font-size: 22px; letter-spacing: -.035em; }
.faq-cat .faq { grid-column: 2 / 5; border-top: 0; }
@media (max-width: 900px) { .faq-cat { grid-template-columns: 1fr; gap: 12px; } .faq-cat .faq { grid-column: auto; } }

/* ---------- legal ---------- */
.legal { padding-bottom: var(--sec); }
.legal section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 28px 0; border-top: 1px solid var(--line-l); }
.legal section h2 { font-size: 19px; letter-spacing: -.03em; padding-right: 24px; }
.legal section div { grid-column: 2 / 4; display: grid; gap: 12px; color: #3B3A36; font-size: 16px; }
.legal a { color: inherit; }
@media (max-width: 900px) { .legal section { grid-template-columns: 1fr; gap: 10px; } .legal section div { grid-column: auto; } }

/* ---------- blog + articles ---------- */
.jc .jimg.ph { background: #222 center / cover no-repeat; position: relative; }
.jc .jimg.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.6), transparent 55%); }
.jc .jimg.ph span { position: relative; z-index: 1; align-self: flex-start; padding: 4px 8px; border-radius: 3px; background: var(--jc); }
.art-hero { padding: calc(var(--hdr) + clamp(48px, 7vw, 96px)) 0 0; }
.art-hero h1 { font-size: clamp(38px, 5.2vw, 80px); letter-spacing: -.055em; max-width: 20ch; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--muted-d); }
.art-meta b { color: var(--white); }
.art-img { margin-top: clamp(32px, 4vw, 56px); aspect-ratio: 16 / 8; border-radius: 6px; overflow: hidden; background: #222; }
.art-img img { width: 100%; height: 100%; object-fit: cover; }
.art-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--sec) 0; }
.art-aside { grid-column: 1 / 2; padding-right: 24px; display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--hdr) + 24px); font-size: 13.5px; color: var(--muted-l); }
.art-aside b { color: var(--ink); display: block; font-size: 15px; }
.prose { grid-column: 2 / 4; font-size: 18px; line-height: 1.7; color: #262522; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.04em; margin-top: 1.8em; color: var(--ink); }
.prose h3 { font-size: 21px; letter-spacing: -.03em; margin-top: 1.5em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--or-on-light); text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--or); padding-left: 18px; font-weight: 600; }
.prose img { border-radius: 6px; }
.art-cta { grid-column: 2 / 4; margin-top: 48px; padding: 26px; border-radius: 6px; background: var(--ink); color: var(--white); display: grid; gap: 10px; }
.art-cta .pr { color: var(--or-on-dark); font-weight: 700; font-size: 14px; }
@media (max-width: 1000px) { .art-body { grid-template-columns: 1fr; gap: 28px; } .art-aside, .prose, .art-cta { grid-column: auto; position: relative; top: 0; padding: 0; } .art-cta { padding: 22px; } }

/* ---------- 404 ---------- */
.nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + 40px) 0 80px; }
.nf .big { font-size: clamp(120px, 26vw, 380px); font-weight: 800; letter-spacing: -.09em; line-height: .8; color: var(--white); }
.nf .big em { font-style: normal; color: var(--or); }

/* ---------- small helpers for the build-out ---------- */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pkh { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.dl.link { text-decoration: none; transition: background .25s var(--ease); }
.dl.link:hover { background: var(--white); }
.dl-g.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .dl-g.g3 { grid-template-columns: 1fr; } }
.cells.c3.wide { grid-column: 2 / 5; }
@media (max-width: 1100px) { .cells.c3.wide { grid-column: 1 / 5; } }
.bb-fs { border: 0; }
.bb-fs legend { font-weight: 600; margin-bottom: 10px; }
.bb-adds { margin-top: 28px; }
.bb-adds h3 { font-weight: 600; margin-bottom: 10px; }
.bb-done-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bb-alt { margin: -60px 0 var(--sec); }
.cs-k { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.art-cta-k { font-weight: 600; color: var(--muted-d); }
.nf-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.area .an > b { font-size: 16px; }
.shot .sbx { box-shadow: 0 24px 60px rgba(17,17,16,.18); }
/* sticky screens: the active one shows (must come after the hidden state) */
.how .how-frame > .sbx.on, .how .how-frame > img.on { opacity: 1; transform: none; }
/* explorer proportions */
.ex-out { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ex-post { aspect-ratio: 4 / 3; }
.ex-card { aspect-ratio: auto; min-height: 100%; }
/* mobile menu: clip and scroll its own content, hide fully when closed */
.mnav { overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
.mnav.open { visibility: visible; transition: transform .45s var(--ease); }
.mnav a { font-size: 28px; }
.mnav a.sub { font-size: 22px; }

/* =================================================================
   FEEDBACK ROUND: intro, branding process, upload, sector scroller
   ================================================================= */

/* ---------- branding: how we build each brand ---------- */
.bsteps { border-top: 1px solid var(--line-l); }
.bstep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: clamp(24px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--line-l); align-items: start; }
.bstep h3 { display: flex; align-items: center; gap: 12px; padding-right: 24px; }
.bstep h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--or); flex: none; }
.bstep > div { padding: 0 24px; display: grid; gap: 6px; }
.bstep .k { font-size: 12.5px; font-weight: 600; color: var(--muted-l); }
.bstep .bs-what p { font-size: 16px; line-height: 1.6; color: var(--ink); }
.bstep .bs-you p, .bstep .bs-get p { font-size: 15px; line-height: 1.55; color: var(--muted-l); }
.bstep .bs-get p { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .bstep { grid-template-columns: 1fr; gap: 14px; } .bstep > div { padding: 0; } }
.ex-intro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; margin-bottom: 26px; }
.ex-intro h2 { grid-column: 1 / 3; max-width: 16ch; }
.ex-flag { grid-column: 3 / 5; padding: 16px 18px; border-radius: 4px; background: #FFF4D6; color: #3A2C00; font-size: 14.5px; line-height: 1.55; border-left: 3px solid #E3B23C; }
.ex-flag b { font-weight: 700; }
@media (max-width: 900px) { .ex-intro { grid-template-columns: 1fr; gap: 16px; } .ex-intro h2, .ex-flag { grid-column: auto; } }

/* ---------- influencers: sector scroller ---------- */
.sectors { display: grid; gap: 10px; margin-top: 32px; overflow: hidden; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); padding: 18px 0; }
.sc-row { overflow: hidden; }
.sc-in { display: flex; width: max-content; animation: marq 48s linear infinite; }
.sc-row.rev .sc-in { animation-direction: reverse; animation-duration: 54s; }
.sectors:hover .sc-in { animation-play-state: paused; }
.sc-set { display: flex; flex: none; }
.sc-item { display: inline-flex; align-items: center; gap: 14px; padding: 6px 0 6px 0; margin-right: clamp(28px, 3vw, 52px); white-space: nowrap; }
.sc-item b { font-size: clamp(34px, 4.6vw, 72px); font-weight: 700; letter-spacing: -.055em; line-height: 1; color: var(--ink); }
.sc-row.rev .sc-item b { color: transparent; -webkit-text-stroke: 0; color: #B9B5AD; }
.sc-item i { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--white); }
.sc-row.rev .sc-item i { background: var(--or-fill); }
.sc-item::after { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--or); margin-left: clamp(14px, 1.6vw, 26px); }
@media (prefers-reduced-motion: reduce) { .sc-in { animation: none; flex-wrap: wrap; width: auto; } .sc-set[aria-hidden] { display: none; } }

/* ---------- brief: build or upload ---------- */
.bb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-l); border-radius: 6px; overflow: hidden; margin-bottom: 34px; }
.bb-modes button { display: grid; gap: 4px; text-align: left; padding: 18px 20px; background: transparent; border: 0; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.bb-modes button + button { border-left: 1px solid var(--line-l); }
.bb-modes b { font-size: 17px; letter-spacing: -.03em; }
.bb-modes span { font-size: 13.5px; color: var(--muted-l); }
.bb-modes button[aria-selected="true"] { background: var(--ink); color: var(--white); box-shadow: inset 0 -3px 0 var(--or); }
.bb-modes button[aria-selected="true"] span { color: var(--muted-d); }
.bb[hidden] { display: none !important; }
.drop { position: relative; display: grid; place-items: center; min-height: 190px; border: 2px dashed rgba(17,17,16,.25); border-radius: 6px; background: var(--white); cursor: pointer; text-align: center; padding: 24px; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--or); background: #FFF8F3; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-in { display: grid; gap: 6px; pointer-events: none; }
.drop-in b { font-size: 18px; letter-spacing: -.02em; }
.drop-in span { font-size: 13.5px; color: var(--muted-l); }
.drop:focus-within { outline: 2px solid var(--or); outline-offset: 3px; }
.flist { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.flist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-l); border-radius: 4px; font-size: 14px; background: var(--white); }
.flist li span { color: var(--muted-l); font-size: 12.5px; white-space: nowrap; }
.flist li.bad { border-color: #E5A08A; background: #FFF3EE; }
.flist button { background: none; border: 0; cursor: pointer; font-weight: 700; color: var(--muted-l); padding: 4px 6px; }
.flist button:hover { color: var(--ink); }
@media (max-width: 640px) { .bb-modes { grid-template-columns: 1fr; } .bb-modes button + button { border-left: 0; border-top: 1px solid var(--line-l); } }

/* ---------- section intros + new StudioBook screens ---------- */
.sec-lede { margin-top: 14px; max-width: 64ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--muted-l); }
.dark .sec-lede { color: var(--muted-d); }
.jr-head .sec-lede { font-size: 15.5px; max-width: 56ch; }
.sbx .sbrow { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.sbx .sbrow b { font-size: 1.1em; }
.sbx .vid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1em; margin-top: .8em; }
.sbx .vframe { position: relative; aspect-ratio: 16 / 9; border-radius: .6em; overflow: hidden; background: radial-gradient(60% 80% at 85% 10%, #6E4A30 0 38%, transparent 39%), radial-gradient(70% 90% at 0% 110%, #4A3020 0 45%, transparent 46%), #3A2618; }
.sbx .vt { position: absolute; left: 6%; bottom: 22%; font-size: 3.4em; font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,.85); }
.sbx .vbar { position: absolute; left: 5%; right: 5%; bottom: 10%; height: .35em; border-radius: 99px; background: rgba(255,255,255,.25); }
.sbx .vbar i { position: absolute; inset: 0 70% 0 0; border-radius: 99px; background: #fff; }
.sbx .vtime { position: absolute; left: 5%; bottom: 14.5%; font-size: .8em; color: #fff; }
.sbx .vfb { display: grid; gap: .5em; align-content: start; }
.sbx .fbi { background: rgba(255,255,255,.05); border-radius: .5em; padding: .55em .7em; display: grid; grid-template-columns: auto 1fr; gap: .1em .6em; font-size: .8em; }
.sbx .fbi b { text-decoration: underline; }
.sbx .fbi span { color: rgba(236,235,232,.55); justify-self: end; }
.sbx .fbi p { grid-column: 1 / 3; color: rgba(236,235,232,.88); font-size: 1em; }
.sbx u { text-underline-offset: 2px; }
.levels h3 { font-size: 24px; }

/* =================================================================
   PHONE ALIGNMENT FIXES (24 Oct 2026)
   html clips sideways overflow for Safari versions that ignore overflow: clip on body;
   body keeps clip so sticky sections still work.
   ================================================================= */
@media (max-width: 560px) { .ex-out { grid-template-columns: minmax(0, 1fr); } .ex-web, .ex-note, .ex-post, .ex-card { grid-column: auto; } }
@media (max-width: 760px) { .pk-head { text-align: left; justify-items: start; } .pk-head .toggle { justify-self: start; } }
img, svg, video, canvas { max-width: 100%; }
@media (max-width: 380px) { .fp-l b { font-size: clamp(52px, 19vw, 72px); } .bb-main, .bb-side { min-width: 0; } }
@media (max-width: 420px) { .addons > div { flex-wrap: wrap; gap: 4px 12px; } .addons b { white-space: normal; } }
/* phones: keep only the two outer grid lines (they sit on the text margins), so no line crosses the content */
@media (max-width: 760px) {
  .gl .wrap { grid-template-columns: 1fr; }
  .gl i:nth-child(n+2) { display: none; }
  .gl i:first-child { border-right: 1px solid var(--line-l); }
  .dark .gl i:first-child { border-right-color: var(--line-d); }
  .lbl-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =================================================================
   CONCEPT PROJECTS: photos, product shots and device mock-ups (24 Oct 2026)
   ================================================================= */
.art img { display: block; }
.a-photo { container-type: size; background: var(--ink); }
.a-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-photo .ph-tag { position: absolute; left: clamp(14px, 3cqw, 32px); bottom: clamp(14px, 3.5cqh, 34px); z-index: 2; display: inline-flex; flex-direction: column; gap: 4px; padding: clamp(10px, 1.6cqw, 18px) clamp(14px, 2cqw, 24px); border-radius: 4px; background: var(--bg); color: var(--on); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.a-photo .ph-tag .wm { font-size: clamp(18px, 3.4cqw, 44px); color: var(--on); }
.a-photo .ph-tag small { font-size: clamp(10px, 1.1cqw, 13px); font-weight: 700; opacity: .8; }
.cw .a-photo .ph-tag { bottom: auto; top: clamp(52px, 8cqh, 76px); }

/* phone and laptop over a soft photo */
.a-app, .a-laptop { container-type: size; background: var(--deep); }
.a-app .bgph, .a-laptop .bgph { position: absolute; inset: 0; }
.a-app .bgph img, .a-laptop .bgph img { width: 100%; height: 100%; object-fit: cover; }
.a-app .bgph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 92%, transparent) 0%, color-mix(in srgb, var(--deep) 62%, transparent) 46%, rgba(0,0,0,.12) 100%); }
.a-laptop .bgph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55)); }
.a-app .tagl { position: absolute; left: 7cqw; top: 50%; transform: translateY(-50%); z-index: 2; max-width: 42cqw; color: var(--on); font-size: clamp(26px, 5.4cqw, 72px); font-weight: 800; letter-spacing: -.065em; line-height: .9; }
.a-app .tagl .wm { display: block; font-size: clamp(14px, 2.4cqw, 30px); margin-bottom: 3cqh; color: var(--on); letter-spacing: -.05em; }
.a-app .tagl span { display: block; }
.a-app .ph { position: absolute; right: 10cqw; top: 50%; z-index: 2; width: min(22cqw, 40cqh); min-width: 150px; max-width: 290px; aspect-ratio: 9 / 19; transform: translateY(-50%) rotate(4deg); border-radius: clamp(22px, 3cqw, 38px); background: #0d0d0d; padding: clamp(6px, .7cqw, 9px); box-shadow: 0 40px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); }
.a-app .ph .scr { height: 100%; border-radius: clamp(16px, 2.4cqw, 30px); background: #fff; color: #111; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 12px 11px; }
@container (orientation: portrait) {
  .a-app .tagl { display: none; }
  .a-app .ph { top: 13cqh; bottom: auto; right: 50%; width: 42cqw; min-width: 0; transform: translateX(50%) rotate(4deg); }
  .a-laptop .lap { width: 94cqw; }
  .a-laptop .dash { grid-template-columns: 1fr; }
  .a-laptop .side { display: none; }
}

/* screens inside the phones */
.scr .st { display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 700; padding: 0 2px; }
.scr .st .sig { display: inline-flex; gap: 2px; align-items: flex-end; }
.scr .st .sig i { width: 3px; background: #111; border-radius: 1px; }
.scr .st .sig i:nth-child(1) { height: 4px; } .scr .st .sig i:nth-child(2) { height: 6px; } .scr .st .sig i:nth-child(3) { height: 8px; }
.scr .hd { display: flex; justify-content: space-between; align-items: center; }
.scr .hd .wm { font-size: 14px; color: #111; letter-spacing: -.05em; }
.scr .hd .wm em { color: var(--deep); }
.scr .av { width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: var(--ink); font-size: 8px; font-weight: 800; display: grid; place-items: center; flex: none; }
.scr .ey { font-size: 10px; font-weight: 600; color: #6b6b6b; }
.scr .big { font-size: 16px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.scr .ring { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 10%, #fff); }
.scr .ring svg { width: 40px; height: 40px; transform: rotate(-90deg); flex: none; }
.scr .ring circle { fill: none; stroke: #e6e6e6; stroke-width: 5; }
.scr .ring circle.v { stroke: var(--bg); stroke-linecap: round; }
.scr .ring b { display: block; font-size: 14px; letter-spacing: -.03em; }
.scr small { display: block; font-size: 8.5px; color: #6b6b6b; font-weight: 600; }
.scr .xr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 0 5px; border-bottom: 1px solid #eee; }
.scr .xr .th { width: 28px; height: 28px; border-radius: 6px; overflow: hidden; display: block; }
.scr .xr .th img { width: 100%; height: 100%; object-fit: cover; }
.scr .xr b { font-size: 10px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .xr i { font-style: normal; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #d0d0d0; display: grid; place-items: center; font-size: 8px; color: #fff; }
.scr .xr.done i { background: var(--bg); border-color: var(--bg); }
.scr .pcard { border-radius: 10px; overflow: hidden; position: relative; flex: 1 1 auto; min-height: 60px; display: flex; align-items: flex-end; background: #eee; }
.scr .pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scr .pcard span { position: relative; z-index: 1; padding: 18px 8px 8px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent); width: 100%; font-size: 11px; }
.scr .pcard span small { color: rgba(255,255,255,.82); }
.scr .two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scr .two span { font-size: 8.5px; font-weight: 700; padding: 7px 5px; border-radius: 6px; background: #f2f1ee; text-align: center; line-height: 1.2; }
.scr .meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 10px; font-weight: 600; }
.scr .meter s { grid-column: 1 / 3; height: 6px; border-radius: 3px; background: #eee; position: relative; overflow: hidden; text-decoration: none; }
.scr .meter s::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--bg); border-radius: 3px; }
.scr .cta { margin-top: auto; border-radius: 8px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; padding: 9px; text-align: center; }

/* laptop with the Tilth dashboard */
.a-laptop .lap { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(76cqw, 122cqh, 900px); transform: translate(-50%, -50%); }
.a-laptop .lid { background: #111; border-radius: 14px 14px 0 0; padding: clamp(6px, 1cqw, 12px); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.a-laptop .scr { aspect-ratio: 16 / 10; background: #f6f4ee; border-radius: 4px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); color: #1b1b1b; }
.a-laptop .tb { display: flex; align-items: center; gap: clamp(8px, 2cqw, 22px); padding: clamp(5px, 1.1cqw, 12px) clamp(8px, 1.6cqw, 16px); border-bottom: 1px solid #e5e2d8; font-size: clamp(7px, 1cqw, 12px); font-weight: 600; color: #555; }
.a-laptop .tb .wm { font-size: clamp(10px, 1.7cqw, 19px); color: var(--bg); margin-right: auto; letter-spacing: -.05em; }
.a-laptop .dash { display: grid; grid-template-columns: 1.7fr 1fr; min-height: 0; }
.a-laptop .map { position: relative; overflow: hidden; background: #dfe7cf; }
.a-laptop .mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-laptop .mapsvg path { stroke: rgba(255,255,255,.8); stroke-width: 1.5; }
.a-laptop .mapsvg .edge { fill: none; stroke: #C2411C; stroke-width: 3; stroke-dasharray: 6 4; }
.a-laptop .mapsvg .pin { fill: #fff; stroke: #1b1b1b; stroke-width: 2; }
.a-laptop .mapsvg text { font: 700 11px var(--display); fill: rgba(20,20,20,.75); }
.a-laptop .side { padding: clamp(7px, 1.5cqw, 16px); display: flex; flex-direction: column; gap: clamp(4px, .8cqw, 8px); font-size: clamp(7px, .95cqw, 11px); }
.a-laptop .side small { color: #777; font-weight: 600; }
.a-laptop .side > b { font-size: clamp(9px, 1.5cqw, 17px); letter-spacing: -.03em; line-height: 1.1; }
.a-laptop .kp { display: flex; justify-content: space-between; border-top: 1px solid #e5e2d8; padding-top: 5px; }
.a-laptop .kp b { font-size: clamp(8px, 1.2cqw, 14px); }
.a-laptop .btn2 { margin-top: auto; background: var(--bg); color: #fff; border-radius: 6px; padding: clamp(4px, .8cqw, 8px); text-align: center; font-weight: 700; }
.a-laptop .base { height: clamp(8px, 1.4cqw, 16px); margin: 0 -6%; background: linear-gradient(#d4d4d4, #9a9a9a); border-radius: 0 0 14px 14px; box-shadow: 0 20px 40px rgba(0,0,0,.35); }

/* photos inside the brand mock-ups */
.a-site .pg .img.ph::before, .a-site .pg .img.ph::after { display: none; }
.a-site .pg .img.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-social .grid i.pt { position: relative; overflow: hidden; padding: 0; background: var(--ink); }
.a-social .grid i.pt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-social .grid i.pt em { position: absolute; left: 7%; bottom: 7%; right: 7%; z-index: 1; font-style: normal; color: #fff; font-size: 1.5cqw; text-align: left; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.a-social .grid i.pt em b { font-size: 2.6cqw; }
.a-film .fr.ph { background: var(--ink); }
.a-film .fr.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-film .fr.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 60%); }
.a-film .fr.ph > div { z-index: 2; }
.a-deck .sl.s2.ph { overflow: hidden; opacity: 1; }
.a-deck .sl.s2.ph img { width: 100%; height: 100%; object-fit: cover; }
.a-poster .pbg { position: absolute; inset: 0; }
.a-poster .pbg img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .4; filter: grayscale(1) contrast(1.1); }

/* =================================================================
   HOMEPAGE: three routes in, and who you'll work with
   ================================================================= */
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-l); margin-top: clamp(24px, 3vw, 40px); }
.route { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 30px; text-decoration: none; color: inherit; border-right: 1px solid var(--line-l); }
.route:first-child { padding-left: 0; }
.route:last-child { border-right: 0; padding-right: 0; }
.route .k { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.route .wh { font-size: 13px; font-weight: 600; color: var(--muted-l); }
.route .dsc { font-size: 15px; max-width: 36ch; }
.route .of { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--line-l); font-size: 14px; }
.route .of b { font-size: 15px; }
.route .of span { color: var(--muted-l); }
.route .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #B83A0A; }
.route .go .ar { transition: transform .25s var(--ease); }
.route:hover .go .ar, .route:focus-visible .go .ar { transform: translateX(4px); }
.route:hover .k { color: #B83A0A; }
@media (max-width: 900px) { .routes { grid-template-columns: 1fr; } .route, .route:first-child, .route:last-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line-l); } }

.fd-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.fd-pic { padding: 28px 24px 28px 0; }
.fd-pic img, .fd-pic .mono { width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; object-fit: cover; }
.fd-pic .mono { display: grid; place-items: center; background: var(--ink); color: var(--white); font-size: clamp(48px, 6vw, 96px); font-weight: 800; letter-spacing: -.06em; }
.fd-main { grid-column: 2 / 5; padding: 28px 24px; border-left: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 18px; }
.fd-main h2 span { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted-l); margin-top: 8px; }
.fd-proof { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.fd-proof li { display: grid; gap: 2px; align-content: start; padding: 14px 20px 14px 0; }
.fd-proof b { font-size: 16px; }
.fd-proof span { font-size: 13.5px; color: var(--muted-l); }
.founder .logos { margin-top: 8px; }
@media (max-width: 1100px) { .fd-proof { grid-template-columns: 1fr; border-bottom: 0; } .fd-proof li { padding: 12px 0; border-bottom: 1px solid var(--line-l); } }
@media (max-width: 1000px) { .fd-g { grid-template-columns: 1fr 1fr; } .fd-main { grid-column: 2 / 3; padding-right: 0; } }
@media (max-width: 640px) { .fd-g { grid-template-columns: 1fr; } .fd-pic { padding-right: 0; max-width: 200px; } .fd-main { grid-column: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--line-l); } }
.q-g.q2 .q-head { grid-column: span 2; }
@media (max-width: 1000px) { .q-g.q2 .q-head { grid-column: auto; } }

/* concept project pages */
.cs-res.meas b { font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.045em; line-height: 1.05; }
.cs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-l); }
.cs-cta b { margin-right: auto; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.04em; }
.cs-disc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cs-gal .gi:nth-child(n+2) { aspect-ratio: 4 / 3; }

/* services: every service open, with clear labels */
.svc .sb .k { font-size: 12.5px; font-weight: 700; color: var(--muted-l); margin-bottom: 10px; }

/* =================================================================
   SAMPLE TREATMENT (branding page): trigger and full-screen viewer
   ================================================================= */
.tr-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.tr-l { grid-column: 1 / 3; padding: 28px 32px 28px 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.tr-list { margin: 2px 0 6px; }
.tr-stack { grid-column: 3 / 5; position: relative; min-height: clamp(320px, 34vw, 480px); margin: 28px 0; border: 0; padding: 0; background: none; cursor: pointer; display: block; text-align: left; font: inherit; color: inherit; }
.tr-card { position: absolute; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px rgba(17,17,16,.22); transition: transform .5s var(--ease); background: #fdfdfb; }
.tr-card.c1 { inset: 9% 7% 13% 0; transform: rotate(-2deg); }
.tr-card.c1 img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.tr-cov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: clamp(16px, 2vw, 28px); color: #fff; }
.tr-cov small { font-size: 13px; opacity: .85; }
.tr-cov b { font-size: clamp(36px, 4.4vw, 68px); font-weight: 600; letter-spacing: -.045em; line-height: .95; }
.tr-card.c2 { inset: 4% 2% 17% 7%; transform: rotate(3deg); background: #141210; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18% 8% 8%; align-items: end; }
.tr-card.c2 i { height: 42%; border-radius: 3px; }
.tr-card.c3 { inset: 0 0 21% 13%; transform: rotate(6deg); display: flex; flex-direction: column; justify-content: space-between; padding: 6%; color: #1d1c1a; }
.tr-card.c3 b { font-size: clamp(80px, 10vw, 150px); font-weight: 800; letter-spacing: -.06em; line-height: .8; }
.tr-card.c3 small { font-size: 12px; color: #67645f; }
.tr-stack:hover .c1, .tr-stack:focus-visible .c1 { transform: rotate(-3deg) translateY(-6px); }
.tr-stack:hover .c2, .tr-stack:focus-visible .c2 { transform: rotate(5deg) translateX(10px); }
.tr-stack:hover .c3, .tr-stack:focus-visible .c3 { transform: rotate(9deg) translateX(18px); }
.tr-hint { position: absolute; left: 0; bottom: 0; font-size: 13px; font-weight: 700; background: var(--ink); color: var(--white); padding: 8px 12px; border-radius: 3px; }
.tr-stack:focus-visible { outline: 2px solid var(--or); outline-offset: 6px; }
@media (max-width: 900px) { .tr-g { grid-template-columns: 1fr; } .tr-l, .tr-stack { grid-column: auto; padding-right: 0; } .tr-stack { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .tr-card { transition: none; } }

html.trv-open { overflow: hidden; }
.trv { --t-paper: #fdfdfb; --t-ink: #1d1c1a; --t-ink2: #67645f; --t-rule: #e1dfda; width: min(1320px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 8px; background: #d2d0cb; color: var(--t-ink); overflow: hidden; }
.trv[open] { display: flex; flex-direction: column; animation: trv-in .35s var(--ease); }
.trv::backdrop { background: rgba(10,10,10,.66); }
@keyframes trv-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.trv-bar { display: flex; align-items: center; gap: 16px; padding: 12px clamp(14px, 2.4vw, 28px); border-bottom: 1px solid rgba(0,0,0,.08); font-size: 13.5px; }
.trv-bar > span:first-child { margin-right: auto; }
.trv-n { font-variant-numeric: tabular-nums; color: var(--t-ink2); }
.trv-x { border: 1px solid rgba(0,0,0,.2); background: var(--t-paper); padding: 7px 14px; border-radius: 3px; font-size: 13px; font-weight: 600; cursor: pointer; }
.trv-x:hover { border-color: var(--t-ink); }
.trv-doc { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(14px, 2.4vw, 32px) clamp(14px, 2.4vw, 32px) 90px; display: grid; gap: clamp(14px, 2vw, 26px); align-content: start; outline: none; }
.trv-pager { position: absolute; right: 20px; bottom: 20px; z-index: 2; display: flex; align-items: center; background: var(--t-paper); font-size: 13.5px; border-radius: 3px; box-shadow: 0 1px 2px rgba(29,28,26,.16), 0 12px 32px -14px rgba(29,28,26,.45); }
.trv-pager button { width: 42px; height: 42px; border: 0; background: none; cursor: pointer; font-size: 22px; color: var(--t-ink); }
.trv-pager button:hover { background: var(--t-rule); }
.trv-pager button:disabled { opacity: .3; cursor: default; background: none; }
.trv-pager span { min-width: 4.6em; text-align: center; font-variant-numeric: tabular-nums; }
.trv .t-page { background: var(--t-paper); color: var(--t-ink); padding: clamp(18px, 2.6vw, 36px); display: grid; gap: clamp(16px, 2.2vw, 28px); position: relative; min-width: 0; font-family: "Geist", system-ui, sans-serif; font-size: 16px; line-height: 1.55; border-radius: 2px; }
.trv .t-ph, .trv .t-pf { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--t-ink2); flex-wrap: wrap; }
.trv .t-pno { font-weight: 600; color: var(--t-ink); }
.trv .t-dh { margin: 0; font: 600 clamp(30px, 4vw, 56px)/1.02 "Geist", system-ui, sans-serif; letter-spacing: -.035em; }
.trv .t-lede { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; max-width: 58ch; }
.trv .t-small { margin: 0; font-size: 13.5px; color: var(--t-ink2); max-width: 62ch; }
.trv .t-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 3vw, 40px); align-items: start; }
.trv .t-two.t-end { align-items: end; }
.trv .t-stack { display: grid; gap: 12px; align-content: start; min-width: 0; margin: 0; }
.trv .t-slot { position: relative; overflow: hidden; background: #ecebe7; min-height: 150px; }
.trv .t-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trv .t-slot.tall { min-height: 320px; height: 100%; }
.trv .t-cover { padding: 0; overflow: hidden; color: #fff; background: #2a2926; aspect-ratio: 16 / 9; }
.trv .t-cover .t-slot { position: absolute; inset: 0; min-height: 0; }
.trv .t-cover .t-slot img { filter: brightness(.66); }
.trv .t-cover .t-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2.6vw, 36px); background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 30%, transparent 55%, rgba(0,0,0,.5)); }
.trv .t-cover .t-ph { color: rgba(255,255,255,.85); }
.trv .t-cover h3 { margin: 0; font: 600 clamp(44px, 8vw, 120px)/.92 "Geist", system-ui, sans-serif; letter-spacing: -.045em; }
.trv .t-cover .t-meta { margin: 0; font-size: 14px; max-width: 44ch; }
.trv .t-big { margin: 0; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.24; letter-spacing: -.02em; max-width: 26ch; }
.trv .t-toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-rule); }
.trv .t-toc li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--t-rule); }
.trv .t-toc li span:last-child { color: var(--t-ink2); }
.trv .t-mood { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.trv .t-mood figure { margin: 0; display: grid; gap: 6px; min-width: 0; align-content: start; }
.trv .t-mood figure:nth-child(1) { grid-column: span 7; }
.trv .t-mood figure:nth-child(2) { grid-column: span 5; }
.trv .t-mood figure:nth-child(n+3) { grid-column: span 3; }
.trv .t-mood figure:nth-child(-n+2) .t-slot { aspect-ratio: 4 / 3; }
.trv .t-mood figure:nth-child(n+3) .t-slot { aspect-ratio: 1; min-height: 0; }
.trv .t-mood figcaption { font-size: 12.5px; color: var(--t-ink2); }
.trv .t-cpage { background: var(--c0); color: var(--c1); }
.trv .t-cpage .t-ph, .trv .t-cpage .t-pf, .trv .t-cpage .t-small { color: color-mix(in srgb, var(--c1) 68%, transparent); }
.trv .t-cpage .t-pno { color: var(--c1); }
.trv .t-cgrad { height: clamp(100px, 13vw, 190px); position: relative; overflow: hidden; background: var(--c0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 14%, transparent); }
.trv .t-cgrad::before { content: ""; position: absolute; inset: -40% -10% -40% 30%; background: radial-gradient(closest-side, var(--g0), var(--g1) 40%, var(--g2) 72%, transparent); filter: blur(28px); }
.trv .t-cgrad span { position: absolute; left: 16px; bottom: 12px; font-size: 12px; z-index: 1; }
.trv .t-gstrip { height: 14px; background: linear-gradient(90deg, var(--g0), var(--g1), var(--g2)); }
.trv .t-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.trv .t-chip { display: grid; grid-template-rows: minmax(96px, 9vw) auto; background: var(--t-paper); color: var(--t-ink); min-width: 0; }
.trv .t-sw { box-shadow: inset 0 0 0 1px rgba(127,127,127,.3); }
.trv .t-lab { padding: 10px 11px 12px; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.35; }
.trv .t-lab b { font-size: 14px; font-weight: 600; }
.trv .t-lab span { color: var(--t-ink2); }
.trv .t-lab .t-hex { color: var(--t-ink); font-variant-numeric: tabular-nums; }
.trv .t-ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.trv .t-ctable td { padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--c1) 18%, transparent); vertical-align: top; }
.trv .t-ctable td:nth-child(2) { text-align: right; white-space: nowrap; padding-left: 14px; }
.trv .t-ctable td:last-child { text-align: right; padding-left: 14px; white-space: nowrap; color: color-mix(in srgb, var(--c1) 72%, transparent); }
.trv .t-sample { display: inline-block; width: 1.4em; height: 1.4em; margin-right: 10px; vertical-align: -.35em; box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); font-weight: 600; font-size: .8em; line-height: 1.75; text-align: center; }
.trv .t-tpg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 48px); align-items: start; }
.trv .t-glyph { font-family: var(--fd); font-weight: var(--fw); font-size: clamp(120px, 17vw, 240px); line-height: .82; letter-spacing: -.04em; margin: 0; }
.trv .t-fonts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14.5px; border-top: 1px solid var(--t-rule); padding-top: 14px; }
.trv .t-fonts dt { color: var(--t-ink2); }
.trv .t-fonts dd { margin: 0; font-weight: 500; }
.trv .t-water { display: grid; gap: clamp(10px, 1.4vw, 18px); border-top: 1px solid var(--t-rule); padding-top: clamp(14px, 2vw, 24px); }
.trv .t-water .r { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: baseline; gap: 16px; }
.trv .t-water .r > span { font-size: 12px; color: var(--t-ink2); }
.trv .t-water .hd { font-family: var(--fd); font-weight: var(--fw); margin: 0; line-height: .95; letter-spacing: -.03em; overflow-wrap: anywhere; }
.trv .t-water .r:nth-child(1) .hd { font-size: clamp(40px, 6.4vw, 96px); }
.trv .t-water .r:nth-child(2) .hd { font-size: clamp(26px, 3.4vw, 48px); }
.trv .t-water .r:nth-child(3) .hd { font-size: clamp(20px, 2vw, 28px); }
.trv .t-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); border-top: 1px solid var(--t-rule); padding-top: clamp(14px, 2vw, 24px); }
.trv .t-body .cap { font-size: 12.5px; color: var(--t-ink2); display: block; margin-bottom: 10px; }
.trv .t-body .bd { font-family: var(--fb); font-size: 18px; line-height: 1.6; max-width: 46ch; margin: 0; }
.trv .t-body .lbs { font-family: var(--fl); font-size: 14px; font-weight: 600; margin: 0; }
.trv .t-qs { display: grid; border-top: 1px solid var(--t-rule); }
.trv .t-q { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(12px, 3vw, 40px); padding: 16px 0; border-bottom: 1px solid var(--t-rule); }
.trv .t-q .qt { font-weight: 600; font-size: 17px; line-height: 1.35; margin: 0; }
.trv .t-q .qa { margin: 0; font-size: 16px; padding: 6px 10px; background: color-mix(in srgb, var(--t-rule) 45%, transparent); border-left: 3px solid #9BE15D; }
.trv .t-apps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.trv .t-app { display: grid; gap: 8px; min-width: 0; align-content: start; }
.trv .t-app > span { font-size: 13px; color: var(--t-ink2); }
.trv .m-web { grid-column: span 8; } .trv .m-ig { grid-column: span 4; } .trv .m-cards { grid-column: span 7; } .trv .m-av { grid-column: span 5; }
.trv .mk-web, .trv .mk-ig { position: relative; overflow: hidden; background: var(--p0); color: var(--p1); container-type: inline-size; }
.trv .mk-web { aspect-ratio: 16 / 10; } .trv .mk-ig { aspect-ratio: 1; }
.trv .mk-web img, .trv .mk-ig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.85); }
.trv .mk-web .ui, .trv .mk-ig .ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4cqw; z-index: 1; }
.trv .mk-web .nav { display: flex; justify-content: space-between; align-items: center; font-family: var(--fl); font-size: clamp(8px, 1.3cqw, 13px); }
.trv .mk-web .nav b { font-family: var(--fd); font-weight: var(--fw); font-size: clamp(12px, 2.4cqw, 22px); letter-spacing: -.03em; }
.trv .mk-web .hd { font-family: var(--fd); font-weight: var(--fw); font-size: 9cqw; line-height: .92; letter-spacing: -.04em; margin: 0; }
.trv .mk-web .bot { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.trv .mk-web .bd { font-family: var(--fb); font-size: clamp(9px, 1.5cqw, 15px); max-width: 34ch; margin: 0; opacity: .9; }
.trv .mk-web .cta { background: var(--p2); color: var(--p0); padding: .7em 1.2em; font-family: var(--fl); font-weight: 700; font-size: clamp(8px, 1.3cqw, 13px); white-space: nowrap; }
.trv .mk-ig .hd { font-family: var(--fd); font-weight: var(--fw); font-size: 10cqw; line-height: .95; letter-spacing: -.03em; margin: 0; }
.trv .mk-ig .lb { font-family: var(--fl); font-size: 3.4cqw; font-weight: 600; margin-bottom: 2cqw; opacity: .85; }
.trv .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trv .bc { aspect-ratio: 85 / 55; position: relative; overflow: hidden; container-type: inline-size; box-shadow: 0 1px 2px rgba(29,28,26,.12), 0 8px 24px -12px rgba(29,28,26,.35); }
.trv .bc.f { background: var(--p0); color: var(--p1); display: grid; place-items: center; }
.trv .bc.f .ini { font-family: var(--fd); font-weight: var(--fw); font-size: 16cqw; letter-spacing: -.04em; line-height: 1; }
.trv .bc.f::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3cqw; background: linear-gradient(90deg, var(--g0), var(--g1), var(--g2)); }
.trv .bc.b { background: var(--p1); color: var(--p0); padding: 7cqw; display: flex; flex-direction: column; justify-content: space-between; }
.trv .bc.b .nm { font-family: var(--fd); font-weight: var(--fw); font-size: 9cqw; line-height: 1; margin: 0; }
.trv .bc.b .blb { font-family: var(--fl); font-size: 4cqw; color: var(--p3); margin-top: 2cqw; }
.trv .bc.b .bd { font-family: var(--fb); font-size: 4.2cqw; line-height: 1.5; margin: 0; }
.trv .avs { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.trv .av { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-family: var(--fd); font-weight: var(--fw); font-size: 30px; letter-spacing: -.04em; flex: none; }
.trv .av.k { background: var(--p0); color: var(--p1); } .trv .av.a { background: var(--p2); color: var(--p0); } .trv .av.c { background: var(--p1); color: var(--p0); box-shadow: inset 0 0 0 1px var(--t-rule); }
@media (max-width: 760px) {
  .trv { width: 100vw; height: 100dvh; border-radius: 0; }
  .trv .t-two, .trv .t-tpg, .trv .t-body, .trv .t-q { grid-template-columns: minmax(0, 1fr); }
  .trv .t-mood figure:nth-child(n) { grid-column: span 6; }
  .trv .m-web, .trv .m-ig, .trv .m-cards, .trv .m-av { grid-column: 1 / -1; }
  .trv .t-cover { aspect-ratio: 4 / 5; }
  .trv .t-ctable td:last-child { display: none; }
  .trv-pager { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .trv[open] { animation: none; } }
/* treatment pages stack in a column so the 16:9 cover keeps its height */
.trv-doc { display: flex; flex-direction: column; }
.trv-doc > .t-page { flex: none; }
/* founder: a smaller monogram until a real photo of Adam is added (static/img/adam.jpg) */
.fd-pic .mono { aspect-ratio: 1; max-width: 220px; }
@media (max-width: 640px) { .fd-pic { max-width: 112px; padding: 22px 0 18px; } .fd-pic .mono { font-size: 40px; } }
@media (max-width: 760px) { .cs-cover { aspect-ratio: 4 / 5; } }
.trv-doc { overflow-x: hidden; }
.trv .t-page { max-width: 100%; }

/* =================================================================
   HOMEPAGE, CONDENSED (25 Oct 2026): fewer sections, one pinned portal screen,
   a brand kit and concept photos that drift a little, swipe rows on phones
   ================================================================= */
.home { --sec: clamp(72px, 8.4vw, 120px); }

/* where to start: the question, with the plain-words answer beside it */
.home .routes-sec { padding-top: calc(var(--sec) * .5); }
.routes-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.routes-head h2 { grid-column: 1 / 3; padding-right: 24px; }
.routes-head > div { grid-column: 3 / 5; }
.routes-head .answer { font-size: 16px; color: var(--muted-l); }
.routes-head .answer b { color: var(--ink); font-weight: 600; }
.routes-head .sec-lede { margin-top: 10px; font-size: 14px; }
@media (max-width: 900px) { .routes-head { grid-template-columns: 1fr; gap: 18px; } .routes-head h2, .routes-head > div { grid-column: auto; padding: 0; } }

/* founder: all three recommendations in one row (a swipe row on phones) */
.fd-qs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.fd-qs .q-head { padding: 28px 24px 28px 0; display: grid; gap: 12px; align-content: start; }
.q-rail { grid-column: 2 / 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-rail .qc { gap: 20px; }
.q-rail .qc blockquote { font-size: clamp(17px, 1.3vw, 20px); }
@media (max-width: 1000px) { .fd-qs { grid-template-columns: 1fr; } .fd-qs .q-head { padding: 24px 0 4px; } .q-rail { grid-column: auto; } }
@media (min-width: 761px) and (max-width: 1000px) { .q-rail .qc { border-top: 0; padding: 20px; } .q-rail .qc:first-child { padding-left: 0; } .q-rail .qc + .qc { border-left: 1px solid var(--line-l); } }
@media (max-width: 760px) {
  .q-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 28px; scrollbar-width: none; }
  .q-rail::-webkit-scrollbar { display: none; }
  .q-rail .qc { flex: 0 0 84%; scroll-snap-align: start; padding: 20px; border: 1px solid var(--line-l); border-radius: 6px; background: var(--white); }
}

/* what we build: the light version of the pinned screen */
.how.build { padding-top: 0; }
.build-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.build-head h2 { grid-column: 1 / 3; padding-right: 24px; }
.build-head > div { grid-column: 3 / 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.build-head p { max-width: 44ch; }
.build .how-steps::before { background: var(--line-l); }
.build .how-frame { border-color: var(--line-l); box-shadow: 0 30px 70px rgba(17, 17, 16, .18); }
.build .how-cap { color: var(--muted-l); }
.build .hstep { padding-bottom: clamp(44px, 8vh, 88px); }
.build .hstep::before { background: var(--paper); border-color: rgba(17, 17, 16, .3); }
.build .hstep.on::before { background: var(--c); border-color: var(--c); }
.build .hstep h3 { margin: 0 0 6px; }
.build .hstep .ln { display: block; font-size: 15px; margin-bottom: 8px; }
.build .hstep p { color: var(--muted-l); font-size: 15px; }
.build .hstep .tags { margin-top: 14px; }
.build .hstep .from { margin-top: 14px; font-size: 14px; font-weight: 700; }
.build .hstep .from small { display: block; font-size: 12px; font-weight: 500; color: var(--muted-l); }
@media (max-width: 900px) { .build-head { grid-template-columns: 1fr; gap: 18px; } .build-head h2, .build-head > div { grid-column: auto; padding: 0; } .build .hstep { padding-bottom: 36px; } }

/* branding + concept projects (dark): one section */
.bw .bw-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
.bw-txt { grid-column: 1 / 3; padding-right: clamp(24px, 4vw, 72px); }
.bw-txt .d3 { margin-bottom: 18px; max-width: 13ch; }
.bw .board-wrap { grid-column: 3 / 5; }
.bw .board { grid-auto-rows: clamp(52px, 4.9vw, 82px); }
.cw-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 16px 0; margin-top: clamp(64px, 8vw, 112px); padding-top: 22px; border-top: 1px solid var(--line-d); scroll-margin-top: calc(var(--hdr) + 16px); }
.cw-head .lbl { grid-column: 1 / 5; }
.cw-head h2 { grid-column: 1 / 3; }
.cw-head p { grid-column: 3 / 5; max-width: 52ch; font-size: 15px; }
.cw-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.cw { position: relative; display: block; height: clamp(380px, 36vw, 540px); border-radius: 6px; overflow: hidden; isolation: isolate; text-decoration: none; color: var(--white); background: var(--ink-2); }
.cw:first-child { grid-column: span 2; }
.cw-art { position: absolute; inset: -7% 0; }
.cw-art .art { position: absolute; inset: 0; }
.cw-strip { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font-size: 12.5px; font-weight: 600; background: linear-gradient(180deg, rgba(10, 10, 10, .55), transparent); }
.cw-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; justify-items: start; gap: 14px; padding: 20px 18px; background: linear-gradient(0deg, rgba(10, 10, 10, .82) 18%, transparent); }
.cw-foot h3 { font-size: clamp(19px, 1.55vw, 25px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; max-width: 24ch; }
.cw:first-child .cw-foot h3 { font-size: clamp(23px, 2.3vw, 36px); max-width: 22ch; }
.cw-foot .go { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 3px; background: var(--white); color: var(--ink); transition: background .25s, color .25s; }
.cw:hover .go, .cw:focus-visible .go { background: var(--or-fill); color: #fff; }
.bw .cases-more { margin-top: 24px; }
/* two dark sections meet here: a hairline and a shorter gap */
.home .bw { padding-bottom: calc(var(--sec) * .7); }
.home .bw + .how { padding-top: calc(var(--sec) * .7); border-top: 1px solid var(--line-d); }
@media (prefers-reduced-motion: no-preference) { .board[data-par] [data-depth], .cw-art { will-change: transform; } }
@media (max-width: 1100px) { .bw .bw-g { grid-template-columns: 1fr; gap: 36px; } .bw-txt, .bw .board-wrap { grid-column: auto; padding: 0; } }
@media (max-width: 900px) { .cw-head { grid-template-columns: 1fr; } .cw-head .lbl, .cw-head h2, .cw-head p { grid-column: auto; } .cw-g { grid-template-columns: 1fr 1fr; } .cw:first-child { grid-column: 1 / 3; } }
@media (max-width: 760px) {
  .cw-g { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin: clamp(24px, 6vw, 32px) calc(var(--pad) * -1) 0; padding: 0 var(--pad) 4px; scrollbar-width: none; }
  .cw-g::-webkit-scrollbar { display: none; }
  .cw, .cw:first-child { flex: 0 0 84%; height: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; }
}

/* packages: a swipe row on phones */
@media (max-width: 620px) {
  .pk-rail .pk-g { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); border: 0; margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 4px; scrollbar-width: none; }
  .pk-rail .pk-g::-webkit-scrollbar { display: none; }
  .pk-rail .pk { flex: 0 0 86%; scroll-snap-align: start; border: 1px solid var(--line-l); border-radius: 6px; }
}

/* blog: three headlines */
.jl-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.jl-head { grid-column: 1 / 2; padding: 26px 24px 26px 0; display: grid; gap: 12px; align-content: start; }
.jl-head .ul { justify-self: start; margin-top: 4px; }
.jl-list { grid-column: 2 / 5; border-left: 1px solid var(--line-l); }
.jl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) auto; gap: 8px 24px; align-items: baseline; padding: 22px 0 22px 24px; border-bottom: 1px solid var(--line-l); text-decoration: none; transition: background .25s; }
.jl-row:last-child { border-bottom: 0; }
.jl-k { font-size: 13px; font-weight: 600; color: var(--or-on-light); }
.jl-t { font-size: clamp(17px, 1.4vw, 21px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.jl-m { font-size: 13px; color: var(--muted-l); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .jl-row:hover { background: var(--white); } .jl-row:hover .jl-t { color: var(--or-on-light); } }
@media (max-width: 900px) { .jl-g { grid-template-columns: 1fr; } .jl-head { padding: 24px 0 12px; } .jl-list { grid-column: auto; border-left: 0; border-top: 1px solid var(--line-l); } .jl-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } }

/* closing block: on the homepage the credentials deck request sits beside Let's talk */
.talk-deck { grid-column: 3 / 5; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--line-d); border-radius: 6px; background: var(--ink-2); scroll-margin-top: calc(var(--hdr) + 24px); }
.talk-deck h3 { font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; margin-bottom: 6px; }
.talk-deck > .muted { margin-bottom: 18px; }
.dark .field { border-bottom-color: rgba(242, 241, 238, .45); }
.dark .field input::placeholder { color: rgba(242, 241, 238, .5); }
.dark .field button { background: var(--or-fill); color: #fff; }
.dark .field button:hover { background: var(--or); }
@media (max-width: 900px) { .talk-deck { grid-column: auto; } }
/* homepage: shorter gaps between Packages, the Blog list and the closing block */
.home .pkgs { padding-bottom: calc(var(--sec) * .6); }
.home .pkgs + .jr { padding-top: calc(var(--sec) * .6); }
.home .talk { padding-top: calc(var(--sec) * .8); }

/* cookie box: never blocks the page; Accept and Reject carry equal weight; reopened from "Cookie settings" */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 55; width: min(410px, calc(100vw - 32px)); padding: 14px 14px 12px; border: 1px solid var(--line-d); border-radius: 6px; background: var(--ink-2); color: var(--white); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: 13.5px; line-height: 1.45; }
.cookie p { color: rgba(242, 241, 238, .82); }
.cookie p a { color: var(--white); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }
.cookie-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.cookie-btns button { min-height: 42px; border: 1px solid rgba(242, 241, 238, .5); border-radius: 4px; background: transparent; color: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .cookie-btns button:hover { background: var(--white); color: var(--ink); border-color: var(--white); } }
body.cookie-open .float-cta { display: none; }
.foot-base .cookie-link { margin-left: 18px; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.foot-base .cookie-link:hover { color: var(--white); }
/* wide screens: the box sits in the empty space between the homepage hero's text and its buttons */
@media (min-width: 1280px) { .cookie { left: calc(50% + 80px); width: 350px; transform: translateX(-50%); } }
@media (max-width: 620px) { .cookie { left: 10px; right: 10px; bottom: 10px; width: auto; } }
/* the last section before the footer needs less air now that inner pages end straight into the footer */
main > .sec:last-child { padding-bottom: calc(var(--sec) * .6) !important; } /* beats the inline section paddings */

/* =================================================================
   ACCESSIBILITY + USABILITY PASS (26 Oct 2026)
   ================================================================= */
html { scroll-padding-top: calc(var(--hdr) + 16px); } /* anchors and keyboard focus land below the fixed header */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field:focus-within { border-bottom-color: var(--or); box-shadow: 0 1px 0 var(--or); }
/* grey text inside the dark Founding band and brief summary uses the dark-background grey */
.fp-m .muted, .fp-r .muted, .bb-side .muted { color: var(--muted-d); }
.fp-m .muted b { color: var(--white); }
/* the logo and niche strips are still rows (moving content must be pausable; calmer too) */
.logos-in { width: auto; max-width: var(--max); margin: 0 auto; padding: 26px var(--pad); animation: none; flex-wrap: wrap; justify-content: center; gap: 22px clamp(28px, 4vw, 64px); }
.sc-in { animation: none; flex-wrap: wrap; width: auto; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sc-set[aria-hidden] { display: none; }
.sc-set { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
.sc-item b { font-size: clamp(24px, 2.8vw, 42px); }
.sc-row.rev .sc-item b { color: var(--muted-l); }
/* dropdown buttons show the current section like the other menu items; Esc can close a focused dropdown */
.hdr .grp > button[aria-current] { background: linear-gradient(var(--or), var(--or)) left bottom / 100% 2px no-repeat; }
.hdr .grp.shut .menu { opacity: 0; visibility: hidden; }
/* bigger hit area for the packages switch */
.toggle .sw::before { content: ""; position: absolute; inset: -8px -4px; }
/* brief builder on phones: Back and Continue stay within reach */
@media (max-width: 760px) { .bb-nav { position: sticky; bottom: 0; z-index: 6; margin: 24px calc(var(--pad) * -1) 0; padding: 12px var(--pad); background: var(--paper); border-top: 1px solid var(--line-l); } }
/* pages with their own call to action don't need the floating one */
.no-float .float-cta { display: none; }

/* =================================================================
   FOUNDER QUOTES + BRANDING TOUR (26 Oct 2026)
   ================================================================= */
/* founder: the recommendations read as their own block, on a lighter band */
.fd-qs { position: relative; margin-top: clamp(32px, 4vw, 56px); border-top: 0; }
.fd-qs::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--white); border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.qh { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.fd-more { align-self: flex-start; font-size: 15px; font-weight: 600; }

/* branding: seven steps in one compact row */
.bs-row { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line-l); }
.bs-row li { display: grid; gap: 8px; align-content: start; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line-l); }
.bs-row li + li { padding-left: 16px; border-left: 1px solid var(--line-l); }
.bs-row b { font-size: 16px; letter-spacing: -.02em; line-height: 1.2; }
.bs-row span { font-size: 13.5px; line-height: 1.45; color: var(--muted-l); }
@media (max-width: 1100px) { .bs-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bs-row li:nth-child(4n + 1) { padding-left: 0; border-left: 0; } }
@media (max-width: 640px) { .bs-row { grid-template-columns: 1fr; } .bs-row li, .bs-row li + li { padding: 14px 0; border-left: 0; } }

/* branding tour: a pinned sheet turns the document's pages as the steps scroll past */
.btour .how-frame { background: #fdfdfb; }
.btour .tp-sheet img { opacity: 1; transform: none; transition: none; object-position: center; }
.how .how-frame > .tp { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.how .how-frame > .tp.on { opacity: 1; transform: none; }
.tp figcaption { display: none; }
.tp-sheet { position: absolute; inset: 0; container-type: size; overflow: hidden; display: flex; flex-direction: column; gap: 3cqh; padding: 4.2cqw 4.6cqw; background: #fdfdfb; color: #1d1c1a; font-family: "Geist", system-ui, sans-serif; }
.tp-top { display: flex; justify-content: space-between; gap: 2cqw; font-size: max(9px, 1.35cqw); color: #67645f; }
.tp-lab { font-size: max(9px, 1.4cqw); font-weight: 600; color: #67645f; }
.tp-h { font-size: 3.4cqw; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.tp-sm { font-size: max(9px, 1.45cqw); line-height: 1.45; color: #47453f; max-width: 52ch; }
.tp-img, .tp-tile, .tp-post { position: relative; overflow: hidden; border-radius: 3px; background: #ecebe7; min-height: 0; }
.tp-img img, .tp-tile img, .tp-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-idea-g { flex: 1; display: grid; grid-template-columns: 7fr 5fr; gap: 3.4cqw; min-height: 0; }
.tp-idea-g > div:first-child { display: flex; flex-direction: column; justify-content: center; gap: 2.4cqh; }
.tp-state { font-size: 4.4cqw; font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.tp-tiles { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 1.2cqw; min-height: 0; }
.tp-s-col { justify-content: center; gap: 5cqh; }
.tp-pn { font-size: 2.2cqw; font-weight: 600; letter-spacing: -.02em; margin-bottom: 1.6cqh; }
.tp-sws { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; height: 22cqh; }
.tp-sw { position: relative; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.tp-sw i { position: absolute; left: 1cqw; bottom: .9cqw; font-style: normal; font-size: max(8px, 1.15cqw); font-weight: 600; }
.tp-types { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3.4cqw; align-items: center; }
.tp-tc { display: grid; gap: 1.8cqh; padding-top: 2.4cqh; border-top: 1px solid #e1dfda; }
.tp-ts { font-family: var(--fd); font-weight: var(--fw); font-size: 5.2cqw; letter-spacing: -.035em; line-height: 1; }
.tp-tb { font-family: var(--fb); font-size: max(9px, 1.5cqw); line-height: 1.45; color: #47453f; }
.tp-fn { font-size: max(8px, 1.25cqw); color: #67645f; }
.tp-qa { flex: 1; display: grid; gap: 2.6cqh; align-content: center; }
.tp-q { display: grid; gap: .8cqh; padding-bottom: 2.2cqh; border-bottom: 1px solid #e1dfda; }
.tp-q b { font-size: max(9px, 1.6cqw); }
.tp-ans { font-size: max(9px, 1.6cqw); color: #47453f; }
.tp-tog-g { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.6cqw; min-height: 0; }
.tp-web { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: 2.4cqw; border-radius: 3px; background: var(--d); color: var(--l); }
.tp-nav { display: flex; justify-content: space-between; font-size: max(8px, 1.3cqw); }
.tp-nav b { color: var(--ac); font-weight: 800; }
.tp-whd { font-family: var(--fd); font-weight: var(--fw); font-size: 4.4cqw; letter-spacing: -.04em; line-height: 1; }
.tp-cta { align-self: flex-start; padding: .8cqw 1.4cqw; border-radius: 2px; background: var(--ac); color: var(--d); font-size: max(8px, 1.3cqw); font-weight: 700; }
.tp-post span { position: absolute; left: 1.2cqw; bottom: 1.2cqw; padding: .5cqw 1cqw; border-radius: 2px; background: var(--ac); color: var(--d); font-size: max(8px, 1.4cqw); font-weight: 800; }
.tp-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.6cqw; border-radius: 3px; background: var(--l); color: var(--d); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.tp-card b { font-family: var(--fd); font-weight: 800; font-size: 3cqw; }
.tp-card span { font-size: max(8px, 1.2cqw); line-height: 1.35; }
/* one small touch per page, played when the page turns (reduced motion shows the finished page) */
@keyframes tp-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tp-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tp.on .tp-a { animation: tp-up .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
.tp.on .tp-ans { display: inline-block; animation: tp-reveal 1s steps(28) both; animation-delay: calc(var(--i, 0) * 450ms + 350ms); }
@container (max-width: 520px) { .tp-sm, .tp-tb, .tp-fn, .tp-top { display: none; } }
@media (prefers-reduced-motion: reduce) { .tp .tp-a, .tp .tp-ans { animation: none !important; } }
.tr-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(28px, 3vw, 44px); }
/* phones: the pages become a swipe row with their caption underneath */
@media (max-width: 760px) {
  .btour .how-steps, .btour .how-cap { display: none; }
  .btour .how-frame { display: flex; gap: 10px; aspect-ratio: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 6px; border: 0; border-radius: 0; box-shadow: none; background: none; scrollbar-width: none; }
  .btour .how-frame::-webkit-scrollbar { display: none; }
  .btour .how-frame > .tp { position: relative; inset: auto; flex: 0 0 86%; opacity: 1; transform: none; scroll-snap-align: start; }
  .btour .tp-sheet { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line-l); border-radius: 6px; }
  .btour .tp figcaption { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted-l); }
  .btour .tp figcaption b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ink); }
}

/* =================================================================
   FINAL REVIEW FIXES (26 Oct 2026)
   ================================================================= */
/* one real recommendation beside the main buttons on Pricing and Contact */
.pq-mini { margin: 0; max-width: 46ch; }
.pq-mini blockquote { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; color: var(--ink); }
.pq-mini figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--muted-l); }
.pq-mini figcaption b { font-weight: 600; color: var(--ink); }
.fp-proof { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-l); }
@media (min-width: 901px) { .fp-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .fp-proof .pq-mini { grid-column: 2 / 4; padding-left: 26px; } }
.ct-info .pq-mini { padding-top: 22px; border-top: 1px solid var(--line-l); }
.ct-info .pq-mini blockquote { font-size: 16px; }
.ct-info .pq-mini figcaption b { display: inline; margin: 0; font-size: inherit; color: var(--ink); }
/* pricing: services listed under the add-ons */
.addons-h { margin: 28px 0 10px; font-size: 14px; font-weight: 600; }

/* ---------- StudioBook: six sections ---------- */
.mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mods { grid-template-columns: 1fr; } }

/* ---------- Footer: the KYNDRA logo at a normal size ---------- */
.foot-word { --fw: 44px; }

/* ---------- Branding hero: a fan of colour chips behind the heading ---------- */
.br-hero { position: relative; overflow: hidden; }
.br-hero .wrap { position: relative; z-index: 1; }
.br-fan { position: absolute; right: 2%; top: 14%; width: 40%; height: 86%; z-index: 0; pointer-events: none; }
.br-chip { position: absolute; left: 50%; bottom: 4%; width: 130px; height: 340px; margin-left: -65px; transform-origin: 50% 92%; border-radius: 10px; background: #F3F1EC; box-shadow: 0 30px 60px rgba(0,0,0,.55); overflow: hidden; opacity: 0; transform: rotate(0deg) translateY(30px); transition: transform 1.6s cubic-bezier(.16,1,.3,1), opacity 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(.25s + var(--i) * 80ms); }
.br-chip i { position: absolute; left: 0; right: 0; top: 0; height: 78%; background: var(--c); }
.br-chip span { position: absolute; left: 12px; bottom: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #4B4740; letter-spacing: .04em; }
.br-fan.on .br-chip { opacity: 1; transform: rotate(calc((var(--i) - 3.5) * 9deg)) translateY(0); }
.br-hero h1 { max-width: 12ch; }
@media (max-width: 900px) { .br-fan { right: -22%; width: 80%; opacity: .45; } .br-chip { width: 96px; height: 250px; margin-left: -48px; } }
@media (prefers-reduced-motion: reduce) { .br-chip { opacity: 1; transform: rotate(calc((var(--i) - 3.5) * 9deg)); transition: none; } }

/* ---------- Branding explorer, dark: pill controls on top, formats below ---------- */
.ex-sec .ex-flag { background: transparent; color: var(--muted-d); border-left: 0; padding: 0; font-size: 15px; }
.ex-dark { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-d); }
.ex-dark .ex-ctrl { grid-column: auto; padding: 22px 0 6px; gap: 14px; }
.ex-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ex-row .lab { width: 60px; font-size: 13px; font-weight: 600; color: var(--muted-d); }
.ex-dark .ex-pal, .ex-dark .ex-pair { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-dark .ex-pal button, .ex-dark .ex-pair button, .ex-shuffle { width: auto; min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(242,241,238,.2); background: transparent; color: var(--white); font-size: 14px; font-weight: 600; gap: 8px; box-shadow: none; cursor: pointer; display: inline-flex; align-items: center; }
.ex-dark .ex-pal button[aria-pressed="true"], .ex-dark .ex-pair button[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); box-shadow: none; }
.ex-dark .ex-pal .sws { order: -1; }
.ex-dark .ex-pal .sws i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.ex-dark .ex-pal .sws i:nth-child(4) { display: none; }
.ex-dark .aa { font-size: 17px; line-height: 1; }
.ex-shuffle { border-style: dashed; color: var(--muted-d); }
.ex-shuffle:hover { color: var(--white); border-color: var(--white); }
.ex-dark .ex-out { grid-column: auto; padding: 18px 0 0; border-left: 0; }
.ex-dark .ex-note { grid-column: auto; margin-top: 14px; color: var(--muted-d); font-size: 13px; }
.ex-dark .ex-out > div { transition: background-color .5s ease, color .5s ease; }
.ex-dark .ex-out h4, .ex-dark .ex-out h5, .ex-dark .ex-out b { transition: font-family 0s; }
@media (max-width: 560px) { .ex-row .lab { width: 100%; } }
.br-fan { right: 13%; width: 32%; }
@media (max-width: 900px) { .br-fan { right: 2%; width: 38%; top: 6%; opacity: .5; } }
@media (max-width: 700px) { .br-fan { display: none; } }
@media (max-width: 1000px) { .br-fan { display: none; } }

/* ---------- Spacing: tighter gaps between sections ---------- */
:root { --sec: clamp(64px, 7vw, 108px); }
.home { --sec: clamp(56px, 6vw, 92px); }

/* ---------- Hero: room for descenders (the g in "bring") under the rise animation ---------- */
.hero h1 .ln { padding-bottom: .16em; margin-bottom: -.12em; }

/* ---------- Packages: one two-option pill instead of labels around a switch ---------- */
.toggle { gap: 0; padding: 4px; border: 1px solid var(--line-l); border-radius: 999px; background: var(--white); }
.toggle button { opacity: 1; padding: 0 18px; min-height: 40px; border-radius: 999px; color: var(--muted-l); transition: background .25s, color .25s; }
.toggle button:hover { color: var(--ink); }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.toggle button:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
/* Two sections of the same colour in a row: no colour change marks the break, so don't double the padding. */
.sec.light + .sec.light:not(.phero), .sec.dark + .sec.dark:not(.phero) { padding-top: calc(var(--sec) * .45) !important; }
/* Tighter again (27 Oct, Adam asked). */
:root { --sec: clamp(48px, 5.6vw, 86px); }
.home { --sec: clamp(44px, 5vw, 76px); }
.hero-note { position: relative; margin-top: 14px; text-align: right; font-size: 13px; color: var(--muted-d); }
@media (max-width: 760px) { .hero-note { text-align: left; } }
/* Phones: the headline fades up line by line instead of rising from behind a mask,
   so it never looks sliced while it loads. */
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .hero h1 .ln { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .hero h1 .ln > span { animation: fadeup .8s var(--ease) both; }
}
/* Footer: Instagram link with its icon */
.foot-social { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 44px; text-decoration: none; color: var(--white); font-weight: 600; }
.foot-social svg { flex: none; transition: color .2s; }
.foot-social:hover svg { color: var(--or-on-dark, #EE6A33); }
.foot-social span { border-bottom: 1px solid transparent; }
.foot-social:hover span { border-bottom-color: currentColor; }
.foot .foot-about a.foot-social { display: inline-flex; align-items: center; gap: 10px; }
.foot .foot-about a.foot-social { gap: 9px; line-height: 1.2; font-size: 15px; }
.foot .foot-about a.foot-social svg { display: block; position: relative; top: -0.5px; }

/* ---------- Compare pages ---------- */
.cmp-wrap { overflow-x: auto; margin-top: 18px; border-top: 1px solid var(--line-l); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line-l); font-size: 15px; line-height: 1.5; }
.cmp thead th { font-size: 13px; font-weight: 700; color: var(--muted-l); padding-top: 14px; }
.cmp thead th:nth-child(2) { color: var(--ink); }
.cmp tbody th { width: 22%; font-weight: 700; }
.cmp tbody td:nth-child(2) { width: 39%; }
.cmp tbody td:nth-child(3) { color: var(--muted-l); }
.cmp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cmp-col .lbl { margin-bottom: 14px; }
.cmp-list { list-style: none; padding: 0; margin: 0; }
.cmp-list li { position: relative; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--line-l); font-size: 15.5px; }
.cmp-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; border-radius: 2px; background: var(--or); }
.cmp-combine { margin-top: 44px; max-width: 760px; }
.cmp-combine p { margin-top: 10px; }
.cmp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-l); }
.cmp-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 30px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-l); }
.cmp-card + .cmp-card { padding-left: 24px; border-left: 1px solid var(--line-l); }
.cmp-card:hover h2 { color: var(--or); }
@media (max-width: 900px) { .cmp-two, .cmp-cards { grid-template-columns: 1fr; } .cmp-card + .cmp-card { padding-left: 0; border-left: 0; } }
/* Phones: each comparison row stacks the two options, so there's no sideways scrolling. */
@media (max-width: 700px) {
  .cmp { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-l); }
  .cmp th, .cmp td { display: block; width: auto !important; border: 0; padding: 4px 0; }
  .cmp tbody th { font-size: 16px; padding-bottom: 8px; }
  .cmp td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 700; color: var(--muted-l); margin-bottom: 2px; }
  .cmp tbody td:nth-child(2)::before { color: #B83A0A; }
}

/* ---------- Focused service pages ---------- */
.ld-steps { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line-l); counter-reset: none; }
.ld-steps li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line-l); }
.ld-steps b { font-size: 18px; letter-spacing: -.02em; }
.ld-steps span { color: var(--muted-l); font-size: 16px; line-height: 1.55; }
.ld-price { margin-top: 48px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding: 28px; border: 1px solid var(--line-l); border-radius: 6px; background: var(--white); }
.ld-price h2 { margin-top: 8px; }
.ld-price p { margin-top: 8px; }
.ld-rel { margin-top: 36px; }
.ld-rel ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
@media (max-width: 760px) { .ld-steps li { grid-template-columns: 1fr; gap: 6px; } }
.pk-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; }
.svc-more { margin: 10px 0 14px; font-size: 14.5px; font-weight: 600; }