/* Palette is driven by JS per section. These are the neutral Mavicu defaults. */
:root {
  --bg: #0b0b0c;
  --fg: #f2f0eb;
  --accent: #f2f0eb;
  --muted: color-mix(in srgb, var(--fg) 55%, transparent);
  --line: color-mix(in srgb, var(--fg) 16%, transparent);
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; scrollbar-gutter: stable; }   /* never CSS smooth scrolling: the scroll triggers measure the page by jumping it, which smooth scrolling breaks (after a refresh part way down every trigger was off by the scroll); links glide in code instead. The scrollbar keeps its space while the opening holds the page still, so nothing shifts */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--bg); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; }

/* ---------- Layers ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} }
main, .footer, .nav { position: relative; z-index: 2; }
#gl { background: var(--bg); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: var(--pad); text-transform: uppercase;
}
.loader__brand { font-weight: 600; letter-spacing: .02em; font-size: clamp(14px, 1.2vw, 18px); }
.loader__count { font-family: var(--serif); font-size: clamp(64px, 14vw, 220px); line-height: .8; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 60; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--fg); pointer-events: none; mix-blend-mode: difference;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease);
}
.cursor.is-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--pad);
  mix-blend-mode: difference; color: #fff;
}
.nav__logo { display: flex; align-items: center; gap: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.nav__logo .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nav__links { display: flex; gap: 28px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { border-color: currentColor; color: inherit; }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border: 1px solid var(--fg); border-radius: 999px;
  font: 500 14px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg); background: transparent; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; border-radius: inherit; }
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: translateY(0); }
.btn .arr { transition: transform .5s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--small { padding: 10px 18px; font-size: 12px; }
.link { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* ---------- Type ---------- */
.eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 24px; }
.h2 { font-size: clamp(40px, 7vw, 112px); line-height: .95; font-weight: 500; text-transform: uppercase; letter-spacing: -.03em; }
.h2 .serif { font-size: 1.08em; }
.h2--narrow { max-width: 14ch; }
.lead { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; max-width: 46ch; color: var(--fg); opacity: .85; }
.line { display: block; overflow: hidden; }
.split { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .04em .08em .14em 0; margin-bottom: -.14em; }
.split .ch { display: inline-block; will-change: transform; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--pad) 40px; position: relative;
}
.hero__title { font-size: clamp(56px, 13vw, 220px); line-height: .88; font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; }
.hero__title .serif { font-weight: 400; font-size: 1.05em; letter-spacing: -.02em; }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px; margin-top: 40px; }
.hero__lede { max-width: 42ch; font-size: clamp(15px, 1.2vw, 18px); opacity: .8; }
.hero__meta { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.scroll-hint::after { content: ""; display: inline-block; width: 1px; height: 24px; background: currentColor; margin-left: 10px; vertical-align: middle; animation: drip 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0%{transform:scaleY(0)} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.rotator { display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.4em; }
.rotator span { display: inline-block; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; }
.marquee__track { display: flex; gap: 40px; width: max-content; font-size: clamp(32px, 5vw, 72px); text-transform: uppercase; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; animation: marq 26s linear infinite; }
.marquee__track i { font-style: normal; color: var(--accent); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Blocks ---------- */
.block { padding: clamp(96px, 16vh, 200px) var(--pad); position: relative; }
.block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.block--split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; min-height: 90vh; }
.block--split .block__col--text { padding-bottom: 12px; }
@media (max-width: 860px) { .block--split { grid-template-columns: 1fr; min-height: auto; } }
.block--story { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.statement { font-size: clamp(28px, 4.2vw, 64px); line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; font-weight: 400; }
.statement .w { display: inline-block; opacity: .15; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.card { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 32px 26px 40px; display: flex; flex-direction: column; gap: 20px; min-height: 420px; transition: background .5s var(--ease); }
.card:hover { background: color-mix(in srgb, var(--fg) 8%, var(--bg)); }
.card__no { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); }
.card h3 { font-size: 26px; font-weight: 500; line-height: 1.05; text-transform: uppercase; letter-spacing: -.02em; margin-top: auto; }
.card h3 .serif { display: block; font-size: 1.15em; }
.card p { font-size: 15px; opacity: .72; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } .card { min-height: 0; } }

/* ---------- Work ---------- */
.work__intro { min-height: 90vh; padding: clamp(96px, 16vh, 200px) var(--pad); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.project {
  min-height: 100vh; padding: 120px var(--pad) 80px;
  display: grid; grid-template-columns: 1fr; align-content: end; gap: 22px; position: relative;
}
.project__no { position: absolute; top: 120px; left: var(--pad); font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.project__name { font-size: clamp(64px, 15vw, 260px); line-height: .85; font-weight: 600; text-transform: uppercase; letter-spacing: -.05em; }
.project__name .serif { font-weight: 400; }
.project__tag { font-size: clamp(24px, 3vw, 44px); line-height: 1.1; }
.project__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.project__tags li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.project .btn { justify-self: start; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; counter-reset: s; }
.step { border-top: 1px solid var(--line); padding-top: 22px; }
.step__no { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--accent); }
.step h3 { font-size: 22px; font-weight: 500; text-transform: uppercase; margin: 14px 0 10px; }
.step p { font-size: 15px; opacity: .72; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 96px; }
.mv__text { font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); line-height: 1.15; }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .mv { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.svc { margin-top: 56px; border-top: 1px solid var(--line); }
.svc__row { border-bottom: 1px solid var(--line); }
.svc__row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: 16px; padding: 28px 0; }
.svc__row summary::-webkit-details-marker { display: none; }
.svc__no { font-family: var(--serif); font-size: 22px; color: var(--muted); }
.svc__name { font-size: clamp(24px, 4vw, 56px); text-transform: uppercase; font-weight: 500; letter-spacing: -.02em; line-height: 1; transition: transform .6s var(--ease); }
@media (hover: hover) { .svc__row:hover .svc__name { transform: translateX(14px); } }   /* touch: a tap never leaves a row nudged */
.svc__plus { position: relative; width: 20px; height: 20px; justify-self: end; }
.svc__plus::before, .svc__plus::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.svc__plus::after { transform: rotate(90deg); }
.svc__row[open] .svc__plus::after { transform: rotate(0); }
.svc__row ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 28px 80px; }
.svc__row li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.svc__row li:only-child { border: 0; padding: 0; max-width: 60ch; opacity: .8; }
@media (max-width: 600px) { .svc__row summary { grid-template-columns: 40px 1fr 20px; } .svc__row ul { padding-left: 0; } }

/* ---------- Contact ---------- */
.cta { font-size: clamp(56px, 12vw, 200px); line-height: .88; font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; }
.cta .serif { font-weight: 400; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 72px; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 22px; color: var(--accent); }
.faq details[open] summary::before { content: "–"; }
.faq p { margin-top: 10px; padding-left: 22px; opacity: .72; font-size: 15px; }
.form { display: flex; flex-direction: column; gap: 22px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 40px); align-self: start; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.form input, .form textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); font: 400 18px/1.4 var(--sans); padding: 8px 0; outline: none; resize: vertical; transition: border-color .3s; }
.form input:focus, .form textarea:focus { border-color: var(--fg); }
.form .btn { align-self: flex-start; }
.form__ok { font-size: 14px; color: var(--accent); }

/* ---------- Footer ---------- */
.footer { padding: 40px var(--pad) 28px; border-top: 1px solid var(--line); }
.footer__big { font-size: clamp(72px, 22vw, 360px); line-height: .8; font-weight: 700; text-transform: uppercase; letter-spacing: -.06em; text-align: center; margin-bottom: 32px; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.footer__row .serif { text-transform: none; font-size: 18px; color: var(--fg); }
.footer__row nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__row nav a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .grain, .marquee__track, .scroll-hint::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* Set by JS on slow GPUs */
.lowfx .grain { animation: none; opacity: .04; }
.lowfx .card, .lowfx .form { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 90%, transparent); }

/* ---------- Particle-era additions ---------- */
.hint { margin-top: 36px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hint--touch { display: none; }
@media (hover: none) { .hint--mouse { display: none; } .hint--touch { display: inline; } }
.hint-inline { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.card:focus-visible, .svc__row summary:focus-visible, .btn:focus-visible, a:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.card[data-symbol] { cursor: none; }
@media (hover: none) { .card[data-symbol] { cursor: auto; } }
.step { transition: opacity .5s var(--ease); }
.steps:has(.is-on) .step:not(.is-on) { opacity: .4; }
.step.is-on .step__no { transform: translateY(-4px); }
.step__no { display: inline-block; transition: transform .5s var(--ease); }
.mark { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.mark .lead { max-width: 38ch; }
.mark__stats { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 28px); color: var(--muted); }


/* ---------- v2 ---------- */
.eyebrow--rule { display: flex; align-items: center; gap: 12px; }
.eyebrow--rule::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* The hero headline is drawn in WebGL behind the glass; the HTML copy stays for layout and screen readers */
.gl-ready .hero__title { color: transparent; }
.gl-ready .hero__title .serif { color: transparent; }

.project .hint { margin-top: 0; }
.footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Palette explorer */
.dock {
  position: fixed; z-index: 30; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg);
}
.dock__label { color: var(--muted); }
.dock__name { min-width: 7ch; font-weight: 600; white-space: nowrap; }
.dock__swatches { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.dock__swatches::-webkit-scrollbar { display: none; }
.dock__sw {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0;
  background: conic-gradient(var(--sb) 0 50%, var(--sf) 50% 75%, var(--sa) 75% 100%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dock__sw:hover { transform: scale(1.12); }
.dock__sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }
.dock__shuffle { flex: none; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bg); background: var(--fg); border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.dock__hex { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-transform: none; letter-spacing: .02em; }
.dock__sw:focus-visible, .dock__shuffle:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
@media (max-width: 900px) { .dock__hex { display: none; } }
@media (max-width: 560px) { .dock__label { display: none; } .dock { gap: 8px; padding-left: 12px; } .dock__name { min-width: 0; } }

.grain { display: none; }   /* v2: grain is part of the WebGL final pass */

/* ---------- v3: the ending ---------- */
.footer { border-top: 0; }
.footer__stage { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding-top: 12vh; text-align: center; gap: 10px; }
.footer__stage .eyebrow { margin-bottom: 4px; }
.footer__reveal { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 44px); line-height: 1.1; text-wrap: balance; max-width: 22ch; }
.footer__sub { color: var(--muted); font-size: 15px; max-width: 40ch; text-wrap: balance; }
.maplabels { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.maplabel {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg);
}
.maplabel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.maplabel[data-side="left"] { flex-direction: row-reverse; }
.maplabel[data-side="below"] { flex-direction: column; gap: 6px; }
@media (max-width: 560px) { .maplabel { font-size: 9px; letter-spacing: .06em; } }

/* ---------- v4: inside a creative mind ---------- */
:root { --n1: #f5b74a; --n2: #ff6f91; --n3: #5fc8ff; }
.mind { padding: clamp(96px, 14vh, 180px) var(--pad); position: relative; }
.mind__col { max-width: 560px; display: flex; flex-direction: column; }
.mind__step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; opacity: .28; transition: opacity .8s var(--ease); }
.mind__step.is-on { opacity: 1; }
.mind__no { font-size: 12px; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.h2--mind { font-size: clamp(38px, 5.4vw, 84px); text-wrap: balance; }
.mind__legend { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.mind__legend li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.mind__legend b { color: var(--fg); font-weight: 600; }
.mind__legend li::before, .card__net::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--fg); box-shadow: 0 0 12px var(--fg);
}
[data-net="1"]::before { background: var(--n1) !important; box-shadow: 0 0 12px var(--n1) !important; }
[data-net="2"]::before { background: var(--n2) !important; box-shadow: 0 0 12px var(--n2) !important; }
[data-net="3"]::before { background: var(--n3) !important; box-shadow: 0 0 12px var(--n3) !important; }
.mind__bridge { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; margin: 8vh 0 28px; text-wrap: balance; }
.mind__sources { font-size: 12px; color: var(--muted); line-height: 1.7; }
.mind__sources a { border-bottom: 1px solid var(--line); }
.mind__sources a:hover { color: var(--fg); }
.card__net { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .mind__step { min-height: 80vh; justify-content: flex-end; padding-bottom: 6vh; } }

/* ---------- v7: hero, brain hotspots, cursor, nav ---------- */
.hero__title { font-size: clamp(48px, 8.2vw, 150px); }
.hero__title, .hero__foot { max-width: min(52vw, 900px); }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .hero__title, .hero__foot { max-width: none; } .hero__title { font-size: clamp(48px, 15vw, 90px); } }
.hero__hint { position: absolute; right: var(--pad); bottom: 64px; max-width: 30ch; text-align: right; font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; gap: 10px; justify-content: flex-end; }
.hero__hint::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--n2); box-shadow: 0 0 10px var(--n2); animation: hintPulse 1.8s ease-in-out infinite; }
@keyframes hintPulse { 50% { transform: scale(1.6); opacity: .5; } }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .hero__hint { position: static; text-align: left; justify-content: flex-start; margin-top: 18px; } }

.hotspots { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.hotspot {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  background: none; border: 0; padding: 0; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.hotspot__dot { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--n); box-shadow: 0 0 14px var(--n); transition: transform .4s var(--ease); }
.hotspot__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--n); opacity: .7; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
.hotspot[data-net="1"] { --n: var(--n1); } .hotspot[data-net="2"] { --n: var(--n2); } .hotspot[data-net="3"] { --n: var(--n3); }
.hotspot[data-net]::before { content: none !important; }
.hotspot__text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.2; padding: 6px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: .78; transform: translateY(-6px); transition: opacity .4s var(--ease); }
.hotspot__text b { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--n); }
.hotspot__text span { color: var(--muted); }
.hotspot:hover .hotspot__dot, .hotspot:focus-visible .hotspot__dot { transform: scale(1.4); }
.hotspot:hover .hotspot__text, .hotspot:focus-visible .hotspot__text { opacity: 1; }
.hotspot:focus-visible { outline: none; }
.hotspots.is-flash .hotspot__dot { animation: flash .9s var(--ease); }
@keyframes flash { 30% { transform: scale(2.2); box-shadow: 0 0 30px var(--n); } }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .hotspot__text span { display: none; } .hotspot__text { padding: 4px 8px; } }

.cursor__label { position: absolute; inset: 0; display: grid; place-items: center; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s; }
.cursor.is-brain { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: transparent; border: 1px solid #fff; }
.cursor.is-brain .cursor__label { opacity: 1; }

.nav { transition: transform .55s var(--ease), background-color .4s, backdrop-filter .4s; }
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { mix-blend-mode: normal; color: var(--fg); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hotspot.is-left { flex-direction: row-reverse; text-align: right; }
.hotspot.is-left .hotspot__text { align-items: flex-end; }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .hero { justify-content: flex-end; padding-bottom: 92px; } }

/* ---------- v8: each brand in its own typography ---------- */
:root {
  --f-pleyne-head: "optima-nova-lt-pro", "Optima nova LT Pro", Optima, "Marcellus", Georgia, serif;
  --f-pleyne-body: "Anek Latin", system-ui, sans-serif;
  --f-rug-head: "Bodoni Moda", Didot, serif;
  --f-rug-body: Manrope, "Onest", sans-serif;
  --f-hem: Satoshi, Inter, system-ui, sans-serif;
  --f-tilak-head: Kugile, "Marcellus", Georgia, serif;
  --f-tilak-body: Geist, system-ui, sans-serif;
}
.brand-font--pleyne { font-family: var(--f-pleyne-head); font-weight: 300; letter-spacing: .02em; }
.brand-font--rugchalet { font-family: var(--f-rug-head); font-weight: 400; letter-spacing: -.02em; }
.brand-font--hemnxt { font-family: var(--f-hem); font-weight: 700; letter-spacing: -.02em; }
.brand-font--tilak { font-family: var(--f-tilak-head); font-weight: 300; text-transform: uppercase; letter-spacing: -.01em; }

.brand .project__name { font-size: inherit; line-height: 1; letter-spacing: normal; text-transform: none; font-weight: 400; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand .project__tags li { font-family: inherit; }
.brand__logo { display: block; height: auto; max-width: 100%; }
.brand__btn { font-family: inherit; }

.brand--pleyne { font-family: var(--f-pleyne-body); }
.brand--pleyne .brand__title { font-family: var(--f-pleyne-head); font-weight: 300; font-size: clamp(64px, 11vw, 180px); letter-spacing: .015em; }
.brand--pleyne .brand__tag { font-family: var(--f-pleyne-head); font-style: italic; font-weight: 300; font-size: clamp(26px, 3vw, 46px); }
.brand__mark--pleyne { display: block; width: 56px; height: 56px; background: var(--fg); -webkit-mask: url(assets/pleyne-logo.png) center / contain no-repeat; mask: url(assets/pleyne-logo.png) center / contain no-repeat; }

.brand--rugchalet { font-family: var(--f-rug-body); }
.brand--rugchalet .brand__logo { width: clamp(220px, 26vw, 420px); }
.brand--rugchalet .brand__tag { font-family: var(--f-rug-head); font-weight: 400; font-size: clamp(38px, 5.2vw, 82px); line-height: .98; letter-spacing: -.022em; }
.brand--rugchalet .brand__tag em { font-style: italic; }
.brand--rugchalet .brand__btn { font-family: "Onest", var(--f-rug-body); font-weight: 400; text-transform: none; letter-spacing: .01em; }

.brand--hemnxt { font-family: var(--f-hem); }
.brand--hemnxt .brand__logo { width: clamp(190px, 20vw, 320px); }
.brand--hemnxt .brand__tag { font-family: var(--f-hem); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: clamp(46px, 6.8vw, 108px); line-height: .95; letter-spacing: -.02em; }
.brand--hemnxt .brand__btn { background: #fff; color: #281d49; border-color: #fff; text-transform: none; letter-spacing: 0; font-weight: 500; }
.brand--hemnxt .brand__btn::before { background: var(--accent); }
.brand--hemnxt .brand__btn:hover { color: #fff; }

.brand--tilak { font-family: var(--f-tilak-body); }
.brand--tilak .brand__mark-img { width: 64px; height: 64px; }
.brand--tilak .brand__logo { width: clamp(220px, 24vw, 380px); }
.brand--tilak .brand__tag { font-family: var(--f-tilak-head); font-style: normal; font-weight: 300; text-transform: uppercase; font-size: clamp(32px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.01em; max-width: 16ch; }
.brand--tilak .brand__btn { text-transform: uppercase; }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .brand__mark--pleyne { width: 40px; height: 40px; } .brand--tilak .brand__mark-img { width: 46px; height: 46px; } }

/* ---------- v8: the A to Z index of every brand ---------- */
.index { margin: 36px 0 12px; border-top: 1px solid var(--line); max-width: 1100px; list-style: none; }
.index__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.index__name { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.08; color: var(--fg); transition: transform .5s var(--ease); justify-self: start; }
a.index__name:hover { transform: translateX(10px); }
.index__what { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.index__go { font-size: 13px; color: var(--fg); border-bottom: 1px solid var(--line); padding-bottom: 2px; white-space: nowrap; }
.index__row--soon .index__name { opacity: .55; }
.index__row--soon .index__what { color: var(--accent); }
@media (max-width: 640px) { .index__row { grid-template-columns: 1fr auto; } .index__what { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- v8: networks lighting up in turn, then "one idea" ---------- */
.hotspots.has-on .hotspot:not(.is-on) { opacity: .3; }
.hotspot { transition: opacity .5s var(--ease); }
.hotspot.is-on .hotspot__dot { transform: scale(1.5); }
.hotspot.is-on .hotspot__text { opacity: 1; }
.idea { position: absolute; left: 0; top: 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 30px); color: var(--fg); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; white-space: nowrap; text-shadow: 0 0 18px var(--bg); }
.idea.is-on { opacity: 1; }

/* the networks step gets extra scroll so each network has its moment; its text stays put meanwhile */
.mind__step--long { min-height: 134vh; justify-content: flex-start; }   /* four beats (imagination, noticing, focus, one idea), one deliberate scroll each: about a third of the screen per beat */
.mind__sticky { position: sticky; top: 26vh; display: flex; flex-direction: column; gap: 22px; padding-top: 4vh; }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .mind__step--long { min-height: 200vh; padding-bottom: 0; } .mind__sticky { top: auto; bottom: 8vh; position: sticky; padding-top: 52vh; } }

/* ---------- v9: headings never break inside a word ---------- */
.word { display: inline-block; white-space: nowrap; }

/* ---------- v9: each brand section mirrors that brand's homepage ---------- */
.brand { min-height: 100vh; padding: 92px var(--pad) 40px; display: flex; flex-direction: column; gap: 26px; position: relative; align-content: initial; }
.brand .bnav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); min-height: 48px; }
.brand .bnav a { color: var(--fg); }
.bnav__links { display: flex; gap: 26px; align-items: center; }
.bhero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; max-width: min(48vw, 720px); }
.bhero__title { margin: 0; }
.bmeta { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; font: 500 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 62%, transparent); }
.bmeta__go { color: var(--fg); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Pleyne: mist, ink, Optima light, spaced capitals */
.brand--pleyne { font-family: var(--f-pleyne-body); }
.brand--pleyne .bnav__links a { font: 500 11px/1 var(--f-pleyne-body); letter-spacing: .2em; text-transform: uppercase; }
.bnav__mark--pleyne { display: block; height: 34px; aspect-ratio: 601 / 391; background: var(--fg); -webkit-mask: url(assets/pleyne-logo.png) left center / contain no-repeat; mask: url(assets/pleyne-logo.png) left center / contain no-repeat; }
.brand--pleyne .bhero__label { font: 600 10px/1.5 var(--f-pleyne-body); letter-spacing: .26em; text-transform: uppercase; color: #9398a0; }
.brand--pleyne .bhero__title { font-family: var(--f-pleyne-head); font-weight: 400; font-size: clamp(64px, 11vw, 176px); letter-spacing: .015em; line-height: .9; }
.brand--pleyne .bhero__tag { font-family: var(--f-pleyne-head); font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 46px); }
.brand--pleyne .bhero__link { font: 600 12px/1 var(--f-pleyne-body); letter-spacing: .03em; color: var(--fg); align-self: flex-start; }

/* The Rug Chalet: linen, Hatton, Onest capitals, mono captions, centred logo */
.brand--rugchalet { font-family: var(--f-rug-body); }
.brand--rugchalet .bnav { justify-content: center; position: relative; }
.brand--rugchalet .bnav__links--left { position: absolute; left: 0; top: 50%; transform: translateY(calc(-50% - 7px)); }
.brand--rugchalet .bnav__links a { font: 400 12px/1 "Onest", sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.bnav__mark--rug { display: block; height: 58px; aspect-ratio: 351 / 171; background: var(--fg); -webkit-mask: url(assets/rugchalet-logo.png) center / contain no-repeat; mask: url(assets/rugchalet-logo.png) center / contain no-repeat; }
.brand--rugchalet .bhero__label { font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #3f4a2a; }
.brand--rugchalet .bhero__title { font-family: var(--f-rug-head); font-weight: 400; font-size: clamp(48px, 7vw, 112px); line-height: .95; letter-spacing: -.022em; }
.brand--rugchalet .bhero__title em { font-style: italic; }
.brand--rugchalet .bhero__link { font: 400 11px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--fg); border-bottom: 1px solid currentColor; padding-bottom: 4px; align-self: flex-start; }

/* HemNxt: deep violet glow, Satoshi capitals, centred hero, pill buttons */
.brand--hemnxt { font-family: var(--f-hem); }
.brand--hemnxt::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 30%, rgba(139, 92, 255, .32), transparent 70%); }
.bnav__logo { display: block; height: 30px; width: auto; }
.bpill { font: 500 14px/1 var(--f-hem); padding: 11px 18px; border-radius: 999px; background: #fff; color: #281d49 !important; }
.bpill--ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, .45); }
.brand--hemnxt .bhero { max-width: none; align-items: center; text-align: center; justify-content: flex-start; padding-top: 5vh; }
.brand--hemnxt .bhero__title { font-family: var(--f-hem); font-weight: 700; text-transform: uppercase; font-size: clamp(46px, 7.2vw, 112px); line-height: .94; letter-spacing: -.02em; }
.brand--hemnxt .bhero__sub { font: 400 clamp(15px, 1.3vw, 19px)/1.5 var(--f-hem); opacity: .8; }

/* Tilak Marbles: red mark, Kugile capitals, Geist, red accents */
.brand--tilak { font-family: var(--f-tilak-body); }
.bnav__brand { display: flex; align-items: center; gap: 12px; }
.bnav__markimg { display: block; width: 38px; height: 38px; }
.bnav__mark--tilak { display: block; width: 150px; aspect-ratio: 444 / 121; background: var(--fg); -webkit-mask: url(assets/tilak-type.svg) left center / contain no-repeat; mask: url(assets/tilak-type.svg) left center / contain no-repeat; }
.bnav__red { font: 400 13px/1 var(--f-tilak-body); letter-spacing: .06em; text-transform: uppercase; color: #dc2a24 !important; border: 1px solid #dc2a24; padding: 10px 16px; }
.brand--tilak .bhero__label { font: 400 13px/1 var(--f-tilak-body); letter-spacing: .06em; text-transform: uppercase; color: #dc2a24; }
.brand--tilak .bhero__title { font-family: var(--f-tilak-head); font-weight: 300; text-transform: uppercase; font-size: clamp(36px, 5vw, 70px); line-height: 1.02; letter-spacing: -.01em; max-width: 16ch; }
.brand--tilak .bhero__sub { font: 400 clamp(15px, 1.25vw, 18px)/1.55 var(--f-tilak-body); max-width: 46ch; opacity: .82; }

@media (max-width: 760px) and (max-aspect-ratio: 10/9) {
  .brand { padding-top: 76px; }
  .bhero { max-width: none; justify-content: flex-end; }
  .brand--hemnxt .bhero { justify-content: flex-end; padding-top: 0; }
  .bnav__links a + a { display: none; }
  .brand--rugchalet .bnav { justify-content: flex-end; }
  .bnav__mark--tilak { width: 112px; }
}

/* ---------- v9: team ---------- */
.team__photo { margin: 48px 0 0; max-width: 1200px; }
.team__placeholder { aspect-ratio: 16 / 7; border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 4%, transparent); color: var(--muted); font: 500 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.team__names { margin-top: 16px; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .team__placeholder { aspect-ratio: 4 / 3; } }

/* ---------- v9: the ending fits one screen: caption on top, the M in the middle, links at the bottom ---------- */
.footer { min-height: 100svh; display: flex; flex-direction: column; padding: 0 var(--pad) calc(92px + env(safe-area-inset-bottom, 0px)); }
.footer__stage { flex: 1; min-height: 0; padding-top: 9vh; }
.footer__row { margin-top: auto; padding-top: 18px; }
.maplabel::before { background: var(--dot, var(--accent)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--accent)) 25%, transparent) !important; }
.maplabel[data-side="above"] { flex-direction: column-reverse; gap: 6px; }

/* M map: brand stops as numbered dots on the route, explained by the legend */
.maplabel--stop { width: 26px; height: 26px; border-radius: 50%; justify-content: center; gap: 0; font: 700 10px/1 var(--sans); letter-spacing: 0; color: #fff; background: var(--dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 30%, transparent), 0 0 18px var(--dot); }
.maplabel--stop::before { content: none !important; }
.legend { list-style: none; display: grid; gap: 8px; margin: 26px auto 0; width: fit-content; text-align: left; }
.legend li { display: grid; grid-template-columns: 26px auto auto; gap: 12px; align-items: center; font-size: 13px; }
.legend__no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--sans); color: #fff; background: var(--dot); }
.legend__name { font-weight: 600; color: var(--fg); }
.legend__did { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
@media (min-width: 1000px) {
  .footer__stage { position: relative; }
  .legend { position: absolute; right: 0; top: 50%; margin: 0; }
}
@media (max-width: 999px) {
  .footer__stage { display: flex; flex-direction: column; align-items: center; }
  .legend { margin-top: auto; margin-bottom: 8px; }
  .legend li { grid-template-columns: 22px auto; }
  .legend__did { display: none; }
}

/* brand sections pin like a real homepage hero while their 3D object animates beside the text */
.brand { min-height: 175vh; padding: 0; display: block; }
.brand__frame { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; gap: 26px; padding: 92px var(--pad) 36px; }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) { .brand__frame { padding-top: 76px; } }
@media (max-width: 760px) and (max-aspect-ratio: 10/9) {
  .footer__row { gap: 10px; font-size: 11px; justify-content: center; text-align: center; }
  .footer__row nav { gap: 12px; justify-content: center; }
  .footer__stage { padding-top: 7vh; }
}

/* portrait tablets stack like phones (object above, text below) */
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .hero { justify-content: flex-end; padding-bottom: 96px; }
  .hero__title, .hero__foot { max-width: none; }
  .hero__hint { position: static; text-align: left; justify-content: flex-start; margin-top: 18px; }
  .bhero { max-width: none; justify-content: flex-end; }
  .brand--hemnxt .bhero { justify-content: flex-end; padding-top: 0; }
  .mind__step { justify-content: flex-end; padding-bottom: 6vh; }
  .mind__sticky { top: auto; bottom: 8vh; padding-top: 50vh; }
}

/* =====================================================================
   v10
   One rule for every screen: each 3D form lives in a .stage box in the page,
   so the layout (not the camera) decides where it sits and text never runs under it.
   "Stacked" = phones and portrait tablets (same test as isStacked() in main.js).
   ===================================================================== */
.stage { pointer-events: none; }
.rail { position: absolute; top: 0; bottom: 0; right: 0; width: 44%; pointer-events: none; }
.rail > .stage { position: sticky; top: 11svh; height: 78svh; }
.stage--alt { display: none; }

/* readable hints: a small pill with a pulsing dot, never faint grey text over the 3D */
.hint {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  margin-top: 28px; padding: 9px 15px 9px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--fg); font: 500 13px/1.35 var(--sans); letter-spacing: .01em; text-transform: none;
}
.hint::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: hintPulse 1.8s ease-in-out infinite; }
.hero__hint { display: inline-flex; margin: 0; }
.hero__hint::before { background: var(--n2); box-shadow: 0 0 10px var(--n2); }
@media (hover: none) { .hint--touch { display: inline; } }

/* hero: the brain's box is the right half */
.stage--hero { position: absolute; right: 2vw; top: 10svh; width: 46vw; height: 82svh; }

/* mind: brain pinned on the right while the three steps scroll on the left */
.mind .rail { width: 54%; }

/* partnership: the cube above the paragraph, clear of the headline */
.block--split { min-height: 100vh; }
.stage--cube { position: absolute; right: var(--pad); top: 9vh; width: 34vw; height: 48vh; }

/* story: statement left, the noise pinned right */
.block--story .rail { width: 40%; }
.story__col { max-width: 58%; }

/* solutions: a pinned frame, brain left, cards right; each card lights its network in turn */
.solutions { position: relative; height: 300vh; }
.solutions .frame {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "stage cards" "foot foot"; gap: 18px 40px; padding: 88px var(--pad) 26px;
}
.solutions .block__head { grid-area: head; }
.stage--sol { grid-area: stage; min-height: 0; }
.solutions .cards { grid-area: cards; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); align-self: stretch; }
.solutions .card { min-height: 0; padding: clamp(18px, 2.2vh, 28px) 24px; gap: 10px; overflow: hidden; transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.solutions .card h3 { font-size: clamp(20px, 1.6vw, 26px); }
.solutions .card p { font-size: 14px; line-height: 1.45; }
.solutions .card__no { font-size: 34px; }
.card { --net: var(--fg); }
.card[data-net="1"] { --net: var(--n1); } .card[data-net="2"] { --net: var(--n2); } .card[data-net="3"] { --net: var(--n3); } .card[data-net="4"] { --net: var(--fg); }
.card.is-on { background: color-mix(in srgb, var(--net) 9%, var(--bg)); box-shadow: inset 0 3px 0 var(--net); }
.card.is-on .card__net { color: var(--fg); }
.sol__foot { grid-area: foot; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sol__foot .hint { margin: 0; }
.sol__dots { display: flex; gap: 8px; }
.sol__dots button { width: 30px; height: 4px; border: 0; border-radius: 4px; padding: 0; background: var(--line); cursor: pointer; position: relative; transition: background .4s var(--ease), width .4s var(--ease); }
.sol__dots button::after { content: ""; position: absolute; inset: -12px -2px; }
.sol__dots button[aria-selected="true"] { background: var(--fg); width: 46px; }

/* brands index: list left, sphere pinned right */
.work__intro { position: relative; display: block; }
.work__col { max-width: 58%; display: flex; flex-direction: column; gap: 28px; }
.work__intro .rail { width: 38%; }

/* ---------- process: an architect's plan ---------- */
.process { padding-top: 0; }
.process__intro { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 14vh 0 10vh; }
.blueprint {
  position: absolute; inset: 0 calc(-1 * var(--pad)); pointer-events: none; z-index: -1; opacity: var(--bp, .2);
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask: radial-gradient(75% 65% at 45% 50%, #000 35%, transparent 100%); mask: radial-gradient(75% 65% at 45% 50%, #000 35%, transparent 100%);
}
.draft { font-size: clamp(40px, 11.2vw, 210px); line-height: .9; font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; margin: 0; }
.draft__line { display: block; white-space: nowrap; }
.draft__line--serif { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.02em; font-size: 1.1em; line-height: .95; }
.draft__ink { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 55%, transparent); padding-right: .06em; }
.draft__ink::after { content: attr(data-text); position: absolute; inset: 0; color: var(--fg); -webkit-text-stroke: 0; clip-path: inset(-12% calc(100% - var(--fill, 0%)) -12% clamp(-12%, calc((1% - var(--fill, 0%)) * 12), 0%)); }   /* overhangs (italic g) ink in once filling starts */
.draft__ink::before { content: ""; position: absolute; top: 4%; bottom: 4%; left: var(--fill, 0%); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 14px var(--accent); opacity: var(--pen, 0); }
.dim { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1500px; margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* arrowheads: two clean chevrons centred on the line, their tips exactly at its ends, in the line's own colour */
.dim::before, .dim::after { content: ""; position: absolute; top: calc(-.5px - 4px); width: 8px; height: 8px; box-sizing: border-box; border: 0 solid color-mix(in srgb, var(--fg) 45%, transparent); transform: rotate(45deg); }
.dim::before { left: 1.2px; border-left-width: 1px; border-bottom-width: 1px; }
.dim::after { right: 1.2px; border-right-width: 1px; border-top-width: 1px; }
.dim span { position: relative; padding-top: 12px; text-align: center; }
.dim span + span::before { content: ""; position: absolute; left: 0; top: -7px; height: 13px; border-left: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); }
.process .lead { max-width: 52ch; }
.process__plan { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44%; gap: 48px; margin-top: 4vh; }
.process__plan .rail { position: relative; grid-column: 2; grid-row: 1; width: auto; inset: auto; }
.process .steps { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0; margin: 0; position: relative; }
.process .steps::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.process .steps::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--plan, 0%); background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.process .step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: 28px 0 28px 40px; position: relative; }
.process .step::before { content: ""; position: absolute; left: -5px; top: 50%; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--fg); background: var(--bg); transition: background .4s var(--ease); }
.process .step.is-on::before { background: var(--accent); border-color: var(--accent); }
.process .step__no { font-size: clamp(64px, 7vw, 124px); line-height: .9; }
.process .step h3 { font-size: clamp(24px, 2.4vw, 40px); letter-spacing: -.02em; }
.process .step p { font-size: clamp(15px, 1.15vw, 18px); max-width: 44ch; }

/* ---------- team: individual photos on a table ---------- */
.team { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.6fr); gap: 48px; align-items: start; min-height: 100vh; }
.team__head { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.team__head .eyebrow { margin-bottom: 0; }
.team__head .hint { margin-top: 0; }
.stage--team { width: 100%; height: 30vh; }
.team__shuffle { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); cursor: pointer; font: 500 13px/1 var(--sans); padding: 0 0 4px; }
.team__table {
  position: relative; height: min(80vh, 780px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--fg) 7%, var(--bg)), color-mix(in srgb, var(--fg) 2%, var(--bg)));
  border: 1px solid var(--line);
}
.pol {
  position: absolute; left: 0; top: 0; width: clamp(170px, 14vw, 240px); padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: grab; touch-action: none; perspective: 1000px; z-index: var(--z, 1);
  transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform .55s var(--ease), filter .4s;
}
.pol.is-drag { cursor: grabbing; transition: none; --s: 1.06; }
.pol:hover { --s: 1.04; }
.pol__inner { position: relative; display: block; aspect-ratio: .8; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.pol.is-flipped .pol__inner { transform: rotateY(180deg); }
.pol__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; padding: 9px 9px 0; background: #f3f0e8; color: #18181a; border-radius: 3px; box-shadow: 0 22px 44px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); }
.pol__photo { position: relative; aspect-ratio: 1; overflow: hidden; background: #1c1c1e; }
.pol__photo canvas, .pol__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pol__photo .pol__clear { opacity: 0; transition: opacity .9s var(--ease), filter .9s var(--ease); filter: blur(6px); }
.pol:hover .pol__clear, .pol.is-flipped .pol__clear, .pol:focus-visible .pol__clear, .pol.is-dev .pol__clear { opacity: 1; filter: none; }
.pol__cap { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; gap: 2px; padding: 6px 4px; }
.pol__cap b { font: italic 400 clamp(18px, 1.35vw, 23px)/1.05 var(--serif); }
.pol__cap i { font: 500 10px/1.2 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #6b6b70; }
.pol__back { transform: rotateY(180deg); justify-content: center; align-items: flex-start; gap: 12px; padding: 22px 20px; text-align: left; }
.pol__back b { font: italic 400 26px/1.05 var(--serif); }
.pol__back span { font-size: 14px; line-height: 1.45; color: #3a3a3e; }
.pol__back i { font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8f; }
.pol__tape { position: absolute; left: 50%; top: -10px; width: 74px; height: 22px; margin-left: -37px; background: color-mix(in srgb, var(--tape, #f5d76e) 70%, transparent); transform: rotate(var(--tr, -3deg)); z-index: 2; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pol:focus-visible { outline: none; }
.pol:focus-visible .pol__face { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- services: list left, helix pinned right ---------- */
.services { position: relative; }
.services__col { max-width: 62%; }
.services .rail { width: 34%; }

/* ---------- contact: the brief builder ---------- */
.contact__lead { margin-top: 30px; }
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "form stage" "form ticket"; gap: 24px 64px; margin-top: 56px; align-items: start;
}
.stage--contact { grid-area: stage; height: 36vh; position: sticky; top: 84px; }
.brief { grid-area: form; display: flex; flex-direction: column; }
.ticket { grid-area: ticket; position: sticky; top: calc(84px + 36vh + 16px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brief__kicker { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.brief__kicker span { color: var(--muted); font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 13px; }
.brief__line { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px 12px; padding: 22px 0; border-top: 1px solid var(--line); font-size: clamp(22px, 2.1vw, 34px); line-height: 1.4; letter-spacing: -.012em; transition: opacity .5s var(--ease); }
.brief__line > p, .brief__line > .chips, .brief__line > .swatches { grid-column: 2; margin: 0; }
.brief__no { grid-row: 1; font: 500 12px/1 "JetBrains Mono", monospace; color: var(--muted); padding-top: .9em; transition: color .4s; }
.brief__line.is-done .brief__no { color: var(--accent); }
.brief__line.is-done .brief__no::after { content: " ✓"; }
.brief__soft { color: var(--muted); font: italic 400 .7em/1 var(--serif); white-space: nowrap; display: inline-block; }   /* kept whole: on its own line if it must wrap */
.fill { display: inline-block; vertical-align: baseline; max-width: 100%; }
.fill input {
  font: inherit; letter-spacing: inherit; color: var(--accent); background: transparent; border: 0; border-radius: 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--fg) 34%, transparent); padding: 0 2px 2px; margin: 0 2px;
  width: var(--w, 8ch); min-width: 5ch; max-width: 100%; outline: none; transition: border-color .3s, width .2s;
}
.fill input:focus { border-bottom-style: solid; border-color: var(--accent); }
.fill input::placeholder { color: color-mix(in srgb, var(--fg) 55%, transparent); font-family: var(--serif); font-style: italic; }
.fill input:-webkit-autofill { -webkit-text-fill-color: var(--accent); transition: background-color 9999s; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid color-mix(in srgb, var(--fg) 26%, transparent); border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: 0; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s, transform .35s var(--ease); }
.chip:hover span { border-color: var(--fg); }
.chip input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip input:checked + span::before { content: "✓"; font-size: 13px; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip input:active + span { transform: scale(.96); }
.chip--all input:checked + span { background: linear-gradient(100deg, var(--n1), var(--n2), var(--n3)); color: #111; border-color: transparent; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.swatch { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s; }
.swatch input[type="radio"] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch:hover { transform: scale(1.08); }
.swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--fg); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
.swatch--custom { width: auto; padding: 0 14px 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 26%, transparent); font: 500 14px/1 var(--sans); }
.swatch--custom input[type="color"] { width: 32px; height: 32px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.swatch--custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch--custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.brief__more { border-top: 1px solid var(--line); padding: 18px 0 6px 52px; }
.brief__more summary { cursor: pointer; list-style: none; font-size: 17px; }
.brief__more summary::-webkit-details-marker { display: none; }
.brief__more summary::before { content: "+ "; color: var(--accent); }
.brief__more[open] summary::before { content: "– "; }
.brief__more summary span { color: var(--muted); }
.brief__more textarea { width: 100%; margin-top: 12px; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font: 400 17px/1.5 var(--sans); resize: vertical; outline: none; }
.brief__more textarea:focus { border-color: var(--fg); }
.brief__send { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 0 0 52px; }
.btn--send { padding: 18px 30px; font-size: 15px; }
.btn--send:disabled { opacity: .4; cursor: not-allowed; }
.btn--send:disabled:hover { color: var(--fg); }
.btn--send:disabled:hover::before { transform: translateY(101%); }
.brief__status { font-size: 14px; color: var(--muted); }
.brief__alt { padding: 16px 0 0 52px; font-size: 14px; color: var(--muted); }
.brief__alt a { color: var(--fg); border-bottom: 1px solid var(--line); }
.form__ok { padding-left: 52px; margin-top: 14px; }
.contact .faq { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
.contact .faq details { border-top: 1px solid var(--line); border-bottom: 0; }
/* the live ticket */
.ticket {
  background: #f4f1ea; color: #161616; border-radius: 16px; padding: 18px 20px 20px; font: 500 12px/1.4 "JetBrains Mono", monospace;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); rotate: .6deg;
}
.ticket::before, .ticket::after { content: ""; position: absolute; top: 58%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg); }
.ticket::before { left: -9px; } .ticket::after { right: -9px; }
.ticket__top { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .14em; padding-bottom: 12px; border-bottom: 1px dashed #b9b4a8; }
.ticket__rows { margin: 10px 0 14px; }
.ticket__rows div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed #dcd7cc; }
.ticket__rows dt { text-transform: uppercase; letter-spacing: .1em; color: #6b675f; }
.ticket__rows dd { font: 500 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.ticket__rows dd .tsw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.ticket__meter { height: 4px; border-radius: 4px; background: #e2ddd2; overflow: hidden; }
.ticket__meter span { display: block; height: 100%; width: var(--m, 0%); background: #161616; transition: width .5s var(--ease); }
.ticket__state { margin-top: 14px; display: inline-block; padding: 6px 12px; border: 2px solid currentColor; border-radius: 6px; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; color: #77726a; rotate: -4deg; transition: color .4s, scale .5s var(--ease), rotate .5s var(--ease); }
.ticket.is-ready .ticket__state { color: #1b7a43; }
.ticket.is-sent .ticket__state { color: #c8322b; rotate: -9deg; scale: 1.15; }

/* ---------- the M: why the numbers, and colour that pops ---------- */
.why { display: grid; gap: 10px; width: min(340px, 100%); text-align: left; margin-top: 14px; }
.why__q { font: 600 13px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); display: flex; align-items: center; gap: 10px; }
.why__q::before { content: "?"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--fg); font-size: 12px; }
.why__a { font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.why .legend { position: static; margin: 6px 0 0; width: 100%; }
.legend li { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; transition: background .4s; }
.legend li > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; }
.legend__time { font: 500 12px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.legend__no { color: var(--ink, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 30%, transparent); }
.maplabel--stop { color: var(--ink, #fff); scale: 0; }
.maplabels.is-pop .maplabel--stop { animation: stopPop .8s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--k) * .42s + .15s); }
.maplabel--stop::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--dot); opacity: 0; }
.maplabels.is-pop .maplabel--stop::after { animation: stopRing 1.4s ease-out both; animation-delay: calc(var(--k) * .42s + .3s); }
@keyframes stopPop { 0% { scale: 0; } 100% { scale: 1; } }
@keyframes stopRing { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(3.2); } }
.legend li.is-lit, .legend li:hover { background: color-mix(in srgb, var(--dot) 18%, transparent); }
.footer.is-pop .legend li { animation: legendLit 1.4s ease-out both; animation-delay: calc(var(--k) * .42s + .15s); }
@keyframes legendLit { 0% { background: color-mix(in srgb, var(--dot) 50%, transparent); } 100% { background: transparent; } }
.maplabel--stop.is-hot { scale: 1.35; transition: scale .3s var(--ease); }
@media (min-width: 1000px) {
  .why { position: absolute; right: 0; top: 50%; transform: translateY(-46%); margin: 0; }
}

/* ---------- palette dock: tucked into one button on phones ---------- */
.dock__toggle { display: none; }

/* =====================================================================
   Stacked: phones and portrait tablets. Each stage sits above its text.
   ===================================================================== */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .rail { position: relative; inset: auto; width: auto; }
  .rail > .stage { position: relative; top: 0; height: 36svh; }

  .stage--hero { left: 0; right: 0; width: auto; top: 64px; height: 40svh; }

  .mind .rail { position: absolute; inset: 0; width: auto; }
  .mind .rail > .stage { position: sticky; top: 62px; height: 42svh; }
  .mind__step, .mind__step--long { justify-content: flex-end; padding-bottom: 5vh; }
  .mind__sticky { position: sticky; top: auto; bottom: 5vh; padding-top: 0; }
  .mind__body { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

  .block--split { min-height: 0; }
  .stage--cube { position: relative; inset: auto; width: auto; height: 34svh; }

  .story__col { max-width: none; }
  .block--story { min-height: 0; justify-content: flex-start; gap: 0; }

  .solutions { height: 360vh; }
  .solutions .frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "head" "stage" "cards" "foot"; gap: 12px; padding: 72px var(--pad) 22px; }
  .solutions .cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; background: none; border: 0; }
  .solutions .card { grid-area: 1 / 1; border: 1px solid var(--line); border-radius: 18px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease), background .5s; }
  .solutions .card.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .solutions .card h3 { margin-top: 4px; }
  .sol__foot { gap: 14px; }

  .work__col { max-width: none; }

  .process__plan { display: block; margin-top: 0; }
  .process__plan .rail { display: none; }
  .process .steps::before, .process .steps::after { left: 4px; }
  .process .step { min-height: 0; padding: 22px 0 38px 30px; }
  .process .step::before { left: -1px; top: 34px; }
  .process .step .stage--alt { display: block; height: 30svh; margin: 0 0 6px -30px; }
  .dim { font-size: 9px; letter-spacing: .06em; }

  .team { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; }
  .team__head { position: relative; top: 0; }
  .stage--team { height: 26svh; }
  .team__table { height: auto; display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 30px var(--pad) 46px; margin: 0 calc(-1 * var(--pad)); border: 0; border-radius: 0; background: none; }
  .team__table::-webkit-scrollbar { display: none; }
  .pol { position: relative; flex: 0 0 min(62vw, 300px); width: auto; transform: rotate(var(--r, 0deg)); touch-action: auto; scroll-snap-align: center; cursor: pointer; }
  .pol:hover { --s: 1; }
  .team__shuffle { display: none; }

  .services__col { max-width: none; }
  .services .rail > .stage { height: 30svh; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "form" "ticket"; grid-template-rows: auto; gap: 18px; margin-top: 28px; }
  .stage--contact { position: relative; top: 0; height: 26svh; }
  .ticket { position: relative; top: 0; rotate: 0deg; }
  .contact .faq { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }

  .stage--mark { position: relative; inset: auto; width: auto; height: 40svh; }
  .mark { min-height: 0; justify-content: flex-start; }
}

/* desktop + landscape tablets: boxes beside the text */
@media (min-width: 760px) and (min-aspect-ratio: 10001/11000), (min-width: 1100px), (min-aspect-ratio: 10001/9000) {
  .stage--mark { position: absolute; right: var(--pad); top: 10vh; bottom: 10vh; width: 44%; }
  .mark__col { max-width: 52%; }
}

/* phones only */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) {
  .brief__line { grid-template-columns: 26px minmax(0, 1fr); gap: 10px 8px; font-size: 23px; padding: 18px 0; }
  .brief__more, .brief__send, .brief__alt, .form__ok { padding-left: 0; }
  .chip span { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .why { margin-top: auto; width: 100%; max-width: 420px; gap: 6px; }
  .why__a { font-size: 13px; }
  .legend { gap: 2px; }
  .legend li { padding: 4px 8px; }

  .dock { left: auto; right: 14px; transform: none; padding: 5px; gap: 0; }
  .dock__toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
  .dock__toggle-sw { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--bg) 0 50%, var(--fg) 50% 75%, var(--accent) 75% 100%); box-shadow: inset 0 0 0 1px var(--line); }
  .dock > :not(.dock__toggle) { display: none; }
  .dock.is-open { left: 14px; padding: 5px 6px; gap: 8px; }
  .dock.is-open > .dock__swatches, .dock.is-open > .dock__shuffle { display: flex; }
}

/* portrait tablets: bigger type and two columns where they fit */
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .solutions .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); background: var(--line); border: 1px solid var(--line); }
  .solutions .card { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; border: 0; border-radius: 0; }
  .solutions { height: 260vh; }
  .stage--hero { height: 46svh; }
  .mind .rail > .stage { height: 46svh; }
  .lead { font-size: 20px; }
  .hero__lede { font-size: 18px; }
  .process .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .process .steps::before, .process .steps::after { display: none; }
  .process .step { padding-left: 0; }
  .process .step::before { display: none; }
  .process .step .stage--alt { margin-left: 0; height: 22svh; }
  .brief__line { font-size: 28px; }
  .pol { flex-basis: 300px; }
}

/* v10 fixes after the first look */
.solutions .frame { padding-top: 108px; padding-bottom: 84px; }
.process__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.stage--intro { display: block; height: 32vh; }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .solutions .frame { padding-top: 76px; padding-bottom: 22px; }
  .process__row { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 18px; }
  .stage--intro { height: 26svh; }
}
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) { .solutions .frame { padding-bottom: 76px; } }

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .block--story .rail, .work__intro .rail, .services .rail { width: auto; }
}
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) {
  .footer { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .footer__stage { padding-top: 6vh; }
  html.is-overhead .dock { opacity: 0 !important; pointer-events: none; }   /* !important: the intro animation leaves an inline opacity */
}
.dock { transition: opacity .4s var(--ease); }
@media (max-width: 999px) { .footer .why { margin-top: auto; max-width: 460px; } }


/* =====================================================================
   v11
   ===================================================================== */
/* smoother scrolling: no live blur over the moving 3D except the nav and dock */
.hint, .card, .solutions .card, .mind__body { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hint { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.card { background: color-mix(in srgb, var(--bg) 90%, var(--fg) 3%); }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) { .mind__body { background: color-mix(in srgb, var(--bg) 90%, transparent); } }

/* partnership: the cube parks top right above the paragraph; less empty height */
.block--split { min-height: 72vh; }
@media (min-width: 760px) and (min-aspect-ratio: 10001/11000), (min-width: 1100px), (min-aspect-ratio: 10001/9000) { .stage--cube { top: 1vh; height: 44vh; width: 32vw; } }   /* a little higher: clear of the first line of its paragraph */

/* solutions: much less scrolling to get past the four cards */
.solutions { height: 210vh; }
.card { position: relative; }
.card[data-net="4"].is-on { box-shadow: none; }
.card[data-net="4"].is-on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--n1), var(--n2), var(--n3)); }
.card.is-on .card__net::before { animation: hintPulse 1.6s ease-in-out infinite; }

/* process: heading and copy left, the form beside them */
.process__intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.process__copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.draft { font-size: clamp(40px, 6.6vw, 150px); }
.stage--intro { display: block; height: 58vh; }

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .solutions { height: 250vh; }
  .process__intro { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .draft { font-size: clamp(40px, 11.2vw, 150px); }
  .stage--intro { height: 28svh; }
}
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .solutions { height: 190vh; }
}

/* every form sits on the right on desktop, so moving between sections never crosses the text */
.solutions .frame { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "head head" "cards stage" "foot foot"; }
/* team on desktop: the polaroids are the picture; the particles rest */
.stage--team { display: none; }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .solutions .frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "cards" "foot"; }
  .stage--team { display: block; }
}

/* mid-width desktops: keep the mind text clear of the brain */
.mind__col { max-width: min(560px, 42vw); }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) { .mind__col { max-width: none; } }

/* contact: the headline keeps to the left ~60%, the brief's 3D box parks beside it */
@media (min-width: 760px) and (min-aspect-ratio: 10001/11000), (min-width: 1100px), (min-aspect-ratio: 10001/9000) {
  .contact .cta { font-size: clamp(56px, 8vw, 150px); max-width: 62%; }
  .contact__lead { max-width: 46ch; }
}

/* =====================================================================
   v12: phones (v14: and portrait tablets). The 3D lives in a fixed window at the top of the screen
   (big, always in view, morphing from section to section like desktop);
   the text scrolls in the space below it and slides under the window's soft edge.
   Desktop and tablets are untouched.
   ===================================================================== */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  :root { --zone: 42svh; }
  #gl {
    height: var(--zone); bottom: auto; z-index: 4; pointer-events: auto; touch-action: pan-y;
    /* a long, eased feather (not a straight ramp): text and cards slide under it softly */
    --feather: linear-gradient(#000 calc(100% - 64px), rgba(0,0,0,.97) calc(100% - 56px), rgba(0,0,0,.9) calc(100% - 48px), rgba(0,0,0,.78) calc(100% - 40px),
      rgba(0,0,0,.62) calc(100% - 32px), rgba(0,0,0,.44) calc(100% - 24px), rgba(0,0,0,.27) calc(100% - 16px), rgba(0,0,0,.12) calc(100% - 8px), transparent);
    -webkit-mask: var(--feather); mask: var(--feather);
  }
  .hotspots, .maplabels { z-index: 6; }
  .stage, .rail { display: none !important; }
  section[id], [data-state], #work { scroll-margin-top: calc(var(--zone) + 8px); }

  /* hero: the brain fills the window, the headline (HTML on phones) sits beneath it */
  .gl-ready .hero__title, .gl-ready .hero__title .serif { color: var(--fg); }
  .hero { min-height: 100svh; justify-content: flex-start; padding: calc(var(--zone) + 14px) var(--pad) 78px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero__title { font-size: clamp(46px, 14vw, 72px); }
  .hero__foot { margin-top: 22px; gap: 18px; }
  .hero__lede { font-size: 16px; line-height: 1.5; opacity: .9; }
  .hero__hint { margin-top: 16px; }

  .marquee { padding: 16px 0; }
  .marquee__track { font-size: 30px; }

  /* sections: tighter rhythm, readable sizes */
  .block { padding: 56px var(--pad); }
  .lead { font-size: 17px; opacity: .92; }
  .h2 { font-size: clamp(36px, 10.5vw, 52px); }
  .eyebrow { margin-bottom: 16px; }

  /* inside a creative mind: plain text under the brain; step 2 stays put while its four beats play */
  .mind { padding: 36px var(--pad) 56px; }
  .mind__step { min-height: 64vh; justify-content: center; padding-bottom: 0; }
  .mind__step--long { min-height: 190vh; justify-content: flex-start; }
  .mind__sticky { position: sticky; top: calc(var(--zone) + 18px); bottom: auto; padding-top: 0; }
  .mind__body { background: none; border: 0; padding: 0; gap: 14px; }
  .h2--mind { font-size: clamp(34px, 10vw, 46px); }
  .mind__bridge { margin-top: 4vh; font-size: 24px; }

  .block--split { gap: 18px; }
  .statement { font-size: clamp(26px, 7.4vw, 34px); max-width: none; }

  /* solutions: pinned; one card at a time under the brain */
  .solutions { height: 250vh; }
  .solutions .frame { padding: calc(var(--zone) + 6px) var(--pad) 20px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head" "cards" "foot"; align-content: stretch; gap: 10px; }
  .solutions .cards { align-self: start; }
  .solutions .card { padding: 18px 18px 20px; gap: 8px; }
  .solutions .card p { font-size: 14.5px; }
  .sol__foot .hint { font-size: 12.5px; }

  .work__intro { padding: 48px var(--pad); min-height: 0; }
  .index__name { font-size: 26px; }

  /* brand pages: the object in the window, the brand's own bar and headline beneath */
  .brand__frame { padding: calc(var(--zone) + 8px) var(--pad) 22px; gap: 14px; }
  .brand .bnav { min-height: 40px; padding-bottom: 10px; }
  .bhero { gap: 12px; justify-content: center; }
  .brand--pleyne .bhero__title { font-size: 58px; }
  .brand--hemnxt .bhero__title { font-size: 40px; }
  .brand--rugchalet .bhero__title { font-size: 44px; }
  .brand--tilak .bhero__title { font-size: 32px; }
  .brand--tilak .bhero__sub, .brand--hemnxt .bhero__sub { font-size: 15px; }
  .bmeta { font-size: 11px; gap: 6px 16px; }

  /* process: the dotted forms change in the window as each step reaches the middle of the text */
  .process__intro { min-height: 0; padding: 48px 0 24px; gap: 18px; }
  .process .step { padding: 26px 0 30px 28px; }
  .process .step__no { font-size: 56px; }
  .process .step h3 { font-size: 24px; }
  .process .step p { font-size: 15.5px; }

  .team { padding-top: 48px; }
  .contact .cta { font-size: clamp(44px, 13vw, 64px); }

  /* the ending: the M fills the window, the explanation reads beneath it */
  .footer { min-height: 100svh; }
  .footer__stage { padding-top: calc(var(--zone) + 4px); gap: 6px; }
  .footer__stage .eyebrow { display: none; }
  .footer__reveal { font-size: 24px; }
  .why { margin-top: 10px; }
  .why__a { font-size: 13.5px; }
}

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .brand .bhero, .brand--hemnxt .bhero { flex: 1; justify-content: center; padding-top: 0; }
}


/* =====================================================================
   v14
   ===================================================================== */
/* process: the step's name under its diagram */
.steptag {
  position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; display: inline-flex; align-items: baseline; gap: 10px;
  padding: 7px 15px 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent);
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); white-space: nowrap;
  opacity: 0; transition: opacity .45s var(--ease);
}
.steptag.is-on { opacity: 1; }
.steptag__no { font: italic 400 20px/1 var(--serif); letter-spacing: 0; color: var(--accent); }
.steptag.is-new { animation: tagPop .55s var(--ease); }
@keyframes tagPop { 0% { scale: .85; } 60% { scale: 1.06; } 100% { scale: 1; } }
/* the process opening is no taller than it needs to be */
.process__intro { min-height: 82vh; min-height: 82svh; }

/* your visit, as stars: the brightest three are named */
.visitlabels { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.visitlabel { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.visitlabel b { font: 600 11px/1.1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.visitlabel i { font: italic 400 16px/1 var(--serif); color: var(--accent); }

/* phones + portrait tablets: a slimmer Mavicu bar; on brand pages it steps aside so the brand's own bar shows whole */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .nav { padding: 10px var(--pad); }
  .nav .btn--small { padding: 8px 14px; font-size: 11px; }
  .brand__frame { padding-bottom: 14px; gap: 10px; }
  .brand .bnav { min-height: 34px; padding-bottom: 8px; }
  .bhero { gap: 8px; }
  .bmeta { gap: 4px 14px; line-height: 1.35; }
  .bmeta__did { flex-basis: 100%; order: 2; }
  .bmeta__go { order: 3; }
}
/* portrait tablets in the window layout: larger type for the larger screen */
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  :root { --zone: 44svh; }
  .hero__title { font-size: clamp(64px, 10vw, 104px); }
  .hero__lede, .lead { font-size: 19px; }
  .h2 { font-size: clamp(48px, 7.4vw, 76px); }
  .h2--mind { font-size: clamp(44px, 6.6vw, 64px); }
  .statement { font-size: clamp(32px, 5.2vw, 48px); }
  .solutions .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .solutions .card { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; padding: 18px 20px; }
  .solutions .card p { font-size: 14px; line-height: 1.4; }
  .solutions { height: 170vh; }
  .brand--pleyne .bhero__title { font-size: 92px; }
  .brand--hemnxt .bhero__title { font-size: 64px; }
  .brand--rugchalet .bhero__title { font-size: 68px; }
  .brand--tilak .bhero__title { font-size: 48px; }
  .bmeta { font-size: 12px; }
  .process .step h3 { font-size: 30px; }
  .contact .cta { font-size: clamp(64px, 10vw, 96px); }
  .brief__line { font-size: 28px; }
  .footer__reveal { font-size: 30px; }
  .why { max-width: 520px; }
  .why__a { font-size: 15px; }
}
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .footer__stage { padding-top: calc(var(--zone) + 22px); }
}


/* =====================================================================
   v15
   ===================================================================== */
/* the HTML headline is the headline everywhere now (the dots write it first); nothing clips the italic y */
.gl-ready .hero__title, .gl-ready .hero__title .serif { color: var(--fg); }
.hero__title .line, .hero__title .split { overflow: visible; }
.hero__title .serif { padding-bottom: .12em; }
/* during the opening only the dots are on screen */
html.intro .hero > :not(.stage), html.intro .nav, html.intro .dock { opacity: 0; }

/* one rhythm for heading, description and button, on every section and every device */
:root { --gap-hd: clamp(18px, 1.9vw, 28px); --gap-dc: clamp(22px, 2.3vw, 34px); }
.hero__foot { flex-direction: column; align-items: flex-start; gap: var(--gap-dc); margin-top: var(--gap-hd); }
.hero__hint { margin-top: var(--gap-hd); }
.block--split .block__col .h2 + .lead, .contact .cta + .contact__lead { margin-top: var(--gap-hd); }
.mind__body, .mind__sticky, .mind__step { gap: var(--gap-hd); }
.process__copy, .team__head, .work__col { gap: var(--gap-hd); }
.mark__col { display: flex; flex-direction: column; gap: var(--gap-hd); }
.services .lead, .contact__lead { margin-top: var(--gap-hd); }
.brief__send { padding-top: var(--gap-dc); }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .hero__foot { margin-top: var(--gap-hd); gap: var(--gap-dc); }
  .hero__hint { margin-top: var(--gap-hd); }
}

/* brand names in the index are set in Mavicu's own type (the brand pages below keep each brand's look) */
.index .index__name { font-family: var(--sans) !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -.01em !important; text-transform: none !important; }


/* =====================================================================
   v16
   ===================================================================== */
/* the brand list: every row on the same columns, so "Coming soon" and the services line up */
.index__row { grid-template-columns: minmax(0, 1fr) minmax(0, 15em) 11em; }
.index__go { justify-self: end; }
@media (max-width: 640px) { .index__row { grid-template-columns: minmax(0, 1fr) auto; } }
[hidden] { display: none !important; }   /* hidden sections (Team, for now) stay hidden whatever their layout says */


/* =====================================================================
   v17
   ===================================================================== */
/* every brand page: the link to the brand's site sits at the right end of the bottom line */
.bmeta__go { margin-left: auto; }

/* The Rug Chalet: their homepage. The room fills the view (drawn in 3D), the words sit over it in cream */
.brand--rugchalet .bnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 0; position: static; }
.brand--rugchalet .bnav__burger { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.brand--rugchalet .bnav__burger i { display: block; height: 1.5px; background: var(--fg); }
.brand--rugchalet .bnav__mark--rug { height: clamp(66px, 7.2vw, 104px); }   /* their logo, larger */
.brand--rugchalet .bnav__icons { justify-self: end; display: flex; gap: 22px; }
.brand--rugchalet .bnav__icons svg { width: 18px; height: 18px; fill: none; stroke: var(--fg); stroke-width: 1.4; }
.brand--rugchalet .bhero { gap: 0; max-width: min(44vw, 640px); }
.brand--rugchalet .bhero__title { font-family: var(--f-rug-head); font-weight: 400; font-size: clamp(46px, 5.4vw, 92px); line-height: .94; letter-spacing: -.022em; color: var(--fg); }
.brand--rugchalet .bhero__title em { font-style: italic; display: inline-block; padding-left: 1.3em; }
.brand--rugchalet .bhero__text { margin-top: var(--gap-hd); font: 400 clamp(15px, 1.15vw, 18px)/1.65 "Onest", var(--f-rug-body); color: color-mix(in srgb, var(--fg) 88%, transparent); max-width: 31em; }
.brand--rugchalet .bhero__btn { margin-top: var(--gap-dc); align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; padding: 13px 24px; border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
  font: 500 11px/1 "Onest", var(--f-rug-body); letter-spacing: .26em; text-transform: uppercase; color: var(--fg); transition: background .3s var(--ease), color .3s var(--ease); }
.brand--rugchalet .bhero__btn svg { width: 20px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.brand--rugchalet .bhero__btn:hover { background: var(--fg); color: var(--bg); }
/* phones + portrait tablets: the site link stays on the first line, at its right end; what we did goes under */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .bmeta__pos { order: 1; }
  .bmeta__go { order: 2; margin-left: auto; }
  .bmeta__did { order: 3; }
}
/* portrait tablets: the four process steps in one column, like phones, so each step gets its own turn */
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .process .steps { display: flex; flex-direction: column; gap: 0; }
  .process .steps::before, .process .steps::after { display: block; }
  .process .step { padding-left: 34px; }
  .process .step::before { display: block; }
  .process .step .stage--alt { margin-left: -34px; }
}
/* your visit as a sound wave: the two ends of the line */
.visitlabel--end { padding: 2px 6px; background: none; font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* portrait tablets: the palette folds into the round button, as on phones, so it never sits on the brand pages' bottom line */
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .dock { left: auto; right: 18px; transform: none; padding: 5px; gap: 0; }
  .dock__toggle { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
  .dock__toggle-sw { width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(var(--bg) 0 50%, var(--fg) 50% 75%, var(--accent) 75% 100%); box-shadow: inset 0 0 0 1px var(--line); }
  .dock > :not(.dock__toggle) { display: none; }
  .dock.is-open { left: 18px; padding: 5px 6px; gap: 8px; }
  .dock.is-open > .dock__swatches, .dock.is-open > .dock__shuffle { display: flex; }
}
/* phones + portrait tablets: the bottom line keeps clear of the round palette button; The Rug Chalet's words use the full width */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .brand--rugchalet .bhero { max-width: none; }
}
/* the brand list: one shared grid for every row, so names never wrap and the columns still line up */
@supports (grid-template-columns: subgrid) {
  .index { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 28px; }
  .index__row { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
@media (max-width: 640px) {
  .index { display: block; }
  .index__row { grid-template-columns: minmax(0, 1fr) auto; }
}
/* desktop + landscape tablets: the brand pages' bottom line sits just above the palette bar, so the two never overlap at any width */
@media (min-width: 760px) and (min-aspect-ratio: 10001/11000), (min-width: 1100px), (min-aspect-ratio: 10001/9000) {
  .brand__frame { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Reach me at: the country code sits inside the sentence, like the other fields; its list opens under the line */
.brief__line { position: relative; }
.tel { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tel__cc { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px 4px; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--fg) 45%, transparent); background: none; color: var(--fg); font: inherit; cursor: pointer; }
.tel__cc:hover, .tel__cc[aria-expanded="true"] { border-bottom-color: var(--accent); }
.tel__flag { align-self: center; padding: 3px 5px 2px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 12%, transparent); font: 600 10px/1 var(--mono, 'JetBrains Mono', monospace); letter-spacing: .06em; }
.tel__code { font-size: .8em; letter-spacing: .01em; color: color-mix(in srgb, var(--fg) 85%, transparent); }
.tel__cc svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .6; transition: transform .3s var(--ease); }
.tel__cc[aria-expanded="true"] svg { transform: rotate(180deg); }
.cc { position: absolute; z-index: 20; left: var(--cc-left, 54px); top: calc(100% - 6px); width: min(340px, calc(100vw - 2 * var(--pad))); padding: 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 94%, var(--fg)); box-shadow: 0 0 0 1px var(--line), 0 18px 50px -12px rgba(0, 0, 0, .5); }
.cc__search { width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); font: 400 16px/1.2 var(--sans); outline: none; }
.cc__search:focus { box-shadow: 0 0 0 1px var(--accent); }
.cc__list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.cc__list li[data-iso] { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: 400 14px/1.2 var(--sans); color: var(--fg); }
.cc__list li[data-iso]:hover, .cc__list li.is-active { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.cc__list li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cc__flag { justify-self: start; padding: 3px 5px 2px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 10%, transparent); font: 600 10px/1 var(--mono, 'JetBrains Mono', monospace); letter-spacing: .06em; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.cc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc__code { color: var(--muted); font-variant-numeric: tabular-nums; }
.cc__none { padding: 12px 10px; color: var(--muted); font: 400 14px/1.2 var(--sans); }
.brief__hint { min-height: 1.4em; margin: 10px 0 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.brief__hint .is-warn { color: color-mix(in srgb, #f0a35e 80%, var(--fg)); }
.brief__hint .is-ok { color: color-mix(in srgb, var(--accent) 60%, var(--fg)); }
.brief__fix { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--fg); font: inherit; cursor: pointer; }
.brief__privacy { margin: 14px 0 0; max-width: 46ch; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) {
  /* phones: the country list is a sheet at the bottom of the screen, above the keyboard */
  .cc { position: fixed; z-index: 60; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; padding: 10px; border-radius: 18px; }
  .cc__list { max-height: 46svh; }
  .cc__list li[data-iso] { padding: 12px 10px; font-size: 15px; }
  .tel { white-space: normal; }
}
/* phones + portrait tablets: whatever gets focus (a field in the brief, a link) is scrolled to just below the 3D window, never under it */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  html { scroll-padding-top: calc(var(--zone) + 16px); }
}


/* =====================================================================
   v20: phones and portrait tablets, rethought. No window and no fade: the 3D fills the whole screen behind the
   words, as on desktop. Each diagram sits large in the top part of its section and steps back (dims) while text
   scrolls over it. Brand pages are full-screen frames laid out like each brand's own mobile site.
   ===================================================================== */
.bhero__cta, .bnav__burger--m, .bnav__icons--m { display: none; }        /* phone-only pieces */
.block__pair { display: contents; }                                     /* desktop: the two columns sit in the section's own grid */
.bnav__burger--m i, .bnav__icons--m .bnav__burger i { display: block; height: 1.5px; background: var(--fg); }

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  :root { --zone: 46svh; }
  #gl { height: 100%; bottom: 0; z-index: 0; pointer-events: none; -webkit-mask: none; mask: none; }

  /* brand pages: one full screen each */
  .brand__frame { padding: 14px var(--pad) 16px; gap: 0; }
  .brand .bnav { border-bottom: 0; min-height: 44px; padding-bottom: 0; align-items: center; }
  .bmeta { flex: none; padding-top: 10px; }

  /* The Rug Chalet: the room fills the screen; bar and words over it, in the upper half (as on their phone site) */
  .brand--rugchalet .bhero { flex: 1; justify-content: flex-start; padding-top: 6svh; }
  .brand--rugchalet .bhero__title { font-size: clamp(44px, 12.5vw, 62px); line-height: .95; }
  .brand--rugchalet .bhero__title em { padding-left: 1.1em; }
  .brand--rugchalet .bhero__text { font-size: 15.5px; line-height: 1.6; }

  /* Pleyne: a slim bar, the jacket on its hanger in the middle, the words at the bottom left */
  .brand--pleyne .bnav__links { display: none; }
  .brand--pleyne .bnav__icons--m { display: flex; gap: 20px; align-items: center; }
  .brand--pleyne .bnav__icons--m svg { width: 20px; height: 20px; fill: none; stroke: var(--fg); stroke-width: 1.5; }
  .brand--pleyne .bnav__icons--m .bnav__burger { display: flex; flex-direction: column; gap: 5px; width: 22px; }
  .brand--pleyne .bhero { flex: 1; justify-content: flex-end; gap: 6px; }
  .brand--pleyne .bhero__label { font-size: 10px; letter-spacing: .16em; max-width: 26ch; line-height: 1.6; }
  .brand--pleyne .bhero__title { font-size: clamp(50px, 15vw, 76px); }

  /* HemNxt: logo and menu, the big centred headline, the graph below it, the account button at the foot */
  .brand--hemnxt .bnav__links { display: none; }
  .brand--hemnxt .bnav__burger--m { display: flex; flex-direction: column; gap: 6px; width: 24px; }
  .brand--hemnxt .bhero { flex: none; justify-content: flex-start; align-items: center; text-align: center; padding-top: 3svh; gap: 12px; }
  .brand--hemnxt .bhero__title { font-size: clamp(46px, 14vw, 66px); line-height: 1; }
  .brand--hemnxt .bhero__sub { max-width: 26ch; }
  .brand--hemnxt .bhero__cta { display: inline-flex; align-self: center; margin-top: auto; margin-bottom: 14px; padding: 15px 30px; font-size: 14px; letter-spacing: .02em; }

  /* Tilak Marbles: logo and a menu box, the words centred, the quarry beneath */
  .brand--tilak .bnav__links { display: none; }
  .brand--tilak .bnav__burger--box { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); }
  .brand--tilak .bhero { flex: none; justify-content: flex-start; align-items: center; text-align: center; padding-top: 4svh; gap: 10px; }
  .brand--tilak .bhero__title { font-size: clamp(30px, 9.4vw, 46px); }
  .brand--tilak .bhero__sub { font-size: 14.5px; max-width: 32ch; }
  .brand--tilak .bmeta { margin-top: auto; }
}
/* portrait tablets: a little more room for the diagrams */
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  :root { --zone: 48svh; }
  .brand--rugchalet .bhero__title { font-size: 76px; }
  .brand--pleyne .bhero__title { font-size: 96px; }
  .brand--hemnxt .bhero__title { font-size: 84px; }
  .brand--tilak .bhero__title { font-size: 56px; }
}

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  /* every section starts its words below the diagram's part of the screen, as the hero does */
  .block, .work__intro { padding-top: calc(var(--zone) + 10px); }
  .process__intro { padding-top: 0; }
  /* process: one pinned frame, the step's picture above, only the step being read below it (as on desktop) */
  .process__plan { height: 300svh; margin-top: 0; }
  .process .steps { position: sticky; top: calc(var(--zone) + 6px); height: calc(100svh - var(--zone) - 18px); display: block; }
  .process .steps::before, .process .steps::after { display: none; }
  .process .step { position: absolute; inset: 0 0 auto 0; min-height: 0; padding: 8px 0 0 0; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
  .process .step.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .process .step::before { display: none; }
  .steps:has(.is-on) .step:not(.is-on) { opacity: 0; }
}

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  /* short sections: their words hold just below the diagram while you are in them (as desktop holds its text beside it) */
  .block--split, .block--story, .mark { min-height: 165svh; }
  .block__pair, .story__col, .mark__col { position: sticky; top: calc(var(--zone) + 10px); display: flex; flex-direction: column; gap: var(--gap-hd); }
  .block--split { display: block; }
  .statement { font-size: clamp(22px, 6.4vw, 30px); line-height: 1.22; }
  .mark { justify-content: flex-start; }
}

/* the brief's twin for phones and tablets (hidden on desktop, where the ticket sits beside the form) */
.minibrief { display: none; }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .minibrief:not([hidden]) {
    display: block; position: fixed; z-index: 40; left: 12px; right: 66px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); text-align: left;
    padding: 12px 14px 12px; border: 0; border-radius: 14px; background: #f4f1ea; color: #161616; font: 500 11px/1.35 "JetBrains Mono", monospace;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); cursor: pointer; animation: mbIn .45s var(--ease);
  }
  @keyframes mbIn { from { transform: translateY(120%); } to { transform: none; } }
  .minibrief__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .minibrief__label { text-transform: uppercase; letter-spacing: .16em; color: #6b675f; }
  .minibrief__sum { font: 500 13px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .minibrief__state { padding: 3px 7px; border: 1.5px solid currentColor; border-radius: 5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: #77726a; font-size: 9.5px; }
  .minibrief[data-state="ready"] .minibrief__state { color: #1b7a43; }
  .minibrief[data-state="sent"] .minibrief__state { color: #c8322b; }
  .minibrief__meter { display: block; height: 3px; margin-top: 9px; border-radius: 3px; background: #e2ddd2; overflow: hidden; }
  .minibrief__meter i { display: block; height: 100%; width: 0; background: #161616; transition: width .5s var(--ease); }
  .minibrief__rows { display: none; margin-top: 10px; }
  .minibrief[aria-expanded="true"] .minibrief__rows { display: grid; gap: 0; }
  .minibrief__rows > span { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px dashed #dcd7cc; }
  .minibrief__rows b { font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: #6b675f; }
  .minibrief__rows em { font: 500 13px/1.3 var(--sans); font-style: normal; overflow-wrap: anywhere; }
  .minibrief__rows em .tsw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
  /* the form keeps clear of the bar */
  .contact__grid { padding-bottom: 76px; }
}

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  /* inside a creative mind: one pinned frame; the brain above, the three steps change in place beneath it */
  .mind { height: 330svh; padding: 0 var(--pad); }
  .mind__col { position: sticky; top: calc(var(--zone) + 6px); height: calc(100svh - var(--zone) - 16px); }
  .mind__step, .mind__step--long { position: absolute; inset: 2.4em 0 auto 0; min-height: 0; padding: 0; opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
  .mind__step.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .mind__sticky { position: static; }
  .mind__bridge { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; font-size: 20px; opacity: 0 !important; transition: opacity .5s var(--ease); }
  .mind__step:nth-of-type(3).is-on ~ .mind__bridge { opacity: 1 !important; }   /* the closing line comes with the last step, never over the others */
}
/* desktop layouts (incl. landscape tablets and small laptops) */
@media (min-width: 760px) and (min-aspect-ratio: 10001/11000), (min-width: 1100px), (min-aspect-ratio: 10001/9000) {
  /* the story's statement follows the screen's height too, so it never runs off a short screen */
  .statement { font-size: clamp(26px, min(4.2vw, 6.4vh), 64px); }
  /* mission and vision stay in the words' column, clear of the drawing parked on the right */
  .mv { max-width: 56%; }
}
/* landscape tablets and small laptops: mission and vision in one readable column beside the drawing */
@media (min-width: 760px) and (max-width: 1299.98px) and (min-aspect-ratio: 10001/11000), (max-width: 759.98px) and (min-aspect-ratio: 10001/9000) {
  .mv { grid-template-columns: 1fr; gap: 28px; max-width: 52%; }
}

/* the resume line sits just under the other ways to reach us */
.brief__alt--join { margin-top: 6px; }

/* v25 (desktop and landscape screens): the end of the brief on one left edge, the text column of the lines above.
   Send row, then the privacy note right under it, then a ruled block with the other ways to reach the studio. */
:root:not(.zone) .brief__more { padding-left: 52px; }
:root:not(.zone) .brief__send { padding: 26px 0 0 52px; gap: 20px; }
:root:not(.zone) .brief__privacy { margin: 14px 0 0 52px; max-width: 54ch; font: 400 13px/1.6 var(--sans); color: var(--muted); }
:root:not(.zone) .brief__alt { margin: 0 0 0 52px; padding: 0; font: 400 14px/1.6 var(--sans); color: var(--muted); }
:root:not(.zone) .brief__alt:not(.brief__alt--join) { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
:root:not(.zone) .brief__alt--join { margin-top: 8px; }
:root:not(.zone) .form__ok { padding-left: 52px; }

/* phones held sideways (and other very short screens): the desktop layout, made to fit a short screen.
   The palette folds into one round button, Solutions shows each card's number and name, and the ending puts its
   explanation beside the M (never over it). */
@media (max-height: 520px) and (min-aspect-ratio: 10001/11000) {
  .dock { left: auto; right: 14px; transform: none; padding: 5px; gap: 0; }
  .dock__toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
  .dock__toggle-sw { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--bg) 0 50%, var(--fg) 50% 75%, var(--accent) 75% 100%); box-shadow: inset 0 0 0 1px var(--line); }
  .dock > :not(.dock__toggle) { display: none; }
  .dock.is-open { left: 14px; padding: 5px 6px; gap: 8px; }
  .dock.is-open > .dock__swatches, .dock.is-open > .dock__shuffle { display: flex; }
  html.is-overhead .dock { opacity: 0 !important; pointer-events: none; }

  .solutions .frame { padding-top: 62px; padding-bottom: 14px; }
  .solutions .card { padding: 10px 16px; gap: 4px; }
  .solutions .card p { display: none; }
  .solutions .card__no { font-size: 24px; }
  .solutions .card h3 { font-size: 17px; }

  .footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .footer__stage { position: relative; padding-top: 70px; align-items: flex-start; text-align: left; }
  .footer__stage > .eyebrow, .footer__sub { display: none; }
  .footer__reveal { font-size: 20px; max-width: 54%; }
  .footer .why { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; width: min(300px, 38vw); gap: 4px; }
  .footer .why__a { display: none; }
  .legend li { padding: 2px 8px; }
  .legend__did { display: none; }
  .footer__row { flex-wrap: nowrap; align-items: baseline; gap: 10px; font-size: 10px; letter-spacing: .03em; padding-top: 8px; white-space: nowrap; }
  .footer__row nav { flex-wrap: nowrap; gap: 10px; }
  .footer__row .serif { font-size: 14px; }
  .maplabel--stop { width: 20px; height: 20px; font-size: 9px; }
}

/* =====================================================================
   v28 phone audit: calmer, more open phone and portrait-tablet screens
   ===================================================================== */
/* no word left alone on a line, anywhere (headings and short lines balanced, paragraphs without orphans) */
h1, h2, h3, .eyebrow, .hint, .hero__hint, .bhero__title, .bhero__sub, .footer__reveal, .mind__bridge, .why__a, .brief__privacy { text-wrap: balance; }
p, li, .lead, .statement, .card p, .bhero__text, summary { text-wrap: pretty; }

@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  /* a little more air at the sides and between lines */
  :root { --pad: 20px; }
  .lead { line-height: 1.6; }
  /* the palette lives in the Mavicu bar (a small round button beside Get started): it never sits on the page's content */
  .dock { top: calc(9px + env(safe-area-inset-top, 0px)); bottom: auto; right: calc(var(--pad) + var(--navbtn, 112px) + 10px); left: auto; transform: none; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 21; transition: opacity .4s var(--ease), transform .55s var(--ease); }
  .dock__toggle { width: 34px; height: 34px; }
  .dock__toggle-sw { width: 24px; height: 24px; }
  .dock.is-open { top: calc(58px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px; padding: 5px 6px; gap: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 999px; }
  .dock.is-open > .dock__toggle { display: none; }
  .minibrief:not([hidden]) { right: 12px; }
  /* the hero's small print row (since 2025, scroll to travel) is left out: the screen keeps to heading, line, button */
  .hero__meta { display: none; }
  /* The Rug Chalet: the room fills the screen, the rug shows whole above, and the words sit in the lower part (as a
     hero should), over the stone bench, with a deeper grade there so they read */
  .brand--rugchalet .bhero { flex: 1; justify-content: flex-end; padding-top: 0; padding-bottom: 3svh; }
}

/* =====================================================================
   Lumeil (lumeil.com): its own homepage hero, the showroom "on a dimmer"
   ===================================================================== */
@font-face { font-family: "Chillax"; src: url(assets/fonts/chillax-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chillax"; src: url(assets/fonts/chillax-500.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
:root { --f-lum-display: "the-seasons", "Italiana", Georgia, "Times New Roman", serif; --f-lum-body: "Chillax", system-ui, -apple-system, "Segoe UI", sans-serif; }
.brand--lumeil { font-family: var(--f-lum-body); --lv: .28; --gold: #d3a95f; --ivory: #ece6da; color: var(--ivory); }
.brand--lumeil .bnav { border-bottom: 0; gap: 28px; }
.bnav__mark--lumeil { display: block; height: 26px; aspect-ratio: 158 / 40; background: var(--ivory); -webkit-mask: url(assets/lumeil-logo.svg) left center / contain no-repeat; mask: url(assets/lumeil-logo.svg) left center / contain no-repeat; }
.brand--lumeil .bnav__links--lum { display: flex; gap: 22px; margin-right: auto; }
.brand--lumeil .bnav__links--lum a { font: 600 13px/1 var(--f-lum-display); letter-spacing: .01em; color: var(--ivory); }
.bnav__lumright { display: flex; align-items: center; gap: 22px; }
.bnav__lumtxt { font: 500 11px/1 var(--f-lum-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory); }
.bnav__lumright svg { width: 17px; height: 17px; fill: none; stroke: var(--ivory); stroke-width: 1.4; }
.bnav__burger--lum { display: none; flex-direction: column; gap: 5px; width: 22px; }
.bnav__burger--lum i { display: block; height: 1.5px; background: var(--ivory); }
.lread { position: absolute; right: var(--pad); top: calc(92px + 74px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font: 500 11px/1 var(--f-lum-body); letter-spacing: .24em; text-transform: uppercase; color: rgba(236, 230, 218, .55); text-align: right; pointer-events: none; }
.brand--lumeil .bhero { flex: 1; max-width: none; justify-content: flex-end; gap: 0; }
.brand--lumeil .bhero__label { font: 500 12px/1.4 var(--f-lum-body); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.brand--lumeil .bhero__title { font: 400 clamp(46px, 8.6vw, 150px)/.98 var(--f-lum-display); letter-spacing: .01em; text-transform: uppercase; color: var(--ivory); text-wrap: balance; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand--lumeil .bhero__title { background-image: linear-gradient(90deg, var(--gold) calc(var(--lv) * 100%), rgba(236, 230, 218, .92) calc(var(--lv) * 100% + 8%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.lfoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: clamp(20px, 3.4vh, 34px); }
.brand--lumeil .bhero__text { font: 400 15px/26px var(--f-lum-body); color: rgba(236, 230, 218, .7); max-width: 40ch; }
.lcta { display: flex; gap: 14px; flex-wrap: wrap; }
.lbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 1px solid rgba(236, 230, 218, .5); font: 600 11px/1 var(--f-lum-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); transition: background .3s var(--ease), color .3s var(--ease); }
.lbtn--gold { background: var(--gold); border-color: var(--gold); color: #0b0a09; }
.lbtn:hover { background: var(--ivory); color: #0b0a09; }
.ldim { margin-top: clamp(18px, 3vh, 34px); display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; font: 500 11px/1 var(--f-lum-body); letter-spacing: .24em; text-transform: uppercase; color: rgba(236, 230, 218, .55); }
.ldim__level { color: var(--gold); }
.ldim__slider { display: flex; align-items: center; gap: 14px; }
.ldim__track { position: relative; display: block; width: clamp(120px, 22vw, 320px); height: 1px; background: rgba(236, 230, 218, .25); }
.ldim__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--lv) * 100%); background: var(--gold); box-shadow: 0 0 12px rgba(255, 183, 92, .7); }
.ldim__knob { position: absolute; top: 50%; left: calc(var(--lv) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #0b0a09; border: 1px solid var(--gold); }
.ldim__pct { font-size: 12px; letter-spacing: .14em; color: var(--gold); min-width: 4ch; text-align: right; }
.brand--lumeil .bmeta { color: rgba(236, 230, 218, .6); }
@media (max-width: 1200px) { .brand--lumeil .bnav__links--lum { display: none; } .bnav__lumtxt--room { display: none; } }
/* phones and portrait tablets: as their phone site: logo, Shop and icons, the room full screen with the lantern above,
   the words at the foot, the two buttons stacked, then the dimmer */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .lread { display: none; }
  .brand--lumeil .bnav { gap: 16px; }
  .bnav__mark--lumeil { height: 24px; }
  .bnav__lumright { gap: 16px; }
  .bnav__lumright svg { width: 19px; height: 19px; }
  .bnav__burger--lum { display: flex; }
  .brand--lumeil .bhero { padding-bottom: 1svh; }
  .brand--lumeil .bhero__label { font-size: 11px; letter-spacing: .26em; margin-bottom: 12px; }
  .brand--lumeil .bhero__title { font-size: clamp(40px, 12.5vw, 64px); }
  .lfoot { margin-top: 14px; gap: 14px; }
  .brand--lumeil .bhero__text { font-size: 14.5px; line-height: 23px; }
  .lcta { gap: 10px; }
  .lbtn { min-height: 44px; padding: 0 20px; }
  .ldim { margin-top: 14px; }
  .ldim__track { width: 120px; }
}
@media (min-width: 760px) and (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .brand--lumeil .bhero__title { font-size: 92px; }
}

/* v28 phone review */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  /* each brand's bottom line: the page and kind on top; under it what we did (left) and the site (right) */
  .bmeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 5px; align-items: end; }
  .bmeta__pos { grid-column: 1 / -1; grid-row: 1; }
  .bmeta__did { grid-column: 1; grid-row: 2; flex-basis: auto; order: 0; line-height: 1.45; }
  .bmeta__go { grid-column: 2; grid-row: 2; order: 0; margin-left: 0; white-space: nowrap; }
  /* every question of the FAQ on one line */
  .faq summary { white-space: nowrap; font-size: clamp(12.5px, 3.62vw, 16px); letter-spacing: -.005em; }
}
.minibrief__rows > span { transition: background .5s var(--ease); border-radius: 6px; }
.minibrief__rows > span.is-new { background: color-mix(in srgb, var(--accent, #e2462b) 16%, transparent); }
.minibrief__rows > span.is-new em { font-weight: 600; }

/* short phones (the Claude app, smaller iPhones): everything a section shows fits its one screen */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) and (max-height: 760px) {
  /* inside a creative mind: the closing line sits at the foot, the tap hint (the sparks still come on their own) steps aside */
  .mind__step:nth-of-type(3) .hint { display: none; }
  .mind__bridge { bottom: 14px; font-size: 18px; }
  /* solutions: a compact card, its dots under it; the hint steps aside */
  .solutions .block__head { flex-wrap: nowrap; gap: 12px; }
  .solutions .block__head .eyebrow, .solutions .block__head .link { white-space: nowrap; font-size: 11px; }
  .solutions .card { padding: 13px 16px; gap: 5px; }
  .solutions .card__no { font-size: 26px; }
  .solutions .card h3 { font-size: 19px; }
  .solutions .card p { font-size: 13px; line-height: 1.42; }
  .solutions .sol__foot .hint { display: none; }
  /* Lumeil: one line of label, the two buttons side by side */
  .brand--lumeil .bhero__label { font-size: 10px; letter-spacing: .2em; margin-bottom: 8px; }
  .brand--lumeil .bhero__title { font-size: clamp(36px, 11vw, 46px); }
  .brand--lumeil .bhero__text { font-size: 13.5px; line-height: 21px; }
  .lcta { flex-wrap: nowrap; gap: 8px; }
  .lbtn { min-height: 40px; padding: 0 12px; font-size: 10px; letter-spacing: .16em; }
  .ldim { margin-top: 10px; gap: 8px 16px; }
  /* the ending: a compact explanation, so the M keeps its room above the caption */
  .footer__stage { padding-top: calc(var(--zone) - 30px); gap: 4px; }
  .footer__reveal { font-size: 21px; }
  .footer .why__a { display: none; }
  .footer .why { margin-top: 6px; gap: 4px; }
  .legend li { padding: 3px 8px; font-size: 12.5px; }
  .footer__row { padding-top: 8px; gap: 6px 10px; font-size: 10.5px; }
}
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) and (max-height: 760px) {
  .maplabel--stop { width: 21px; height: 21px; font-size: 9px; }
}

/* =====================================================================
   Mission and Vision: two numbered statements, set like the rest of the site (the story's words lighting up as you read)
   ===================================================================== */
.mv { display: block; margin-top: clamp(72px, 10vh, 120px); border-top: 1px solid var(--line); }
.mv__row { display: grid; grid-template-columns: minmax(130px, 11vw) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(26px, 4vh, 44px) 0; border-bottom: 1px solid var(--line); }
.mv__label { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mv__no { font: italic 400 26px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent); }
.mv__text { margin: 0; font: 400 clamp(26px, 2.7vw, 46px)/1.14 var(--sans); letter-spacing: -.02em; max-width: 26ch; text-wrap: pretty; }
.mv__text em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mv__text .w { display: inline-block; opacity: .15; }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .mv__row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 26px 0; }
  .mv__no { font-size: 22px; }
  .mv__text { font-size: clamp(24px, 6.6vw, 34px); max-width: none; }
}

/* =====================================================================
   The ending's foot: the links, then the studio's signature and the copyright on their own line
   ===================================================================== */
.footer__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; column-gap: 24px; row-gap: 14px; }
.footer__row nav { justify-self: center; justify-content: center; }
.footer__sig { justify-self: start; }
.footer__copy { justify-self: end; white-space: nowrap; }
@media (max-width: 999px), (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .footer__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nav nav" "sig copy"; text-align: left; }
  .footer__row nav { grid-area: nav; width: 100%; padding-bottom: 14px; border-bottom: 1px solid var(--line); gap: 8px 18px; }
  .footer__sig { grid-area: sig; }
  .footer__copy { grid-area: copy; }
}
/* phones and portrait tablets: the M fills the room above; its caption, the explanation and the foot follow it at one even
   spacing (no gap left over between the caption and the explanation) */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .footer__stage { justify-content: flex-end; padding-top: 0; gap: 0; }
  .footer__reveal { margin: 0; }
  .footer .why { margin: 28px 0 0; }
  .footer__row { margin-top: 28px; padding-top: 0; }
}
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) {
  .footer__row nav { gap: 8px 14px; font-size: 10.5px; letter-spacing: .03em; }
  .footer .why, .footer__row { margin-top: 22px; }
}
@media (max-width: 420px) {
  .footer__row nav { gap: 6px 11px; font-size: 10px; letter-spacing: .02em; flex-wrap: nowrap; white-space: nowrap; }
}
@media (max-width: 340px) { .footer__row nav { flex-wrap: wrap; } }

/* =====================================================================
   The Mavicu bar on every device and every page. Phones: a menu button opens the links in a panel under the bar.
   Phones and portrait tablets: brand pages begin below the bar (their own bar sits under ours, as on desktop).
   ===================================================================== */
.nav__menu { display: none; }
@media (max-width: 720px) {
  .nav { justify-content: flex-start; gap: 10px; }
  .nav .btn { margin-left: auto; }
  .nav__menu { display: grid; place-content: center; gap: 5px; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
  .nav__menu i { display: block; width: 14px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
  html.menu-open .nav__menu i:first-child { transform: translateY(3.25px) rotate(45deg); }
  html.menu-open .nav__menu i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  html.menu-open .nav { mix-blend-mode: normal; color: var(--fg); background: color-mix(in srgb, var(--bg) 92%, transparent); }
}
.menu { position: fixed; z-index: 19; left: 0; right: 0; top: 0; padding: calc(var(--navh, 54px) + 18px) var(--pad) 26px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); color: var(--fg); }
.menu[hidden] { display: none; }
.menu__links { display: grid; }
.menu__links a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font: 600 30px/1.05 var(--sans); letter-spacing: -.02em; text-transform: uppercase; animation: menuIn .5s var(--ease) both; }
.menu__links a:nth-child(2) { animation-delay: .05s; } .menu__links a:nth-child(3) { animation-delay: .1s; } .menu__links a:nth-child(4) { animation-delay: .15s; }
.menu__no { font: italic 400 15px/1 var(--serif); color: var(--accent); letter-spacing: 0; }
.menu__foot { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.menu__foot a { color: var(--fg); }
@keyframes menuIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .brand__frame { padding-top: calc(var(--navh, 54px) + 8px); }
}

/* phones and portrait tablets: each brand page is a whole page sliding in with its own colours (never the neighbour's mid-change) */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .brand--pleyne { --bg: #e7e9eb; --fg: #1b1d20; --accent: #5f636b; --muted: color-mix(in srgb, #1b1d20 55%, transparent); --line: color-mix(in srgb, #1b1d20 16%, transparent); color: var(--fg); }
  .brand--rugchalet { --bg: #2a241a; --fg: #f5f2eb; --accent: #c2603d; --muted: color-mix(in srgb, #f5f2eb 55%, transparent); --line: color-mix(in srgb, #f5f2eb 16%, transparent); color: var(--fg); }
  .brand--lumeil { --bg: #0b0a09; --fg: #ece6da; --accent: #d3a95f; --muted: color-mix(in srgb, #ece6da 55%, transparent); --line: color-mix(in srgb, #ece6da 16%, transparent); color: var(--fg); }
  .brand--hemnxt { --bg: #150a2c; --fg: #f6f6fe; --accent: #8b5cff; --muted: color-mix(in srgb, #f6f6fe 55%, transparent); --line: color-mix(in srgb, #f6f6fe 16%, transparent); color: var(--fg); }
  .brand--tilak { --bg: #fbfaf6; --fg: #2c2b28; --accent: #dc2a24; --muted: color-mix(in srgb, #2c2b28 55%, transparent); --line: color-mix(in srgb, #2c2b28 16%, transparent); color: var(--fg); }
}

/* phones: every service name on one line, all six at one size (the size that fits the longest, Technology & Development) */
@media (max-width: 600px) {
  .svc__row summary { grid-template-columns: 26px minmax(0, 1fr) 16px; gap: 12px; }
  .svc__no { font-size: 17px; }
  .svc__name { font-size: min(24px, calc((100vw - 2 * var(--pad) - 26px - 16px - 24px) / 14.4)); white-space: nowrap; }
  .svc__plus { width: 16px; height: 16px; }
}

/* phones and portrait tablets: "What we did:" on its own line, the services under it */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .bmeta__lab, .bmeta__svc { display: block; }
}
/* phones: one menu only. The Mavicu bar's menu button is the real one; the brand bars (pictures of each brand's site)
   keep their logo and icons but not their own menu icon, so two menus never sit one above the other */
@media (max-width: 720px) {
  .brand .bnav__burger { visibility: hidden; }
}

/* Brand pages: the picture forms first, then the words come in one after another (main.js updateBrandWords sets .is-formed;
   until then they wait, invisible and a little lower, and can't be clicked) */
.brand.brand :is(.bhero > *, .bhero__cta, .lread, .bmeta) { transition: opacity .8s var(--ease), translate 1s var(--ease), background-color .3s var(--ease), color .3s var(--ease), visibility 0s; }
html.gl-ready .brand.brand:not(.is-formed) :is(.bhero > *, .bhero__cta, .lread, .bmeta) { opacity: 0; translate: 0 16px; pointer-events: none; visibility: hidden; transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s; }   /* (hidden from Tab and screen readers until they show) */
.brand.brand.is-formed .bhero > :nth-child(2) { transition-delay: .09s; }
.brand.brand.is-formed .bhero > :nth-child(3) { transition-delay: .18s; }
.brand.brand.is-formed .bhero > :nth-child(4) { transition-delay: .27s; }
.brand.brand.is-formed .bhero > :nth-child(n+5) { transition-delay: .36s; }
.brand.brand.is-formed .lread { transition-delay: .2s; }
.brand.brand.is-formed .bhero__cta { transition-delay: .3s; }
.brand.brand.is-formed .bmeta { transition-delay: .45s; }
html.measuring .brand.brand :is(.bhero > *, .bhero__cta, .lread, .bmeta) { translate: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .brand.brand :is(.bhero > *, .bhero__cta, .lread, .bmeta) { translate: none !important; } }

/* phones and portrait tablets: Mission and Vision are one pinned frame, like the steps: their picture above (the mission's
   target, then the vision's telescope), both lines below it, the one being read bright */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .process .mv { margin-top: 14svh; height: 175svh; border-top: 0; }
  .process .mv__frame { position: sticky; top: calc(var(--zone) + 6px); border-top: 1px solid var(--line); }
  .process .mv__row { transition: opacity .45s var(--ease); }
  .process .mv[data-on="0"] .mv__row:nth-child(2), .process .mv[data-on="1"] .mv__row:nth-child(1) { opacity: .3; }
}
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) and (max-height: 760px) {
  .process .mv__row { padding: 18px 0; row-gap: 10px; }
  .process .mv__text { font-size: clamp(20px, 5.8vw, 26px); }
}

/* phones and tablets, while typing in the brief: its twin sits under the menu bar (clear of the keyboard), one line that
   writes your brief as you type */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .minibrief.is-typing:not([hidden]) { top: calc(var(--navh, 54px) + 8px + var(--vv-top, 0px)); bottom: auto; right: 12px; padding: 10px 14px; animation: mbDrop .35s var(--ease); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }
  .minibrief.is-typing .minibrief__rows { display: none !important; }
  .minibrief.is-typing .minibrief__meter { margin-top: 7px; }
  @keyframes mbDrop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Lumeil: their bar and the readout keep a soft dark halo, so they read over the room however bright the light is */
.brand--lumeil .bnav, .brand--lumeil .lread { text-shadow: 0 1px 14px rgba(11, 10, 9, .6), 0 0 2px rgba(11, 10, 9, .35); }
.brand--lumeil .bnav svg { filter: drop-shadow(0 1px 6px rgba(11, 10, 9, .55)); }

/* =====================================================================
   Pre-launch audit: accessibility, fallbacks and small screens
   ===================================================================== */
/* a skip link for keyboard users, shown only when focused */
.skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 13px/1 var(--sans); transition: top .25s var(--ease); }
.skip:focus { top: 12px; }
/* if the scripts never run (blocked, or a very old browser) the loader steps aside on its own and the page reads as plain text */
.loader { animation: loaderBail .5s ease 10s forwards; }
@keyframes loaderBail { to { opacity: 0; visibility: hidden; } }
/* things that are invisible are also out of the Tab order and away from screen readers */
.hotspots { visibility: hidden; }
html.is-overhead .dock { visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .solutions .card:not(.is-on) { visibility: hidden; transition: opacity .5s var(--ease), transform .6s var(--ease), background .5s, visibility 0s linear .5s; }
}
/* reduced motion: no endless pulsing */
@media (prefers-reduced-motion: reduce) {
  .hero__hint::before, .hint::before, .card.is-on .card__net::before, .hotspot__dot::after { animation: none; }
}
/* touch targets of at least 44px around the small round buttons (their look unchanged) */
.nav__menu, .dock__toggle { position: relative; }
.nav__menu::after, .dock__toggle::after { content: ""; position: absolute; inset: -6px; }
.sol__dots button::after { inset: -18px -4px; }
/* phones: the country list sits under the menu bar, above the keyboard (at the bottom it was under the keyboard) */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) {
  .cc { top: calc(var(--navh, 54px) + 8px + var(--vv-top, 0px)); bottom: auto; }
  .cc__list { max-height: min(46svh, calc(var(--vv-h, 100svh) - var(--navh, 54px) - 120px)); }
}
/* laptops and landscape tablets that are not very tall: the Solutions cards fit their text (it was cut mid-sentence) */
@media (min-width: 1100px) and (max-height: 900px), (min-width: 760px) and (min-aspect-ratio: 10/9) and (max-height: 900px) {
  .solutions .frame { padding-top: 88px; padding-bottom: 66px; }
  .solutions .card { padding: 14px 20px; gap: 6px; }
  .solutions .card__no { font-size: 28px; }
  .solutions .card h3 { font-size: clamp(18px, 1.4vw, 22px); }
  .solutions .card p { font-size: 13px; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
}
@media (min-width: 1100px) and (max-height: 760px), (min-width: 760px) and (min-aspect-ratio: 10/9) and (max-height: 760px) {
  .solutions .card p { -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (min-width: 1100px) and (max-height: 660px), (min-width: 760px) and (min-aspect-ratio: 10/9) and (max-height: 660px) {
  .solutions .card p { -webkit-line-clamp: 2; line-clamp: 2; }
}
/* phones held sideways: brand pages stay inside their screen (The Rug Chalet ran past it, over Tilak), the notch kept clear */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --pad: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .brand__frame { overflow: hidden; }
  .brand--rugchalet .bhero__title { font-size: clamp(30px, 9.5vh, 44px); }
  .brand--rugchalet .bhero__title em { padding-left: .9em; }
  .brand--rugchalet .bhero__text { font-size: 13px; line-height: 1.5; max-width: 30em; margin-top: 10px; }
  .brand--rugchalet .bhero__btn { margin-top: 12px; padding: 10px 18px; }
}
/* very short phones (an original iPhone SE): the brain's closing line and the ending's key fit without overlapping */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9) and (max-height: 620px) {
  .mind__step p { font-size: 14px; line-height: 1.45; }
  .mind__bridge { font-size: 15px; bottom: 6px; }
  .footer .why { margin-top: 12px; }
  .footer__row { margin-top: 12px; }
  .legend li { padding-top: 3px; padding-bottom: 3px; }
}


/* phones and portrait tablets: the creative mind's words wait until the brain has gathered again, then come in */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  html.gl-ready .mind .mind__col { transition: opacity .7s var(--ease), translate .8s var(--ease), visibility 0s; }
  html.gl-ready .mind:not(.is-formed) .mind__col { opacity: 0; translate: 0 16px; visibility: hidden; transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s; }
}
/* headings split into letters: copying them gives the words once (the screen readers' copy is not selectable) */
.split > .sr { -webkit-user-select: none; user-select: none; }

/* phones and portrait tablets: your print stays clear for longer (its words wait below it), before the M */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .mark { min-height: 190svh; }
}

/* the privacy link under the brief */
.brief__privacy a { color: var(--fg); border-bottom: 1px solid var(--line); white-space: nowrap; }
.brief__privacy a:hover { border-bottom-color: currentColor; }

/* Lumeil's dimmer: a real control (drag or tap it; arrow keys), with a finger-sized hit area */
.ldim__slider { touch-action: none; cursor: pointer; padding: 14px 0; margin: -14px 0; -webkit-tap-highlight-color: transparent; }
.ldim__slider:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
@media (hover: none) { .ldim__knob { width: 20px; height: 20px; margin: -10px 0 0 -10px; } }

/* phones and portrait tablets: The Rug Chalet's room is the page's own picture (it moves exactly with its words), graded like
   their film (deeper behind the bar and under the words), opening in a circle from the rug */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .brand--rugchalet .brand__frame::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(12, 9, 6, .4) 0, rgba(12, 9, 6, 0) 15%, rgba(12, 9, 6, 0) calc(var(--trc-words, 58%) - 22%), rgba(12, 9, 6, .58) calc(var(--trc-words, 58%) + 8%), rgba(12, 9, 6, .62) 100%),
      radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .3) 100%),
      url(assets/trc-room.jpg) var(--trc-x, 49%) 0 / cover no-repeat;
    -webkit-mask-image: radial-gradient(circle at var(--trc-cx, 50%) var(--trc-cy, 30%), #000 var(--trc-r, 0px), transparent calc(var(--trc-r, 0px) + 34px));
            mask-image: radial-gradient(circle at var(--trc-cx, 50%) var(--trc-cy, 30%), #000 var(--trc-r, 0px), transparent calc(var(--trc-r, 0px) + 34px));
  }
  html:not(.gl-ready) .brand--rugchalet .brand__frame::before { -webkit-mask-image: none; mask-image: none; }
}
/* a browser that can't draw the 3D layer: the other brand pages still show their pictures */
html:not(.gl-ready) .brand--lumeil .brand__frame { background: linear-gradient(to bottom, rgba(11, 10, 9, 0) 30%, #0b0a09 62%), url(assets/lumeil-room.jpg) 72% 0 / auto 62% no-repeat, #0b0a09; }
html:not(.gl-ready) .brand--pleyne .brand__frame { background: url(assets/pleyne-galaxy.webp) 50% 18% / auto 44% no-repeat; }
@media (min-width: 760px) and (min-aspect-ratio: 10001/11000), (min-width: 1100px), (min-aspect-ratio: 10001/9000) {
  html:not(.gl-ready) .brand--rugchalet .brand__frame { background: linear-gradient(90deg, rgba(20, 16, 10, .7), rgba(20, 16, 10, .2) 60%), url(assets/trc-room.jpg) 50% 50% / cover no-repeat; }
  html:not(.gl-ready) .brand--lumeil .brand__frame { background: linear-gradient(90deg, #0b0a09 20%, rgba(11, 10, 9, .2) 60%), url(assets/lumeil-room.jpg) 80% 50% / cover no-repeat; }
  html:not(.gl-ready) .brand--pleyne .brand__frame { background: url(assets/pleyne-galaxy.webp) 78% 50% / auto 70% no-repeat; }
}

/* without the 3D layer each brand page paints its own colours (the 3D layer paints them otherwise) */
html:not(.gl-ready) .brand--pleyne { --bg: #e7e9eb; --fg: #1b1d20; --accent: #5f636b; --muted: color-mix(in srgb, #1b1d20 55%, transparent); --line: color-mix(in srgb, #1b1d20 16%, transparent); color: var(--fg); }
html:not(.gl-ready) .brand--rugchalet { --bg: #2a241a; --fg: #f5f2eb; --accent: #c2603d; --muted: color-mix(in srgb, #f5f2eb 55%, transparent); --line: color-mix(in srgb, #f5f2eb 16%, transparent); color: var(--fg); }
html:not(.gl-ready) .brand--lumeil { --bg: #0b0a09; --fg: #ece6da; --accent: #d3a95f; --muted: color-mix(in srgb, #ece6da 55%, transparent); --line: color-mix(in srgb, #ece6da 16%, transparent); color: var(--fg); }
html:not(.gl-ready) .brand--hemnxt { --bg: #150a2c; --fg: #f6f6fe; --accent: #8b5cff; --muted: color-mix(in srgb, #f6f6fe 55%, transparent); --line: color-mix(in srgb, #f6f6fe 16%, transparent); color: var(--fg); }
html:not(.gl-ready) .brand--tilak { --bg: #fbfaf6; --fg: #2c2b28; --accent: #dc2a24; --muted: color-mix(in srgb, #2c2b28 55%, transparent); --line: color-mix(in srgb, #2c2b28 16%, transparent); color: var(--fg); }
html:not(.gl-ready) .brand .brand__frame { background-color: var(--bg); }

/* desktop: the story's section is long enough for its noise to settle into the sphere gradually while you read */
@media (min-width: 760px) and (min-aspect-ratio: 10001/11000), (min-width: 1100px), (min-aspect-ratio: 10001/9000) {
  .block--story { min-height: 150vh; }
}

/* phones and portrait tablets: the FAQ's questions and answers keep a soft dark halo, so they read over the dust behind them */
@media (max-width: 759.98px) and (max-aspect-ratio: 10/9), (max-width: 1099.98px) and (max-aspect-ratio: 10/11) {
  .faq summary, .faq p { text-shadow: 0 0 10px var(--bg), 0 0 4px var(--bg), 0 0 2px var(--bg); }
}