@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0a0b0d;
  --bg-raised: #0e1013;
  --bg-deep: #060708;
  --panel: #13151a;
  --field: #0c0e11;
  --line: #1d2126;
  --line-strong: #30363d;
  --text: #f2f4f6;
  --text-2: #b6bdc5;
  --muted: #7d8690;
  --header-h: 72px;
  --accent: #f0262f;
  --wa: #00a884;
  --wa-glyph: #1da851;
  --danger: #ff7a6b;
  --gutter: max(6%, calc((100vw - 1200px) / 2));
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }

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

:focus:not(:focus-visible) { outline: none; }

/* a whisper of film grain over the whole page, so the flat blacks feel like the film's */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--text); color: var(--bg); }

h1, h2, h3 { font-weight: 650; text-wrap: balance; }

h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 58px);
  font-stretch: 116%;
  line-height: 1.02;
  letter-spacing: -.025em;
}

em { font-style: normal; }

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

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}

.skip:focus { top: 12px; }

/* The bar floats over the film. Once the page moves it turns to dark glass and slims down; it
   steps out of the way while reading down and comes back on the first scroll up. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
  padding: 0 var(--gutter);
  transition: height .4s var(--ease), background-color .4s, box-shadow .4s, transform .45s var(--ease);
}

header::before {
  content: '';
  position: absolute;
  inset: 0 0 -48px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 5, 6, .72), rgba(4, 5, 6, 0));
  pointer-events: none;
  transition: opacity .4s;
}

header.is-scrolled {
  height: 64px;
  background: rgba(9, 10, 12, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}

header.is-scrolled::before { opacity: 0; }

header.is-hidden { transform: translateY(-100%); }

header nav { position: relative; display: flex; gap: 6px; font-size: 14px; font-weight: 500; letter-spacing: .01em; color: rgba(242, 244, 246, .62); }

header nav a { position: relative; z-index: 1; padding: 9px 15px; border-radius: 8px; transition: color .25s; }

header nav a:hover, header nav a:focus-visible, header nav a[aria-current=page] { color: var(--text); }

/* A soft glass tile slides behind whichever link the pointer is on and fades once it leaves the
   menu; the current page is simply the one in full white. */
.nav-glide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 8px;
  background: rgba(242, 244, 246, .09);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(242, 244, 246, .06);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s var(--ease), width .4s var(--ease), opacity .25s;
}

header nav.is-gliding .nav-glide { opacity: 1; }

header nav:not(:has(.nav-glide)) a:hover { background: rgba(242, 244, 246, .09); }

header > .button { justify-self: end; }

.brand { display: flex; flex-shrink: 0; align-items: center; }

.brand img { display: block; width: auto; height: 26px; }

/* Buttons take the slanted block of the logo's B mark: the shape is drawn by ::before, skewed, so
   the label stays upright. The inset keeps the slanted corners inside the button's own box. */
.button {
  --btn-bg: var(--text);
  --btn-line: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border: 0;
  background: none;
  color: var(--bg);
  font-size: 14.5px;
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color .25s;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0 7px;
  z-index: -1;
  border-radius: 6px;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-line), inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -14px rgba(0, 0, 0, .9);
  transform: skewX(-14deg);
  transition: background-color .25s, box-shadow .25s, transform .4s var(--ease);
}

.button:hover::before { --btn-bg: #fff; transform: skewX(-14deg) scaleX(1.025); }

.button:focus-visible { outline: none; }

.button:focus-visible::before { box-shadow: inset 0 0 0 1px var(--btn-line), 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

.button.small { min-height: 40px; padding: 0 22px; gap: 8px; font-size: 13.5px; }

.button.ghost { --btn-bg: transparent; --btn-line: rgba(242, 244, 246, .3); color: var(--text); }

.button.ghost::before { box-shadow: inset 0 0 0 1px var(--btn-line); }

.button.ghost:hover::before { --btn-bg: rgba(242, 244, 246, .06); --btn-line: var(--text); }

.button svg { flex-shrink: 0; }

.button.ghost svg { transition: transform .25s var(--ease); }

.button.ghost:hover svg { transform: translateY(2px); }

.wa-glyph { display: block; flex-shrink: 0; width: 18px; height: 18px; }

.button.whatsapp .wa-glyph, .faq-ask .wa-glyph { color: var(--wa-glyph); }

.button.small .wa-glyph { width: 15px; height: 15px; }

.tel-glyph { display: block; flex-shrink: 0; width: 16px; height: 16px; }

/* The film runs edge to edge in its own 16:9 shape, as tall as the window allows. */
.hero {
  position: relative;
  height: min(100svh, 56.25vw);
  min-height: 360px;
  margin-top: calc(-1 * var(--header-h));
  overflow: hidden;
  isolation: isolate;
  background: #050607;
}

.hero-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #050607; }

.hero-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* A small, rounded water bead with a subtle rim and a short wet trail.
   SVG geometry lives in hero-scroll.html; all motion shares one cycle. */
.hero-scroll {
  position: absolute;
  --drop-cycle: 4.6s;
  left: 50%;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 14px 6px;
  border-radius: 14px;
  color: rgba(238, 241, 244, .82);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  transform: translateX(-50%);
  transition: opacity .5s, visibility .5s, color .2s;
}

.hero-scroll:hover { color: #fff; }

.hero-scroll:active { opacity: .75; }

.hero-scroll svg { display: block; width: 24px; height: 80px; overflow: visible; }

.hero-scroll span { margin-top: 2px; }

.hero-scroll.is-gone { opacity: 0; visibility: hidden; }

.hero-drop { transform-box: fill-box; transform-origin: 50% 60%; animation: drop-run var(--drop-cycle) infinite; }

.hero-trail { transform-box: fill-box; transform-origin: 50% 0; animation: drop-trail var(--drop-cycle) infinite; }

.hero-bead { opacity: 0; animation: drop-bead var(--drop-cycle) infinite; }

.hero-bead:nth-child(1) { animation-name: drop-bead-1; }

.hero-bead:nth-child(2) { animation-name: drop-bead-2; }

.hero-bead:nth-child(3) { animation-name: drop-bead-3; }

/* The page title sits under the film like a credit line, so the film itself stays clear of text. */
.hero-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 40px;
  padding: 30px var(--gutter);
}

.hero-title h1 {
  margin: 0;
  font-size: clamp(19px, 1.75vw, 25px);
  font-stretch: 112%;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.hero-title h1 em { font-weight: 300; font-stretch: 125%; }

.hero-place { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); transition: color .2s; }

.hero-place svg { flex-shrink: 0; width: 15px; height: 15px; }

.hero-place:hover { color: var(--text); }

@keyframes drop-run {
  0%, 5% { opacity: 0; transform: translateY(0) scale(.7, .65); }
  16%, 28% { opacity: .9; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.55, .05, .8, .5); }
  52% { transform: translate(.2px, 18px) scale(.96, 1.04); animation-timing-function: ease-out; }
  62% { transform: translate(.2px, 20px) scale(1); animation-timing-function: cubic-bezier(.55, .05, .85, .6); }
  86% { opacity: .9; transform: translate(-.2px, 45px) scale(.94, 1.08); }
  96%, 100% { opacity: 0; transform: translate(-.2px, 51px) scale(.9, 1.1); }
}

@keyframes drop-trail {
  0%, 28% { opacity: 0; transform: scaleY(0); animation-timing-function: cubic-bezier(.55, .05, .8, .5); }
  34% { opacity: .55; }
  52% { transform: scaleY(.38); animation-timing-function: ease-out; }
  62% { transform: scaleY(.43); animation-timing-function: cubic-bezier(.55, .05, .85, .6); }
  86% { opacity: .55; transform: scaleY(.96); }
  100% { opacity: 0; transform: scaleY(1); }
}

/* Tiny residual beads fade with the wet trail. */
@keyframes drop-bead-1 { 0%, 46% { opacity: 0; } 54%, 84% { opacity: .35; } 100% { opacity: 0; } }

@keyframes drop-bead-2 { 0%, 66% { opacity: 0; } 74%, 86% { opacity: .3; } 100% { opacity: 0; } }

@keyframes drop-bead-3 { 0%, 78% { opacity: 0; } 86%, 90% { opacity: .25; } 100% { opacity: 0; } }

/* blends the film's lower edge into the page */
.hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 0, rgba(10, 11, 13, 0) 14%);
}

@keyframes text-gloss { 0% { background-position: 100% 0, 0 0; } 35%, 100% { background-position: 0 0, 0 0; } }

.brands {
  position: relative;
  display: grid;
  padding: 52px 0;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse 34% 70% at 50% 50%, rgba(238, 241, 244, .045), transparent 72%);
}

.brands::before, .brands::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 241, 244, .1) 22%, rgba(238, 241, 244, .6) 50%, rgba(238, 241, 244, .1) 78%, transparent);
}

.brands::before { top: 0; }

.brands::after { bottom: 0; }

.brands + .contact { border-top: 0; }

.brand-row, .brand-lit { padding-block: .24em; }

.brand-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.brand-track { display: flex; width: max-content; will-change: transform; }

.brand-set { display: flex; flex-shrink: 0; align-items: center; height: 1.08em; }

.brand-logo { display: block; flex-shrink: 0; transition: transform .6s var(--ease); }

/* The logo shape is a mask over two layers: a light sheen parked off to the right, and the resting
   fill (--rest) underneath. On hover app.js adds .is-hot and the sheen sweeps across the logo. */
.brand-logo i {
  --rest: linear-gradient(#2d333a, #2d333a);
  display: block;
  background:
    linear-gradient(100deg, var(--text) 0 38%, #fff 44% 47%, rgba(255, 255, 255, .5) 50%, transparent 56%) 100% 0 / 300% 100% no-repeat,
    var(--rest);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-position .85s cubic-bezier(.5, 0, .25, 1);
}

.brand-logo.is-hot { transform: translateY(-.05em) scale(1.06); }

.brand-logo.is-hot i { background-position: 0 0, 0 0; }

/* separators take the slanted block of the logo's B mark */
.brand-sep {
  display: block;
  flex-shrink: 0;
  width: .2em;
  height: .2em;
  margin: 0 .62em;
  border-radius: .035em;
  background: #4a1418;
  transform: skewX(-16deg);
}

.brand-lit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 43%, #000 57%, transparent 78%);
  mask-image: linear-gradient(90deg, transparent 22%, #000 43%, #000 57%, transparent 78%);
}

.brand-lit .brand-sep { background: var(--accent); box-shadow: 0 0 16px rgba(240, 38, 47, .55); }

.brand-row--lead { font-size: clamp(40px, 5vw, 72px); }

.brand-row--lead .brand-lit .brand-logo i { --rest: linear-gradient(180deg, #fff 12%, #d3d8de 44%, #7f8892 62%, #e2e6ea 100%); }

.brand-row--follow { font-size: clamp(30px, 3.6vw, 52px); }

.brand-row--follow .brand-logo i { --rest: linear-gradient(#292e35, #292e35); }

.brand-row--follow .brand-lit .brand-logo { filter: drop-shadow(0 0 14px rgba(238, 241, 244, .3)); }

.brand-row--follow .brand-lit .brand-logo i { --rest: linear-gradient(var(--text), var(--text)); }

.section { padding: 120px var(--gutter); scroll-margin-top: 0; }

/* ---------- Before and after: drag the bar across the car ---------- */
/* one slim line of heading above the picture */
.compare { padding-top: 72px; }

.compare-top { margin-bottom: 22px; }

.compare-top h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  font-stretch: 116%;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.compare-top h2 em {
  /* the one word set in the light, extra-wide cut of the same face, against the bold around it */
  font-weight: 300;
  font-stretch: 125%;
  letter-spacing: -.01em;
}

.compare-frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 22px;
  background: #0b0c0e;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.compare-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

/* light catching the fresh film just behind the bar, the glint of the old hero reveal */
.compare-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 24%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 35%, rgba(255, 255, 255, 0));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.compare-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  pointer-events: none;
}

.compare-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60px;
  margin-left: -30px;
  outline: none;
}

.compare-bar::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 16px rgba(255, 255, 255, .5);
}

.compare-knob {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 11, 13, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .92), 0 10px 28px rgba(0, 0, 0, .45);
  color: #fff;
  transition: transform .25s var(--ease), box-shadow .25s;
}

.compare-knob svg { display: block; }

.compare-frame:hover .compare-knob, .compare-frame.is-dragging .compare-knob { transform: scale(1.08); }

.compare-bar:focus-visible .compare-knob { box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 5px rgba(255, 255, 255, .3); }

/* Captions set straight against the line, the way photo editors label a split view: no boxes,
   just small spaced capitals in the half they describe, riding along with the bar and fading out
   when their half gets too narrow. They sit at the top, over the dark back wall. */
.compare-tag {
  position: absolute;
  top: 15px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .5);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease);
}

.compare-tag--before { right: calc(50% + 18px); color: rgba(255, 255, 255, .72); }

.compare-tag--after { left: calc(50% + 18px); }

.compare-frame.hide-before .compare-tag--before { opacity: 0; transform: translateX(-6px); }

.compare-frame.hide-after .compare-tag--after { opacity: 0; transform: translateX(6px); }

/* ---------- Years later, without film: the heading beside one picture that wears once ----------
   The section is taller than the screen so its inner block stays pinned for a while: long enough
   for the question, the peel and the five years to play out in place. */
.aging { position: relative; height: 210vh; padding: 0 var(--gutter); }

/* Comparison and wear share one background, so a fainter take on the brand strip's rule marks where
   one ends: bright in the middle, gone at the edges. */
.aging::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 241, 244, .05) 22%, rgba(238, 241, 244, .3) 50%, rgba(238, 241, 244, .05) 78%, transparent);
}

.aging-pin {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: center;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--header-h) + 12px) 0 28px;
}

.aging-side { min-width: 0; }

.aging-side h2 { font-size: clamp(30px, 3.4vw, 52px); font-stretch: 116%; line-height: 1.04; letter-spacing: -.025em; }

.aging-side h2 em { font-weight: 300; font-stretch: 125%; letter-spacing: -.01em; }

.aging-side > p { max-width: 380px; margin: 22px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }

.aging-panel { position: relative; aspect-ratio: 5 / 4; max-height: 100%; margin: 0; overflow: hidden; border-radius: 22px; background: #0b0c0e; box-shadow: 0 40px 80px -40px #000; }

.aging-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }

.aging-panel img, .aging-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.aging-canvas { display: none; }

.aging.is-live .aging-canvas { display: block; }

.aging.is-live .aging-panel img { visibility: hidden; }

/* The light drifting across the film before it is peeled; app.js cuts it back along the peel line.
   The film's richer colour itself is drawn into the canvas. */
.aging-film, .aging-peel { position: absolute; inset: 0; display: none; width: 100%; height: 100%; pointer-events: none; }

.aging.is-live .aging-film, .aging.is-live .aging-peel { display: block; }

.aging-film {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .2) 46%, rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, 0) 62%) 0 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(200, 228, 255, .08), rgba(200, 228, 255, .02));
  animation: aging-film-light 3.2s ease-in-out infinite;
}

@keyframes aging-film-light { 0% { background-position: 100% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }

/* the lifted edge of the film catching the light, and the curl just behind it */
.aging-edge { stroke: #fff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); }

.aging-edge-shade { stroke: rgba(0, 0, 0, .35); stroke-width: 6; vector-effect: non-scaling-stroke; filter: blur(3px); }

/* the question, word by word over a soft darkening, while the film comes off */
.aging-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(10, 11, 13, .55), rgba(10, 11, 13, .2) 75%); opacity: 0; transition: opacity .7s; pointer-events: none; }

.aging-ask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0 .26em;
  margin: 0;
  padding: 0 9%;
  color: #fff;
  font-size: clamp(30px, 3.4vw, 54px);
  font-weight: 700;
  font-stretch: 116%;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-align: center;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
  pointer-events: none;
}

.aging-ask em { font-style: normal; font-weight: 300; font-stretch: 125%; letter-spacing: -.01em; }

.aging-ask > * { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.45em); transition: opacity .5s calc(var(--i) * .1s), filter .5s calc(var(--i) * .1s), transform .7s calc(var(--i) * .1s) var(--ease); }

.aging.is-asking .aging-scrim { opacity: 1; }

.aging.is-asking .aging-ask > * { opacity: 1; filter: none; transform: none; }

/* on the way out the words lift away together, faster than they came */
.aging.is-asked .aging-ask > * { transform: translateY(-.35em); transition-duration: .45s; transition-delay: 0s; }


.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 64px;
  align-items: start;
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-form { min-width: 0; }

.contact h2 em { color: var(--wa); }

.h-ticks { display: inline-block; width: .42em; margin-left: .12em; color: #8696a0; vertical-align: baseline; }

.h-ticks svg { display: block; width: 100%; height: auto; }

.typed-title.js-type em span { opacity: 0; }

.typed-title.is-typing em { position: relative; }

.typed-title.is-typing em span { animation: type-in .01s linear calc(var(--i) * 95ms + 250ms) forwards; }

.typed-title.is-typing em::after {
  content: '';
  position: absolute;
  top: .12em;
  bottom: .08em;
  left: calc(var(--done, 0) * 1%);
  width: 3px;
  border-radius: 2px;
  background: var(--wa);
  animation: caret .9s steps(1) infinite;
}

.typed-title.js-type .h-ticks { opacity: 0; transform: scale(.4); }

.typed-title.is-typed .h-ticks { animation: tick-in .35s cubic-bezier(.2, .9, .3, 1.4) forwards, tick-read .1s 1.1s forwards; }

.typed-title.is-typed em::after { display: none; }

@keyframes type-in { to { opacity: 1; } }

@keyframes caret { 50% { opacity: 0; } }

@keyframes tick-in { to { opacity: 1; transform: none; } }

@keyframes tick-read { to { color: #53bdeb; } }

/* ---------- The chat preview: WhatsApp for iOS (dark) on an iPhone 18 Pro Max ----------
   Every size is in iPhone points. --u is one point at the size the phone is drawn: the screen is
   440 x 956 pt inside a 5 pt black border and a 6 pt metal band, 462 x 978 pt in all. */
.wa-preview {
  --phone-w: clamp(340px, calc((100vh - 110px) * 462 / 978), 410px);
  position: sticky;
  /* on short screens the phone is taller than the window; it then sticks by its bottom edge
     so the message being typed stays in view */
  top: min(calc(var(--header-h) + 20px), calc(100vh - var(--phone-w) * 978 / 462 - 16px));
  justify-self: center;
  width: var(--phone-w);
  container-type: inline-size;
}

.iphone {
  --u: calc(100cqw / 462);
  position: relative;
  aspect-ratio: 462 / 978;
  padding: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 71);
  /* the band: antenna breaks on both sides, light catching the rounded edges, dark brushed metal between */
  background:
    linear-gradient(#0c0d0f, #0c0d0f) 0 13% / calc(var(--u) * 6) calc(var(--u) * 1.6) no-repeat,
    linear-gradient(#0c0d0f, #0c0d0f) 100% 13% / calc(var(--u) * 6) calc(var(--u) * 1.6) no-repeat,
    linear-gradient(#0c0d0f, #0c0d0f) 0 87% / calc(var(--u) * 6) calc(var(--u) * 1.6) no-repeat,
    linear-gradient(#0c0d0f, #0c0d0f) 100% 87% / calc(var(--u) * 6) calc(var(--u) * 1.6) no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0) 98.6%, rgba(255, 255, 255, .28)),
    linear-gradient(90deg, #a4a7ad 0%, #575a60 .9%, #303236 2.2%, #26282b 50%, #303236 97.8%, #575a60 99.1%, #a4a7ad 100%);
  box-shadow:
    0 0 0 1px #08090a,
    inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .22),
    inset 0 0 0 calc(var(--u) * 4.6) rgba(0, 0, 0, .18),
    0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, .5),
    0 calc(var(--u) * 50) calc(var(--u) * 80) calc(var(--u) * -24) rgba(0, 0, 0, .85),
    0 calc(var(--u) * 20) calc(var(--u) * 36) calc(var(--u) * -16) rgba(0, 0, 0, .6);
}

/* buttons stand a little proud of the band; Camera Control sits flush, a darker sapphire strip */
.iphone-key {
  position: absolute;
  width: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 2.5);
  background: linear-gradient(90deg, #1d1f22, #74777d 45%, #3a3c40 70%, #1d1f22);
  box-shadow: 0 0 0 .5px #08090a;
}

.iphone-action { left: calc(var(--u) * -3.5); top: calc(var(--u) * 178); height: calc(var(--u) * 34); }

.iphone-vol-up { left: calc(var(--u) * -3.5); top: calc(var(--u) * 248); height: calc(var(--u) * 64); }

.iphone-vol-down { left: calc(var(--u) * -3.5); top: calc(var(--u) * 328); height: calc(var(--u) * 64); }

.iphone-side { right: calc(var(--u) * -3.5); top: calc(var(--u) * 284); height: calc(var(--u) * 102); }

.iphone-control {
  right: calc(var(--u) * 1.5);
  top: calc(var(--u) * 562);
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 58);
  background: linear-gradient(90deg, #08090b, #2c2f35 60%, #4a4e55);
  box-shadow: none;
}

/* WhatsApp's dark theme (WDS tokens from web.whatsapp.com) */
.wa-window {
  --wa-surface: #161717;
  --wa-bar: rgba(22, 23, 23, .9);
  --wa-field: #2a2b2b;
  --wa-system: #1D1F1F;
  --wa-out: #144D37;
  --wa-ink: #FAFAFA;
  --wa-dim: #959393;
  --wa-meta: rgba(255, 255, 255, .6);
  --wa-read: #53BDEB;
  --wa-green: #21C063;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: calc(var(--u) * 5) solid #000;
  border-radius: calc(var(--u) * 65);
  box-shadow: 0 0 0 calc(var(--u) * .6) rgba(255, 255, 255, .07);
  background: var(--wa-surface) url(/assets/wa-wallpaper.webp) 0 0 / calc(var(--u) * 470) auto repeat;
  color: var(--wa-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  font-size: calc(var(--u) * 17);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

/* a faint reflection across the glass */
.wa-window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(118deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}

.wa-window svg { display: block; flex-shrink: 0; }

.wa-top, .wa-bar {
  position: relative;
  z-index: 1;
  background: var(--wa-bar);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
}

.wa-top { box-shadow: 0 calc(var(--u) * .5) 0 rgba(255, 255, 255, .09); }

.ios-status {
  display: grid;
  grid-template-columns: 1fr calc(var(--u) * 126) 1fr;
  align-items: center;
  height: calc(var(--u) * 59);
}

.ios-time { justify-self: center; padding-left: calc(var(--u) * 10); font-size: calc(var(--u) * 17); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.ios-island { position: relative; height: calc(var(--u) * 37); border-radius: calc(var(--u) * 19); background: #000; }

/* the front camera shows faintly through the island */
.ios-island::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(var(--u) * 13);
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4566 0, #161b2b 30%, #05060a 65%);
  box-shadow: 0 0 0 calc(var(--u) * 1.5) #0b0c10;
  transform: translateY(-50%);
}

.ios-icons { display: flex; align-items: center; gap: calc(var(--u) * 6); justify-self: center; padding-right: calc(var(--u) * 8); fill: currentColor; }

.ios-icons svg { width: calc(var(--u) * 18); height: calc(var(--u) * 12); }

.ios-icons svg:nth-child(2) { width: calc(var(--u) * 16); }

.ios-icons .ios-battery { width: calc(var(--u) * 27); height: calc(var(--u) * 13); }

.wa-head { display: flex; align-items: center; height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 20) calc(var(--u) * 4) calc(var(--u) * 16); }

.wa-back { width: calc(var(--u) * 12); height: calc(var(--u) * 21); margin-right: calc(var(--u) * 14); }

.wa-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .1);
}

.wa-avatar img { display: block; width: 66%; height: auto; margin-left: -4%; }

/* width: 0 keeps the nowrap name from setting the row's minimum width; flex: 1 fills the space */
.wa-name { display: flex; flex: 1; flex-direction: column; width: 0; margin-left: calc(var(--u) * 10); }

.wa-name span, .wa-name small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.wa-name span { font-size: calc(var(--u) * 17); font-weight: 600; line-height: 1.25; }

.wa-name small { font-size: calc(var(--u) * 12.5); line-height: 1.3; color: var(--wa-dim); }

.wa-actions { display: flex; align-items: center; gap: calc(var(--u) * 26); margin-left: calc(var(--u) * 12); }

.wa-actions svg { width: calc(var(--u) * 27); height: calc(var(--u) * 20); }

.wa-actions svg + svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }

.wa-thread {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * 10) calc(var(--u) * 16);
}

.wa-day, .wa-e2e {
  align-self: center;
  border-radius: calc(var(--u) * 8);
  background: var(--wa-system);
  box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
  font-size: calc(var(--u) * 12.5);
}

.wa-day { margin-bottom: calc(var(--u) * 8); padding: calc(var(--u) * 5) calc(var(--u) * 12); color: var(--wa-dim); }

.wa-e2e {
  max-width: 94%;
  margin-bottom: calc(var(--u) * 12);
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  color: #FFD279;
  line-height: 1.4;
  text-align: center;
}

.wa-e2e svg { display: inline-block; width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin-right: calc(var(--u) * 4); vertical-align: -.05em; }

.wa-bubble {
  position: relative;
  max-width: 88%;
  padding: calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 8) 0 calc(var(--u) * 8) calc(var(--u) * 8);
  background: var(--wa-out);
  box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
  transform-origin: bottom right;
}

.wa-tail { position: absolute; top: 0; right: calc(var(--u) * -8); width: calc(var(--u) * 8); height: calc(var(--u) * 13); color: var(--wa-out); }

.request-preview { margin: 0; font-size: calc(var(--u) * 18.5); line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }

/* room on the last line for the time, the way WhatsApp tucks it in */
.request-preview::after { content: ''; display: inline-block; width: calc(var(--u) * 70); }

.wa-time {
  position: absolute;
  right: calc(var(--u) * 8);
  bottom: calc(var(--u) * 5);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 11);
  line-height: 1.4;
  color: var(--wa-meta);
}

.wa-ticks { width: calc(var(--u) * 16); height: calc(var(--u) * 11); color: var(--wa-read); }

/* Input bar: the field grows upwards line by line, the icons stay on its last line.
   Message text uses WhatsApp's larger text setting (18.5 pt) so it stays readable at this size,
   and the field may take most of the screen so the whole request stays visible while it is typed. */
.wa-bar {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 42);
  box-shadow: 0 calc(var(--u) * -.5) 0 rgba(255, 255, 255, .09);
}

.wa-plus { width: calc(var(--u) * 28); height: calc(var(--u) * 28); margin-bottom: calc(var(--u) * 4); }

.wa-input {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 6);
  min-width: 0;
  padding: 0 calc(var(--u) * 9) 0 calc(var(--u) * 13);
  border-radius: calc(var(--u) * 18);
  background: var(--wa-field);
}

.wa-compose {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--u) * 36);
  max-height: calc(var(--u) * 540);
  overflow-y: auto;
  scrollbar-width: none;
  padding: calc(var(--u) * 7) 0;
  font-size: calc(var(--u) * 18.5);
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wa-compose::-webkit-scrollbar { display: none; }

/* the caret always follows the last character, drawn as an inline border so it never adds a line break */
.wa-typed::after {
  content: '';
  display: none;
  margin-left: calc(var(--u) * 1);
  border-left: calc(var(--u) * 2) solid var(--wa-green);
  animation: caret 1s steps(1) infinite;
}

.wa-bar.is-active .wa-typed::after { display: inline; }

.wa-bar.is-typing .wa-typed::after { animation: none; }

.wa-sticker { width: calc(var(--u) * 22); height: calc(var(--u) * 22); margin-bottom: calc(var(--u) * 7); }

.wa-cam, .wa-mic { width: calc(var(--u) * 27); height: calc(var(--u) * 27); margin-bottom: calc(var(--u) * 4.5); }

.wa-send {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--wa-green);
  color: #0A0A0A;
}

.wa-send svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); margin-left: calc(var(--u) * 2); }

.wa-bar.has-text .wa-cam, .wa-bar.has-text .wa-mic { display: none; }

.wa-bar.has-text .wa-send { display: grid; animation: wa-swap .25s cubic-bezier(.2, .9, .3, 1.3); }

@keyframes wa-swap { from { opacity: 0; transform: scale(.4) rotate(-30deg); } }

.ios-home {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 8);
  z-index: 2;
  width: calc(var(--u) * 140);
  height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 3);
  background: #fff;
  transform: translateX(-50%);
}

.wa-window.is-in .wa-day, .wa-window.is-in .wa-e2e { animation: wa-fade .4s ease .15s both; }

.wa-bubble.is-sent { animation: wa-pop .45s cubic-bezier(.2, .9, .3, 1.15) both; }

.wa-bubble.is-sent .wa-ticks { animation: wa-read 1s steps(1) .2s both; }

@keyframes wa-pop { from { opacity: 0; transform: translateY(calc(var(--u) * 80)) scale(.92); } to { opacity: 1; transform: none; } }

@keyframes wa-fade { from { opacity: 0; } }

@keyframes wa-read { 0% { color: rgba(255, 255, 255, .6); } 70%, 100% { color: #53BDEB; } }

#quote { max-width: 620px; margin-top: 52px; scroll-margin-top: calc(var(--header-h) + 20px); }

/* Steps read like a store's configurator: later steps stay dimmed and closed until the ones
   above them are answered. */
.q-sec { min-width: 0; margin: 0; padding: 0; border: 0; }

.q-sec + .q-sec { margin-top: 44px; }

.q-h {
  float: left;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--text);
  transition: opacity .45s, margin-bottom .55s var(--ease);
}

.q-h small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.q-body { clear: both; display: grid; grid-template-rows: 1fr; }

#quote.is-stepped .q-body { transition: grid-template-rows .6s var(--ease); }

/* the negative margin gives focus rings room inside the clipped area */
.q-inner { min-height: 0; overflow: hidden; margin: -4px; padding: 4px; }

.q-inner > * { transition: opacity .5s .18s, transform .6s .18s var(--ease); }

#quote.is-stepped .q-sec.is-locked .q-h { margin-bottom: 0; opacity: .32; }

#quote.is-stepped .q-sec.is-locked .q-body { grid-template-rows: 0fr; }

#quote.is-stepped .q-sec.is-locked .q-inner > * { opacity: 0; transform: translateY(14px); transition-delay: 0s; }

.q-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Floating labels: the label fills the empty field and shrinks to its top edge once used. */
.q-field { position: relative; min-width: 0; margin-bottom: 12px; }

.q-field input, .q-field select, .q-field textarea { height: 62px; padding: 26px 16px 8px; border-radius: 12px; font-size: 17px; line-height: 1.3; }

.q-field textarea { height: auto; min-height: 108px; padding-top: 30px; }

.q-field select { padding-right: 40px; }

.q-field label {
  position: absolute;
  top: 20px;
  left: 17px;
  right: 16px;
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .22s var(--ease), color .22s;
}

.q-field label span { font-size: inherit; color: inherit; }

.q-field :focus + label, .q-field :not(:placeholder-shown) + label, .q-field.is-static label { transform: translateY(-11px) scale(.76); }

.q-field :focus + label { color: var(--text-2); }

.q-field ::placeholder { color: transparent; transition: color .2s; }

.q-field :focus::placeholder, .q-field.is-static ::placeholder { color: #6c747e; }

.q-date input:not(.q-date-native) { padding-right: 54px; font-variant-numeric: tabular-nums; }

.q-date-pick {
  position: absolute;
  top: 50%;
  right: 9px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, background-color .2s;
}

.q-date-pick:hover { color: var(--text); background: rgba(238, 241, 244, .06); }

.q-date-pick:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }

/* the browser's own picker stays out of sight under the button; only its pop-up is used */
.q-field .q-date-native {
  position: absolute;
  right: 12px;
  bottom: 6px;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.q-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.q-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }

.q-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.q-tile:hover { border-color: #5d656f; }

.q-tile:has(input:checked) { border-color: var(--text); background: rgba(238, 241, 244, .04); box-shadow: inset 0 0 0 1px var(--text); }

.q-tile:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }

.q-tile input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }

.q-tile b { font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--text); }

.q-tile small { font-size: 13.5px; line-height: 1.35; color: var(--muted); }

.q-send { width: 100%; min-height: 58px; margin-top: 12px; font-size: 16px; }

.q-hint { margin: 14px 0 0; font-size: 13px; text-align: center; color: var(--muted); }

.q-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }

.q-reveal.is-open { grid-template-rows: 1fr; }

.q-reveal-inner { min-height: 0; overflow: hidden; margin: 0 -4px; padding: 0 4px; }

.q-reveal-inner > * { opacity: 0; transition: opacity .2s; }

.q-reveal.is-open .q-reveal-inner > * { opacity: 1; transition: opacity .35s .15s; }

label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--text-2); }

label span { font-size: 12.5px; font-weight: 400; color: var(--muted); }

input, select, textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  font-size: 16px;
  font-stretch: 94%;
  transition: border-color .18s, box-shadow .18s;
}

input:hover, select:hover, textarea:hover { border-color: #4d555e; }

input::placeholder, textarea::placeholder { color: #6c747e; }

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(238, 241, 244, .12); }

input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); }

input:user-invalid:focus, textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgba(255, 122, 107, .2); }

textarea { min-height: 62px; resize: vertical; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23858e98' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px 8px;
}

select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23eef1f4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type=date] { min-width: 0; color-scheme: dark; }


.form-note { margin: 0; font-size: 12.5px; color: var(--muted); }

.q-reveal .form-note { margin: 0 0 6px; }

noscript p { font-size: 14px; color: var(--text-2); }

noscript a { text-decoration: underline; }

#uygulamalar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 772px);
  gap: 0 56px;
  align-items: start;
  padding-bottom: 150px;
}

.section-top { position: sticky; top: calc(var(--header-h) + 32px); }

.section-top > p { max-width: 300px; margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }

.ig-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 12px 20px 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  transition: border-color .2s, background .2s;
}

.ig-more:hover { border-color: var(--text); background: rgba(238, 241, 244, .04); }

.ig-more svg { flex-shrink: 0; width: 22px; height: 22px; color: #e1306c; }

.ig-more span { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; color: var(--muted); }

.ig-more b { font-size: 15px; font-weight: 600; color: var(--text); }

.video-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.video-card:nth-child(2) { margin-top: 90px; }

.video-card video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #000;
  box-shadow: 0 40px 60px -36px #000;
}

.video-caption { padding: 16px 2px 0; }

.video-caption h3 { margin: 0 0 4px; font-size: 19px; font-stretch: 108%; letter-spacing: -.01em; }

.video-caption p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

.cov {
  display: grid;
  grid-template-columns: minmax(0, 410px) minmax(0, 1fr);
  gap: 0 56px;
  align-items: center;
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cov > h2 { grid-column: 1 / -1; margin-bottom: 52px; }

.cov-side { min-width: 0; }

/* while there is no car stage, the side block spans the section: options left, explanation right */
.cov-side:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: center; }

.cov-side:last-child .cov-tabs { grid-row: 1 / span 5; margin: 0; }

.cov-side:last-child > :not(.cov-tabs) { grid-column: 2; justify-self: start; }

@media (max-width: 1000px) {
  .aging-pin { grid-template-columns: 1fr; gap: 28px; align-content: center; }
  .aging-panel { width: min(100%, calc((100svh - var(--header-h) - 330px) * 5 / 4)); justify-self: center; }
  .cov-side:last-child { grid-template-columns: 1fr; }
  .cov-side:last-child .cov-tabs { grid-row: auto; margin-bottom: 28px; }
  .cov-side:last-child > :not(.cov-tabs) { grid-column: 1; }
}

/* The options as a column of large type; the brand's orange slash marks the chosen one. */
.cov-tabs { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 28px; }

.cov-tabs button {
  padding: 9px 0 9px 52px;
  border: 0;
  background: none;
  color: #4a525c;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: left;
  cursor: pointer;
  transition: color .3s;
}

.cov-tabs button:hover { color: #8b939c; }

.cov-tabs button[aria-selected=true] { color: var(--text); }

.cov-name { display: block; }

.cov-tabs small {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
  color: #464d56;
  transition: color .3s;
}

.cov-tabs button:hover small { color: #7d858f; }

.cov-tabs button[aria-selected=true] small { color: var(--text-2); }

/* the logo's B mark slides to the chosen option */
.cov-slash {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.3, .9, .3, 1);
}

.cov-slash img { position: relative; display: block; width: auto; height: clamp(20px, 1.9vw, 27px); }

/* Pinned: the mark presses in like a stamp, a ring bursts out once, a red glow keeps breathing
   behind it and a small lock settles on its corner. */
.cov-slash::before {
  content: '';
  position: absolute;
  inset: -55% -35%;
  background: radial-gradient(closest-side, rgba(240, 38, 47, .55), rgba(240, 38, 47, 0));
  opacity: 0;
  transition: opacity .4s;
}

.cov-slash::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
  pointer-events: none;
}

.cov-lock {
  position: absolute;
  right: -5px;
  bottom: -8px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='7.2' width='8' height='6' rx='1.4' fill='%230a0b0d'/%3E%3Cpath d='M5.8 7.4V5.6a2.2 2.2 0 0 1 4.4 0v1.8' fill='none' stroke='%230a0b0d' stroke-width='1.5'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 0 0 2px var(--bg-raised);
  opacity: 0;
  transform: scale(.3) rotate(-30deg);
  transition: opacity .2s, transform .35s cubic-bezier(.2, .9, .3, 1.5);
}

.cov.is-pinned .cov-slash::before { opacity: 1; animation: cov-breathe 2.6s ease-in-out .5s infinite; }

.cov.is-pinned .cov-lock { opacity: 1; transform: none; transition-delay: .25s; }

.cov-slash.is-pinning img { animation: cov-stamp .5s cubic-bezier(.3, .9, .3, 1.3); }

.cov-slash.is-pinning::after { animation: cov-ring .7s ease-out .1s; }

@keyframes cov-stamp { 30% { transform: scale(.74) translateY(2px); } 65% { transform: scale(1.12); } }

@keyframes cov-ring { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }

@keyframes cov-breathe { 50% { opacity: .45; } }

.cov-text p { max-width: 430px; margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }

.cov-text.is-swap { animation: cov-in .45s var(--ease); }

@keyframes cov-in { from { opacity: 0; transform: translateY(8px); } }

.cov-more { display: block; width: fit-content; margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: underline; text-decoration-color: rgba(242, 244, 246, .3); text-underline-offset: 5px; transition: text-decoration-color .2s; }

.cov-more:hover { text-decoration-color: currentColor; }

.cov-cta { min-height: 52px; margin-top: 28px; padding: 0 32px; }

.cov-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

.cov #recommendation-status { margin: 8px 0 0; font-size: 13px; color: var(--wa); }

.cov #recommendation-status:empty { display: none; }

/* The stage keeps the photo's crop ratio, so the hotspots can be placed in percentages of it. */
.cov-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #0b0c0e;
  box-shadow: 0 40px 80px -40px #000;
}

.cov-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  pointer-events: none;
}

.cov-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s var(--ease);
}

.cov-video.is-active { opacity: 1; }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0 90px; align-items: start; }

.faq-intro, .faq-panel { min-width: 0; }

.faq-intro > p { max-width: 340px; margin: 22px 0 28px; font-size: 17px; line-height: 1.6; color: var(--text-2); }

.faq-ask { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }

.faq-ask span { padding-bottom: 2px; border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }

.faq-ask:hover span { border-color: var(--text); }

.faq-bar { border-bottom: 1px solid var(--line); }

.faq-filters { display: flex; flex-wrap: wrap; gap: 26px; }

.faq-filters button {
  position: relative;
  padding: 0 0 14px;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color .18s;
}

.faq-filters button:hover { color: var(--text); }

.faq-filters button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }

.faq-filters button[aria-pressed=true] { color: var(--text); font-weight: 600; }

.faq-filters button[aria-pressed=true]::after { background: var(--text); }

[data-faq-topic][hidden] { display: none; }

.faq-list { margin-top: 8px; }

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.005em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list details[open] > summary { padding-bottom: 14px; font-weight: 600; }

.faq-icon {
  position: relative;
  flex: 0 0 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background .25s, border-color .25s;
}

.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  border-radius: 1px;
  background: var(--text);
  transition: transform .3s var(--ease), background .25s;
}

.faq-icon::after { transform: rotate(90deg); }

.faq-list summary:hover .faq-icon { border-color: var(--text); }

.faq-list details[open] .faq-icon { background: var(--text); border-color: var(--text); }

.faq-list details[open] .faq-icon::before, .faq-list details[open] .faq-icon::after { background: var(--bg); transform: rotate(180deg); }

.faq-list details > p { max-width: 58ch; margin: 0 54px 26px 0; font-size: 16px; line-height: 1.7; color: var(--text-2); }

@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
}

.site-footer {
  padding: 96px var(--gutter) 32px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
}

.sf-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--line);
}

.sf-lead {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 650;
  font-stretch: 116%;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.sf-cta { display: flex; flex-direction: column; flex-shrink: 0; align-items: flex-end; gap: 16px; }

.sf-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); transition: color .2s; }

.sf-phone:hover { color: var(--text); }

.sf-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 56px 0 72px; }

.sf-h { margin: 0 0 16px; font-size: 14px; font-weight: 600; }

.sf-cols ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.sf-cols a { font-size: 14px; color: var(--muted); transition: color .2s; }

.sf-cols a:hover { color: var(--text); }

.sf-address, .sf-hours { font-size: 14px; font-style: normal; line-height: 1.5; color: var(--text-2); }

.sf-legal {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.sf-legal .brand { margin-right: auto; }

.sf-legal .brand img { height: 20px; }

.sf-legal small, .sf-legal a:not(.brand) { font-size: 13px; color: var(--muted); }

.sf-legal a:not(.brand) { transition: color .2s; }

.sf-legal a:not(.brand):hover { color: var(--text); }

.sticky {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 650;
  user-select: none;
  -webkit-user-select: none;
}

/* the same slanted block as the buttons, drawn behind the label */
.sticky::after {
  content: '';
  position: absolute;
  inset: 0 6px;
  z-index: -1;
  border-radius: 6px;
  background: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 30px -12px #000;
  transform: skewX(-14deg);
  transition: background-color .2s;
}

.sticky:hover::after { background: #fff; }

.sticky .tel-glyph { transform-origin: 50% 50%; animation: ring 3.2s ease-in-out 1.5s infinite; }

.sticky::before {
  content: '';
  position: absolute;
  inset: 0 6px;
  z-index: -1;
  border-radius: 6px;
  box-shadow: 0 0 0 0 rgba(238, 241, 244, .45);
  transform: skewX(-14deg);
  animation: ring-wave 3.2s ease-out 1.5s infinite;
}

@keyframes ring {
  0%, 30%, 100% { transform: rotate(0); }
  3% { transform: rotate(-20deg); }
  6% { transform: rotate(18deg); }
  9% { transform: rotate(-18deg); }
  12% { transform: rotate(16deg); }
  15% { transform: rotate(-14deg); }
  18% { transform: rotate(12deg); }
  21% { transform: rotate(-8deg); }
  24% { transform: rotate(5deg); }
}

@keyframes ring-wave { 0% { box-shadow: 0 0 0 0 rgba(238, 241, 244, .45); } 30%, 100% { box-shadow: 0 0 0 14px rgba(238, 241, 244, 0); } }

@media (max-width: 1000px) {
  header nav { gap: 20px; }
  .section { padding: 90px 6%; }
  .contact { gap: 48px; }
  #uygulamalar { grid-template-columns: 1fr; gap: 32px 0; padding-bottom: 90px; }
  .section-top { position: static; }
  .video-gallery { max-width: 700px; }
  .cov { grid-template-columns: 1fr; gap: 0; }
  .cov > h2 { margin-bottom: 32px; }
  .cov-stage { order: 1; margin-bottom: 32px; }
  .cov-side { order: 2; }
  .faq { gap: 0 50px; }
}

@media (max-width: 850px) {
  :root { --header-h: 64px; }
  header { grid-template-columns: 1fr auto; }
  header.is-scrolled { height: 58px; }
  header nav { display: none; }
  .hero { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 80svh; }
  .compare-frame { aspect-ratio: 1 / 1; border-radius: 18px; }
  .contact { grid-template-columns: 1fr; }
  .wa-preview { position: static; width: min(100%, 340px); margin: 8px auto 0; }
  .faq { grid-template-columns: 1fr; }
  .faq-panel { margin-top: 36px; }
  .faq-bar { flex-wrap: wrap; }
  .site-footer { padding-top: 72px; padding-bottom: 110px; }
  .sf-top { flex-direction: column; align-items: flex-start; padding-bottom: 52px; }
  .sf-cta { align-items: flex-start; }
  .sf-cols { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; padding: 44px 0 52px; }
}

@media (min-width: 851px) {
  .faq-intro { position: sticky; top: calc(var(--header-h) + 32px); }
}

@media (max-width: 700px) {
  .brands { padding: 40px 0; }
  .brand-lit {
    -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 36%, #000 64%, transparent 94%);
    mask-image: linear-gradient(90deg, transparent 6%, #000 36%, #000 64%, transparent 94%);
  }
  .cov-tabs button { padding-left: 44px; }
  .cov-stage { border-radius: 16px; }
}

@media (max-width: 540px) {
  .aging { height: 230vh; padding: 0 6%; }
  .aging-pin { gap: 18px; padding-bottom: 80px; }
  .aging-side h2 { font-size: 26px; }
  .aging-ask { font-size: 26px; }
  .aging-side > p { margin-top: 12px; font-size: 14.5px; }
  .aging-panel { aspect-ratio: 1 / 1; border-radius: 16px; }
  header { gap: 15px; padding: 0 6%; }
  .brand img { height: 17px; }
  .button.small { padding: 0 14px; font-size: 12.5px; }
  .compare-top { margin-bottom: 16px; }
  .compare-knob { width: 46px; height: 46px; }
  .compare-top h2 { font-size: 26px; }
  .compare-tag { top: 10px; font-size: 9.5px; letter-spacing: .14em; }
  .compare-tag--before { right: calc(50% + 10px); }
  .compare-tag--after { left: calc(50% + 10px); }
  .section { padding: 68px 6%; }
  h2 { font-size: 36px; }
  #quote { margin-top: 36px; }
  .q-h { font-size: 22px; }
  .q-sec + .q-sec { margin-top: 36px; }
  .q-tiles { grid-template-columns: 1fr; }
  .q-tile { min-height: 0; }
  .q-pair > :only-child { grid-column: 1 / -1; }
  .ig-more { margin-top: 24px; }
  .video-gallery { gap: 14px; }
  .video-card:nth-child(2) { margin-top: 44px; }
  .video-caption { padding-top: 11px; }
  .video-caption h3 { font-size: 16px; }
  .video-caption p { font-size: 12.5px; }
  .faq-filters { gap: 18px; }
  .faq-filters button { padding-bottom: 12px; font-size: 13px; }
  .faq-list summary { gap: 18px; padding: 20px 0; font-size: 16px; }
  .faq-icon { flex-basis: 28px; height: 28px; }
  .faq-list details > p { margin-right: 0; font-size: 15px; }
  .faq-intro > p { font-size: 16px; }
  .sf-lead { font-size: 32px; }
  .sf-cta { width: 100%; }
  .sf-cta .button { width: 100%; }
  .sf-legal { flex-wrap: wrap; gap: 10px 20px; }
  .sf-legal .brand { width: 100%; margin-bottom: 6px; }
  .sticky { right: 15px; bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .aging { height: auto; padding-top: 40px; padding-bottom: 40px; }
  .aging-pin { position: static; height: auto; padding-top: 0; }
  .aging-film { animation: none; }
  .cov.is-pinned .cov-slash::before, .cov-slash.is-pinning img, .cov-slash.is-pinning::after { animation: none; }
  .hero-drop { animation: none; transform: translateY(20px); }
  .hero-trail { animation: none; opacity: 0; }
  .hero-bead { animation: none; opacity: 0; }
  .sticky .tel-glyph, .sticky::before { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .typed-title .h-ticks { color: #53bdeb; }
  .typed-title.is-typing em span { opacity: 1; animation: none; }
  .typed-title.is-typing em::after { display: none; }
  .wa-window.is-in .wa-day, .wa-window.is-in .wa-e2e, .wa-bubble.is-sent, .wa-bubble.is-sent .wa-ticks, .wa-typed::after, .wa-bar.has-text .wa-send { animation: none; }
  .cov-text.is-swap { animation: none; }
}

/* ---------- Subpages: about, contact and the plain text pages ---------- */

.page { display: block; }

.page-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.subpage { max-width: 860px; min-height: 65vh; margin: 0 auto; padding: 72px 6% 110px; }

.breadcrumb { display: flex; gap: 12px; margin-bottom: 56px; font-size: 13px; color: var(--muted); }

.breadcrumb a { transition: color .2s; }

.breadcrumb a:hover { color: var(--text); }

.subpage h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 6vw, 72px);
  font-stretch: 116%;
  line-height: 1.02;
  letter-spacing: -.03em;
}

.subpage .intro { margin: 0 0 40px; font-size: 21px; line-height: 1.55; color: var(--text-2); }

.subpage h2 { margin: 44px 0 12px; font-size: 24px; font-stretch: 108%; line-height: 1.25; letter-spacing: -.01em; }

.subpage p { color: var(--text-2); }

.subpage .button { margin: 12px 12px 0 0; }

.about-hero { position: relative; height: min(86vh, 820px); min-height: 480px; margin-top: calc(-1 * var(--header-h)); overflow: hidden; background: var(--bg-deep); }

.about-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, 0) 40%, rgba(10, 11, 13, .6) 78%, var(--bg) 100%);
}

.about-hero-inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 var(--gutter) 56px; }

.about-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 6.4vw, 92px);
  font-stretch: 116%;
  line-height: 1;
  letter-spacing: -.035em;
}

.about-lead { padding: 56px var(--gutter) 24px; }

.split { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.5fr); gap: 0 60px; align-items: start; }

.split-text p { max-width: 640px; margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--text-2); }

.split-text p:last-child { margin-bottom: 0; }

.studio-strip { padding-left: 0; padding-right: 0; border-block: 1px solid var(--line); background: var(--bg-raised); }

.studio-strip h2 { margin: 0 0 40px; padding: 0 var(--gutter); }

.marquee { overflow: hidden; width: 100%; }

.marquee-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }

.marquee-set { display: flex; flex-shrink: 0; }

.marquee img { display: block; width: auto; height: 480px; margin-right: 16px; border-radius: 8px; background: var(--panel); }

@keyframes marquee { to { transform: translateX(-50%); } }

.how h2 { margin: 0 0 24px; }

.how p { max-width: 760px; margin: 0; font-size: 20px; line-height: 1.7; color: var(--text-2); }

.cta-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}

.cta-band h2 { margin: 0 0 12px; }

.cta-band p { margin: 0; font-size: 16px; color: var(--muted); }

.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.contact-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 64px;
  align-items: stretch;
  padding: 80px var(--gutter) 100px;
}

.cp-info h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 4.6vw, 64px);
  font-stretch: 116%;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.cp-intro { max-width: 440px; margin: 0 0 36px; font-size: 18px; line-height: 1.6; color: var(--text-2); }

.cp-phone {
  display: inline-block;
  margin-bottom: 24px;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}

.cp-phone:hover { color: var(--accent); }

.cp-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #17191c;
}

/* Google's embed has no dark style; inverting and turning the hue back keeps road and park colours */
.cp-map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(.9) hue-rotate(180deg) saturate(.85) brightness(.95);
}

.cp-links { margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.cp-links li { border-bottom: 1px solid var(--line); }

.cp-links a { display: flex; align-items: center; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; }

.cp-links svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--muted); transition: color .2s; }

.cp-links span { display: flex; flex-direction: column; line-height: 1.3; }

.cp-links small { margin-bottom: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }

.cp-ig svg { color: #e1306c; }

.cp-links a:not(.cp-ig):hover svg { color: var(--text); }

.cp-links address { font-style: normal; }

.cp-hours { display: flex; align-items: center; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; }

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 24px; }
  .cta-band { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 900px) {
  .contact-page { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 72px; }
  .cp-map { min-height: 380px; }
}

@media (max-width: 850px) {
  .marquee img { height: 380px; }
}

@media (max-width: 540px) {
  .subpage { padding: 48px 6% 80px; }
  .breadcrumb { margin-bottom: 40px; }
  .subpage .intro { font-size: 18px; }
  .about-hero { height: 68vh; min-height: 400px; }
  .about-hero-inner { padding-bottom: 36px; }
  .about-lead { padding: 36px 6% 12px; }
  .studio-strip h2 { margin-bottom: 28px; }
  .marquee img { height: 280px; margin-right: 10px; }
  .marquee-track { animation-duration: 50s; }
  .how p { font-size: 17px; }
  .contact-page { padding: 44px 6% 56px; }
  .cp-intro { font-size: 16px; }
  .cp-map { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
  .marquee-set[aria-hidden] { display: none; }
}

/* Service pages: the about page's hero and split sections, with a short clip in place of the photo.
   Sections, steps and lists are set apart by space and type alone, without rules or boxes. */
.svc-hero { height: min(74vh, 700px); }

/* the clips are brighter than the about photo; a shade along the top keeps the menu readable */
.svc-hero::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 1; height: 220px; background: linear-gradient(180deg, rgba(10, 11, 13, .6), rgba(10, 11, 13, 0)); pointer-events: none; }

.svc-hero-sub { max-width: 520px; margin: 18px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .8); }

.svc-lead { padding-bottom: 40px; }

.svc-lead > p { max-width: 900px; margin: 0 0 32px; font-size: clamp(19px, 1.75vw, 25px); line-height: 1.5; letter-spacing: -.005em; color: var(--text); }

.svc-page .section { padding-top: 88px; padding-bottom: 88px; }

.split-text a, .svc-page .cta-band p a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(242, 244, 246, .35); text-underline-offset: 4px; transition: text-decoration-color .2s; }

.split-text a:hover, .svc-page .cta-band p a:hover { text-decoration-color: currentColor; }

.svc-cover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }

.svc-cover h3 { margin: 0 0 10px; font-size: clamp(21px, 1.9vw, 26px); font-stretch: 112%; line-height: 1.2; letter-spacing: -.015em; }

.split-text .svc-cover p { margin: 0; }

.split-text .svc-note { margin-top: 28px; font-size: 14px; color: var(--muted); }

.svc-flow-list { margin: 0; padding: 0; list-style: none; }

.svc-flow-list li { max-width: 680px; margin: 0 0 26px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; letter-spacing: -.005em; color: var(--text-2); }

.svc-flow-list li:first-child { margin-top: 6px; }

.svc-flow-list li:last-child { margin-bottom: 0; }

.svc-flow-list em { font-weight: 600; font-stretch: 112%; color: var(--text); }

/* two frames from the studio's own videos, the second set a little lower like the video gallery */
.svc-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 400px; margin-top: 44px; }

.svc-shots figure { margin: 0; }

.svc-shots figure:nth-child(2) { margin-top: 48px; }

.svc-shots img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--panel); }

.svc-shots figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }

.svc-aside { max-width: 340px; margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }

.svc-videos .video-gallery { max-width: 640px; }

.svc-table-wrap { margin-top: 36px; }

.svc-table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }

.svc-table th, .svc-table td { padding: 0 20px 18px 0; text-align: left; vertical-align: top; }

.svc-table thead th { padding-bottom: 20px; font-size: 17px; font-weight: 600; font-stretch: 112%; color: var(--text); }

.svc-table tbody th { width: 30%; font-weight: 500; color: var(--muted); }

.svc-table td { color: var(--text-2); }

.svc-related h2 { margin: 0 0 40px; }

.svc-related ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; margin: 0; padding: 0; list-style: none; }

.svc-related a { display: flex; flex-direction: column; gap: 8px; }

.svc-related b { font-size: clamp(24px, 2.3vw, 32px); font-weight: 650; font-stretch: 114%; line-height: 1.1; letter-spacing: -.02em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .2s; }

.svc-related a:hover b { text-decoration-color: currentColor; }

.svc-related span { font-size: 15px; line-height: 1.5; color: var(--muted); }

.svc-faq .faq-list { margin-top: -24px; }

@media (max-width: 1000px) {
  .svc-page .section { padding-top: 72px; padding-bottom: 72px; }
  .svc-related ul { grid-template-columns: 1fr; }
  .svc-faq .faq-list { margin-top: 0; }
}

@media (max-width: 540px) {
  .svc-hero { height: 62vh; }
  .svc-lead { padding-bottom: 24px; }
  .svc-page .section { padding-top: 56px; padding-bottom: 56px; }
  .svc-cover { grid-template-columns: 1fr; gap: 28px; }
  .svc-shots { margin-top: 32px; }
  .svc-shots figure:nth-child(2) { margin-top: 32px; }
  .svc-flow-list li { margin-bottom: 22px; }
  .svc-table { font-size: 14px; }
  .svc-table th, .svc-table td { padding-right: 12px; }
}