/* =========================================================================
   NOWDAYS STUDIOS — DESIGN SYSTEM
   Structure & motion language studied from the "Fabrica" Framer template:
   monochrome canvas, oversized tight grotesk, rounded cards, dark grain
   sections, blur-in headings, scroll word-reveal, text-roll hovers.
   ========================================================================= */

:root {
  /* color */
  --bg: #f4f4f4;
  --card: #ffffff;
  --ink: #0a0a0a;
  --ink-60: rgba(10, 10, 10, 0.6);
  --ink-40: rgba(10, 10, 10, 0.4);
  --ink-10: rgba(10, 10, 10, 0.1);
  --line: rgba(10, 10, 10, 0.12);
  --dark: #0a0a0a;
  --dark-card: rgba(255, 255, 255, 0.05);
  --dark-line: rgba(255, 255, 255, 0.12);
  --white-60: rgba(255, 255, 255, 0.6);
  --accent: #8e1b1b; /* Nowdays red — use sparingly */

  /* type */
  --font: "Inter Tight", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --track-body: -0.04em;
  --track-display: -0.065em;

  /* scale (fluid) */
  --fs-mega: clamp(88px, 17vw, 260px);   /* hero wordmark / footer wordmark */
  --fs-display: clamp(64px, 10vw, 144px);/* section titles "Work." */
  --fs-h2: clamp(32px, 4.2vw, 60px);
  --fs-h3: clamp(22px, 2.1vw, 30px);
  --fs-lead: clamp(18px, 1.55vw, 22px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-micro: 11px;

  /* layout */
  --gutter: 18px;
  --gap: 4px;
  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 11px;
  --r-sm: 7px;
  --r-pill: 50px;
  --nav-h: 52px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fab: cubic-bezier(0.56, 0.22, 0.05, 0.99); /* Fabrica hero curve */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
input, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
::selection { background: var(--ink); color: #fff; }

/* ---------- helpers ---------- */
.wrap { padding-inline: var(--gutter); }
.muted { color: var(--ink-60); }
.on-dark .muted, .dark .muted { color: var(--white-60); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.reg { font-size: 0.42em; vertical-align: top; position: relative; top: 0.18em; letter-spacing: 0; margin-left: 0.02em; }
sup.count { font-size: 9px; margin-left: 2px; vertical-align: top; position: relative; top: -2px; letter-spacing: 0; }

/* 4-column editorial grid: label in col 1, content from col 2 */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); }
.col-1 { grid-column: 1 / 2; }
.col-2-4 { grid-column: 2 / 5; }
.col-2-3 { grid-column: 2 / 4; }
.col-3-4 { grid-column: 3 / 5; }
.col-4 { grid-column: 4 / 5; }

.section { padding-block: clamp(80px, 11vw, 160px); }
.section-sm { padding-block: clamp(48px, 6vw, 90px); }

/* small label: ● About us */
.label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.label::before {
  content: "+"; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
  background: currentColor; color: var(--bg); font-size: 12px; line-height: 1; font-weight: 600;
}
.dark .label::before { color: var(--dark); }
.paren { font-size: var(--fs-small); color: var(--ink-60); }
.dark .paren { color: var(--white-60); }

/* typography */
.display { font-size: var(--fs-display); line-height: 0.92; letter-spacing: var(--track-display); font-weight: 500; }
.display sup { font-size: 0.18em; vertical-align: top; position: relative; top: 0.35em; margin-left: 0.15em; letter-spacing: -0.02em; font-weight: 500; color: var(--ink-60); }
.dark .display sup { color: var(--white-60); }
.h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.055em; font-weight: 500; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.045em; font-weight: 500; }
.lead { font-size: var(--fs-lead); line-height: 1.22; letter-spacing: -0.04em; }
.small { font-size: var(--fs-small); line-height: 1.35; }
.micro { font-size: var(--fs-micro); line-height: 1.2; }
.two-tone .soft { color: var(--ink-40); }
.dark .two-tone .soft { color: rgba(255, 255, 255, 0.45); }
.indent { text-indent: 3.2em; }

/* ---------- grain + dark sections ---------- */
.dark { background: var(--dark); color: #fff; position: relative; isolation: isolate; }
.rounded { border-radius: var(--r-xl); overflow: hidden; margin-inline: 6px; }
.grain::after {
  content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(4%, -8%); }
  60% { transform: translate(-8%, -2%); } 80% { transform: translate(6%, 6%); } 100% { transform: translate(0, 0); }
}

/* ---------- buttons ---------- */
.btn {
  --h: 34px;
  display: inline-flex; align-items: center; gap: 22px; height: var(--h); padding: 0 6px 0 16px;
  border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-small); white-space: nowrap;
  transition: background 0.3s var(--ease-out);
}
.btn .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; transition: transform 0.45s var(--ease-out); }
.btn:hover .dot { transform: scale(2.6); }
.btn.light { background: #fff; color: var(--ink); }
.btn.lg { --h: 44px; font-size: 15px; padding-left: 22px; }
.btn.block { width: 100%; justify-content: center; }
.btn.block .dot { display: none; }

/* text-roll hover: <span class="roll"><span data-t="Label">Label</span></span> */
.roll { display: inline-block; overflow: hidden; position: relative; vertical-align: top; line-height: 1.2; }
.roll > span { display: block; transition: transform 0.55s var(--ease-out); }
.roll > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
a:hover .roll > span, button:hover .roll > span, .roll:hover > span { transform: translateY(-100%); }

.arrow-link { display: inline-flex; gap: 6px; align-items: baseline; }
.arrow-link::after { content: "↗"; font-size: 0.7em; color: var(--ink-40); transition: transform 0.4s var(--ease-out); }
.arrow-link:hover::after { transform: translate(2px, -2px); }

/* ---------- preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 200; background: var(--dark); color: #fff;
  display: grid; place-items: center; transition: clip-path 1s var(--ease-io);
  clip-path: inset(0 0 0 0);
}
.preloader.done { clip-path: inset(0 0 100% 0); }
.preloader .word { display: flex; font-size: 22px; letter-spacing: -0.04em; overflow: hidden; }
.preloader .word span { display: inline-block; transform: translateY(110%); animation: up 0.6s var(--ease-out) forwards; }
.preloader .count { position: absolute; bottom: var(--gutter); right: var(--gutter); font-size: var(--fs-small); color: var(--white-60); font-variant-numeric: tabular-nums; }
@keyframes up { to { transform: none; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100; background: var(--bg);
  display: grid; grid-template-columns: repeat(5, 1fr) auto; align-items: center; column-gap: var(--gutter);
  padding-inline: var(--gutter); font-size: 14px; transition: transform 0.5s var(--ease-out);
}
.nav.hide { transform: translateY(-100%); }
.nav .logo { font-size: 16px; font-weight: 600; letter-spacing: -0.05em; }
.nav .logo .reg { font-size: 0.6em; top: 0.05em; }
.nav-links { display: contents; }
.nav-links a[aria-current="page"] { color: var(--ink-40); }
.burger { width: 32px; height: 20px; position: relative; justify-self: end; }
.burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out); }
.burger i:nth-child(1) { top: 6px; }
.burger i:nth-child(2) { top: 12px; }
.menu-open .burger i:nth-child(1) { top: 9px; transform: rotate(14deg); }
.menu-open .burger i:nth-child(2) { top: 9px; transform: rotate(-14deg); }
body > main { padding-top: var(--nav-h); }

/* full menu (drops from top) */
.menu {
  position: fixed; inset: 0 0 auto 0; z-index: 90; background: var(--bg); min-height: min(100svh, 820px);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 60px) var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--ease-io); border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu-big { display: flex; flex-direction: column; align-items: center; }
.menu-big a { font-size: clamp(48px, 6vw, 82px); line-height: 1; letter-spacing: var(--track-display); overflow: hidden; display: block; }
.menu-big a span { display: block; transform: translateY(105%); transition: transform 0.8s var(--ease-out); }
.menu-open .menu-big a span { transform: none; }
.menu-big a:hover { color: var(--ink-40); }
.menu-foot { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: var(--gutter); font-size: 15px; }
.menu-foot .email { font-size: clamp(22px, 2.4vw, 32px); border-bottom: 1.5px solid; display: inline-block; letter-spacing: -0.05em; }
.menu-foot > :last-child { justify-self: end; color: var(--ink-60); }
.menu-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.6s; }
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }

/* ---------- hero ---------- */
.hero { height: calc(100svh - var(--nav-h) - 6px); min-height: 600px; display: flex; flex-direction: column; justify-content: space-between; padding: var(--gutter) var(--gutter) var(--gutter); }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video { filter: grayscale(0.15) contrast(1.05); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.7) 100%); }
.hero-top { display: grid; grid-template-columns: 1fr auto; gap: var(--gutter); align-items: start; margin-top: clamp(10px, 3vw, 40px); }
.wordmark { font-size: var(--fs-mega); line-height: 0.8; letter-spacing: -0.07em; font-weight: 500; }
.wordmark .reg { font-size: 0.3em; top: 0.12em; }
.wordmark-sub { font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.05em; text-align: right; margin-top: 0.15em; line-height: 1; }
.hero-list { list-style: none; font-size: 15px; line-height: 1.45; padding-top: 1.4em; min-width: 220px; }
.hero-plus { display: grid; grid-template-columns: repeat(4, 1fr); color: rgba(255,255,255,.55); font-weight: 300; font-size: 20px; }
.hero-bottom { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: end; gap: var(--gutter); }
.hero-bottom p { font-size: var(--fs-lead); line-height: 1.22; max-width: 26ch; }
.hero-bottom .copy { font-size: var(--fs-small); color: var(--white-60); }

/* team-lead card (used in hero + contact) */
.lead-card { display: flex; gap: 4px; justify-self: end; color: var(--ink); }
.lead-card .ph { width: 87px; height: 106px; border-radius: var(--r-lg); overflow: hidden; border: 4px solid #fff; background: #fff; }
.lead-card .ph img { border-radius: var(--r-md); }
.lead-card .info { background: #fff; border-radius: var(--r-lg); padding: 13px 13px 11px; display: flex; flex-direction: column; justify-content: space-between; min-width: 171px; }
.lead-card .info small { font-size: var(--fs-micro); color: var(--ink-60); display: block; }
.lead-card .info strong { font-weight: 500; font-size: 16px; line-height: 1.05; letter-spacing: -0.05em; }
.lead-card .info .lead-name { white-space: nowrap; font-size: clamp(14px, 1.15vw, 16px); }

/* ---------- partners strip ---------- */
.partners-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-bottom: 36px; }
.partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.partners div { background: var(--card); border-radius: var(--r-lg); height: 128px; display: grid; place-items: center; font-weight: 600; letter-spacing: -0.06em; font-size: 20px; text-align: center; padding: 10px; transition: background .35s; }
.partners div:hover { background: #ececec; }

/* ---------- section headers (big title + aside) ---------- */
.sec-head { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head .display { grid-column: 2 / 4; }
.sec-head .aside { grid-column: 4 / 5; font-size: var(--fs-small); color: var(--ink-60); max-width: 30ch; padding-bottom: 0.6em; }
.dark .sec-head .aside { color: var(--white-60); }
.sec-head .meta { grid-column: 1 / 2; align-self: start; padding-top: 1.2em; }

/* ---------- work cards ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.work-card { display: flex; flex-direction: column; gap: var(--gap); }
.work-card .bar { background: var(--card); border-radius: var(--r-md); display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 14px; }
.work-card .bar em { font-style: normal; color: var(--ink-40); font-size: 11px; margin-left: 8px; }
.work-card .bar .dots { display: flex; gap: 3px; }
.work-card .bar .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-10); transition: background .3s; }
.work-card:hover .bar .dots i { background: var(--ink); }
.work-card:hover .bar .dots i:nth-child(2) { transition-delay: .06s; }
.work-card:hover .bar .dots i:nth-child(3) { transition-delay: .12s; }
.work-card .media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1.3; background: #ddd; }
.work-card .media img, .work-card .media video { transition: transform 1.1s var(--ease-out), filter .6s; }
.work-card:hover .media img, .work-card:hover .media video { transform: scale(1.06); }
.work-card .media .tagline { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -0.05em; text-shadow: 0 1px 20px rgba(0,0,0,.35); text-align: center; padding: 20px; }
.work-card .media .tagline::before { content: "N,"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #fff; color: var(--ink); font-size: .7em; margin-right: .4em; font-weight: 600; vertical-align: .15em; }
.work-card .media .chip { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-size: 11px; padding: 6px 10px; border-radius: var(--r-pill); opacity: 0; transform: translateY(8px); transition: .5s var(--ease-out); }
.work-card:hover .media .chip { opacity: 1; transform: none; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.filters button { background: var(--card); border-radius: var(--r-pill); padding: 8px 14px; font-size: var(--fs-small); transition: .3s; }
.filters button.on { background: var(--ink); color: #fff; }

/* ---------- point-of-view bento ---------- */
.pov-title { grid-column: 2 / 5; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: clamp(48px, 6vw, 90px); }
.bento .portrait { grid-row: span 2; border-radius: var(--r-lg); overflow: hidden; min-height: 460px; position: relative; }
.bento .txt { grid-column: 3 / 5; padding: 0 0 30px; }
.tile { background: var(--card); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; }
.tile .num { font-size: clamp(40px, 4vw, 60px); letter-spacing: -0.06em; line-height: 1; }
.tile .idx { font-size: 10px; color: var(--ink-40); align-self: flex-end; }
.tile.ghost { background: transparent; border: 1px solid var(--line); }

/* scroll word reveal */
[data-words] .w { opacity: 0.18; transition: opacity 0.2s linear; }
[data-words] .w.on { opacity: 1; }

/* ---------- services accordion (dark) ---------- */
.svc { border-top: 1px solid var(--dark-line); }
.svc-item { display: grid; grid-template-columns: 1fr 3fr; column-gap: var(--gutter); border-bottom: 1px solid var(--dark-line); }
.svc-item .n { font-size: var(--fs-small); color: var(--white-60); padding-top: 28px; }
.svc-head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 24px 0; text-align: left; gap: 20px; }
.svc-head .t { font-size: var(--fs-h3); letter-spacing: -0.05em; line-height: 1.1; }
.pm { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dark-line); position: relative; flex: none; transition: background .3s, border-color .3s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .45s var(--ease-out); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.open > * > .pm::after, .open .pm::after { transform: translate(-50%, -50%) rotate(0); }
.svc-head:hover .pm { background: #fff; color: var(--ink); border-color: #fff; }
.svc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-out); }
.svc-body > div { overflow: hidden; }
.svc-item.open .svc-body { grid-template-rows: 1fr; }
.svc-inner { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 24px; padding: 0 0 32px; }
.svc-inner .thumb { width: 140px; aspect-ratio: 1.3; border-radius: var(--r-md); overflow: hidden; }
.svc-inner p { color: var(--white-60); font-size: 15px; max-width: 38ch; }
.svc-inner .line { font-size: var(--fs-small); color: #fff; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-w { background: #fff; color: var(--ink); border-radius: var(--r-pill); font-size: 11px; padding: 6px 10px; }
.chip-d { background: var(--dark-card); color: #fff; border-radius: var(--r-pill); font-size: 11px; padding: 6px 10px; }
.group-name { font-size: 11px; color: var(--white-60); margin: 10px 0 6px; }
.group-name:first-child { margin-top: 0; }

/* ---------- how we work ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 60px; }
.step { background: var(--card); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 22px; }
.step .top { display: flex; justify-content: space-between; align-items: center; }
.step .pips { display: flex; gap: 3px; }
.step .pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-10); }
.step .pips i.on { background: var(--ink); }
.step .row { display: flex; gap: 12px; align-items: center; }
.step .row .t { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; flex: none; }
.reel { position: relative; margin-top: var(--gap); border-radius: var(--r-lg); overflow: hidden; height: clamp(360px, 52vw, 720px); background: #111; cursor: pointer; }
.reel video { transition: transform 1.4s var(--ease-out); }
.reel:hover video { transform: scale(1.03); }
.reel .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.reel .play > div { display: flex; align-items: center; gap: 18px; }
.reel .play .circle { width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 18px; transition: transform .5s var(--ease-out); }
.reel:hover .play .circle { transform: scale(1.12); }
.reel .play strong { font-weight: 500; font-size: 28px; letter-spacing: -0.05em; display: block; }

/* ---------- press (testimonials) ---------- */
.press { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.press .summary { background: var(--card); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; }
.press .summary .big { font-size: 64px; letter-spacing: -0.07em; line-height: 1; }
.press-card { background: var(--card); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; transition: background .4s; }
.press-card:hover { background: #fafafa; }
.press-card .logo { height: 26px; display: flex; align-items: center; }
.press-card .logo img { width: auto; height: 100%; object-fit: contain; filter: invert(1); }
.press-card blockquote { font-size: 17px; line-height: 1.25; letter-spacing: -0.04em; }

/* ---------- stats row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.stats .num { font-size: clamp(54px, 6vw, 84px); letter-spacing: -0.07em; line-height: 1; margin-bottom: 18px; }
.stats p { font-size: var(--fs-small); white-space: pre-line; }
.approach { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gutter); margin-top: 60px; }
.approach .h2 { max-width: 22ch; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; }

/* ---------- case bento ---------- */
.case-bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--gap); }
.case-bento .feature { grid-row: span 2; border-radius: var(--r-lg); overflow: hidden; position: relative; min-height: 560px; color: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.case-bento .feature img { position: absolute; inset: 0; z-index: -1; }
.case-bento .feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.05) 40%, rgba(0,0,0,.65)); }
.case-bento .feature .big { font-size: clamp(48px, 6vw, 90px); letter-spacing: -0.07em; line-height: .9; }
.case-bento .feature { isolation: isolate; }
.case-bento .tile { min-height: 0; }
.ring { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: conic-gradient(var(--ink) var(--p, 0%), var(--ink-10) 0); position: relative; font-size: 22px; letter-spacing: -0.04em; }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.ring span { position: relative; }

/* ---------- toggle section (Nowdays × Landscape) ---------- */
.toggle { display: inline-flex; background: var(--dark-card); border-radius: var(--r-pill); padding: 4px; position: relative; margin-bottom: 18px; }
.toggle button { position: relative; z-index: 1; padding: 9px 18px; font-size: var(--fs-small); border-radius: var(--r-pill); transition: color .4s; }
.toggle button.on { color: var(--ink); }
.toggle .pill { position: absolute; top: 4px; bottom: 4px; left: 4px; background: #fff; border-radius: var(--r-pill); transition: transform .55s var(--ease-out), width .55s var(--ease-out); }
.plan { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gap); }
.plan .box { background: var(--dark-card); border-radius: var(--r-lg); padding: 24px; }
.plan .main { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.plan .main .h2 { transition: opacity .35s; }
.plan ul { list-style: none; display: grid; gap: 8px; font-size: 15px; }
.plan li::before { content: "+"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 11px; margin-right: 10px; font-weight: 600; }
.fade-swap { transition: opacity .35s, transform .35s; }
.fade-swap.out { opacity: 0; transform: translateY(6px); }

/* ---------- team ---------- */
.team-wrap { background: var(--card); border-radius: var(--r-xl); padding: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.team-wrap .left { padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.member { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: .78; background: #ddd; color: #fff; }
.member img { filter: grayscale(1); transition: filter .7s, transform 1.1s var(--ease-out); }
.member:hover img { filter: grayscale(0); transform: scale(1.05); }
.member::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 60%, rgba(0,0,0,.6)); }
.member .role { position: absolute; z-index: 1; top: 10px; right: 10px; left: 10px; display: flex; justify-content: space-between; font-size: 11px; }
.member .role b { font-weight: 500; text-align: right; }
.member .name { position: absolute; z-index: 1; left: 12px; bottom: 10px; font-size: 22px; letter-spacing: -0.05em; }
.member.join { background: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 14px; }
.member.join::after { display: none; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.faq-list { display: grid; gap: var(--gap); align-content: start; }
.faq-item { background: var(--card); border-radius: var(--r-md); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; text-align: left; font-size: 15px; }
.faq-item .pm { width: 20px; height: 20px; background: var(--ink); color: #fff; border: 0; }
.faq-item .pm::before, .faq-item .pm::after { width: 8px; }
.faq-item .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.faq-item .ans > div { overflow: hidden; }
.faq-item .ans p { padding: 0 16px 18px; color: var(--ink-60); font-size: 14px; max-width: 60ch; }
.faq-item.open .ans { grid-template-rows: 1fr; }

/* ---------- news cards ---------- */
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.news-card { background: var(--card); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 60px; min-height: 340px; position: relative; transition: background .4s; }
.news-card:hover { background: #fafafa; }
.news-card .thumb { width: 72px; height: 72px; border-radius: 9px; overflow: hidden; }
.news-card .thumb img { transition: transform .8s var(--ease-out); }
.news-card:hover .thumb img { transform: scale(1.1); }
.news-card .plus { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; transition: transform .5s var(--ease-out); }
.news-card:hover .plus { transform: rotate(90deg); }
.news-card h3 { font-weight: 500; font-size: 17px; line-height: 1.15; letter-spacing: -0.045em; margin: 8px 0 6px; }
.news-card p { font-size: var(--fs-small); color: var(--ink-60); }
.news-grid.home { grid-template-columns: 2fr 1fr 1fr; }
.news-grid.home .news-card.feature { grid-column: auto; }
.team-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
.svc-cta { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gutter); margin-top: 40px; }
.news-card.feature { grid-column: span 2; padding: 0; overflow: hidden; color: #fff; justify-content: flex-end; isolation: isolate; }
.news-card.feature img { position: absolute; inset: 0; z-index: -2; transition: transform 1.2s var(--ease-out); }
.news-card.feature:hover img { transform: scale(1.04); }
.news-card.feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7)); }
.news-card.feature .inner { padding: 22px; }
.news-card.feature h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1; }
.news-card.feature p { color: rgba(255,255,255,.75); max-width: 40ch; }

/* ---------- contact CTA (dark) ---------- */
.cta { min-height: 100svh; padding: clamp(60px, 8vw, 110px) var(--gutter) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.cta .bg { position: absolute; inset: 0; z-index: -1; opacity: .35; }
.cta .bg img { filter: grayscale(1) contrast(1.1); }
.form-card { background: #fff; color: var(--ink); border-radius: var(--r-xl); padding: 22px; max-width: 470px; }
.form-card h3 { font-size: 30px; letter-spacing: -0.055em; font-weight: 500; margin: 6px 0 22px; line-height: 1.05; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 11px; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; border: 0; background: #f2f2f2; border-radius: var(--r-sm); padding: 13px 12px; font-size: 14px; outline: none; transition: box-shadow .3s; resize: vertical; }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 1.5px var(--ink); }
.form-card .legal { font-size: 11px; color: var(--ink-60); margin-top: 12px; }
.form-card .legal a { color: var(--ink); }
.form-ok { display: none; padding: 30px 0; font-size: 18px; }
.form-card.sent form { display: none; }
.form-card.sent .form-ok { display: block; }
.cta-right .display { margin-bottom: 40px; }
.cta-feats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); border-top: 1px solid var(--dark-line); padding-top: 26px; margin: 50px 0; }
.cta-feats b { font-weight: 500; display: block; margin-bottom: 8px; }
.cta-feats p { font-size: var(--fs-small); color: var(--white-60); }

/* underline inputs (newsletter, contact page) */
.uline { display: block; margin-bottom: 18px; }
.uline input, .uline textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 0 12px; outline: none; font-size: 15px; transition: border-color .3s; resize: none; }
.uline input:focus, .uline textarea:focus { border-color: var(--ink); }
.uline input::placeholder, .uline textarea::placeholder { color: var(--ink-60); }

/* ---------- footer ---------- */
.footer { padding: clamp(70px, 9vw, 130px) var(--gutter) 0; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.footer .plusrow { display: grid; grid-template-columns: repeat(4, 1fr); color: var(--ink-40); font-weight: 300; font-size: 20px; margin: 70px 0 30px; }
.footer-mid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gutter); align-items: start; }
.footer-mid .email { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.05em; border-bottom: 1.5px solid; }
.footer-mid h4 { font-weight: 500; font-size: 11px; color: var(--ink-60); margin-bottom: 10px; }
.footer-mid ul { list-style: none; font-size: 17px; display: grid; gap: 2px; }
.footer-word { font-size: clamp(90px, 21vw, 300px); line-height: .78; letter-spacing: -0.075em; margin-top: 70px; white-space: nowrap; text-align: right; transform: translateY(0.08em); }
.footer-word .reg { font-size: .3em; top: .1em; }
.footer-legal { display: flex; justify-content: space-between; gap: 20px; font-size: var(--fs-small); color: var(--ink-60); padding: 16px 0; border-top: 1px solid var(--line); position: relative; background: var(--bg); }

/* ---------- inner page hero ---------- */
.page-hero { padding: clamp(110px, 14vw, 200px) var(--gutter) clamp(50px, 6vw, 90px); }
.page-hero .display { font-size: clamp(72px, 12vw, 172px); margin-bottom: clamp(50px, 6vw, 90px); }
.page-hero .grid4 { align-items: start; }
.page-hero .lead { grid-column: 2 / 4; max-width: 34ch; }
.page-hero .aside { grid-column: 4 / 5; font-size: var(--fs-small); color: var(--ink-60); max-width: 26ch; }

.wide-img { border-radius: var(--r-xl); overflow: hidden; height: clamp(380px, 60vw, 820px); margin: 0 var(--gutter); position: relative; }
.wide-img .tag { position: absolute; right: 22px; bottom: 18px; color: #fff; font-size: 15px; z-index: 2; }

/* table (recognition) */
.table { width: 100%; }
.table .tr { display: grid; grid-template-columns: 1fr 2fr 1fr 80px; gap: var(--gutter); padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; transition: padding .4s var(--ease-out), background .4s; }
.table .tr:not(.th):hover { padding-left: 10px; }
.table .th { font-size: 11px; color: var(--ink-60); padding: 8px 0; }
.table .tr > :last-child { text-align: right; }

/* case page */
.case-intro .facts { margin-top: 34px; }
.facts .row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; }
.facts .row span:first-child { font-size: 11px; color: var(--ink-60); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 var(--gutter); }
.gallery figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: .9; background: #ddd; }
.gallery figure.full { grid-column: span 2; aspect-ratio: 16/8; }
.next-card { display: block; position: relative; border-radius: var(--r-xl); overflow: hidden; height: 240px; color: #fff; isolation: isolate; }
.next-card img { position: absolute; inset: 0; z-index: -2; transition: transform 1.2s var(--ease-out); }
.next-card:hover img { transform: scale(1.05); }
.next-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.45); }
.next-card .in { position: absolute; right: 24px; bottom: 22px; text-align: right; }
.next-card .in small { display: block; font-size: 11px; opacity: .7; margin-bottom: 6px; }
.next-card .in strong { font-weight: 500; font-size: clamp(26px, 3vw, 42px); letter-spacing: -0.055em; }

/* article page */
.article { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: calc(var(--gutter)) var(--gutter) 0; align-items: start; }
.article .cover { position: sticky; top: calc(var(--nav-h) + 6px); height: calc(100svh - var(--nav-h) - 24px); border-radius: var(--r-xl); overflow: hidden; }
.article .body { padding: clamp(60px, 10vw, 140px) clamp(0px, 4vw, 70px) 60px; }
.article h1 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1; letter-spacing: -0.06em; font-weight: 500; margin: 14px 0 22px; }
.article .prose p { font-size: 17px; line-height: 1.5; color: rgba(10,10,10,.78); margin-bottom: 1.1em; letter-spacing: -0.025em; }
.article .prose p:first-child { font-size: 24px; line-height: 1.25; color: var(--ink); letter-spacing: -0.045em; }
.yt { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; margin: 20px 0 30px; background: #000; }
.yt iframe { width: 100%; height: 100%; border: 0; }
.author { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.author img { width: 36px; height: 36px; border-radius: 50%; }
.author small { display: block; color: var(--ink-60); font-size: 11px; }

/* ---------- reveal animations ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.js [data-reveal="blur"] { filter: blur(14px); transform: translateY(30px); transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out), filter 1.1s var(--ease-out); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* hero entrance (values from Fabrica's Framer appear config) */
.js .hero-card { transform: translateY(640px); opacity: 0; }
.ready .hero-card { transform: none; opacity: 1; transition: transform 2.1s var(--ease-fab), opacity 1.2s ease; }
.js .hero-card .h-in { opacity: 0; transform: translateY(90px); }
.ready .hero-card .h-in { opacity: 1; transform: none; transition: transform 1.3s var(--ease-out) .9s, opacity 1s ease .9s; }
.js .hero-card .h-late { opacity: 0; transform: translateY(40px); }
.ready .hero-card .h-late { opacity: 1; transform: none; transition: transform 1s var(--ease-out) 1.6s, opacity .8s ease 1.6s; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .partners { grid-template-columns: repeat(3, 1fr); }
  .press { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .team-wrap { grid-template-columns: 1fr; }
  .case-bento { grid-template-columns: 1fr 1fr; }
  .case-bento .feature { grid-column: span 2; grid-row: auto; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809px) {
  :root { --gutter: 16px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .grid4, .sec-head, .partners-head { grid-template-columns: 1fr; row-gap: 14px; }
  .col-1, .col-2-4, .col-2-3, .col-3-4, .col-4, .sec-head .display, .sec-head .aside, .sec-head .meta, .pov-title,
  .page-hero .lead, .page-hero .aside { grid-column: 1 / -1; }
  .hero { min-height: 640px; }
  .hero-top { grid-template-columns: 1fr; }
  .hero-list { padding-top: 0; font-size: 14px; }
  .wordmark-sub { text-align: left; }
  .hero-plus { display: none; }
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-bottom .copy { display: none; }
  .lead-card { justify-self: start; }
  .partners div { height: 96px; font-size: 16px; }
  .bento, .press, .news-grid, .faq, .footer-top, .footer-mid, .cta, .plan, .plan .main, .approach, .gallery, .article, .cta-feats { grid-template-columns: 1fr; }
  .bento .txt { grid-column: auto; }
  .bento .portrait { min-height: 420px; grid-row: auto; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .svc-item { grid-template-columns: 1fr; }
  .svc-item .n { padding-top: 18px; }
  .svc-inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .news-card.feature { grid-column: auto; min-height: 420px; }
  .case-bento { grid-template-columns: 1fr; }
  .case-bento > * { grid-column: auto !important; }
  .news-grid.home, .team-split, .svc-cta { grid-template-columns: 1fr; }
  .svc-cta > span:empty { display: none; }
  .case-bento .feature { grid-column: auto; min-height: 460px; }
  .gallery figure.full { grid-column: auto; aspect-ratio: .9; }
  .menu-foot { grid-template-columns: 1fr; }
  .menu-foot > :last-child { justify-self: start; }
  .article .cover { position: relative; top: 0; height: 70svh; }
  .article .body { padding: 40px 0; }
  .table .tr { grid-template-columns: 1fr 50px; }
  .table .tr > :nth-child(1), .table .tr > :nth-child(3) { display: none; }
  .footer-word { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js [data-reveal], .js .hero-card, .js .hero-card .h-in, .js .hero-card .h-late { opacity: 1; transform: none; filter: none; }
  [data-words] .w { opacity: 1; }
}

/* section-specific spacing */
.pov { padding-top: clamp(44px, 5vw, 72px); }
.practices { padding-top: clamp(44px, 5vw, 76px); }
.practices .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }

/* work grid: 3 cols desktop · 2 cols tablet/mobile */
.work-sec { padding-top: clamp(40px, 5vw, 72px); }
.work-card .bar { font-size: 13px; padding: 9px 12px; }
.work-card .media .tagline { font-size: clamp(16px, 1.45vw, 21px); }
@media (max-width: 1024px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809px) {
  .work-card .bar { font-size: 12px; padding: 8px 10px; }
  .work-card .bar em, .work-card .bar .dots, .work-card .media .chip { display: none; }
  .work-card .media { aspect-ratio: 0.9; border-radius: var(--r-md); }
  .work-card .media .tagline { font-size: 12px; line-height: 1.15; padding: 12px; text-wrap: balance; }
  .work-card .media .tagline { display: flex; align-items: center; justify-content: center; }
  .work-card .media .tagline::before { display: none; }
}

/* ---------- language switch ---------- */
.nav-end { display: flex; align-items: center; gap: 18px; justify-self: end; }
.lang { display: inline-flex; gap: 2px; font-size: 11px; }
.lang button { padding: 3px 6px; border-radius: var(--r-pill); color: var(--ink-40); transition: color .3s, background .3s; }
.lang button.on { color: var(--ink); background: var(--card); }
.lang button:hover { color: var(--ink); }
.menu-foot .lang { margin-left: 6px; }

/* ---------- edit mode (preview only) ---------- */
.ed-entry { color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px; }
.edit-mode [data-section] { position: relative; }
.edit-mode .nav[data-section] { position: fixed; }
.edit-mode [data-section]:not(.nav) { outline: 1px dashed rgba(142, 27, 27, .35); outline-offset: -1px; }
.edit-mode [data-k] { cursor: text; border-radius: 3px; transition: box-shadow .2s, background .2s; }
.edit-mode [data-k]:hover { box-shadow: 0 0 0 2px rgba(142, 27, 27, .55); background: rgba(142, 27, 27, .06); }
.edit-mode [data-k].ed-editing { box-shadow: 0 0 0 2px var(--accent); background: rgba(255,255,255,.08); outline: none; cursor: text; }
.edit-mode .dark [data-k]:hover { background: rgba(255, 255, 255, .08); }
.edit-mode .ed-img-hover { outline: 3px solid var(--accent) !important; outline-offset: -3px; cursor: copy; }
.edit-mode .roll > span::after { display: none; }
.edit-mode a:hover .roll > span, .edit-mode button:hover .roll > span { transform: none; }
.edit-mode .nav.hide { transform: none; }
.ed-ui { font-family: var(--font); letter-spacing: -0.02em; }
.ed-badge { position: absolute; top: 8px; left: 8px; z-index: 60; display: flex; gap: 4px; align-items: center; font-size: 11px; }
.ed-badge span { background: var(--accent); color: #fff; padding: 4px 8px; border-radius: var(--r-pill); font-weight: 600; letter-spacing: .02em; }
.ed-badge button { background: #fff; color: var(--ink); padding: 4px 8px; border-radius: var(--r-pill); box-shadow: 0 1px 6px rgba(0,0,0,.15); }
.nav .ed-badge { top: 34px; left: auto; right: 8px; }
.ed-bar { position: fixed; z-index: 300; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--ink); color: #fff; padding: 8px 10px 8px 14px; border-radius: 16px; font-size: 13px; box-shadow: 0 10px 40px rgba(0,0,0,.3); max-width: calc(100vw - 24px); }
.ed-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0412f; box-shadow: 0 0 0 4px rgba(224,65,47,.25); }
.ed-bar select { background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 8px; padding: 6px 8px; font: inherit; max-width: 200px; }
.ed-bar select option { color: #000; }
.ed-lang { display: inline-flex; background: rgba(255,255,255,.1); border-radius: 8px; padding: 2px; }
.ed-lang button { color: rgba(255,255,255,.6); padding: 4px 8px; border-radius: 6px; font-size: 12px; }
.ed-lang button.on { background: #fff; color: var(--ink); }
.ed-btn { background: rgba(255,255,255,.12); color: inherit; padding: 6px 10px; border-radius: 8px; font-size: 12px; }
.ed-btn.on { background: var(--ink); color: #fff; }
.ed-btn #ed-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: #fff; color: var(--ink); font-size: 11px; margin-left: 4px; padding: 0 5px; }
.ed-ro { color: rgba(255,255,255,.6); font-size: 12px; }
.ed-panel { position: fixed; z-index: 301; right: 12px; top: calc(var(--nav-h) + 12px); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 24px));
  background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 10px 50px rgba(0,0,0,.25); padding: 16px; overflow: auto; transform: translateX(110%); transition: transform .5s var(--ease-out); }
.ed-panel.on { transform: none; }
.ed-panel .ed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ed-panel .ed-btn { background: #f2f2f2; }
.ed-help { font-size: 12px; color: var(--ink-60); margin-bottom: 14px; line-height: 1.4; }
.ed-panel ul { list-style: none; display: grid; gap: 8px; }
.ed-panel li { background: #f6f6f6; border-radius: 10px; padding: 10px; font-size: 13px; display: grid; gap: 6px; }
.ed-panel li button { justify-self: start; font-size: 11px; color: var(--accent); }
.ed-meta { font-size: 11px; color: var(--ink-60); }
.ed-meta b { color: var(--accent); }
.ed-before { color: var(--ink-40); text-decoration: line-through; font-size: 12px; }
.ed-img { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--ink-60); }
.ed-img img { width: 48px; height: 48px; border-radius: 6px; }
.ed-empty { color: var(--ink-60); }
.ed-hint { position: fixed; left: 0; top: 0; z-index: 302; pointer-events: none; background: var(--accent); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: var(--r-pill); opacity: 0; transition: opacity .15s; }
.ed-hint.on { opacity: 1; }
.ed-note { position: fixed; z-index: 303; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); background: #fff; color: var(--ink); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: grid; gap: 10px; }
.ed-note textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; font-size: 14px; resize: vertical; }
.ed-note div { display: flex; justify-content: flex-end; gap: 6px; }
.ed-note .ed-btn { background: #f2f2f2; }
.ed-note .ed-btn.on { background: var(--ink); color: #fff; }
#ed-toast { position: fixed; z-index: 310; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.2); opacity: 0; transition: .3s; pointer-events: none; }
#ed-toast.on { opacity: 1; transform: translate(-50%, 0); }
#ed-toast.bad { background: var(--accent); color: #fff; }
.edit-mode body, body.edit-mode { padding-bottom: 90px; }
@media (max-width: 809px) { .ed-bar { flex-wrap: nowrap; gap: 6px; padding: 6px 8px; } .ed-bar b, .ed-dot { display: none; } .ed-bar select { max-width: 96px; } .ed-badge { font-size: 10px; } .ed-badge button { padding: 3px 6px; } }

.ed-fab { position: fixed; z-index: 300; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.ed-space { position: fixed; z-index: 303; right: calc(12px + env(safe-area-inset-right, 0px)); top: calc(var(--nav-h) + 12px); width: min(380px, calc(100vw - 32px)); background: #fff; color: var(--ink); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: grid; gap: 10px; font-size: 14px; }
.ed-space .ed-help { margin: 0; }
.ed-row { display: grid; grid-template-columns: 1fr 36px 80px 36px 24px; gap: 6px; align-items: center; }
.ed-row button { height: 36px; border-radius: 10px; background: #f2f2f2; font-size: 18px; }
.ed-row input { height: 36px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font: inherit; }
.ed-px { color: var(--ink-60); font-size: 12px; }
.ed-actions { display: flex; justify-content: flex-end; gap: 6px; }
.ed-space .ed-btn { background: #f2f2f2; } .ed-space .ed-btn.on { background: var(--ink); color: #fff; }

.edit-mode [data-words] .w { opacity: 1; }
.edit-mode .hero-card, .edit-mode .hero-card .h-in, .edit-mode .hero-card .h-late { opacity: 1 !important; transform: none !important; }

/* section spacing set in edit mode (desktop) */
.news-sec { padding-top: clamp(44px, 5vw, 72px); }
@media (min-width: 810px) {
  .pov { padding-top: 73px; padding-bottom: 60px; }
  .how { padding-top: 57px; padding-bottom: 145px; }
}
@media (max-width: 809px) { .grid4 > * { grid-column: 1 / -1 !important; justify-self: start !important; } }
.talk-sec { padding-top: clamp(44px, 5vw, 72px); }
.case-bento a.tile { color: inherit; transition: background .4s; }
.case-bento a.tile:hover { background: #fafafa; }
.case-bento a.tile:hover .ring { transform: scale(1.05); }
.ring { transition: transform .5s var(--ease-out); }
.case-bento .feature.dim::before { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28) 40%, rgba(0,0,0,.78)); }

/* H04 · Welcome & numbers — compact layout (desktop + mobile, effects kept) */
.pov .pov-title { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.04; max-width: 24ch; }
.pov .bento { margin-top: clamp(28px, 3.2vw, 48px); }
.pov .bento .portrait { min-height: 0; height: clamp(300px, 27vw, 400px); border-radius: var(--r-md); }
.pov .bento .txt { padding-bottom: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; }
.pov .tile { min-height: clamp(150px, 12vw, 180px); padding: 14px 16px; border-radius: var(--r-md); }
.pov .tile .num { font-size: clamp(32px, 3vw, 44px); }
.pov .tile p { font-size: 12px; margin-top: 8px !important; max-width: 30ch; }
@media (max-width: 809px) {
  .pov .bento { gap: 6px; }
  .pov .bento > div:empty { display: none; }
  .pov .bento .portrait { height: auto; aspect-ratio: 4 / 3.4; }
  .pov .bento .txt { padding: 10px 0 12px; font-size: 16px; }
  .pov .tile { min-height: 0; padding: 14px; position: relative; }
  .pov .tile > div { display: flex; align-items: center; gap: 14px; }
  .pov .tile .num { font-size: 34px; min-width: 96px; }
  .pov .tile p { margin-top: 0 !important; font-size: 12px; }
  .pov .tile .idx { position: absolute; top: 10px; right: 12px; }
}
.pov .bento .portrait img { object-position: 50% 28%; }
@media (min-width: 810px) { .pov .bento .portrait { margin-right: 14px; } }
@media (max-width: 809px) { .pov .bento .portrait { margin-bottom: 4px; } }

/* H04 · Practices — compact (desktop + mobile; reveal + accordion effects kept) */
.practices { padding-top: clamp(36px, 4vw, 56px) !important; padding-bottom: clamp(40px, 5vw, 72px); }
.practices .sec-head { margin-bottom: clamp(20px, 2.6vw, 34px); align-items: center; }
.practices .sec-head .meta { padding-top: 0; align-self: center; }
.practices .display { font-size: clamp(40px, 5vw, 72px); line-height: .95; }
.practices .display sup { font-size: .26em; top: .2em; }
.practices .svc-item .n { font-size: 11px; padding-top: 19px; }
.practices .svc-head { padding: 15px 0; }
.practices .svc-head .t { font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.04em; }
.practices .pm { width: 26px; height: 26px; }
.practices .pm::before, .practices .pm::after { width: 10px; }
.practices .svc-inner { grid-template-columns: 112px 1fr 1.15fr; gap: 20px; padding-bottom: 22px; }
.practices .svc-inner .thumb { width: 112px; }
.practices .svc-inner p { font-size: 14px; line-height: 1.4; }
.practices .svc-inner .line { font-size: 12px; margin-bottom: 6px; }
.practices .chip-w { font-size: 10.5px; padding: 5px 9px; }
.practices .group-name { font-size: 10.5px; margin: 8px 0 5px; }
.practices .svc-cta { margin-top: 24px; }
.practices .svc-cta .btn.lg { --h: 38px; font-size: 13px; }
@media (max-width: 809px) {
  .practices .sec-head { row-gap: 8px; }
  .practices .display { font-size: 44px; }
  .practices .svc-item { grid-template-columns: 34px 1fr; column-gap: 6px; }
  .practices .svc-item .n { padding-top: 17px; }
  .practices .svc-head { padding: 13px 0; }
  .practices .svc-head .t { font-size: 17px; }
  .practices .svc-inner { grid-template-columns: 64px 1fr; gap: 12px; padding-bottom: 18px; }
  .practices .svc-inner .thumb { width: 64px; aspect-ratio: 1; }
  .practices .svc-inner > :last-child { grid-column: 1 / -1; }
  .practices .svc-inner p { font-size: 13px; }
}
/* label "+" dot: explicit colors (currentColor resolved to the pseudo's own color) */
.label::before { background: var(--ink); color: var(--bg); }
.dark .label::before { background: #fff; color: var(--dark); }

/* H11 · Nowdays × Landscape — compact (toggle + crossfade kept) */
.ops { padding-top: clamp(36px, 4vw, 56px) !important; padding-bottom: clamp(36px, 4vw, 56px) !important; }
.ops .sec-head { margin-bottom: clamp(18px, 2.2vw, 28px); align-items: center; }
.ops .sec-head .meta { padding-top: 0; align-self: center; }
.ops .display { font-size: clamp(34px, 4.2vw, 60px); line-height: .95; }
.ops .ops-toggle { justify-self: end; padding: 0; max-width: none; }
.ops .toggle { margin: 0; }
.ops .toggle button { padding: 7px 14px; font-size: 12px; }
.ops .plan { grid-template-columns: 1fr 3fr; }
.ops .plan .box { padding: 16px; border-radius: var(--r-md); }
.ops .box.side { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; }
.ops .box.side img { height: 104px; border-radius: var(--r-sm); }
.ops .box.side p { font-size: 12px; }
.ops .plan .main { grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; }
.ops .plan .main .h2 { font-size: clamp(22px, 2.2vw, 32px); }
.ops .plan .main p { margin-top: 10px; max-width: 36ch; font-size: 14px; }
.ops .ops-right { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.ops .plan ul { gap: 6px; font-size: 13px; }
.ops .plan li::before { width: 12px; height: 12px; font-size: 10px; margin-right: 8px; }
.ops .btn.block { --h: 38px; font-size: 13px; }
.ops .ops-foot { margin-top: clamp(20px, 2.6vw, 32px); align-items: baseline; }
.ops .ops-foot .lead { font-size: clamp(15px, 1.25vw, 18px); }
@media (max-width: 809px) {
  .ops .display { font-size: 38px; }
  .ops .ops-toggle { justify-self: start; }
  .ops .plan { grid-template-columns: 1fr; gap: 6px; }
  .ops .box.side { flex-direction: row; align-items: center; }
  .ops .box.side img { width: 72px; height: 72px; flex: none; }
  .ops .plan .main { grid-template-columns: 1fr; gap: 16px; }
  .ops .plan .main .h2 { font-size: 24px; }
  .ops .ops-foot { row-gap: 6px; }
}

/* News cards (H05 + News page): large images instead of small thumbnails */
.news-card:not(.feature) { min-height: 0; gap: 16px; justify-content: flex-start; }
.news-card:not(.feature) .thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.news-card:not(.feature) .plus { top: 24px; right: 24px; width: 22px; height: 22px; font-size: 14px; background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.news-card:not(.feature) h3 { margin-top: 6px; }
.news-grid.home .news-card.feature { min-height: 100%; }
@media (max-width: 809px) {
  .news-card:not(.feature) .thumb { aspect-ratio: 16 / 11; }
}
@media (max-width: 809px) { .news-grid.home .news-card.feature, .news-card.feature { min-height: 380px; } }

/* H02 · Welcome & numbers — v3: one left edge (col 2), portrait matches content height */
.pov .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; column-gap: var(--gap); row-gap: var(--gap); align-items: stretch; }
.pov .bento .portrait { grid-row: 1 / 3; grid-column: 1; height: auto; min-height: clamp(300px, 26vw, 380px); align-self: stretch; }
.pov .bento .txt { grid-column: 2 / 5; grid-row: 1; align-self: start; max-width: 50ch; padding: 4px 0 clamp(22px, 2.4vw, 34px); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.32; }
.pov .bento .tile { grid-row: 2; }
.pov .tile { min-height: clamp(150px, 11.5vw, 172px); padding: 16px 18px 18px; }
.pov .tile .idx { font-variant-numeric: tabular-nums; }
.pov .tile .num { font-size: clamp(34px, 3vw, 46px); letter-spacing: -0.065em; }
.pov .tile p { font-size: 12.5px; line-height: 1.35; margin-top: 8px !important; max-width: 28ch; }
.pov .grid4 { align-items: start; }
.pov .pov-title { max-width: 22ch; }
.pov .label { margin-top: .55em; }
@media (max-width: 809px) {
  .pov .bento { grid-template-columns: 1fr; }
  .pov .bento .portrait, .pov .bento .txt, .pov .bento .tile { grid-column: 1; grid-row: auto; }
  .pov .bento .portrait { min-height: 0; aspect-ratio: 4 / 3.4; }
  .pov .bento .txt { padding: 10px 0 12px; max-width: none; }
  .pov .label { margin-top: 0; }
}
.pov .bento .portrait { position: relative; }
.pov .bento .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 809px) { .pov .tile { min-height: 0; } }
@media (min-width: 810px) {
  .pov .bento .portrait { min-height: 0; }
  .pov .tile { position: relative; min-height: clamp(170px, 13vw, 196px); }
  .pov .tile .idx { position: absolute; top: 14px; right: 16px; }
  .pov .tile > div { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 18px; }
  .pov .tile p { margin-top: 0 !important; }
}

/* H02 · Welcome & numbers — v4: wide title + editorial split (large image | text + stat rows) */
.pov .pov-title { max-width: 30ch; font-size: clamp(30px, 3.5vw, 52px); line-height: 1.03; }
.pov .grid4 .pov-title { grid-column: 2 / 5; }
.pov2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: clamp(32px, 4vw, 56px); align-items: stretch; }
.pov2-media { position: relative; border-radius: var(--r-lg); overflow: hidden; height: clamp(420px, 40vw, 600px); background: #ddd; }
.pov2-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.4s var(--ease-out); }
.pov2-media:hover img { transform: scale(1.03); }
.pov2-body { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 4px 0 0; }
.pov2-txt { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.25; max-width: 32ch; }
.stat-rows { list-style: none; }
.stat-rows li { display: grid; grid-template-columns: minmax(150px, 1fr) 1.4fr 28px; align-items: baseline; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.stat-rows li:last-child { border-bottom: 1px solid var(--line); }
.sr-num { font-size: clamp(40px, 4vw, 62px); letter-spacing: -0.07em; line-height: 1; font-variant-numeric: tabular-nums; }
.sr-label { font-size: 13px; color: var(--ink-60); line-height: 1.35; max-width: 34ch; }
.sr-idx { font-size: 10px; color: var(--ink-40); justify-self: end; }
@media (max-width: 809px) {
  .pov .pov-title { font-size: 28px; }
  .pov2 { grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
  .pov2-media { height: auto; aspect-ratio: 4 / 4.2; border-radius: var(--r-md); }
  .pov2-body { gap: 22px; }
  .pov2-txt { font-size: 17px; }
  .stat-rows li { grid-template-columns: 104px 1fr 20px; gap: 12px; padding: 14px 0; }
  .sr-num { font-size: 36px; }
  .sr-label { font-size: 12.5px; }
}

/* H01 · founder card as a floating pop-up, tagline under it (bottom-right) */
.hero-bottom { display: flex; justify-content: flex-end; align-items: flex-end; }
.hero-aside { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.lead-card.pop { justify-self: auto; align-self: stretch; background: #fff; border-radius: 18px; padding: 6px; gap: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.18); }
.lead-card.pop .ph { border: 0; width: 82px; height: 98px; border-radius: 13px; }
.lead-card.pop .ph img { border-radius: 13px; }
.lead-card.pop .info { flex: 1; min-width: 0; padding: 8px 8px 6px 6px; border-radius: 13px; }
.js .lead-card.pop { opacity: 0; transform: translateY(26px) scale(.96); }
.ready .lead-card.pop { opacity: 1; transform: none; transition: opacity .8s ease 2s, transform 1s cubic-bezier(.34,1.4,.64,1) 2s; }
.lead-card.pop:hover { transform: translateY(-3px); transition: transform .4s var(--ease-out); }
.hero-bottom .hero-tag { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; max-width: 32ch; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.25); }
.edit-mode .lead-card.pop { opacity: 1 !important; transform: none !important; }
@media (max-width: 809px) {
  .hero-bottom { justify-content: stretch; }
  .hero-aside { width: 100%; gap: 12px; }
  .lead-card.pop { align-self: stretch; }
  .hero-tag { font-size: 15px; }
}

/* H01 · founder "pin" under the tagline */
.lead-pin { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 5px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 12px 34px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.15);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: 100%; }
.pin-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; }
.pin-ava img { filter: grayscale(1); }
.pin-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; padding-right: 4px; }
.pin-name { font-weight: 500; font-size: 14px; letter-spacing: -0.04em; white-space: nowrap; }
.pin-txt small { font-size: 11px; color: var(--ink-60); white-space: nowrap; }
.pin-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 12px; white-space: nowrap; }
.pin-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 12px; transition: transform .45s var(--ease-out); }
.pin-cta:hover .pin-arrow { transform: rotate(45deg); }
.js .lead-pin { opacity: 0; transform: translateY(18px) scale(.96); }
.ready .lead-pin { opacity: 1; transform: none; transition: opacity .7s ease 2s, transform .9s cubic-bezier(.34,1.4,.64,1) 2s; }
.edit-mode .lead-pin { opacity: 1 !important; transform: none !important; }
.hero-aside { gap: 16px; width: min(400px, 100%); }
@media (max-width: 809px) {
  .lead-pin { align-self: stretch; }
  .pin-txt { flex: 1; }
}
/* H02 mobile photo: explicit height (no reliance on aspect-ratio/lazy-load — iOS Safari safe) */
@media (max-width: 809px) { .pov2-media { aspect-ratio: auto; height: min(104vw, 520px); min-height: 300px; } }
/* H02 mobile: text + numbers first, photo after */
@media (max-width: 809px) { .pov2 { display: flex; flex-direction: column; } .pov2-body { order: 1; } .pov2-media { order: 2; width: 100%; } }
.case-top { padding-top: clamp(36px, 4.5vw, 64px); }
.approach-sec .approach { margin-top: 0; }

/* H03 · Nowdays × Landscape — interactive boxes (accordion, same behaviour as Practices) */
.ops-top .case-bento .feature { min-height: 520px; }
.acc { grid-column: 2 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; gap: var(--gap); }
.acc-item { background: var(--card); border-radius: var(--r-lg); transition: background .4s, flex-grow .6s var(--ease-out); }
.acc-item.open { flex: 1; }
.acc-head { width: 100%; display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 10px; padding: 16px 18px; text-align: left; }
.acc-n { font-size: 11px; color: var(--ink-40); }
.acc-t { display: flex; flex-direction: column; gap: 2px; }
.acc-t b { font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.045em; line-height: 1.1; }
.acc-t span { font-size: 13px; color: var(--ink-60); }
.acc-item .pm { width: 28px; height: 28px; border: 1px solid var(--line); color: var(--ink); }
.acc-head:hover .pm { background: var(--ink); color: #fff; border-color: var(--ink); }
.acc-item:not(.open):hover { background: #fafafa; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out); }
.acc-body > div { overflow: hidden; }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-inner { padding: 0 18px 18px 70px; display: flex; flex-direction: column; gap: 14px; }
.acc-text { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; letter-spacing: -0.035em; max-width: 40ch; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.acc-chip { background: #f1f1f1; border-radius: var(--r-pill); font-size: 11.5px; padding: 6px 11px; }
.acc-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acc-side { font-size: 12.5px; color: var(--ink-60); max-width: 44ch; }
.acc-inner .acc-text, .acc-inner .acc-chips, .acc-inner .acc-foot { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--ease-out); }
.acc-item.open .acc-inner .acc-text { opacity: 1; transform: none; transition-delay: .15s; }
.acc-item.open .acc-inner .acc-chips { opacity: 1; transform: none; transition-delay: .22s; }
.acc-item.open .acc-inner .acc-foot { opacity: 1; transform: none; transition-delay: .29s; }
@media (max-width: 1024px) { .acc { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 809px) {
  .ops-top .case-bento .feature { min-height: 420px; }
  .acc { grid-column: auto !important; }
  .acc-head { grid-template-columns: 34px 1fr 26px; padding: 14px; }
  .acc-inner { padding: 0 14px 16px 14px; }
}
/* spacing set in edit mode */
@media (min-width: 810px) { .approach-sec { padding-top: 78px; padding-bottom: 54px; } }
.ops-top .feature .arrow-link { white-space: nowrap; }

/* G02 · footer without newsletter; founder quote under the email */
.footer { padding-top: clamp(40px, 5vw, 70px); }
.footer .plusrow { margin-top: 0; }
.foot-quote { margin-top: 34px; max-width: 34ch; }
.foot-quote blockquote { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.25; letter-spacing: -0.04em; }
.foot-quote blockquote::before { content: "“"; }
.foot-quote blockquote::after { content: "”"; }
.foot-quote .author { margin-top: 16px; }
/* H03 (Welcome & numbers) without its label row; spacing set in edit mode */
.pov2 { margin-top: 0; }
@media (min-width: 810px) { .pov { padding-top: 33px; padding-bottom: 44px; } }

/* H01 · hero video runs up behind the header (desktop + mobile) */
.has-hero > main { padding-top: 0; }
.has-hero .hero { margin: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); height: 100svh; min-height: 620px; padding-top: calc(var(--nav-h) + 14px); }
.nav { transition: transform .5s var(--ease-out), background .4s ease, color .4s ease; }
.nav.nav-over { background: transparent; color: #fff; }
.nav.nav-over .burger i { background: #fff; }
.nav.nav-over .lang button { color: rgba(255,255,255,.6); }
.nav.nav-over .lang button.on { background: rgba(255,255,255,.18); color: #fff; }
.nav.nav-over .nav-links a[aria-current="page"] { color: rgba(255,255,255,.6); }
.menu-open .nav.nav-over { background: var(--bg); color: var(--ink); }
.menu-open .nav.nav-over .burger i { background: var(--ink); }
.menu-open .nav.nav-over .lang button { color: var(--ink-40); }
.menu-open .nav.nav-over .lang button.on { background: var(--card); color: var(--ink); }
@media (max-width: 809px) {
  .has-hero .hero { padding-top: calc(var(--nav-h) + 10px); min-height: 600px; }
  .wordmark { font-size: clamp(60px, 19.5vw, 92px); }
}
/* H03 mobile: photo first again (then text + numbers) */
@media (max-width: 809px) { .pov2-media { order: 0; } .pov2-body { order: 1; } }

/* work cards: no "N," badge over the images */
.work-card .media .tagline::before { content: none !important; display: none !important; }
/* "+" markers instead of (001) numbering */
.svc-item .n, .acc-n { font-size: 16px !important; font-weight: 300; line-height: 1; }
.dark .svc-item .n { color: rgba(255,255,255,.6); }
/* footer wordmark: lift it so the "y" descender is never cut */
.footer-word { line-height: .9; transform: none; padding-bottom: .2em; margin-top: 50px; }

/* "+" symbols: spin 360° on hover, spin back on leave */
.plus-ico { display: inline-block; transition: transform .6s var(--ease-out); }
.plus-ico:hover, a:hover .plus-ico, button:hover .plus-ico, .svc-head:hover ~ * .plus-ico { transform: rotate(360deg); }
.pm { transition: transform .6s var(--ease-out), background .3s, border-color .3s, color .3s; }
.pm:hover, button:hover > .pm { transform: rotate(360deg); }
.label::before { transition: transform .6s var(--ease-out); }
.label:hover::before { transform: rotate(360deg); }
.news-card .plus { transition: transform .6s var(--ease-out); }
.news-card:hover .plus, .news-card .plus:hover { transform: rotate(360deg); }
.svc-item:hover > .n.plus-ico, .acc-head:hover .plus-ico { transform: rotate(360deg); }
/* Work count "(06)" hidden; its slot stays so spacing does not change */
[data-workcount] { visibility: hidden; }
/* "+" spin fix: each symbol is a 1em square centred on itself, so it turns on its own axis */
.plus-ico { display: inline-grid !important; place-items: center; width: 1em; height: 1em; line-height: 1 !important; transform-origin: 50% 50%; justify-self: start; align-self: start; padding: 0 !important; }
.hero-plus .plus-ico, .plusrow .plus-ico { justify-self: start; }
.label::before, .pm, .news-card .plus { transform-origin: 50% 50%; }
/* "/outlets" next to the big number: own tracking (otherwise it inherits the display letter-spacing and collapses) */
.big-unit { font-size: .3em; color: var(--ink-40); letter-spacing: -0.03em; margin-left: .12em; white-space: nowrap; font-weight: 500; }
/* Contact (K01): form + contacts grouped in a light rounded box */
.contact-box { background: #fff; border-radius: 18px; padding: clamp(24px, 3vw, 44px); align-self: start; box-shadow: 0 1px 0 rgba(10,10,10,.04); }
.contact-box .plusrow { margin: 44px 0 22px !important; }
.contact-box ul { margin-bottom: 0; }
@media (max-width: 809px) { .contact-box { padding: 22px 18px 26px; border-radius: 16px; margin-top: 28px; } }
@media (max-width: 809px) { .contact-box .h3 { font-size: clamp(20px, 6vw, 26px); word-break: break-word; } }
/* H03 stat rows: big numbers aligned to the right of their column (sizes/layout unchanged) */
.stat-rows .sr-num { justify-self: end; text-align: right; padding-right: clamp(12px, 3vw, 48px); }
@media (max-width: 809px) { .stat-rows .sr-num { padding-right: 6px; } }
/* K01 desktop: box rises to the top of "Let's talk." — title + intro stay in cols 1–2, box spans both rows in cols 3–4 */
@media (min-width: 810px) {
  .page-hero[data-section="K01"] { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; }
  .page-hero[data-section="K01"] > h1 { grid-column: 1 / 3; grid-row: 1; }
  .page-hero[data-section="K01"] > .grid4 { display: contents; }
  .page-hero[data-section="K01"] > .grid4 > div:first-child { grid-column: 1 / 3 !important; grid-row: 2; }
  .page-hero[data-section="K01"] .contact-box { grid-column: 3 / 5 !important; grid-row: 1 / span 2; margin-top: 0; }
}
/* Menu: negative tracking pushed the last letter outside the clipping box — give the mask breathing room on both sides */
.menu-big a { padding: 0 .12em .06em; }
/* H07 Work — mobile only: horizontal carousel (swipe right→left), cards snap, bleeds to the screen edges */
@media (max-width: 809px) {
  .work-sec .work-grid { display: flex; grid-template-columns: none; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 4px; }
  .work-sec .work-grid::-webkit-scrollbar { display: none; }
  .work-sec .work-grid > .work-card { flex: 0 0 78%; scroll-snap-align: start; }
  .work-sec .work-card .media { aspect-ratio: 0.82; }
  .work-sec .work-card .media .tagline { font-size: 15px; }
  .work-sec .work-grid > .work-card:last-child { margin-right: var(--gutter); }
}
/* Site-wide rule: the cursor is always the standard black arrow — no I-beam over text, no hand over links/buttons (edit mode keeps its own cursors) */
html, body:not(.edit-mode), body:not(.edit-mode) * , body:not(.edit-mode) *::before, body:not(.edit-mode) *::after { cursor: default !important; }
/* Clickable things show the hand; everything else keeps the default arrow (rule above) */
body:not(.edit-mode) :is(a[href], button, [role="button"], label, select, summary, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], .reel, .acc-head, .svc-head, .faq-item > button, .burger, .lang button, [data-toggle] button),
body:not(.edit-mode) :is(a[href], button, [role="button"], .reel, .acc-head, .svc-head, .burger) * { cursor: pointer !important; }
/* Footer wordmark is a link back to the hero */
a.footer-word { display: block; color: inherit; text-decoration: none; transition: opacity .4s; }
a.footer-word:hover { opacity: .85; }
/* G02 footer — mobile: no ↗ arrows; Sitemap and Social & network side by side under the email/quote */
@media (max-width: 809px) {
  .footer .arrow-link::after { content: none; display: none; }
  .footer-mid { grid-template-columns: 1fr 1fr !important; column-gap: 18px; row-gap: 36px; }
  .footer-mid > div:first-child { grid-column: 1 / -1; }
}
/* H03 stat rows: index numbers (01/02/03) hidden — column kept so the layout doesn't shift */
.stat-rows .sr-idx { visibility: hidden; }
/* H09 film: fullscreen player with sound */
.film-modal { position: fixed; inset: 0; z-index: 400; background: #000; display: grid; place-items: center; animation: filmIn .45s var(--ease-out); }
.film-modal video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 16px; display: grid; place-items: center; z-index: 2; transition: background .3s; }
.film-close:hover { background: rgba(255,255,255,.28); }
html.film-open, html.film-open body { overflow: hidden; }
@keyframes filmIn { from { opacity: 0; } to { opacity: 1; } }
/* Press coverage article ("Read the coverage"): inverted — dark card, light type (same look as Practices) */
.article-dark { overflow: clip; margin-top: 6px; padding-bottom: var(--gutter); }
.article-dark .prose p { color: rgba(255,255,255,.72); }
.article-dark .prose p:first-child { color: #fff; }
.article-dark .micro.muted, .article-dark .author small { color: var(--white-60); }
.article-dark .press-card { background: rgba(255,255,255,.06); color: #fff; }
.article-dark .press-card:hover { background: rgba(255,255,255,.11); }
.article-dark .press-card .logo img { filter: brightness(0) invert(1) !important; opacity: .92; }
.article-dark .press-card .arrow-link::after { color: var(--white-60); }
.article-dark .next-card { color: #fff; }
@media (max-width: 809px) { .article-dark { padding-inline: var(--gutter); padding-top: var(--gutter); } }
/* Mobile menu: big links 20% smaller (48px → 38.4px) */
@media (max-width: 809px) { .menu-big a { font-size: 38.4px; } }
/* Play symbol drawn as SVG (the ▶ character turns into an emoji on iPhone) */
.play-ico { width: 1em; height: 1em; display: block; margin-left: .12em; }
.ring .play-ico { width: 30px; height: 30px; }
.reel .play .circle .play-ico { width: 20px; height: 20px; }
/* Mobile fixes — Contact: box + intro use the full content width; Studio: recognition table no longer wider than the screen */
@media (max-width: 809px) {
  .page-hero[data-section="K01"] .grid4 > * { justify-self: stretch !important; width: 100%; min-width: 0; }
  .page-hero[data-section="K01"] .lead { max-width: none !important; }
  .table .tr { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
  .table .tr > :nth-child(1) { display: inline-grid !important; }
  .table .tr > :nth-child(2) { text-align: left; }
  .table .tr > * { min-width: 0; overflow-wrap: anywhere; }
  .table .tr:not(.th):hover { padding-left: 0; }
}
/* H01 hero logo tweaks
   Desktop: "Studios" sits under the start of "Nowdays" (under the N).
   Mobile: small nav logo hidden at the top (shows once you scroll down); the big wordmark block moves up into that space. */
.wordmark-sub { text-align: left !important; max-width: none !important; padding-left: .06em; }
.nav .logo { transition: opacity .4s ease, transform .4s var(--ease-out); }
@media (max-width: 809px) {
  .has-hero .nav.at-top .logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  .has-hero .hero { padding-top: 46px; }
}
@media (max-width: 809px) {
  .has-hero .nav.nav-over { transition: background .4s ease, backdrop-filter .4s ease; }
  .has-hero .nav.nav-over:not(.at-top) { background: rgba(10,10,10,.38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
/* Mobile hero: wordmark block rises to the nav row (aligned with EN/PT + menu), slightly smaller so it never touches them */
@media (max-width: 809px) {
  .has-hero .hero { padding-top: 10px; }
  .has-hero .hero .wordmark { font-size: clamp(50px, 15.8vw, 76px); }
  .has-hero .hero-top { margin-top: 0; }
}
/* H01 desktop — top of the home page (before the first scroll):
   EN/PT + menu stay top-right; Studio/Work/News/Contact sit at the bottom-right of the hero video;
   no mini "nowdays" logo and no tagline; the big wordmark + services sit close to the top.
   After the first scroll the nav returns to its normal format (logo + links + EN/PT + menu at the top). */
@media (min-width: 810px) {
  .has-hero .hero { padding-top: 14px; }
  .has-hero .hero-top { margin-top: 0; }
  .has-hero .hero-bottom .hero-tag { display: none; }
  .has-hero .nav .logo, .has-hero .nav .nav-links a { transition: opacity .45s ease, transform .6s var(--ease-out); }
  body.has-hero:not(.menu-open) .nav.at-top .logo { opacity: 0; pointer-events: none; }
  body.has-hero:not(.menu-open) .nav.at-top .nav-links { display: flex; position: fixed; right: calc(var(--gutter) + 6px); bottom: calc(var(--gutter) + 12px); gap: clamp(40px, 5.5vw, 96px); font-size: 15px; animation: navLinksIn .6s var(--ease-out); }
}
@media (min-width: 810px) {
  body.has-hero:not(.menu-open) .nav.at-top .nav-end { grid-column: -2 / -1; grid-row: 1; }
  .has-hero .hero-list { margin-top: 34px; }
}
@keyframes navLinksIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 810px) {
  .has-hero .nav.nav-over:not(.at-top) { background: rgba(10,10,10,.38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
/* H02: headline + subtitle — centred on desktop, left-aligned on mobile */
.approach-sub { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.4; letter-spacing: -0.025em; color: var(--ink-60); max-width: 52ch; margin-top: 18px; }
@media (min-width: 810px) {
  .approach-sec .approach { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 18px; }
  .approach-sec .approach .h2 { max-width: 26ch; margin-inline: auto; }
  .approach-sec .approach-sub { margin-inline: auto; margin-top: 4px; }
}
@media (max-width: 809px) {
  .approach-sec .approach, .approach-sec .approach * { text-align: left; }
  .approach-sub { font-size: 15px; margin-top: 10px; }
}
@media (min-width: 810px) { .approach-sec .approach .h2, .approach-sec .approach-sub { text-wrap: balance; } }
/* Tagline "A culture-led creative agency & production company." removed from the hero on every screen */
.has-hero .hero-bottom .hero-tag { display: none !important; }
.approach-sec .approach .h2 { text-wrap: balance; }
/* H02 headline 2× (was clamp(24px, 2.6vw, 36px)) */
.approach-sec .approach .h2 { font-size: clamp(48px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -0.055em; max-width: 20ch; }
@media (max-width: 809px) { .approach-sec .approach .h2 { font-size: 48px; } }
/* H02 headline a bit smaller (~15%) */
.approach-sec .approach .h2 { font-size: clamp(40px, 4.4vw, 61px); }
@media (max-width: 809px) { .approach-sec .approach .h2 { font-size: 40px; } }
/* H02 bottom spacing (edit mode: desktop 54 → 38px; same −16px on mobile) */
@media (min-width: 810px) { .approach-sec { padding-bottom: 38px; } }
@media (max-width: 809px) { .approach-sec { padding-bottom: 32px; } }
@media (max-width: 809px) { .stat-rows li { grid-template-columns: 122px 1fr 20px; } }
/* H03 desktop: mirrored — text on the left, photo on the right (mobile keeps photo first) */
@media (min-width: 810px) {
  .pov2 .pov2-media { order: 2; }
  .pov2 .pov2-body { order: 1; }
}
/* Mobile: section spacing mirrors the desktop edit-mode spacing (same proportions of the default gaps)
   H02 desktop 78/38 of 86 → mobile 44/32 · H03 desktop 33/44 of 158 → mobile 20/24 */
@media (max-width: 809px) {
  .approach-sec { padding-top: 44px; padding-bottom: 32px; }
  .pov { padding-top: 20px; padding-bottom: 24px; }
}
/* H04 Work — desktop: short line on the left corner, single line, bottom-aligned with the title */
@media (min-width: 810px) {
  .work-sec .sec-head .aside { grid-column: 1 / 2; grid-row: 1; white-space: nowrap; max-width: none; align-self: end; }
  .work-sec .sec-head > * { grid-row: 1; }
}
/* H04 Work — desktop: line sits under "Selected ©2026", aligned with the title */
@media (min-width: 810px) {
  .work-sec .sec-head .aside { grid-column: 2 / 4; grid-row: 2; align-self: start; padding-bottom: 0; margin-top: 14px; }
}
/* H04 Work — desktop: title block on the left edge, aligned with the project cards */
@media (min-width: 810px) {
  .work-sec .sec-head .display { grid-column: 1 / 4; }
  .work-sec .sec-head .aside { grid-column: 1 / 4; }
}
/* H03 — new longer text: bigger, wider paragraph that fills the column above the numbers (desktop); mobile slightly larger */
@media (min-width: 810px) {
  .pov2-body { justify-content: space-between; gap: 48px; }
  .pov2-txt { font-size: clamp(22px, 2.15vw, 31px); line-height: 1.18; letter-spacing: -0.04em; max-width: 27ch; text-wrap: pretty; }
}
@media (max-width: 809px) { .pov2-txt { font-size: 19px; line-height: 1.24; text-wrap: pretty; } }
/* H04 Work title smaller (~25%) */
.work-sec .sec-head .display { font-size: clamp(52px, 7.5vw, 108px); }
/* H04 Work — mobile: 2 columns × 3 rows grid (replaces the carousel) */
@media (max-width: 809px) {
  .work-sec .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
  .work-sec .work-grid > .work-card { flex: none; min-width: 0; margin-right: 0 !important; gap: 4px; }
  .work-sec .work-card .bar { padding: 7px 9px; font-size: 11px; border-radius: 10px; }
  .work-sec .work-card .bar > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .work-sec .work-card .media { aspect-ratio: 0.82; border-radius: 12px; }
  .work-sec .work-card .media .tagline { font-size: 12px; padding: 10px; }
}
/* H04 spacing (edit mode: desktop 67/146 → 0/56; mobile same proportion 80/80 → 0/32) */
.work-sec { padding-top: 0; padding-bottom: 56px; }
@media (max-width: 809px) { .work-sec { padding-top: 0; padding-bottom: 32px; } }
/* H04 Work: line under the title removed; tighter gap between "Selected ©2026" and the cards */
.work-sec .sec-head { margin-bottom: 26px; }
@media (max-width: 809px) { .work-sec .sec-head { margin-bottom: 18px; } }
/* Practices — compact, minimal card (~half the size): narrower box, smaller type, single-column list */
.practices { max-width: 860px; margin-inline: auto !important; padding: 30px 30px 26px !important; border-radius: 16px; }
.practices .sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.practices .sec-head .meta { order: 2; padding: 0; font-size: 11px; }
.practices .display { font-size: clamp(30px, 2.8vw, 38px); line-height: 1; letter-spacing: -0.05em; }
.practices .svc-item { grid-template-columns: 22px 1fr; column-gap: 6px; }
.practices .svc-item .n { font-size: 13px !important; padding-top: 12px; }
.practices .svc-head { padding: 9px 0; gap: 12px; }
.practices .svc-head .t { font-size: 15px; letter-spacing: -0.03em; }
.practices .pm { width: 20px; height: 20px; }
.practices .pm::before, .practices .pm::after { width: 8px; }
.practices .svc-inner { grid-template-columns: 72px 1fr 1fr; gap: 14px; padding-bottom: 14px; }
.practices .svc-inner .thumb { width: 72px; }
.practices .svc-inner p { font-size: 12.5px; }
.practices .svc-inner .line { font-size: 11px; }
.practices .chip-w { font-size: 9.5px; padding: 4px 7px; }
.practices .group-name { font-size: 9.5px; }
.practices .svc-cta { display: flex; justify-content: flex-start; margin-top: 16px; padding-left: 28px; }
.practices .svc-cta .btn.lg { --h: 32px; font-size: 12px; }
@media (min-width: 810px) { .practices { margin-block: 24px; } }
@media (max-width: 809px) {
  .practices { max-width: none; margin-inline: 10px !important; padding: 22px 16px 20px !important; }
  .practices .display { font-size: 30px; }
  .practices .svc-item { grid-template-columns: 22px 1fr; }
  .practices .svc-head .t { font-size: 15px; }
  .practices .svc-inner { grid-template-columns: 56px 1fr; }
  .practices .svc-inner .thumb { width: 56px; }
  .practices .svc-cta { padding-left: 0; }
}
.practices .svc-cta { padding-left: 10px; }
@media (min-width: 810px) { .practices { margin-block: 24px 56px; } }
@media (max-width: 809px) { .practices { margin-bottom: 36px; } .practices .svc-cta { padding-left: 0; } }
/* Practices — full-bleed band (edge to edge, like the other dark sections), compact type kept.
   Desktop: editorial split — title, label and CTA on the left (col 1), list across cols 2–4. */
.practices { max-width: none !important; margin-inline: 6px !important; margin-block: 0 !important; border-radius: var(--r-xl); }
@media (min-width: 810px) {
  .practices { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); grid-template-rows: auto 1fr; padding: 44px var(--gutter) 44px !important; }
  .practices > .sec-head { grid-column: 1 / 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
  .practices > .sec-head .meta { order: 0; }
  .practices > .sec-head .display { order: 1; font-size: clamp(34px, 3.2vw, 46px); }
  .practices > .svc { grid-column: 2 / 5; grid-row: 1 / span 2; }
  .practices > .svc-cta { grid-column: 1 / 2; grid-row: 2; align-self: end; margin: 0; padding: 0; }
  .practices .svc-head .t { font-size: 17px; }
  .practices .svc-head { padding: 11px 0; }
}
@media (max-width: 809px) {
  .practices { margin-inline: 6px !important; padding: 26px var(--gutter) 24px !important; }
}
.work-sec { padding-top: clamp(40px, 5vw, 72px); }
@media (min-width: 810px) {
  .practices > .sec-head .meta { align-self: flex-start; margin: 0; padding: 0; grid-column: auto; }
  .practices > .svc-cta { display: block; }
  .practices > .svc-cta > span:empty { display: none; }
}
@media (max-width: 809px) { .work-sec { padding-top: 32px; } }
/* Practices — light version: very light grey band (subtle lift from the page background), dark type, no CTA */
.practices-light { background: #e9e9e9; color: var(--ink); }
.practices-light .svc { border-top: 1px solid rgba(10,10,10,.1); }
.practices-light .svc-item { border-bottom: 1px solid rgba(10,10,10,.1); }
.practices-light .svc-item .n { color: var(--ink-40) !important; }
.practices-light .label::before { background: var(--ink); color: var(--bg); }
.practices-light .pm { border-color: rgba(10,10,10,.18); color: var(--ink); }
.practices-light .svc-head:hover .pm { background: var(--ink); color: #fff; border-color: var(--ink); }
.practices-light .svc-inner p, .practices-light .group-name { color: var(--ink-60); }
.practices-light .svc-inner .line { color: var(--ink); }
.practices-light .chip-w { background: #fff; color: var(--ink); }
@media (min-width: 810px) { .practices-light > .svc { grid-row: 1; } }
@media (min-width: 810px) { .practices > .sec-head { justify-content: flex-start; align-self: start; } }
/* H06: Practices boxes inside the accordion */
.acc-prac-top { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; max-width: none; }
.acc-prac-top p { font-size: inherit; }
.acc-thumb { width: 84px; aspect-ratio: 1.15; border-radius: 10px; overflow: hidden; background: #ddd; }
.acc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acc-groups { flex-direction: column; gap: 10px; }
.acc-group-name { font-size: 11px; color: var(--ink-60); margin-bottom: 5px; }
@media (max-width: 809px) { .acc-prac-top { grid-template-columns: 64px 1fr; } .acc-thumb { width: 64px; } }
/* H03 desktop: smaller, calmer paragraph (was up to 31px) */
@media (min-width: 810px) {
  .pov2-txt { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.3; letter-spacing: -0.03em; max-width: 34ch; }
}
/* H04 (Nowdays × Landscape + practices) spacing — edit mode desktop 0/12; mobile same proportion */
.ops-top[data-section] { padding-top: 0 !important; padding-bottom: 12px !important; }
@media (max-width: 809px) { .ops-top[data-section] { padding-top: 0 !important; padding-bottom: 16px !important; } }
/* H03 desktop: paragraph sized + balanced so no word is left alone on the last line */
@media (min-width: 810px) {
  .pov2-txt { font-size: clamp(20px, 1.72vw, 26px); line-height: 1.25; max-width: 30ch; text-wrap: balance; }
}
/* H05 Work title smaller on desktop */
@media (min-width: 810px) { .work-sec .sec-head .display { font-size: clamp(44px, 5.2vw, 76px); } }
/* Mobile: consistent section rhythm (32px top / 32px bottom) for the rest of the home page */
@media (max-width: 809px) {
  main > [data-section="H08"], main > [data-section="H05"], main > [data-section="H09"],
  main > [data-section="H10"], main > [data-section="H11"] { padding-top: 32px !important; padding-bottom: 32px !important; }
  main > [data-section="H11"] { padding-top: 40px !important; }
}
/* H04 consolidated "One operation" box: Nowdays + Landscape side by side inside */
.acc-ops .acc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acc-ops .acc-group-name { font-size: 12px; color: var(--ink); margin-bottom: 6px; }
.acc-ops .acc-group-name b { font-weight: 500; }
.acc-ops .acc-group .acc-side { margin-bottom: 8px; }
@media (max-width: 809px) { .acc-ops .acc-groups { grid-template-columns: 1fr; } }
/* H04 whole-section sizing: image card matches the shorter list, tighter boxes */
@media (min-width: 810px) {
  .ops-top .case-bento .feature { min-height: 0; }
  .ops-top .acc { gap: 4px; }
  .ops-top .acc-head { padding-block: 12px; }
}
@media (max-width: 809px) {
  .ops-top .case-bento .feature { min-height: 360px; }
  .ops-top .acc-head { padding-block: 11px; }
}
/* H06 · Lettering film — horizontal video box (desktop + mobile), autoplay muted loop */
.film-band { padding-block: 12px 24px; }
.film-box { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: #111; }
.film-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 809px) { .film-band { padding-block: 8px 16px; } .film-box { border-radius: var(--r-md); } }
/* H03 — compact (~half height): smaller photo, tighter text + numbers */
@media (min-width: 810px) {
  .pov2 { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
  .pov2-media { height: auto; min-height: 0; aspect-ratio: auto; }
  .pov2-body { gap: 22px; justify-content: flex-start; }
  .pov2-txt { font-size: clamp(17px, 1.35vw, 20px); max-width: 40ch; }
  .stat-rows li { padding: 9px 0; grid-template-columns: minmax(120px, .8fr) 1.4fr 0; }
  .stat-rows .sr-num { font-size: clamp(32px, 2.9vw, 44px); }
  .stat-rows .sr-label { font-size: 12.5px; }
}
@media (max-width: 809px) {
  .pov2 { gap: 14px; }
  .pov2-media { aspect-ratio: 16 / 10; }
  .pov2-body { gap: 14px; }
  .pov2-txt { font-size: 16px; }
  .stat-rows li { padding: 8px 0; grid-template-columns: 104px 1fr 0; }
  .stat-rows .sr-num { font-size: 30px; }
  .stat-rows .sr-label { font-size: 12px; }
}
@media (max-width: 809px) { .pov2-media { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 11 !important; } }
@media (max-width: 809px) { .pov2-txt { font-size: 17px !important; line-height: 1.3; max-width: none !important; text-wrap: pretty; letter-spacing: -0.03em; } }
.pov2-media img[src*="n-metal"] { object-position: 50% 55%; }
/* H03 desktop: paragraph fills the text column; numbers aligned to the text start */
@media (min-width: 810px) {
  .pov2-body { justify-content: space-between; gap: 28px; }
  .pov2-txt { font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.04em; max-width: none; text-wrap: balance; }
  .stat-rows li { grid-template-columns: auto 1fr 0; column-gap: 28px; }
  .stat-rows .sr-num { justify-self: start; text-align: left; padding-right: 0; min-width: 4.2ch; }
  .stat-rows .sr-label { max-width: 46ch; }
}
@media (min-width: 810px) {
  .pov2 { grid-template-columns: 1.3fr 1fr; }
  .stat-rows li { grid-template-columns: 9.5rem 1fr 0; }
  .stat-rows .sr-num { min-width: 0; }
  .pov2-media img[src*="n-metal"] { object-position: 50% 50%; }
}
@media (min-width: 1600px) { .pov2 { grid-template-columns: 1.15fr 1fr; } .pov2-txt { font-size: 32px; } }
/* H03 desktop: photo with a fixed 16:10 frame (never cropped on wide screens); text column takes the rest */
@media (min-width: 810px) {
  .pov2 { grid-template-columns: minmax(0, 1fr) clamp(380px, 38vw, 600px) !important; align-items: stretch; }
  .pov2-media { aspect-ratio: 16 / 10 !important; height: auto !important; align-self: start; }
  .pov2-txt { font-size: clamp(20px, 1.9vw, 30px) !important; }
}
/* H09 press cards with image */
.press-photo { margin: -18px -18px 4px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: #ddd; }
.press-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.press-card:hover .press-photo img { transform: scale(1.04); }
.press-card { overflow: hidden; justify-content: flex-start; }
.press-card .arrow-link { margin-top: auto; }
.press .press-card .logo img { filter: none; }
@media (max-width: 809px) { .press .summary { min-height: 0 !important; gap: 18px; } .press .summary .btn { margin-top: 6px; } }
/* H09 press: summary + 4 outlets in one row on desktop */
@media (min-width: 1025px) { .press { grid-template-columns: 0.9fr repeat(4, 1fr); } .press-card blockquote { font-size: 15.5px; } }
@media (min-width: 810px) and (max-width: 1024px) { .press { grid-template-columns: 1fr 1fr; } }
/* H09 press: 4 outlet cards only (summary removed) — Forbes, Bazaar, Update or Die, Jumper */
@media (min-width: 1025px) { .press { grid-template-columns: repeat(4, 1fr) !important; } }

/* =====================================================================
   UX pass — one type scale, one rhythm, compact closing
   ===================================================================== */
:root { --fs-sec: clamp(40px, 4.2vw, 60px); --sec-pad: clamp(56px, 6vw, 88px); }
@media (max-width: 809px) { :root { --fs-sec: 34px; --sec-pad: 32px; } }

/* 1 · Section titles share one size: Work · News · Press · Team · FAQ · Let's talk */
.work-sec .sec-head .display,
.news-sec > .grid4 > h2,
[data-section="H09"] > .grid4 > h2,
[data-section="H10"] h2.h2,
.faq .display,
.cta-right .display { font-size: var(--fs-sec) !important; line-height: .98 !important; letter-spacing: -0.055em !important; }
.work-sec .sec-head .display span { font-size: .3em !important; }

/* 2 · Desktop rhythm: same breathing room between every content section */
@media (min-width: 810px) {
  main > [data-section="H06"], main > [data-section="H08"], main > [data-section="H05"],
  main > [data-section="H09"], main > [data-section="H10"], main > [data-section="H11"] { padding-top: var(--sec-pad) !important; padding-bottom: var(--sec-pad) !important; }
  .news-sec > .grid4, [data-section="H09"] > .grid4 { margin-bottom: 28px !important; }
}

/* 3 · H08 Human Talks — mirrored on desktop (feature image on the right) */
@media (min-width: 1025px) {
  .talk-sec .case-bento { grid-template-columns: 1fr 1fr 2fr; grid-auto-flow: dense; }
  .talk-sec .case-bento .feature { grid-column: 3; grid-row: 1 / span 2; }
  .talk-sec .case-bento > .tile:not([style*="span 2"]) { grid-row: 1; }
  .talk-sec .case-bento > .tile[style*="span 2"] { grid-column: 1 / span 2 !important; grid-row: 2; }
  .talk-sec .case-bento .feature { min-height: 480px; }
}

/* 4 · H12 Let's talk — compact closing (≈ half height) */
.cta { min-height: 0 !important; padding: clamp(28px, 3.4vw, 48px) var(--gutter) !important; align-items: center; }
.cta-feats { display: none !important; }
.cta-right .display { margin-bottom: 14px !important; }
.cta-right .lead { font-size: clamp(16px, 1.3vw, 20px); margin-bottom: 18px; }
.form-card { padding: 18px; max-width: 440px; }
.form-card h3 { font-size: 22px; margin: 4px 0 14px; }
.field { margin-bottom: 8px; }
.field input, .field textarea { padding: 10px 11px; font-size: 13.5px; }
.field textarea { min-height: 64px; height: 64px; }
.form-card .btn.lg { --h: 42px; }
@media (min-width: 810px) { .cta { grid-template-columns: 440px 1fr; column-gap: clamp(32px, 5vw, 80px); } }
@media (max-width: 809px) {
  .cta { display: flex !important; flex-direction: column-reverse; gap: 18px; padding: 26px 16px 16px !important; }
  .cta .lead-card { display: none; }
  .form-card { max-width: none; width: 100%; }
}

/* 5 · Mobile: long card lists become swipe carousels (News, Press) — same gesture as the rest of the site */
@media (max-width: 809px) {
  .news-grid.home, [data-section="H09"] .press {
    display: flex !important; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .news-grid.home::-webkit-scrollbar, [data-section="H09"] .press::-webkit-scrollbar { display: none; }
  .news-grid.home > *, [data-section="H09"] .press > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
  .news-grid.home > :last-child, [data-section="H09"] .press > :last-child { margin-right: var(--gutter); }
  [data-section="H09"] .press-card blockquote { font-size: 15px; }
}
/* H10 team (desktop): intro sits right under the title instead of floating at the bottom */
@media (min-width: 810px) {
  [data-section="H10"] .team-wrap .left { display: flex; flex-direction: column; justify-content: flex-start !important; gap: 22px; }
  [data-section="H10"] .team-split { grid-template-columns: 1fr; max-width: 40ch; }
  [data-section="H10"] .team-split p { font-size: 15px !important; color: var(--ink-60); }
}
/* H12 mobile: title block aligned to the form card edge */
@media (max-width: 809px) { .cta-right { padding: 0 4px !important; margin: 0 !important; } }
@media (max-width: 809px) { .cta { align-items: stretch !important; } }
/* Edit-mode spacing: H09 press desktop 0/0, H10 team desktop 64/0 (mobile in proportion) */
@media (min-width: 810px) { main > [data-section="H09"] { padding-top: 0 !important; padding-bottom: 0 !important; } main > [data-section="H10"] { padding-top: 64px !important; padding-bottom: 0 !important; } main > [data-section="H11"] { padding-top: var(--sec-pad) !important; } }
@media (max-width: 809px) { main > [data-section="H09"] { padding-top: 8px !important; padding-bottom: 0 !important; } main > [data-section="H10"] { padding-top: 24px !important; padding-bottom: 0 !important; } }

/* =====================================================================
   H03 · Intro + metrics (rebuilt) — text leads, image supports, numbers stay typographic
   ===================================================================== */
.pov3 { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }
.pov3-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 64px); row-gap: clamp(28px, 3.4vw, 48px); align-items: start; }
.pov3-lead { grid-column: 1; grid-row: 1; margin: 0; color: var(--ink); font-size: clamp(24px, 2.35vw, 36px); line-height: 1.14; letter-spacing: -0.045em; font-weight: 500; max-width: 24ch; text-wrap: pretty; }
.pov3-media { grid-column: 2; grid-row: 1 / span 2; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: #ddd; align-self: stretch; }
.pov3-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.pov3-stats { grid-column: 1; grid-row: 2; align-self: end; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pov3-stats li { padding: 18px 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pov3-stats li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.pov3-stats .sr-num { font-size: clamp(40px, 4.2vw, 64px); line-height: .9; letter-spacing: -0.06em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); text-align: left; padding: 0; justify-self: auto; }
.pov3-stats .sr-label { font-size: 15px; line-height: 1.35; color: rgba(10,10,10,.72); max-width: 26ch; }
@media (max-width: 809px) {
  .pov3 { padding-top: 24px !important; padding-bottom: 28px !important; }
  .pov3-grid { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 20px; }
  .pov3-lead { grid-column: 1; grid-row: 1; font-size: 23px; line-height: 1.18; max-width: none; }
  .pov3-media { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; align-self: auto; }
  .pov3-stats { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
  .pov3-stats li, .pov3-stats li + li { flex-direction: row; align-items: baseline; gap: 16px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .pov3-stats .sr-num { font-size: 38px; min-width: 112px; }
  .pov3-stats .sr-label { font-size: 15px; }
}

/* =====================================================================
   H04 · One operation + practices — calmer image caption, one control per row
   ===================================================================== */
/* image: one clear message, bottom-left, legible over the photo */
.ops-top .case-bento .feature { justify-content: flex-end !important; }
.ops-top .case-bento .feature::before { background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%) !important; }
.ops-cap { display: flex; flex-direction: column; gap: 14px; max-width: 16ch; }
.ops-cap .big { font-size: clamp(40px, 4.6vw, 72px) !important; line-height: .92; }
.ops-sub { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; letter-spacing: -0.03em; color: rgba(255,255,255,.9); max-width: 30ch; }
.ops-sub .small { opacity: 1 !important; color: rgba(255,255,255,.9); font-size: inherit; }

/* list label separating the overview row from the practices */
.acc-label { margin: 14px 0 2px; padding-left: 4px; font-size: 12px; letter-spacing: .02em; color: var(--ink-60); }

/* rows: the whole header is the button; single +/− indicator on the right */
.ops-top .acc { gap: 4px; }
.ops-top .acc-item { border-radius: var(--r-md); transition: background .3s, box-shadow .3s; }
.ops-top .acc-head { grid-template-columns: 1fr auto !important; gap: 16px; padding: 16px 18px !important; min-height: 64px; border-radius: inherit; outline: none; }
.ops-top .acc-n { display: none !important; }
.ops-top .acc-t { gap: 4px; }
.ops-top .acc-t b { font-size: clamp(18px, 1.45vw, 21px); }
.ops-top .acc-t span { font-size: 14px; line-height: 1.35; color: rgba(10,10,10,.66); }
.ops-top .acc-item .pm { width: 32px; height: 32px; border: 1px solid rgba(10,10,10,.18); transform: none !important; }
.ops-top .acc-item:hover { background: #fafafa; }
.ops-top .acc-head:hover .pm { background: var(--ink); color: #fff; border-color: var(--ink); }
.ops-top .acc-head:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.ops-top .acc-item.open { box-shadow: inset 0 0 0 1px rgba(10,10,10,.14); background: var(--card); }
.ops-top .acc-item.open .pm { background: var(--ink); color: #fff; border-color: var(--ink); }

/* expanded content: readable size and contrast */
.ops-top .acc-inner { padding: 0 18px 20px 18px !important; gap: 16px; }
.ops-top .acc-text, .ops-top .acc-prac-top p { font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.ops-top .acc-group-name { font-size: 12.5px !important; color: rgba(10,10,10,.66) !important; margin-bottom: 6px; }
.ops-top .acc-ops .acc-group-name { color: var(--ink) !important; }
.ops-top .acc-chip { font-size: 12.5px; padding: 6px 11px; background: #f1f1f1; color: var(--ink); }
.ops-top .acc-thumb { width: 96px; border-radius: 10px; }
.ops-top .acc-prac-top { grid-template-columns: 96px 1fr; }

@media (max-width: 809px) {
  .ops-top .case-bento .feature { min-height: 0 !important; aspect-ratio: 4 / 4.2; padding: 18px; }
  .ops-cap .big { font-size: 38px !important; }
  .ops-sub { font-size: 15px; }
  .ops-top .acc-head { padding: 14px 16px !important; min-height: 60px; }
  .ops-top .acc-inner { padding: 0 16px 18px 16px !important; }
  .ops-top .acc-thumb { width: 72px; }
  .ops-top .acc-prac-top { grid-template-columns: 72px 1fr; }
  .ops-top .acc-text, .ops-top .acc-prac-top p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .ops-top .acc-body { transition: none; } }
.ops-cap { max-width: none; }
.ops-cap .big { max-width: 11ch; }
.ops-sub { max-width: 34ch; }
@media (max-width: 809px) { .ops-top .case-bento .feature::before { background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,0,0,.78) 100%) !important; } }

/* =====================================================================
   H10 · Team + FAQ in one card
   Desktop: left = team intro (top) + FAQ (bottom) · right = portraits (full height)
   Mobile: intro → portraits → FAQ
   ===================================================================== */
[data-section="H10"] .team-wrap { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; row-gap: 0; }
[data-section="H10"] .team-wrap > .left { grid-column: 1; grid-row: 1; padding-bottom: 8px; }
[data-section="H10"] .team-wrap > .team-grid { grid-column: 2; grid-row: 1 / span 2; }
.team-faq { grid-column: 1; grid-row: 2; align-self: end; padding: 28px 18px 6px; border-top: 1px solid var(--line); margin: 20px 18px 0; padding-left: 0; padding-right: 0; }
.team-faq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.team-faq-title { margin: 0; font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.05em; line-height: 1; }
.team-faq-head p { margin: 0; max-width: 30ch; text-align: right; font-size: 13px; }
.team-faq .faq-list { gap: 4px; }
.team-faq .faq-item { background: var(--bg); border-radius: var(--r-md); transition: background .3s; }
.team-faq .faq-item:hover { background: #ececec; }
.team-faq .faq-item > button { width: 100%; min-height: 50px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; font-size: 15px; letter-spacing: -0.02em; border-radius: inherit; }
.team-faq .faq-item > button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.team-faq .faq-item .ans p { padding: 0 16px 14px; font-size: 14.5px; line-height: 1.4; color: rgba(10,10,10,.72); max-width: 52ch; }
@media (max-width: 809px) {
  [data-section="H10"] .team-wrap { grid-template-columns: 1fr; grid-template-rows: auto; }
  [data-section="H10"] .team-wrap > .left, [data-section="H10"] .team-wrap > .team-grid, .team-faq { grid-column: 1; grid-row: auto; }
  .team-faq { margin: 18px 0 0; padding-top: 22px; }
  .team-faq-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .team-faq-head p { text-align: left; }
  .team-faq-title { font-size: 28px; }
  .team-faq .faq-item > button { min-height: 54px; }
}
/* CTA keeps its own compact padding (it took the H11 slot) */
main > section.cta[data-section] { padding: clamp(28px, 3.4vw, 48px) var(--gutter) !important; }
@media (max-width: 809px) { main > section.cta[data-section] { padding: 26px 16px 16px !important; } }
@media (min-width: 810px) { [data-section="H10"] .team-wrap > .team-grid { align-self: stretch; align-content: stretch; grid-auto-rows: 1fr; } }
@media (min-width: 810px) { [data-section="H10"] .team-wrap > .team-grid { grid-auto-rows: 1fr; } [data-section="H10"] .team-grid .member { aspect-ratio: auto; min-height: 0; height: 100%; } }
.pov3-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pov3-media video { object-position: 50% 50%; }
.menu-foot { grid-template-columns: 1fr !important; } .menu-foot > :last-child { justify-self: start !important; }
/* H03 type a step smaller */
.pov3-lead { font-size: clamp(20px, 1.85vw, 28px); line-height: 1.18; max-width: 28ch; }
.pov3-stats .sr-num { font-size: clamp(34px, 3.3vw, 50px); }
.pov3-stats .sr-label { font-size: 14px; }
@media (max-width: 809px) { .pov3-lead { font-size: 20px; } .pov3-stats .sr-num { font-size: 32px; min-width: 100px; } .pov3-stats .sr-label { font-size: 14px; } }
/* H03 desktop: numbers sit right under the text; the video frame follows that height */
@media (min-width: 810px) {
  .pov3-grid { grid-template-rows: auto auto; row-gap: 36px; }
  .pov3-stats { align-self: start; }
  .pov3-media { aspect-ratio: auto !important; position: relative; align-self: stretch; min-height: 320px; }
  .pov3-media video, .pov3-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 810px) { .pov3-media { min-height: 0 !important; } .pov3-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); } }
/* Mobile: H03 text follows the H02 headline closely */
@media (max-width: 809px) {
  main > .approach-sec[data-section] { padding-bottom: 0 !important; }
  main > .pov3[data-section] { padding-top: 16px !important; }
}
/* Mobile H02 → H03: balanced pairing (headline / lead / media) */
@media (max-width: 809px) {
  main > .pov3[data-section] { padding-top: 26px !important; }
  .pov3-lead { font-size: 18px !important; line-height: 1.32 !important; letter-spacing: -0.025em !important; color: rgba(10,10,10,.78) !important; max-width: 34ch !important; }
  .pov3-grid { row-gap: 24px !important; }
}

/* =====================================================================
   Spacing system — one vertical rhythm for the whole home page
   desktop: 112px between sections · mobile: 64px · related pairs closer
   ===================================================================== */
:root { --gap-y: 96px; --gap-rel: 36px; }
@media (max-width: 809px) { :root { --gap-y: 56px; --gap-rel: 20px; } }
body[data-page="home"] main > [data-section]:not([data-section="H01"]) { padding-top: calc(var(--gap-y) / 2) !important; padding-bottom: calc(var(--gap-y) / 2) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
/* H02 opens the content after the hero */
body[data-page="home"] main > [data-section="H02"]:not([data-section="H01"]) { padding-top: calc(var(--gap-y) * .8) !important; padding-bottom: 0 !important; }
/* H03 is the continuation of H02 */
body[data-page="home"] main > [data-section="H03"]:not([data-section="H01"]) { padding-top: var(--gap-rel) !important; }
/* the lettering video band sits close to Work (it belongs to it) */
body[data-page="home"] main > [data-section="H07"]:not([data-section="H01"]) { padding-top: 0 !important; }
/* last section → footer */
body[data-page="home"] main > [data-section]:not([data-section="H01"]):last-child { padding-bottom: calc(var(--gap-y) * .6) !important; }
.footer { padding-top: calc(var(--gap-y) * .5) !important; }
/* inner rhythm: title → content */
.work-sec .sec-head, .news-sec > .grid4, [data-section="H09"] > .grid4 { margin-bottom: 28px !important; }
@media (max-width: 809px) { .work-sec .sec-head, .news-sec > .grid4, [data-section="H09"] > .grid4 { margin-bottom: 18px !important; } }
.news-sec > .grid4, [data-section="H09"] > .grid4 { margin-top: 0 !important; }
body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]) { padding-bottom: var(--gap-rel) !important; }
body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]) { padding-bottom: calc(var(--gap-rel) + 12px) !important; }
.press-photo img[src*="press-jumper"] { object-position: 50% 25%; }
.pov3-media img[src*="h03-envelope"] { object-fit: cover; object-position: 50% 50%; background: #1a1716; }
.pov3-media:has(img[src*="h03-envelope"]) { background: transparent !important; border-radius: 0; } .pov3-media img[src*="h03-envelope"] { object-fit: contain !important; background: transparent !important; }
@media (max-width: 809px) { .pov3-media:has(img[src*="h03-envelope"]) { aspect-ratio: 1436 / 951 !important; } }
/* Studio S01 — compact opening: title + intro side by side on desktop, tight stack on mobile */
.page-hero[data-section="S01"] { padding: calc(var(--nav-h) + 40px) var(--gutter) 40px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.page-hero[data-section="S01"] > .display { grid-column: 1 / 3; margin: 0; font-size: clamp(64px, 8.5vw, 124px); line-height: .9; }
.page-hero[data-section="S01"] > .grid4 { display: contents; }
.page-hero[data-section="S01"] .col-1 { display: none; }
.page-hero[data-section="S01"] .lead { grid-column: 3 / 5; max-width: 40ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.3; text-indent: 0; margin: 0; }
.page-hero[data-section="S01"] .aside { grid-column: 3 / 5; grid-row: 2; margin: 0; max-width: 40ch; }
.page-hero[data-section="S01"] .lead { grid-row: 1; align-self: end; padding-bottom: 8px; }
@media (max-width: 809px) {
  .page-hero[data-section="S01"] { grid-template-columns: 1fr; padding: calc(var(--nav-h) + 24px) var(--gutter) 24px; row-gap: 14px; }
  .page-hero[data-section="S01"] > .display { grid-column: 1; font-size: 60px; }
  .page-hero[data-section="S01"] .lead, .page-hero[data-section="S01"] .aside { grid-column: 1; grid-row: auto; padding: 0; font-size: 17px; }
  .page-hero[data-section="S01"] .aside { font-size: 14px; }
}
.page-hero[data-section="S01"] + .wide-img, main > .wide-img[data-section="S02"] { margin-top: 0 !important; }
@media (min-width: 810px) { .page-hero[data-section="S01"] { padding-bottom: 32px; } }
@media (max-width: 809px) { .page-hero[data-section="S01"] { padding-bottom: 20px; } }
.page-hero[data-section="S01"] { padding-top: 40px !important; } @media (max-width: 809px) { .page-hero[data-section="S01"] { padding-top: 20px !important; } }
/* Edit-mode spacing (desktop) + mobile in proportion: H03 34/66 · H06 Work 0/55 · footer top 0 */
@media (min-width: 810px) {
  body[data-page="home"] main > [data-section="H03"]:not([data-section="H01"]) { padding-top: 34px !important; padding-bottom: 66px !important; }
  body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]) { padding-top: 0 !important; padding-bottom: 55px !important; }
}
@media (max-width: 809px) {
  body[data-page="home"] main > [data-section="H03"]:not([data-section="H01"]) { padding-top: 20px !important; padding-bottom: 38px !important; }
  body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]) { padding-top: 0 !important; padding-bottom: 32px !important; }
}
.footer { padding-top: 0 !important; }
/* Studio page rhythm after section cleanup */
body[data-page="studio"] main > .wide-img { margin-bottom: 0; }
body[data-page="studio"] main > [data-section="S04"] { padding-top: 88px !important; padding-bottom: 88px !important; }
body[data-page="studio"] main > [data-section="S05"] { padding-top: 0 !important; padding-bottom: 88px !important; }
@media (min-width: 810px) {
  [data-section="S05"] .team-wrap .left { justify-content: flex-start !important; gap: 22px; }
  [data-section="S05"] .team-split p, [data-section="S05"] .team-wrap .lead { font-size: 15px !important; text-indent: 0 !important; color: var(--ink-60); max-width: 40ch; }
}
@media (max-width: 809px) {
  body[data-page="studio"] main > [data-section="S04"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  body[data-page="studio"] main > [data-section="S05"] { padding-bottom: 48px !important; }
}

/* Studio S03 — "How we work": editorial 4-column frame (title row + 4 numbered columns) */
.about4 { padding-top: 96px; padding-bottom: 24px; }
.about4-head { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); align-items: start; margin-bottom: 40px; }
.about4-head .label { grid-column: 1; padding-top: .5em; }
.about4-title { grid-column: 2 / 5; margin: 0; font-weight: 500; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04; letter-spacing: -0.05em; max-width: 22ch; }
.about4-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); counter-reset: c; }
.about4-col { border-top: 1px solid var(--line); padding: 18px 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.about4-n { font-size: 16px; font-weight: 300; color: var(--ink-40); line-height: 1; }
.about4-col h3 { margin: 18px 0 0; font-weight: 500; font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -0.04em; line-height: 1.1; }
.about4-col p { margin: 0; font-size: 15px; line-height: 1.42; color: rgba(10,10,10,.68); max-width: 30ch; }
@media (max-width: 1024px) and (min-width: 810px) { .about4-cols { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } }
@media (max-width: 809px) {
  .about4 { padding-top: 48px; padding-bottom: 8px; }
  .about4-head { grid-template-columns: 1fr; row-gap: 12px; margin-bottom: 24px; }
  .about4-head .label, .about4-title { grid-column: 1; }
  .about4-title { font-size: 28px; }
  .about4-cols { grid-template-columns: 1fr; }
  .about4-col { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 6px; padding: 16px 0; }
  .about4-col:last-child { border-bottom: 1px solid var(--line); }
  .about4-col h3 { margin: 0; font-size: 19px; flex: 1; }
  .about4-col p { flex-basis: 100%; padding-left: 30px; font-size: 15px; }
}
body[data-page="studio"] main > [data-section="S04"] { padding-top: 72px !important; }
@media (max-width: 809px) { body[data-page="studio"] main > [data-section="S04"] { padding-top: 40px !important; } }

/* =====================================================================
   Studio page — UX pass: one type scale, one rhythm, scroll text effects
   ===================================================================== */
body[data-page="studio"] { --st-gap: 112px; --st-title: clamp(34px, 3.4vw, 50px); }
@media (max-width: 809px) { body[data-page="studio"] { --st-gap: 64px; --st-title: 30px; } }

/* S01 opening */
body[data-page="studio"] .page-hero[data-section="S01"] { padding-bottom: 36px !important; }
body[data-page="studio"] .page-hero[data-section="S01"] .lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.32; }

/* S02 photo: cinematic, never taller than the screen */
body[data-page="studio"] .wide-img[data-section="S02"] { height: auto; aspect-ratio: 16 / 8; max-height: 78svh; }
body[data-page="studio"] .wide-img[data-section="S02"] img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* S03 how we work */
body[data-page="studio"] .about4 { padding-top: var(--st-gap) !important; padding-bottom: 0 !important; }
body[data-page="studio"] .about4-title { font-size: var(--st-title); }
body[data-page="studio"] .about4-head { margin-bottom: 44px; }

/* S04 what else — label left, statement across cols 2–4 */
body[data-page="studio"] main > [data-section="S04"] { padding-top: var(--st-gap) !important; padding-bottom: var(--st-gap) !important; align-items: start; }
body[data-page="studio"] .s04-text { grid-column: 2 / 5; margin: 0; font-size: var(--st-title); line-height: 1.12; letter-spacing: -0.045em; max-width: 30ch; font-weight: 500; }
body[data-page="studio"] main > [data-section="S04"] .label { padding-top: .6em; }

/* S05 team — same frame as the home page */
body[data-page="studio"] main > [data-section="S05"] { padding-top: 0 !important; padding-bottom: var(--st-gap) !important; }
body[data-page="studio"] [data-section="S05"] .team-wrap .left h2 { font-size: var(--st-title) !important; line-height: 1; letter-spacing: -0.05em; }
@media (min-width: 810px) {
  body[data-page="studio"] [data-section="S05"] .team-wrap .left { justify-content: space-between !important; padding-bottom: 24px; }
  body[data-page="studio"] [data-section="S05"] .team-grid { grid-auto-rows: 1fr; }
  body[data-page="studio"] [data-section="S05"] .team-grid .member { aspect-ratio: auto; min-height: 280px; height: 100%; }
}
@media (max-width: 809px) {
  body[data-page="studio"] .wide-img[data-section="S02"] { aspect-ratio: 4 / 4.4; max-height: none; }
  body[data-page="studio"] .about4-head { margin-bottom: 20px; }
  body[data-page="studio"] main > [data-section="S04"] { grid-template-columns: 1fr; row-gap: 14px; }
  body[data-page="studio"] .s04-text { grid-column: 1; font-size: 26px; line-height: 1.15; }
  body[data-page="studio"] [data-section="S05"] .team-wrap .lead { font-size: 16px !important; }
}
body[data-page="studio"] .s04-text { font-size: clamp(24px, 2.4vw, 36px) !important; line-height: 1.18 !important; max-width: 34ch; }
@media (max-width: 809px) { body[data-page="studio"] .s04-text { font-size: 22px !important; } }
@media (min-width: 810px) {
  body[data-page="studio"] [data-section="S05"] .team-wrap .left { justify-content: flex-start !important; gap: 22px; }
  body[data-page="studio"] [data-section="S05"] .team-wrap .lead { font-size: 18px !important; line-height: 1.35; max-width: 34ch; }
}

/* Studio S03 — long-form: statement + 2×2 editorial grid (desktop), single column (mobile) */
body[data-page="studio"] { --st-statement: clamp(24px, 2.2vw, 34px); }
@media (max-width: 809px) { body[data-page="studio"] { --st-statement: 22px; } }
body[data-page="studio"] .about4-title, body[data-page="studio"] .s04-text { font-size: var(--st-statement) !important; line-height: 1.2 !important; letter-spacing: -0.04em !important; max-width: 36ch !important; font-weight: 500; margin: 0; }
body[data-page="studio"] .about4-head { margin-bottom: 56px; }
body[data-page="studio"] .about4-cols { grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 5vw, 96px); row-gap: 56px; padding-left: calc((100% - 3 * var(--gutter)) / 4 + var(--gutter)); }
body[data-page="studio"] .about4-col { padding: 20px 0 0; gap: 14px; }
body[data-page="studio"] .about4-col h3 { margin: 6px 0 0; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.12; max-width: 22ch; }
body[data-page="studio"] .about4-col p { font-size: 15.5px; line-height: 1.5; max-width: 52ch; color: rgba(10,10,10,.72); }
body[data-page="studio"] main > [data-section="S04"] { padding-top: 96px !important; padding-bottom: 96px !important; }
@media (max-width: 1024px) and (min-width: 810px) { body[data-page="studio"] .about4-cols { padding-left: 0; } }
@media (max-width: 809px) {
  body[data-page="studio"] .about4-head { margin-bottom: 28px; }
  body[data-page="studio"] .about4-cols { grid-template-columns: 1fr; padding-left: 0; row-gap: 0; }
  body[data-page="studio"] .about4-col { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 22px 0; }
  body[data-page="studio"] .about4-col .about4-n { grid-row: 1; padding-top: 4px; }
  body[data-page="studio"] .about4-col h3 { grid-column: 2; margin: 0; font-size: 20px; }
  body[data-page="studio"] .about4-col p { grid-column: 2; padding-left: 0; font-size: 15px; margin-top: 8px; }
  body[data-page="studio"] main > [data-section="S04"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* Studio S03/S04 desktop — centred statements, 4 points in one row */
@media (min-width: 810px) {
  body[data-page="studio"] .about4-head { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin: 0 auto 64px; }
  body[data-page="studio"] .about4-head .label { padding-top: 0; }
  body[data-page="studio"] .about4-title { max-width: 30ch !important; margin: 0 auto !important; text-align: center; text-wrap: balance; font-size: clamp(26px, 2.4vw, 38px) !important; }
  body[data-page="studio"] .about4-cols { grid-template-columns: repeat(4, 1fr) !important; column-gap: clamp(20px, 2.2vw, 40px) !important; row-gap: 0 !important; padding-left: 0 !important; align-items: start; }
  body[data-page="studio"] .about4-col h3 { font-size: clamp(18px, 1.35vw, 22px); max-width: 18ch; }
  body[data-page="studio"] .about4-col p { font-size: 14.5px; line-height: 1.5; max-width: none; }
  body[data-page="studio"] main > [data-section="S04"] { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  body[data-page="studio"] main > [data-section="S04"] .col-1 { display: block; }
  body[data-page="studio"] main > [data-section="S04"] .label { padding-top: 0; }
  body[data-page="studio"] .s04-text { text-align: center; max-width: 34ch !important; margin: 0 auto !important; text-wrap: balance; font-size: clamp(26px, 2.4vw, 38px) !important; }
}
@media (min-width: 810px) and (max-width: 1100px) { body[data-page="studio"] .about4-cols { grid-template-columns: repeat(2, 1fr) !important; row-gap: 40px !important; } }
@media (min-width: 1101px) {
  body[data-page="studio"] .about4-cols { grid-template-rows: auto auto; }
  body[data-page="studio"] .about4-col { display: grid !important; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; }
  body[data-page="studio"] .about4-col .about4-n { position: absolute; }
  body[data-page="studio"] .about4-col { position: relative; padding-top: 44px !important; }
  body[data-page="studio"] .about4-col .about4-n { top: 18px; left: 0; }
  body[data-page="studio"] .about4-col h3 { margin: 0 !important; align-self: start; }
}
/* S03 heading: statement + small light-grey subtitle */
body[data-page="studio"] .about4-sub { display: block; margin: 16px auto 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.4; letter-spacing: -0.02em; font-weight: 400; color: rgba(10,10,10,.42); max-width: 46ch; }
@media (max-width: 809px) { body[data-page="studio"] .about4-sub { margin-top: 12px; font-size: 15px; } }

/* =====================================================================
   Project page (hist.html) — editorial case layout
   ===================================================================== */
body[data-page="project"] main { padding-top: var(--nav-h); }
.proj .label { display: inline-flex; }
.proj-hero { display: grid; grid-template-columns: 1.6fr 1fr; column-gap: clamp(32px, 5vw, 96px); align-items: end; padding-top: 40px; padding-bottom: 36px; }
.proj-hero-l { display: flex; flex-direction: column; gap: 18px; }
.proj-title { margin: 0; font-weight: 500; font-size: clamp(56px, 8.4vw, 132px); line-height: .9; letter-spacing: -0.065em; }
.proj-q { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.03em; color: rgba(10,10,10,.6); max-width: 34ch; }
.proj-credits { margin: 0; display: grid; border-top: 1px solid var(--line); }
.proj-credits > div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.proj-credits dt { color: var(--ink-60); }
.proj-credits dd { margin: 0; font-weight: 500; text-align: right; }
.proj-lead { height: auto; aspect-ratio: 16 / 8; max-height: 80svh; }
.proj-lead img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.proj-split, .proj-narr { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); padding-top: 112px; padding-bottom: 0; }
.proj-split > .label, .proj-narr > .label { grid-column: 1; align-self: start; padding-top: .5em; }
.proj-body { grid-column: 2 / 5; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); row-gap: 24px; }
.proj-lead-txt { grid-column: 1 / -1; margin: 0 0 8px; font-size: clamp(24px, 2.3vw, 36px); line-height: 1.16; letter-spacing: -0.045em; font-weight: 500; max-width: 30ch; }
.proj-body p:not(.proj-lead-txt), .proj-narr-cols p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(10,10,10,.72); max-width: 48ch; }

.proj-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 112px; }
.proj-duo figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: #ddd; }
.proj-duo img { width: 100%; height: 100%; object-fit: cover; }

.proj-narr > .proj-big, .proj-narr-cols { grid-column: 2 / 5; }
.proj-big { margin: 0; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -0.055em; font-weight: 500; max-width: 22ch; }
.proj-narr-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); margin-top: 40px; }

.proj-roles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 112px; }
.proj-role { background: var(--card); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 36px); display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; }
.proj-role-n { grid-row: 1; font-size: 18px; font-weight: 300; color: var(--ink-40); line-height: 1.3; }
.proj-role h3 { margin: 0; font-weight: 500; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.055em; line-height: 1; }
.proj-role-what { grid-column: 2; font-size: 14px; color: var(--ink-60); }
.proj-role p { grid-column: 2; margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: rgba(10,10,10,.72); max-width: 44ch; }

.proj-sec-head { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); margin-bottom: 32px; align-items: start; }
.proj-sec-head .label { grid-column: 1; padding-top: .5em; }
.proj-h2 { grid-column: 2 / 5; margin: 0; font-weight: 500; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -0.055em; max-width: 22ch; }
.proj-pieces, .proj-guests { padding-top: 112px; }
.proj-piece-list, .proj-guest-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.proj-piece-list li { display: flex; flex-direction: column; gap: 8px; }
.proj-piece-list figure, .proj-guest-list figure { margin: 0 0 8px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: #ddd; }
.proj-piece-list img, .proj-guest-list img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.proj-piece-list li:hover img, .proj-guest-list li:hover img { transform: scale(1.04); }
.proj-piece-list h3 { margin: 0; font-weight: 500; font-size: 20px; letter-spacing: -0.04em; }
.proj-piece-list p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(10,10,10,.68); max-width: 36ch; }
.proj-guest-list li { display: flex; flex-direction: column; gap: 2px; }
.proj-guest-list figure { aspect-ratio: 3 / 4; filter: grayscale(1); transition: filter .7s; }
.proj-guest-list li:hover figure { filter: none; }
.proj-guest-list b { font-weight: 500; font-size: 18px; letter-spacing: -0.04em; }
.proj-guest-list span { font-size: 13px; color: var(--ink-60); }

.proj-close { padding-top: 112px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 72px; text-align: center; }
.proj-close .proj-big { max-width: 26ch; text-wrap: balance; }
.proj-close .next-card { width: 100%; text-align: left; }

@media (max-width: 809px) {
  .proj-hero { grid-template-columns: 1fr; row-gap: 28px; padding-top: 20px; padding-bottom: 24px; }
  .proj-title { font-size: 54px; }
  .proj-q { font-size: 17px; }
  .proj-lead { aspect-ratio: 4 / 5; max-height: none; }
  .proj-split, .proj-narr { grid-template-columns: 1fr; row-gap: 16px; padding-top: 64px; }
  .proj-split > .label, .proj-narr > .label, .proj-body, .proj-narr > .proj-big, .proj-narr-cols { grid-column: 1; }
  .proj-body, .proj-narr-cols { grid-template-columns: 1fr; row-gap: 16px; margin-top: 8px; }
  .proj-lead-txt { font-size: 23px; }
  .proj-big { font-size: 28px; }
  .proj-duo { padding-top: 64px; }
  .proj-roles { grid-template-columns: 1fr; padding-top: 64px; }
  .proj-role h3 { font-size: 30px; }
  .proj-sec-head { grid-template-columns: 1fr; row-gap: 12px; margin-bottom: 20px; }
  .proj-sec-head .label, .proj-h2 { grid-column: 1; }
  .proj-h2 { font-size: 28px; }
  .proj-pieces, .proj-guests { padding-top: 64px; }
  .proj-piece-list { grid-template-columns: 1fr; row-gap: 28px; }
  .proj-guest-list { grid-template-columns: repeat(3, 1fr); }
  .proj-guest-list b { font-size: 14px; } .proj-guest-list span { font-size: 11px; }
  .proj-close { padding-top: 64px; padding-bottom: 40px; gap: 40px; }
}

/* Project page — campaign images */
.proj-wide { margin: 0; padding-top: 112px; }
.proj-wide img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.proj-trip img { aspect-ratio: 1994 / 798; object-fit: cover; }
.proj-rituals img { aspect-ratio: 16 / 9; object-fit: cover; }
.proj-roles-img { grid-column: 1 / -1; margin: 0 0 var(--gap); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1504 / 938; }
.proj-roles-img img { width: 100%; height: 100%; object-fit: cover; }
.proj-gal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 112px; }
.proj-gal figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 6; background: #ddd; }
.proj-gal figure.g-wide { grid-column: 1 / -1; aspect-ratio: 2000 / 1112; }
.proj-gal img { width: 100%; height: 100%; object-fit: cover; }
body[data-page="project"] .proj-lead img { object-position: 50% 50%; }
body[data-page="project"] .proj-lead { aspect-ratio: 2000 / 1120; max-height: none; width: auto; }
@media (max-width: 809px) {
  .proj-wide, .proj-gal { padding-top: 64px; }
  body[data-page="project"] .proj-lead { aspect-ratio: 2000 / 1120; }
  .proj-trip { overflow-x: auto; scrollbar-width: none; }
  .proj-trip img { width: 200%; max-width: none; }
  .proj-roles-img { aspect-ratio: 4 / 3; }
  .proj-gal { grid-template-columns: 1fr 1fr; }
  .proj-gal figure { aspect-ratio: 3 / 4; }
}

/* Edit-mode pass (24/10): labels removed from S03/S04, spacing from preview */
body[data-page="studio"] .s04-text { grid-column: 1 / -1 !important; }
body[data-page="studio"] [data-section="S04"] { padding-top: 48px !important; padding-bottom: 80px !important; }
body[data-page="work"] [data-section="W01"] { padding-top: 28px !important; padding-bottom: 40px !important; }
@media (max-width: 809px) {
  body[data-page="studio"] [data-section="S04"] { padding-top: 32px !important; padding-bottom: 48px !important; }
  body[data-page="work"] [data-section="W01"] { padding-top: 20px !important; padding-bottom: 28px !important; }
}
.proj-hero + .proj-duo { padding-top: 8px; }

/* ===== Project page: Mesa Prego (mesa-prego.html) ===== */
.mp { --mp-gap: 128px; --mp-rel: 48px; --mp-r: var(--r-lg); }
.mp .mp-cta { align-self: flex-start; margin-top: 6px; }
.mp-p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(10,10,10,.72); max-width: 50ch; }
.mp .proj-lead-txt { margin: 0; max-width: 28ch; }
.mp .label { display: inline-flex; }
/* M02 opening spread */
.mp-open { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 80px); padding-top: 12px; align-items: start; }
.mp-open-img { margin: 0; border-radius: var(--mp-r); overflow: hidden; height: clamp(520px, 84svh, 960px); background: #5a1410; }
.mp-open-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.mp-open-txt { position: sticky; top: calc(var(--nav-h) + 40px); display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
/* M03 statement */
.mp-statement { padding-top: var(--mp-gap); text-align: center; }
.mp-big { margin: 0 auto; font-weight: 500; font-size: clamp(56px, 7.6vw, 124px); line-height: .9; letter-spacing: -0.065em; }
.mp-big .soft { color: rgba(10,10,10,.38); }
/* M04 rituals */
.mp-rituals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: var(--mp-rel); }
.mp-ritual { display: flex; flex-direction: column; gap: 20px; }
.mp-ritual figure { margin: 0; border-radius: var(--mp-r); overflow: hidden; aspect-ratio: 6 / 5; max-height: 78svh; background: #ddd; }
.mp-ritual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.mp-ritual:hover img { transform: scale(1.03); }
.mp-ritual:nth-child(2) img { object-position: 50% 30%; }
.mp-ritual-txt { display: grid; grid-template-columns: 1fr 2fr; column-gap: 18px; row-gap: 6px; align-items: baseline; padding-right: 12px; }
.mp-n { grid-row: span 2; font-size: 14px; color: var(--ink-60); }
.mp-ritual h3 { margin: 0; font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.05em; line-height: 1.05; }
.mp-ritual p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(10,10,10,.68); max-width: 36ch; }
.mp-note { grid-column: 1 / -1; margin: 32px 0 0; text-align: center; font-size: 14px; color: var(--ink-60); }
/* M05 about Sani */
.mp-about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 80px); padding-top: var(--mp-gap); align-items: start; }
.mp-about-txt { display: flex; flex-direction: column; gap: 24px; }
.mp-about-img { margin: 0; position: sticky; top: calc(var(--nav-h) + 40px); }
.mp-about-img img { display: block; width: 100%; aspect-ratio: 991 / 1302; max-height: 80svh; object-fit: cover; object-position: 50% 30%; border-radius: var(--mp-r); background: #ddd; }
.mp-about-img figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; }
.mp-about-img figcaption b { font-weight: 500; }
.mp-about-img figcaption span { color: var(--ink-60); text-align: right; }
.mp-quote { margin: 8px 0; padding: clamp(24px, 3vw, 44px); background: var(--card); border-radius: var(--mp-r); }
.mp-quote p { margin: 0; font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.045em; max-width: 32ch; }
.mp-quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 14px; color: var(--ink-60); }
.mp-question { margin: 0; font-weight: 500; font-size: clamp(28px, 2.9vw, 46px); line-height: 1.08; letter-spacing: -0.055em; max-width: 22ch; }
/* M06 the piece */
.mp-piece { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 80px); padding-top: var(--mp-gap); align-items: center; }
.mp-piece-img { margin: 0; border-radius: var(--mp-r); overflow: hidden; aspect-ratio: 1280 / 1152; max-height: 84svh; background: #ccc; }
.mp-piece-img img { width: 100%; height: 100%; object-fit: cover; }
.mp-piece-txt { display: flex; flex-direction: column; gap: 20px; }
.mp-piece-txt .proj-h2 { grid-column: auto; }
.mp-spec { margin-top: 8px; }
.mp-spec dd { text-align: right; }
/* M07 shop band */
.mp-shop { padding-top: var(--mp-gap); }
.mp-shop-card { position: relative; display: block; border-radius: var(--r-xl, 22px); overflow: hidden; height: clamp(460px, 82svh, 900px); width: 100%; color: #fff; }
.mp-shop-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.mp-shop-card:hover img { transform: scale(1.03); }
.mp-shop-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.6)); }
.mp-shop-in { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 40px); z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 8px; }
.mp-shop-in small { grid-column: 1 / -1; font-size: 14px; opacity: .8; }
.mp-shop-in strong { font-weight: 500; font-size: clamp(40px, 5.4vw, 88px); letter-spacing: -0.06em; line-height: .95; }
.mp-shop-url { font-size: 16px; border-bottom: 1px solid currentColor; padding-bottom: 2px; justify-self: start; }
/* M08 next */
.mp .proj-close { padding-top: var(--mp-gap); padding-bottom: 96px; }
@media (max-width: 1100px) and (min-width: 810px) {
  .mp-open, .mp-about { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809px) {
  .mp { --mp-gap: 72px; --mp-rel: 28px; }
  .mp .proj-lead-txt { max-width: none; }
  .mp-open { grid-template-columns: 1fr; gap: 28px; padding-top: 8px; }
  .mp-open-img { height: auto; aspect-ratio: 4 / 5; }
  .mp-open-txt { position: static; gap: 18px; }
  .mp-big { font-size: 52px; }
  .mp-rituals { grid-template-columns: 1fr; row-gap: 40px; }
  .mp-ritual { gap: 14px; }
  .mp-ritual figure { aspect-ratio: 1 / 1; max-height: none; }
  .mp-ritual-txt { grid-template-columns: 1fr; padding-right: 0; }
  .mp-n { grid-row: auto; }
  .mp-note { margin-top: 0; text-align: left; }
  .mp-about { grid-template-columns: 1fr; gap: 0; }
  .mp-about-txt { display: contents; }
  .mp-about-txt > .label { order: 1; margin-bottom: 16px; }
  .mp-about-img { order: 2; position: static; margin-bottom: 28px; }
  .mp-about-img img { max-height: none; }
  .mp-about-txt > :not(.label) { order: 3; margin-bottom: 18px; }
  .mp-question { font-size: 28px; margin-bottom: 0 !important; }
  .mp-piece { grid-template-columns: 1fr; gap: 24px; }
  .mp-piece-img { max-height: none; }
  .mp-shop-card { height: auto; aspect-ratio: 4 / 5; }
  .mp-shop-card img { object-position: 30% 50%; }
  .mp-shop-in { grid-template-columns: 1fr; }
  .mp-shop-in strong { font-size: 42px; }
  .mp .proj-close { padding-bottom: 48px; }
}

/* Mesa Prego — compact scale (narrower measure, smaller type & media) */
.mp { --mp-gap: 104px; --mp-rel: 36px; }
.mp > .wrap { max-width: 1180px; margin-left: auto; margin-right: auto; }
.mp .proj-title { font-size: clamp(48px, 6vw, 92px); }
.mp .proj-q { font-size: clamp(16px, 1.25vw, 19px); }
.mp .proj-hero { padding-top: 28px; padding-bottom: 32px; }
.mp .proj-credits > div { padding: 10px 0; font-size: 13px; }
.mp .proj-lead-txt { font-size: clamp(20px, 1.8vw, 27px); }
.mp-p { font-size: 15px; }
.mp-open-img { height: clamp(440px, 68svh, 680px); }
.mp-big { font-size: clamp(44px, 5.4vw, 84px); }
.mp-ritual figure { aspect-ratio: 4 / 3; max-height: 60svh; }
.mp-ritual h3 { font-size: clamp(20px, 1.7vw, 24px); }
.mp-ritual p { font-size: 15px; }
.mp-about-img img { max-height: 66svh; }
.mp-quote { padding: clamp(20px, 2.4vw, 32px); }
.mp-quote p { font-size: clamp(18px, 1.6vw, 23px); }
.mp-question { font-size: clamp(24px, 2.2vw, 34px); }
.mp-piece-img { max-height: 64svh; }
.mp .proj-h2 { font-size: clamp(28px, 2.6vw, 40px); }
.mp-spec > div { font-size: 13px; }
.mp-shop-card { height: clamp(380px, 62svh, 640px); }
.mp-shop-in strong { font-size: clamp(32px, 4vw, 60px); }
.mp .proj-close .next-card { max-height: 200px; }
@media (max-width: 809px) {
  .mp { --mp-gap: 64px; --mp-rel: 24px; }
  .mp .proj-title { font-size: 46px; }
  .mp .proj-lead-txt { font-size: 21px; }
  .mp-open-img { height: auto; aspect-ratio: 1 / 1; }
  .mp-big { font-size: 42px; }
  .mp-ritual figure { aspect-ratio: 4 / 3; }
  .mp-about-img img { max-height: none; aspect-ratio: 4 / 5; }
  .mp-question { font-size: 24px; }
  .mp-shop-card { height: auto; aspect-ratio: 1 / 1; }
  .mp-shop-in strong { font-size: 34px; }
}
@media (min-width: 810px) {
  .mp-open { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); }
  .mp-about { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); }
  .mp-piece { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); }
}

/* Mesa Prego — no label dots + unified spacing rhythm */
.mp .label::before { display: none !important; }
.mp .label { gap: 0; color: var(--ink-60); font-size: 13px; letter-spacing: -0.01em; }
.mp { --mp-gap: 96px; --mp-rel: 32px; --mp-col: 56px; --mp-stack: 16px; }
.mp .proj-hero { padding-top: 32px; padding-bottom: 28px; row-gap: 24px; }
.mp .proj-hero-l { gap: 14px; }
.mp .mp-cta { margin-top: 8px; }
.mp .mp-open { padding-top: 0; }
.mp-open-txt, .mp-about-txt, .mp-piece-txt { gap: var(--mp-stack); }
.mp-open-txt { padding-top: 0; }
.mp-open-txt .label, .mp-about-txt > .label, .mp-piece-txt .label { margin-bottom: -4px; }
.mp-statement { padding-top: var(--mp-gap); }
.mp-rituals { padding-top: var(--mp-rel); }
.mp-ritual { gap: 16px; }
.mp-note { margin-top: 24px; }
.mp-quote { margin: 8px 0; }
.mp-question { margin-top: 0; }
.mp-about-img figcaption { margin-top: 10px; }
.mp .proj-close { padding-top: var(--mp-gap); padding-bottom: 72px; }
@media (min-width: 810px) {
  .mp-open, .mp-about, .mp-piece { gap: var(--mp-col); }
}
@media (max-width: 809px) {
  .mp { --mp-gap: 56px; --mp-rel: 20px; --mp-stack: 14px; }
  .mp .proj-hero { padding-top: 20px; padding-bottom: 24px; }
  .mp-open { gap: 24px; }
  .mp-piece { gap: 24px; }
  .mp-ritual { gap: 12px; }
  .mp-rituals { row-gap: 32px; }
  .mp-note { margin-top: 0; }
  .mp-about-txt > .label { margin-bottom: 14px; }
  .mp-about-img { margin-bottom: 24px; }
  .mp-about-txt > :not(.label) { margin-bottom: 14px; }
  .mp .proj-close { padding-bottom: 40px; }
}

/* ===== Collabs pages: one shared scale (Mesa Prego reference) =====
   Applies to hist.html, mesa-prego.html (body[data-page="project"]) and case.html (body[data-page="case"]) */
body[data-page="project"], body[data-page="case"] {
  --cb-max: 1180px; --cb-gap: 96px; --cb-col: 56px;
  --cb-title: clamp(48px, 6vw, 92px);
  --cb-lead: clamp(20px, 1.8vw, 27px);
  --cb-h2: clamp(28px, 2.6vw, 40px);
  --cb-h3: clamp(20px, 1.7vw, 24px);
  --cb-big: clamp(24px, 2.2vw, 34px);
  --cb-body: 15px; --cb-small: 13px;
}
/* container */
body[data-page="project"] main.proj > .wrap,
body[data-page="case"] main [data-section].wrap,
body[data-page="case"] main .page-hero { max-width: var(--cb-max); margin-left: auto; margin-right: auto; }
body[data-page="case"] main .wide-img,
body[data-page="case"] main .gallery { max-width: calc(var(--cb-max) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
@media (max-width: 1216px) { body[data-page="case"] main .wide-img, body[data-page="case"] main .gallery { margin-left: var(--gutter); margin-right: var(--gutter); } }
/* labels: no dots, small grey */
body[data-page="project"] .label::before, body[data-page="case"] main .label::before { display: none !important; }
body[data-page="project"] .label, body[data-page="case"] main .label { gap: 0; color: var(--ink-60); font-size: var(--cb-small); letter-spacing: -0.01em; }
/* type scale */
body[data-page="project"] .proj-title, body[data-page="case"] .page-hero .display { font-size: var(--cb-title); font-weight: 500; line-height: .92; letter-spacing: -0.065em; }
body[data-page="project"] .proj-q { font-size: clamp(16px, 1.25vw, 19px); font-weight: 400; }
body[data-page="project"] .proj-lead-txt, body[data-page="case"] .case-intro .lead, body[data-page="case"] [data-section="C05"] .lead, body[data-page="case"] [data-section="C03"] .h2 { font-size: var(--cb-lead) !important; font-weight: 500; line-height: 1.2; letter-spacing: -0.045em; }
body[data-page="project"] .proj-body p:not(.proj-lead-txt), body[data-page="project"] .proj-narr-cols p, body[data-page="project"] .proj-role p, body[data-page="project"] .mp-p { font-size: var(--cb-body); line-height: 1.55; font-weight: 400; }
body[data-page="project"] .proj-h2 { font-size: var(--cb-h2); font-weight: 500; }
body[data-page="project"] .proj-role h3, body[data-page="project"] .proj-piece-list h3, body[data-page="project"] .mp-ritual h3 { font-size: var(--cb-h3); font-weight: 500; letter-spacing: -0.045em; }
body[data-page="project"] .proj-piece-list p { font-size: 14px; }
body[data-page="project"] .proj-big { font-size: var(--cb-big); font-weight: 500; line-height: 1.1; letter-spacing: -0.05em; }
body[data-page="project"] .proj-credits > div, body[data-page="case"] .facts .row { padding: 10px 0; font-size: var(--cb-small); }
body[data-page="case"] .facts .row span:first-child { font-size: var(--cb-small); }
/* hero */
body[data-page="project"] .proj-hero { padding-top: 32px; padding-bottom: 28px; }
body[data-page="project"] .proj-hero-l { gap: 14px; }
body[data-page="case"] .page-hero { padding-top: 32px; padding-bottom: 0; }
body[data-page="case"] .page-hero .display { margin-bottom: 28px; }
/* section rhythm */
body[data-page="project"] .proj-split, body[data-page="project"] .proj-narr, body[data-page="project"] .proj-roles,
body[data-page="project"] .proj-pieces, body[data-page="project"] .proj-wide, body[data-page="project"] .proj-gal,
body[data-page="project"] .proj-duo { padding-top: var(--cb-gap); }
body[data-page="project"] .proj-hero + .proj-duo { padding-top: 0; }
body[data-page="project"] .proj-close { padding-top: var(--cb-gap); padding-bottom: 72px; gap: 56px; }
body[data-page="project"] .proj-narr-cols { margin-top: 24px; }
body[data-page="project"] .proj-body { row-gap: 16px; }
body[data-page="project"] .proj-sec-head { margin-bottom: 24px; }
body[data-page="case"] main .section { padding-top: var(--cb-gap); padding-bottom: 0; }
body[data-page="case"] main .wide-img { margin-top: 48px; height: clamp(360px, 60svh, 640px); }
body[data-page="case"] main .gallery { margin-top: var(--cb-gap); }
body[data-page="case"] [data-section="C06"] { padding-top: var(--cb-gap); padding-bottom: 72px !important; }
/* media heights */
body[data-page="project"] .proj-trip img, body[data-page="project"] .proj-rituals img { max-height: 64svh; }
body[data-page="project"] .next-card, body[data-page="case"] .next-card { height: 200px; }
@media (min-width: 810px) {
  body[data-page="project"] .proj-hero { column-gap: var(--cb-col); }
  body[data-page="project"] .proj-split, body[data-page="project"] .proj-narr { column-gap: var(--gutter); }
}
@media (max-width: 809px) {
  body[data-page="project"], body[data-page="case"] {
    --cb-gap: 56px; --cb-title: 46px; --cb-lead: 21px; --cb-h2: 26px; --cb-h3: 20px; --cb-big: 24px;
  }
  body[data-page="project"] .proj-hero { padding-top: 20px; padding-bottom: 24px; }
  body[data-page="case"] .page-hero { padding-top: 20px; }
  body[data-page="case"] main .wide-img { margin-top: 32px; height: auto; aspect-ratio: 1 / 1; }
  body[data-page="project"] .proj-duo figure, body[data-page="project"] .proj-gal figure { max-height: none; }
  body[data-page="project"] .proj-close { padding-bottom: 40px; gap: 32px; }
  body[data-page="case"] [data-section="C06"] { padding-bottom: 40px !important; }
  body[data-page="project"] .next-card, body[data-page="case"] .next-card { height: 180px; }
}

/* Mesa Prego M05 — Sani quote in the homepage H02 style (word reveal), left of the portrait */
.mp-about2 { padding-top: var(--mp-gap); }
.mp-ab-head { display: flex; flex-direction: column; gap: var(--mp-stack); max-width: 640px; }
.mp-ab-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mp-col); align-items: center; margin-top: 56px; }
.mp-ab-quote { margin: 0; }
.mp-ab-quote .h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.055em; max-width: 18ch; text-wrap: balance; }
.mp-ab-quote cite { display: block; margin-top: 24px; font-style: normal; font-size: 14px; color: var(--ink-60); }
.mp-ab-img { margin: 0; }
.mp-ab-img img { display: block; width: 100%; aspect-ratio: 991 / 1302; max-height: 72svh; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-lg); background: #ddd; }
.mp-ab-img figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; }
.mp-ab-img figcaption b { font-weight: 500; }
.mp-ab-img figcaption span { color: var(--ink-60); text-align: right; }
.mp-ab-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 56px; max-width: 640px; }
@media (max-width: 809px) {
  .mp-ab-row { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .mp-ab-quote .h2 { font-size: 34px; max-width: none; }
  .mp-ab-quote cite { margin-top: 16px; }
  .mp-ab-img img { max-height: none; aspect-ratio: 4 / 5; }
  .mp-ab-foot { margin-top: 40px; }
}

/* ===== Project page: Questionable Laws (questionable-laws.html) — sticky vertical film ===== */
.ql-stage { max-width: var(--cb-max, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--cb-col, 56px); align-items: start; padding-top: 32px; }
.ql-text { display: flex; flex-direction: column; gap: var(--cb-gap, 96px); padding-bottom: 8px; }
.ql-hero { display: flex; flex-direction: column; gap: 14px; }
.ql-meta { margin: 0; font-size: 14px; color: var(--ink-60); letter-spacing: -0.01em; }
.ql-statement { margin: 28px 0 0; font-weight: 500; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.055em; max-width: 16ch; }
.ql-block { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.ql-block .proj-lead-txt { margin: 0; max-width: 30ch; }
.ql-question { margin: 8px 0 0; font-weight: 500; font-size: var(--cb-big, clamp(24px, 2.2vw, 34px)); line-height: 1.1; letter-spacing: -0.05em; max-width: 24ch; }
.ql-block .proj-credits { margin-top: 4px; }
.ql-film { margin: 0; position: sticky; top: calc(var(--nav-h) + 24px); justify-self: end; width: min(100%, calc((100svh - var(--nav-h) - 96px) * 9 / 16)); }
.ql-player { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #0a0a0a; aspect-ratio: 9 / 16; }
.ql-player video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.ql-sound { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border: 0; border-radius: 50px; background: rgba(255,255,255,.92); color: var(--ink); font: inherit; font-size: 13px; letter-spacing: -0.02em; cursor: pointer; backdrop-filter: blur(6px); transition: background .3s, transform .3s var(--ease-out); }
.ql-sound:hover { transform: scale(1.04); }
.ql-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ql-sound-ico { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; }
.ql-sound.is-on .ql-sound-ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.ql-film figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; }
.ql-film figcaption b { font-weight: 500; }
.ql-film figcaption span { color: var(--ink-60); }
.ql .proj-close { padding-top: var(--cb-gap, 96px); }
@media (max-width: 809px) {
  .ql-stage { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
  .ql-text { display: contents; }
  .ql-hero { order: 1; }
  .ql-statement { margin-top: 18px; font-size: 34px; }
  .ql-film { order: 2; position: static; width: 100%; justify-self: stretch; margin-top: 28px; }
  .ql-player { aspect-ratio: 9 / 16; max-height: 82svh; margin: 0 auto; }
  .ql-block { order: 3; margin-top: var(--cb-gap, 56px); max-width: none; }
}

/* Questionable Laws v2 — dark film stage + stills strip */
.ql-hero2 { padding-top: 24px; }
.ql-stage2 { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--cb-col, 56px); align-items: center; background: #0b0b0b; color: #fff; border-radius: var(--r-xl, 22px); padding: clamp(28px, 4vw, 56px); overflow: hidden; isolation: isolate; }
.ql-stage2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 78% 45%, rgba(233,150,190,.18), transparent 70%); }
.ql-intro { display: flex; flex-direction: column; gap: 14px; }
.ql-stage2 .label { color: rgba(255,255,255,.6) !important; }
.ql-stage2 .proj-title { color: #fff; }
.ql-stage2 .ql-meta { color: rgba(255,255,255,.6); margin: 0; font-size: 14px; }
.ql-stage2 .ql-statement { color: #f3b7d0; margin: 24px 0 0; font-weight: 500; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.04; letter-spacing: -0.05em; max-width: 14ch; }
.ql-stage2 .ql-film { position: static; justify-self: end; width: min(100%, calc(min(78svh, 760px) * 9 / 16)); }
.ql-stage2 .ql-film figcaption span { color: rgba(255,255,255,.55); }
.ql-film-txt { grid-template-columns: 1fr !important; }
.ql-film-txt p:not(.ql-question) { max-width: 56ch; }
.ql-laws .proj-sec-head { margin-bottom: 24px; }
.ql-law-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.ql-law-list li { display: flex; flex-direction: column; gap: 8px; }
.ql-law-list figure { margin: 0; border-radius: var(--r-md, 12px); overflow: hidden; aspect-ratio: 9 / 16; background: #111; }
.ql-law-list img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ql-law-list li:hover img { transform: scale(1.04); }
.ql-law-list span { font-size: 13px; color: var(--ink-60); }
.ql-why { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-col, 56px); padding-top: var(--cb-gap, 96px); align-items: start; }
.ql-why-l, .ql-why-r { display: flex; flex-direction: column; gap: 16px; }
.ql-why .mp-p { max-width: 46ch; }
.ql-close { text-align: center; max-width: 24ch; margin: 0 auto; text-wrap: balance; }
@media (max-width: 1100px) and (min-width: 810px) { .ql-law-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .ql-hero2 { padding-top: 16px; }
  .ql-stage2 { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px 18px; }
  .ql-stage2 .ql-statement { font-size: 28px; margin-top: 12px; }
  .ql-stage2 .ql-film { width: 100%; justify-self: stretch; }
  .ql-stage2 .ql-player { max-height: none; }
  .ql-law-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .ql-law-list::-webkit-scrollbar { display: none; }
  .ql-law-list li { scroll-snap-align: start; }
  .ql-why { grid-template-columns: 1fr; gap: 40px; }
}
.ql-laws { padding-top: var(--cb-gap, 96px); }
.ql .proj-split .ql-question { font-size: var(--cb-big) !important; line-height: 1.1 !important; color: var(--ink) !important; font-weight: 500 !important; letter-spacing: -0.05em; max-width: 26ch !important; margin-top: 4px; }

/* Questionable Laws — full credits */
.ql-closing { padding-bottom: 0 !important; }
.ql-credits { padding-top: var(--cb-gap, 96px); }
.ql-cr-sub { margin: -8px 0 20px; font-size: 14px; color: var(--ink-60); }
.ql-key { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.ql-key a { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 112px; padding: 16px 16px 18px; background: var(--card); border-radius: var(--r-lg); color: inherit; text-decoration: none; transition: background .3s, transform .4s var(--ease-out); }
.ql-key a:hover { background: #fff; transform: translateY(-2px); }
.ql-key a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ql-key small { font-size: 12px; color: var(--ink-60); }
.ql-key strong { margin-top: auto; font-weight: 500; font-size: 18px; letter-spacing: -0.04em; line-height: 1.1; padding-right: 18px; }
.ql-arrow { position: absolute; right: 14px; top: 14px; font-size: 13px; color: var(--ink-60); }
.ql-cr-more { margin-top: 16px; border-top: 1px solid var(--line); }
.ql-cr-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); cursor: pointer; text-align: left; }
.ql-cr-toggle .ql-pm { position: relative; width: 14px; height: 14px; flex: none; }
.ql-cr-toggle .ql-pm::before, .ql-cr-toggle .ql-pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out); }
.ql-cr-toggle .ql-pm::after { transform: rotate(90deg); }
.ql-cr-toggle[aria-expanded="true"] .ql-pm::after { transform: rotate(0deg); }
.ql-cr-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ql-cr-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.ql-cr-panel.open { grid-template-rows: 1fr; }
.ql-cr-panel > div { overflow: hidden; }
.ql-cr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px var(--cb-col, 56px); padding: 12px 0 36px; }
.ql-cr-group h3 { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.ql-cr-group dl { margin: 0; }
.ql-cr-group dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; }
.ql-cr-group dt { color: var(--ink-60); }
.ql-cr-group dd { margin: 0; }
@media (max-width: 1100px) and (min-width: 810px) { .ql-key { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ql-cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .ql-key { grid-template-columns: 1fr 1fr; }
  .ql-key li:first-child { grid-column: 1 / -1; }
  .ql-key a { min-height: 92px; }
  .ql-key strong { font-size: 17px; }
  .ql-cr-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Questionable Laws — fluid story block (campaign + film) */
.ql-story { max-width: var(--cb-max, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cb-col, 56px); padding-top: 80px; align-items: start; }
.ql-story-l { position: sticky; top: calc(var(--nav-h) + 40px); display: flex; flex-direction: column; gap: 16px; }
.ql-story-l .proj-lead-txt { margin: 0; max-width: 24ch; font-size: clamp(24px, 2.3vw, 34px) !important; line-height: 1.14; }
.ql-story-r { display: flex; flex-direction: column; gap: 16px; padding-top: 0; border-left: 1px solid var(--line); padding-left: var(--cb-col, 56px); }
.ql-story-r .mp-p { max-width: 46ch; }
.ql-story-r .ql-question { margin: 12px 0 0; font-weight: 500; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -0.05em; max-width: 22ch; color: var(--ink); }
.ql .ql-laws { padding-top: 96px; }
@media (max-width: 809px) {
  .ql-story { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; }
  .ql-story-l { position: static; }
  .ql-story-l .proj-lead-txt { font-size: 22px !important; max-width: none; }
  .ql-story-r { border-left: 0; padding-left: 0; }
  .ql-story-r .ql-question { font-size: 24px; }
  .ql .ql-laws { padding-top: 56px; }
}
/* QL story: no sticky — both columns top-aligned */
.ql-story { align-items: start; }
.ql-story-l { position: static !important; top: auto; }
.ql-story-l, .ql-story-r { padding-top: 0; margin-top: 0; }
.ql-story-l .label, .ql-story-r .label { line-height: 1.4; }

/* QL — centered campaign intro on top + film paragraph */
.ql-top { padding-top: 48px; padding-bottom: 48px; text-align: center; }
.ql-top-txt { margin: 0 auto; max-width: 30ch; font-weight: 500; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -0.05em; text-wrap: balance; }
.ql-hero2 { padding-top: 0 !important; }
.ql-filmtxt { max-width: var(--cb-max, 1180px); margin: 0 auto; padding-top: 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ql-filmtxt .mp-p { max-width: 62ch; font-size: 16px; line-height: 1.6; }
@media (max-width: 809px) {
  .ql-top { padding-top: 28px; padding-bottom: 28px; text-align: left; }
  .ql-top-txt { font-size: 24px; max-width: none; }
  .ql-filmtxt { padding-top: 48px; align-items: flex-start; text-align: left; }
  .ql-filmtxt .mp-p { font-size: 15px; }
}

/* QL — final rhythm: one centered axis, fewer labels, client-friendly flow */
.ql .ql-top { padding-top: 56px; padding-bottom: 44px; }
.ql .ql-filmtxt { padding-top: 64px; }
.ql .ql-filmtxt .mp-p { color: rgba(10,10,10,.7); }
.ql .ql-laws { padding-top: 112px; }
.ql .ql-laws .proj-sec-head, .ql .ql-credits .proj-sec-head { display: block; text-align: center; margin: 0 auto 32px; }
.ql .ql-laws .proj-h2, .ql .ql-credits .proj-h2 { max-width: none; margin: 0 auto; text-wrap: balance; }
.ql .ql-law-list span { display: block; text-align: center; }
.ql .ql-closing { padding-top: 120px; }
.ql .ql-close { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.08; max-width: 22ch; }
.ql .ql-credits { padding-top: 120px; }
.ql .ql-cr-sub { text-align: center; margin: -16px 0 28px; }
.ql .ql-cr-more { margin-top: 20px; }
.ql [data-section="Q08"] { padding-top: 96px; }
@media (max-width: 809px) {
  .ql .ql-top { padding-top: 28px; padding-bottom: 28px; }
  .ql .ql-filmtxt { padding-top: 44px; }
  .ql .ql-laws { padding-top: 72px; }
  .ql .ql-laws .proj-sec-head, .ql .ql-credits .proj-sec-head { text-align: left; margin-bottom: 20px; }
  .ql .ql-law-list span { text-align: left; }
  .ql .ql-closing { padding-top: 72px; }
  .ql .ql-close { font-size: 26px; text-align: left; margin: 0; }
  .ql .ql-credits { padding-top: 72px; }
  .ql .ql-cr-sub { text-align: left; margin: -8px 0 20px; }
  .ql [data-section="Q08"] { padding-top: 64px; }
}
@media (max-width: 809px) { .ql .ql-closing { align-items: flex-start; } .ql .ql-close { max-width: none; } }

/* Preview edits pass (25/10) */
body[data-page="project"] .ql-hero2 { padding-top: 40px !important; }
body[data-page="project"] .ql .ql-credits { padding-top: 48px; }
body[data-page="project"] .mp-about2 { padding-top: 0; }
body[data-page="project"] .mp-ab-row { margin-top: 0; }
body[data-page="project"] .mp .mp-piece { padding-top: 64px; }
body[data-page="case"] .page-hero { padding-top: 50px; padding-bottom: 45px; }
@media (max-width: 809px) {
  body[data-page="project"] .ql-hero2 { padding-top: 16px !important; }
  body[data-page="project"] .ql .ql-filmtxt { padding-top: 8px; }
  body[data-page="project"] .ql .ql-credits { padding-top: 48px; }
  body[data-page="project"] .mp .mp-piece { padding-top: 56px; }
  body[data-page="case"] .page-hero { padding-top: 24px; padding-bottom: 28px; }
  /* no small sub-tags above titles on mobile */
  main .label, main .mp-n { display: none !important; }
  main .proj-sec-head { row-gap: 0; }
}
@media (max-width: 809px) { body[data-page="project"] .mp-about2 { padding-top: 40px; } }

/* Cover framing: portrait covers in landscape cards */
.work-card img[src*="work-soho"] { object-position: 50% 42%; }
.work-card img[src*="work-rotulo"] { object-position: 50% 50%; }
.next-card img[src*="work-soho"] { object-position: 50% 30%; }
/* Practice portraits (Polaroids): keep faces in frame */
img[src*="practice-"] { object-position: 50% 30%; }
img[src*="practice-campaigns"] { object-position: 50% 78%; }
img[src*="practice-branding"] { object-position: 50% 62%; }
/* Practice thumbs: N, logo marks */
.acc-thumb img[src*="nlogo-"] { object-fit: contain; object-position: 50% 50%; background: #fff; padding: 6px; }
.acc-thumb:has(img[src*="nlogo-"]) { background: #fff; }
.acc-thumb:has(img[src*="nlogo-"]) { background: var(--bg, #f4f4f4); }
.acc-thumb img[src*="nlogo-"] { background: transparent; mix-blend-mode: multiply; padding: 10px; }
/* N, vector marks directly in the box (no tile) */
.acc-thumb:has(img[src*="nlogo-"]) { background: transparent !important; border-radius: 0; }
.acc-thumb img[src*="nlogo-"] { background: transparent !important; mix-blend-mode: normal !important; padding: 4px 6px !important; object-fit: contain !important; }

/* ===== Papodipokas (papodipokas.html) ===== */
.pp-stage::before { background: radial-gradient(70% 60% at 78% 45%, rgba(170,55,40,.28), transparent 70%) !important; }
.pp .ql-stage2 .ql-statement { color: #e8a08f; }
.pp-facts { padding-top: 24px; }
.pp-facts-row { margin: 0; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--gap); }
.pp-facts-row > div { background: var(--card); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.pp-facts-row dt { font-size: 12px; color: var(--ink-60); }
.pp-facts-row dd { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.03em; }
.pp-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--cb-col, 56px); padding-top: var(--cb-gap, 96px); align-items: center; }
.pp-story-img { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 78svh; background: #7a2a1e; }
.pp-story-img img, .pp-archive img, .pp-persp-img img { width: 100%; height: 100%; object-fit: cover; }
.pp-story-txt { display: flex; flex-direction: column; gap: 16px; }
.pp-story-txt .proj-lead-txt { margin: 0; max-width: 26ch; }
.pp-pull { margin: 12px 0 0; padding-left: 18px; border-left: 2px solid #a33a26; font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.035em; max-width: 36ch; }
.pp-archive { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 72px; }
.pp-archive figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: #222; }
.pp-collab { padding-top: var(--cb-gap, 96px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.pp-collab-lead { margin: 0; max-width: 32ch; font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.14; letter-spacing: -0.05em; text-wrap: balance; }
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-col, 56px); max-width: 880px; margin-top: 16px; text-align: left; }
.pp-persp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--cb-col, 56px); padding-top: var(--cb-gap, 96px); align-items: center; }
.pp-persp-txt { display: flex; flex-direction: column; gap: 16px; }
.pp-big { margin: 0 0 8px; font-weight: 500; font-size: clamp(36px, 4vw, 60px); line-height: .98; letter-spacing: -0.06em; max-width: 14ch; }
.pp-persp-img { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 80svh; background: #222; }
.pp .ql-close { max-width: 30ch; }
@media (max-width: 809px) {
  .pp-facts-row { grid-template-columns: 1fr; gap: 4px; }
  .pp-story, .pp-persp { grid-template-columns: 1fr; gap: 24px; }
  .pp-story-img, .pp-persp-img { max-height: none; }
  .pp-persp-img { order: -1; }
  .pp-story-txt .proj-lead-txt { max-width: none; }
  .pp-archive { padding-top: 40px; }
  .pp-collab { align-items: flex-start; text-align: left; }
  .pp-collab-lead { font-size: 23px; max-width: none; }
  .pp-cols { grid-template-columns: 1fr; gap: 14px; margin-top: 4px; }
  .pp-big { font-size: 36px; }
}
@media (max-width: 809px) { .pp-archive { grid-template-columns: 1fr; } }

/* Preview edits pass (25/10 b) */
body[data-page="project"] .pp .pp-persp { padding-top: 64px; }
body[data-page="project"] .ql .ql-laws { padding-top: 64px; }
@media (max-width: 809px) { body[data-page="project"] .ql .ql-filmtxt { padding-top: 48px; } }
/* H05: 3 boxes — photo (large) + info + watch */
@media (min-width: 810px) {
  .talk-sec .case-bento > .tile.talk-info { grid-column: 1 / span 2 !important; grid-row: 1 !important; display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-content: space-between; }
  .talk-sec .case-bento > a.tile[style*="span 2"] { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
}
.talk-sec .tile.talk-info .lead { margin: 0; }
/* H02 subtitle (much smaller) — H03 removed */
.approach-sec .approach-sub { font-size: clamp(14px, 1.05vw, 16px) !important; line-height: 1.45; color: var(--ink-60); max-width: 46ch; margin-top: 14px; letter-spacing: -0.02em; }
@media (max-width: 809px) { .approach-sec .approach-sub { font-size: 14px !important; margin-top: 10px; } }
.work-card img[src*="pp-scream"] { object-position: 50% 38%; }
.work-card img[src*="work-papodipokas"] { object-position: 50% 52%; }
/* Preview edits pass (25/10 c) */
@media (min-width: 810px) {
  body[data-page="home"] main > [data-section="H02"] { padding-top: 74px !important; }
  body[data-page="project"] .pp .pp-story { padding-top: 48px; }
  body[data-page="project"] .pp .pp-collab { padding-top: 64px; }
}

/* Studio S02 stairs image + S05 founder */
body[data-page="studio"] .wide-img[data-section="S02"] picture, body[data-page="studio"] .wide-img[data-section="S02"] picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-page="studio"] .wide-img[data-section="S02"] { aspect-ratio: 1860 / 845; }
body[data-page="studio"] .wide-img[data-section="S02"] .tag { display: none; }
.founder { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding-top: 104px; padding-bottom: 40px; }
.founder-img { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 76svh; background: #222; }
.founder-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.founder-txt { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.founder .label::before { display: none !important; }
.founder .label { color: var(--ink-60); font-size: 13px; }
.founder-name { margin: 0; font-weight: 500; font-size: clamp(40px, 4.4vw, 64px); line-height: .95; letter-spacing: -0.06em; }
.founder-role { margin: 0; font-size: 14px; color: var(--ink-60); }
.founder-lead { margin: 14px 0 4px; font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.045em; max-width: 24ch; }
.founder .mp-p { font-size: 15px; line-height: 1.55; color: rgba(10,10,10,.7); max-width: 50ch; margin: 0; }
.founder-facts { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); width: 100%; max-width: 520px; }
.founder-facts li { background: var(--card); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.founder-facts b { font-weight: 500; font-size: 18px; letter-spacing: -0.04em; }
.founder-facts span { font-size: 13px; color: var(--ink-60); }
@media (max-width: 809px) {
  body[data-page="studio"] .wide-img[data-section="S02"] { aspect-ratio: 1122 / 1402; height: auto; max-height: none; }
  .founder { grid-template-columns: 1fr; gap: 24px; padding: 64px var(--gutter) 24px; }
  .founder-img { max-height: none; }
  .founder-lead { font-size: 22px; }
  .founder-facts { grid-template-columns: 1fr; }
}
/* Founder: selected brands (text wordmarks until official logo files are supplied) */
.founder-brands { display: flex; align-items: center; gap: 18px; margin: 2px 0 8px; flex-wrap: wrap; }
.founder-brands-l { font-size: 12px; color: var(--ink-60); }
.founder-brands ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: center; }
.founder-brands li { color: var(--ink); opacity: .75; line-height: 1; }
.fb-glossier { font-family: "Times New Roman", Georgia, serif; font-size: 22px; letter-spacing: -0.01em; }
.fb-vice { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 0.04em; }
@media (max-width: 809px) { .founder-brands { gap: 12px; } .founder-brands ul { gap: 22px; } }
.founder-brands a { color: inherit; text-decoration: none; display: inline-block; transition: opacity .3s, transform .3s var(--ease-out); cursor: pointer; }
.founder-brands li { opacity: 1; }
.founder-brands a { opacity: .75; }
.founder-brands a:hover { opacity: 1; transform: translateY(-1px); }
.founder-brands a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* ===== H01 · Opening, VICE Studios–style: full-bleed film, small centered wordmark ===== */
.has-hero .hero.hero-min { border-radius: 0 !important; height: 100svh; min-height: 560px; padding: 0; display: grid; place-items: center; position: relative; }
.hero-min .hero-media::after { background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.08) 60%, rgba(0,0,0,.45) 100%); }
.hero-min .hero-media video { filter: none; }
.hero-center { text-align: center; }
.hero-mark { margin: 0; color: #fff; font-weight: 500; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.045em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 18px rgba(0,0,0,.25); }
.hero-mark .reg { font-size: .5em; vertical-align: top; position: relative; top: .1em; margin-left: .02em; }
.hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; color: #fff; }
.hero-foot .hero-tag { margin: 0; font-size: 14px; line-height: 1.35; max-width: 30ch; opacity: .85; }
.hero-scroll { font-size: 12px; letter-spacing: .02em; opacity: .7; }
/* entry: soft fade instead of the card slide */
.js .hero-card.hero-min { transform: none; opacity: 0; }
.ready .hero-card.hero-min { opacity: 1; transition: opacity 1.2s ease; }
.js .hero-min .h-in { opacity: 0; transform: translateY(12px); filter: blur(6px); }
.ready .hero-min .h-in { opacity: 1; transform: none; filter: none; transition: opacity 1s ease .3s, transform 1.2s var(--ease-out) .3s, filter 1s ease .3s; }
.js .hero-min .h-late { opacity: 0; transform: none; }
.ready .hero-min .h-late { opacity: 1; transition: opacity 1s ease 1s; }
.edit-mode .hero-min .h-in, .edit-mode .hero-min .h-late { opacity: 1 !important; filter: none !important; }
/* preloader: same wordmark, centered */
.preloader .word { font-size: clamp(20px, 1.8vw, 26px); }
@media (max-width: 809px) {
  .hero-mark { font-size: 22px; }
  .hero-foot .hero-tag { font-size: 13px; max-width: 24ch; }
}

/* ===== H08 · News: 1 large + 2 small, equal height, aligned images & text ===== */
@media (min-width: 810px) {
  .news-grid.home { grid-template-columns: 2fr 1fr 1fr; align-items: stretch; gap: var(--gap); }
  .news-grid.home .news-card { height: clamp(440px, 36vw, 520px); min-height: 0; }
  .news-grid.home .news-card:not(.feature) { padding: 12px 12px 20px; gap: 0; display: grid; grid-template-rows: 62% auto; }
  .news-grid.home .news-card:not(.feature) .thumb { aspect-ratio: auto; height: 100%; width: 100%; }
  .news-grid.home .news-card:not(.feature) .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .news-grid.home .news-card:not(.feature) > div:last-child { padding: 18px 8px 0; display: flex; flex-direction: column; gap: 8px; }
  .news-grid.home .news-card:not(.feature) h3 { margin: 0; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .news-grid.home .news-card:not(.feature) p { margin: 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .news-grid.home .news-card:not(.feature) p:empty { display: none; }
  .news-grid.home .news-card.feature .inner { padding: 28px; }
}
@media (max-width: 809px) {
  .news-grid.home .news-card { height: 440px; min-height: 0; }
  .news-grid.home .news-card:not(.feature) { padding: 10px 10px 18px; gap: 0; display: grid; grid-template-rows: 60% auto; }
  .news-grid.home .news-card:not(.feature) .thumb { aspect-ratio: auto; height: 100%; }
  .news-grid.home .news-card:not(.feature) > div:last-child { padding: 14px 6px 0; display: flex; flex-direction: column; gap: 6px; }
  .news-grid.home .news-card:not(.feature) h3 { margin: 0; font-size: 18px; }
  .news-grid.home .news-card:not(.feature) p:empty { display: none; }
}
/* Home rhythm review: every section gets the same breathing room (112 desktop / 64 mobile);
   only the Collabs → lettering film pair stays joined */
body[data-page="home"] main > [data-section="H02"]:not([data-section="H01"]):not(.x) { padding-bottom: 56px !important; }
body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]):not(.x) { padding-top: 56px !important; }
body[data-page="home"] main > [data-section="H10"]:not([data-section="H01"]):not(.x) { padding-top: 56px !important; }
@media (max-width: 809px) {
  body[data-page="home"] main > [data-section="H02"]:not([data-section="H01"]):not(.x) { padding-bottom: 32px !important; }
  body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]):not(.x) { padding-top: 32px !important; }
  body[data-page="home"] main > [data-section="H10"]:not([data-section="H01"]):not(.x) { padding-top: 32px !important; }
}
.hero-min .hero-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; }
.hero-min .hero-foot { z-index: 2; }
/* H02 subtitle — tighter to the title, calmer size, measure matched to the headline */
body[data-page="home"] .approach-sec .approach { row-gap: 0 !important; gap: 0 !important; }
body[data-page="home"] .approach-sec .approach-sub { margin: 22px auto 0 !important; font-size: clamp(16px, 1.2vw, 18px) !important; line-height: 1.45 !important; letter-spacing: -0.02em; color: var(--ink-60); max-width: 40ch !important; text-wrap: balance; }
@media (max-width: 809px) {
  body[data-page="home"] .approach-sec .approach-sub { margin: 16px 0 0 !important; font-size: 15px !important; line-height: 1.45 !important; max-width: 34ch !important; text-wrap: pretty; }
}
/* H04 feature photo: keep the dancer in frame (desktop tall card / mobile) */
.ops-top .feature img[src*="h04-dance"] { object-position: 45% 35%; }
@media (max-width: 809px) { .ops-top .feature img[src*="h04-dance"] { object-position: 40% 30%; } }

/* H04 · Full Service Production — open description block above the Practices tabs */
.ops-intro { background: var(--card); border-radius: var(--r-lg); padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.ops-title { margin: 0; font-weight: 500; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.05em; line-height: 1.05; }
.ops-sub { margin: 0; font-size: 14px; color: var(--ink-60); }
.ops-desc { margin: 8px 0 6px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.35; letter-spacing: -0.03em; max-width: 40ch; }
.ops-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
.ops-groups .acc-group-name { font-size: 12.5px !important; color: var(--ink) !important; margin-bottom: 8px; }
.ops-groups .acc-group-name b { font-weight: 500; }
.ops-groups .acc-chips { display: flex; flex-wrap: wrap; gap: 6px; opacity: 1 !important; transform: none !important; }
.ops-foot { margin-top: 10px; }
.ops-top .acc-label { margin-top: 18px; }
@media (max-width: 809px) {
  .ops-intro { padding: 20px 18px; }
  .ops-groups { grid-template-columns: 1fr; gap: 14px; }
}
/* H02 subtitle v2 — longer copy: wider measure, 2–3 balanced lines, clear gap under the headline */
body[data-page="home"] main > [data-section="H02"]:not([data-section="H01"]):not(.x) { padding-top: 58px !important; }
body[data-page="home"] .approach-sec .approach-sub { margin: 28px auto 0 !important; font-size: clamp(16px, 1.15vw, 18px) !important; line-height: 1.5 !important; max-width: 58ch !important; text-wrap: balance; }
@media (max-width: 809px) {
  body[data-page="home"] main > [data-section="H02"]:not([data-section="H01"]):not(.x) { padding-top: 40px !important; }
  body[data-page="home"] .approach-sec .approach-sub { margin: 18px 0 0 !important; font-size: 15px !important; line-height: 1.5 !important; max-width: none !important; text-wrap: pretty; }
}
@media (min-width: 810px) { body[data-page="home"] .approach-sec .approach-sub { max-width: 600px !important; text-wrap: pretty !important; } }
.news-card.feature img[src*="news-n-steel"] { object-position: 52% 42%; }
/* Studio S02: B&W reel (16:9) */
body[data-page="studio"] .wide-img[data-section="S02"] { aspect-ratio: 16 / 9 !important; height: auto !important; max-height: 82svh; background: #111; }
body[data-page="studio"] .wide-img[data-section="S02"] video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 809px) { body[data-page="studio"] .wide-img[data-section="S02"] { aspect-ratio: 4 / 5 !important; max-height: none; } }

/* ===== Nowdays Studios × Landscape (landscape.html) ===== */
.ls > .wrap { max-width: var(--cb-max, 1180px); margin-left: auto; margin-right: auto; }
.ls-hero { padding-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.ls-title { margin: 0; font-weight: 500; font-size: clamp(40px, 5.2vw, 76px); line-height: .98; letter-spacing: -0.06em; max-width: 18ch; }
.ls-title .soft { color: rgba(10,10,10,.38); }
.ls-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 12px; }
.ls-intro { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: rgba(10,10,10,.72); max-width: 56ch; }
.ls-reel { padding-top: 48px; }
.ls-reel-box { border-radius: var(--r-xl, 22px); overflow: hidden; aspect-ratio: 16 / 9; max-height: 80svh; background: #111; }
.ls-reel-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-eco { padding-top: 112px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.ls-eco-lead { margin: 0; max-width: 30ch; font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -0.05em; text-wrap: balance; }
.ls-eco-card { margin-top: 40px; width: 100%; background: #0b0b0b; color: #fff; border-radius: var(--r-xl, 22px); padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ls-eco-kicker { margin: 0; font-size: clamp(15px, 1.2vw, 18px); color: rgba(255,255,255,.6); }
.ls-eco-big { margin: 0; font-weight: 500; font-size: clamp(44px, 6.4vw, 100px); line-height: .92; letter-spacing: -0.065em; }
.ls-eco-def { margin: 10px 0 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: rgba(255,255,255,.78); }
.ls-eco-pills { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ls-eco-pills li { border: 1px solid rgba(255,255,255,.22); border-radius: 50px; padding: 8px 16px; font-size: 14px; letter-spacing: -0.02em; }
.ls-origin { padding-top: 112px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.ls-origin-img { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 72svh; background: #bbb; }
.ls-origin-img img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 45%; }
.ls-origin-txt { display: flex; flex-direction: column; gap: 16px; }
.ls-h2 { margin: 0; font-weight: 500; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.02; letter-spacing: -0.055em; }
.ls .mp-p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(10,10,10,.72); max-width: 52ch; }
.ls-sec-head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin-bottom: 36px; }
.ls-built { padding-top: 112px; }
.ls-roles { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.ls-role { background: var(--card); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 8px; }
.ls-role-n { font-size: 13px; color: var(--ink-60); }
.ls-role h3 { margin: 0; font-weight: 500; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.055em; line-height: 1; }
.ls-role-what { margin: 0 0 12px; font-size: 14px; color: var(--ink-60); }
.ls-role ul { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--line); }
.ls-role li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: -0.02em; }
.ls-plus { align-self: center; font-size: 28px; font-weight: 300; color: var(--ink-40, rgba(10,10,10,.4)); }
.ls-mady { margin: 20px auto 0; text-align: center; font-size: 14px; color: var(--ink-60); max-width: 60ch; }
.ls-do { padding-top: 112px; }
.ls-do-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ls-do-list li { background: var(--card); border-radius: var(--r-lg); padding: 22px 22px 26px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.15; letter-spacing: -0.045em; transition: background .4s; }
.ls-do-list li:hover { background: #fafafa; }
.ls-do-n { font-weight: 300; font-size: 18px; color: var(--ink-40, rgba(10,10,10,.4)); }
.ls-cta { padding-top: 112px; padding-bottom: 80px; }
.ls-cta-card { background: var(--card); border-radius: var(--r-xl, 22px); padding: clamp(40px, 6vw, 88px) 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.ls-cta-title { margin: 0; font-weight: 500; font-size: clamp(40px, 5vw, 76px); line-height: .95; letter-spacing: -0.06em; }
.ls-cta-txt { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.5; color: rgba(10,10,10,.7); }
.ls-cta-btn { margin-top: 8px; }
@media (max-width: 1100px) and (min-width: 810px) { .ls-do-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .ls-hero { padding-top: 24px; gap: 14px; }
  .ls-title { font-size: 38px; }
  .ls-hero-foot { grid-template-columns: 1fr; gap: 20px; }
  .ls-hero-foot .btn { justify-self: start; }
  .ls-reel { padding-top: 32px; }
  .ls-reel-box { aspect-ratio: 4 / 5; max-height: none; }
  .ls-eco { padding-top: 64px; align-items: flex-start; text-align: left; }
  .ls-eco-lead { font-size: 24px; max-width: none; }
  .ls-eco-card { margin-top: 24px; align-items: flex-start; text-align: left; padding: 32px 22px; }
  .ls-eco-big { font-size: 46px; }
  .ls-eco-pills { justify-content: flex-start; }
  .ls-origin { grid-template-columns: 1fr; gap: 24px; padding-top: 64px; }
  .ls-origin-img { aspect-ratio: 4 / 3; max-height: none; }
  .ls-sec-head { align-items: flex-start; text-align: left; margin-bottom: 20px; }
  .ls-built, .ls-do, .ls-cta { padding-top: 64px; }
  .ls-roles { grid-template-columns: 1fr; gap: 8px; }
  .ls-plus { justify-self: center; font-size: 24px; line-height: 1; }
  .ls-mady { text-align: left; margin-left: 0; }
  .ls-do-list { grid-template-columns: 1fr 1fr; }
  .ls-do-list li { min-height: 116px; padding: 16px 16px 18px; font-size: 17px; }
  .ls-cta { padding-bottom: 48px; }
  .ls-cta-card { align-items: flex-start; text-align: left; padding: 36px 22px; }
  .ls-cta-title { font-size: 40px; }
}
/* Landscape page v2: Nowdays / Landscape duo inside L03 */
.ls .ls-eco { padding-top: 80px; }
.ls-duo { width: 100%; margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); text-align: left; }
.ls-side { background: var(--card); border-radius: var(--r-lg); padding: 12px 12px 28px; display: flex; flex-direction: column; gap: 14px; }
.ls-side-img { margin: 0 0 6px; position: relative; border-radius: var(--r-md, 12px); overflow: hidden; aspect-ratio: 4 / 3; background: #222; }
.ls-side-img img { width: 100%; height: 100%; object-fit: cover; }
.ls-side-img figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: 13px; font-weight: 500; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); padding: 5px 10px; border-radius: 50px; }
.ls-side-h { margin: 0 12px; font-weight: 500; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.05em; line-height: 1.05; }
.ls-side .mp-p { margin: 0 12px; font-size: 15px; }
.ls-eco-ls { margin: 4px 0 0; max-width: 46ch; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: rgba(255,255,255,.55); }
@media (max-width: 809px) {
  .ls .ls-eco { padding-top: 56px; }
  .ls-duo { grid-template-columns: 1fr; margin-top: 28px; gap: 8px; }
  .ls-side { padding: 10px 10px 22px; }
  .ls-side-h, .ls-side .mp-p { margin: 0 8px; }
}
.ls-side-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.ls-side-link .ls-side-img { background: #000; }
.ls-side-link img { transition: transform 1s var(--ease-out); }
.ls-side-link:hover img { transform: scale(1.04); }
.ls-side-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-md, 12px); }

/* ===== Studio v2 (studio.html) — origin, ecosystems, how-we-work tabs, Landscape, founder, team ===== */
body[data-page="studio"] .st2 > .wrap, body[data-page="studio"] .st2 > section.wrap { max-width: 1180px; margin-left: auto; margin-right: auto; }
.st2 .label::before { display: none !important; }
.st2 .label { color: var(--ink-60); font-size: 13px; gap: 0; }
.st-hero { padding-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.st-display { margin: 0; font-weight: 500; font-size: clamp(72px, 11vw, 168px); line-height: .88; letter-spacing: -0.075em; }
.st-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: end; margin-top: 28px; }
.st-lead { margin: 0; font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.18; letter-spacing: -0.045em; max-width: 32ch; }
.st-lead .soft { color: rgba(10,10,10,.4); }
.st-jump { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.st-jump a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; transition: padding .4s var(--ease-out), color .3s; }
.st-jump a i { font-style: normal; font-size: 12px; color: var(--ink-60); }
.st-jump a:hover { padding-left: 8px; }
.st-reel { padding-top: 48px; }
.st-reel-box { position: relative; border-radius: var(--r-xl, 22px); overflow: hidden; aspect-ratio: 16 / 9; max-height: 82svh; background: #111; }
.st-reel-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-reel-tag { position: absolute; right: 20px; bottom: 16px; color: #fff; font-size: 14px; opacity: .85; }
.st-origin { padding-top: 112px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.st-origin-head { display: flex; flex-direction: column; gap: 16px; }
.st-statement { margin: 0; font-weight: 500; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.08; letter-spacing: -0.055em; max-width: 22ch; }
.st-statement .about4-sub { display: block; margin-top: 16px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.4; letter-spacing: -0.025em; color: var(--ink-60); font-weight: 400; max-width: 40ch; }
.st-origin-body { padding-top: 34px; }
.st2 .mp-p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(10,10,10,.72); max-width: 52ch; }
.st-stats { grid-column: 1 / -1; list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.st-stats li { background: var(--card); border-radius: var(--r-lg); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 28px; }
.st-stats b { font-weight: 500; font-size: clamp(44px, 4.6vw, 68px); line-height: .9; letter-spacing: -0.06em; }
.st-stats span:not([data-count]) { font-size: 14px; color: var(--ink-60); max-width: 24ch; }
.st-eco { padding-top: 112px; }
.st-sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 32px; }
.st-sec-head .st-statement { max-width: 34ch; text-wrap: balance; font-size: clamp(24px, 2.3vw, 34px); }
.st-h2 { margin: 0; font-weight: 500; font-size: clamp(36px, 4vw, 60px); line-height: .98; letter-spacing: -0.06em; }
.st-how { padding-top: 112px; }
.st-tabs { background: var(--card); border-radius: var(--r-xl, 22px); padding: 10px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 10px; min-height: 380px; }
.st-tablist { display: flex; flex-direction: column; gap: 6px; }
.st-tab { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 20px 22px; border: 0; border-radius: var(--r-lg); background: transparent; font: inherit; font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: -0.045em; color: rgba(10,10,10,.4); cursor: pointer; transition: background .4s, color .3s; }
.st-tab i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--ink-60); letter-spacing: 0; }
.st-tab:hover { color: var(--ink); }
.st-tab[aria-selected="true"] { background: #f1f1f1; color: var(--ink); }
.st-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-panels { background: #f6f6f6; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 44px); display: flex; align-items: center; }
.st-panel.is-on { animation: stPanel .6s var(--ease-out) both; }
@keyframes stPanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.st-panel-txt { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; letter-spacing: -0.02em; color: rgba(10,10,10,.78); max-width: 52ch; }
.st-beliefs { margin: 0; font-weight: 500; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.35; letter-spacing: -0.045em; }
.st-ls { padding-top: 112px; }
.st-duo { margin-top: 0; }
.st-roles { list-style: none; margin: 4px 12px 0; padding: 0; border-top: 1px solid var(--line); }
.st-roles li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: -0.02em; }
.st-ls-foot { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.st-ls-foot .mp-p { font-size: 14px; color: var(--ink-60); }
body[data-page="studio"] .st2 .founder { padding-top: 112px; padding-bottom: 0; }
body[data-page="studio"] .st2 [data-section="S08"] { padding-top: 112px; }
.st-cta { padding-top: 112px; padding-bottom: 80px; }
@media (max-width: 809px) {
  .st-hero { padding-top: 20px; }
  .st-display { font-size: 72px; }
  .st-hero-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 16px; }
  .st-lead { font-size: 22px; }
  .st-reel { padding-top: 32px; }
  .st-reel-box { aspect-ratio: 4 / 5; max-height: none; }
  .st-origin { grid-template-columns: 1fr; gap: 20px; padding-top: 64px; }
  .st-origin-body { padding-top: 0; }
  .st-statement { font-size: 26px; }
  .st-stats { grid-template-columns: 1fr; margin-top: 20px; gap: 6px; }
  .st-stats li { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
  .st-stats b { font-size: 40px; }
  .st-stats span:not([data-count]) { text-align: right; max-width: 18ch; }
  .st-eco, .st-how, .st-ls, .st-cta { padding-top: 64px; }
  .st-sec-head { align-items: flex-start; text-align: left; margin-bottom: 20px; }
  .st-tabs { grid-template-columns: 1fr; min-height: 0; padding: 8px; }
  .st-tablist { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .st-tablist::-webkit-scrollbar { display: none; }
  .st-tab { flex: 0 0 auto; width: auto; padding: 12px 16px; font-size: 16px; gap: 8px; }
  .st-panels { padding: 22px 18px; }
  .st-ls-foot { flex-direction: column; align-items: flex-start; }
  body[data-page="studio"] .st2 .founder, body[data-page="studio"] .st2 [data-section="S08"] { padding-top: 64px; }
  .st-cta { padding-bottom: 48px; }
}
.st-statement .about4-sub { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; }
body[data-page="studio"] .st2 > section[data-section="S08"] { padding-top: 112px !important; padding-bottom: 0 !important; }
@media (max-width: 809px) {
  body[data-page="studio"] .st2 > section[data-section="S08"] { padding-top: 64px !important; }
  .st-tab i { display: none; }
  .st-tab { padding: 11px 13px; font-size: 15px; }
}

/* ===== Compact scroll rhythm (all pages) — Oct 2026 =====
   Desktop: 80px between blocks on inner pages, 96px on the home.
   Mobile: 48px on inner pages, 56px on the home. */
body[data-page="home"] main > [data-section="H02"]:not([data-section="H01"]):not(.x):not(.y) { padding-top: 48px !important; padding-bottom: 8px !important; }
body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]):not(.x):not(.y),
body[data-page="home"] main > [data-section="H10"]:not([data-section="H01"]):not(.x):not(.y) { padding-top: 48px !important; }
body[data-page="home"] main > [data-section="H06"][data-section]:not([data-section="H01"]):not(.x):not(.y) { padding-top: 16px !important; }
@media (max-width: 809px) {
  body[data-page="home"] main > [data-section="H02"]:not([data-section="H01"]):not(.x):not(.y) { padding-top: 32px !important; padding-bottom: 6px !important; }
  body[data-page="home"] main > [data-section="H06"]:not([data-section="H01"]):not(.x):not(.y),
  body[data-page="home"] main > [data-section="H10"]:not([data-section="H01"]):not(.x):not(.y) { padding-top: 28px !important; }
  body[data-page="home"] main > [data-section="H06"][data-section]:not([data-section="H01"]):not(.x):not(.y) { padding-top: 10px !important; }
}

/* index pages (news, contact) */
.page-hero { padding-top: clamp(104px, 10vw, 148px); padding-bottom: clamp(36px, 4.4vw, 64px); }

/* project / collab / landscape pages */
.proj-split, .proj-narr, .proj-duo, .proj-roles, .proj-pieces, .proj-guests, .proj-wide, .proj-gal,
.ql .ql-laws, .ls-eco, .ls-origin, .ls-built, .ls-do, .ls-cta { padding-top: 80px; }
.proj-close { padding-top: 80px; padding-bottom: 64px; gap: 56px; }
main.proj > section.proj-close:last-child { padding-bottom: 64px !important; }

/* studio */
body[data-page="studio"] main.st2 > section[data-section]:not([data-section="S01"]):not([data-section="S02"]):not(.x) { padding-top: 80px !important; padding-bottom: 0 !important; }
body[data-page="studio"] main.st2 > section[data-section="S06"]:not([data-section="S01"]):not([data-section="S02"]):not(.x):not(.y) { padding-top: 72px !important; }
body[data-page="studio"] main.st2 > section[data-section="S09"]:not([data-section="S01"]):not([data-section="S02"]):not(.x):not(.y) { padding-bottom: 72px !important; }

@media (max-width: 809px) {
  .proj-split, .proj-narr, .proj-duo, .proj-roles, .proj-pieces, .proj-guests, .proj-wide, .proj-gal,
  .ql .ql-laws, .ls-eco, .ls-origin, .ls-built, .ls-do, .ls-cta { padding-top: 48px; }
  .proj-close { padding-top: 48px; gap: 40px; }
  main.proj > section.proj-close:last-child { padding-bottom: 40px !important; }
  body[data-page="studio"] main.st2 > section[data-section]:not([data-section="S01"]):not([data-section="S02"]):not(.x) { padding-top: 48px !important; }
  body[data-page="studio"] main.st2 > section[data-section="S06"]:not([data-section="S01"]):not([data-section="S02"]):not(.x):not(.y) { padding-top: 40px !important; }
  body[data-page="studio"] main.st2 > section[data-section="S09"]:not([data-section="S01"]):not([data-section="S02"]):not(.x):not(.y) { padding-bottom: 48px !important; }
}

body[data-page="project"].x, body[data-page="project"], body[data-page="case"] { --cb-gap: 80px; }
main.mp.mp { --mp-gap: 80px; }
.ql.ql .ql-laws, .ql.ql [data-section="Q08"] { padding-top: 80px; }
@media (max-width: 809px) {
  body[data-page="project"], body[data-page="case"] { --cb-gap: 48px; }
  main.mp.mp { --mp-gap: 48px; }
  .ql.ql .ql-laws, .ql.ql [data-section="Q08"] { padding-top: 48px; }
}

/* H06 "Selected Collaborations" line: small text, plain fade-up (no blur smear) */
.work-sec .sec-head .work-sel { line-height: 1; }
.work-sec .sec-head .work-sel > span { margin-top: 0 !important; }
@media (max-width: 809px) { .work-sec .sec-head .work-sel > span { font-size: 15px !important; letter-spacing: -.03em !important; } }
.js .work-sec .work-sel[data-reveal] { transform: translateY(14px); }
.js .work-sec .work-sel[data-reveal].in { transform: none; }

/* Grain texture stays inside its dark block (it used to spill below the hero and flicker over H02 → Collabs) */
.grain { overflow: hidden; overflow: clip; }
/* Safety: nothing may widen the page horizontally (iOS Safari zooms out when it does) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* W01 · Collabs opening: smaller title, text beside it (desktop) / below it (mobile) */
:is(body[data-page="work"], body[data-page="notfound"]) .wk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; padding-left: var(--gutter); padding-right: var(--gutter); }
:is(body[data-page="work"], body[data-page="notfound"]) .wk-title { margin: 0; font-size: clamp(64px, 8.4vw, 128px); line-height: .88; }
:is(body[data-page="work"], body[data-page="notfound"]) .wk-intro { display: flex; flex-direction: column; gap: 12px; padding-bottom: .4em; max-width: 520px; justify-self: end; }
:is(body[data-page="work"], body[data-page="notfound"]) .wk-lead { margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.42; letter-spacing: -0.02em; color: rgba(10,10,10,.72); }
@media (max-width: 809px) {
  :is(body[data-page="work"], body[data-page="notfound"]) .wk-hero { grid-template-columns: 1fr; row-gap: 18px; }
  :is(body[data-page="work"], body[data-page="notfound"]) .wk-title { font-size: 60px; }
  :is(body[data-page="work"], body[data-page="notfound"]) .wk-intro { justify-self: start; padding-bottom: 0; gap: 8px; }
  :is(body[data-page="work"], body[data-page="notfound"]) .wk-lead { font-size: 16px; line-height: 1.45; }
}
/* W01 tighter pairing: text sits right next to the title, bottoms aligned */
:is(body[data-page="work"], body[data-page="notfound"]) .wk-hero { grid-template-columns: auto minmax(0, 500px); column-gap: clamp(32px, 3.6vw, 56px); justify-content: start; }
:is(body[data-page="work"], body[data-page="notfound"]) .wk-intro { justify-self: start; padding-bottom: .55em; }
:is(body[data-page="work"], body[data-page="notfound"]) .wk-intro .paren:empty { display: none; }
@media (max-width: 809px) {
  :is(body[data-page="work"], body[data-page="notfound"]) .wk-hero { grid-template-columns: 1fr; row-gap: 12px; }
  :is(body[data-page="work"], body[data-page="notfound"]) .wk-intro { padding-bottom: 0; }
}
:is(body[data-page="work"], body[data-page="notfound"]) .wk-intro .paren { display: none; }
:is(body[data-page="work"], body[data-page="notfound"]) .wk-intro { max-width: 470px; padding-bottom: .2em; }
:is(body[data-page="work"], body[data-page="notfound"]) .wk-lead { text-wrap: pretty; }
@media (max-width: 809px) { :is(body[data-page="work"], body[data-page="notfound"]) .wk-intro { padding-bottom: 0; } }
@media (max-width: 809px) { :is(body[data-page="work"], body[data-page="notfound"]) .wk-hero { row-gap: 16px; } }

/* Q06 key credit without a link (same card look, no arrow) */
.ql-key .ql-kc { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 112px; height: 100%; padding: 16px 16px 18px; background: var(--card); border-radius: var(--r-lg); }
@media (max-width: 809px) { .ql-key .ql-kc { min-height: 92px; } }
@media (max-width: 809px) {
  .ql-key li:first-child { grid-column: auto; }
  .ql-key li:last-child { grid-column: 1 / -1; }
}

/* ===== Home restructure (Oct 2026): intro CTAs, practices, perspective, project roles, contact ===== */
.approach-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
@media (min-width: 810px) { .approach-sec .approach-cta { justify-content: center; } }
.approach-cta .btn { --h: 40px; font-size: 14px; }
@media (max-width: 809px) { .approach-cta { margin-top: 14px; } .approach-cta .btn { --h: 44px; } }

/* Our Practices: title left, list right (reuses the H04 accordion styling) */
.prac-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.prac-sec .acc { grid-column: auto !important; grid-row: auto !important; }
.prac-head { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.prac-head .h2 { margin: 0; }
.prac-sec .acc-t span { max-width: 62ch; }
@media (max-width: 809px) { .prac-grid { grid-template-columns: 1fr; row-gap: 18px; } .prac-head { padding-top: 0; } }

/* The Nowdays Perspective (reuses the Studio origin + stats components) */
body[data-page="home"] .persp-sec .st-statement { max-width: 18ch; }
body[data-page="home"] .persp-sec .st-stats b { white-space: nowrap; }

/* Selected Collaborations: Nowdays' role under each project */
.work-card .work-role { margin: 8px 2px 2px; font-size: 13px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-60); max-width: 48ch; text-wrap: pretty; }
@media (max-width: 809px) { .work-card .work-role { font-size: 12px; margin-top: 6px; } }

/* Contact CTA at the end of the home */
body[data-page="home"] .home-cta .ls-cta-card { gap: 14px; }
body[data-page="home"] .persp-sec .st-statement .soft { color: rgba(10,10,10,.4); }

/* ===== Home lower half (Oct 2026): compact people, News & Recognition, FAQ, contact ===== */
/* Studio & People: headline row + one compact row of portraits */
.people-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; margin-bottom: clamp(20px, 2.4vw, 32px); }
.people-head .h2 { margin: 0; max-width: 20ch; }
.people-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.people-side p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-60); max-width: 40ch; }
.people-side .arrow-link { font-size: 14px; }
.people-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.people-grid .member { aspect-ratio: .8; }
.people-grid .member .name { font-size: clamp(16px, 1.4vw, 20px); }
.people-grid .member .role { font-size: 10.5px; line-height: 1.25; }
@media (max-width: 809px) {
  .people-head { grid-template-columns: 1fr; row-gap: 14px; }
  .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .people-grid .member .role { font-size: 9px; top: 7px; left: 7px; right: 7px; }
  .people-grid .member .role > span { display: none; }
  .people-grid .member .name { font-size: 15px; left: 8px; bottom: 7px; }
  .people-grid .member.join .small { font-size: 10px; line-height: 1.25; }
  .people-grid .member.join .name { font-size: 15px; }
}
/* News & Recognition: three compact items */
.nr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.nr-head .h2 { margin: 0; }
.nr-head .arrow-link { font-size: 14px; white-space: nowrap; }
.nr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.nr-grid .news-card .thumb { aspect-ratio: 16 / 10; }
.nr-grid .news-card .micro { display: block; line-height: 1.35; }
@media (max-width: 809px) {
  .nr-grid { grid-template-columns: 1fr; }
  .nr-grid .news-card { flex-direction: row; align-items: center; gap: 14px; padding: 10px; }
  .nr-grid .news-card .thumb { flex: 0 0 96px; width: 96px; aspect-ratio: 1; }
  .nr-grid .news-card .plus { display: none; }
  .nr-grid .news-card h3 { font-size: 16px; margin: 4px 0; }
  .nr-grid .news-card p { display: none; }
}
/* FAQ: compact accordion, same grid as Our Practices */
.faq-home { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.faq-home .faq-item { background: var(--card) !important; }
.faq-home .faq-item:hover { background: #fafafa !important; }
/* Contact: dark card with more air */
body[data-page="home"] .home-cta .ls-cta-card.dark { color: #fff; padding: clamp(72px, 9vw, 136px) 24px; gap: 18px; }
body[data-page="home"] .home-cta .ls-cta-card.dark .ls-cta-txt { color: rgba(255,255,255,.72); font-size: clamp(16px, 1.3vw, 19px); }
body[data-page="home"] .home-cta .ls-cta-card.dark .ls-cta-title { font-size: clamp(44px, 6vw, 92px); }
@media (max-width: 809px) { body[data-page="home"] .home-cta .ls-cta-card.dark { padding: 56px 22px; } body[data-page="home"] .home-cta .ls-cta-card.dark .ls-cta-title { font-size: 44px; } }
body[data-page="home"] .home-cta .ls-cta-card.dark { background: var(--dark); }
.faq-home { grid-column: auto !important; grid-row: auto !important; align-self: start !important; }
.people-grid .member .role b br, .people-grid .member .role b > span:last-child { display: none; }
@media (max-width: 809px) { .nr-grid .news-card .plus { display: none !important; } .nr-grid .news-card .micro { font-size: 10.5px; } }

/* ===== Our Practices — editorial accordion (Oct 2026) ===== */
.prac-sec .prac-head { gap: 14px; }
.prac-sec .prac-head .label { letter-spacing: 0; }
.prac-sec .prac-sub { margin: 0; max-width: 30ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; letter-spacing: -0.025em; color: var(--ink-60); }
@media (min-width: 1024px) {
  .prac-sec .prac-grid { align-items: start; }
  .prac-sec .prac-head { position: sticky; top: calc(var(--nav-h, 52px) + 32px); align-self: start; padding-top: 4px; }
}
.prac-sec .acc { gap: 6px; }
.prac-sec .acc-item { border: 1px solid transparent; border-radius: var(--r-lg); background: var(--card); box-shadow: none !important; transition: background .22s ease, border-color .22s ease; }
.prac-sec .acc-item:hover { background: #fbfbfb; border-color: rgba(10,10,10,.08); }
.prac-sec .acc-item.is-active { border-color: rgba(10,10,10,.14); }
.prac-sec .acc-item.open { border-color: rgba(10,10,10,.16); background: var(--card); }
.prac-sec .acc-head { grid-template-columns: 1fr auto !important; align-items: start; gap: 24px; padding: 20px 22px 20px 22px !important; min-height: 0; }
.prac-sec .acc-t { gap: 8px; }
.prac-sec .prac-title { display: flex; align-items: baseline; gap: 12px; }
.prac-sec .acc-t .prac-num { font-size: 12px; line-height: 1; letter-spacing: 0; color: rgba(10,10,10,.4); font-variant-numeric: tabular-nums; transition: color .22s ease; flex: none; }
.prac-sec .acc-item.is-active .prac-num, .prac-sec .acc-item.open .prac-num, .prac-sec .acc-item:hover .prac-num { color: var(--ink); }
.prac-sec .acc-t b { font-size: clamp(22px, 1.9vw, 27px) !important; line-height: 1.08; letter-spacing: -0.05em; }
.prac-sec .acc-t .prac-desc { font-size: clamp(15px, 1.15vw, 17px) !important; line-height: 1.42 !important; letter-spacing: -0.02em; color: rgba(10,10,10,.6) !important; max-width: 54ch; padding-left: 36px; }
.prac-sec .acc-item .pm { width: 36px; height: 36px; margin-top: -2px; border: 1px solid rgba(10,10,10,.18); background: transparent; color: var(--ink); transform: none !important; transition: background .22s ease, border-color .22s ease, color .22s ease !important; }
.prac-sec .acc-item .pm::before, .prac-sec .acc-item .pm::after { width: 12px; transition: transform .28s cubic-bezier(.65,0,.35,1), opacity .28s ease; }
.prac-sec .acc-head:hover .pm, .prac-sec .acc-item.open .pm { background: var(--ink); color: #fff; border-color: var(--ink); }
.prac-sec .acc-item.open .pm::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.prac-sec .acc-head:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.prac-sec .acc-body { transition: grid-template-rows .32s cubic-bezier(.65,0,.35,1); }
.prac-sec .prac-inner { padding: 0 22px 22px 58px !important; }
.prac-sec .prac-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 28px; padding-top: 16px; border-top: 1px solid rgba(10,10,10,.08); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .3s cubic-bezier(.65,0,.35,1); }
.prac-sec .acc-item.open .prac-caps { opacity: 1; transform: none; transition-delay: .08s; }
.prac-sec .prac-cap-h { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.prac-sec .prac-cap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.prac-sec .prac-cap li { font-size: 14.5px; line-height: 1.4; letter-spacing: -0.015em; color: rgba(10,10,10,.66); }
/* entrance: short and quiet */
.js .prac-sec [data-reveal] { transform: translateY(14px); filter: none; transition: opacity .5s ease, transform .5s ease, background .22s ease, border-color .22s ease; }
.js .prac-sec [data-reveal].in { transform: none; }
@media (max-width: 809px) {
  .prac-sec .acc-head { padding: 16px !important; gap: 14px; }
  .prac-sec .acc-t b { font-size: 21px !important; }
  .prac-sec .acc-t .prac-desc { font-size: 15px !important; padding-left: 0; }
  .prac-sec .prac-title { gap: 10px; }
  .prac-sec .acc-item .pm { width: 36px; height: 36px; }
  .prac-sec .prac-inner { padding: 0 16px 18px !important; }
  .prac-sec .prac-caps { grid-template-columns: 1fr 1fr; gap: 16px; }
  .js .prac-sec [data-reveal] { transform: translateY(8px); }
}
@media (max-width: 420px) { .prac-sec .prac-caps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .prac-sec .acc-body, .prac-sec .prac-caps, .prac-sec .acc-item, .prac-sec .pm, .prac-sec .pm::before, .prac-sec .pm::after { transition: none !important; }
  .js .prac-sec [data-reveal] { transform: none !important; opacity: 1 !important; }
}
.prac-sec .acc-t .prac-title, .prac-sec .acc-t .prac-title b { color: var(--ink) !important; font-size: inherit; }
@media (max-width: 809px) { .prac-sec .prac-caps { grid-template-columns: 1fr 1fr !important; gap: 14px 16px; } .prac-sec .prac-cap li { font-size: 13.5px; } }

/* H02: single CTA, white and compact */
.approach-cta .btn.light { --h: 34px; font-size: 13px; }
@media (max-width: 809px) { .approach-cta .btn.light { --h: 40px; } }
/* H03: smaller descriptions → shorter cards */
.prac-sec .acc-t .prac-desc { font-size: clamp(14px, 1.02vw, 15px) !important; line-height: 1.4 !important; max-width: 64ch; }
.prac-sec .acc-head { padding-top: 17px !important; padding-bottom: 17px !important; }
.prac-sec .acc-t { gap: 6px; }
@media (max-width: 809px) { .prac-sec .acc-t .prac-desc { font-size: 14px !important; } }
/* H11: title uses the same type, size, layout and word effect as H02 */
body[data-page="home"] .persp-sec { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 18px; }
body[data-page="home"] .persp-sec .st-origin-head { align-items: center; gap: 14px; }
body[data-page="home"] .persp-sec .persp-title { margin: 0; font-size: clamp(40px, 4.4vw, 61px); line-height: 1.02; letter-spacing: -0.055em; max-width: 20ch; text-wrap: balance; }
body[data-page="home"] .persp-sec .st-origin-body { padding-top: 0; }
body[data-page="home"] .persp-sec .st-origin-body .mp-p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; letter-spacing: -0.025em; color: var(--ink-60); max-width: 56ch; margin-inline: auto; text-wrap: pretty; }
body[data-page="home"] .persp-sec .st-stats { width: 100%; text-align: left; margin-top: 28px; }
@media (max-width: 809px) {
  body[data-page="home"] .persp-sec { justify-items: start; text-align: left; }
  body[data-page="home"] .persp-sec .st-origin-head { align-items: flex-start; }
  body[data-page="home"] .persp-sec .persp-title { font-size: 40px; }
  body[data-page="home"] .persp-sec .st-origin-body .mp-p { font-size: 15px; margin-inline: 0; }
}

/* ===== Studio page v3 (Oct 2026): editorial redesign ===== */
.st3 .label { letter-spacing: 0; }
.st3-hero { padding-top: 40px; }
.st3-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 88px); align-items: end; margin-top: 18px; }
.st3-display { margin: 0; font-weight: 500; font-size: clamp(52px, 6.6vw, 108px); line-height: .95; letter-spacing: -0.065em; max-width: 13ch; text-wrap: balance; }
.st3-hero-side { display: flex; flex-direction: column; gap: 26px; padding-bottom: .5em; }
.st3-lead { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.42; letter-spacing: -0.03em; color: var(--ink); max-width: 40ch; }
.st3-h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -0.055em; max-width: 15ch; text-wrap: balance; }
.st3-p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; letter-spacing: -0.015em; color: rgba(10,10,10,.68); max-width: 54ch; }
/* origin */
.st3-origin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 88px); align-items: center; }
.st3-origin-img { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 78svh; background: #111; }
.st3-origin-img img { width: 100%; height: 100%; object-fit: cover; }
.st3-origin-txt { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.st3-stats { margin-top: clamp(28px, 3vw, 44px) !important; }
/* approach: sticky headline */
.st3-approach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: start; }
.st3-sticky { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .st3-sticky { position: sticky; top: calc(var(--nav-h, 52px) + 32px); } }
.st3-approach-body { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.st3-approach-body .st3-lead { font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.045em; max-width: 30ch; }
.st3-notes { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 560px; }
.st3-notes li { display: flex; gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.st3-notes li span { color: var(--ink-40); font-weight: 300; }
.st3-notes b { font-weight: 500; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -0.035em; }
/* how we work */
.st3-how-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.st3-how-head > div { display: flex; flex-direction: column; gap: 14px; }
.st3-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.st3-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: baseline; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); }
.st3-step .st3-n { grid-column: 1; grid-row: 1; font-size: 12px; color: var(--ink-40); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.st3-step h3 { grid-column: 1; grid-row: 1; margin: 0 0 0 44px; font-weight: 500; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -0.055em; transition: color .3s ease; }
.st3-step p { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; letter-spacing: -0.025em; color: rgba(10,10,10,.66); max-width: 44ch; transition: color .3s ease; }
.st3-steps.has-active .st3-step:not(.is-active) h3 { color: rgba(10,10,10,.38); }
.st3-steps.has-active .st3-step:not(.is-active) p { color: rgba(10,10,10,.5); }
.st3-step.is-active .st3-n { color: var(--ink); }
.st3-note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-60); max-width: 62ch; }
/* people */
.st3-people-h { margin-bottom: clamp(24px, 3vw, 40px); max-width: 18ch; }
.st3 .st3-founder { padding: 0 !important; max-width: none; margin: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); }
.st3 .st3-founder .founder-img { max-height: 70svh; }
.st3 .st3-founder .founder-img img { transition: filter .6s ease, transform .9s var(--ease-out); }
.st3 .st3-founder .founder-img:hover img { filter: grayscale(0); transform: scale(1.02); }
.st3 .st3-founder .founder-lead { max-width: 32ch; font-size: clamp(20px, 1.8vw, 26px); }
.st3 .st3-team { margin-top: clamp(28px, 3vw, 44px); }
/* network */
.st3-network { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 88px); align-items: center; }
.st3-network-txt { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.st3-more { font-size: 14px; }
.st3-ls { display: block; }
.st3-ls .ls-side-img { margin: 0; }
/* contact: dark card like the home */
.st3-cta .ls-cta-card.dark { background: var(--dark); color: #fff; padding: clamp(72px, 9vw, 136px) 24px; gap: 18px; }
.st3-cta .ls-cta-card.dark .ls-cta-txt { color: rgba(255,255,255,.72); font-size: clamp(16px, 1.3vw, 19px); }
.st3-cta .ls-cta-card.dark .ls-cta-title { font-size: clamp(44px, 6vw, 92px); }
body[data-page="studio"] main.st2 > section[data-section="S08"]:not([data-section="S01"]):not([data-section="S02"]):not(.x):not(.y) { padding-bottom: 72px !important; }
/* reveals on this page: short and quiet */
.js .st3 [data-reveal]:not([data-reveal="scale"]) { transform: translateY(14px); filter: none; }
.js .st3 [data-reveal].in { transform: none; }
@media (max-width: 1023px) and (min-width: 810px) {
  .st3-hero-grid, .st3-approach, .st3-how-head, .st3-network { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809px) {
  .st3-hero { padding-top: 20px; }
  .st3-hero-grid, .st3-origin, .st3-approach, .st3-how-head, .st3-network, .st3 .st3-founder { grid-template-columns: 1fr; row-gap: 22px; }
  .st3-display { font-size: 46px; }
  .st3-h2 { font-size: 34px; }
  .st3-origin-img { aspect-ratio: 4 / 5; max-height: none; }
  .st3-step { grid-template-columns: 1fr; row-gap: 8px; padding: 20px 0; }
  .st3-step h3 { grid-column: 1; grid-row: 1; font-size: 30px; margin-left: 40px; }
  .st3-step p { grid-column: 1; grid-row: 2; font-size: 16px; }
  .st3-cta .ls-cta-card.dark { padding: 56px 22px; }
  .st3-cta .ls-cta-card.dark .ls-cta-title { font-size: 44px; }
  .js .st3 [data-reveal]:not([data-reveal="scale"]) { transform: translateY(8px); }
  body[data-page="studio"] main.st2 > section[data-section="S08"]:not([data-section="S01"]):not([data-section="S02"]):not(.x):not(.y) { padding-bottom: 48px !important; }
}
@media (prefers-reduced-motion: reduce) { .st3-step, .st3-step * { transition: none !important; } }
/* neutralise legacy Studio S04 rules (old "cultural ecosystems" block) */
body[data-page="studio"] main.st3 > section.st3-approach[data-section="S04"] { display: grid !important; flex-direction: initial; align-items: start; text-align: left; gap: 0; column-gap: clamp(32px, 5vw, 88px); }
@media (max-width: 809px) { body[data-page="studio"] main.st3 > section.st3-approach[data-section="S04"] { grid-template-columns: 1fr; row-gap: 22px; } }
.st3-origin-img img { filter: grayscale(1); }

/* ===== Studio page v3.1 — UX/UI pass ===== */
/* full-width grid, aligned with header, footer and the home */
body[data-page="studio"] main.st3 > .wrap, body[data-page="studio"] main.st3 > section.wrap { max-width: none; }
.st3-kicker { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-60); }
/* hero: headline first, then text + index on one row */
.st3-hero { display: flex; flex-direction: column; gap: 18px; }
.st3-hero .st3-display { font-size: clamp(56px, 8.2vw, 132px); max-width: 15ch; line-height: .92; }
.st3-hero-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(12px, 2vw, 28px); padding-top: 22px; border-top: 1px solid var(--line); }
.st3-hero-row .st3-lead { max-width: 46ch; }
.st3-jump { border-top: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.st3-jump a { justify-content: flex-start !important; gap: 12px; padding: 11px 0 !important; transition: color .2s ease, padding .25s ease; }
.st3-jump a i { width: 18px; }
.st3-jump a:hover { padding-left: 0 !important; color: var(--ink-60); }
/* reel: cinematic, less scroll */
.st3 .st-reel-box { aspect-ratio: 21 / 9; max-height: 70svh; }
/* people: headline lives next to the founder */
.st3-founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: stretch; }
.st3-founder-img { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; background: #222; }
.st3-founder-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); transition: filter .6s ease, transform .9s var(--ease-out); }
.st3-founder-img:hover img { filter: grayscale(0); transform: scale(1.02); }
.st3-founder-txt { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: space-between; }
.st3-founder-card { width: 100%; max-width: 560px; background: var(--card); border-radius: var(--r-lg); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.st3-founder-name { margin: 2px 0 0; font-weight: 500; font-size: clamp(32px, 3vw, 46px); line-height: .98; letter-spacing: -0.055em; }
.st3-founder-role { margin: 0 0 6px; font-size: 14px; color: var(--ink-60); }
.st3-team-k { margin-top: clamp(28px, 3vw, 44px); margin-bottom: 12px; }
.st3 .st3-team { margin-top: 0 !important; }
/* how we work: the note becomes a visible callout */
.st3-note { margin: 20px 0 0 !important; padding: 16px 20px; background: var(--card); border-radius: var(--r-lg); font-size: 15px !important; color: var(--ink) !important; max-width: 720px !important; }
/* network: disciplines + compact partner card instead of the big black box */
.st3-network { align-items: start !important; }
.st3-network-side { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.st3-disc { background: var(--card); border-radius: var(--r-lg); padding: 20px 22px 22px; }
.st3-disc ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st3-disc li { font-size: 14px; letter-spacing: -0.02em; padding: 7px 12px; border-radius: var(--r-pill); background: var(--bg); }
.st3-partner { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 18px; background: var(--card); border-radius: var(--r-lg); padding: 10px; color: inherit; text-decoration: none; transition: background .2s ease; }
.st3-partner:hover { background: #fafafa; }
.st3-partner-logo { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #000; }
.st3-partner-logo img { width: 100%; height: 100%; object-fit: cover; }
.st3-partner-txt { display: flex; flex-direction: column; gap: 3px; }
.st3-partner-txt b { font-weight: 500; font-size: 22px; letter-spacing: -0.045em; }
.st3-partner-url { font-size: 13px; color: var(--ink-60); }
.st3-network-side .st3-more { margin-top: 10px; }
@media (max-width: 1023px) and (min-width: 810px) {
  .st3-founder { grid-template-columns: 1fr 1fr; }
  .st3-jump { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .st3-hero .st3-display { font-size: 46px; }
  .st3-hero-row { grid-template-columns: 1fr; row-gap: 18px; padding-top: 16px; }
  .st3-jump { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .st3-jump a { border: 0 !important; background: var(--card); border-radius: var(--r-pill); padding: 9px 14px !important; font-size: 14px; min-height: 40px; gap: 8px; }
  .st3-jump a i { width: auto; }
  .st3 .st-reel-box { aspect-ratio: 4 / 5; max-height: none; }
  .st3-founder { grid-template-columns: 1fr; row-gap: 18px; }
  .st3-founder-img { aspect-ratio: 4 / 5; max-height: none; }
  .st3-founder-txt { display: contents; }
  .st3-founder-txt .label { display: none; }
  .st3-founder .st3-h2 { order: -1; }
  .st3-founder-card { margin-top: 0; }
  .st3-partner { grid-template-columns: 104px 1fr; }
}
/* index as one ordered row of pills (desktop + mobile) */
.st3-jump { display: flex !important; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.st3-jump a { border: 0 !important; background: var(--card); border-radius: var(--r-pill); padding: 9px 14px !important; font-size: 14px; min-height: 40px; gap: 8px; }
.st3-jump a i { width: auto; color: var(--ink-40); }
.st3-jump a:hover { background: var(--ink); color: #fff; }
.st3-jump a:hover i { color: rgba(255,255,255,.6); }
@media (max-width: 809px) { .st3 .st-reel-box { aspect-ratio: 16 / 10; } }
.st3-jump { flex-direction: row !important; } .st3-jump a { width: auto !important; flex: 0 0 auto; }
/* H12 contact: no box, on the page background */
body[data-page="home"] .home-cta .ls-cta-card.home-cta-plain { background: transparent; color: var(--ink); padding: clamp(40px, 6vw, 96px) 0; gap: 18px; }
body[data-page="home"] .home-cta .home-cta-plain .ls-cta-title { font-size: clamp(44px, 6vw, 92px); }
body[data-page="home"] .home-cta .home-cta-plain .ls-cta-txt { color: var(--ink-60); font-size: clamp(16px, 1.3vw, 19px); }
@media (max-width: 809px) { body[data-page="home"] .home-cta .ls-cta-card.home-cta-plain { padding: 28px 0; } body[data-page="home"] .home-cta .home-cta-plain .ls-cta-title { font-size: 44px; } }
/* S02: book spread image instead of the reel (keeps its own 4:3 shape) */
.st3 .st-reel-box.st3-spread { margin: 0 auto; aspect-ratio: 1444 / 1089; width: min(100%, calc(84svh * 1444 / 1089)); max-height: none; background: #eee; }
.st3 .st3-spread img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 809px) { .st3 .st-reel-box.st3-spread { aspect-ratio: 1444 / 1089; width: 100%; } }
.st3 .st-reel-box.st3-spread { width: min(100%, 820px, calc(64svh * 1444 / 1089)); }
@media (max-width: 809px) { .st3 .st-reel-box.st3-spread { width: 100%; } }

/* ===== Studio v3.2: book cutout beside the origin text, N photo in the approach column ===== */
.st3-origin { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; }
.st3-origin-img.st3-book { aspect-ratio: 1324 / 893; max-height: none; background: transparent; border-radius: 0; overflow: visible; }
.st3-book img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(10,10,10,.14)) drop-shadow(0 2px 4px rgba(10,10,10,.08)) !important; }
.st3-origin-txt .st3-p { max-width: 44ch; }
.st3-approach-img { margin: 14px 0 0; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; max-height: 48svh; border-radius: var(--r-lg); overflow: hidden; background: #111; }
.st3-approach-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: grayscale(1); }
@media (min-width: 1024px) { .st3-sticky { max-height: calc(100svh - var(--nav-h, 52px) - 64px); } }
@media (max-width: 809px) {
  .st3-origin { grid-template-columns: 1fr !important; }
  .st3-book { margin: 0 -6px; }
  .st3-approach-img { aspect-ratio: 16 / 11; max-height: none; max-width: none; margin-top: 6px; }
}

/* ===== Studio v3.3: S04 / S05 / S06 rhythm, type scale and text–image balance ===== */
.st3 { --st3-gap: clamp(32px, 5vw, 88px); }
/* S04 approach: image + title left, statement on top and principles on the base line right */
body[data-page="studio"] main.st3 > section.st3-approach[data-section="S04"] { align-items: stretch; }
.st3-approach .st3-sticky { gap: 16px; }
.st3-approach-img { margin-top: 18px; max-width: 400px; max-height: 54svh; }
.st3-approach-body { justify-content: space-between; gap: 28px; padding-top: 34px; }
.st3-approach-body .st3-lead { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.12; letter-spacing: -0.05em; max-width: 22ch; }
.st3-approach-body > .st3-p { max-width: 50ch; }
.st3-notes { counter-reset: note; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 28px); margin: 0; max-width: none; border-top: 0; }
.st3-notes li { counter-increment: note; flex-direction: column; gap: 22px; padding: 16px 0 0; border-bottom: 0; border-top: 1px solid var(--ink); }
.st3-notes li span { font-size: 12px; font-variant-numeric: tabular-nums; }
.st3-notes li span::after { content: " " counter(note, decimal-leading-zero); }
.st3-notes b { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.2; max-width: 16ch; }
/* S05 how we work: steps share the 5/7 grid, softer inactive state, note on the content column */
.st3-how-head { margin-bottom: clamp(28px, 3vw, 44px); }
.st3-how-head > .st3-p { max-width: 46ch; }
.st3-step { column-gap: var(--st3-gap); align-items: center; padding: clamp(22px, 2.2vw, 30px) 0; transition: background .3s ease; }
.st3-step h3 { font-size: clamp(28px, 2.6vw, 40px); margin-left: 48px; }
.st3-step p { font-size: clamp(16px, 1.2vw, 18px); max-width: 42ch; }
.st3-steps.has-active .st3-step:not(.is-active) h3 { color: rgba(10,10,10,.5); }
.st3-steps.has-active .st3-step:not(.is-active) p { color: rgba(10,10,10,.6); }
.st3-how > .st3-note { margin: 24px 0 0 calc((100% - var(--st3-gap)) * 5 / 12 + var(--st3-gap)) !important; max-width: none !important; padding: 18px 22px; font-size: 15px !important; line-height: 1.5; }
/* S06 people: portrait and text at the same height, card right under the headline */
.st3-founder { align-items: center; }
.st3-founder-img { width: 100%; max-height: min(600px, 72svh); }
.st3-founder-txt { justify-content: center; gap: 18px; }
.st3-founder-card { margin-top: 10px; max-width: 540px; gap: 6px; }
.st3-founder-name { font-size: clamp(28px, 2.4vw, 38px); }
.st3-founder-card .st3-p { margin-top: 4px; }
.st3-team-k { margin-top: clamp(40px, 4vw, 64px); margin-bottom: 14px; }
.st3-team .member .role { font-size: 12px !important; line-height: 1.25; }
.st3-team .member .role b br, .st3-team .member .role b [data-k="ui.atNowdays"] { display: none; }
@media (max-width: 1023px) and (min-width: 810px) {
  .st3-notes { grid-template-columns: 1fr; gap: 0; }
  .st3-notes li { flex-direction: row; gap: 14px; padding: 14px 0; }
  .st3-how > .st3-note { margin-left: 0 !important; }
}
@media (max-width: 809px) {
  .st3-approach-body { padding-top: 0; gap: 18px; }
  .st3-approach-body .st3-lead { font-size: 25px; max-width: none; }
  .st3-approach-img { margin-top: 8px; max-width: none; max-height: none; aspect-ratio: 16 / 11; }
  .st3-notes { grid-template-columns: 1fr; gap: 0; margin-top: 4px; }
  .st3-notes li { flex-direction: row; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
  .st3-notes li:first-child { border-top-color: var(--ink); }
  .st3-notes li span { flex: 0 0 34px; }
  .st3-notes b { font-size: 17px; max-width: none; }
  .st3-step { padding: 18px 0; row-gap: 6px; align-items: start; }
  .st3-step h3 { font-size: 26px; margin-left: 40px; }
  .st3-step p { font-size: 15px; margin-left: 40px; }
  .st3-how > .st3-note { margin: 18px 0 0 !important; padding: 16px 18px; font-size: 14px !important; }
  .st3-founder-img { aspect-ratio: 1 / 1; max-height: none; }
  .st3-founder-img img { object-position: 50% 22%; }
  .st3-founder-card { margin-top: 0; }
  .st3-founder-name { font-size: 28px; }
  .st3-team-k { margin-top: 32px; }
  .st3 .st3-team.people-grid { display: flex !important; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .st3 .st3-team.people-grid::-webkit-scrollbar { display: none; }
  .st3 .st3-team .member { flex: 0 0 44%; scroll-snap-align: start; }
  .st3 .st3-team .member .role { font-size: 11px !important; top: 9px; left: 9px; right: 9px; }
  .st3 .st3-team .member .name { font-size: 17px; left: 10px; bottom: 9px; }
}
.st3-approach-body { justify-content: flex-start; }
.st3-approach-body > .st3-p { margin-top: -6px; }
.st3-approach-body .st3-notes { margin-top: auto; padding-top: 24px; }
.st3-notes li span { white-space: nowrap; display: inline-block; }
@media (max-width: 1023px) { .st3-approach-body .st3-notes { margin-top: 4px; padding-top: 0; } }
.st3-notes li span { display: block !important; width: auto !important; }
.st3-notes li { gap: 14px; }
@media (max-width: 809px) { .st3 .st3-team.people-grid { padding: 0 16px !important; scroll-padding-left: 16px; } }

/* ===== Studio v3.4: S04 as text left / photo right (alternates with S03 and S06) ===== */
body[data-page="studio"] main.st3 > section.st3-ap[data-section="S04"] { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; column-gap: var(--st3-gap) !important; align-items: stretch !important; }
.st3-ap-txt { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); min-width: 0; }
.st3-ap-head { display: flex; flex-direction: column; gap: 14px; }
.st3-ap-head .st3-h2 { max-width: 14ch; }
.st3-ap-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.st3-ap .st3-lead { margin: 0; font-weight: 500; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.22; letter-spacing: -0.045em; max-width: 22ch; color: var(--ink); }
.st3-ap-copy .st3-p { margin: 0; padding-top: 4px; max-width: 40ch; }
.st3-ap .st3-notes { margin: auto 0 0 !important; padding: 0 !important; display: block; border-top: 1px solid var(--ink); }
.st3-ap .st3-notes li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 0; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.st3-ap .st3-notes li span { font-size: 12px; color: var(--ink-40); }
.st3-ap .st3-notes b { font-size: clamp(18px, 1.5vw, 22px); max-width: none; line-height: 1.2; }
.st3-ap .st3-approach-img { margin: 0; width: 100%; max-width: none; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
.st3-ap .st3-approach-img img { position: static; object-position: 50% 40%; }
@media (min-width: 810px) { .st3-ap .st3-approach-img { aspect-ratio: auto; } }
@media (max-width: 1023px) and (min-width: 810px) {
  body[data-page="studio"] main.st3 > section.st3-ap[data-section="S04"] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important; }
  .st3-ap-copy { grid-template-columns: 1fr; row-gap: 14px; }
}
@media (max-width: 809px) {
  body[data-page="studio"] main.st3 > section.st3-ap[data-section="S04"] { grid-template-columns: 1fr !important; row-gap: 0 !important; }
  .st3-ap-txt { display: contents; }
  .st3-ap-head { order: 1; }
  .st3-ap .st3-approach-img { order: 2; height: auto; aspect-ratio: 4 / 3; margin: 20px 0 22px; }
  .st3-ap-copy { order: 3; grid-template-columns: 1fr; row-gap: 12px; }
  .st3-ap .st3-lead { font-size: 22px; max-width: none; }
  .st3-ap .st3-notes { order: 4; margin-top: 24px !important; }
  .st3-ap .st3-notes li { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0; border-top: 0 !important; }
  .st3-ap .st3-notes b { font-size: 17px; }
}
@media (min-width: 810px) {
  .st3-ap .st3-approach-img { position: relative; height: auto; min-height: 520px; }
  .st3-ap .st3-approach-img img { position: absolute !important; inset: 0; width: 100%; height: 100%; }
  .st3-ap .st3-notes { margin-top: auto !important; }
  .st3-ap-txt { padding-bottom: 2px; }
}

/* ===== Studio v3.5: S05 "People & process" (how we work + the people in one section) ===== */
.st3-anchor { display: block; position: relative; top: -80px; height: 0; }
.st3-pp .st3-how-head .st3-h2 { max-width: 16ch; }
.st3-pp-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--st3-gap); align-items: stretch; }
.st3-pp .st3-pp-img { position: relative; width: 100%; aspect-ratio: auto; height: 100%; min-height: 560px; max-height: none; margin: 0; }
.st3-pp .st3-pp-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.st3-pp-right { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 3vw, 40px); min-width: 0; }
.st3-pp .st3-steps { border-top: 1px solid var(--ink); }
.st3-pp .st3-step { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 32px); align-items: baseline; padding: clamp(18px, 1.8vw, 24px) 0; }
.st3-pp .st3-step .st3-n { grid-column: 1; grid-row: 1; }
.st3-pp .st3-step h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(26px, 2.3vw, 36px); }
.st3-pp .st3-step p { grid-column: 3; grid-row: 1; font-size: clamp(15px, 1.1vw, 17px); max-width: 34ch; }
.st3-pp .st3-pp-card { margin: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(16px, 2vw, 32px); row-gap: 4px; align-items: start; }
.st3-pp .st3-pp-card .st3-kicker, .st3-pp .st3-pp-card .st3-founder-name, .st3-pp .st3-pp-card .st3-founder-role { grid-column: 1; }
.st3-pp .st3-pp-card .st3-p { grid-column: 2; grid-row: 1 / span 3; margin: 0; font-size: 15px; max-width: 46ch; }
.st3-pp .st3-founder-name { font-size: clamp(26px, 2.2vw, 34px); }
.st3-pp .st3-team-k { margin-top: clamp(40px, 4vw, 64px); }
@media (max-width: 1023px) and (min-width: 810px) {
  .st3-pp-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .st3-pp .st3-step { grid-template-columns: 48px minmax(0, 1fr); row-gap: 6px; }
  .st3-pp .st3-step p { grid-column: 2; grid-row: 2; }
  .st3-pp .st3-pp-card { grid-template-columns: 1fr; }
  .st3-pp .st3-pp-card .st3-p { grid-column: 1; grid-row: auto; margin-top: 6px; }
}
@media (max-width: 809px) {
  .st3-pp-body { grid-template-columns: 1fr; row-gap: 0; }
  .st3-pp-right { display: contents; }
  .st3-pp .st3-steps { order: 1; }
  .st3-pp .st3-pp-img { order: 2; height: auto; min-height: 0; aspect-ratio: 1 / 1; margin-top: 28px; }
  .st3-pp .st3-pp-img img { object-position: 50% 22%; }
  .st3-pp .st3-pp-card { order: 3; margin-top: 6px; grid-template-columns: 1fr; }
  .st3-pp .st3-pp-card .st3-p { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .st3-pp .st3-step { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; padding: 16px 0; align-items: baseline; }
  .st3-pp .st3-step h3 { font-size: 26px; margin: 0; }
  .st3-pp .st3-step p { grid-column: 2; grid-row: 2; margin: 0; font-size: 15px; }
  .st3-pp .st3-founder-name { font-size: 28px; }
  .st3-pp .st3-team-k { margin-top: 32px; }
}
.st3-pp .st3-step { grid-template-columns: 64px minmax(0, .85fr) minmax(0, 1.15fr); }
/* the founder already leads the section: the team row shows the rest of the core team */
.st3-pp .st3-team .member:first-child { display: none; }
@media (min-width: 810px) { .st3-pp .st3-team.people-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 1023px) and (min-width: 810px) { .st3-pp .st3-step { grid-template-columns: 48px minmax(0, 1fr); } }
@media (max-width: 809px) { .st3-pp .st3-step { grid-template-columns: 40px minmax(0, 1fr); } }
@media (min-width: 1024px) { .st3-pp .st3-pp-img { min-height: 460px; } .st3-pp .st3-team .member { aspect-ratio: .92; } }

/* ===== Studio v3.6: S07 mirrored (network boxes left, text right) ===== */
@media (min-width: 810px) {
  body[data-page="studio"] main.st3 > section.st3-network { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; align-items: stretch !important; }
  .st3-network-side { order: -1; padding-top: 0; justify-content: flex-end; }
  .st3-network-txt { padding-bottom: 4px; }
  .st3-network-txt .st3-p { max-width: 52ch; }
  .st3-network-side .st3-more { margin-top: 12px; }
}
@media (max-width: 1023px) and (min-width: 810px) {
  body[data-page="studio"] main.st3 > section.st3-network { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 809px) {
  .st3-network-side { padding-top: 4px; }
  .st3-network-txt .st3-p { font-size: 15px; }
}
@media (min-width: 810px) { .st3-network-side { justify-content: flex-start; padding-top: 32px; } }

/* ===== Studio v3.7: mobile polish pass ===== */
@media (max-width: 809px) {
  /* hero: calmer title, tidy 2x2 index */
  .st3-hero .st3-display { font-size: clamp(40px, 11.6vw, 46px); line-height: .98; letter-spacing: -0.06em; }
  .st3-hero-row .st3-lead { font-size: 17px; line-height: 1.42; }
  .st3-jump { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
  .st3-jump a { width: 100% !important; min-height: 44px; justify-content: flex-start; }
  /* origin numbers: one card, divided rows */
  .st3-stats { gap: 0 !important; background: var(--card); border-radius: var(--r-lg); padding: 0 18px !important; }
  .st3-stats li { background: none !important; border-radius: 0; padding: 16px 0 !important; border-bottom: 1px solid var(--line); }
  .st3-stats li:last-child { border-bottom: 0; }
  .st3-stats b { font-size: 36px !important; }
  .st3-stats span:not([data-count]) { font-size: 13px; }
  /* body copy rhythm */
  .st3 .st3-p { font-size: 15px; line-height: 1.55; }
  .st3 .st3-h2 { font-size: 34px; line-height: 1.02; max-width: none; }
  /* tap targets */
  .st3-network-side .st3-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; }
  .st3-partner { min-height: 96px; }
  .st3-disc li { font-size: 13.5px; padding: 8px 12px; }
  /* team carousel: readable labels, peek of the next card */
  .st3 .st3-team .member { flex-basis: 46%; }
  .st3 .st3-team .member.join .small { font-size: 12px; line-height: 1.3; }
  .st3 .st3-team .member.join .name { font-size: 17px; }
  /* contact */
  .st3-cta .ls-cta-card.dark { padding: 44px 22px; }
  .st3-cta .ls-cta-card.dark .ls-cta-title { font-size: 40px; line-height: 1; }
}
@media (max-width: 374px) {
  .st3-jump { grid-template-columns: 1fr; }
  .st3 .st3-h2 { font-size: 30px; }
}
.st3 .st3-h2, .st3 .st3-display, .st3-cta .ls-cta-title, .st3 .st3-lead { text-wrap: balance; }
.st3 .st3-p, .st3-step p { text-wrap: pretty; }
@media (max-width: 809px) { .st3-cta .ls-cta-card.dark .ls-cta-title { font-size: 38px; } }

/* ===== Collab page: Normani Takes SP (normani-takes-sp.html) ===== */
.nts { --nts-gap: clamp(72px, 7vw, 112px); --nts-r: var(--r-lg); }
.nts figure { margin: 0; overflow: hidden; border-radius: var(--nts-r); background: #2a1a12; }
.nts figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.nts .nts-p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: rgba(10,10,10,.68); max-width: 46ch; text-wrap: pretty; }
.nts .label { display: inline-block; }
/* T02 opening */
.nts-open { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4.5vw, 80px); padding-top: 12px; align-items: stretch; }
.nts-open-img { height: clamp(560px, 86svh, 920px); }
.nts-open-img img { object-position: 50% 30%; }
.nts-open-txt { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.nts .nts-open-txt .proj-lead-txt { margin: 0; max-width: 24ch; text-wrap: balance; }
.nts-open-img2 { margin-top: auto !important; width: min(100%, 360px); aspect-ratio: 4 / 5; }
.nts-open-img2 img { object-position: 50% 40%; }
/* T03 the night */
.nts-night { padding-top: var(--nts-gap); display: grid; grid-template-columns: 1.375fr 1.494fr; gap: 6px; }
.nts-night figure:nth-child(1) { aspect-ratio: 850 / 618; }
.nts-night figure:nth-child(2) { aspect-ratio: 850 / 569; }
/* T04 faces */
.nts-faces { padding-top: var(--nts-gap); }
.nts-faces-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.nts-faces-head .proj-h2 { max-width: none; }
.nts-faces-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nts-faces-grid figure { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.nts-faces-grid img { object-position: 50% 25%; }
@media (hover: hover) { .nts-faces-grid figure:hover img, .nts-night figure:hover img { transform: scale(1.03); } }
/* T05 statement */
.nts-statement { padding-top: var(--nts-gap); text-align: center; }
.nts-big { margin: 0 auto; font-weight: 500; font-size: clamp(48px, 7vw, 116px); line-height: .92; letter-spacing: -0.065em; text-wrap: balance; }
.nts-big .soft { color: var(--ink-40); }
/* T06 backstage + music + credits */
.nts-close { padding-top: var(--nts-gap); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4.5vw, 80px); align-items: stretch; }
.nts-close-img { aspect-ratio: 846 / 1158; max-height: 86svh; }
.nts-close-img img { object-position: 50% 25%; }
.nts-close-txt { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.nts-k { margin: 0 0 14px; font-size: 12px; font-weight: 500; color: var(--ink-60); }
.nts-lineup { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: ln; }
.nts-lineup li { counter-increment: ln; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.05; letter-spacing: -0.055em; }
.nts-lineup li::before { content: "+ " counter(ln, decimal-leading-zero); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--ink-40); }
.nts-credits { margin: 0; border-top: 1px solid var(--ink); }
.nts-credits > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: -0.02em; }
.nts-credits dt { color: var(--ink-60); }
.nts-credits dd { margin: 0; font-weight: 500; text-align: right; }
.nts .proj-close { padding-top: var(--nts-gap); padding-bottom: 96px; }
@media (max-width: 1023px) and (min-width: 810px) {
  .nts-open, .nts-close { grid-template-columns: 1fr 1fr; }
  .nts-faces-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nts-faces-grid figure:nth-child(n+7) { display: none; }
}
@media (max-width: 809px) {
  .nts { --nts-gap: 48px; }
  .nts-open { grid-template-columns: 1fr; row-gap: 22px; padding-top: 4px; }
  .nts-open-img { height: auto; aspect-ratio: 4 / 5; }
  .nts-open-txt { gap: 16px; }
  .nts .nts-open-txt .proj-lead-txt { font-size: 23px; max-width: none; }
  .nts-open-img2 { width: 100%; margin-top: 8px !important; aspect-ratio: 1 / 1; }
  .nts-night { grid-template-columns: 1fr; gap: 6px; }
  .nts-faces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .nts-faces-head { margin-bottom: 18px; }
  .nts-big { font-size: 44px; }
  .nts-close { grid-template-columns: 1fr; row-gap: 28px; }
  .nts-close-img { max-height: none; aspect-ratio: 4 / 5; }
  .nts-close-txt { gap: 32px; }
  .nts-lineup li { grid-template-columns: 44px minmax(0, 1fr); font-size: 26px; padding: 12px 0; }
  .nts-credits > div { grid-template-columns: 1fr; gap: 2px; font-size: 14px; }
  .nts-credits dd { text-align: left; }
  .nts .proj-close { padding-bottom: 48px; }
}

/* Collabs grid: with an odd number of projects, the newest one is a full-width featured card */
.work-grid > .work-card:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.work-grid > .work-card:first-child:nth-last-child(odd) .media { aspect-ratio: 2.4; }
.work-grid > .work-card:first-child:nth-last-child(odd) .media img { object-position: 50% 30%; }
@media (max-width: 809px) { .work-grid > .work-card:first-child:nth-last-child(odd) .media { aspect-ratio: 1.45; } }
@media (min-width: 810px) {
  .nts-open-img { height: auto; min-height: clamp(560px, 80svh, 860px); position: relative; }
  .nts-open-img img { position: absolute; inset: 0; }
  .nts-open-img2 { width: min(100%, 320px); }
}
/* L03: the Nowdays / Landscape duo now opens the section (L02 reel removed), the lead sits below it */
.ls .ls-eco > .ls-duo:first-child { margin-top: 0; }
.ls .ls-duo + .ls-eco-lead { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 809px) { .ls .ls-eco { padding-top: 40px; } .ls .ls-duo + .ls-eco-lead { margin-top: 44px; } }

/* ===== Nowdays Studios × Landscape page v2 (landscape.html, .lsx) ===== */
.lsx { --lsx-gap: clamp(72px, 7vw, 112px); --lsx-col: clamp(28px, 4vw, 72px); }
.lsx a:focus-visible, .lsx button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.lsx .lsx-sec { padding-top: var(--lsx-gap); }
.lsx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(24px, 2.8vw, 40px); }
.lsx-head > div { display: flex; flex-direction: column; gap: 12px; }
.lsx-h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -0.055em; max-width: 18ch; text-wrap: balance; }
.lsx-p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: rgba(10,10,10,.7); max-width: 52ch; text-wrap: pretty; }
.lsx-k { margin: 0 0 14px; font-size: 12px; font-weight: 500; color: var(--ink-60); }
.lsx-n { font-size: 12px; color: var(--ink-40); font-variant-numeric: tabular-nums; }
/* hero */
.lsx-hero { padding-top: clamp(28px, 3.4vw, 56px); display: flex; flex-direction: column; gap: 18px; }
.lsx-title { margin: 0; font-weight: 500; font-size: clamp(44px, 6.2vw, 96px); line-height: .94; letter-spacing: -0.065em; max-width: 15ch; text-wrap: balance; }
.lsx-hero-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--lsx-col); align-items: end; margin-top: clamp(8px, 1.6vw, 24px); }
.lsx-hero-copy { display: flex; flex-direction: column; gap: 14px; }
.lsx-lead { margin: 0; font-weight: 500; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.32; letter-spacing: -0.035em; max-width: 40ch; text-wrap: pretty; }
.lsx-hero-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.lsx-aud { margin: 0; font-size: 14px; color: var(--ink-60); }
.lsx-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.lsx-ctas .btn { min-height: 48px; }
.lsx-btn-ghost { background: var(--card) !important; color: var(--ink) !important; }
.lsx-jump { display: flex; gap: 22px; padding-top: 10px; border-top: 1px solid var(--line); width: 100%; }
.lsx-jump a { font-size: 14px; color: var(--ink-60); text-decoration: none; padding: 6px 0; min-height: 36px; display: inline-flex; align-items: center; }
.lsx-jump a:hover { color: var(--ink); }
/* selected work */
.lsx-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lsx-work { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; background: var(--card); border-radius: var(--r-lg); padding: 8px 8px 18px; }
.lsx-work figure { margin: 0 0 8px; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #ddd; }
.lsx-work img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .lsx-work:hover img { transform: scale(1.03); } }
.lsx-work-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 0 8px; font-size: 12px; color: var(--ink-60); }
.lsx-award { color: var(--ink); background: var(--bg); border-radius: var(--r-pill); padding: 3px 9px; font-weight: 500; }
.lsx-work h3 { margin: 4px 0 0; padding: 0 8px; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; letter-spacing: -0.05em; }
.lsx-partner { margin: 0; padding: 0 8px; font-size: 14px; color: var(--ink-60); }
/* services */
.lsx-svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lsx-svc li { background: var(--card); border-radius: var(--r-lg); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.lsx-svc h3 { margin: auto 0 0; padding-top: 28px; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; letter-spacing: -0.05em; }
.lsx-svc p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(10,10,10,.68); max-width: 34ch; }
/* engagement models + process */
.lsx-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lsx-model { border-top: 1px solid var(--ink); padding: 16px 0 0; display: flex; flex-direction: column; gap: 10px; padding-right: clamp(8px, 2vw, 32px); }
.lsx-model h3 { margin: 6px 0 0; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; letter-spacing: -0.05em; }
.lsx-model p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(10,10,10,.68); max-width: 36ch; }
.lsx-process { margin-top: clamp(48px, 5vw, 72px); }
.lsx .lsx-steps { border-top: 1px solid var(--ink); }
.lsx .lsx-steps .st3-step { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--lsx-col); align-items: baseline; padding: clamp(18px, 1.8vw, 24px) 0; }
.lsx .lsx-steps .st3-step .st3-n { grid-column: 1; }
.lsx .lsx-steps .st3-step h3 { grid-column: 2; margin: 0; font-size: clamp(26px, 2.4vw, 36px); }
.lsx .lsx-steps .st3-step p { grid-column: 3; font-size: clamp(15px, 1.15vw, 17px); max-width: 46ch; }
/* origin */
.lsx-origin { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--lsx-col); align-items: center; }
.lsx-origin-img { margin: 0; }
.lsx-origin-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 28px rgba(10,10,10,.14)) drop-shadow(0 2px 4px rgba(10,10,10,.08)); }
.lsx-origin-txt { display: flex; flex-direction: column; gap: 16px; }
/* people + production */
.lsx-head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--lsx-col); align-items: end; }
.lsx-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lsx-team li { display: flex; flex-direction: column; gap: 2px; }
.lsx-team figure { margin: 0 0 10px; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: #ddd; }
.lsx-team img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.lsx-team b { font-weight: 500; font-size: 17px; letter-spacing: -0.035em; color: var(--ink); }
.lsx-team li > span { font-size: 13px; line-height: 1.35; color: rgba(10,10,10,.68); }
.lsx-prod { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--lsx-col); align-items: center; border-top: 1px solid var(--line); padding-top: clamp(24px, 2.6vw, 36px); }
.lsx-prod-line { margin: 0; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -0.04em; max-width: 34ch; text-wrap: pretty; }
.lsx-partner-card { min-height: 96px; }
.lsx-partner-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lsx-cta .ls-cta-title { max-width: 18ch; text-wrap: balance; }
@media (max-width: 1023px) and (min-width: 810px) {
  .lsx-work-grid, .lsx-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lsx-work:last-child { grid-column: 1 / -1; }
  .lsx-models { grid-template-columns: 1fr; gap: 24px; }
  .lsx-team { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
}
@media (max-width: 809px) {
  .lsx { --lsx-gap: 56px; }
  .lsx .label { display: none; }
  .lsx-hero { padding-top: 16px; gap: 14px; }
  .lsx-title { font-size: clamp(38px, 10.6vw, 44px); line-height: .98; }
  .lsx-hero-row { grid-template-columns: 1fr; row-gap: 20px; margin-top: 4px; }
  .lsx-lead { font-size: 18px; }
  .lsx-p { font-size: 15px; }
  .lsx-ctas { width: 100%; display: grid; grid-template-columns: 1fr; }
  .lsx-ctas .btn { justify-content: space-between; width: 100%; }
  .lsx-jump { justify-content: space-between; gap: 8px; }
  .lsx-head { margin-bottom: 18px; align-items: flex-end; }
  .lsx-h2 { font-size: 32px; }
  .lsx-work-grid { grid-template-columns: 1fr; gap: 8px; }
  .lsx-work figure { aspect-ratio: 16 / 10; }
  .lsx-work h3 { font-size: 24px; }
  .lsx-svc { grid-template-columns: 1fr; gap: 0; background: var(--card); border-radius: var(--r-lg); padding: 0 18px; }
  .lsx-svc li { background: none; border-radius: 0; padding: 16px 0; min-height: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 0; row-gap: 4px; }
  .lsx-svc li:last-child { border-bottom: 0; }
  .lsx-svc .lsx-n { grid-row: 1; padding-top: 6px; }
  .lsx-svc h3 { grid-column: 2; margin: 0; padding: 0; font-size: 22px; }
  .lsx-svc p { grid-column: 2; font-size: 14px; }
  .lsx-models { grid-template-columns: 1fr; gap: 20px; }
  .lsx-model h3 { font-size: 22px; }
  .lsx .lsx-steps .st3-step { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; padding: 16px 0; }
  .lsx .lsx-steps .st3-step h3 { font-size: 24px; margin: 0; }
  .lsx .lsx-steps .st3-step p { grid-column: 2; grid-row: 2; margin: 0; font-size: 15px; }
  .lsx-origin { grid-template-columns: 1fr; row-gap: 20px; }
  .lsx-origin-img { margin: 0 -6px; }
  .lsx-head-split { grid-template-columns: 1fr; row-gap: 12px; }
  .lsx-team { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .lsx-team::-webkit-scrollbar { display: none; }
  .lsx-team li { flex: 0 0 42%; scroll-snap-align: start; }
  .lsx-team b { font-size: 16px; }
  .lsx-prod { grid-template-columns: 1fr; row-gap: 18px; }
  .lsx-prod-line { font-size: 20px; }
  .lsx-cta .ls-cta-title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .lsx-work img, .lsx * { transition: none !important; } }
.lsx-head .arrow-link { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto; }
@media (max-width: 809px) { .lsx .lsx-team { padding: 0 16px 4px !important; scroll-padding-left: 16px; margin: 0 -16px !important; } }
/* header: 5 primary links (Studio · Collabs · News · About us · Contact) */
@media (min-width: 810px) { .nav { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; } .nav-links a { white-space: nowrap; } }
/* header: 4 primary links (Studio · Collabs · About us · Contact); News lives only in the hamburger menu */
@media (min-width: 810px) { .nav { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; } }

/* header logo = the opening wordmark "nowdays® studios"; top bar keeps 3 links: Studio · Collabs · About us */
.nav .logo { font-weight: 500; font-size: 17px; letter-spacing: -0.045em; white-space: nowrap; }
.nav .logo .reg { font-size: .5em; vertical-align: top; position: relative; top: .1em; margin-left: .02em; }
@media (min-width: 810px) { .nav { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; } }

/* H08 v4: Human Academy lead card follows its portrait photo (1206×1476, no crop); two compact cards beside it */
.nr-grid { gap: 6px; }
.nr-grid .news-card { min-height: 0; gap: 12px; padding: 8px; justify-content: flex-start; border-radius: var(--r-lg); }
.nr-grid .news-card .thumb { width: 100%; height: auto; border-radius: var(--r-md); overflow: hidden; }
.nr-grid .news-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.nr-grid .news-card > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.nr-grid .news-card h3 { margin: 2px 0 0; font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
.nr-grid .news-card p { margin: 0; color: rgba(10,10,10,.62); line-height: 1.4; }
.nr-grid .news-card .micro { font-size: 11.5px; line-height: 1.3; }
.nr-grid .news-card:not(:first-child) .plus { display: none !important; }
.nr-grid .news-card:first-child .thumb { aspect-ratio: 1206 / 1476; }
.nr-grid .news-card:first-child .thumb img { object-position: 50% 50%; }
.nr-grid .news-card:first-child h3 { font-size: clamp(24px, 2vw, 32px); line-height: 1.02; letter-spacing: -0.05em; }
.nr-grid .news-card:first-child p { font-size: 14.5px; }
.nr-grid .news-card:first-child > div:last-child { padding: 2px 6px 6px; }
@media (min-width: 1024px) {
  .nr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .nr-grid .news-card:first-child { grid-row: 1 / span 2; }
  .nr-grid .news-card:not(:first-child) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .nr-grid .news-card:not(:first-child) .thumb { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .nr-grid .news-card:not(:first-child) > div:last-child { justify-content: space-between; padding: 10px 14px 10px 0; gap: 8px; }
  .nr-grid .news-card:not(:first-child) .nr-txt { display: flex; flex-direction: column; gap: 8px; }
  .nr-grid .news-card:not(:first-child) h3 { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; letter-spacing: -0.05em; margin-top: auto; }
  .nr-grid .news-card:not(:first-child) p { font-size: 14.5px; max-width: 34ch; }
}
@media (min-width: 810px) and (max-width: 1023px) {
  .nr-grid { grid-template-columns: 1fr 1fr; }
  .nr-grid .news-card:first-child { grid-row: 1 / span 2; }
  .nr-grid .news-card:not(:first-child) .thumb { aspect-ratio: 16 / 10; }
  .nr-grid .news-card:not(:first-child) > div:last-child { padding: 0 6px 6px; }
  .nr-grid .news-card:not(:first-child) h3 { font-size: 19px; }
  .nr-grid .news-card:not(:first-child) p { font-size: 13.5px; }
}
@media (max-width: 809px) {
  .nr-grid { grid-template-columns: 1fr; gap: 6px; }
  .nr-grid .news-card:first-child { flex-direction: column; align-items: stretch; padding: 8px 8px 16px; gap: 12px; }
  .nr-grid .news-card:first-child .thumb { flex: none; width: 100%; aspect-ratio: 4 / 5; }
  .nr-grid .news-card:first-child > div:last-child { padding: 0 6px; }
  .nr-grid .news-card:first-child h3 { font-size: 24px; line-height: 1.05; }
  .nr-grid .news-card:first-child p { display: block; font-size: 14px; }
  .nr-grid .news-card:not(:first-child) { flex-direction: row; align-items: center; gap: 14px; padding: 8px; }
  .nr-grid .news-card:not(:first-child) .thumb { flex: 0 0 96px; width: 96px; aspect-ratio: 1; }
  .nr-grid .news-card:not(:first-child) > div:last-child { gap: 3px; padding-right: 6px; }
  .nr-grid .news-card:not(:first-child) h3 { font-size: 17px; line-height: 1.15; }
  .nr-grid .news-card:not(:first-child) p { display: block; font-size: 13px; }
}
@media (min-width: 1024px) {
  .nr-grid { grid-template-rows: 1fr 1fr; }
  .nr-grid .news-card:not(:first-child) .thumb { position: relative; height: auto; min-height: 0; }
  .nr-grid .news-card:not(:first-child) .thumb img { position: absolute; inset: 0; }
}
@media (min-width: 810px) and (max-width: 1023px) { .nr-grid { grid-template-rows: auto auto; } }
/* Studio (lsx) mobile: no CTA buttons in the opening section */
@media (max-width: 809px) { .lsx-hero .lsx-ctas { display: none; } .lsx-hero-side { gap: 10px; } }
/* H13: Nowdays film between Practices (H03) and Perspective (H11); full frame, no crop */
.nd-film { padding-block: 0; }
.nd-film-box { margin: 0 auto; width: min(100%, calc(82svh * 1440 / 1068)); aspect-ratio: 1440 / 1068; height: auto; max-height: none; border-radius: var(--r-lg); overflow: hidden; background: #1a1a1a; }
.nd-film-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 809px) { .nd-film-box { width: 100%; border-radius: var(--r-md); } }
/* hero glide: the centred mark stays above the video while it travels to the top bar */
.hero-min .hero-center { z-index: 101; }
.hero-min .hero-mark { will-change: transform; }
.has-hero .nav .logo { transition: opacity .25s ease; }
.has-hero .nav.at-top .logo { transform: none !important; }
/* spacing pass 2026-10-28: even rhythm before the film and the closing contact blocks */
.nd-film { margin-top: -20px; }
@media (max-width: 809px) { .nd-film { margin-top: -10px; } }
body[data-page="home"] .home-cta .ls-cta-card.home-cta-plain { padding-top: clamp(0px, 1vw, 12px); }
.lsx-cta.ls-cta { padding-top: clamp(20px, 2.4vw, 36px) !important; }
body[data-page="studio"] main.st2 > section.st3-cta[data-section="S08"] { padding-top: clamp(16px, 2vw, 32px) !important; }
@media (max-width: 809px) { .lsx-cta.ls-cta { padding-top: 16px !important; } body[data-page="studio"] main.st2 > section.st3-cta[data-section="S08"] { padding-top: 8px !important; } }
.lsx-cta.ls-cta { padding-top: clamp(48px, 4.4vw, 64px) !important; }
@media (max-width: 809px) { .lsx-cta.ls-cta { padding-top: 36px !important; } }
body[data-page="home"] .home-cta .home-cta-plain .ls-cta-title { text-wrap: balance; }
@media (max-width: 809px) { body[data-page="home"] .home-cta .home-cta-plain .ls-cta-title { font-size: 40px; } }
/* H13 smaller (2026-10-28) */
.nd-film-box { width: min(100%, 640px, calc(52svh * 1440 / 1068)) !important; }
@media (max-width: 809px) { .nd-film-box { width: 72% !important; } }
/* L04 v2: photo beside "How we work" — image column left, heading + 3 models as rows right */
.lsx-how-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--lsx-col); align-items: stretch; }
.lsx-how-img { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; background: #111; min-height: 460px; }
.lsx-how-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; filter: grayscale(1); transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .lsx-how-img:hover img { transform: scale(1.03); } }
.lsx-how-main { display: flex; flex-direction: column; min-width: 0; }
.lsx-how-main .lsx-head { margin-bottom: clamp(20px, 2.4vw, 32px); }
.lsx-how .lsx-models { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); margin-top: auto; }
.lsx-how .lsx-model { display: grid; grid-template-columns: 40px minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(16px, 2vw, 28px); align-items: baseline; border-top: 0; border-bottom: 1px solid var(--line); padding: clamp(18px, 1.8vw, 24px) 0; }
.lsx-how .lsx-model h3 { margin: 0; }
.lsx-how .lsx-model p { max-width: 40ch; }
@media (max-width: 1023px) and (min-width: 810px) {
  .lsx-how-top { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .lsx-how .lsx-model { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .lsx-how .lsx-model p { grid-column: 2; }
}
@media (max-width: 809px) {
  .lsx-how-top { grid-template-columns: 1fr; row-gap: 0; }
  .lsx-how-main { display: contents; }
  .lsx-how-main .lsx-head { order: 1; margin-bottom: 18px; }
  .lsx-how-img { order: 2; min-height: 0; aspect-ratio: 4 / 3; margin-bottom: 20px; border-radius: var(--r-md); }
  .lsx-how .lsx-models { order: 3; margin-top: 0; }
  .lsx-how .lsx-model { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; padding: 16px 0; }
  .lsx-how .lsx-model p { grid-column: 2; }
}
/* H11 v2: Perspective + Nowdays film merged (film left, statement right, numbers below) */
body[data-page="home"] .persp2 { display: block; text-align: left; }
.persp2-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: center; }
.persp2-film { margin: 0; aspect-ratio: 1440 / 1068; border-radius: var(--r-lg); overflow: hidden; background: #1a1a1a; }
.persp2-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.persp2-txt { display: flex; flex-direction: column; gap: 20px; }
body[data-page="home"] .persp2 .st-origin-head { align-items: flex-start; }
body[data-page="home"] .persp2 .persp-title { text-align: left; max-width: 14ch; }
body[data-page="home"] .persp2 .st-origin-body .mp-p { margin-inline: 0; max-width: 50ch; text-align: left; }
body[data-page="home"] .persp2 .st-stats { margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 1023px) and (min-width: 810px) { .persp2-top { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (max-width: 809px) {
  .persp2-top { grid-template-columns: 1fr; row-gap: 0; }
  .persp2-txt { display: contents; }
  body[data-page="home"] .persp2 .st-origin-head { order: 1; margin-bottom: 14px; }
  body[data-page="home"] .persp2 .st-origin-body { order: 2; margin-bottom: 20px; }
  .persp2-film { order: 3; border-radius: var(--r-md); }
  body[data-page="home"] .persp2 .st-stats { margin-top: 20px; }
}
/* Studio people: same treatment as the home team (B&W, colour + slight zoom on hover) */
.lsx-team figure img { filter: grayscale(1); transition: filter .7s, transform 1.1s var(--ease-out); }
@media (hover: hover) { .lsx-team li:hover figure img { filter: grayscale(0); transform: scale(1.05); } }

/* ===== Contact v2 (K01 info + form card, K02 book spread) ===== */
.kc-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: start; padding-top: clamp(32px, 4vw, 64px); }
.kc-info { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--nav-h, 52px) + 32px); }
.kc-title { margin: 0; font-weight: 500; font-size: clamp(56px, 7vw, 112px); line-height: .9; letter-spacing: -0.065em; }
.kc-lead { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.32; letter-spacing: -0.035em; max-width: 30ch; }
.kc-lead .soft { color: var(--ink-40); }
.kc-direct { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.kc-k { margin: 0; font-size: 12px; color: var(--ink-60); }
.kc-mail { font-weight: 500; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.045em; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid; align-self: flex-start; line-height: 1.15; }
.kc-city { margin: 6px 0 0; font-size: 14px; color: var(--ink-60); }
.kc-social { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.kc-social a { min-height: 36px; display: inline-flex; align-items: center; }
.kc-card.form-card { max-width: none; width: 100%; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-xl, 22px); }
.kc-form { display: flex; flex-direction: column; gap: 18px; }
.kc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kc-field { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.kc-field > span, .kc-field legend { font-size: 13px; font-weight: 500; color: var(--ink); padding: 0; }
.kc-field input, .kc-field textarea { font: inherit; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 10px; padding: 13px 14px; width: 100%; transition: border-color .2s, background .2s; resize: vertical; }
.kc-field input::placeholder, .kc-field textarea::placeholder { color: rgba(10,10,10,.38); }
.kc-field input:focus, .kc-field textarea:focus { outline: none; background: #fff; border-color: var(--ink); }
.kc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.kc-chip { position: relative; cursor: pointer; }
.kc-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.kc-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--bg); font-size: 14px; color: var(--ink); transition: background .2s, color .2s; }
.kc-chip:hover span { background: #e9e9e9; }
.kc-chip input:checked + span { background: var(--ink); color: #fff; }
.kc-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.kc-submit { align-self: stretch; justify-content: space-between; min-height: 52px; margin-top: 4px; }
.kc-legal { margin: -6px 0 0; font-size: 12px; color: var(--ink-60); }
.kc-ok { display: none; flex-direction: column; gap: 6px; padding: 40px 4px; }
.kc-ok b { font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.05em; }
.kc-ok span { color: var(--ink-60); }
.kc-card.sent .kc-ok { display: flex; }
.kc-book { padding-top: clamp(64px, 6vw, 96px); padding-bottom: clamp(48px, 5vw, 80px); }
.kc-book figure { margin: 0 auto; max-width: 1180px; aspect-ratio: 1444 / 1089; border-radius: var(--r-lg); overflow: hidden; background: #e8e8e6; }
.kc-book img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px) and (min-width: 810px) { .kc-hero { grid-template-columns: 1fr 1fr; } }
@media (max-width: 809px) {
  .kc-hero { grid-template-columns: 1fr; row-gap: 28px; padding-top: 16px; }
  .kc-info { position: static; gap: 14px; }
  .kc-title { font-size: 56px; }
  .kc-lead { font-size: 18px; }
  .kc-direct { margin-top: 6px; }
  .kc-mail { font-size: 24px; }
  .kc-row { grid-template-columns: 1fr; }
  .kc-card.form-card { padding: 20px 16px; border-radius: var(--r-lg); }
  .kc-book { padding-top: 48px; padding-bottom: 40px; }
  .kc-book figure { border-radius: var(--r-md); }
}
.kc .label::before { content: none !important; display: none !important; } .kc .label { padding-left: 0 !important; }
.kc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kc-err { margin: -6px 0 0; font-size: 13px; color: #8e1b1b; }
.kc-submit[disabled] { opacity: .6; pointer-events: none; }
/* contact: no social links; even spacing between the email block and the form card */
.kc-direct { padding-bottom: 0; }
@media (max-width: 809px) { .kc-hero { row-gap: 32px; } .kc-direct { margin-top: 10px; padding-top: 16px; } }
/* L04 mobile: image sizes itself (robust on iOS Safari) */
@media (max-width: 809px) {
  .lsx-how-img { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }
  .lsx-how-img img { position: static !important; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
}

/* External press cards (News): open the article in a new tab */
.news-card.ext .plus { font-size: 10px; }
.news-card.ext:hover .plus { transform: translate(2px,-2px); }

/* ---------- News page (redesign 2026-10-28): same hero as Collabs, Stories grid, Press list ---------- */
body[data-page="news"] .wk-hero { display: grid; grid-template-columns: auto minmax(0, 500px); column-gap: clamp(32px, 3.6vw, 56px); justify-content: start; align-items: end; padding-top: 28px !important; padding-bottom: 40px !important; }
body[data-page="news"] .wk-title { margin: 0; font-size: clamp(64px, 8.4vw, 128px); line-height: .88; }
body[data-page="news"] .wk-intro { display: flex; flex-direction: column; gap: 12px; max-width: 470px; padding-bottom: .55em; }
body[data-page="news"] .wk-lead { margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.42; letter-spacing: -0.02em; color: rgba(10,10,10,.72); text-wrap: pretty; }
.nw-sec { padding-top: calc(var(--gap-y, 96px) / 2); padding-bottom: calc(var(--gap-y, 96px) / 2); }
.nw-sec[data-section="N02"] { padding-top: 16px; }
.nw-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.nw-title { font-size: var(--fs-sec); font-weight: 500; line-height: .98; letter-spacing: -0.055em; margin: 0; }
.nw-sub { margin: 0; max-width: 36ch; font-size: var(--fs-small); color: var(--ink-60); text-align: right; padding-bottom: .3em; }
/* Stories: feature 2x2 on the left, two cards stacked right, then a row of three */
.nw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.nw-grid .news-card.feature { grid-column: span 2; grid-row: span 2; min-height: 0; }
.nw-grid .news-card:not(.feature) { padding: 10px 10px 20px; gap: 16px; }
.nw-grid .news-card:not(.feature) .thumb { aspect-ratio: 16 / 10; }
.nw-grid .news-card:not(.feature) > div:last-child { padding: 0 8px; display: flex; flex-direction: column; gap: 6px; }
.nw-grid .news-card:not(.feature) h3 { margin: 0; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.12; }
.nw-grid .news-card:not(.feature) p { margin: 0; font-size: 14px; line-height: 1.45; }
.nw-grid .news-card:not(.feature) p:empty { display: none; }
.nw-grid .news-card .micro { line-height: 1.3; }
.nw-grid .news-card.feature .inner { padding: 28px; }
.nw-grid .news-card.feature h3 { font-size: clamp(30px, 3.2vw, 48px); line-height: .98; margin: 10px 0 10px; }
/* Press: list of external stories */
.nw-press { display: flex; flex-direction: column; gap: var(--gap); }
.nw-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 40px; align-items: center; gap: 28px; background: var(--card); border-radius: var(--r-lg); padding: 10px 24px 10px 10px; transition: background .4s; }
.nw-row:hover { background: #fafafa; }
.nw-thumb { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.nw-row:hover .nw-thumb img { transform: scale(1.06); }
.nw-thumb img[src*="thaina-portrait"] { object-position: 50% 25%; }
.nw-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nw-txt h3 { margin: 0; font-weight: 500; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.08; letter-spacing: -0.045em; }
.nw-txt p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-60); max-width: 60ch; }
.nw-go { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 15px; transition: transform .5s var(--ease-out); }
.nw-row:hover .nw-go { transform: translate(3px, -3px); }
@media (max-width: 809px) {
  body[data-page="news"] .wk-hero { grid-template-columns: 1fr; row-gap: 16px; padding-top: 20px !important; padding-bottom: 28px !important; }
  body[data-page="news"] .wk-title { font-size: 60px; }
  body[data-page="news"] .wk-intro { padding-bottom: 0; }
  body[data-page="news"] .wk-lead { font-size: 16px; line-height: 1.45; }
  .nw-head { flex-direction: column; align-items: start; gap: 8px; margin-bottom: 18px; }
  .nw-sub { text-align: left; padding: 0; }
  .nw-grid { display: flex; flex-direction: column; gap: var(--gap); }
  .nw-grid .news-card.feature { min-height: 400px; }
  .nw-grid .news-card.feature .inner { padding: 20px; }
  .nw-grid .news-card.feature h3 { font-size: 32px; }
  .nw-grid .news-card:not(.feature) { flex-direction: row; align-items: center; gap: 14px; padding: 8px; }
  .nw-grid .news-card:not(.feature) .thumb { flex: 0 0 104px; width: 104px; aspect-ratio: 1; }
  .nw-grid .news-card:not(.feature) > div:last-child { padding: 0 6px 0 0; gap: 3px; }
  .nw-grid .news-card:not(.feature) h3 { font-size: 17px; line-height: 1.15; }
  .nw-grid .news-card:not(.feature) p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .nw-grid .news-card:not(.feature) .plus { display: none !important; }
  .nw-row { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 8px 14px 8px 8px; }
  .nw-thumb { aspect-ratio: 1; }
  .nw-txt h3 { font-size: 17px; line-height: 1.15; }
  .nw-txt p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .nw-go { display: none; }
}

/* Preview edits 2026-10-28: Studio L02/L03 spacing (desktop 41/0 and 37/40; mobile same proportion) */
body[data-page="project"] .lsx-workfeed[data-section="L02"] { padding-top: 80px !important; padding-bottom: 0 !important; }
body[data-page="project"] [data-section="L05"] { padding-top: 40px !important; }
body[data-page="project"] .lsx-services[data-section="L03"] { padding-top: 37px !important; padding-bottom: 40px !important; }
@media (max-width: 809px) {
  body[data-page="project"] .lsx-workfeed[data-section="L02"] { padding-top: 48px !important; }
  body[data-page="project"] [data-section="L05"] { padding-top: 24px !important; }
  body[data-page="project"] .lsx-services[data-section="L03"] { padding-top: 26px !important; padding-bottom: 24px !important; }
}
/* News without the hero lead / Stories title: hero sits directly above the grid */
body[data-page="news"] .wk-hero { display: block; }
body[data-page="news"] .nw-sec[data-section="N02"] { padding-top: 0; }

/* L04 process: steps on the left, PROCESS steel box on the right (desktop); on mobile the box sits between the models and the steps */
.lsx-process { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 300px); column-gap: clamp(40px, 5vw, 88px); align-items: center; }
.lsx-process .lsx-steps { grid-column: 1; grid-row: 1; }
.lsx-proc-img { grid-column: 2; grid-row: 1; margin: 0; }
.lsx-proc-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); }
.lsx .lsx-process .lsx-steps .st3-step { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr); padding: clamp(26px, 2.6vw, 38px) 0; }
@media (max-width: 1023px) and (min-width: 810px) { .lsx-process { grid-template-columns: minmax(0, 1fr) 200px; column-gap: 36px; } .lsx .lsx-process .lsx-steps .st3-step { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; } .lsx .lsx-process .lsx-steps .st3-step p { grid-column: 2; grid-row: 2; margin: 0; } }
@media (max-width: 809px) {
  .lsx-process { display: block; margin-top: 40px; }
  .lsx-proc-img { width: min(56%, 230px); margin: 0 auto 32px; }
  .lsx .lsx-process .lsx-steps .st3-step { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
}

/* ---------- Talk page (human-academy-talks.html), 2026-11-03 ---------- */
body[data-slug="human-academy-talks"] main { padding-top: var(--nav-h, 64px); }
.talk-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; padding-top: 32px; padding-bottom: 40px; }
.talk-title h1 { margin: 12px 0 0; font-weight: 500; font-size: clamp(44px, 5.6vw, 88px); line-height: .94; letter-spacing: -0.06em; text-wrap: balance; }
.talk-side { display: flex; flex-direction: column; gap: 24px; padding-bottom: 6px; }
.talk-lead { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -0.035em; color: var(--ink); text-wrap: pretty; }
.talk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid rgba(10,10,10,.14); }
.talk-meta > div { padding: 12px 0; border-bottom: 1px solid rgba(10,10,10,.14); }
.talk-meta dt { font-size: 12px; color: var(--ink-60); margin-bottom: 2px; }
.talk-meta dd { margin: 0; font-size: 15px; letter-spacing: -0.02em; }
.talk-video { padding-bottom: 0; }
.talk-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl, 18px); overflow: hidden; background: #000; isolation: isolate; }
.talk-player img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .5s; }
.talk-player:hover img { transform: scale(1.02); filter: brightness(.88); }
.talk-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.talk-play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 14px; padding: clamp(18px, 2.4vw, 32px); color: #fff; font-size: 16px; letter-spacing: -0.02em; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); border: 0; cursor: pointer; text-align: left; }
.talk-btn { width: clamp(56px, 5vw, 76px); height: clamp(56px, 5vw, 76px); border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; transition: transform .5s var(--ease-out); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.talk-btn::before { content: ""; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--ink); }
.talk-play:hover .talk-btn, .talk-play:focus-visible .talk-btn { transform: scale(1.08); }
.talk-play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.talk-ep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; padding-top: 80px; padding-bottom: 0; }
.talk-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: calc(var(--nav-h, 64px) + 16px); }
.talk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.talk-body { display: flex; flex-direction: column; padding-top: 4px; }
.talk-k { margin: 0 0 14px; font-size: 12px; font-weight: 500; color: var(--ink-60); }
.talk-p { margin: 0 0 36px; font-size: clamp(22px, 2vw, 30px); line-height: 1.18; letter-spacing: -0.045em; color: var(--ink); text-wrap: pretty; }
.talk-topics { list-style: none; margin: 0 0 36px; padding: 0; border-top: 1px solid var(--ink); }
.talk-topics li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 22px 0; border-bottom: 1px solid rgba(10,10,10,.14); }
.talk-n { grid-row: 1 / span 2; font-size: 12px; color: var(--ink-60); padding-top: 8px; }
.talk-topics h3 { margin: 0; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; letter-spacing: -0.05em; }
.talk-topics p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-60); max-width: 44ch; }
.talk-yt { align-self: flex-start; }
.talk-next { padding-top: 80px; padding-bottom: 40px; }
.talk-next .next-card { height: clamp(160px, 16vw, 220px); }
@media (max-width: 809px) {
  .talk-head { grid-template-columns: 1fr; row-gap: 22px; padding-top: 20px; padding-bottom: 24px; }
  .talk-title h1 { font-size: 44px; line-height: .96; }
  .talk-side { gap: 18px; padding: 0; }
  .talk-lead { font-size: 18px; }
  .talk-player { border-radius: var(--r-lg); }
  .talk-play { padding: 14px; font-size: 14px; gap: 10px; }
  .talk-btn { width: 52px; height: 52px; }
  .talk-btn::before { border-width: 8px 0 8px 13px; margin-left: 3px; }
  .talk-ep { grid-template-columns: 1fr; padding-top: 40px; row-gap: 28px; }
  .talk-photo { position: relative; top: 0; aspect-ratio: 4 / 5; }
  .talk-p { font-size: 22px; margin-bottom: 24px; }
  .talk-topics { margin-bottom: 28px; }
  .talk-topics li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
  .talk-topics h3 { font-size: 22px; }
  .talk-topics p { font-size: 14px; }
  .talk-yt { align-self: stretch; justify-content: center; }
  .talk-next { padding-top: 48px; padding-bottom: 24px; }
  .talk-next .next-card { height: 150px; }
}
/* talk player: centered play button only (the label stays for screen readers) so nothing covers the episode artwork */
.talk-play { align-items: center; justify-content: center; padding: 0; background: rgba(0,0,0,.08); }
.talk-play > span:not(.talk-btn) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.talk-btn { width: clamp(64px, 6vw, 92px); height: clamp(64px, 6vw, 92px); }
@media (max-width: 809px) { .talk-btn { width: 56px; height: 56px; } }
/* L04 team photo (2026-11-03): ceiling and floor trimmed in the file; keep everyone in frame on desktop and mobile */
.lsx-how-img img[src*="studio-team-sofa"] { object-position: 50% 45%; }
@media (max-width: 809px) { .lsx-how-img img[src*="studio-team-sofa"] { aspect-ratio: 1 / 1 !important; object-position: 50% 50%; } }

/* Preview edit 2026-11-03: Studio L04 top spacing on mobile 56 → 24px */
@media (max-width: 809px) { body[data-page="project"] [data-section="L04"] { padding-top: 24px !important; } }