/* ==========================================================================
   TFM v3 (2026-09-24)
   Loaded after styles.css. Direction from a study of the leading web design
   and social media agency sites (The Social Shepherd, We Are Social, Born
   Social, Kota, Clay, Superrb, Unseen, Locomotive):
     - alternating ink and bright light-grey sections, never pure white
     - very large wide display type
     - big media: rounded frames, real work shown large
     - motion: smooth scroll, marquees, reveal-on-scroll, a growing hero frame
   Colour is taken from the TFM mark itself: white letters, and a flame that
   runs deep red, red-orange, orange, amber. Nothing brown, clay or burgundy.
   ========================================================================== */

/* ---------- faces ----------
   'TFM Wide' is the display face. It is Archivo at its widest (125%), an open
   licence stand-in for HK Grotesk Wide: drop the HK Grotesk Wide webfont files
   into assets/fonts/ as hk-grotesk-wide-*.woff2 and point this src at them.
   Hanken Grotesk is HK Grotesk's own normal-width sibling, so the body face
   already belongs to the same family as the wide display cut. */
@font-face {
  font-family: 'TFM Wide';
  src: url('../assets/fonts/wide.woff2') format('woff2');
  font-weight: 500 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* ink: near-black with the faintest cool cast */
  --c-ink:   #0D0F13;
  --c-ink-2: #15181E;
  --c-ink-3: #1E222A;
  --c-ink-l1: #2A2F38;
  --c-ink-l2: #3B414C;
  /* paper: bright, but a clear step off white */
  --c-paper:   #ECEDEF;
  --c-paper-2: #E2E4E8;
  --c-paper-3: #D5D8DE;
  --c-paper-l1: #C8CCD3;
  --c-paper-l2: #AEB3BC;
  /* the mark's flame, dark end to bright end */
  --f-red:    #E4200B;
  --f-orange: #FF4A14;
  --f-tang:   #FF7A1C;
  --f-amber:  #FFB020;
  --flame: linear-gradient(100deg, var(--f-red) 0%, var(--f-orange) 32%, var(--f-tang) 64%, var(--f-amber) 100%);
  --flame-text-dark:  linear-gradient(96deg, #FF4A14 0%, #FF7A1C 45%, #FFB020 100%);
  --flame-text-light: linear-gradient(96deg, #C51B07 0%, #D9360B 50%, #D8500C 100%);

  /* the legacy tokens, remapped so every existing rule picks up the new ink */
  --void: var(--c-ink); --void-rgb: 13 15 19; --deep-rgb: 10 12 15;
  --panel: var(--c-ink-2); --panel-2: var(--c-ink-3);
  --line: var(--c-ink-l1); --line-2: var(--c-ink-l2);
  --dim: #9AA1AD; --mid: #C2C7CF; --white: #F5F6F8;
  --orange: #FF6A2A; --fill-deep: #E4200B; --fill-lift: #FFB020; --tint-lilac: #C2C7CF;
  --glass-bg: rgb(21 24 30 / .72); --glass-strong: rgb(13 15 19 / .86);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .08);
  --sun-hi: #FFB020; --sun-mid: #FF7A1C; --ember: #FF4A14;

  --display: 'TFM Wide', 'Archivo', 'Arial Black', system-ui, sans-serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: var(--display);

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --maxw: 86rem;
  --sect-y: clamp(5rem, 10vw, 9rem);
}

body { background: var(--c-ink); color: var(--mid); font-family: var(--sans); }

/* ---------- the light scope ----------
   Tokens resolve where they are declared, so the legacy aliases (declared on
   :root) would still carry the dark values inside a light section. Every one
   is re-declared here so it resolves against the light values instead. */
.section--paper, .section--champagne, .section--sand {
  --void: var(--c-paper); --void-rgb: 236 237 239; --deep-rgb: 226 228 232;
  --panel: var(--c-paper-2); --panel-2: var(--c-paper-3);
  --line: var(--c-paper-l1); --line-2: var(--c-paper-l2);
  --dim: #555C67; --mid: #3E444E; --white: #0D0F13;
  --orange: #C4280C;
  --glass-bg: rgb(255 255 255 / .6); --glass-strong: rgb(255 255 255 / .8);
  --glass-border: rgba(13, 15, 19, .12);
  --sun-hi: #D8500C; --sun-mid: #D9360B; --ember: #C51B07;

  --black: var(--void); --ink: var(--void); --obsidian: var(--void); --bg1: var(--void);
  --ivory: var(--white); --cream: var(--white); --text: var(--white);
  --soft: var(--white); --warm-white: var(--white); --muted-light: var(--mid); --muted-dark: var(--mid);
  --muted-ink: var(--mid);
  --gold: var(--orange); --coral: var(--orange); --wheat: var(--orange); --copper: var(--orange);
  --orange-deep: var(--orange);
  --bronze: var(--orange); --sand: var(--orange);
  --rule: var(--line); --rule-light: var(--line); --rule-dark: var(--line);
  --rule-ink: var(--line); --rule-strong: var(--line-2);
  --grad: linear-gradient(90deg, var(--orange), var(--orange));
  --on: var(--white); --on-muted: var(--mid); --on-rule: var(--line); --on-accent: var(--orange);
  --ground: var(--void);
  background: var(--c-paper);
  color: var(--mid);
}
.section--paper::after, .section--champagne::after, .section--sand::after { display: none; }
.section--ink, .section--warm { background: var(--c-ink); }
.section + .section { border-top: 0; }

/* ---------- type ---------- */
h1, h2, h3, .h-lg, .h-md, .h-sm, .vdisplay {
  font-family: var(--display);
  font-stretch: normal;
  color: var(--white);
  text-wrap: balance;
}
.h-lg, .vdisplay {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .95;
  font-size: clamp(2.1rem, 5.6vw, 5.4rem);
}
.h-md { font-weight: 700; letter-spacing: -.01em; line-height: 1.02; font-size: clamp(1.4rem, 2.6vw, 2.2rem); text-transform: none; }
.h-sm { font-weight: 700; letter-spacing: -.005em; line-height: 1.1; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
p, li { font-family: var(--sans); }
.lede, .vlede { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.55; color: var(--mid); max-width: 44ch; }

/* the accent: the mark's flame as a text fill */
.h-lg em, .h-md em, h1 em, h2 em, .vdisplay em, .vhero__h em {
  font-style: normal;
  background-image: var(--flame-text-dark);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: none;
}
.section--paper em, .section--champagne em, .section--sand em {
  background-image: var(--flame-text-light);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .h-lg em, .h-md em, h1 em, h2 em, .vdisplay em, .vhero__h em { color: var(--orange); -webkit-text-fill-color: var(--orange); }
}
.eyebrow, .vkick {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); -webkit-text-fill-color: currentColor; background: none;
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.1rem;
}
.vkick::before { content: ""; width: 1.6rem; height: 2px; background: var(--flame); border-radius: 2px; }

/* ---------- buttons: the flame, as glass ----------
   Same colourway as the mark, laid over a frosted blur instead of painted
   solid, so whatever is behind (the footage, the page) shows through. */
.btn, .btn.btn--ghost, .btn.btn--onink, .btn.btn--onink.btn--nav {
  font-family: var(--display);
  font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px;
  padding: .95rem 1.45rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .35s var(--ease);
}
.btn:not(.btn--solid):not(.btn--molten):hover,
.btn:not(.btn--solid):not(.btn--molten):focus-visible {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .5);
}
.btn.btn--solid, .btn.btn--molten {
  background: linear-gradient(100deg,
    rgba(228, 32, 11, .56) 0%, rgba(255, 74, 20, .50) 34%,
    rgba(255, 122, 28, .44) 66%, rgba(255, 176, 32, .38) 100%);
  border: 1px solid rgba(255, 168, 120, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(0, 0, 0, .12),
              0 12px 30px -16px rgba(255, 74, 20, .85);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
}
.btn.btn--solid span, .btn.btn--molten span,
.btn.btn--solid svg, .btn.btn--molten svg { color: #FFFFFF !important; }
.btn.btn--solid span, .btn.btn--molten span { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.btn.btn--solid:hover, .btn.btn--molten:hover,
.btn.btn--solid:focus-visible, .btn.btn--molten:focus-visible {
  background: linear-gradient(100deg,
    rgba(228, 32, 11, .78) 0%, rgba(255, 74, 20, .72) 34%,
    rgba(255, 122, 28, .66) 66%, rgba(255, 176, 32, .58) 100%);
  border-color: rgba(255, 196, 150, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 16px 38px -16px rgba(255, 122, 28, .95);
  transform: translateY(-2px);
}
/* on the light grounds the glass needs more body, and a dark label. Both
   flame variants, on all three light sections: sand was missing for the
   molten one, which left a white label on a pale button on the pricing page. */
:is(.section--paper, .section--champagne, .section--sand) :is(.btn.btn--solid, .btn.btn--molten) {
  background: linear-gradient(100deg,
    rgba(228, 32, 11, .30) 0%, rgba(255, 74, 20, .28) 34%,
    rgba(255, 122, 28, .26) 66%, rgba(255, 176, 32, .24) 100%);
  border-color: rgba(228, 32, 11, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 28px -18px rgba(228, 32, 11, .6);
}
:is(.section--paper, .section--champagne, .section--sand) :is(.btn.btn--solid, .btn.btn--molten) :is(span, svg) {
  color: #0D0F13 !important; text-shadow: none;
}
:is(.section--paper, .section--champagne, .section--sand) :is(.btn.btn--solid, .btn.btn--molten):hover {
  background: linear-gradient(100deg,
    rgba(228, 32, 11, .45) 0%, rgba(255, 74, 20, .42) 34%,
    rgba(255, 122, 28, .38) 66%, rgba(255, 176, 32, .34) 100%);
}
.section--paper .btn:not(.btn--solid):not(.btn--molten),
.section--champagne .btn:not(.btn--solid):not(.btn--molten),
.section--sand .btn:not(.btn--solid):not(.btn--molten) {
  background: rgba(255, 255, 255, .45); border-color: rgba(13, 15, 19, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.section--paper .btn:not(.btn--solid):not(.btn--molten):hover,
.section--champagne .btn:not(.btn--solid):not(.btn--molten):hover {
  background: rgba(255, 255, 255, .85); border-color: rgba(13, 15, 19, .4);
}
.btnrow { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- nav ---------- */
.nav { background: transparent; border-bottom: 1px solid transparent; }
.nav.is-solid {
  background: rgb(13 15 19 / .78);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .07);
}
.nav__links a {
  font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mid);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--white); }
 .nav__clock, .tick {
  font-family: var(--display); font-weight: 600; font-size: .62rem; letter-spacing: .16em;
  background: none; color: var(--dim); -webkit-text-fill-color: currentColor;
}
.nav__toggle-txt { font-family: var(--display); font-weight: 700; letter-spacing: .1em; }
.nav__progress i { background: var(--flame); }

/* the menu: ink glass, no red haze */
.menu {
  background: rgb(13 15 19 / .9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%);
}
.menu::before, .menu::after { background: radial-gradient(60% 40% at 80% 10%, rgba(255, 74, 20, .16), transparent 70%) !important; }
.menu > a { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.menu__meta { border-color: rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .03) !important; }

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- hero: the film fills the screen ----------
   One full-bleed video, edge to edge and exactly one screen tall. The slogan
   is in the footage, on the laptop's own screen, so nothing is laid over the
   laptop or the iPhone: a line of copy and the two buttons sit low, over the
   empty set in front of them, on a soft shade that keeps them readable.
   Phones get their own portrait cut of the film (see build_home), framed so
   the devices stay above this strip. */
.vhero {
  position: relative; background: #000; overflow: clip;
  height: 100svh; min-height: 30rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.vhero__media { position: absolute; inset: 0; z-index: 0; background: #000; }
.vhero__media .hero__still, .vhero__media .hero__clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.vhero__media .hero__clip { z-index: 1; opacity: 0; transition: opacity 1.4s var(--ease); }
/* the Low Power Mode stand-in (main.js): the film as a looping image, over the still */
.vhero__media .hero__standin { animation: standin-in .6s var(--ease) both; }
@keyframes standin-in { from { opacity: 0; } to { opacity: 1; } }
.vhero__media .hero__clip.is-on { opacity: 1; }
.vhero__media[data-video="waiting"] .hero__clip,
.vhero__media[data-video="off"] .hero__clip { opacity: 0; }
/* shade the strip under the copy only; the devices sit above it */
.vhero__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .34) 50%, rgba(0, 0, 0, 0) 100%);
}
.vhero__over {
  position: relative; z-index: 3;
  padding: 0 var(--gut) clamp(1.4rem, 4.5vh, 2.75rem);
  max-width: 44rem;
}
/* who and where, one compact line above the lede */
.vhero__kick {
  margin-bottom: .6rem;
  /* light champagne rather than the site orange: the set behind it is red and
     orange, and the orange label disappeared into it */
  color: #FFE6C2; -webkit-text-fill-color: #FFE6C2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 1px 14px rgba(0, 0, 0, .75);
}
@media (max-width: 30rem) { .vhero__kick { font-size: .66rem; letter-spacing: .14em; gap: .5rem; } .vhero__kick::before { width: 1.2rem; } }
@media (max-width: 24rem) { .vhero__kick { font-size: .6rem; letter-spacing: .1em; gap: .45rem; } .vhero__kick::before { width: .9rem; } }
/* wide screens: a longer measure keeps the lede to two lines, and on short
   laptop screens the strip hugs the bottom, so the block stays under the
   laptop's front edge (measured at 1280x720 and 1024x768) */
@media (min-aspect-ratio: 4001/5000) { .vhero .vhero__lede { max-width: 64ch; } }
/* the original iPhone SE (320x568) has no room for all three: the lede gives way */
@media (max-width: 21rem) {
  .vhero__kick { font-size: .55rem; letter-spacing: .06em; }
  .vhero__kick::before { display: none; }
}
@media (max-width: 21rem) and (max-height: 37.5rem) { .vhero__lede { display: none; } .vhero__over { padding-bottom: .6rem; } }
@media (min-aspect-ratio: 4001/5000) and (max-height: 50rem) {
  .vhero__over { padding-bottom: 1.1rem; }
  .vhero__kick { margin-bottom: .45rem; }
  .vhero__acts { margin-top: .75rem; }
}
/* the words are on the laptop in the film; the heading carries them for
   search and screen readers without drawing them a second time */
.vhero__h {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.vhero__lede {
  margin: 0; max-width: 40ch;
  font-family: var(--sans); font-weight: 600; line-height: 1.45;
  font-size: clamp(.9rem, 1.05vw, 1.05rem);
  color: #FFFFFF; text-shadow: 0 1px 14px rgba(0, 0, 0, .65);
}
.vhero__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(.8rem, 1.8vh, 1.15rem); }

/* portrait screens play the portrait cut, whose devices end above the
   bottom sixth: keep the strip that short */
@media (max-aspect-ratio: 4/5) {
  .vhero { min-height: 28rem; }
  .vhero__media::after { height: 26%; }
  .vhero__over { padding-bottom: clamp(1rem, 3vh, 1.5rem); }
  .vhero__lede { font-size: .84rem; }
}
@media (max-width: 47.99rem) {
  .vhero__acts { display: grid; grid-template-columns: 1fr 1fr; }
  .vhero__acts .btn { justify-content: center; padding-inline: .7rem; }
}

/* ---------- section heads ---------- */
.vhead { margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.vhead--split { display: grid; gap: 1.5rem 4rem; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 72rem) { .vhead--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

/* heading reveal: a wipe upward rather than a fade */
.vdisplay.rv { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.vdisplay.rv.is-in { clip-path: inset(0 0 -10% 0); transition: clip-path 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce) { .vdisplay.rv { clip-path: none; } }

/* image reveal: the frame opens and the photo settles */
.rv-img.rv { opacity: 1; transform: none; clip-path: inset(6% 6% 6% 6% round var(--r-lg)); }
.rv-img.rv img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.rv-img.rv.is-in { clip-path: inset(0 0 0 0 round var(--r-lg)); transition: clip-path 1.3s var(--ease); }
.rv-img.rv.is-in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .rv-img.rv { clip-path: none; } .rv-img.rv img { transform: none; } }

/* ---------- about: photograph left, words right ----------
   Balanced: the photo takes half the row as a square, roughly the height of
   the words beside it, so neither side dwarfs the other. No pinning. */
.vabout__grid { display: grid; gap: 2.5rem clamp(3rem, 5vw, 5rem); align-items: center; }
@media (min-width: 62rem) { .vabout__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vabout__media {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 1 / 1; max-height: 78svh; background: var(--c-paper-3);
}
@media (max-width: 61.99rem) { .vabout__media { aspect-ratio: 3 / 2; } }
.vabout__media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.vabout__text .vlede { font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--white); line-height: 1.5; margin-top: 1.5rem; max-width: 40ch; }
.vabout__text .vdisplay { font-size: clamp(2.2rem, 4.6vw, 4.6rem); }

/* the three points: a ruled list, no boxes, no numbers */
.vpoints { list-style: none; padding: 0; margin: clamp(2rem, 3.5vw, 2.75rem) 0 0; }
.vpoints li { padding: 1.15rem 0; border-top: 1px solid var(--line); }
.vpoints li:last-child { border-bottom: 1px solid var(--line); }
.vpoints h3 {
  font-size: clamp(.95rem, 1.2vw, 1.05rem); font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  display: flex; align-items: center; gap: .7rem;
}
.vpoints h3::before { content: ""; width: 1.1rem; height: 2px; background: var(--flame); border-radius: 2px; flex: none; }
.vpoints p { color: var(--mid); line-height: 1.6; margin-top: .45rem; }

/* ---------- services: photograph, name, line, no card around them ---------- */
.vsvc__grid { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem); }
@media (min-width: 48rem) { .vsvc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .vsvc__grid { grid-template-columns: repeat(3, 1fr); } }
.vsvc__item { display: grid; gap: .55rem; align-content: start; text-decoration: none; color: inherit; }
.vsvc__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--c-ink-3); margin-bottom: .75rem; }
.vsvc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.vsvc__item:hover .vsvc__media img, .vsvc__item:focus-visible .vsvc__media img { transform: scale(1.05); }
.vsvc__name {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: var(--white); line-height: 1.05;
}
.vsvc__blurb { color: var(--mid); line-height: 1.55; }
.vsvc__go {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .2rem; justify-self: start;
  font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); padding-bottom: .3rem;
  background: var(--flame) no-repeat 0 100% / 0% 2px; transition: background-size .5s var(--ease);
}
.vsvc__item:hover .vsvc__go, .vsvc__item:focus-visible .vsvc__go { background-size: 100% 2px; }
.vsvc__go svg { transition: transform .4s var(--ease); }
.vsvc__item:hover .vsvc__go svg { transform: translateX(4px); }

/* per-photo exposure calibration. Hosting sits a touch lower (it read too bright). */
img[src*="svc-web."]         { --expose: 3.2;  }
img[src*="svc-hosting."]     { --expose: 0.84; }
img[src*="svc-photography."] { --expose: 3.0;  }
img[src*="svc-content."]     { --expose: 2.3;  }
img[src*="svc-social."]      { --expose: 1.1;  }
img[src*="svc-strategy."]    { --expose: 1.05; }
.vsvc__media img, .svchero__media > img, .alsocard__media img {
  filter: brightness(var(--expose, 1)) contrast(1.04) saturate(1.1);
}
.vsvc__item:hover .vsvc__media img, .alsocard:hover .alsocard__media img {
  filter: brightness(calc(var(--expose, 1) * 1.06)) contrast(1.05) saturate(1.14);
}

/* ---------- who we build for: the logos, nothing else ---------- */
.vwork .vhead { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.vwork__logos { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-block: 1px solid var(--line); }
.tag {
  font-family: var(--display); font-weight: 700; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: .38rem .7rem; border: 1px solid var(--line-2); color: var(--white); background: transparent;
}
.tag--live {
  /* the same glass as the site's flame buttons, so the two sit together */
  display: inline-flex; align-items: center; gap: .5rem;
  color: #FFFFFF;
  background: linear-gradient(100deg,
    rgba(228, 32, 11, .56) 0%, rgba(255, 74, 20, .50) 34%,
    rgba(255, 122, 28, .44) 66%, rgba(255, 176, 32, .38) 100%);
  border-color: rgba(255, 168, 120, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(0, 0, 0, .12),
              0 10px 24px -16px rgba(255, 74, 20, .85);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* a small live light */
.tag--live::before {
  content: ""; flex: none; width: .42rem; height: .42rem; border-radius: 50%;
  background: #FFE2A0; box-shadow: 0 0 0 0 rgba(255, 226, 160, .7), 0 0 8px rgba(255, 196, 110, .9);
  animation: tag-live 2.4s ease-out infinite;
}
@keyframes tag-live {
  0%   { box-shadow: 0 0 0 0 rgba(255, 226, 160, .65), 0 0 8px rgba(255, 196, 110, .9); }
  70%  { box-shadow: 0 0 0 .38rem rgba(255, 226, 160, 0), 0 0 8px rgba(255, 196, 110, .9); }
  100% { box-shadow: 0 0 0 0 rgba(255, 226, 160, 0), 0 0 8px rgba(255, 196, 110, .9); }
}
@media (prefers-reduced-motion: reduce) { .tag--live::before { animation: none; } }
.section--paper .tag--live {
  color: #0D0F13; text-shadow: none;
  background: linear-gradient(100deg,
    rgba(228, 32, 11, .30) 0%, rgba(255, 74, 20, .28) 34%,
    rgba(255, 122, 28, .26) 66%, rgba(255, 176, 32, .24) 100%);
  border-color: rgba(228, 32, 11, .45);
}
.tag--soon { border-color: var(--orange); color: var(--orange); }
.tag--design { border-style: dashed; }

/* ---------- pricing: one ruled row, no boxes ---------- */
.vprice__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.vprice__item {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  padding: clamp(1.4rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.vprice__item:nth-child(odd) { border-right: 1px solid var(--line); }
@media (min-width: 72rem) {
  .vprice__row { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .vprice__item { border-bottom: 0; border-right: 1px solid var(--line); }
  .vprice__item:last-child { border-right: 0; }
  .vprice__item:first-child { padding-left: 0; }
}
.vprice__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--flame); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.vprice__item:hover::after, .vprice__item:focus-visible::after { transform: scaleX(1); }
.vprice__svc {
  font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mid); margin-bottom: auto; padding-bottom: 1.25rem;
}
.vprice__num {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  background: var(--flame-text-dark); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.vprice__num small {
  display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--dim); -webkit-text-fill-color: var(--dim); margin-bottom: .35rem;
}
.vprice__unit { color: var(--dim); font-size: .92rem; }
.vprice__note { color: var(--mid); margin-top: 1.75rem; max-width: 62ch; line-height: 1.6; }
.vprice__note strong { color: var(--white); }

/* ---------- faq ---------- */
.vfaq__grid { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 62rem) {
  .vfaq__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .vfaq__head { position: sticky; top: 7rem; }
}
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -.005em;
  font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--white);
  padding-block: 1.35rem;
}
.faq .faq__a p { color: var(--mid); line-height: 1.65; }

/* ---------- closing band ---------- */
.cta { background: var(--c-ink); }
.cta h2.h-lg { font-size: clamp(2.4rem, 7.4vw, 7.4rem); line-height: .9; }
.cta__scrim::after {
  background:
    radial-gradient(55% 140% at 88% 50%, rgba(255, 74, 20, .26), transparent 62%),
    radial-gradient(40% 90% at 10% 100%, rgba(255, 176, 32, .12), transparent 60%);
}

/* ---------- footer: the name, as big as the page allows ---------- */
.footer { background: var(--c-ink); border-top: 1px solid var(--c-ink-l1); }
/* where the closing video band runs straight into the footer, the rule drew a
   stray grey line along the band's bottom edge: the footage is the divider */
main:has(> .cta:last-child) + .footer { border-top-color: transparent; }
.cta { border-top: 0; }   /* same on its top edge: a grey rule over the footage */
.footer__h { font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.footer__word {
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 9.4vw, 9.8rem); line-height: .85; letter-spacing: -.035em;
  white-space: nowrap;
  background: var(--flame); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  user-select: none;
}

/* ---------- inner pages ---------- */
.page-head, .page-head--ink { background: var(--c-ink); }
.page-head h1 { font-weight: 800; text-transform: uppercase; letter-spacing: -.025em; line-height: .92; font-size: clamp(2.2rem, 6.4vw, 6rem); }
 .tier, .priceblock, .pfitem, .alsocard, .extras, .onep, .kick, .callout {
  border-radius: var(--r-lg);
}
.tier__price, .priceblock__num, .onep__price, .extras__price, .kick__num, .onep__num, .tier__num {
  font-family: var(--display) !important; font-weight: 800; letter-spacing: -.02em;
}
.tier--pick { border-color: var(--f-orange) !important; }
.tier__flag { background: var(--flame) !important; color: #0D0F13 !important; }

/* legacy warm glows and scrims, neutralised */
.boot { background: var(--c-ink); }
.boot__halo { background: radial-gradient(circle, rgba(255, 74, 20, .22), transparent 65%) !important; }
.cursor { border-color: rgba(255, 122, 28, .7); }
::selection { background: var(--f-orange); color: #0D0F13; }
:focus-visible { outline-color: var(--f-tang); }

/* ---------- nav fit ---------- */
.nav .tfmlogo--nav { flex: none; width: clamp(74px, 7vw, 96px); }
.nav__links { flex-wrap: nowrap; }
.nav__links a, .nav .btn--nav { white-space: nowrap; }
.nav__links a {
  font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .09em;
}
@media (max-width: 64rem) { .nav__clock { display: none; } }

/* ---------- footer fit ---------- */
/* measured: the wordmark is 12.94x its font size wide, so size it off the
   content width and it spans the page edge to edge at every width */
.footer__word { font-size: calc((min(100vw, var(--maxw)) - 2 * var(--gut)) / 13.2); }
.footer ul { list-style: none; padding: 0; }
.footer li { list-style: none; }
.footer a:hover { color: var(--f-tang); }

/* ---------- phones: short pages ----------
   The six services sit two to a row as smaller tiles (photo, name, arrow),
   each one tappable, rather than scrolling sideways. */
@media (max-width: 47.99rem) {
  .vsvc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; }
  .vsvc__media { aspect-ratio: 1 / 1; border-radius: 14px; margin-bottom: .4rem; }
  .vsvc__name { font-size: clamp(.82rem, 3.6vw, 1rem); line-height: 1.15; }
  .vsvc__blurb { display: none; }
  .vsvc__go { font-size: .58rem; margin-top: 0; }
  .vprice__num { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .vprice__item { padding: 1.2rem .9rem; }
  .vprice__item:nth-child(even) { padding-right: 0; }
  .vprice__item:nth-child(odd) { padding-left: 0; }
  .btn { font-size: .64rem; letter-spacing: .06em; padding: .9rem 1.05rem; white-space: nowrap; }
}

/* ---------- wide type in narrow columns ----------
   Measured overflows: "The Kickstarter" was 136px wider than its column on
   pricing, "Photography" 18px wider than a phone. Wide faces need smaller
   floors, and a last-resort wrap so no word can ever push past its box. */
.h-lg, .vdisplay, .page-head h1 { overflow-wrap: break-word; }
.kick .h-lg, .kick h2, .onep .h-lg, .callout .h-lg { font-size: clamp(1.8rem, 3.6vw, 3.4rem); }
/* "KICKSTARTER" is one long word in a wide face (9.07x its font size across)
   inside a column capped at 24rem, so a viewport-sized heading split it as
   KICKSTART / ER. Size it to its own column instead: the column is a container
   and the heading never grows past the width that holds the whole word. */
.kick__head { container-type: inline-size; }
.kick__head .h-lg { font-size: min(clamp(1.8rem, 3.6vw, 3.4rem), calc(100cqi / 9.6)); }
@media (max-width: 40rem) {
  .h-lg, .vdisplay { font-size: clamp(1.6rem, 7.6vw, 2.4rem); }
  .page-head h1 { font-size: clamp(1.9rem, 8.4vw, 2.8rem); }
}
@media (max-width: 25rem) {
  .vhero__acts .btn { font-size: .58rem; letter-spacing: .03em; padding-inline: .5rem; gap: .35rem; }
}
.alsocard__name { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--white); }
.alsocard__blurb { color: var(--mid); }

/* ---------- the home page's closing band: the laptop light-swirl clip ----------
   Framed on the top of the shot, where the swirl is, and darkened only behind
   the words so the footage actually shows. */
.cta--home .cta__still, .cta--home .cta__clip { object-position: 50% 0%; filter: brightness(1.3) saturate(1.2); }
.cta--home .cta__scrim {
  background:
    linear-gradient(90deg, rgb(13 15 19 / .88) 0%, rgb(13 15 19 / .6) 34%, rgb(13 15 19 / .12) 68%, transparent 100%),
    linear-gradient(0deg, rgb(13 15 19 / .55) 0%, transparent 45%) !important;
}
.cta--home .cta__scrim::after { display: none; }

/* the logo strip carries its own rules */
.vwork__logos { border: 0; padding-block: 0; }

/* ---------- who we build for: the logos on ink, in their own colours ----------
   On the light ground ProFocus's cream aperture vanished and Zee's neon red
   had been filtered to black. On ink every mark shows as the client uses it. */
.vwork__logos { background: var(--c-ink); margin-top: 0; }
.vwork__logos .partners { border-color: var(--c-ink-l1); }
.vwork__logos .plogo text { fill: #F5F6F8; }
.vwork__logos .plogo__sub, .vwork__logos .plogo__realty { fill: #C2C7CF; }
.vwork__logos .plogo--art { filter: none; }
.vwork__logos .plogo { opacity: 1; }
.plogo__tlcmark { font-family: 'Instrument Serif', 'Times New Roman', serif; font-size: 37px; letter-spacing: 1.2px; fill: #FBF4EF !important; }
.plogo__tlcword { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 5.6px; fill: url(#tlcGold) !important; }

/* ==========================================================================
   GET A QUOTE
   ========================================================================== */
.qhead { position: relative; overflow: clip; }
.qhead::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 74, 20, .26), rgba(255, 176, 32, .08) 55%, transparent 72%);
  pointer-events: none; animation: qglow 10s ease-in-out infinite alternate;
}
@keyframes qglow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, 10%) scale(1.15); } }
.qhead .wrap { position: relative; }
.qstatus {
  display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.6rem;
  padding: .6rem 1.05rem; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--display); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white);
}
.qstatus__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #9AA1AD; flex: none; }
.qstatus.is-open .qstatus__dot { background: #3DDC84; animation: qpulse 2s infinite; }
@keyframes qpulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); }
  70% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.qgrid { display: grid; gap: 2.5rem clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 62rem) { .qgrid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; } }

/* the two ways to reach a person */
.qtile {
  position: relative; display: grid;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.qtile + .qtile { margin-top: 1rem; }
.qtile::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: var(--flame);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
.qtile:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(255, 74, 20, .55); }
.qtile:hover::before, .qtile:focus-within::before { opacity: 1; }
.qtile__main {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 1.15rem; row-gap: .2rem;
  padding: 1.5rem 1.5rem .75rem; text-decoration: none; color: inherit;
}
.qtile__ico { grid-row: 1 / span 3; width: 64px; height: 64px; }
.qtile__ico svg { width: 100%; height: 100%; transition: transform .7s var(--ease); }
.qtile:hover .qtile__ico svg { transform: rotate(-8deg) scale(1.07); }
.qtile__label { font-family: var(--display); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.qtile__value { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: var(--white); letter-spacing: -.01em; line-height: 1.15; }
.qtile__value--sm { font-size: clamp(.95rem, 1.45vw, 1.15rem); overflow-wrap: anywhere; }
.qtile__note { color: var(--mid); font-size: .92rem; line-height: 1.5; margin-top: .3rem; }
.qcopy {
  justify-self: start; margin: 0 1.5rem 1.35rem calc(1.5rem + 64px + 1.15rem);
  font-family: var(--display); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mid); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: .5rem .85rem; cursor: pointer;
  transition: color .3s, background .3s, border-color .3s;
}
.qcopy:hover, .qcopy:focus-visible { color: var(--white); border-color: rgba(255, 255, 255, .4); }
.qcopy.is-done { color: #0D0F13; background: #3DDC84; border-color: #3DDC84; }

/* what happens next: a short timeline */
.qnext { margin-top: 2.5rem; }
.qnext__h { font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.qsteps { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.qsteps li { position: relative; padding: 0 0 1.35rem 2.1rem; color: var(--mid); line-height: 1.55; }
.qsteps li::before {
  content: ""; position: absolute; left: 0; top: .3rem; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--flame); box-shadow: 0 0 0 4px rgba(255, 74, 20, .15);
}
.qsteps li::after {
  content: ""; position: absolute; left: .38rem; top: 1.45rem; bottom: .15rem; width: 2px;
  background: linear-gradient(rgba(255, 106, 26, .7), rgba(255, 106, 26, 0));
}
.qsteps li:last-child::after { display: none; }
.qsteps strong { display: block; color: var(--white); font-family: var(--display); font-size: .95rem; letter-spacing: -.005em; margin-bottom: .15rem; }
.qwhere { color: var(--dim); font-size: .92rem; line-height: 1.55; }

/* the form, on a frosted panel */
.qformwrap {
  position: relative; overflow: hidden;
  border-radius: calc(var(--r-lg) + 6px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.qformwrap::before {
  content: ""; position: absolute; right: -20%; bottom: -35%; width: 65%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 74, 20, .16), transparent); pointer-events: none;
}
.qformwrap > * { position: relative; }
.qform__head p { color: var(--mid); margin-top: .6rem; line-height: 1.55; }
.qprog { display: flex; align-items: center; gap: .9rem; margin: 1.35rem 0 1.85rem; }
.qprog__bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.qprog__bar i { display: block; height: 100%; width: 4%; background: var(--flame); border-radius: inherit; transition: width .6s var(--ease); }
.qprog__txt { font-family: var(--display); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.qrow { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .qrow { grid-template-columns: 1fr 1fr; } }
.qfield { display: grid; gap: .45rem; margin-bottom: 1.15rem; }
.qfield label, .qsvc legend {
  font-family: var(--display); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mid);
}
.qopt { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dim); margin-left: .35rem; }
.qform input[type="text"], .qform input[type="email"], .qform input[type="tel"], .qform textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--white);
  background: rgba(13, 15, 19, .55); border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px;
  padding: .95rem 1.05rem; transition: border-color .3s, box-shadow .3s, background .3s;
}
.qform textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.qform input::placeholder, .qform textarea::placeholder { color: #8A919C; }
.qform input:focus, .qform textarea:focus {
  outline: none; border-color: var(--f-tang); background: rgba(13, 15, 19, .85);
  box-shadow: 0 0 0 4px rgba(255, 122, 28, .2);
}
.qform input[required]:not(:placeholder-shown):valid, .qform textarea[required]:not(:placeholder-shown):valid {
  border-color: rgba(61, 220, 132, .5);
}

/* the service tick-boxes, as icon tiles */
.qsvc { border: 0; padding: 0; margin: .35rem 0 1.25rem; min-width: 0; }
.qsvc legend { margin-bottom: .8rem; padding: 0; }
.qsvc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; }
.qsvc__tile {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .8rem .85rem; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.qsvc__tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qsvc__ico { width: 1.55rem; height: 1.55rem; flex: none; color: var(--mid); transition: color .3s; }
.qsvc__ico svg { width: 100%; height: 100%; }
.qsvc__name { font-size: .88rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.qsvc__tick {
  margin-left: auto; width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(255, 255, 255, .25); display: grid; place-items: center;
  transition: background .3s, border-color .3s;
}
.qsvc__tick svg { width: .72rem; height: .72rem; color: #0D0F13; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease); }
.qsvc__tile:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.qsvc__tile:has(input:checked) { border-color: var(--f-orange); background: linear-gradient(135deg, rgba(255, 74, 20, .2), rgba(255, 176, 32, .08)); }
.qsvc__tile:has(input:checked) .qsvc__ico { color: var(--f-tang); }
.qsvc__tile:has(input:checked) .qsvc__tick { background: var(--flame); border-color: transparent; }
.qsvc__tile:has(input:checked) .qsvc__tick svg { opacity: 1; transform: scale(1); }
.qsvc__tile:has(input:focus-visible) { outline: 2px solid var(--f-tang); outline-offset: 2px; }

/* consent, with a box that matches */
.qconsent {
  position: relative; display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .8rem; align-items: start;
  color: var(--mid); font-size: .9rem; line-height: 1.55; margin: .4rem 0 1.25rem; cursor: pointer;
}
.qconsent input { position: absolute; left: 0; top: .1rem; width: 1.3rem; height: 1.3rem; margin: 0; opacity: 0; cursor: pointer; }
.qconsent__box {
  width: 1.3rem; height: 1.3rem; margin-top: .1rem; border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, .32); display: grid; place-items: center;
  transition: background .3s, border-color .3s;
}
.qconsent:has(input:checked) .qconsent__box { background: var(--flame); border-color: transparent; }
.qconsent:has(input:checked) .qconsent__box::after {
  content: ""; width: .32rem; height: .62rem; border: solid #0D0F13; border-width: 0 2px 2px 0;
  transform: translate(0, -1px) rotate(45deg);
}
.qconsent:has(input:focus-visible) .qconsent__box { outline: 2px solid var(--f-tang); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .qhead::before, .qstatus.is-open .qstatus__dot { animation: none; } }
@media (max-width: 30rem) { .qcopy { margin-left: 1.5rem; } .qtile__main { grid-template-columns: 52px minmax(0, 1fr); } .qtile__ico { width: 52px; height: 52px; } }
@media (min-width: 62rem) { .vabout__media { aspect-ratio: 4 / 5; max-height: 82svh; } }
.qtile__value--sm { font-family: var(--sans); font-weight: 700; letter-spacing: -.005em; font-size: clamp(1rem, 1.35vw, 1.2rem); overflow-wrap: normal; word-break: normal; }
/* the smallest phones (320px): stack the hero buttons and let long labels wrap */
@media (max-width: 21rem) {
  .vhero__acts { grid-template-columns: 1fr !important; }
  .btn { white-space: normal; text-align: center; font-size: .6rem; line-height: 1.3; }
}