/* ============================================================
   VISAR — premium web design
   The design system is derived from the logo mark: every arm of
   the V shares one slope (dx/dy = 0.628 → 32.1°). That angle is
   the structural motif of the entire site.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces */
  --void:      #000000;   /* hero only — matches the video's black exactly */
  --ink:       #0C0C0E;   /* dark sections */
  --ink-2:     #141418;   /* raised dark surface */
  --char:      #2B2B31;   /* brand charcoal */
  --char-line: #26262C;   /* hairline on dark */
  --bone:      #F2F2F2;   /* brand off-white */
  --bone-2:    #E9E8E5;   /* raised light surface */
  --bone-line: #D8D6D2;   /* hairline on light */

  /* Accent */
  --bronze:    #D4AF8A;   /* brand tan — legible on dark */
  --bronze-hi: #E8CFB4;
  --bronze-lo: #7A5730;   /* accessible bronze on light surfaces */

  /* Text */
  --on-dark:       #F2F2F2;
  --on-dark-mute:  #9C9CA4;
  --on-light:      #17171B;
  --on-light-mute: #55555D;

  /* The VISAR slope: 22 / 35 = 0.628 */
  --bevel-x: 22px;
  --bevel-y: 35px;

  /* Type */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide: 118;            /* width axis for display type — echoes the wordmark */
  --t-hero:  clamp(2.15rem, 3.1vw, 3.4rem);   /* desktop hero beats; mobile overrides it */
  --t-h2:    clamp(1.8rem, 3.4vw, 2.9rem);
  --t-h3:    clamp(1.12rem, 1.5vw, 1.36rem);
  --t-lead:  clamp(1.04rem, 1.3vw, 1.22rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-tiny:  0.78rem;

  /* Layout */
  --maxw:   1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --sect:   clamp(72px, 9vw, 130px);
}

/* ---------- 2. Reset and base ---------- */
*, *::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(--ink);
  color: var(--on-dark);
  font-family: var(--font);
  font-size: var(--t-body);
  font-variation-settings: "wdth" 100;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `hidden` would make body a scroll container and
     break position:sticky on the pinned hero. */
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-variation-settings: "wdth" var(--wide);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bronze); color: #111; padding: 12px 18px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--tight { max-width: 920px; }

/* --surface tells bevelled outline buttons what colour to punch through to. */
.section { padding-block: var(--sect); position: relative; }
.section--dark   { background: var(--ink);  color: var(--on-dark);  --surface: var(--ink); }
.section--darker { background: var(--void); color: var(--on-dark);  --surface: var(--void); }
.section--light  { background: var(--bone); color: var(--on-light); --surface: var(--bone); }
.section--light h1, .section--light h2, .section--light h3 { color: var(--on-light); }

.lede { font-size: var(--t-lead); line-height: 1.55; max-width: 62ch; color: var(--on-dark-mute); }
.section--light .lede { color: var(--on-light-mute); }
.measure { max-width: 68ch; }

/* Section heading. The marker is the logo's arm, at the logo's angle —
   brand geometry rather than decoration. */
.head { margin-bottom: clamp(32px, 4vw, 56px); }
.head__title { font-size: var(--t-h2); }
.head__title::before {
  content: "";
  display: block;
  width: 63px; height: 40px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, var(--bronze), rgba(212, 175, 138, 0.14));
  clip-path: polygon(0 0, 22px 0, 100% 100%, 41px 100%);
}
.section--light .head__title::before {
  background: linear-gradient(180deg, var(--bronze-lo), rgba(122, 87, 48, 0.16));
}
.head__sub { margin-top: 20px; }
.head--center { text-align: center; }
.head--center .head__title::before { margin-inline: auto; }
.head--center .lede { margin-inline: auto; }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: var(--bronze);
  --btn-fg: #17120C;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600; font-size: 0.96rem;
  text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 9px) 100%, 0 100%);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn:hover { --btn-bg: var(--bronze-hi); }
.btn:active { transform: translateY(1px); }

/* An outline button keeps the same bevel. A clipped element cannot show a
   border on the cut edge, so the outline is a filled shape with the surface
   colour punched out 1px inside it. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  --edge: rgba(242, 242, 242, 0.3);
  --fill: transparent;
  background: var(--edge);
  position: relative;
  isolation: isolate;
}
.btn--ghost::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: var(--surface, var(--ink));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 8px) 100%, 0 100%);
}
.btn--ghost::after {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: var(--fill);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 8px) 100%, 0 100%);
  transition: background-color 0.18s ease;
}
.btn--ghost:hover { --fill: rgba(242, 242, 242, 0.09); --btn-fg: var(--on-dark); }
.section--light .btn--ghost { --btn-fg: var(--on-light); --edge: rgba(23, 23, 27, 0.26); }
.section--light .btn--ghost:hover { --fill: rgba(23, 23, 27, 0.06); }
.btn--lg { padding: 18px 36px; font-size: 1.02rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 5. Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 18px;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}
.hdr[data-stuck="true"] {
  background: rgba(10, 10, 12, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--char-line);
  padding-block: 12px;
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand__mark { width: 30px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-variation-settings: "wdth" 125;
  font-weight: 500; font-size: 1.14rem;
  letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--on-dark);
}
.brand__sub {
  font-size: 0.55rem; letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--bronze); margin-top: 5px; font-weight: 500;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav__link {
  text-decoration: none; font-size: 0.92rem; color: var(--on-dark-mute);
  transition: color 0.18s ease; position: relative; padding-block: 4px;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--on-dark); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--bronze);
}
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle svg { width: 24px; height: 24px; }

@media (max-width: 880px) {
  .nav__toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10, 10, 12, 0.97);
    backdrop-filter: blur(16px);
    padding: 84px var(--gutter) 28px;
    border-bottom: 1px solid var(--char-line);
    transform: translateY(-101%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav__link { padding-block: 15px; border-bottom: 1px solid var(--char-line); font-size: 1.05rem; }
  .nav .btn { margin-top: 20px; }
}

/* ---------- 6. Hero ---------- */
.hero { background: var(--void); position: relative; }
.hero__rail { height: 460vh; position: relative; }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* The video column: a shaft of light down the centre of the page. */
.hero__canvas {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: clamp(280px, 34vw, 470px);
  height: 100%;
  z-index: 0;
  /* Feather the vertical edges so the column reads as a shaft of light
     rather than a video box sitting on the page. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
/* Keep the top and bottom of the column dark so the header and the
   scroll cue stay readable over it. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 60%, rgba(0,0,0,0.88) 100%);
}

.hero__beats { position: absolute; inset: 0; z-index: 2; }
.beat {
  position: absolute; left: 0; right: 0; top: 50%;
  padding-inline: var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(calc(-50% + var(--beat-shift, 0%)));
  will-change: opacity, transform;
}
.beat__in { max-width: 32ch; }

/* Copy flanks the light column so the animation is never covered. */
@media (min-width: 981px) {
  .beat {
    display: grid;
    grid-template-columns: 1fr clamp(280px, 34vw, 470px) 1fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
    /* Wider than the page container: the middle track is the video column,
       so at 1240px the side tracks were stuck at 278px however wide the
       screen got. Still centred, so the tracks stay aligned to the column. */
    max-width: min(1560px, 96vw);
  }
  /* Heading measures are set from the heading's own size, not in ch — ch
     resolves against the body font, so the box stayed ~214px while the type
     grew with the viewport, and the headings shattered into extra lines.
     text-wrap:balance also shrinks the box below its max-width to even the
     lines out, which undoes the measure, so the hero beats opt out of it. */
  .beat__title { text-wrap: wrap; }
  .beat--l .beat__in { grid-column: 1; justify-self: end; text-align: right; max-width: calc(var(--t-hero) * 5.2); }
  .beat--r .beat__in { grid-column: 3; justify-self: start; max-width: calc(var(--t-hero) * 5.2); }
  .beat--split .beat__in { grid-column: 1; justify-self: end; text-align: right; max-width: calc(var(--t-hero) * 7.7); }
  .beat--split .beat__aside { grid-column: 3; justify-self: start; max-width: 27ch; }
  .beat--l .btn-row { justify-content: flex-end; }
  .beat__aside .beat__body { margin-top: 0; }
}
/* Narrow screens have no room either side of the column, so the copy sits
   over it. Drop it into the lower third and darken that band so the mark
   stays visible above the text instead of behind it. */
@media (max-width: 980px) {
  .beat { text-align: center; top: 68%; }
  /* Headings take the full gutter width; only the body copy is held to a
     reading measure. A ch-based cap here would be sized off the body font
     and would break the headings early. */
  .beat__in, .beat__aside { margin-inline: auto; max-width: 100%; }
  .beat__body { max-width: 30ch; margin-inline: auto; }
  .beat__aside { margin-top: 16px; }
  .beat .btn-row { justify-content: center; }

  /* Opening beat: heading and the scroll cue only. Anything more crowds the
     first screen and sits on top of the mark. */
  .beat--intro .beat__aside { display: none; }

  /* Closing beat: the mark reassembles between roughly 38% and 53% of the
     frame. Everything sits below it — heading, then the buttons — so the
     mark is completely clear. The supporting line is dropped here; it
     crowds the screen and the same detail is repeated further down. */
  .beat--outro {
    top: 0; height: 100%;
    transform: none;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-block: 14vh 10vh;
  }
  .beat--outro .beat__body { display: none; }
  /* Needs the extra .beat to outrank the base .beat__title rule, which sits
     further down the file at equal specificity. 2.15rem is --t-hero's floor,
     which is what mobile and tablet have always resolved to. */
  .beat .beat__title { font-size: 2.15rem; }
  .beat__body { font-size: 1.02rem; margin-top: 14px; }
  .beat__kicker { margin-top: 14px; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.74) 0%, rgba(0,0,0,0) 16%,
      rgba(0,0,0,0.12) 38%, rgba(0,0,0,0.80) 62%, rgba(0,0,0,0.95) 100%);
  }
}

.beat__kicker {
  margin-top: 18px;
  font-variation-settings: "wdth" 118;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--bronze);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.95);
}

.beat__title {
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.96;
  text-shadow: 0 2px 44px rgba(0,0,0,0.92), 0 1px 4px rgba(0,0,0,0.85);
}
.beat__body {
  margin-top: 20px;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: #C9C9CF;
  text-shadow: 0 1px 22px rgba(0,0,0,0.95);
}
.beat__cta { margin-top: 30px; }

.hero__cue {
  position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: var(--t-tiny); letter-spacing: 0.2em; color: var(--on-dark-mute);
  transition: opacity 0.4s ease;
}
.hero__cue-line { width: 1px; height: 34px; background: linear-gradient(180deg, var(--bronze), transparent); }

.hero__loading {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  background: var(--void); transition: opacity 0.6s ease;
}
.hero__loading[data-done="true"] { opacity: 0; pointer-events: none; }
.hero__loading svg { width: 54px; animation: markPulse 2.4s ease-in-out infinite; }
@keyframes markPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.95; } }

/* Static hero: no JS, or reduced motion. */
.hero--static .hero__rail { height: auto; }
.hero--static .hero__stage { position: relative; height: auto; min-height: 100svh; display: grid; align-content: center; padding-block: 150px 100px; }
.hero--static .hero__beats { position: relative; inset: auto; }
.hero--static .beat { position: relative; top: auto; opacity: 1; visibility: visible; transform: none; height: auto; display: block; padding-block: 0; }
.hero--static .beat + .beat { margin-top: 64px; }
/* Stacked beats do not crowd each other, so they keep their full copy. */
.hero--static .beat--intro .beat__aside { display: block; }
.hero--static .beat--outro .beat__body { display: block; }
.hero--static .hero__loading { display: none; }
.hero--static .hero__cue { display: none; }

/* ---------- 7. Cards and grids ---------- */
.card {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--ink-2);
  border: 1px solid var(--char-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel-y)), calc(100% - var(--bevel-x)) 100%, 0 100%);
}
.section--light .card { background: #FFFFFF; border-color: var(--bone-line); }
.card__title { font-size: var(--t-h3); margin-bottom: 12px; font-variation-settings: "wdth" 108; }
.card__body { color: var(--on-dark-mute); font-size: 0.96rem; line-height: 1.6; }
.section--light .card__body { color: var(--on-light-mute); }

.grid { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

/* ---------- 8. Utility ---------- */
.stack > * + * { margin-top: var(--stack, 18px); }
.center { text-align: center; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bronze { color: var(--bronze); }
.section--light .bronze { color: var(--bronze-lo); }
.rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--char-line) 18%, var(--char-line) 82%, transparent); }
.section--light .rule { background: linear-gradient(90deg, transparent, var(--bone-line) 18%, var(--bone-line) 82%, transparent); }

/* ---------- 9. Hero poster (no JS, or reduced motion) ---------- */
.hero__poster { display: none; }
.hero--static .hero__canvas { display: none; }
.hero--static .hero__scrim { display: none; }
.hero--static .hero__poster {
  display: block;
  width: clamp(200px, 26vw, 320px);
  height: auto;
  margin: 0 auto clamp(40px, 5vw, 72px);
  /* Same feathering as the canvas so the still reads as light on the page
     rather than a pasted-in rectangle. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- 10. Spec list ---------- */
.spec {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(28px, 3.2vw, 44px) clamp(32px, 4vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.spec__item { position: relative; padding-left: 40px; }
/* The marker is an arm of the mark, at the mark's own angle. */
.spec__item::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 22px; height: 26px;
  background: linear-gradient(180deg, var(--bronze), rgba(212, 175, 138, 0.2));
  clip-path: polygon(0 0, 8px 0, 100% 100%, calc(100% - 8px) 100%);
}
.section--light .spec__item::before {
  background: linear-gradient(180deg, var(--bronze-lo), rgba(122, 87, 48, 0.22));
}
.spec__title { font-size: var(--t-h3); font-variation-settings: "wdth" 108; margin-bottom: 9px; }
.spec__body { color: var(--on-dark-mute); font-size: 0.97rem; line-height: 1.6; }
.section--light .spec__body { color: var(--on-light-mute); }

/* ---------- 11. Capability chips ---------- */
.chip {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  background: var(--ink-2);
  border: 1px solid var(--char-line);
  font-size: 0.93rem; line-height: 1.42;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 10px) 100%, 0 100%);
}
.section--light .chip { background: #FFFFFF; border-color: var(--bone-line); }
.chip__mark {
  flex: none; width: 11px; height: 15px; margin-top: 4px;
  background: var(--bronze);
  clip-path: polygon(0 0, 5px 0, 100% 100%, calc(100% - 5px) 100%);
}
.section--light .chip__mark { background: var(--bronze-lo); }

.note {
  margin-top: 30px; font-size: var(--t-small); line-height: 1.6;
  color: var(--on-dark-mute); max-width: 68ch;
  padding-left: 18px; border-left: 1px solid var(--char-line);
}
.section--light .note { color: var(--on-light-mute); border-left-color: var(--bone-line); }

/* ---------- 12. Steps. A real sequence, so it is numbered. ---------- */
.steps { list-style: none; margin: 0; padding: 0; position: relative; max-width: 900px; }
.steps::before {
  content: ""; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, var(--bronze-lo), rgba(122, 87, 48, 0.14));
}
.steps__item { position: relative; display: flex; gap: 26px; padding-block: clamp(20px, 2.4vw, 30px); }
.steps__n {
  flex: none; width: 47px; height: 47px; display: grid; place-items: center;
  background: var(--bone); border: 1px solid var(--bone-line); border-radius: 50%;
  font-variation-settings: "wdth" 118; font-weight: 600; font-size: 1.05rem;
  color: var(--bronze-lo);
  position: relative; z-index: 1;
}
.steps__title { font-size: var(--t-h3); font-variation-settings: "wdth" 108; margin-bottom: 8px; }
.steps__body { color: var(--on-light-mute); font-size: 0.99rem; line-height: 1.62; max-width: 60ch; }

/* ---------- 13. Concept build previews ---------- */
.shots { align-items: start; }
.shot { text-decoration: none; display: block; }
.shot__meta { display: block; margin-top: 16px; }
.shot__name { display: block; font-variation-settings: "wdth" 110; font-weight: 600; font-size: 1.03rem; }
.shot__kind { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--on-dark-mute); }
.section--light .shot__kind { color: var(--on-light-mute); }

/* ---------- 14. Price block ---------- */
.price { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .price { grid-template-columns: 1.05fr 0.95fr; } }
.price__card {
  background: #FFFFFF; border: 1px solid var(--bone-line);
  padding: clamp(28px, 3vw, 40px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel-y)), calc(100% - var(--bevel-x)) 100%, 0 100%);
}
.price__tag { display: flex; align-items: baseline; gap: 3px; font-variation-settings: "wdth" 118; }
.price__cur { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 500; color: var(--bronze-lo); }
.price__num { font-size: clamp(3.6rem, 7vw, 5.4rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; }
.price__per { font-size: 1.05rem; color: var(--on-light-mute); margin-left: 6px; }
.price__note { margin-top: 12px; font-size: var(--t-small); color: var(--on-light-mute); }
.price__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 0.96rem; }
.price__list li { position: relative; padding-left: 24px; }
.price__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 13px; background: var(--bronze-lo);
  clip-path: polygon(0 0, 4px 0, 100% 100%, calc(100% - 4px) 100%);
}

/* ---------- 15. FAQ ---------- */
.faq { border-top: 1px solid var(--char-line); }
.section--light .faq { border-top-color: var(--bone-line); }
.faq__item { border-bottom: 1px solid var(--char-line); }
.section--light .faq__item { border-bottom-color: var(--bone-line); }
.faq__q {
  list-style: none; cursor: pointer;
  padding: 22px 46px 22px 0; position: relative;
  font-variation-settings: "wdth" 108; font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 13px; height: 2px; background: var(--bronze); transform: translateY(-50%);
}
.faq__q::before {
  content: ""; position: absolute; right: 13.5px; top: 50%;
  width: 2px; height: 13px; background: var(--bronze);
  transform: translateY(-50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.section--light .faq__q::after, .section--light .faq__q::before { background: var(--bronze-lo); }
.faq__item[open] .faq__q::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.faq__a { padding: 0 8% 26px 0; color: var(--on-dark-mute); line-height: 1.68; }
.section--light .faq__a { color: var(--on-light-mute); }

/* ---------- 16. CTA ---------- */
.cta__title { font-size: var(--t-h2); }
.cta__title::before { margin-inline: auto; }

/* ---------- 17. Footer ---------- */
.ftr { background: var(--ink); border-top: 1px solid var(--char-line); padding-block: clamp(48px, 5vw, 72px) 28px; }
.ftr__in { display: grid; gap: clamp(28px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
.ftr__line { margin-top: 18px; font-size: var(--t-small); color: var(--on-dark-mute); max-width: 34ch; line-height: 1.6; }
.ftr__nav { display: grid; gap: 11px; align-content: start; }
.ftr__nav a, .ftr__contact a { color: var(--on-dark-mute); text-decoration: none; font-size: 0.95rem; transition: color 0.18s ease; }
.ftr__nav a:hover, .ftr__contact a:hover { color: var(--bronze); }
.ftr__contact { display: grid; gap: 11px; align-content: start; }
.ftr__legal {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  margin-top: clamp(36px, 4vw, 56px); padding-top: 22px;
  border-top: 1px solid var(--char-line);
  font-size: var(--t-tiny); color: #6C6C74;
}

/* ---------- 18. Forms ---------- */
.form { display: grid; gap: 20px; max-width: 620px; }
.field { display: grid; gap: 8px; }
.field__label { font-size: 0.9rem; font-weight: 500; color: var(--on-dark); }
.section--light .field__label { color: var(--on-light); }
.field__hint { font-size: var(--t-tiny); color: var(--on-dark-mute); }
.section--light .field__hint { color: var(--on-light-mute); }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--on-dark);
  background: var(--ink-2);
  border: 1px solid var(--char-line);
  padding: 14px 16px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.section--light .field input, .section--light .field textarea, .section--light .field select {
  color: var(--on-light); background: #FFFFFF; border-color: var(--bone-line);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--bronze); background: #191920;
}
.section--light .field input:focus, .section--light .field textarea:focus, .section--light .field select:focus {
  background: #FFFFFF; border-color: var(--bronze-lo);
}
.field textarea { min-height: 130px; resize: vertical; }
.form__row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form__status { font-size: 0.95rem; line-height: 1.55; min-height: 1.2em; }
.form__status[data-state="ok"] { color: var(--bronze); }
.form__status[data-state="error"] { color: #E8927C; }
.section--light .form__status[data-state="ok"] { color: var(--bronze-lo); }
.section--light .form__status[data-state="error"] { color: #A8412A; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 19. Page header (interior pages) ---------- */
.phead { padding-block: clamp(130px, 15vw, 190px) clamp(40px, 5vw, 70px); background: var(--void); }
.phead__title { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.03em; }
.phead__sub { margin-top: 22px; font-size: var(--t-lead); color: var(--on-dark-mute); max-width: 60ch; line-height: 1.55; }

/* ---------- 20. Comparison / tier table ---------- */
.tiers { display: grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.tier {
  background: #FFFFFF; border: 1px solid var(--bone-line);
  padding: clamp(26px, 2.8vw, 36px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel-y)), calc(100% - var(--bevel-x)) 100%, 0 100%);
  display: flex; flex-direction: column; height: 100%;
}
.tier--lead { border-color: var(--bronze-lo); box-shadow: inset 0 3px 0 0 var(--bronze-lo); }
.tier__name { font-size: var(--t-h3); font-variation-settings: "wdth" 112; }
.tier__price { display: flex; align-items: baseline; gap: 2px; margin-top: 18px; font-variation-settings: "wdth" 118; }
.tier__cur { font-size: 1.35rem; font-weight: 500; color: var(--bronze-lo); }
.tier__num { font-size: clamp(2.6rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.035em; }
.tier__per { font-size: 0.95rem; color: var(--on-light-mute); margin-left: 5px; }
.tier__for { margin-top: 14px; font-size: 0.95rem; color: var(--on-light-mute); line-height: 1.55; }
.tier__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; font-size: 0.94rem; }
.tier__list li { position: relative; padding-left: 22px; line-height: 1.5; }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 9px; height: 12px; background: var(--bronze-lo);
  clip-path: polygon(0 0, 4px 0, 100% 100%, calc(100% - 4px) 100%);
}
.tier__foot { margin-top: auto; padding-top: 26px; }

/* ---------- 21. Callout ---------- */
.callout {
  padding: clamp(26px, 3vw, 40px);
  background: var(--ink-2);
  border: 1px solid var(--char-line);
  border-left: 2px solid var(--bronze);
}
.section--light .callout { background: #FFFFFF; border-color: var(--bone-line); border-left-color: var(--bronze-lo); }
.callout__title { font-size: var(--t-h3); font-variation-settings: "wdth" 108; margin-bottom: 12px; }
.callout__body { color: var(--on-dark-mute); line-height: 1.65; max-width: 70ch; }
.section--light .callout__body { color: var(--on-light-mute); }

/* ---------- 22. Miniature concept sites ----------
   Real markup rendered small rather than a grey wireframe: every size is in
   container-query units, so the same component works as a thumbnail on the
   home page and full width on the Work page. */
.mini {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--char-line);
  background: #17171C;
  display: block;
}
.section--light .mini { border-color: var(--bone-line); }

.mini__bar { display: flex; align-items: center; gap: 0.8cqi; padding: 1.3cqi 1.6cqi; background: #202027; }
.mini__bar i { width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: #3D3D46; flex: none; }
.mini__url {
  margin-left: 1.4cqi; font-size: 1.7cqi; color: #7A7A85;
  background: #17171C; padding: 0.5cqi 1.6cqi; border-radius: 99px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mini__page {
  font-size: 2.05cqi;
  line-height: 1.45;
  background: var(--m-bg);
  color: var(--m-fg);
  padding: 0 0 2.4em;
}

.mini__nav {
  display: flex; align-items: center; gap: 1.6em;
  padding: 1.15em 1.6em;
  border-bottom: 1px solid var(--m-line);
}
.mini__logo { font-variation-settings: "wdth" 120; font-weight: 700; font-size: 1.05em; letter-spacing: 0.06em; }
.mini__links { display: flex; gap: 1.15em; margin-left: auto; color: var(--m-mute); font-size: 0.82em; }
.mini__navcta {
  background: var(--m-accent); color: var(--m-accent-fg);
  font-size: 0.78em; font-weight: 600; padding: 0.5em 1em;
}

.mini__hero { padding: 2.4em 1.6em 2em; }
.mini__h {
  font-variation-settings: "wdth" 112; font-weight: 700;
  font-size: 2.15em; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 0.55em; max-width: 15ch; color: var(--m-fg);
}
.mini__p { color: var(--m-mute); font-size: 0.92em; max-width: 34ch; margin: 0; }
.mini__btn {
  display: inline-block; margin-top: 1.4em;
  background: var(--m-accent); color: var(--m-accent-fg);
  font-size: 0.86em; font-weight: 600; padding: 0.8em 1.5em;
}
.mini__btn--alt { background: transparent; color: var(--m-fg); box-shadow: inset 0 0 0 1px var(--m-line); margin-left: 0.7em; }

.mini__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9em; padding: 0 1.6em; }
.mini__card { background: var(--m-card); border: 1px solid var(--m-line); padding: 1.1em; }
.mini__card b { display: block; font-size: 0.92em; font-weight: 600; margin-bottom: 0.35em; }
.mini__card span { display: block; font-size: 0.78em; color: var(--m-mute); line-height: 1.45; }

.mini__rows { padding: 0 1.6em; display: grid; gap: 0.75em; }
.mini__row { display: flex; align-items: baseline; gap: 0.8em; border-bottom: 1px dashed var(--m-line); padding-bottom: 0.7em; }
.mini__row b { font-size: 0.92em; font-weight: 600; }
.mini__row span { color: var(--m-mute); font-size: 0.78em; }
.mini__row em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 0.9em; color: var(--m-accent); }
.mini--hosp .mini__row em { color: var(--m-accent); }

.mini__strip {
  display: flex; gap: 2.2em; margin-top: 1.8em; padding: 1.2em 1.6em;
  background: var(--m-card); border-top: 1px solid var(--m-line);
}
.mini__stat b { display: block; font-variation-settings: "wdth" 118; font-weight: 700; font-size: 1.35em; letter-spacing: -0.02em; }
.mini__stat span { display: block; font-size: 0.72em; color: var(--m-mute); }

/* Themes */
.mini--trade {
  --m-bg: #16181C; --m-fg: #F1EEE9; --m-mute: #98A0A9; --m-accent: #E2A33C;
  --m-accent-fg: #1A1206; --m-card: #1E2126; --m-line: #2B2F35;
}
.mini--hosp {
  --m-bg: #F7F1E7; --m-fg: #241D14; --m-mute: #6C6154; --m-accent: #1F4C39;
  --m-accent-fg: #F7F1E7; --m-card: #FFFFFF; --m-line: #E3D9C9;
}
.mini--prof {
  --m-bg: #101826; --m-fg: #EEF3F9; --m-mute: #8B99AD; --m-accent: #C8D8EF;
  --m-accent-fg: #101826; --m-card: #16202F; --m-line: #233147;
}

/* Case-study wrapper on the Work page */
.case { display: grid; gap: clamp(28px, 3.5vw, 56px); align-items: start; }
@media (min-width: 900px) { .case { grid-template-columns: 1.35fr 1fr; } }
.case + .case { margin-top: clamp(64px, 8vw, 120px); }
.case__label {
  display: inline-block; font-size: var(--t-tiny); font-weight: 600;
  color: var(--bronze); border: 1px solid rgba(212, 175, 138, 0.4);
  padding: 5px 11px; margin-bottom: 18px;
}
.case__title { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.case__body { margin-top: 16px; color: var(--on-dark-mute); line-height: 1.68; }
.case__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; font-size: 0.94rem; }
.case__list li { position: relative; padding-left: 22px; color: var(--on-dark-mute); }
.case__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 12px; background: var(--bronze);
  clip-path: polygon(0 0, 4px 0, 100% 100%, calc(100% - 4px) 100%);
}

/* Home-page preview caption */

/* The mini sites are built from spans so they can sit inside a link.
   Give the structural parts their block/inline-block roles back. */
.mini__page, .mini__hero, .mini__card { display: block; }
.mini__h, .mini__p { display: block; }
.mini__url, .mini__navcta, .mini__logo { display: inline-block; }
.mini__links span { display: inline-block; }

.shot:hover .mini { border-color: rgba(212, 175, 138, 0.55); }
.shot .mini { transition: border-color 0.2s ease, transform 0.2s ease; }
.shot:hover .mini { transform: translateY(-3px); }

/* ---------- 23. Contact page ---------- */
.contact { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) { .contact { grid-template-columns: 1.12fr 0.88fr; } }

.contact__direct {
  margin-top: 24px;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--ink-2);
  border: 1px solid var(--char-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel-y)), calc(100% - var(--bevel-x)) 100%, 0 100%);
}
.contact__links { display: grid; gap: 9px; margin-top: 16px; }
.contact__links a { color: var(--bronze); text-decoration: none; font-weight: 500; }
.contact__links a:hover { text-decoration: underline; }

/* Steps also appear on dark surfaces (the contact page), so give them a
   dark-surface variant rather than assuming the light section. */
.section--dark .steps::before { background: linear-gradient(180deg, var(--bronze), rgba(212, 175, 138, 0.14)); }
.section--dark .steps__n { background: var(--ink-2); border-color: var(--char-line); color: var(--bronze); }
.section--dark .steps__body { color: var(--on-dark-mute); }
.steps--compact .steps__item { padding-block: 14px; gap: 18px; }
.steps--compact .steps__n { width: 38px; height: 38px; font-size: 0.94rem; }
.steps--compact::before { left: 18.5px; }
.steps--compact .steps__title { font-size: 1.02rem; margin-bottom: 4px; }
.steps--compact .steps__body { font-size: 0.92rem; }

/* Tier lists are reused inside dark comparison cards. */
.section--dark .tier__list li::before { background: var(--bronze); }

/* Raised surfaces re-declare --surface so bevelled outline buttons sitting on
   them punch through to the right colour. */
.section--light .callout, .section--light .card, .section--light .tier { --surface: #FFFFFF; }
.section--dark .callout, .section--dark .card { --surface: var(--ink-2); }

/* ---------- 24. Small-screen refinements ---------- */
@media (max-width: 600px) {
  .mini__url { display: none; }
  .steps__item { gap: 18px; }
  .ftr__legal { flex-direction: column; gap: 8px; }
}

.tier__plus { margin-top: 10px; font-size: 0.9rem; color: var(--on-light-mute); line-height: 1.45; }

/* ---------- 25. Blur-fade reveal ----------
   Same effect as the BlurFade React component (blur + lift + fade, staggered,
   triggered on entering the viewport), implemented natively because the site
   has no React runtime.

   The hidden state is applied only once JS has flagged .js-reveal on <html>,
   so with JS off or broken every element stays visible. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 6px));
  filter: blur(var(--reveal-blur, 6px));
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity var(--reveal-duration, 0.4s) ease-out,
    transform var(--reveal-duration, 0.4s) ease-out,
    filter var(--reveal-duration, 0.4s) ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}

/* Motion is a preference, not a default. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}