/* =========================================================================
   Nostra — site styles
   Light ground (#f5f5f7), ink text (#0a0a0a), one red (#e50914).
   Rhythm comes from flipping whole sections: paper → ink → accent.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600;
}
.skip:focus { left: 16px; }

/* ---------------------------------------------------------------- tokens */

:root {
  /* The design is drawn on a 1440 frame with the content between x=188 and
     x=1250, so the gutter is 188 there and falls away linearly below it. */
  --wrap: 1440px;
  --gutter: clamp(20px, calc(15.77vw - 39px), 188px);
  --sec-y: clamp(72px, 9vw, 150px);
  --r: 16px;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --dim: color-mix(in srgb, var(--ink) 58%, transparent);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 860px; }

.sec { padding-block: var(--sec-y); position: relative; }

.inverted { background: var(--ink); color: var(--paper); --line: color-mix(in srgb, var(--paper) 16%, transparent); --dim: color-mix(in srgb, var(--paper) 62%, transparent); }
.accent { background: var(--accent); color: #fff; --line: rgba(255,255,255,.28); --dim: rgba(255,255,255,.78); }

/* ------------------------------------------------------------------ type */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.h2 {
  font-size: clamp(34px, 5.4vw, 76px);
  margin: 0;
  text-wrap: balance;
}
.h2 em { font-style: normal; color: var(--accent); }
.inverted .h2 em, .accent .h2 em { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 8px; text-decoration-thickness: 4px; }
.inverted .h2 em { color: var(--accent); text-decoration: none; }

.label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.label::before {
  content: "";
  width: 22px; height: 2px;
  background: currentColor;
  flex: none;
}
.label-center { justify-content: center; }
.inverted .label { color: var(--accent); }
.accent .label { color: #fff; }

.lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: var(--dim); margin: 22px 0 0; max-width: 62ch; }
.lede strong { color: var(--ink); }
.inverted .lede strong { color: var(--paper); }

.sec-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.sec-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 15px 30px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  transform: translateY(101%); transition: transform .45s var(--ease); z-index: -1;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { min-height: 44px; padding: 11px 22px; font-size: 14px; }
.btn-big { min-height: 62px; padding: 19px 38px; font-size: 17px; }

.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--ink); }
.inverted .btn-solid:hover { background: var(--paper); color: var(--ink); }

.btn-ghost { border-color: var(--line); color: inherit; }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-invert { background: #fff; color: var(--accent); }
.btn-invert:hover { background: var(--ink); color: #fff; }

.chip {
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
  min-height: 44px;
}
.chip:hover { border-color: currentColor; }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ------------------------------------------------------------- dot rule */

/* The hairline from the design, with five red markers sitting on it at
   x = 56, 349, 679, 954 and 1233 of the 1440 frame. A background-position
   percentage measures the 5px dot's travel, so it is x / (1440 - 5). */
.dot-rule, .head::after {
  --rule-c: color-mix(in srgb, currentColor 16%, transparent);
  --dot: radial-gradient(circle at 50% 50%, var(--accent) 46%, transparent 52%);
  height: 5px;
  background-repeat: no-repeat;
  background-image: var(--dot), var(--dot), var(--dot), var(--dot), var(--dot),
                    linear-gradient(var(--rule-c), var(--rule-c));
  background-size: 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 100% 1px;
  background-position: 3.902% 50%, 24.32% 50%, 47.32% 50%, 66.48% 50%, 85.92% 50%, 0 50%;
}

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

.head {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: transform .45s var(--ease), background-color .3s;
}
/* The design carries the marked rule under the header at all times. */
.head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.head.is-away { transform: translateY(-100%); }

/* The menu sits on the centre line of the page, not between its neighbours,
   so it is taken out of the row and centred on the header itself. */
.head .cnt-in, .head .wg { position: static; }
.head .nav {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin-left: 0;
}

.head-in { display: flex; align-items: center; gap: 28px; min-height: 86px; }

.logo { display: flex; align-items: center; flex: none; }
.logo-svg { height: 26px; width: auto; color: var(--ink); transition: transform .4s var(--ease); }
.logo:hover .logo-svg { transform: translateY(-1px) scale(1.02); }
.logo-img { height: 26px; width: auto; }
.logo-text { font-size: 24px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-a {
  position: relative; padding: 10px 16px; font-size: var(--nav-size, 15px); font-weight: 400;
  border-radius: 999px; overflow: hidden;
}
.nav-a span { position: relative; display: block; transition: transform .4s var(--ease); }
.nav-a::before {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav-a:hover::before { transform: scaleX(1); }

.head-side { display: flex; align-items: center; gap: 12px; }

.head-cta .btn {
  min-width: 108px; min-height: 46px; padding: 0 11px;
  font-size: 15px; font-weight: 900; letter-spacing: 0;
  text-transform: uppercase; border-radius: 78px;
}

.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:first-child { top: 19px; }
.burger span:last-child { bottom: 19px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.drawer[hidden] { display: none; }
.drawer {
  position: fixed; inset: 86px 0 0; z-index: 80;
  background: var(--ink); color: var(--paper);
  padding: 40px var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between;
  animation: drawerIn .4s var(--ease);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-12px); } }
.drawer-nav { display: flex; flex-direction: column; gap: 6px; }
.drawer-nav a { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 11vw, 64px); letter-spacing: -0.04em; }
.drawer-nav a:active { color: var(--accent); }
.drawer-foot { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: rgba(245,245,247,.6); }

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

.hero {
  position: relative;
  padding-block: clamp(40px, 5vw, 76px) clamp(40px, 5vw, 70px);
  overflow: hidden;
}

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 3vw, 56px); align-items: center;
  position: relative; z-index: 2;
}
.hero-copy { max-width: 720px; }
.hero-shape { position: relative; }

.hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  right: -12vw; top: -18vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  filter: blur(18px);
}

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 28px;
}

.hero-head {
  font-size: clamp(38px, 5.6vw, 82px);
  margin: 0;
  display: grid; gap: 2px;
}
.hero-head em { font-style: italic; color: var(--accent); }
.hero-line { display: block; }

/* Seen, but not remembered: the second line arrives out of focus and only
   sharpens once it is actually looked at. */
.hero-line-blur { color: var(--accent); }
.js .hero-line-blur { filter: blur(14px); opacity: .55; }
.hero-line-blur.is-sharp { filter: blur(0); opacity: 1; transition: filter 1.1s var(--ease), opacity 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .hero-line-blur { filter: none; opacity: 1; } }

.hero-lead { margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 46ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--dim); }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 38px); }

.hero-stats {
  margin-top: clamp(34px, 4.5vw, 60px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  border-top: 1px solid var(--line); padding-top: 28px;
}
.hero-stat { display: flex; flex-direction: column; gap: 6px; }
.hero-stat-value { font-size: clamp(30px, 3.4vw, 46px); }
.hero-stat-label { font-size: 13px; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }

.hero-scroll {
  position: absolute; left: var(--gutter); bottom: 26px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}
.hero-scroll-line { width: 46px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.hero-scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateX(-100%); animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint { 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ------------------------------------------------------------- play button */

.reel-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: transparent; border: 0; cursor: pointer; padding: 6px 4px;
}
.reel-btn-icon { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
.reel-btn-ring {
  position: relative; width: 52px; height: 52px; border-radius: 999px; background: var(--accent);
  display: grid; place-items: center; flex: none;
  transition: transform .35s var(--ease);
}
.reel-btn { position: relative; }
.reel-btn .reel-btn-icon { position: absolute; left: 20px; }
.reel-btn:hover .reel-btn-ring { transform: scale(1.1); }
.reel-btn-ring::after {
  content: ""; position: absolute; inset: -6px; border: 1px solid var(--accent); border-radius: inherit;
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.reel-btn-label { font-weight: 600; font-size: 15px; }

.reel-play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(76px, 9vw, 116px); height: clamp(76px, 9vw, 116px);
  border: 0; border-radius: 999px; background: var(--accent); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .4s var(--ease), background-color .3s;
}
.reel-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.reel-play:hover { transform: scale(1.08); background: var(--ink); }
.reel-play-ring {
  position: absolute; inset: -10px; border: 1px solid currentColor; border-radius: inherit;
  animation: ping 3s var(--ease) infinite;
}

/* --------------------------------------------------------------- marquee */

.marq { overflow: hidden; padding-block: 22px; }
.marq-accent { background: var(--accent); color: #fff; }
.marq-outline { border-block: 1px solid var(--line); }
.marq-track { display: flex; width: max-content; animation: marq var(--marq-speed, 38s) linear infinite; }
.marq:hover .marq-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marq-row { display: flex; align-items: center; }
.marq-word {
  display: inline-flex; align-items: center; gap: 30px; padding-right: 30px;
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(22px, 3vw, 40px); text-transform: uppercase;
  white-space: nowrap;
}
.marq-star { width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex: none; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .marq-track { animation: none; } }

/* -------------------------------------------------------------- showreel */

.showreel { padding-bottom: clamp(56px, 7vw, 110px); }
.reel-frame { width: min(1680px, 96vw); margin-inline: auto; margin-top: 12px; }
.reel-media {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 92%, var(--accent));
  aspect-ratio: 16 / 9;
}
.reel-media .nc-slot, .reel-media img { width: 100%; height: 100%; object-fit: cover; }
.reel-poster img { transition: transform 1.2s var(--ease), filter .6s; }
.reel-media:hover .reel-poster img { transform: scale(1.03); }
.reel-scan {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.14) 0 1px, transparent 1px 4px);
}
.reel-caption { margin: 20px auto 0; text-align: center; font-size: 14px; color: var(--dim); }
.reel-empty {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px dashed var(--line);
}
.reel-hint {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
  font-size: 13px; color: var(--dim); padding-inline: 20px;
}

.video-sec .video-frame { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink); aspect-ratio: 16/9; }
.video-frame .nc-slot, .video-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- about */

.about-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 86px); align-items: center; }
.about-solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.about-media { position: relative; }
.about-img { border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-badge {
  position: absolute; right: -14px; bottom: -14px;
  background: var(--accent); color: #fff; padding: 14px 20px; border-radius: 999px;
  font-size: 15px; letter-spacing: -0.02em;
}
.about-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; margin: 38px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.about-fact { margin: 0; }
.about-fact-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.about-fact-v { margin: 6px 0 0; font-weight: 600; font-size: 17px; }

/* ------------------------------------------------------------------ work */

.work-filters { display: flex; gap: 10px; flex-wrap: wrap; }

.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.card { position: relative; }
.card-link { display: block; }
.card-media {
  position: relative; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 4 / 3; background: color-mix(in srgb, currentColor 8%, transparent);
}
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s; }
.card-img-empty { background: repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 6%, transparent) 0 14px, transparent 14px 28px); }
.card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.card:hover .card-video { opacity: 1; }
.card:hover .card-img { transform: scale(1.06); }

.card-tag {
  position: absolute; left: 14px; top: 14px;
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transform: translateY(-6px); opacity: 0; transition: transform .4s var(--ease), opacity .3s;
}
.card:hover .card-tag { transform: none; opacity: 1; }

.card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 18px; }
.card-title { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.card-year { font-size: 13px; color: var(--dim); }
.card-sum { margin: 8px 0 0; font-size: 15px; color: var(--dim); }

.work-more { margin-top: clamp(36px, 4vw, 60px); display: flex; justify-content: center; }
.work-index { padding-top: clamp(40px, 6vw, 80px); }

/* -------------------------------------------------------------- services */

.sec-head-center { text-align: center; display: grid; justify-items: center; }
.sec-head-center .h2 { max-width: 18ch; }

.svc-slider { position: relative; margin-top: clamp(30px, 4vw, 50px); }
.svc-track {
  display: flex; gap: clamp(14px, 1.8vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); padding-bottom: 14px;
  /* without this the first card snaps over its own gutter */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.svc-track::-webkit-scrollbar { display: none; }

.svc-card {
  flex: 0 0 clamp(230px, 24vw, 310px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
}
.svc-card-media {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  aspect-ratio: 4 / 5;
}
.svc-card-media .nc-slot, .svc-card-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card-media img { transition: transform .8s var(--ease); }
.svc-card:hover .svc-card-media img { transform: scale(1.05); }
.svc-card-n {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  background: var(--accent); color: #fff; border-radius: 999px;
  width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.svc-card-title { margin: 0; font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.02em; }
.svc-card-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dim); }

.svc-nav { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.svc-note {
  margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; max-width: 52ch;
  font-size: 15px; color: var(--dim);
}
.svc-note::before { content: "/ "; color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------- process */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.step { padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--r); position: relative; overflow: hidden; transition: transform .4s var(--ease), border-color .3s; }
.step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.step:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.step:hover::after { transform: scaleX(1); }
.step-n { font-size: 34px; color: var(--accent); display: block; }
.step-t { margin: 16px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.step-x { margin: 0; font-size: 15px; color: var(--dim); }

/* ----------------------------------------------------------------- stats */

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 238px)); gap: 0; }
.stat { padding-left: 0; }
.stat-top {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-body); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(34px, 3.333vw, 48px); line-height: 1.2;
}
.stat-suffix { color: inherit; }
.stat-label { margin: 0; font-size: 15px; font-weight: 200; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.2; }

/* ----------------------------------------------------------------- logos */

.logos { padding-block: clamp(46px, 5vw, 78px); }
.logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: clamp(20px, 3vw, 48px); align-items: center; }
.logo-cell { opacity: .55; transition: opacity .3s, transform .4s var(--ease); filter: grayscale(1); }
.logo-cell:hover { opacity: 1; transform: translateY(-3px); filter: none; }
.logo-slot img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------- quotes */

.quote-deck { position: relative; min-height: 220px; }
.quote { margin: 0; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .5s var(--ease); }
.quote.is-on { opacity: 1; visibility: visible; position: relative; }
.quote-text { font-size: clamp(24px, 3.4vw, 46px); margin: 0; letter-spacing: -0.035em; line-height: 1.1; max-width: 22ch; }
.quote-by { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.quote-face { width: 54px; height: 54px; border-radius: 999px; overflow: hidden; flex: none; background: color-mix(in srgb, currentColor 10%, transparent); }
.quote-face img { width: 100%; height: 100%; object-fit: cover; }
.quote-name { display: block; font-size: 16px; }
.quote-role { display: block; font-size: 14px; color: var(--dim); }
.deck-nav { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.deck-btn { width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: background-color .25s, color .25s; }
.deck-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.deck-count { font-size: 13px; color: var(--dim); }

/* --------------------------------------------------------------- gallery */

.gal { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.gal-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gal-wide { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
.gal-cell { margin: 0; }
.gal-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: var(--r); overflow: hidden; }
.gal-img, .gal-slot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); transition: transform .8s var(--ease); }
.gal-open:hover .gal-img { transform: scale(1.04); }

/* ------------------------------------------------------------------- cta */

.cta-band { position: relative; padding-block: clamp(60px, 7vw, 110px); }

/* The shape sits above the band and breaks out of it, top and bottom. */
.cta-shape {
  position: absolute; z-index: 2; pointer-events: none;
  left: 52%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(280px, 32vw, 520px);
}
.cta-red { position: relative; padding-block: clamp(34px, 4vw, 58px); border-radius: var(--r); }
.cta-band > .cta-red { margin-inline: var(--gutter); }

.cta-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; }
.cta-words { flex: 1 1 340px; max-width: 26ch; position: relative; z-index: 3; }
.cta-eyebrow { margin: 0 0 12px; font-size: 14px; color: rgba(255,255,255,.86); }
.cta-head { margin: 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; }
.cta-side { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); position: relative; z-index: 3; }
.cta-call { display: grid; gap: 4px; padding-right: clamp(18px, 2.4vw, 34px); border-right: 1px solid rgba(255,255,255,.34); }
.cta-call-k { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.cta-call-v { font-size: 15px; color: rgba(255,255,255,.88); }

/* ----------------------------------------------------------- 3D shapes */

.shape { position: relative; width: 100%; }
.shape-video { width: 100%; height: auto; display: block; }
.shape-hero { max-width: 620px; margin-inline: auto; }
/* This film keeps its black ground. On the ink section `screen` makes that
   ground vanish into the background instead of showing as a dark rectangle. */
.shape-blob { max-width: 540px; margin-inline: auto; }
.shape-blob .shape-video {
  mix-blend-mode: screen;
  /* and a soft edge, so the film's frame never reads as a rectangle */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.shape-cta .shape-video { filter: drop-shadow(0 26px 50px rgba(10, 10, 10, .28)); }

/* --------------------------------------------------- sound familiar? --- */

.problem-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 70px); align-items: center;
}
.problem-copy .btn { margin-top: clamp(26px, 3vw, 38px); }
.problem-shape { position: relative; }

/* ------------------------------------------------------------ ad films */

.ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ad { margin: 0; }
.ad-media {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 88%, var(--accent)); aspect-ratio: 9 / 16;
}
.ad-media .nc-slot, .ad-media img { width: 100%; height: 100%; object-fit: cover; }
.ad-media img { transition: transform .9s var(--ease); }
.ad:hover .ad-media img { transform: scale(1.05); }
.reel-play-sm { width: clamp(54px, 5vw, 70px); height: clamp(54px, 5vw, 70px); }
.reel-play-sm svg { width: 18px; height: 18px; }
.ad-title { margin: 14px 0 0; font-size: 15px; font-weight: 600; text-align: center; }

/* --------------------------------------------------------------- contact */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 80px); align-items: start; }
.contact-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 18px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 16px; }
.contact-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); width: 74px; flex: none; }
.contact-v { font-size: 17px; font-weight: 600; }

.form { display: grid; gap: 18px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); }
.field { display: grid; gap: 8px; }
.field label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.field input, .field textarea, .field select {
  font: inherit; color: inherit; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; width: 100%;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: .5; }
.form-hp { position: absolute; left: -9999px; }
.form-note { margin: 0; font-size: 14px; min-height: 20px; }
.form-note.is-bad { color: var(--accent); }

/* ---------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--line); padding-block: clamp(40px, 4vw, 64px); }
.foot-in { display: flex; gap: 32px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { max-width: 320px; }
.logo-foot .logo-svg { height: 22px; }
.foot-note { margin: 16px 0 0; font-size: 14px; color: var(--dim); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; }
.foot-nav a { position: relative; }
.foot-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.foot-nav a:hover::after { transform: scaleX(1); }
.foot-legal { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--dim); }
.foot-quiet { opacity: .5; }
.foot-quiet:hover { opacity: 1; color: var(--accent); }

/* --------------------------------------------------------------- project */

.proj-head { padding-block: clamp(40px, 5vw, 80px) clamp(28px, 3vw, 44px); }
.back { font-size: 14px; color: var(--dim); display: inline-block; margin-bottom: 28px; }
.back:hover { color: var(--accent); }
.proj-title { font-size: clamp(40px, 8vw, 116px); margin: 0; }
.proj-sum { max-width: 60ch; }
.proj-meta { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 60px); margin: 38px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.proj-meta dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.proj-meta dd { margin: 6px 0 0; font-weight: 600; }
.proj-hero { position: relative; border-radius: var(--r); overflow: hidden; }
.proj-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.proj-body { padding-block: clamp(40px, 5vw, 76px); font-size: 18px; line-height: 1.75; }
.proj-body p { margin: 0 0 1.2em; }
.proj-next { display: block; background: var(--ink); color: var(--paper); padding-block: clamp(46px, 6vw, 90px); margin-top: clamp(50px, 6vw, 90px); }
.proj-next .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.proj-next .label { margin: 0; }
.proj-next-title { font-size: clamp(30px, 5vw, 66px); flex-grow: 1; transition: transform .45s var(--ease); }
.proj-next:hover .proj-next-title { transform: translateX(14px); color: var(--accent); }
.proj-next-go { font-size: 32px; color: var(--accent); }

.four { min-height: 60vh; display: grid; align-items: center; }
.four .btn { margin-top: 30px; }

/* ------------------------------------------------------------- lightbox */

.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10,10,10,.94); display: grid; place-items: center; padding: clamp(16px, 4vw, 60px); }
.lightbox[hidden] { display: none; }
.lightbox-in { width: min(1200px, 100%); }
.lightbox-in iframe, .lightbox-in video, .lightbox-in img { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; background: #000; }
.lightbox-in img { aspect-ratio: auto; max-height: 86vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 24px; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 26px; cursor: pointer; }
.lightbox-close:hover { background: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------ grain and cursor */

.grain {
  position: fixed; inset: -50%; z-index: 500; pointer-events: none; opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

.cursor {
  position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none;
  width: 14px; height: 14px; border-radius: 999px; background: var(--accent);
  mix-blend-mode: difference; opacity: 0;
  transition: width .3s var(--ease), height .3s var(--ease), opacity .3s, background-color .3s;
  display: grid; place-items: center;
}
.cursor.is-on { opacity: 1; }
.cursor.is-big { width: 74px; height: 74px; }
.cursor-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .2s; }
.cursor.is-big .cursor-label { opacity: 1; }
@media (hover: none) { .cursor, .grain { display: none; } }

/* -------------------------------------------------------- animation prep */

[data-anim] { will-change: transform, opacity; }
.js [data-anim="up"], .js [data-anim="card"], .js [data-anim="row"] { opacity: 0; transform: translateY(26px); }
.js [data-anim="fade"]  { opacity: 0; }
.js [data-anim="zoom"]  { opacity: 0; transform: scale(.92); }
.js [data-anim="left"]  { opacity: 0; transform: translateX(-40px); }
.js [data-anim="right"] { opacity: 0; transform: translateX(40px); }
.js .split-line { overflow: hidden; }
.js .split-word { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* ----------------------------------------------------------------- login */

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 40px 20px; }
.login { display: grid; justify-items: center; gap: 28px; width: min(420px, 100%); }
.login-logo .logo-svg { height: 30px; }
.login-card { width: 100%; display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 32px; }
.login-card h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.03em; }
.login-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.login-card input { font: inherit; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.login-card .btn { margin-top: 10px; }
.login-error { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--accent); border-radius: 10px; padding: 11px 14px; font-size: 14px; margin: 0; }
.login-back { font-size: 13px; color: var(--dim); text-align: center; }

/* ------------------------------------------------------------ responsive */

.work-filters-center { justify-content: center; width: 100%; margin-top: 8px; }

@media (max-width: 1080px) {
  .about-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid, .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-shape, .problem-shape { order: -1; max-width: 460px; margin-inline: auto; }
  .cta-shape { width: clamp(200px, 34vw, 300px); }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav, .head-cta { display: none; }
  .burger { display: block; }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .proj-next .wrap { gap: 10px; }
  .cta-row { flex-direction: column; align-items: flex-start; }
  .cta-side { width: 100%; justify-content: space-between; }
  .cta-shape { top: 0; transform: translate(-50%, -55%); opacity: .5; }
  .cta-words { max-width: none; }
}

@media (max-width: 520px) {
  .about-badge { right: 8px; bottom: -10px; }
  .form { padding: 22px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   The builder's output: containers and widgets.
   Everything above is the design; everything here is the frame it hangs on.
   ========================================================================= */

.cnt { position: relative; }
.cnt-top { width: 100%; }
.cnt-in { width: 100%; margin-inline: auto; }
.w-wide { max-width: var(--wrap); padding-inline: var(--gutter); }
.w-narrow { max-width: 860px; padding-inline: var(--gutter); }

.bg-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-layer .bg-video { width: 100%; height: 100%; object-fit: cover; }
.bg-layer .bg-overlay { position: absolute; inset: 0; display: block; }
.cnt > .cnt-in, .cnt > .cnt, .cnt > .wg { position: relative; z-index: 1; }

.wg { position: relative; min-width: 0; }

/* headings and text ----------------------------------------------------- */

.hd { margin: 0; text-wrap: balance; }
/* 70 and 64 on the 1440 frame, at the design's own line heights. */
.hd-xl { font-size: clamp(38px, 4.861vw, 70px); line-height: 1; letter-spacing: -0.02em; }
.hd-lg { font-size: clamp(34px, 4.444vw, 64px); line-height: .9193; letter-spacing: -0.02em; }
.hd-ml { font-size: clamp(28px, 3.61vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
.hd-md { font-size: clamp(24px, 2.8vw, 38px); line-height: 1.06; letter-spacing: -0.03em; }
.hd-sm { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
.hd em, .tx em { font-style: normal; color: var(--accent); }
.hd-blur { color: var(--accent); }
.js .hd-blur { filter: blur(14px); opacity: .55; }
.hd-blur.is-sharp { filter: blur(0); opacity: 1; transition: filter 1.1s var(--ease), opacity 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .hd-blur { filter: none; opacity: 1; } }

.tx { line-height: 1.55; }
.tx-lg { font-size: clamp(17px, 1.4vw, 20px); }
.tx-md { font-size: 16px; }
.tx-sm { font-size: 14px; }
/* Body copy in the design is Inter Extra Light at 15. */
.tx-fig { font-size: 15px; font-weight: 200; line-height: 1.5; color: var(--ink); }
.tx p { margin: 0 0 1em; }
.tx p:last-child { margin-bottom: 0; }
.tx a { border-bottom: 1px solid currentColor; }

.ta-left { text-align: left; }
.ta-center { text-align: center; margin-inline: auto; }
.ta-right { text-align: right; margin-left: auto; }
.ta-center .label { justify-content: center; }

.label-bare::before { display: none; }

.btn-text { padding-inline: 0; min-height: auto; border-bottom: 1px solid currentColor; border-radius: 0; }
.btn-text:hover { color: var(--accent); }

/* media ----------------------------------------------------------------- */

.im { margin: 0; }
.im img { width: 100%; display: block; }
.im-zoom { overflow: hidden; border-radius: inherit; }
.im-zoom img { transition: transform .9s var(--ease); }
.im-zoom:hover img { transform: scale(1.04); }
.wg-cap { margin: 10px 0 0; font-size: 13px; color: var(--dim); }

.vd { position: relative; border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, var(--ink) 90%, var(--accent)); }
.vd iframe, .vd-inline { width: 100%; height: 100%; border: 0; display: block; }
.vd-inline { border-radius: var(--r); object-fit: cover; }
.vd-poster { width: 100%; height: 100%; object-fit: cover; }

.shape { width: 100%; margin-inline: auto; position: relative; }
.shape-video { width: 100%; height: auto; display: block; position: relative; z-index: 1; }

/* The glow the shape floats on in the design: a 436 circle of the red at
   45% with a 203 layer blur, dropped 138 right and 140 down from the shape's
   corner. Both offsets are measured on the 583 width — a percentage margin
   resolves against the width, which is exactly what is wanted — and the blur
   is in cqw so it keeps its proportion as the shape scales. */
.shape { container-type: inline-size; }
.shape-disc {
  position: absolute; z-index: 0; display: block; pointer-events: none;
  width: var(--disc, 74.8%); aspect-ratio: 1; border-radius: 50%;
  background: var(--disc-c, var(--accent));
  opacity: var(--disc-o, .45);
  filter: blur(var(--disc-b, 17cqw));
  left: var(--disc-x, 23.7%); top: 0; margin-top: var(--disc-y, 24%);
}
.shape-screen .shape-video { mix-blend-mode: screen; }
.shape-mask .shape-video {
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.shape-overlap {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%); pointer-events: none;
}


/* small pieces ----------------------------------------------------------- */

.sp { height: var(--sp, 60px); }
@media (max-width: 860px) { .sp { height: var(--sp-m, 32px); } }

.dv { border-top-color: var(--line) !important; opacity: .9; }

/* Slider paging, as drawn: small filled dots, the current one in the red. */
.svc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.svc-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, currentColor 26%, transparent);
  cursor: pointer; transition: background-color .3s, transform .3s var(--ease);
}
.svc-dots button:hover { transform: scale(1.25); }
.svc-dots button[aria-current="true"] { background: var(--accent); }
.dv-dots { border: 0 !important; opacity: 1; }
.dv-bleed { width: 100vw !important; max-width: 100vw; margin-inline: calc(50% - 50vw); }

.ls { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ls li { position: relative; padding-left: 26px; }
.ls-dot li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; border-radius: 99px; background: var(--accent); }
.ls-dash li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.ls-tick li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
ol.ls { counter-reset: n; }
ol.ls li { counter-increment: n; }
ol.ls li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; color: var(--accent); font-weight: 700; font-size: 13px; }

.social-row { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; }
.social-row a { border-bottom: 1px solid transparent; }
.social-row a:hover { border-bottom-color: var(--accent); opacity: 1; }

.logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: clamp(18px, 3vw, 44px); align-items: center; }
.logo-cell { display: grid; place-items: center; }
.logo-img { max-height: 54px; width: auto; object-fit: contain; }
.logo-blank { display: block; width: 100%; height: 46px; border-radius: 8px; background: color-mix(in srgb, currentColor 8%, transparent); }
.logo-grey .logo-cell { opacity: .55; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .4s var(--ease); }
.logo-grey .logo-cell:hover { opacity: 1; filter: none; transform: translateY(-3px); }

.work-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.work-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.svc-slider { --card: 300px; }
.svc-card { flex: 0 0 var(--card); }

.raw { width: 100%; }
.raw iframe { max-width: 100%; }

/* the admin strip and the preview flag ----------------------------------- */

.adminbar {
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 16px;
  background: #0f0f12; color: #f2f2f5;
  padding: 0 16px; height: 38px;
  font: 600 12px/1 Inter, system-ui, sans-serif;
}
.adminbar a { opacity: .78; }
.adminbar a:hover { opacity: 1; }
.adminbar-home { display: flex; align-items: center; gap: 7px; opacity: 1 !important; }
.adminbar-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); }
.adminbar-flag { background: rgba(224,160,0,.18); color: #fbbf24; border-radius: 99px; padding: 3px 9px; }
.adminbar-out { margin-left: auto; }
.has-adminbar .head { top: 38px; }

.preview-flag {
  background: #0a84ff; color: #fff; text-align: center;
  padding: 10px 16px; font: 600 13px Inter, system-ui, sans-serif;
}
.preview-flag a { text-decoration: underline; }

/* ---------------------------------------- header and footer, as trees --- */

.logo { --logo-h: 26px; }
.logo .logo-svg, .logo .logo-img { height: var(--logo-h); width: auto; }

/* Inside the builder the header is just another block on the page; on the
   site it sticks. `top` belongs to the sticky one only — left on a relative
   header it shoves it down over the hero without giving back the room. */
.canvas .head { position: relative; top: auto; }
.head > .cnt { width: 100%; }

.nav { --nav-gap: 4px; --nav-size: 15px; gap: var(--nav-gap); margin-left: 0; }
.nav-a { font-size: var(--nav-size); }
.nav-stack { flex-direction: column; align-items: flex-start; }

.nav-fx-fill .nav-a::before { display: none; }
.nav-fx-fill .nav-a:hover { background: var(--accent); color: #fff; }
.nav-fx-colour .nav-a::before { display: none; }
.nav-fx-colour .nav-a:hover { color: var(--accent); }
.nav-fx-none .nav-a::before { display: none; }

.burger { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }

.foot-signin { padding-top: 18px; font-size: 12px; }

@media (max-width: 860px) {
  .nav-collapse { display: none; }
  .head .head-cta { display: none; }
}

/* =========================================================================
   The rest of the widget set
   ========================================================================= */

.ic { display: block; }
.ic-wrap { display: inline-grid; place-items: center; color: var(--accent); }
.ic-wrap.ic-circle, .ic-wrap.ic-square {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: .6em; border-radius: 999px;
}
.ic-wrap.ic-square { border-radius: 14px; }

/* icon box */
.ib { display: grid; gap: 14px; }
.ib-side { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.ib-top .ic-wrap { justify-self: start; }
.ib-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.ib-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--dim); }
a.ib { transition: transform .35s var(--ease); }
a.ib:hover { transform: translateY(-3px); opacity: 1; }

/* accordion */
.ac { border-top: 1px solid var(--line); }
.ac-row { border-bottom: 1px solid var(--line); }
.ac-head {
  width: 100%; display: flex; align-items: center; gap: 18px; text-align: left;
  background: transparent; border: 0; padding: 20px 0; cursor: pointer;
}
.ac-title { flex-grow: 1; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -0.02em; }
.ac-mark { width: 18px; height: 18px; position: relative; flex: none; }
.ac-mark::before, .ac-mark::after {
  content: ""; position: absolute; inset: 8px 0 auto; height: 2px; background: currentColor;
  transition: transform .35s var(--ease);
}
.ac-mark::after { transform: rotate(90deg); }
.ac-row.is-open .ac-mark::after { transform: rotate(0); }
.ac-row.is-open .ac-title { color: var(--accent); }
.ac-body { overflow: hidden; height: 0; transition: height .35s var(--ease); }
.ac-row.is-open .ac-body { height: auto; }
.ac-in { padding: 0 38px 22px 0; color: var(--dim); line-height: 1.7; max-width: 70ch; }

/* tabs */
.tb-heads { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); }
.tb-head {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 12px 18px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--dim);
}
.tb-head.is-on { color: inherit; border-bottom-color: var(--accent); }
.tb-pane { display: none; padding: 24px 0 0; line-height: 1.7; color: var(--dim); max-width: 70ch; }
.tb-pane.is-on { display: block; }

/* counter */
.ct-top { display: flex; align-items: baseline; gap: 2px; font-size: clamp(34px, 4.6vw, 62px); }
.ct-pre, .ct-suf { color: var(--accent); }
.ct-label { margin: 8px 0 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ta-center .ct-top { justify-content: center; }

/* progress */
.pg-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.pg-rail { background: color-mix(in srgb, currentColor 12%, transparent); border-radius: 999px; overflow: hidden; }
.pg-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 1.1s var(--ease); }
.pg.is-on .pg-fill { width: var(--pct); }

/* rating */
.rt { display: flex; align-items: center; gap: 4px; }
.rt-star { color: color-mix(in srgb, currentColor 22%, transparent); }
.rt-star.is-on { color: var(--accent); }
.rt-star .ic { fill: currentColor; stroke: none; }
.rt-note { margin-left: 10px; font-size: 14px; color: var(--dim); }

/* notice */
.al {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 12px; border: 1px solid;
}
.al strong { display: block; margin-bottom: 2px; }
.al p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .85; }
.al-info { background: color-mix(in srgb, var(--ink) 5%, transparent); border-color: var(--line); }
.al-ok   { background: rgba(22,163,74,.1);  border-color: rgba(22,163,74,.4);  color: #15803d; }
.al-warn { background: rgba(224,160,0,.12); border-color: rgba(224,160,0,.45); color: #92700a; }
.al-bad  { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); color: var(--accent); }
.al-x { background: transparent; border: 0; font-size: 20px; cursor: pointer; line-height: 1; opacity: .6; }
.al-x:hover { opacity: 1; }

/* quote */
.qt { margin: 0; display: grid; gap: 14px; }
.qt-mark { color: var(--accent); }
.qt blockquote {
  margin: 0; font-size: clamp(19px, 2vw, 27px); line-height: 1.4;
  letter-spacing: -0.02em; max-width: 34ch;
}
.qt figcaption { font-size: 14px; color: var(--dim); }
.qt figcaption strong { color: inherit; }
.qt figcaption span::before { content: " \2014 "; }

/* table */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.tbl-zebra tbody tr:nth-child(odd) { background: color-mix(in srgb, currentColor 4%, transparent); }

/* price card */
.pr {
  position: relative; display: grid; gap: 14px; align-content: start;
  padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r);
}
.pr-pick { border-color: var(--accent); box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 14%, transparent); }
.pr-badge {
  position: absolute; top: -12px; left: clamp(24px, 3vw, 34px);
  background: var(--accent); color: #fff; border-radius: 999px; padding: 5px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pr-name { margin: 0; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.pr-price { font-size: clamp(30px, 3.4vw, 46px); }
.pr-period { font-size: 15px; letter-spacing: 0; color: var(--dim); font-weight: 400; }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.pr-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.pr-list .ic { color: var(--accent); margin-top: 3px; }
.pr .btn { justify-self: start; margin-top: 6px; }

/* person */
.pe { display: grid; gap: 16px; }
.pe-face { border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.pe-face img { width: 100%; height: 100%; object-fit: cover; }
.pe-round { border-radius: 999px; }
.pe-name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pe-role { margin: 2px 0 0; font-size: 14px; color: var(--accent); }
.pe-text { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--dim); }
.pe-links { display: flex; gap: 10px; margin-top: 14px; }
.pe-links a { color: var(--dim); }
.pe-links a:hover { color: var(--accent); opacity: 1; }

/* countdown */
.cd { display: flex; gap: clamp(14px, 2vw, 30px); }
.ta-center.cd { justify-content: center; }
.cd-cell { display: grid; gap: 4px; text-align: center; min-width: 68px; }
.cd-cell b {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 46px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1;
}
.cd-cell span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cd-over { font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; }

/* map */
.mp { overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.mp iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4) contrast(1.05); }

/* share */
.sh { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-btn {
  --sh: 42px;
  width: var(--sh); height: var(--sh); display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: transparent; cursor: pointer; border-radius: 999px;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.sh-square .sh-btn { border-radius: 12px; }
.sh-text .sh-btn { width: auto; padding: 0 16px; gap: 8px; grid-auto-flow: column; font-size: 14px; font-weight: 600; }
.sh-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

/* carousel */
.cr { position: relative; }
.cr-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: none;
}
.cr-track::-webkit-scrollbar { display: none; }
.cr-slide { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
.cr-face { border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.cr-img { width: 100%; height: 100%; object-fit: cover; }
.cr-blank { display: block; width: 100%; height: 100%; }
.cr figcaption { margin-top: 10px; font-size: 13px; color: var(--dim); }

/* =========================================================================
   Phones. The design was only ever drawn at 1440, so this is where the page
   is told how to behave once there is no room for any of it.
   ========================================================================= */

@media (max-width: 767px) {
  /* Body copy that holds the design's weight is too light to read small. */
  .tx-fig { font-size: 16px; line-height: 1.6; }

  /* The headline is the page. Give it the room and take back the tracking
     that only makes sense at 70px. */
  .hd-xl { font-size: clamp(32px, 9.6vw, 40px); letter-spacing: -0.03em; }
  .hd-lg { font-size: clamp(29px, 8.8vw, 36px); letter-spacing: -0.03em; line-height: .96; }
  .hd-ml { font-size: clamp(26px, 8vw, 34px); }
  .hd-md { font-size: clamp(22px, 6.4vw, 28px); }

  /* Three figures still fit across a phone, just not at desktop weight. */
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .stat-top { font-size: clamp(26px, 8vw, 34px); }
  .stat-label { font-size: 13px; line-height: 1.35; }

  /* The rule's markers are placed for a 1440 frame; on a phone the outer two
     sit almost on the edge, so the pattern is pulled in. */
  .dot-rule, .head::after {
    background-position: 8% 50%, 29% 50%, 50% 50%, 71% 50%, 92% 50%, 0 50%;
  }

  /* A card that is mostly an empty image well eats the whole screen. */
  .svc-card-media { aspect-ratio: 4 / 3; }
  .svc-card-title { font-size: 20px; }

  /* A button must not be wider than the column it stands in. */
  .btn { max-width: 100%; }

  /* Anything placed by hand at a desktop coordinate comes back into the flow;
     a phone has nowhere to put it. */
  .wg[style*="position:absolute"] { position: static !important; }
}

/* Tablets: the gutter is still generous, the type need not be. */
@media (min-width: 768px) and (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .dot-rule, .head::after {
    background-position: 5% 50%, 26% 50%, 48% 50%, 69% 50%, 90% 50%, 0 50%;
  }
}

/* =========================================================================
   The widgets added after the first round.
   ========================================================================= */

/* gallery ----------------------------------------------------------------- */
.gl { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap, 14px); }
.gl-cell { display: block; overflow: hidden; border-radius: var(--r, 12px); background: color-mix(in srgb, currentColor 7%, transparent); }
.gl-img { width: 100%; height: 100%; aspect-ratio: var(--ratio, 1); object-fit: cover; transition: transform .7s var(--ease); }
.gl-cell:hover .gl-img { transform: scale(1.05); }

.lightbox {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: rgba(10, 10, 10, .92); padding: 4vmin; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; }

/* flip box ---------------------------------------------------------------- */
.fb { perspective: 1400px; height: var(--fb-h, 300px); }
.fb-in { position: relative; width: 100%; height: 100%; transition: transform .7s var(--ease); transform-style: preserve-3d; }
.fb:hover .fb-in, .fb:focus-visible .fb-in { transform: rotateY(180deg); }
.fb-y:hover .fb-in, .fb-y:focus-visible .fb-in { transform: rotateX(180deg); }
.fb-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  padding: 30px; border-radius: var(--r); border: 1px solid var(--line);
}
.fb-face h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.fb-face p { margin: 0; color: var(--dim); font-size: 15px; }
.fb-back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); border-color: transparent; }
.fb-y .fb-back { transform: rotateX(180deg); }
.fb-back p { color: rgba(245, 245, 247, .72); }

/* call to action ---------------------------------------------------------- */
.cta {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  min-height: var(--cta-h, 340px); padding: clamp(28px, 4vw, 60px);
  border-radius: var(--r); background: color-mix(in srgb, currentColor 6%, transparent);
  background-size: cover; background-position: center;
}
.cta-center { align-items: center; text-align: center; }
.cta-shot { color: #fff; }
.cta-shot .cta-text { color: rgba(255, 255, 255, .8); }
.cta-title { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.035em; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.04; }
.cta-text { margin: 0; color: var(--dim); max-width: 60ch; }
.cta-act { margin-top: 8px; }

/* price table ------------------------------------------------------------- */
.pt { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; }
.pt-col {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--r);
}
.pt-col.is-best { border-color: var(--accent); box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 16%, transparent); }
.pt-flag {
  position: absolute; top: -11px; left: 26px;
  background: var(--accent); color: #fff; border-radius: 99px;
  padding: 4px 11px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pt-name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pt-price { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 38px; letter-spacing: -0.03em; }
.pt-price small { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--dim); margin-left: 7px; letter-spacing: 0; }
.pt-text { margin: 0; font-size: 14px; color: var(--dim); }
.pt-lines { margin: 8px 0 auto; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.pt-lines li { position: relative; padding-left: 22px; }
.pt-lines li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.pt-col .btn { margin-top: 18px; }

/* price list -------------------------------------------------------------- */
.pl { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pl-row { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pl-l { display: grid; gap: 2px; }
.pl-l b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pl-l small { font-size: 13px; color: var(--dim); }
.pl-dots { flex: 1; border-bottom: 1px dotted var(--line); align-self: center; min-width: 20px; }
.pl-p { font-family: var(--font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.02em; flex: none; }

/* slideshow --------------------------------------------------------------- */
.sl { position: relative; height: var(--sl-h, 460px); border-radius: var(--r); overflow: hidden; }
.sl-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease);
  background: var(--ink) center / cover no-repeat; color: #fff;
  display: flex; align-items: flex-end; padding: clamp(24px, 4vw, 52px);
}
.sl-slide.is-on { opacity: 1; }
.sl-body { display: grid; gap: 10px; max-width: 46ch; }
.sl-body h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.05; }
.sl-body p { margin: 0; color: rgba(255, 255, 255, .82); }
.sl-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(10, 10, 10, .3); color: #fff;
}
.sl-arrow:hover { background: var(--accent); border-color: var(--accent); }
.sl-prev { left: 16px; }
.sl-next { right: 16px; }
.sl-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.sl-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .45); cursor: pointer; }
.sl-dots button[aria-current="true"] { background: var(--accent); width: 22px; }

/* animated headline ------------------------------------------------------- */
.anim-head .anim-slot { color: var(--accent); display: inline-block; }
.anim-head .anim-slot::after { content: ""; display: inline-block; width: 2px; height: .9em; background: currentColor; margin-left: 3px; vertical-align: -.08em; animation: caret 1s steps(1) infinite; }
.anim-head[data-anim-how="slide"] .anim-slot::after,
.anim-head[data-anim-how="fade"] .anim-slot::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.anim-head[data-anim-how="slide"] .anim-slot { transition: transform .4s var(--ease), opacity .4s; }
.anim-head[data-anim-how="fade"] .anim-slot { transition: opacity .45s; }
.anim-slot.is-out { opacity: 0; transform: translateY(-40%); }

/* hotspots ---------------------------------------------------------------- */
.hs { position: relative; border-radius: var(--r); overflow: hidden; }
.hs-img { width: 100%; height: auto; display: block; }
.hs-pin { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; }
.hs-pin i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px;
  background: var(--accent); color: #fff; font-style: normal; font-weight: 700;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pin 2.4s infinite;
}
@keyframes pin { 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hs-note {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: 230px; display: grid; gap: 4px;
  background: var(--ink); color: var(--paper); padding: 10px 13px; border-radius: 10px;
  font-size: 13px; text-align: left; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.hs-note small { color: rgba(245, 245, 247, .7); }
.hs-pin:hover .hs-note, .hs-pin:focus-visible .hs-note { opacity: 1; }

/* before and after -------------------------------------------------------- */
.cmp { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: var(--ratio, 16/9); }
.cmp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-top { position: absolute; inset: 0; width: var(--cmp, 50%); overflow: hidden; }
.cmp-top .cmp-img { width: 100vw; max-width: none; height: 100%; }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--cmp, 50%); width: 2px; background: #fff; pointer-events: none; }
.cmp-line::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 99px;
  background: #fff; color: var(--ink); font-size: 15px;
}
.cmp-handle { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: ew-resize; }

/* timeline ---------------------------------------------------------------- */
.tl { margin: 0; padding: 0 0 0 26px; list-style: none; border-left: 1px solid var(--line); display: grid; gap: 30px; }
.tl-row { position: relative; display: grid; gap: 6px; }
.tl-row::before { content: ""; position: absolute; left: -31px; top: 6px; width: 11px; height: 11px; border-radius: 99px; background: var(--accent); }
.tl-when { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tl-body h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.02em; }
.tl-body p { margin: 0; color: var(--dim); font-size: 15px; }

/* steps ------------------------------------------------------------------- */
.st { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; counter-reset: st; }
.st-row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.st-cell { display: grid; gap: 7px; padding-top: 18px; border-top: 2px solid var(--accent); }
.st-n { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: .08em; color: var(--accent); }
.st-cell h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.st-cell p { margin: 0; font-size: 15px; color: var(--dim); }

/* picture with text ------------------------------------------------------- */
.bn { position: relative; display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: var(--ratio, 4/3); color: #fff; }
.bn-img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bn:hover .bn-img { transform: scale(1.05); }
.bn-dim { position: absolute; inset: 0; background: linear-gradient(transparent 30%, #0a0a0a); pointer-events: none; }
.bn-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 5px; }
.bn-body h3 { margin: 0; font-size: clamp(19px, 1.9vw, 26px); letter-spacing: -0.02em; }
.bn-body p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.bn-center .bn-body { inset: 0; align-content: center; justify-items: center; text-align: center; }
.bn-top .bn-body { inset: 0 0 auto 0; }
.bn-center .bn-dim, .bn-top .bn-dim { background: rgba(10, 10, 10, .45); }
.bn-hover .bn-body, .bn-hover .bn-dim { opacity: 0; transition: opacity .4s; }
.bn-hover:hover .bn-body, .bn-hover:hover .bn-dim { opacity: 1; }

/* sign in, search, breadcrumbs ------------------------------------------- */
.lg-form { max-width: 420px; }
.lg-title { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }

.sr { display: flex; gap: 8px; align-items: center; }
.sr input { flex: 1; min-width: 0; font: inherit; padding: 13px 16px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: inherit; }
.sr-line input { border-radius: 0; border-width: 0 0 1px; padding-inline: 0; }

.bc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.bc a:hover { color: var(--accent); }
.bc [aria-current] { color: inherit; }
.bc-sep { font-style: normal; opacity: .5; }

/* pages list -------------------------------------------------------------- */
.pg { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; }
.pg-card { display: grid; gap: 7px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .3s, transform .3s var(--ease); }
.pg-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.pg-card h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.pg-card p { margin: 0; font-size: 14px; color: var(--dim); }

/* audio, avatars, code ---------------------------------------------------- */
.au { display: grid; gap: 8px; }
.au-title { margin: 0; font-size: 14px; font-weight: 600; }
.au audio { width: 100%; }

.sk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sk-row { display: flex; }
.sk-face {
  width: var(--sk, 44px); height: var(--sk, 44px); border-radius: 99px; object-fit: cover;
  border: 2px solid var(--paper); margin-left: calc(var(--sk, 44px) / -3.2); display: grid; place-items: center;
}
.sk-face:first-child { margin-left: 0; }
.sk-blank { background: var(--accent); color: #fff; font-weight: 700; }
.sk-text { font-size: 14px; color: var(--dim); }

.cd { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--ink); color: var(--paper); }
.cd-lang { position: absolute; top: 10px; right: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 245, 247, .5); }
.cd pre { margin: 0; padding: 22px; overflow: auto; }
.cd code { font: 400 13px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* slide-in panel ---------------------------------------------------------- */
.oc-panel {
  position: fixed; z-index: 320; top: 0; bottom: 0; width: min(var(--oc-w, 380px), 92vw);
  background: var(--paper); color: var(--ink); padding: 30px;
  overflow: auto; box-shadow: 0 0 80px rgba(10, 10, 10, .3);
  transition: transform .45s var(--ease);
}
.oc-right .oc-panel { right: 0; transform: translateX(100%); }
.oc-left .oc-panel { left: 0; transform: translateX(-100%); }
.oc-top .oc-panel { left: 0; right: 0; bottom: auto; width: auto; height: auto; transform: translateY(-100%); }
.oc-panel[hidden] { display: block; visibility: hidden; }
.oc.is-open .oc-panel { transform: none; visibility: visible; }
.oc-veil { position: fixed; inset: 0; z-index: 310; background: rgba(10, 10, 10, .5); }
.oc-veil[hidden] { display: none; }
.oc-x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; }
.oc-title { margin: 0 0 14px; font-size: 22px; letter-spacing: -0.02em; }

@media (max-width: 767px) {
  .gl, .pt, .pg { grid-template-columns: minmax(0, 1fr); }
  .st-row { grid-template-columns: minmax(0, 1fr); }
  .pl-row { flex-wrap: wrap; }
  .pl-dots { display: none; }
}

/* =========================================================================
   The second design. Numbers off the .fig where it could be read, and off
   its own preview image for the sections below the services row.
   ========================================================================= */

/* figures with a rule over each ------------------------------------------- */
.stats-ruled { gap: 0; }
.stats-ruled .stat { padding-top: 22px; position: relative; }
.stat-rule {
  position: absolute; top: 0; left: 0;
  width: 66px; height: 1px; background: #d9d9d9;
}
.stats-grid { column-gap: var(--pitch, 0px); }

/* the card slider, sized and glowing as drawn ----------------------------- */
.svc-slider { position: relative; }
.svc-card { border-radius: var(--card-r, 16px); overflow: hidden; }
.svc-card-media { border-radius: 0; }
.svc-slider .svc-card-media { height: var(--card-h, auto); }

/* Two rows that scroll together: the track becomes a grid that fills down
   the column first, so a sideways scroll moves whole pairs. */
.svc-rows .svc-track {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 2), auto);
  gap: 18px clamp(14px, 1.8vw, 24px);
}
.svc-rows .svc-card { flex: none; width: var(--card); }
/* Columns stay the width of a card. Left to size themselves they stretch to
   fill a wide screen, which both pulls the cards apart and leaves the track
   with nothing to scroll, so the arrows have nothing to do. */
.svc-rows .svc-track { grid-auto-columns: var(--card); justify-content: start; }

/* Cards that are only a picture: the words are for the builder, not the page. */
.svc-plain .svc-card-title, .svc-plain .svc-card-text, .svc-plain .svc-card-n { display: none; }
.svc-plain .svc-card-media { margin: 0; }

/* A narrow red streak standing behind the middle of the row, as drawn. */
.svc-glow {
  position: absolute; left: 50%; top: -4%; z-index: 0;
  width: 22%; height: 108%; transform: translateX(-50%);
  background: radial-gradient(ellipse 26% 50% at 50% 50%, var(--accent), transparent 72%);
  filter: blur(34px); opacity: .5; pointer-events: none;
}
.svc-track, .svc-dots { position: relative; z-index: 1; }

/* the rule, with markers that travel ------------------------------------- */
.dot-rule-drift {
  animation: driftDots 18s linear infinite;
}
@keyframes driftDots {
  to {
    background-position:
      23.902% 50%, 44.32% 50%, 67.32% 50%, 86.48% 50%, 105.92% 50%, 0 50%;
  }
}
@media (prefers-reduced-motion: reduce) { .dot-rule-drift { animation: none; } }

/* the showreel panel ------------------------------------------------------ */
.rl {
  position: relative; overflow: hidden;
  height: var(--rl-h, 420px); border-radius: var(--rl-r, 18px);
  background: #000; display: grid; place-items: center;
}
.rl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-label {
  position: absolute; top: 20px; left: 24px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245, 245, 247, .62);
}
.rl-title {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 900; color: #fff;
  font-size: clamp(28px, 3.6vw, 52px); letter-spacing: -0.03em;
}
.rl-play { position: absolute; z-index: 3; inset: auto auto 24px 50%; transform: translateX(-50%); }

/* the band that sits in from both edges ---------------------------------- */
.inset-band { border-radius: 22px; overflow: hidden; }

/* the red band at the end, with the shape lying across it ----------------- */
.shape-overlap { margin-block: -8% -12%; }

@media (max-width: 767px) {
  .stats-ruled .stat { padding-top: 16px; }
  .stat-rule { width: 40px; }
  .svc-rows .svc-track { grid-template-rows: repeat(2, auto); }
  .rl-title { font-size: clamp(22px, 7vw, 30px); }
  .svc-glow { width: 80%; }
}

/* A section title with a rule either side, as the design draws them. */
.hd-ruled { display: flex; align-items: center; justify-content: center; gap: 18px; }
.hd-ruled::before, .hd-ruled::after {
  content: ""; width: 81px; height: 1px; flex: none;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
/* The class lands on the widget's wrapper, so the heading inside it must give
   up the auto margins that "centre" normally hands it. */
.hd-ruled .hd { margin-inline: 0; }
@media (max-width: 767px) { .hd-ruled::before, .hd-ruled::after { width: 32px; } }

@media (max-width: 767px) {
  /* The figures sit on a 238px pitch at 1440; on a phone that pitch is the
     whole screen, so the columns get to share what there is instead. */
  .stats-grid { column-gap: 14px !important; }
  .stats-ruled { gap: 14px; }

  /* A card wider than the screen cannot be reached past its first one. */
  .svc-slider { --card: min(var(--card, 300px), calc(100vw - 72px)); }

  .rl { height: min(var(--rl-h, 420px), 62vw) !important; min-height: 220px; }
  .rl-label { top: 14px; left: 16px; }

  /* The band comes in from the edge by less when there is less edge. */
  .inset-band { border-radius: 16px; }
}

/* =========================================================================
   Against the design, side by side.
   ========================================================================= */

/* The markers on the rule carry a small halo, as drawn. */
/* A 5px marker still, but sitting in a 13px box so it can carry its halo.
   A background-position percentage measures the box's travel, so the sums
   move from x/(1440-5) to (x-4)/(1440-13). */
.dot-rule, .head::after {
  --dot: radial-gradient(circle at 50% 50%,
    var(--accent) 19%,
    color-mix(in srgb, var(--accent) 55%, transparent) 25%,
    color-mix(in srgb, var(--accent) 18%, transparent) 42%,
    transparent 62%);
  height: 13px;
  background-size: 13px 13px, 13px 13px, 13px 13px, 13px 13px, 13px 13px, 100% 1px;
  background-position: 3.644% 50%, 24.176% 50%, 47.302% 50%, 66.573% 50%, 86.125% 50%, 0 50%;
}
@keyframes driftDots {
  to {
    background-position:
      23.644% 50%, 44.176% 50%, 67.302% 50%, 86.573% 50%, 106.125% 50%, 0 50%;
  }
}

/* A placeholder card is a solid grey tile in the design, not a hatch. */
.card-img-empty,
.svc-card .card-img-empty { background: #d9d9d9; }
.svc-card { background: transparent; }
.svc-card-media { background: #d9d9d9; }
.inverted .card-img-empty, .inverted .svc-card-media { background: #d9d9d9; }

/* The rules either side of a section title are red. */
.hd-ruled::before, .hd-ruled::after {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* The beam passes in front of the cards, not behind them, and it runs down
   the gap between two of them rather than across one. The design starts the
   row at x=-39 on a 1440 frame, which is what puts a gap on the centre line;
   `--start` carries that offset so the beam and the gap agree. */
.svc-glow {
  left: calc(50% + var(--start, 0px) / 2);
  width: 70px; height: 118%; top: -9%; z-index: 3;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 8px 100% no-repeat,
    radial-gradient(ellipse 46% 44% at 50% 50%, var(--accent), transparent 76%);
  filter: blur(9px); opacity: .92;
}
.svc-bleed .svc-track { padding-inline-start: 0; margin-inline-start: var(--start, 0px); }

/* The arrows sit under the row, dark and round. */
.svc-nav { margin-top: 22px; gap: 14px; position: relative; z-index: 2; }
.deck-btn {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 999px; border: 0; font-size: 11px; line-height: 1;
  background: var(--ink); color: var(--paper);
}
.deck-btn:hover { background: var(--accent); color: #fff; }
.deck-btn.is-idle { opacity: .35; cursor: default; }
.deck-btn.is-idle:hover { background: var(--ink); color: var(--paper); }
.svc-dark .deck-btn.is-idle:hover { background: var(--paper); color: var(--ink); }
/* On a dark section they swap round, the way the design draws them. */
.svc-dark .deck-btn { background: var(--paper); color: var(--ink); }
.svc-dark .deck-btn:hover { background: var(--accent); color: #fff; }

/* The logo row: named grey tiles that fall away at both ends. */
.logo-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 18px; }
.logo-blank {
  display: grid; place-items: center; text-align: center;
  width: 100%; height: 92px; padding: 8px; border-radius: 14px;
  background: #e8e8ea; color: #0a0a0a;
  font-size: 11px; font-weight: 600; line-height: 1.3;
}
.logo-fade .logo-cell:first-child .logo-blank,
.logo-fade .logo-cell:last-child .logo-blank { color: transparent; }
.logo-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

/* The knot lies across the red band: out over its top edge and cut off at
   the bottom by the band's own rounded corners. Taking it out of the flow
   keeps it from making the band taller than it is drawn. */
/* The shape hangs off the band, so its own wrapper has to step out of the
   way — otherwise "absolute" means the little grid cell it was dropped in. */
.wg-shape:has(> .shape-overlap) { position: static; }
.shape-overlap {
  /* `top: auto` matters: an older rule sets top, and an absolutely placed
     box with both top and bottom is stretched between them rather than
     taking the height of what is inside it. */
  position: absolute; left: 50%; top: auto; bottom: var(--cut, -18px); z-index: 2;
  transform: translateX(-50%);
  margin: 0;
  pointer-events: none;
  /* The band must not clip this, or the top would be cut off along with the
     bottom. So the band is left open and the shape cuts its own bottom, at
     exactly the line where the band ends. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% + var(--cut, -18px)), transparent 0);
  mask-image: linear-gradient(to bottom, #000 calc(100% + var(--cut, -18px)), transparent 0);
}
/* No shadow under it. The keyed film carries a faint haze across the whole
   frame, and a drop-shadow of that haze reads as a pale box behind the shape. */
.shape-overlap .shape-video { filter: none; }

/* The header carries a few social marks between the menu and the button. */
.head-social { display: flex; align-items: center; gap: 14px; }
.head-social a { display: grid; place-items: center; color: var(--ink); opacity: .82; transition: opacity .2s, color .2s; }
.head-social a:hover { opacity: 1; color: var(--accent); }

@media (max-width: 960px) { .head-social { display: none; } }

@media (max-width: 767px) {
  .svc-glow { width: 44px; }
  .logo-blank { height: 68px; font-size: 10px; }
  .shape-overlap { --cut: -10px; }
}

/* The header's marks sit as a row between the menu and the button; the
   button keeps the design's own capitals rather than being shouted. */
/* The menu is centred on the page and out of the flow, so what is left —
   the logo, the marks and the button — is laid out as a plain row and the
   marks are pushed over to sit beside the button, as the design has them.
   A grid would pin them to a track instead. */
.head .cnt-top > .cnt-in { display: flex; align-items: center; justify-content: flex-start; }
.head-social { margin-left: auto; }
.head-social .social-row { display: flex; align-items: center; gap: 14px; }
.head-cta .btn { text-transform: none; letter-spacing: -0.01em; }

/* =========================================================================
   Read off the design exported at 1440x5085 and measured, rather than
   guessed from a preview.
   ========================================================================= */

/* The figures carry a thin red rule down their left side, 62 tall, not a
   grey one above. */
.stats-ruled .stat { padding-top: 0; padding-left: 18px; }
.stat-rule {
  top: 2px; left: 0; width: 1px; height: 62px;
  background: var(--accent);
}

/* The eyebrow is underlined, not dashed in front of. */
.label { display: block; padding-bottom: 7px; position: relative; }
.label::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: calc(100% + 26px); height: 1px; background: var(--accent);
  margin: 0;
}
.label-center { text-align: center; }
.label-center::before { left: 50%; transform: translateX(-50%); }
.label-bare::before { display: none; }

/* A play mark over the shape, as the design lays one over both knots.
   (.shape is already relative further up; repeating it here would undo the
   absolute placement of the one lying across the closing band.) */
.shape-play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  pointer-events: none; color: #fff;
}
.shape-play svg { width: 13%; height: auto; filter: drop-shadow(0 6px 18px rgba(10, 10, 10, .35)); }

/* The band in the second section runs from black into the red. */
.band-fade {
  background-image: linear-gradient(90deg, #000 0%, #000 52%, #7a040c 78%, var(--accent) 100%) !important;
}

/* The services row: 350 wide with a 40 gap, on a 390 pitch. */
.svc-track { gap: 40px; }
.svc-rows .svc-track { gap: 29px 41px; }

/* The second row of the work grid steps over by half a card. */
.svc-stagger .svc-track > .svc-card:nth-child(even) { margin-left: -175px; }

/* Work paging is light on the dark, services paging is dark on the light. */
.svc-dark .deck-btn { background: #b8b8bc; color: #0a0a0a; }
.deck-btn { width: 30px; height: 30px; background: #12121a; color: #fff; }

/* The glow behind the work grid is a wide bright wall, not a thin beam. */
.svc-dark .svc-glow {
  width: 260px;
  background: radial-gradient(ellipse 40% 50% at 50% 50%, var(--accent), transparent 72%);
  filter: blur(26px); opacity: 1;
}

/* The showreel panel: its label is set large and dark, sunk into the black. */
.rl-label {
  top: 26px; left: 34px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 34px; letter-spacing: 0.02em; color: #3a3a3f;
}

/* The logo row: square tiles with a soft gradient, named in dark. */
.logo-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 34px; }
.logo-blank {
  height: 154px; border-radius: 16px;
  background: linear-gradient(150deg, #eeeef0, #e0e0e2);
  color: #1a1a1f; font-size: 12px; font-weight: 700;
}

/* The closing band is short and wide, and lifts toward the middle. */
/* Flat red. What looks like a lighter middle in the exported design is the
   knot's own soft halo lying over the band, not a gradient — painting one
   here drew a pale rectangle behind the shape. */
.cta-band { background-image: none !important; }

@media (max-width: 767px) {
  .svc-track { gap: 18px; }
  .svc-rows .svc-track { gap: 18px; }
  .svc-stagger .svc-track > .svc-card:nth-child(even) { margin-left: 0; }
  .logo-blank { height: 96px; }
  .rl-label { font-size: 22px; top: 16px; left: 18px; }
  .stat-rule { height: 46px; }
  .stats-ruled .stat { padding-left: 12px; }
}

/* Body copy keeps the colour of whatever it stands on. Pinned to the ink it
   vanished on the black band. */
.tx-fig { color: inherit; }

/* The figures run wider than the column they sit in, as the design has them,
   so their captions stay on one line. */
.hero-figures { width: 642px; max-width: none; }

/* A named placeholder tile is meant to be read, so it is not faded out. */
.logo-grey .logo-cell:has(> .logo-blank) { opacity: 1; filter: none; }

/* Behind the work grid the red stands as a wall the height of the cards. */
.svc-dark .svc-glow {
  height: 128%; top: -14%;
  background: radial-gradient(ellipse 34% 46% at 50% 50%, var(--accent), transparent 78%);
  filter: blur(30px);
}

@media (max-width: 1024px) { .hero-figures { width: auto; } }

/* =========================================================================
   The red behind the card rows: a wide soft shadow standing BEHIND the grey
   tiles, not a beam across them.
   ========================================================================= */

/* Measured off the design: the services glow reaches about 380 across where
   no card hides it, the one on the work grid about 875 between the rows. */
.svc-glow {
  z-index: 0;
  width: 380px; height: 126%; top: -13%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 6px 100% no-repeat,
    radial-gradient(ellipse 30% 48% at 50% 50%, var(--accent), transparent 76%);
  filter: blur(26px); opacity: .9;
}
.svc-dark .svc-glow {
  width: 700px; height: 134%; top: -17%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 10px 100% no-repeat,
    radial-gradient(ellipse 26% 50% at 50% 50%, var(--accent), transparent 78%);
  filter: blur(38px); opacity: 1;
}
/* The tiles and the paging stand in front of it. */
.svc-track { position: relative; z-index: 1; }
.svc-nav, .svc-dots { position: relative; z-index: 2; }

/* Nothing is laid over the shapes. */
.shape-play { display: none; }

@media (max-width: 767px) {
  .svc-glow { width: 190px; }
  .svc-dark .svc-glow { width: 280px; }
}

/* the contact form, once its fields became the builder's business ---------- */

.form-grid { display: grid; gap: 18px; }
.form-2 .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-2 .field { grid-column: span 2; }
.form-2 .field-half { grid-column: span 1; }

/* On one column a half-width field still shares its line with the next one. */
.form:not(.form-2) .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form:not(.form-2) .field { grid-column: span 2; }
.form:not(.form-2) .field-half { grid-column: span 1; }

.form-title { margin: 0; font-size: clamp(20px, 2.4vw, 26px); }
.form-intro { margin: -8px 0 0; color: var(--dim); font-size: 15px; }

.field .req { color: var(--accent); font-style: normal; margin-left: 4px; }
.field-hint { color: var(--dim); font-size: 12px; letter-spacing: 0; text-transform: none; }
.field-bad { color: var(--accent); font-size: 12.5px; min-height: 0; }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select {
  border-color: var(--accent);
}
.field.is-bad .field-bad { min-height: 16px; }

/* Ticks and dots: the box keeps its own line, the words sit beside it. */
.field-picks { display: grid; gap: 8px; }
.pick { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pick input { width: 17px; height: 17px; min-height: 0; padding: 0; accent-color: var(--accent); flex: none; }
.pick span {
  font-size: 15px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: inherit;
}
.field .pick + .pick { margin-top: 2px; }

.btn-wide { width: 100%; justify-content: center; }

@media (max-width: 640px) {
  .form-grid, .form-2 .form-grid, .form:not(.form-2) .form-grid { grid-template-columns: 1fr; }
  .form-2 .field, .form-2 .field-half,
  .form:not(.form-2) .field, .form:not(.form-2) .field-half { grid-column: span 1; }
}