/* rdvis.com — colours, type sizes and spacing are all set in :root below. Rules use only these. */
:root {
  /* ===== COLOUR PALETTE =====
     Every colour on the site comes from here. Change one and it updates everywhere.
     Tints and lines are mixed from the base colours, so they follow automatically. */

  /* Base colours */
  --cream: #fbfaf6;        /* page background */
  --white: #ffffff;        /* cards, work & form sections */
  --beige: #efeae4;        /* process section, form fields, image placeholders */
  --sand: #ddd5cb;         /* warm lines: form field borders, progress track */
  --olive: #464735;        /* feature green: buttons, Prevue, explore bar */
  --olive-dark: #3a3b2c;   /* olive hover */
  --dark: #10100e;         /* CTA, footer, video backgrounds */
  --ink: #151511;          /* main text */
  --ink-soft: #3c3a35;     /* long-form text, placeholders */
  --gray: #6e6a62;         /* secondary text */
  --on-dark: #f4f3ee;      /* text on dark & olive backgrounds */
  --success: #2f6b3a;      /* form sent */
  --error: #a12a1d;        /* form error */
  --timber: #b79a76;       /* contact page desk scene */
  --timber-dark: #8f7354;

  /* Text tints on dark backgrounds */
  --on-dark-muted: color-mix(in srgb, var(--on-dark) 62%, transparent);
  --on-dark-faint: color-mix(in srgb, var(--on-dark) 35%, transparent);

  /* Lines */
  --line: color-mix(in srgb, var(--ink) 12%, transparent);           /* hairlines on light */
  --line-strong: color-mix(in srgb, var(--ink) 18%, transparent);    /* chips, round buttons */
  --line-on-dark: color-mix(in srgb, var(--white) 18%, transparent); /* hairlines on dark/video */

  /* Overlays (shading over photos and video) */
  --shade-strong: color-mix(in srgb, var(--dark) 50%, transparent);
  --shade: color-mix(in srgb, var(--dark) 35%, transparent);
  --shade-soft: color-mix(in srgb, var(--dark) 20%, transparent);
  --olive-tint: color-mix(in srgb, var(--olive) 10%, transparent);
  --glass: color-mix(in srgb, var(--cream) 94%, transparent);         /* scrolled header, card pill */

  /* Shadows */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--dark) 5%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--dark) 8%, transparent);
  --shadow-bar: 0 1px 0 var(--line);

  --font: "Lexend", system-ui, sans-serif;

  /* ===== SIZE SYSTEM =====
     Every size is written in "u". 1u = 1% of the window width, frozen at 1800px wide.
     Values come from measuring the live Framer site (live px ÷ 14.4), so on wide screens
     everything is the live size × 1.25; on smaller windows it all scales down together. */
  --u: min(1vw, 18px);

  --gutter: max(16px, calc(3.05 * var(--u)));      /* page edge padding — 44px live */
  /* One content width for every section (the hero is full-bleed). Change it here to change it everywhere. */
  --w-content: calc(75.6 * var(--u));               /* 1089px live × 1.25 */
  --w-narrow: var(--w-content);
  --w-mid: var(--w-content);
  --w-wide: var(--w-content);
  --w-xwide: var(--w-content);

  /* ===== TYPE SCALE — 8 styles, each with one job =====
     Sizes in brackets are at full desktop width (1800px+); everything scales down together below that.
     The max(...) floor stops text getting too small on phones. */
  --fs-display: max(44px, calc(6.67 * var(--u)));  /* 120  Display   — hero headline */
  --fs-h1:      max(34px, calc(4.17 * var(--u)));  /* 75   Heading 1 — CTA headline */
  --fs-h2:      max(30px, calc(3.05 * var(--u)));  /* 55   Heading 2 — section headings */
  --fs-h3:      max(19px, calc(1.5 * var(--u)));   /* 27   Heading 3 — testimonial titles, form photo, project sub-heads */
  --fs-title:   max(14px, calc(.9 * var(--u)));    /* 16   Title     — hero intro, card & step titles */
  --fs-body:    max(13px, calc(.83 * var(--u)));   /* 15   Body      — all paragraphs */
  --fs-small:   max(12px, calc(.667 * var(--u)));  /* 12   Small     — menu, quotes, step text, lists, footer, fine print */
  --fs-label:   max(9px, calc(.556 * var(--u)));   /* 10   Label     — UPPERCASE buttons, labels, captions */

  /* Old names kept so nothing breaks — they all point at the 8 styles above */
  --fs-hero: var(--fs-display);
  --fs-xl: var(--fs-h1);
  --fs-lg: var(--fs-h2);
  --fs-md: var(--fs-h3);
  --fs-card: var(--fs-h3);
  --fs-lead: var(--fs-title);
  --fs-tiny: var(--fs-small);

  /* Buttons */
  --pill-h: max(32px, calc(1.74 * var(--u)));      /* 25 */
  --pill-x: max(14px, calc(1.15 * var(--u)));

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 300 var(--fs-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }

/* ---------- type (reuse these everywhere) ---------- */
.h-hero { font-size: var(--fs-hero); line-height: .8; letter-spacing: -0.05em; }
.h-xl { font-size: var(--fs-xl); line-height: .95; letter-spacing: -0.04em; }
.h-lg { font-size: var(--fs-lg); line-height: .93; letter-spacing: -0.035em; }
.h-md { font-size: var(--fs-md); line-height: 1.05; letter-spacing: -0.03em; }
.lead { font-size: var(--fs-lead); line-height: 1.38; }
.body { font-size: var(--fs-body); line-height: 1.6; }
.body + .body { margin-top: 1.2em; }
.small { font-size: var(--fs-small); line-height: 1.6; }
.muted { color: var(--gray); }
.label { display: inline-block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; }
.center { text-align: center; }

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--w-mid)); margin-inline: auto; }
.container.narrow { width: min(100% - 2 * var(--gutter), var(--w-narrow)); }
.container.mid { width: min(100% - 2 * var(--gutter), var(--w-mid)); }
.container.wide { width: min(100% - 2 * var(--gutter), var(--w-wide)); }
.container.xwide { width: min(100% - 2 * var(--gutter), var(--w-xwide)); }

/* ---------- buttons & links (reuse these everywhere) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: var(--pill-h); padding: 0 var(--pill-x); border-radius: 999px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: background .25s, color .25s, transform .25s var(--ease); }
.pill:hover { transform: translateY(-1px); }
.pill-light { background: var(--on-dark); color: var(--ink); }
.pill-olive { background: var(--olive); color: var(--on-dark); }
.pill-olive:hover { background: var(--olive-dark); }
.pill-outline { border: 1px solid var(--ink); color: var(--ink); }
.pill-outline:hover { background: var(--ink); color: var(--cream); }
.pill-ghost { border: 1px solid currentColor; color: inherit; }
.pill-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.text-link { border-bottom: 1px solid currentColor; padding-bottom: 1px; font-size: var(--fs-small); }
.text-link.label { font-size: var(--fs-label); }
.text-link-plain { display: inline-block; font-weight: 600; }
.small-link { font-size: var(--fs-tiny); }
.small-link:hover, .text-link:hover { opacity: .65; }

/* ---------- header ---------- */
/* Live-site measurements scaled up 25%: logo 57px wide; nav centred; 29px-tall pill 24px from the right */
.site-header { position: absolute; inset: 0 0 auto; z-index: 50; color: var(--on-dark); transition: background .3s, color .3s, box-shadow .3s; }
/* Not sticky: it scrolls away with the page and only returns (fixed, solid) when the visitor scrolls up */
.site-header.is-floating { position: fixed; transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .3s; }
.site-header.is-floating.is-hidden { transform: translateY(-100%); box-shadow: none; }
.header-inner { position: relative; display: flex; align-items: center; height: 64px; padding: 0 24px 0 clamp(16px, calc(2.5 * var(--u)), 36px); }
/* ---------- animated logo ----------
   Shows "rdvis" on load, folds into "r." after 1.5s (site.js adds .is-collapsed), and opens back
   out to "rdvis" on hover or keyboard focus. Phones (no hover) stay as "r.".
   1em = the logo height; the artwork is 391 units tall, so 1 unit = 1em / 391. */
.logo { --u: calc(1em / 391); position: relative; display: block; font-size: 21px; height: 1em; width: calc(1048 * var(--u)); color: inherit; transition: width .75s var(--ease-io) .05s; }
.logo-l { position: absolute; top: 0; left: calc(var(--x) * var(--u)); height: 1em; transition: opacity .45s var(--ease), transform .7s var(--ease-io), filter .45s var(--ease); }
.logo-l img { display: block; height: 1em; width: auto; transition: opacity .3s; }
.logo-l .logo-dark { position: absolute; inset: 0; opacity: 0; }
.logo-dot { position: absolute; left: calc(198 * var(--u)); top: calc(312 * var(--u)); width: calc(74 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); transition: transform .45s var(--ease), opacity .3s var(--ease); }
/* opening: the dot goes first, then d → s come back in order */
.logo-l-d { transition-delay: .12s; } .logo-l-v { transition-delay: .17s; } .logo-l-i { transition-delay: .22s; } .logo-l-s { transition-delay: .27s; }
/* folded to "r." */
.logo.is-collapsed:not(:hover):not(:focus-visible) { width: calc(276 * var(--u)); }
.logo.is-collapsed:not(:hover):not(:focus-visible) .logo-l:not(.logo-l-r) { opacity: 0; transform: translateX(calc(-140 * var(--u))); filter: blur(2px); }
.logo.is-collapsed:not(:hover):not(:focus-visible) .logo-l-s { transition-delay: 0s; }
.logo.is-collapsed:not(:hover):not(:focus-visible) .logo-l-i { transition-delay: .05s; }
.logo.is-collapsed:not(:hover):not(:focus-visible) .logo-l-v { transition-delay: .1s; }
.logo.is-collapsed:not(:hover):not(:focus-visible) .logo-l-d { transition-delay: .15s; }
.logo.is-collapsed:not(:hover):not(:focus-visible) .logo-dot { opacity: 1; transform: scale(1); transition-delay: .42s; }
@media (hover: none) {
  .logo.is-collapsed { width: calc(276 * var(--u)); }
  .logo.is-collapsed .logo-l:not(.logo-l-r) { opacity: 0; transform: translateX(calc(-140 * var(--u))); filter: blur(2px); }
  .logo.is-collapsed .logo-dot { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .logo, .logo-l, .logo-dot { transition: none !important; } }
.nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: 25px; font-size: var(--fs-small); font-weight: 300; letter-spacing: .01em; }
.nav a:not(.pill):hover { opacity: .6; }
/* Desktop: menu centred on the page, so it doesn't slide when the logo folds and unfolds */
@media (min-width: 861px) { .nav { position: absolute; inset: 0; pointer-events: none; } .nav > * { pointer-events: auto; } }
/* Sales tools dropdown */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: .35em; font: inherit; color: inherit; }
.nav-drop-btn svg { width: 1em; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s var(--ease); }
.nav-drop-btn:hover { opacity: .6; }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop-panel { position: absolute; top: calc(100% + 14px); left: 50%; width: max(300px, calc(20 * var(--u))); padding: 8px; background: var(--cream); color: var(--ink); border-radius: 10px; box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--dark) 35%, transparent), 0 0 0 1px var(--line); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -6px); transition: opacity .2s var(--ease) .15s, transform .25s var(--ease) .15s, visibility 0s .4s; }
.nav-drop-panel::before { /* hover bridge so the panel doesn't close crossing the gap */ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .2s var(--ease), transform .25s var(--ease); }
@media (hover: hover) and (min-width: 861px) { .nav-drop:hover .nav-drop-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .2s var(--ease), transform .25s var(--ease); } .nav-drop:hover .nav-drop-btn svg { transform: rotate(180deg); } }
.nav-drop-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 7px; transition: background .2s; }
.nav-drop-item:hover, .nav-drop-item:focus-visible { background: var(--beige); opacity: 1 !important; }
.nav-drop-item .icon-badge { --icon-bg: var(--beige); width: 38px; margin: 0; flex: none; }
.nav-drop-item:hover .icon-badge { --icon-bg: var(--white); }
.nav-drop-item strong { display: block; font-weight: 500; font-size: var(--fs-small); }
.nav-drop-item small { display: block; font-size: var(--fs-label); color: var(--gray); margin-top: .15em; }
.nav-cta { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); height: 29px; padding: 0 16px; font-size: var(--fs-label); letter-spacing: .14em; }
.nav-cta:hover { transform: translateY(calc(-50% - 1px)); }
.site-header.is-solid { background: var(--glass); backdrop-filter: blur(12px); color: var(--ink); box-shadow: var(--shadow-bar); }
.site-header.is-solid .logo-light { opacity: 0; }
.site-header.is-solid .logo-l .logo-dark { opacity: 1; }
.site-header.is-solid .nav-cta { background: var(--olive); color: var(--on-dark); }
.nav-toggle { display: none; width: 40px; height: 40px; position: relative; margin-left: auto; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .3s; }
.nav-toggle span:first-child { top: 15px; } .nav-toggle span:last-child { bottom: 15px; }
.nav-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- hero (full screen) ---------- */
/* Headline bottom-left, a hairline across the full width, intro text left and "See how we work" right */
.hero, .p-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; display: flex; align-items: flex-end; color: var(--on-dark); background: var(--dark); overflow: hidden; }
.p-hero { height: 82svh; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--shade-strong), var(--shade-soft) 45%, var(--shade-soft)); }
.hero-content { position: relative; width: 100%; padding: 0 var(--gutter) max(24px, calc(2.2 * var(--u))); }
.hero-content .h-hero { max-width: 9.5em; padding-top: .1em; margin-bottom: max(16px, calc(1.74 * var(--u))); }
.p-hero .label { margin-bottom: 16px; color: var(--on-dark-muted); }
.hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line-on-dark); padding-top: max(16px, calc(1.6 * var(--u))); }
.hero-foot p { font-size: var(--fs-lead); line-height: 1.38; max-width: 27.8em; }
.hero-foot .text-link { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; padding-bottom: 2px; white-space: nowrap; }

/* ---------- about + logos ---------- */
/* Text left, "Trusted by" logo grid right (4 across, logos at 2× the live size), centred on each other */
.about { background: var(--cream); padding: calc(9.2 * var(--u)) 0 calc(4.4 * var(--u)); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: calc(5.5 * var(--u)); align-items: start; }
/* Text is pinned to the top (lined up with the first row of logos) so it stays put when "Show more" expands the grid */
.about-text { max-width: 32em; padding-top: calc(var(--fs-label) * 1.4 + 1.2 * var(--u) + max(10px, calc(1.1 * var(--u)))); }
.about-text .h-lg { margin-bottom: max(16px, calc(1.6 * var(--u))); }
.about-text .pill { margin-top: max(20px, calc(1.9 * var(--u))); }
.logos { text-align: center; }
.logos > .label { margin-bottom: calc(1.2 * var(--u)); }
.logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logo-cell { display: grid; place-items: center; padding: max(10px, calc(1.1 * var(--u))) 0; }
.logo-cell img { width: 58%; height: auto; }
.logo-cell.is-extra { display: none; }
.logo-grid.is-open .logo-cell.is-extra { display: grid; }
.show-more { margin-top: calc(1.6 * var(--u)); }

/* ---------- recent work / cards ---------- */
.work { background: var(--white); padding: clamp(64px, calc(6.3 * var(--u)), 120px) 0 clamp(72px, calc(7 * var(--u)), 132px); }
.work-head { margin-bottom: clamp(32px, calc(3.6 * var(--u)), 68px); }
.work-head .h-lg { margin-bottom: clamp(10px, calc(1 * var(--u)), 18px); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, calc(.95 * var(--u)), 20px) clamp(8px, calc(.75 * var(--u)), 14px); }
.card { display: block; }
/* 16:9, the shape of the feature videos (20% taller than the live site) */
.card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--beige); }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card-media img, .card:hover .card-media video { transform: scale(1.035); }
.card-view { position: absolute; left: 14px; bottom: 14px; padding: .9em 1.3em; border-radius: 999px; background: var(--glass); opacity: 0; transform: translateY(6px); transition: .4s var(--ease); }
.card:hover .card-view { opacity: 1; transform: none; }
.card-text { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: clamp(6px, calc(.55 * var(--u)), 10px) 4px 0; }
.card-text h3 { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -0.01em; }
.card-text .label { color: var(--gray); letter-spacing: .12em; }
.card-text > .label { padding-top: .3em; text-align: right; }
.card.is-hidden { display: none; }
.fade-last { position: relative; }
.fade-last::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(180px, calc(15 * var(--u)), 300px); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--white) 75%, transparent) 45%, var(--white) 92%); pointer-events: none; }
.explore-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(20px, calc(1.8 * var(--u)), 36px); padding: clamp(14px, calc(1.15 * var(--u)), 22px) clamp(16px, calc(1.4 * var(--u)), 28px); background: var(--olive); color: var(--on-dark); transition: background .25s; }
.explore-bar:hover { background: var(--olive-dark); }
.explore-left { display: flex; align-items: center; gap: clamp(14px, calc(1.9 * var(--u)), 36px); }
.explore-left svg { width: clamp(16px, calc(1.15 * var(--u)), 22px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; }
.explore-right { font-size: var(--fs-tiny); color: var(--on-dark-muted); }

/* ---------- process ---------- */
.process { background: var(--beige); padding: clamp(72px, calc(6.8 * var(--u)), 130px) 0 clamp(48px, calc(4.4 * var(--u)), 84px); }
.process-sub { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(8px, calc(.6 * var(--u)), 12px); }
.steps { margin: clamp(40px, calc(4 * var(--u)), 76px) 0 clamp(40px, calc(4.6 * var(--u)), 88px); }
.steps-track { position: relative; height: 3px; background: var(--sand); overflow: hidden; }
.steps-track span { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--olive); transition: transform .6s var(--ease); }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, calc(2.3 * var(--u)), 44px); padding-top: clamp(20px, calc(2 * var(--u)), 38px); }
.step-num { font-size: var(--fs-label); color: var(--gray); letter-spacing: .06em; }
.step h3 { font-size: var(--fs-title); line-height: 1.25; margin: clamp(6px, calc(.6 * var(--u)), 12px) 0 clamp(12px, calc(1.1 * var(--u)), 22px); }
.step h3 button { text-align: left; text-underline-offset: 3px; }
.step.is-active h3 button { text-decoration: underline; text-decoration-thickness: 1px; }
.step p, .step li { font-size: var(--fs-tiny); color: var(--gray); line-height: 1.55; }
.step ul { margin: clamp(14px, calc(1.5 * var(--u)), 28px) 0 0; padding-left: 1.05em; display: grid; gap: .1em; }
.steps-nav { display: flex; justify-content: flex-end; align-items: center; gap: clamp(10px, calc(.8 * var(--u)), 16px); margin-top: clamp(20px, calc(2.2 * var(--u)), 40px); }
.steps-nav button { width: clamp(36px, calc(2.3 * var(--u)), 44px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background .2s; }
.steps-nav button:hover { background: var(--white); }
/* homepage outcomes */
.oc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, calc(1.6 * var(--u)), 30px); margin: clamp(40px, calc(4 * var(--u)), 76px) 0 clamp(36px, calc(4 * var(--u)), 76px); }
.oc-card { display: flex; flex-direction: column; align-items: flex-start; }
.oc-media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); margin-bottom: clamp(14px, calc(1.4 * var(--u)), 26px); }
.oc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.oc-card:hover .oc-media img { transform: scale(1.04); }
.oc-card h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; margin: .45em 0 .45em; }
.oc-card p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.2em; }
.oc-card .text-link { margin-top: auto; }
.steps-nav svg { width: 45%; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- feature video ---------- */
.feature-link { position: relative; display: block; height: max(31vw, 340px); background: var(--dark); overflow: hidden; }
.feature-link video { width: 100%; height: 100%; object-fit: cover; }
.feature-label { position: absolute; right: var(--gutter); bottom: clamp(6px, calc(.7 * var(--u)), 14px); color: var(--on-dark); font-weight: 400; }

/* ---------- testimonials ---------- */
.testimonials { background: var(--cream); padding: clamp(72px, calc(7.4 * var(--u)), 140px) 0; }
.testimonials > .container > .body { margin-top: clamp(8px, calc(.7 * var(--u)), 14px); }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, calc(.55 * var(--u)), 10px); margin-top: clamp(36px, calc(4 * var(--u)), 76px); align-items: start; }
.tcol { display: grid; gap: clamp(8px, calc(.55 * var(--u)), 10px); }
.tcard { margin: 0; background: var(--white); padding: clamp(18px, calc(1.25 * var(--u)), 26px); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.tcard h3 { font-size: var(--fs-card); line-height: 1.08; letter-spacing: -0.025em; max-width: 11em; }
.tcard blockquote { margin: clamp(14px, calc(1.4 * var(--u)), 26px) 0 0; display: grid; gap: 1em; font-size: var(--fs-small); color: var(--gray); line-height: 1.6; }
.tcard figcaption { display: flex; gap: clamp(10px, calc(.9 * var(--u)), 16px); align-items: center; margin-top: clamp(14px, calc(1.4 * var(--u)), 26px); }
.tcard figcaption strong { display: block; font-weight: 500; font-size: var(--fs-small); margin-bottom: .2em; }
.tcard figcaption small { display: block; font-size: var(--fs-label); color: var(--gray); letter-spacing: .04em; line-height: 1.5; }
.avatar { width: clamp(28px, calc(1.65 * var(--u)), 36px); height: clamp(28px, calc(1.65 * var(--u)), 36px); border-radius: 50%; object-fit: cover; flex: none; }
.avatar-blank { display: block; background: linear-gradient(135deg, var(--beige), var(--sand)); }
.card-link { align-self: flex-end; margin-top: clamp(12px, calc(1.1 * var(--u)), 20px); font-weight: 600; }
.card-link:hover { opacity: .6; }
/* Video inside a testimonial card (Bianca Clair) — sits under the name */
.tmedia { position: relative; aspect-ratio: 584 / 838; margin-top: max(16px, calc(1.4 * var(--u))); border-radius: clamp(12px, calc(1.1 * var(--u)), 22px); overflow: hidden; background: var(--beige); }
.tmedia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Phone UI overlay: scaled down to sit 10% in from the left and right edges, centred */
.tmedia img { position: absolute; inset: 0 10%; width: 80%; height: 100%; object-fit: contain; pointer-events: none; }
.testimonials .center { margin-top: clamp(36px, calc(3.6 * var(--u)), 68px); }

/* ---------- prevue ---------- */
/* Text left, large near-square live map right (959 × 865 on the live site), vertically centred */
.prevue { background: var(--olive); color: var(--on-dark); padding: max(64px, calc(6.5 * var(--u))) 0; }
.prevue-grid { display: grid; grid-template-columns: minmax(0, .73fr) minmax(0, 1fr); gap: calc(3.8 * var(--u)); align-items: center; }
.prevue-text .body { color: var(--on-dark-muted); margin-top: max(14px, calc(1.6 * var(--u))); max-width: 34em; }
.prevue-features { list-style: none; margin: max(18px, calc(2 * var(--u))) 0 max(24px, calc(2 * var(--u))); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7em 2em; font-size: var(--fs-small); }
/* interactive map embed (homepage + Prevue page) */
.map-embed { margin: 0; min-width: 0; }
.map-embed-bar { display: flex; justify-content: flex-end; margin-bottom: max(10px, calc(1 * var(--u))); }
.map-embed-frame { height: 80vh; height: 80svh; min-height: 420px; overflow: hidden; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.map-embed-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-embed:fullscreen .map-embed-bar { display: none; }
.map-embed:fullscreen .map-embed-frame { height: 100%; }

/* ---------- CTA ---------- */
.cta-block { background: var(--dark); color: var(--on-dark); padding: clamp(56px, calc(4.6 * var(--u)), 88px) 0 clamp(64px, calc(6 * var(--u)), 116px); }
.cta-block .label.muted { color: var(--on-dark-muted); }
.cta-block .h-xl { margin: clamp(10px, calc(.9 * var(--u)), 16px) 0 clamp(12px, calc(1.2 * var(--u)), 22px); }
.cta-block .body.muted { color: var(--on-dark-muted); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: clamp(14px, calc(1.1 * var(--u)), 22px); margin-top: clamp(32px, calc(3.6 * var(--u)), 68px); }
.cta-actions.left { justify-content: flex-start; }

/* ---------- enquiry ---------- */
.enquiry { background: var(--white); padding: clamp(56px, calc(7.5 * var(--u)), 144px) 0 clamp(64px, calc(7.2 * var(--u)), 136px); }
.enquiry-grid { display: grid; grid-template-columns: minmax(0, .73fr) minmax(0, 1fr); gap: calc(3.8 * var(--u)); align-items: stretch; }
.enquiry-media { position: relative; min-height: calc(30 * var(--u)); background: var(--dark); overflow: hidden; color: var(--on-dark); }
/* Video framing inside the box: 0% = hard left, 50% = centred, 100% = hard right */
.enquiry-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
/* 10% olive tint over the whole video, plus the dark fade behind the text */
.enquiry-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--shade-strong), transparent 45%), var(--olive-tint); }
.enquiry-media-text { position: absolute; left: clamp(16px, calc(1.25 * var(--u)), 24px); right: clamp(16px, calc(1.25 * var(--u)), 24px); bottom: clamp(16px, calc(1.2 * var(--u)), 24px); z-index: 1; }
.enquiry-media-text .label { font-size: var(--fs-label); margin-bottom: .8em; }
.enquiry-media-text h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.02em; max-width: 12em; }
.enquiry-form .h-lg { margin-bottom: clamp(10px, calc(1 * var(--u)), 18px); }
.enquiry-form form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, calc(.7 * var(--u)), 14px) clamp(8px, calc(.65 * var(--u)), 12px); margin: clamp(20px, calc(2 * var(--u)), 38px) 0 clamp(28px, calc(3 * var(--u)), 56px); }
.enquiry-form .full { grid-column: 1 / -1; }
.enquiry-form label { display: grid; gap: clamp(6px, calc(.45 * var(--u)), 8px); }
.enquiry-form label > .label { color: var(--gray); font-size: var(--fs-label); }
input, select, textarea { font: 400 var(--fs-tiny)/1.4 var(--font); color: var(--ink); background: var(--beige); border: 1px solid var(--sand); border-radius: 6px; padding: clamp(10px, calc(.8 * var(--u)), 15px); width: 100%; transition: border-color .2s, background .2s; }
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .9; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--olive); background: var(--cream); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151511' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px; }
textarea { resize: vertical; min-height: clamp(110px, calc(7.3 * var(--u)), 150px); }
.files-note { display: grid; gap: .5em; padding: clamp(12px, calc(.9 * var(--u)), 18px); border: 1px dashed var(--sand); border-radius: 4px; font-size: var(--fs-small); color: var(--gray); line-height: 1.55; }
.files-note .label { color: var(--ink); font-size: var(--fs-label); }
.hp { position: absolute !important; left: -9999px; }
.pill[disabled] { opacity: .5; pointer-events: none; }
.form-status { font-size: var(--fs-tiny); min-height: 1.2em; }
.form-status.ok { color: var(--success); } .form-status.err { color: var(--error); }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--on-dark); padding: clamp(56px, calc(3.7 * var(--u)), 72px) 0 clamp(24px, calc(2.2 * var(--u)), 42px); }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.25fr 1fr 1fr 1.2fr; gap: clamp(20px, calc(2 * var(--u)), 40px); }
.foot-mark img { width: clamp(64px, calc(6 * var(--u)), 116px); height: auto; margin-top: calc(.6 * var(--u)); }
.foot-brand p { color: var(--on-dark-muted); font-size: var(--fs-small); max-width: 12em; margin: clamp(20px, calc(2.6 * var(--u)), 50px) 0 clamp(14px, calc(1.2 * var(--u)), 22px); line-height: 1.5; }
.socials { display: flex; gap: clamp(14px, calc(1.2 * var(--u)), 22px); }
.socials svg { width: clamp(15px, calc(1 * var(--u)), 19px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; }
.socials a:hover { opacity: .6; }
.foot-col { display: flex; flex-direction: column; gap: clamp(8px, calc(.7 * var(--u)), 13px); font-size: var(--fs-small); }
.foot-col h4 { font-weight: 600; margin-bottom: clamp(2px, calc(.2 * var(--u)), 4px); }
.foot-col a:hover { opacity: .6; }
.muted-link { color: var(--on-dark-faint); }
.foot-contact { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(8px, calc(.6 * var(--u)), 12px); text-align: right; font-size: var(--fs-small); color: var(--on-dark-muted); }
.foot-contact .underline { color: var(--on-dark); border-bottom: 1px solid currentColor; }
.foot-bottom { margin-top: clamp(40px, calc(3.2 * var(--u)), 60px); padding-top: clamp(20px, calc(2 * var(--u)), 36px); border-top: 1px solid var(--line-on-dark); text-align: center; color: var(--on-dark-muted); font-size: var(--fs-label); letter-spacing: .03em; }

/* ---------- inner pages ---------- */
.page-head { background: var(--cream); padding: calc(clamp(60px, calc(4.5 * var(--u)), 86px) + clamp(56px, calc(6 * var(--u)), 112px)) 0 clamp(32px, calc(3 * var(--u)), 56px); }
.page-head .body { margin-top: clamp(12px, calc(1 * var(--u)), 20px); max-width: 40em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, calc(2.6 * var(--u)), 48px); }
.chip { padding: 1em 1.6em; border-radius: 999px; border: 1px solid var(--line-strong); transition: .2s; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--olive); border-color: var(--olive); color: var(--on-dark); }
.work-page { padding-top: clamp(32px, calc(3 * var(--u)), 56px); }
/* Work page: 3 across (2 on tablets, 1 on phones — see below). The homepage stays at 2. */
.work-page .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .work-page .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- project page: content left, sticky panel right ----------
   Proportions from the live site: content 635 : panel 188 (about 3.4 : 1). On phones the panel moves above the content. */
.p-layout-wrap { background: var(--white); padding: max(48px, calc(5.5 * var(--u))) 0 max(56px, calc(6 * var(--u))); }
.p-layout { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr); gap: max(28px, calc(3 * var(--u))); align-items: start; }
.p-main > :first-child { padding-top: 0; }
.p-section { padding: max(36px, calc(4.4 * var(--u))) 0 max(14px, calc(1.2 * var(--u))); }
.p-section .h-md { margin-bottom: max(12px, calc(1.1 * var(--u))); }
.prose { display: grid; gap: 1em; font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.65; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: clamp(20px, calc(2 * var(--u)), 36px); }
.stats strong { display: block; font-size: var(--fs-h3); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.stats span { color: var(--gray); font-size: var(--fs-small); }
.bullets { margin: max(16px, calc(1.6 * var(--u))) 0 0; padding-left: 1.1em; display: grid; gap: .35em; font-size: var(--fs-small); color: var(--ink-soft); }
.g-grid { display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr 1fr; gap: max(8px, calc(.8 * var(--u))); margin-top: max(16px, calc(1.6 * var(--u))); }
.g-item { display: block; overflow: hidden; background: var(--beige); cursor: zoom-in; }
.g-item.wide { grid-column: 1 / -1; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.g-item:hover img { transform: scale(1.02); }

/* Side panel */
.p-aside { align-self: stretch; } /* full height of the content, so the panel can stick all the way down */
.p-aside-inner { position: sticky; top: calc(64px + max(16px, calc(1.6 * var(--u)))); }
.side-quote-toggle { font-size: var(--fs-label); color: var(--ink); margin-bottom: .9em; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.side-quote-toggle:hover, .side-quote-toggle[aria-expanded="true"] { text-decoration-color: currentColor; }
.side-quote-title { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.025em; }
.side-quote-body { display: grid; gap: .9em; margin-top: max(12px, calc(1 * var(--u))); font-size: var(--fs-small); color: var(--gray); line-height: 1.6; }
.side-quote-by { display: flex; gap: max(10px, calc(.8 * var(--u))); align-items: center; margin-top: max(12px, calc(1 * var(--u))); }
.side-quote-by strong { display: block; font-weight: 400; font-size: var(--fs-small); }
.side-quote-by small { display: block; font-size: var(--fs-label); color: var(--gray); letter-spacing: .02em; margin-top: .2em; }
.p-facts { margin: max(28px, calc(3 * var(--u))) 0 0; border-bottom: 1px solid var(--line); }
.side-quote + .p-facts { margin-top: max(32px, calc(3.5 * var(--u))); }
.p-aside > .p-aside-inner > .p-facts:first-child { margin-top: 0; }
.p-facts > div { display: grid; grid-template-columns: 2fr 3fr; gap: 12px; padding: max(10px, calc(.9 * var(--u))) 0; border-top: 1px solid var(--line); }
.p-facts dt { font-size: var(--fs-label); color: var(--gray); padding-top: .25em; }
.p-facts dd { margin: 0; font-size: var(--fs-small); color: var(--ink); line-height: 1.45; }

.p-gallery { padding: clamp(32px, calc(3 * var(--u)), 56px) 0 clamp(64px, calc(6 * var(--u)), 112px); }
/* ---------- previous / next projects ---------- */
.pn { background: var(--dark); color: var(--on-dark); }
.pn-head { display: flex; justify-content: space-between; align-items: center; padding: max(20px, calc(2 * var(--u))) var(--gutter); color: var(--on-dark-muted); }
.pn-head .text-link { color: var(--on-dark); }
.pn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--dark); }
.pn-tile { position: relative; display: flex; align-items: flex-end; min-height: max(340px, calc(30 * var(--u))); overflow: hidden; color: var(--on-dark); isolation: isolate; }
.pn-media, .pn-media img, .pn-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pn-media { z-index: -1; background: var(--olive); }
.pn-media img, .pn-media video { transition: transform 1.4s var(--ease); }
.pn-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--shade-strong), var(--shade-soft) 60%, var(--shade-soft)); transition: opacity .5s var(--ease); }
.pn-text { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: max(8px, calc(.7 * var(--u))); padding: max(24px, calc(3 * var(--u))) var(--gutter); }
.pn-next .pn-text { align-items: flex-end; text-align: right; }
.pn-eyebrow { color: var(--on-dark-muted); }
.pn-title { font-size: var(--fs-h2); line-height: .95; letter-spacing: -0.035em; max-width: 11em; }
.pn-meta { font-size: var(--fs-small); color: var(--on-dark-muted); margin-bottom: max(8px, calc(.8 * var(--u))); }
.pn-btn svg { width: 1.4em; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
.pn-tile:hover .pn-media img, .pn-tile:hover .pn-media video { transform: scale(1.04); }
.pn-tile:hover .pn-media::after { opacity: .75; }
.pn-tile:hover .pn-btn { background: var(--olive); color: var(--on-dark); }
.pn-prev:hover .pn-btn svg { transform: translateX(-4px); }
.pn-next:hover .pn-btn svg { transform: translateX(4px); }
.pn-tile:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -6px; }

/* ---------- contact page ---------- */
/* Who / where: first on the page, so it clears the header. Text left, visual right (photo, or desk scene until there is one). */
.ct-who { background: var(--cream); padding: calc(64px + max(40px, calc(4 * var(--u)))) 0 max(48px, calc(5 * var(--u))); }
.ct-who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: max(32px, calc(4.5 * var(--u))); align-items: center; }
.ct-visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--beige); }
.ct-visual.is-photo img { width: 100%; height: 100%; object-fit: cover; }
/* desk scene: warm wall, timber desk, a monitor showing a render */
.ct-visual.is-scene { background:
  radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--white) 65%, transparent), transparent 60%),
  linear-gradient(180deg, var(--beige), color-mix(in srgb, var(--sand) 70%, var(--beige))); }
.ct-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--timber) 70%, var(--white)) 0, var(--timber) 6%, var(--timber-dark)); }
.ct-desk::after { /* front edge shadow */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dark) 18%, transparent)); }
.ct-monitor { position: absolute; left: 50%; bottom: calc(15% - 2px); width: 66%; transform: translateX(-50%); }
.ct-stand { position: relative; aspect-ratio: 100 / 13; }
.ct-stand::before { /* neck, joined to the screen */ content: ""; position: absolute; left: 50%; top: -2px; bottom: 14%; width: 4.5%; transform: translateX(-50%); background: linear-gradient(90deg, #8d8d88, #c9c9c4 45%, #9a9a95); }
.ct-stand::after { /* foot, resting on the desk */ content: ""; position: absolute; left: 50%; bottom: 0; width: 30%; height: 16%; transform: translateX(-50%); border-radius: 50% 50% 3px 3px / 100% 100% 3px 3px; background: linear-gradient(180deg, #d4d4cf, #9d9d98); box-shadow: 0 8px 14px color-mix(in srgb, var(--dark) 30%, transparent); }
.ct-visual.is-scene::before { /* soft shadow the monitor casts on the wall */ content: ""; position: absolute; left: 20%; right: 20%; top: 18%; bottom: 30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--dark) 14%, transparent), transparent); filter: blur(18px); }
.ct-screen { position: relative; aspect-ratio: 16 / 9; background: var(--dark); border: max(5px, calc(.45 * var(--u))) solid #1b1b18; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 50px -24px color-mix(in srgb, var(--dark) 55%, transparent), 0 2px 0 #34342f inset; }
.ct-screen img { width: 100%; height: 100%; object-fit: cover; }
.ct-screen::after { /* glass sheen */ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, color-mix(in srgb, var(--white) 14%, transparent), transparent 38%); pointer-events: none; }
.ct-where .h-lg { margin: .35em 0 .45em; }
.ct-where p { font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.6; max-width: 32em; }
.ct-cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: max(18px, calc(1.8 * var(--u))); }
.ct-cities span { padding: .75em 1.2em; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ct-quote { margin: max(28px, calc(3 * var(--u))) 0 0; padding-top: max(20px, calc(2 * var(--u))); border-top: 1px solid var(--line); }
.ct-quote blockquote { margin: 0; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.025em; max-width: 18em; }
.ct-quote figcaption { margin-top: .9em; font-size: var(--fs-small); color: var(--gray); }
/* Icon badge: olive line icon in a soft circle (contact steps, product features) */
.icon-badge { --icon-bg: var(--cream); display: inline-grid; place-items: center; width: max(44px, calc(3.2 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: var(--icon-bg); color: var(--olive); margin-bottom: max(14px, calc(1.2 * var(--u))); }
.icon-badge svg { width: 48%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-steps-grid .icon-badge + .step-num { display: block; }
/* What happens next */
.ct-steps { background: var(--beige); padding: max(56px, calc(5.5 * var(--u))) 0; }
.ct-steps .h-lg { margin-bottom: max(8px, calc(.8 * var(--u))); }
.ct-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(20px, calc(2.4 * var(--u))); margin-top: max(28px, calc(3 * var(--u))); border-top: 1px solid var(--line); padding-top: max(20px, calc(2 * var(--u))); }
.ct-steps-grid h3 { font-size: var(--fs-title); line-height: 1.25; margin: .6em 0 .5em; }
.ct-steps-grid p { font-size: var(--fs-small); color: var(--gray); line-height: 1.6; }
.ct-call { display: flex; flex-wrap: wrap; align-items: center; gap: max(14px, calc(1.2 * var(--u))); margin-top: max(28px, calc(3 * var(--u))); }
/* FAQ */
.ct-faq { background: var(--cream); padding: max(56px, calc(6 * var(--u))) 0 max(72px, calc(7 * var(--u))); }
.ct-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: max(32px, calc(5 * var(--u))); align-items: start; }
.ct-faq details { border-top: 1px solid var(--line); padding: max(14px, calc(1.3 * var(--u))) 0; }
.ct-faq details:last-child { border-bottom: 1px solid var(--line); }
.ct-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-title); font-weight: 500; }
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after { content: "+"; font-weight: 300; }
.ct-faq details[open] summary::after { content: "–"; }
.ct-faq details p { margin-top: .7em; font-size: var(--fs-small); color: var(--gray); line-height: 1.6; max-width: 44em; }

/* ---------- sales-tool pages (Prevue, Visual Narrative, ArchviewVR) ---------- */
.pr-hero { background: var(--cream); padding: calc(64px + max(40px, calc(4.5 * var(--u)))) 0 max(56px, calc(6 * var(--u))); }
.pr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: max(32px, calc(4.5 * var(--u))); align-items: center; }
.pr-text .h-lg { margin: .4em 0 .5em; }
.pr-text .body { color: var(--ink-soft); max-width: 34em; }
.pr-text .small { margin-top: 1em; }
.pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: max(14px, calc(1.2 * var(--u))); margin-top: max(24px, calc(2.4 * var(--u))); }
.pr-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--beige); }
.pr-media.is-embed { aspect-ratio: 959 / 865; background: var(--sand); }
.pr-figure { margin: 0; }
.pr-figure figcaption { margin-top: max(10px, calc(1 * var(--u))); text-align: right; }
.pr-media iframe, .pr-media img, .pr-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pr-features { background: var(--white); padding: max(56px, calc(6 * var(--u))) 0; }
.pr-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(28px, calc(3 * var(--u))) max(20px, calc(2.4 * var(--u))); margin-top: max(28px, calc(3 * var(--u))); }
.pr-feature { padding-top: max(18px, calc(1.8 * var(--u))); border-top: 1px solid var(--line); }
.pr-feature h3 { font-size: var(--fs-title); line-height: 1.25; margin-bottom: .5em; }
.pr-feature p { font-size: var(--fs-small); color: var(--gray); line-height: 1.6; }
.pr-features .icon-badge { --icon-bg: var(--beige); }
.pr-others { background: var(--cream); padding: max(48px, calc(5 * var(--u))) 0; }
.pr-others-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(12px, calc(1.2 * var(--u))); margin-top: max(16px, calc(1.6 * var(--u))); }
.pr-other { display: flex; flex-direction: column; gap: .6em; padding: max(22px, calc(2.2 * var(--u))); background: var(--white); box-shadow: var(--shadow-card); transition: transform .3s var(--ease); }
.pr-other:hover { transform: translateY(-2px); }
.pr-other strong { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.pr-other-line { font-size: var(--fs-small); color: var(--gray); }
.pr-other .text-link { align-self: flex-start; margin-top: .6em; }

/* ---------- process page ---------- */
.ps-hero .h-xl { margin: .3em 0 .45em; }
.ps-steps { background: var(--white); padding: max(56px, calc(6 * var(--u))) 0; }
.ps-time { display: inline-block; margin-top: max(14px, calc(1.4 * var(--u))); padding: .55em .9em; border-radius: 8px; background: var(--beige); color: var(--ink); line-height: 1.45; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-small); }
.pr-others-grid.sv-others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-steps .steps { margin-bottom: 0; }
.ps-steps .steps-nav button:hover { background: var(--cream); }
.sv-all { display: inline-block; margin-top: max(24px, calc(2.4 * var(--u))); }


.ps-update { background: var(--beige); padding: max(56px, calc(6 * var(--u))) 0; }
.ps-update-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: max(32px, calc(5 * var(--u))); align-items: center; }
.ps-update .h-lg { margin: .4em 0 .5em; }
.ps-email { background: var(--white); border-radius: 10px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--dark) 35%, transparent), 0 0 0 1px var(--line); overflow: hidden; font-size: var(--fs-small); }
.ps-email-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--cream); border-bottom: 1px solid var(--line); }
.ps-email-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--sand); }
.ps-email-bar em { margin-left: auto; font-style: normal; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); font-weight: 600; }
.ps-email-head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.ps-email-head p { display: flex; gap: 12px; }
.ps-email-head span { width: 56px; flex: none; color: var(--gray); }
.ps-email-head strong { font-weight: 500; }
.ps-email-body { padding: 18px 20px 22px; color: var(--ink-soft); line-height: 1.6; }
.ps-email-body h4 { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink); margin: 1.4em 0 .4em; }
.ps-email-body h4:first-child { margin-top: 0; }
.ps-email-body ul { margin: 0; padding-left: 1.1em; }
.ps-email-sign { margin-top: 1.4em; }

.ps-revisions { background: var(--cream); padding: max(56px, calc(6 * var(--u))) 0; }
.ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: max(24px, calc(4 * var(--u))); margin-top: max(24px, calc(2.6 * var(--u))); }
.ps-two > div { padding-top: max(18px, calc(1.8 * var(--u))); border-top: 1px solid var(--line); }
.ps-two .h-md { margin-bottom: .5em; }

/* ---------- city pages ---------- */
.loc-head { padding-bottom: max(40px, calc(4 * var(--u))); }
.loc-head-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: max(28px, calc(4 * var(--u))); align-items: end; }
.loc-head .label a:hover { text-decoration: underline; }
.loc-head .h-xl { margin-top: .35em; }
.loc-intro .body { color: var(--ink-soft); }
.loc-intro .body + .body { margin-top: 1em; }
.loc-work { padding-top: max(40px, calc(4 * var(--u))); }
.loc-work-head { margin-bottom: max(18px, calc(1.8 * var(--u))); }
.loc-work-head .muted { font-weight: 300; }
.loc-others .ct-cities a span { display: inline-block; transition: background .2s, color .2s; }
.loc-others .ct-cities a:hover span { background: var(--olive); color: var(--on-dark); border-color: var(--olive); }
.p-city-link { display: inline-block; margin-top: max(20px, calc(2 * var(--u))); }

/* ---------- lightbox & motion ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--dark) 95%, transparent); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-height: 92vh; width: auto; object-fit: contain; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } * { scroll-behavior: auto !important; } }

/* ---------- insights ---------- */
.in-line { background: var(--olive); color: var(--on-dark); }
.in-line a { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: max(18px, calc(1.8 * var(--u))) 0; font-size: var(--fs-title); }
.in-line a:hover .text-link { opacity: .7; }
.in-head { padding: max(120px, calc(11 * var(--u))) 0 max(24px, calc(2.4 * var(--u))); }
.in-head .h-xl { max-width: 16em; margin: .35em 0 .4em; }
.in-head .label a:hover { opacity: .6; }
.in-body { padding-bottom: max(56px, calc(6 * var(--u))); }
.in-intro { max-width: 46em; }
.in-lead { font-size: var(--fs-title); line-height: 1.6; color: var(--ink-soft); }
.in-pull { margin-top: 1.2em; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.02em; color: var(--olive); max-width: 22em; }
.in-cover { margin: max(32px, calc(3.5 * var(--u))) 0 0; }
.in-cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; background: var(--sand); display: block; }
.in-cover figcaption { margin-top: .8em; }
.in-block { margin-top: max(56px, calc(6 * var(--u))); }
.in-block > .h-md { font-size: var(--fs-h2); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: .4em; }
.in-block > .body { max-width: 40em; }
.in-text .body { max-width: 40em; margin-top: 1em; }
.in-compare { margin-top: max(24px, calc(2.6 * var(--u))); border-top: 1px solid var(--line-strong); }
.in-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: max(16px, calc(2 * var(--u))); padding: max(14px, calc(1.3 * var(--u))) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.5; align-items: baseline; }
.in-row .label { color: var(--gray); }
.in-row .is-them { color: var(--gray); }
.in-row .is-us { color: var(--ink); font-weight: 500; }
.in-row-head { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gray); border-bottom-color: var(--line-strong); }
.in-row-head .is-us { color: var(--olive); }
.in-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(12px, calc(1.2 * var(--u))); margin-top: max(24px, calc(2.6 * var(--u))); }
.in-stat { margin: 0; display: flex; flex-direction: column; padding: max(20px, calc(2 * var(--u))); background: var(--beige); }
.in-stat strong { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--olive); }
.in-stat p { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); margin: 1em 0 1.4em; }
.in-stat figcaption { margin-top: auto; font-size: var(--fs-label); color: var(--gray); line-height: 1.5; }
.in-stat figcaption a { border-bottom: 1px solid var(--line-strong); }
.in-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(20px, calc(2.4 * var(--u))); margin-top: max(24px, calc(2.6 * var(--u))); }
.in-card { display: flex; flex-direction: column; align-items: flex-start; padding-top: max(18px, calc(1.8 * var(--u))); border-top: 1px solid var(--line); }
.in-card h3 { font-size: var(--fs-title); font-weight: 500; margin-bottom: .6em; }
.in-card p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.2em; }
.in-card .text-link { margin-top: auto; }
.in-split { display: grid; grid-template-columns: 1fr 1fr; gap: max(12px, calc(1.2 * var(--u))); margin-top: max(24px, calc(2.6 * var(--u))); }
.in-split-col { padding: max(22px, calc(2.4 * var(--u))); background: var(--olive); color: var(--on-dark); }
.in-split-col.is-ai { background: var(--beige); color: var(--ink); }
.in-split-col h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.02em; margin-bottom: .8em; }
.in-split-col ul { margin: 0; padding-left: 1.1em; display: grid; gap: .6em; font-size: var(--fs-small); line-height: 1.55; }
.in-split-col:not(.is-ai) ul { color: var(--on-dark-muted); }
.in-note { margin-top: max(18px, calc(1.8 * var(--u))); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.02em; max-width: 26em; }
.in-faq { background: none; padding: 0; }
.in-faq > div { margin-top: max(20px, calc(2 * var(--u))); max-width: 52em; }
.in-index { padding: max(16px, calc(2 * var(--u))) 0 max(64px, calc(6 * var(--u))); }

.in-cards.n2, .in-cards.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-stats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-stats.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-link { display: inline-block; margin-top: 1.2em; }
.in-quote { margin-inline: 0; padding: max(28px, calc(3 * var(--u))) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.in-quote blockquote { margin: 0 0 .8em; font-size: var(--fs-h2); font-weight: 300; letter-spacing: -0.03em; line-height: 1.12; max-width: 22em; color: var(--olive); }
/* insights index: one clear row per article */
.in-list { display: grid; gap: 0; margin-top: max(8px, calc(1 * var(--u))); border-top: 1px solid var(--line); }
.in-item { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: max(24px, calc(3.5 * var(--u))); align-items: center; padding: max(24px, calc(2.6 * var(--u))) 0; border-bottom: 1px solid var(--line); }
.in-item-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.in-item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.in-item:hover .in-item-media img { transform: scale(1.04); }
.in-item-text { display: flex; flex-direction: column; align-items: flex-start; }
.in-tag { display: inline-block; padding: .55em .95em; border-radius: 999px; background: var(--beige); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--olive); }
.in-item h3 { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; margin: .45em 0 .4em; max-width: 14em; }
.in-item p { font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.6; max-width: 34em; }
.in-item-meta { margin: 1.4em 0 1.2em; }
.in-item:hover .pill-olive { background: var(--olive-dark); }
/* related articles at the end of a post: compact cards */
.pr-others .in-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(20px, calc(2.4 * var(--u))); border-top: 0; }
.pr-others .in-item { grid-template-columns: 1fr; gap: 14px; align-items: start; padding: 0; border: 0; }
.pr-others .in-item h3 { font-size: var(--fs-h3); margin: .5em 0 0; }
.pr-others .in-item p, .pr-others .in-item .pill, .pr-others .in-item-meta { display: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(4, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-contact { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
  .steps-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .steps-track { display: none; }
  .oc-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .in-stats { grid-template-columns: 1fr 1fr; }
  .in-cards { grid-template-columns: 1fr 1fr; }
  .pr-others .in-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { position: fixed; inset: 64px 0 auto; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px var(--gutter) 32px; background: var(--cream); color: var(--ink); font-size: 18px; box-shadow: var(--shadow-bar); transform: translateY(-130%); transition: transform .4s var(--ease); }
  .nav-open .nav { transform: none; }
  .nav-open .site-header { background: var(--cream); color: var(--ink); }
  .nav-open .logo-light { opacity: 0; } .nav-open .logo-l .logo-dark { opacity: 1; }
  .nav-drop { width: 100%; }
  .nav-drop-btn { pointer-events: none; color: var(--gray); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
  .nav-drop-btn svg { display: none; }
  .nav-drop-panel { position: static; width: 100%; padding: 6px 0 0; background: none; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; }
  .nav-drop-panel::before { display: none; }
  .nav-drop-item { padding: 8px 0; }
  .nav-drop-item strong { font-size: 18px; font-weight: 300; }
  .nav-cta { position: static; transform: none; height: auto; padding: 1.2em 1.8em; font-size: var(--fs-label); background: var(--olive); color: var(--on-dark); margin-top: 6px; }
  .nav-cta:hover { transform: none; }
  .about-grid, .prevue-grid, .enquiry-grid { grid-template-columns: 1fr; }
  .ct-who-grid, .ct-steps-grid, .ct-faq-grid { grid-template-columns: 1fr; }
  .pr-hero-grid, .loc-head-grid { grid-template-columns: 1fr; }
  .ps-update-grid, .ps-two { grid-template-columns: 1fr; }
  .pr-feature-grid { grid-template-columns: 1fr 1fr; }
  /* project page: panel above the content, not sticky */
  .p-layout { grid-template-columns: 1fr; }
  .p-aside { order: -1; margin-bottom: max(8px, calc(1 * var(--u))); }
  .p-aside-inner { position: static; }
  .p-facts > div { grid-template-columns: 1fr 1fr; }
  .about-text { padding-top: 0; }
  .prevue-text { max-width: none; min-width: 0; }
  /* phones/tablets: map runs almost edge to edge */
  /* side gaps leave room to scroll the page with a thumb */
  .map-embed-frame { width: calc(100vw - 48px); margin-left: calc(50% - 50vw + 24px); height: 70vh; height: 70svh; }
  .prevue, .pr-hero { overflow-x: clip; }
  .map-embed-bar { justify-content: flex-start; }
  .process-sub { flex-direction: column; align-items: flex-start; }
  .enquiry-media { aspect-ratio: 4 / 3; width: 100%; min-height: 0; }
  .enquiry-media video { display: block; min-width: 100%; min-height: 100%; }
  .tgrid { grid-template-columns: 1fr 1fr; }
  .tgrid .tcol:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .card-grid, .work-page .card-grid { grid-template-columns: 1fr; }
  .card-media { aspect-ratio: 16 / 10; }
  .card-view { opacity: 1; transform: none; }
  .fade-last .card:nth-last-child(2) { display: none; }
  .g-grid { grid-template-columns: 1fr; }
  .pr-feature-grid, .pr-others-grid, .pr-others-grid.sv-others { grid-template-columns: 1fr; }
  .pn-grid { grid-template-columns: 1fr; }
  .pn-tile { min-height: 300px; }
  .pn-next .pn-text { align-items: flex-start; text-align: left; }
  .enquiry-form form { grid-template-columns: 1fr; }
  .tgrid, .tgrid .tcol:last-child { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logo-cell img { width: 63%; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .explore-right { display: none; }
  .steps-grid { grid-template-columns: 1fr; }
  .oc-grid { grid-template-columns: 1fr; }
  .in-stats, .in-stats.n2, .in-stats.n3, .in-cards, .in-cards.n2, .in-cards.n4, .in-split, .pr-others .in-list { grid-template-columns: 1fr; }
  .in-item { grid-template-columns: 1fr; gap: 16px; }
  /* comparison table on phones: the two columns side by side, row label above */
  .in-row { grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: var(--fs-small); }
  .in-row > [role=rowheader] { grid-column: 1 / -1; }
  .in-row-head { position: sticky; top: 0; z-index: 1; background: var(--cream); padding: 10px 0; }
  .in-row-head > span:first-child { display: none; }
  .in-row .is-us { padding-left: 12px; border-left: 2px solid var(--olive); }
  .in-row .is-them { padding-right: 4px; }
  .steps[data-steps] .step { display: none; }
  .steps[data-steps] .step.is-active { display: block; }
  .steps-track { display: block; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cta-actions { justify-content: flex-start; }
}