/* ==========================================================================
   KWIBA® — site styles
   Inspired by The KWIBA® Workbook 26: Lausanne 300, two-tone type,
   hairline rules, a two-column grid split at ~46%.
   White by default; dark mode is an opt-in theme (html[data-theme="dark"]).
   ========================================================================== */

@font-face {
  font-family: "TWK Lausanne";
  src: url("../assets/fonts/Lausanne.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Theme — light (default) */
  --bg: #ffffff;
  --fg: #1a1a1a;
  --fg-2: #3a3a3a;
  --mute: #999999;
  --surface: #f5f6f8;
  --rule: #e0e0e0;
  --invert-bg: #1a1a1a;
  --invert-fg: #ececec;

  --behance: #2c5aa0;
  --behance-ink: #d7e3f4;

  /* Grid */
  --margin: clamp(16px, 2.85vw, 48px);
  --split: 46.6%;
  --col-gap: clamp(20px, 2.6vw, 44px);
  --section: clamp(80px, 10vw, 170px);

  /* Type scale */
  --t-micro: clamp(12px, 0.82vw, 13px);
  --t-small: clamp(13px, 0.95vw, 14px);
  --t-body: clamp(15px, 1.1vw, 17px);
  --t-lead: clamp(19px, 1.7vw, 28px);
  --t-h3: clamp(24px, 2.25vw, 38px);
  --t-h2: clamp(33px, 3.95vw, 66px);
  --t-hero: clamp(44px, 7vw, 124px);
  --t-display: clamp(54px, 10.4vw, 186px);

  --header-h: clamp(64px, 5.6vw, 88px);
  --ease: cubic-bezier(.2, .7, .1, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1a1a1a;
  --fg: #ececec;
  --fg-2: #c9c9c9;
  --mute: #8a8a8a;
  --surface: #222325;
  --rule: #343434;
  --invert-bg: #ececec;
  --invert-fg: #1a1a1a;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "TWK Lausanne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.32;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-weight: 300; margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Utilities --------------------------------------------------------- */

.wrap { padding-left: var(--margin); padding-right: var(--margin); }
.section { padding-top: var(--section); }
.section--last { padding-bottom: var(--section); }
.surface { background: var(--surface); transition: background-color .5s var(--ease); }
.mute { color: var(--mute); }
.label { font-size: var(--t-micro); color: var(--mute); letter-spacing: 0; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.split { display: grid; grid-template-columns: var(--split) 1fr; }
.split > .right { grid-column: 2; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }

/* ---- Type -------------------------------------------------------------- */

.display { font-size: var(--t-display); line-height: .98; letter-spacing: -0.035em; margin-left: -0.05em; }
.hero-title { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.03em; margin-left: -0.04em; }
.h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.012em; }
.lead { font-size: var(--t-lead); line-height: 1.28; letter-spacing: -0.01em; }
.small { font-size: var(--t-small); line-height: 1.38; }
.num { color: var(--mute); }

.link {
  position: relative; display: inline-block; padding-bottom: .28em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease), color .3s;
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.arrow-link { display: inline-flex; gap: .5em; align-items: baseline; }
.arrow-link span { transition: transform .45s var(--ease); }
.arrow-link:hover span { transform: translateX(.3em); }

/* ---- Site header ------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: var(--split) 1fr auto; align-items: center;
  height: var(--header-h);
  padding: 0 var(--margin);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .5s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }

.site-logo { display: inline-flex; align-self: center; width: clamp(34px, 3vw, 46px); color: var(--fg); }
.site-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }

.nav { display: flex; gap: clamp(16px, 2vw, 32px); font-size: var(--t-small); }
.nav a { position: relative; padding: 6px 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-size: var(--t-small);
}
.theme-toggle__track {
  position: relative; width: 34px; height: 18px; border-radius: 99px;
  border: 1px solid currentColor; transition: background-color .4s var(--ease);
}
.theme-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: currentColor; transition: transform .45s var(--ease);
}
[data-theme="dark"] .theme-toggle__track::after { transform: translateX(16px); }

/* ---- Home hero --------------------------------------------------------- */

.hero { padding-top: clamp(56px, 9vw, 150px); }
.hero-title { max-width: 14.5em; }
.hero__meta {
  margin-top: clamp(48px, 7vw, 120px);
  display: grid; grid-template-columns: var(--split) 1fr auto; align-items: end; gap: 24px 0;
  padding-bottom: clamp(28px, 3vw, 48px);
}
.hero__meta p { max-width: 24em; }
.hero__ctas { display: flex; gap: clamp(20px, 2.4vw, 40px); font-size: var(--t-lead); }
.award-badge { display: inline-flex; align-items: center; gap: 12px; font-size: var(--t-small); white-space: nowrap; }
.ribbon {
  display: inline-grid; place-items: center; width: 22px; height: 30px; padding-top: 3px;
  background: var(--mute); color: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  font-size: 10px; letter-spacing: -.02em; line-height: 1;
}
.hero__media { margin: 0 var(--margin); overflow: hidden; background: var(--surface); }
.hero__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; transform: scale(1.04); transition: transform 2.2s var(--ease); }
.hero__media.is-in img { transform: none; }

/* ---- Section head (label · title · aside) ----------------------------- */

.section-head { align-items: start; padding-bottom: clamp(40px, 5vw, 84px); }
.section-head .label { display: block; margin-bottom: 1.4em; }
.section-head .right { max-width: 22em; padding-top: .35em; }

/* ---- Selected work grid (home) ---------------------------------------- */

.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(36px, 4vw, 64px) clamp(12px, 1.2vw, 20px); }
.work-card { grid-column: span 6; display: block; }
.work-card--wide { grid-column: span 12; }
.work-card__media { overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3; }
.work-card--wide .work-card__media { aspect-ratio: 21 / 9; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work-card:hover .work-card__media img { transform: scale(1.035); }
.work-card__meta { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; }
.work-card__title { font-size: var(--t-h3); line-height: 1.15; }
.work-card__tags { font-size: var(--t-small); color: var(--mute); text-align: right; padding-top: .35em; }

/* ---- Services overview ------------------------------------------------- */

.service-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); border-top: 1px solid var(--rule); }
.service { padding-top: clamp(20px, 2vw, 32px); }
.service__title { font-size: var(--t-h3); line-height: 1.15; margin-bottom: 1em; }
.service__desc { font-size: var(--t-small); color: var(--fg-2); max-width: 22em; margin-bottom: 1.6em; }
.service__list { font-size: var(--t-lead); line-height: 1.3; }

/* ---- Statement band (home intro) -------------------------------------- */

.statement { display: grid; grid-template-columns: var(--split) 1fr; align-items: end; }
.statement__portrait { max-width: 420px; }
.statement__portrait img { width: 100%; }
.statement__copy { padding-bottom: clamp(40px, 5vw, 80px); }
.statement__copy .h2 { max-width: 15.5em; }

/* ---- Page hero (Work / About / Contact) ------------------------------- */

.page-hero { padding-top: clamp(48px, 7vw, 120px); padding-bottom: clamp(56px, 7vw, 120px); }
.page-hero .split { align-items: end; }
.page-hero .right { max-width: 21em; padding-bottom: .4em; }

/* ---- Contents-style rows ---------------------------------------------- */

.rows { border-bottom: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: var(--split) 1fr auto; align-items: center;
  border-top: 1px solid var(--rule); padding: clamp(8px, .7vw, 12px) 0;
  font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.02em;
}
.row__meta { font-size: var(--t-small); letter-spacing: 0; color: var(--mute); }
.row__label { transition: transform .5s var(--ease); }
.row__num { color: var(--mute); }
a.row:hover .row__label { transform: translateX(.3em); }

/* ---- About: intro ------------------------------------------------------ */

.intro { display: grid; grid-template-columns: var(--split) 1fr; }
.intro__portrait { align-self: end; }
.intro__portrait img { width: 88%; margin-left: 6%; }
.intro__copy { padding: clamp(40px, 6vw, 100px) var(--margin) clamp(40px, 5vw, 80px) 0; display: flex; flex-direction: column; }
.intro__statement { max-width: 15.2em; }
.intro__body { margin-top: auto; padding-top: clamp(48px, 7vw, 120px); }
.signature { width: clamp(90px, 9vw, 140px); margin-top: clamp(24px, 3vw, 48px); color: var(--fg); }
.signature svg { width: 100%; height: auto; fill: currentColor; display: block; }

/* ---- About: service blocks, steps, packages --------------------------- */

.block { border-top: 1px solid var(--rule); padding: clamp(24px, 2.6vw, 40px) 0 clamp(48px, 6vw, 96px); }
.block__head { align-items: start; padding-bottom: clamp(32px, 4vw, 64px); }
.block__head .right { max-width: 22em; }
.block__list ul { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.012em; }

.steps { margin-top: clamp(40px, 5vw, 80px); }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--col-gap);
  align-items: center; border-top: 1px solid var(--rule); padding: clamp(8px, .7vw, 12px) 0;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__name { font-size: var(--t-h3); line-height: 1.15; }
.step__desc { font-size: var(--t-small); color: var(--fg-2); max-width: 26em; }

.packages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.pkg { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--rule); padding-top: clamp(20px, 2vw, 32px); }
.pkg__name { font-size: var(--t-h3); line-height: 1.1; }
.pkg__name sup { font-size: .4em; vertical-align: .9em; margin-left: .05em; }
.pkg__tier { font-size: var(--t-small); margin: 1.4em 0 1.2em; }
.pkg__desc { font-size: var(--t-small); color: var(--fg-2); max-width: 19em; flex: 1; }
.pkg__price { font-size: var(--t-lead); color: var(--mute); margin: 2em 0 1.1em; }
.pkg__price small { font-size: .55em; vertical-align: .3em; margin-right: .1em; }

/* ---- Work index -------------------------------------------------------- */

.project {
  display: grid; grid-template-columns: var(--split) 1fr;
  border-top: 1px solid var(--rule);
  padding: clamp(18px, 2vw, 30px) 0 clamp(40px, 5vw, 76px);
}
.project:last-child { border-bottom: 1px solid var(--rule); }
.project__media { overflow: hidden; margin-right: var(--col-gap); aspect-ratio: 3 / 2; background: var(--surface); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.project:hover .project__media img { transform: scale(1.035); }
.project__body { display: flex; flex-direction: column; }
.project__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.project__title { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.02em; }
.project__num { font-size: var(--t-h2); line-height: 1.08; color: var(--mute); }
.project__scope { margin-top: auto; padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); font-size: var(--t-small); }
.project__scope dd { color: var(--mute); }
.project__cta { margin-top: 28px; align-self: flex-start; }

/* ---- Case study -------------------------------------------------------- */

.case-hero { display: grid; grid-template-columns: 42% 1fr; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.case-hero__media { position: relative; overflow: hidden; background: var(--surface); }
.case-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero__body { padding: clamp(28px, 3.4vw, 56px) var(--margin) clamp(40px, 5vw, 80px) 4.6vw; display: flex; flex-direction: column; }
.case-hero__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.case-hero__title { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; max-width: 9em; }
.scope { margin-top: clamp(32px, 5vw, 80px); font-size: var(--t-small); }
.scope dd { color: var(--mute); }
.case-hero__text { margin-top: auto; padding-top: clamp(40px, 5vw, 70px); font-size: var(--t-small); line-height: 1.42; }
.case-hero__text h3 { font-size: var(--t-small); margin-bottom: 1.4em; }
.case-hero__text .cols-2 > div { max-width: 21em; }

.gallery__item { overflow: hidden; background: var(--surface); margin: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__pair { display: grid; grid-template-columns: 1fr 1fr; }
.gallery__pair img { aspect-ratio: 4 / 5; }

/* ---- Footer CTA -------------------------------------------------------- */

.site-footer { padding-top: var(--section); padding-bottom: clamp(20px, 2.4vw, 36px); border-top: 1px solid var(--rule); margin-top: var(--section); }
.site-footer--flush { margin-top: 0; }
.footer__lead { margin-top: clamp(32px, 4vw, 64px); max-width: 21em; }
.footer__cta { margin-top: clamp(28px, 3vw, 48px); font-size: var(--t-lead); }
.footer__base {
  margin-top: clamp(72px, 10vw, 170px);
  display: grid; grid-template-columns: var(--split) 1fr auto; align-items: end; gap: 28px 0;
}
.footer__lines { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; }
.footer__lines a { display: block; width: max-content; transition: color .3s; }
.footer__lines a:hover { color: var(--mute); }
.footer__legal { font-size: var(--t-micro); color: var(--mute); padding-bottom: .4em; }

.avatars { display: flex; gap: 6px; flex-shrink: 0; }
.avatar { width: clamp(38px, 3.4vw, 52px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--photo { background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.avatar--k { background: #000; color: #ececec; }
.avatar--k svg { width: 52%; height: auto; fill: currentColor; }
.avatar--sbe { background: var(--behance); color: var(--behance-ink); font-size: clamp(8px, .7vw, 10px); line-height: 1.05; letter-spacing: .2em; text-align: center; padding-left: .2em; }

/* ---- Enquiry form ------------------------------------------------------ */

.enquiry { display: flex; flex-direction: column; }
.field { display: grid; grid-template-columns: 9em 1fr; align-items: baseline; gap: var(--col-gap); border-top: 1px solid var(--rule); padding: clamp(10px, 1vw, 16px) 0; }
.field:last-of-type { border-bottom: 1px solid var(--rule); }
.field > span { font-size: var(--t-small); color: var(--mute); }
.field input, .field select, .field textarea {
  width: 100%; border: 0; background: transparent; color: var(--fg); padding: 0;
  font: inherit; font-size: var(--t-lead); line-height: 1.25; letter-spacing: -0.01em;
  border-radius: 0; outline: none; resize: vertical; -webkit-appearance: none; appearance: none;
}
.field select { cursor: pointer; }
.field select option { background: var(--bg); color: var(--fg); }
.field:focus-within { border-top-color: var(--fg); }
.field:focus-within > span { color: var(--fg); }
.enquiry__error { color: #c0392b; margin-top: 1em; }
.enquiry__send { align-self: flex-start; margin-top: clamp(28px, 3vw, 44px); border: 0; background-color: transparent; cursor: pointer; font-size: var(--t-lead); padding: 0 0 .28em; }

/* ---- Reveal on scroll -------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; }
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 960px) {
  .service-cols { grid-template-columns: 1fr; gap: 0; }
  .service { padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
  .service:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
  :root { --split: 0; }
  .site-header { grid-template-columns: auto 1fr auto; gap: 18px; }
  .nav { justify-content: flex-end; gap: 16px; }
  .theme-toggle__text { display: none; }

  .split, .statement, .intro, .project, .case-hero, .footer__base, .hero__meta { grid-template-columns: 1fr; }
  .split > .right { grid-column: 1; }
  .section-head .right, .page-hero .right, .block__head .right { margin-top: 20px; }

  .hero__meta { gap: 28px; }
  .hero__media img { aspect-ratio: 4 / 3; }

  .work-card, .work-card--wide { grid-column: span 12; }
  .work-card--wide .work-card__media { aspect-ratio: 4 / 3; }

  .statement__portrait { order: 2; max-width: 300px; }
  .statement__copy { padding-bottom: 32px; }

  .row { grid-template-columns: 1fr auto; }
  .row__meta { display: none; }

  .intro__portrait { order: 2; }
  .intro__portrait img { width: 100%; margin: 0; }
  .intro__copy { padding: 40px var(--margin); }
  .intro__body .cols-2 { grid-template-columns: 1fr; gap: 1.05em; }

  .block__list .cols-2 { grid-template-columns: 1fr; gap: 0; }
  .step { grid-template-columns: 1fr; gap: 4px; }
  .packages__grid { grid-template-columns: 1fr; gap: 48px; }

  .project__media { margin: 0 0 20px; }

  .case-hero { min-height: 0; }
  .case-hero__media { min-height: 62vh; }
  .case-hero__body { padding: 32px var(--margin) 48px; }
  .case-hero__text .cols-2 { grid-template-columns: 1fr; gap: 28px; }
  .gallery__pair { grid-template-columns: 1fr; }

  .footer__lines { font-size: clamp(26px, 7.4vw, 40px); }
  .field { grid-template-columns: 1fr; gap: 4px; }
  .enquiry { margin-top: 32px; }
}

/* ==========================================================================
   Layout language inspired by wearemotto.com
   ========================================================================== */

.caps { text-transform: uppercase; }
.paren { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .02em; }
.paren::before { content: "("; } .paren::after { content: ")"; }

.mega { font-size: clamp(50px, 9.4vw, 170px); line-height: .95; letter-spacing: -0.04em; }
.title-xl { font-size: clamp(46px, 7.2vw, 128px); line-height: .95; letter-spacing: -0.04em; }

/* Header CTA */
.site-header { grid-template-columns: 1fr auto 1fr; }
.site-header .nav { justify-self: center; }
.header-end { justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); font-size: var(--t-small); }

/* Hero: words spread across hairline rows */
.hero-rows { padding-top: clamp(24px, 3vw, 48px); }
.hero-row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: .3em;
  border-bottom: 1px solid var(--rule); padding: .06em 0 .04em;
}
.hero-row:first-child { border-top: 0; }
.hero-row .mark { width: .55em; align-self: center; color: var(--fg); }
.hero-row .mark svg { width: 100%; height: auto; fill: currentColor; display: block; }
.hero-row sup { font-size: .32em; vertical-align: 1.9em; letter-spacing: 0; }
.hero-intro {
  display: grid; grid-template-columns: var(--split) 1fr auto; align-items: end; gap: 24px 0;
  padding: clamp(36px, 5vw, 80px) 0 clamp(28px, 3vw, 48px);
}
.hero-intro__media { width: min(100%, 440px); aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.hero-intro__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-intro__copy { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; max-width: 24em; }
.hero-intro__copy .lead { max-width: 17em; }

/* "Choose your path" link list */
.path-list { border-top: 1px solid var(--rule); }
.path-list a {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule); padding: .55em 0;
  font-size: var(--t-lead); transition: padding .45s var(--ease), color .3s;
}
.path-list a:hover { padding-left: .4em; }
.path-list a span:last-child { transition: transform .45s var(--ease); }
.path-list a:hover span:last-child { transform: translateX(.3em); }

/* Section title row (big caps left, aside + link right) */
.title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: clamp(32px, 4vw, 64px); }
.title-row__aside { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 56px); font-size: var(--t-small); text-align: right; }

/* Work list rows (Motto "selected work" cards) */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.2vw, 20px); }
.case-card { display: flex; flex-direction: column; }
.case-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.case-card:hover .case-card__media img { transform: scale(1.04); }
.case-card__meta { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--rule); margin-top: 14px; }
.case-card__meta .arrow { transition: transform .45s var(--ease); }
.case-card:hover .case-card__meta .arrow { transform: translateX(.3em); }
.case-card__name { font-size: var(--t-h3); line-height: 1.1; }
.case-card__cat { font-size: var(--t-small); color: var(--mute); }

/* Marquee band */
.marquee { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .1em 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span { font-size: clamp(44px, 8vw, 140px); line-height: 1.05; letter-spacing: -0.04em; padding-right: .5em; }
.marquee__track span:nth-child(even) { color: var(--mute); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Sub-navigation (About · Approach · Investment) */
.subnav { display: flex; gap: clamp(16px, 2vw, 32px); font-size: var(--t-small); border-bottom: 1px solid var(--rule); padding-top: 14px; padding-bottom: 14px; }
.subnav a { color: var(--mute); transition: color .3s; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--fg); }

/* Program / package rows */
.programs { border-top: 1px solid var(--rule); }
.program {
  display: grid; grid-template-columns: 1.1fr 1.3fr .9fr; gap: var(--col-gap);
  border-bottom: 1px solid var(--rule); padding: clamp(28px, 3vw, 48px) 0;
}
.program__name { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em; display: flex; gap: .35em; align-items: baseline; }
.program__name sup { font-size: .38em; vertical-align: 1.1em; margin-left: -.25em; }
.program__tier { font-size: var(--t-small); color: var(--mute); margin-top: .8em; }
.program__price { font-size: var(--t-lead); margin-top: clamp(24px, 3vw, 48px); }
.program__price small { font-size: .55em; color: var(--mute); vertical-align: .3em; margin-right: .2em; }
.program__body { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; max-width: 26em; }
.program__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.program__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.program:hover .program__media img { transform: scale(1.04); }

/* Package detail */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.fact { padding: 18px 0 0; }
.fact + .fact { padding-left: var(--col-gap); border-left: 1px solid var(--rule); }
.fact dd { font-size: var(--t-h3); margin-top: .4em; }
.checklist li { display: flex; gap: .8em; border-top: 1px solid var(--rule); padding: .6em 0; font-size: var(--t-lead); }
.checklist li:last-child { border-bottom: 1px solid var(--rule); }
.checklist li::before { content: "→"; color: var(--mute); }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.stat { padding-top: 18px; }
.stat + .stat { padding-left: var(--col-gap); border-left: 1px solid var(--rule); }
.stat__num { font-size: clamp(44px, 6vw, 104px); line-height: 1; letter-spacing: -0.04em; }
.stat__label { font-size: var(--t-small); color: var(--mute); margin-top: .8em; }

/* Footer columns */
.footer__cols { display: grid; grid-template-columns: var(--split) 1fr 1fr; gap: 32px 0; margin-top: clamp(72px, 9vw, 150px); padding-top: 24px; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.footer__cols h3 { font-size: var(--t-small); color: var(--mute); margin-bottom: 1em; }
.footer__cols li + li { margin-top: .35em; }
.footer__cols a:hover { color: var(--mute); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 80px); font-size: var(--t-micro); color: var(--mute); }
.footer__mark { width: clamp(120px, 24vw, 420px); color: var(--fg); margin-top: clamp(48px, 6vw, 100px); }
.footer__mark svg { width: 100%; height: auto; fill: currentColor; display: block; }

@media (max-width: 960px) {
  .case-grid { grid-template-columns: 1fr 1fr; }
  .program { grid-template-columns: 1fr 1fr; }
  .program__media { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-header .nav { justify-self: end; }
  .header-end .cta-link { display: none; }
  .hero-row { flex-wrap: wrap; }
  .hero-intro { grid-template-columns: 1fr; }
  .hero-intro__media { width: 100%; }
  .title-row { flex-direction: column; align-items: flex-start; }
  .title-row__aside { text-align: left; }
  .case-grid { grid-template-columns: 1fr; }
  .program { grid-template-columns: 1fr; }
  .facts, .stats { grid-template-columns: 1fr; }
  .fact + .fact, .stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 18px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__cols > :first-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Footer wordmark — fills the full footer width (sized by js/main.js) */
.footer__mark { display: none; }
.footer__cols > div:first-child:empty { display: block; }
@media (max-width: 760px) {
  .footer__cols > div:first-child:empty { display: none; }
  .site-footer .split > .right { margin-top: 28px; }
}

/* Footer wordmark — endless leftward scroll; each "KWIBA®" fills the footer width */
.footer__wordmark { margin: clamp(48px, 6vw, 100px) calc(-1 * var(--margin)) 0; overflow: hidden; color: var(--fg); }
.wm-track { display: flex; width: max-content; animation: wm-scroll 28s linear infinite; }
.wm {
  --wm-size: 23vw;
  display: inline-flex; align-items: flex-start; white-space: nowrap;
  font-size: var(--wm-size); line-height: .74; letter-spacing: -0.055em;
  padding: .02em .22em .04em 0;
}
.wm-r { font-size: .2em; line-height: 1; letter-spacing: 0; margin-left: .12em; margin-top: var(--wm-r-offset, -.08em); }
@keyframes wm-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wm-track { animation: none; } }

/* Footer social column */
.footer__cols ul a[data-todo] { }

/* Behance-style feature ribbons (About › Recognition) */
.badge-group { border-top: 1px solid var(--rule); padding: clamp(20px, 2vw, 32px) 0 clamp(36px, 4vw, 64px); }
.badge-group__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: clamp(24px, 3vw, 44px); }
.badge-group__head .small { margin-top: .4em; }
.badges { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 40px); }
.badge { display: flex; flex-direction: column; align-items: center; gap: 8px; width: clamp(64px, 6vw, 92px); text-align: center; }
.badge__ribbon {
  display: grid; place-items: center; width: clamp(44px, 3.6vw, 56px); height: clamp(70px, 5.6vw, 88px);
  padding-bottom: 14%; color: #fff; font-size: clamp(17px, 1.45vw, 22px); letter-spacing: -.02em; font-weight: 600;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  transition: transform .4s var(--ease);
}
.badge__ribbon:hover { transform: translateY(-4px); }
.badge--be { background: #1f4ef5; }
.badge--gr { background: #a89160; }
.badge--id { background: #42091f; color: #eb4869; }
.badge--st { background: #000; }
[data-theme="dark"] .badge--st { background: #000; box-shadow: inset 0 0 0 1px #3a3a3a; }
.badge__count { font-size: var(--t-lead); line-height: 1; }
.badge__label { font-size: var(--t-micro); color: var(--mute); line-height: 1.2; }
@media (max-width: 760px) { .badge-group__head { flex-direction: column; gap: 10px; } }

/* Image protection — images can't be dragged, long-pressed or right-click saved */
main img, .footer__wordmark { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
main img { pointer-events: none; }

/* Download project images */
.download-band { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--rule); }
.download .small { margin-top: .6em; }
.download__btn {
  display: inline-flex; align-items: center; gap: .6em; margin-top: clamp(20px, 2vw, 32px);
  padding: .8em 1.4em; border: 1px solid var(--fg); border-radius: 99px; font-size: var(--t-body);
  transition: background-color .3s, color .3s;
}
.download__btn:hover { background: var(--fg); color: var(--bg); }

/* Work page — image-only tiles; details appear on the case study */
.work-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.2vw, 20px); }
.work-tile { display: block; overflow: hidden; background: var(--surface); aspect-ratio: 4 / 5; }
.work-tile--wide { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity .6s; }
.work-tile:hover img { transform: scale(1.035); }
@media (max-width: 760px) { .work-tiles { grid-template-columns: 1fr; } .work-tile--wide { aspect-ratio: 4 / 5; } }

/* Case study v2 — full-width image on top, details below, airy gallery */
.case-hero { display: block; min-height: 0; }
.case-hero__media { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 420px; }
.case-hero__body {
  display: grid; grid-template-columns: var(--split) 1fr; column-gap: 0; row-gap: clamp(28px, 3vw, 48px);
  padding: clamp(48px, 6vw, 110px) var(--margin) clamp(64px, 8vw, 140px);
}
.case-hero__body > .paren { grid-column: 1 / -1; }
.case-hero__body .case-hero__title-row { grid-column: 1; grid-row: 2 / span 2; margin-top: 0 !important; align-self: start; }
.case-hero__body .case-hero__title { font-size: var(--t-h2); }
.case-hero__body .scope { grid-column: 2; margin-top: 0; }
.case-hero__body .case-hero__text { grid-column: 2; margin-top: 0; padding-top: clamp(28px, 3vw, 48px); border-top: 1px solid var(--rule); }
.gallery { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 32px); padding: 0 var(--margin); }
.gallery__pair { gap: clamp(16px, 2vw, 32px); }
@media (max-width: 760px) {
  .case-hero__media { height: 70vh; min-height: 320px; }
  .case-hero__body { grid-template-columns: 1fr; padding: 36px var(--margin) 56px; }
  .case-hero__body .case-hero__title-row, .case-hero__body .scope, .case-hero__body .case-hero__text { grid-column: 1; grid-row: auto; }
}

/* Line icons (architecture-style) */
.icon { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon--lg { width: clamp(52px, 4.6vw, 76px); height: clamp(52px, 4.6vw, 76px); display: block; }
.icon--sm { width: 1.15em; height: 1.15em; stroke-width: 1.5; color: var(--mute); }
.icon-list li { display: flex; align-items: center; gap: .55em; }
.service__icon { width: 52px; height: 52px; margin-bottom: 18px; display: block; }

/* FAQ accordion */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(16px, 1.6vw, 26px) 0; cursor: pointer; list-style: none; font-size: var(--t-lead); line-height: 1.25; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { width: 24px; height: 24px; stroke-width: 1.5; transition: transform .45s var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item summary:hover span { color: var(--mute); }
.faq__a { padding: 0 3em clamp(18px, 2vw, 30px) 0; color: var(--fg-2); max-width: 40em; }
.faq__item[open] .faq__a { animation: faq-in .5s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* About — bigger portrait */
.intro--big { grid-template-columns: 52% 1fr; }
.intro--big .intro__portrait img { width: 100%; margin: 0; }

/* Awards & press list */
.press { border-top: 1px solid var(--rule); }
.press li { border-bottom: 1px solid var(--rule); }
.press a { display: grid; grid-template-columns: 13em 1fr auto; gap: 16px; align-items: baseline; padding: clamp(12px, 1.2vw, 18px) 0; transition: padding .45s var(--ease); }
.press a:hover { padding-left: .4em; }
.press__outlet { font-size: var(--t-small); color: var(--mute); }
.press__title { font-size: var(--t-body); }
.press__arrow { color: var(--mute); }

/* Clients list */
.clients { margin-top: 1em; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.02em; }
.clients span { color: var(--rule); margin: 0 .3em; }
@media (max-width: 760px) {
  .intro--big { grid-template-columns: 1fr; }
  .press a { grid-template-columns: 1fr auto; }
  .press__outlet { grid-column: 1 / -1; }
}

/* CTA band (above footer) */
.cta-band { padding-top: var(--section); padding-bottom: var(--section); border-top: 1px solid var(--rule); margin-top: var(--section); }
main > .surface:last-child + .cta-band, .section--last + .cta-band { margin-top: 0; }

/* Footer — Motto-style */
.site-footer2 { padding-top: clamp(48px, 6vw, 110px); padding-bottom: clamp(20px, 2.4vw, 36px); border-top: 1px solid var(--rule); }
.f-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: clamp(80px, 12vw, 210px); border-bottom: 1px solid var(--rule); }
.f-mark { width: clamp(52px, 5.6vw, 96px); color: var(--fg); display: block; }
.f-mark svg { width: 100%; height: auto; display: block; fill: currentColor; overflow: visible; }
.f-word { display: inline-flex; align-items: flex-start; font-size: clamp(76px, 15.5vw, 300px); line-height: .74; letter-spacing: -0.055em; margin-right: -0.02em; white-space: nowrap; }
.f-r { font-size: .2em; line-height: 1; letter-spacing: 0; margin-left: .14em; margin-top: -.08em; }
.f-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 2.4fr; gap: 40px var(--col-gap); padding-top: clamp(40px, 4.5vw, 72px); }
.f-col h3 { font-size: var(--t-lead); margin-bottom: 1.1em; }
.f-col li { font-size: var(--t-lead); line-height: 1.5; }
.f-col a { color: var(--mute); transition: color .3s; }
.f-col a:hover { color: var(--fg); }
.f-news { padding-left: clamp(0px, 4vw, 80px); }
.f-news__lead { font-size: var(--t-lead); max-width: 22em; }
.f-form { display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 3vw, 52px); border-bottom: 1px solid var(--fg); }
.f-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: clamp(24px, 2.6vw, 44px); letter-spacing: -0.02em; padding: .3em 0; outline: none; border-radius: 0; }
.f-form input::placeholder { color: var(--mute); }
.f-form button { border: 0; background: none; cursor: pointer; font-size: clamp(22px, 2vw, 32px); padding: .2em 0 .2em .4em; transition: transform .4s var(--ease); }
.f-form button:hover { transform: translateX(.2em); }
.f-note { margin-top: clamp(20px, 2.4vw, 40px); font-size: var(--t-small); color: var(--mute); max-width: 32em; }
.site-footer2 .footer__bottom { margin-top: clamp(56px, 6vw, 110px); }
@media (max-width: 960px) {
  .f-cols { grid-template-columns: 1fr 1fr 1fr; }
  .f-news { grid-column: 1 / -1; padding-left: 0; }
}
@media (max-width: 760px) {
  .f-top { flex-direction: column; gap: 48px; }
  .f-word { font-size: 26vw; }
  .f-cols { grid-template-columns: 1fr 1fr; }
}

/* Footer is always black, whatever the theme */
.site-footer2 {
  --bg: #1a1a1a; --fg: #ececec; --fg-2: #c9c9c9; --mute: #8a8a8a; --rule: #343434;
  background: var(--bg); color: var(--fg); border-top: 0; color-scheme: dark;
}
.site-footer2 ::selection { background: #ececec; color: #1a1a1a; }

/* FAQ open/close marker (text, no icon) */
.faq__item summary::after { content: "+"; font-size: 1.2em; line-height: 1; color: var(--mute); transition: transform .45s var(--ease); flex-shrink: 0; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.icon-list li { display: block; }

/* Work page v3 — equal covers in Behance project-cover proportions (808 × 632) */
.work-tiles { grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 24px); }
.work-tile, .work-tile--wide { grid-column: auto; aspect-ratio: 808 / 632; }
@media (max-width: 760px) { .work-tiles { grid-template-columns: 1fr; } .work-tile, .work-tile--wide { aspect-ratio: 808 / 632; } }

/* Video previews in case-study galleries (silent loop, no controls) */
.gallery__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface); pointer-events: none; }
.gallery__video video { aspect-ratio: auto; object-fit: contain; }

/* Work covers — fast reel on hover */
.work-tile { position: relative; }
.work-tile .reel-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.work-tile:hover img { transform: none; }
.work-tile .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: var(--surface); }