/* MTMedias site v2
   Ink and paper. The purple is a liquid the site is made of: it fills the
   opening, sits behind the offer, and stays out of everything else. Three
   tonal blocks per page: charcoal, paper, ink, then charcoal again. */

:root {
  --ink: #A365F2;
  --ink-deep: #3C1A5B;
  --ink-light: #C9A9F7;
  --charcoal: #1C1C1C;
  --paper: #F8F8FE;
  --white: #FFFFFF;

  --text: var(--paper);
  --muted: rgba(248, 248, 254, 0.62);
  --rule: rgba(248, 248, 254, 0.14);
  --bg: var(--charcoal);

  --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 64px);
  --measure: 34em;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-glide: cubic-bezier(0.3, 0, 0.2, 0.85);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--charcoal); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.on-paper :focus-visible, .on-ink :focus-visible { outline-color: var(--charcoal); }

/* Tonal blocks. Everything inside inherits the right text and rule colours. */
.on-paper {
  --text: var(--charcoal);
  --muted: rgba(28, 28, 28, 0.62);
  --rule: rgba(28, 28, 28, 0.14);
  --bg: var(--paper);
  background: var(--bg);
  color: var(--text);
}
.on-ink {
  --text: var(--charcoal);
  /* #A365F2 is a mid tone: charcoal is the only small-text colour that
     clears 4.5:1 on it, so muted and body are the same here and hierarchy
     comes from size and weight instead. */
  --muted: var(--charcoal);
  --rule: rgba(28, 28, 28, 0.2);
  --bg: var(--ink);
  background: var(--bg);
  color: var(--text);
}

/* Type scale. 17 base, ratio ~1.25 with a jump at display sizes. */
.h-display {
  font-weight: 700;
  font-size: clamp(42px, 6.2vw, 92px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-1 {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-2 {
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h-3 {
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; max-width: var(--measure); }
.body { max-width: var(--measure); color: var(--muted); }
.small { font-size: 14px; }
.muted { color: var(--muted); }

.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
.section { padding-block: clamp(80px, 11vw, 160px); }
.on-paper.section + .on-paper.section { padding-top: 0; }

/* Buttons. A pill of ink, or an outline that fills with ink from the bottom
   when you reach for it. The fill is the only thing that moves. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn-ink { background: var(--ink); color: var(--charcoal); }
.btn-ink::before { background: var(--paper); }
.btn-ink:hover { color: var(--charcoal); }
.btn-line { border: 1.5px solid currentColor; }
.btn-line:hover, .btn-line:focus-visible { color: var(--charcoal); border-color: var(--ink); }
.on-ink .btn-ink { background: var(--charcoal); color: var(--paper); }
.on-ink .btn-ink::before { background: var(--paper); }
.on-ink .btn-ink:hover { color: var(--charcoal); }
.on-ink .btn-line:hover { border-color: var(--charcoal); }
.on-ink .btn-line::before { background: var(--charcoal); }
.on-ink .btn-line:hover { color: var(--paper); }
.on-paper .btn-line:hover { color: var(--charcoal); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { justify-self: start; align-self: start; }

/* Text links underline with ink and thicken on hover. */
.link {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 0.2s, text-underline-offset 0.2s;
}
.link:hover { text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  color: var(--paper);
  transition: transform 0.5s var(--ease-out), background-color 0.35s, backdrop-filter 0.35s;
}
.nav.is-scrolled { background: rgba(28, 28, 28, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-open { transform: none; background: transparent; backdrop-filter: none; z-index: 60; }
.nav-logo img { height: clamp(34px, 2.3vw, 44px); width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(32px, 2.6vw, 48px); list-style: none; }
.nav-links a {
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 600;
  text-decoration: none;
  color: var(--paper);
  /* the bar sits over the liquid, so give the letters an edge */
  text-shadow: 0 1px 14px rgba(28, 28, 28, 0.55);
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.75; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav .btn { padding: 12px 22px; font-size: clamp(15px, 1.05vw, 17px); box-shadow: 0 6px 24px -8px rgba(28, 28, 28, 0.6); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  position: relative;
  z-index: 60;
}
.nav-toggle span {
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.4s var(--ease-out), opacity 0.2s;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 26px; }
.is-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.is-open .nav-toggle span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--charcoal);
  color: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 100px var(--gutter) 48px;
  clip-path: circle(0% at calc(100% - 44px) 40px);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out), visibility 0s 0.7s;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); visibility: visible; transition: clip-path 0.7s var(--ease-out); }
.menu ul { list-style: none; display: grid; gap: 6px; }
.menu ul a { text-decoration: none; font-weight: 700; font-size: clamp(40px, 11vw, 64px); letter-spacing: -0.03em; line-height: 1.05; }
.menu ul a[aria-current="page"] { color: var(--ink); }
.menu .btn { margin-top: 36px; align-self: flex-start; }
.menu-foot { margin-top: 40px; color: var(--muted); font-size: 14px; }

/* ---------- Hero with ink ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 110px var(--gutter) clamp(28px, 4vh, 48px);
  overflow: hidden;
  background: var(--charcoal);
}
.ink {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero-centre {
  margin: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 24px;
  max-width: 58em;
  padding: 24px 0;
}
.hero-centre h1 { text-shadow: 0 2px 24px rgba(28, 28, 28, 0.25); }
.hero-centre p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--charcoal); font-weight: 500; max-width: 32em; }
.hero-centre .btn-row { justify-content: center; }
.hero-centre .btn-ink { background: var(--charcoal); color: var(--paper); }
.hero-centre .btn-ink::before { background: var(--paper); }
.hero-centre .btn-ink:hover { color: var(--charcoal); }
.hero-centre .btn-line { color: var(--charcoal); border-color: var(--charcoal); }
.hero-centre .btn-line::before { background: var(--charcoal); }
.hero-centre .btn-line:hover { color: var(--paper); border-color: var(--charcoal); }
.hero-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}
.hero-foot .scroll-cue { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: inherit; }
.hero-foot .scroll-cue i {
  width: 1px; height: 28px; background: currentColor; display: block;
  transform-origin: top;
  animation: cue 1.8s var(--ease-glide) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Variant for the sub-pages: copy centred on charcoal, small drops
   drifting either side. Dark-ground button colours, not the on-purple ones. */
.hero-drops .hero-centre { margin: auto; }
.hero-drops .hero-centre h1 { text-shadow: none; }
.hero-drops .hero-centre p { color: rgba(248, 248, 254, 0.8); font-weight: 400; }
.hero-drops .hero-centre .btn-ink { background: var(--ink); color: var(--charcoal); }
.hero-drops .hero-centre .btn-ink::before { background: var(--paper); }
.hero-drops .hero-centre .btn-line { color: var(--paper); border-color: rgba(248, 248, 254, 0.5); }
.hero-drops .hero-centre .btn-line::before { background: var(--ink); }
.hero-drops .hero-centre .btn-line:hover { color: var(--charcoal); border-color: var(--ink); }

/* Splash reveal. Lines are masked and slide up out of the mask once the ink
   has landed. Done by class so the JS decides when. */
/* The mask box extends 0.16em below the line so descenders are not
   clipped; the negative margin gives the space back. */
.rl { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.rl > span { display: block; transform: translateY(135%); }
.reveal-ready .rl > span { transition: transform 1s var(--ease-out); }
.reveal-in .rl > span { transform: none; }
.rl:nth-child(2) > span { transition-delay: 0.08s; }
.rl:nth-child(3) > span { transition-delay: 0.16s; }
.fade { opacity: 0; transform: translateY(10px); }
.reveal-ready .fade { transition: opacity 0.8s var(--ease-out) 0.3s, transform 0.8s var(--ease-out) 0.3s; }
.reveal-in .fade { opacity: 1; transform: none; }
.reveal-ready .nav { opacity: 0; transition: opacity 0.6s 0.15s, transform 0.5s var(--ease-out), background-color 0.35s; }
.reveal-in .nav { opacity: 1; }

/* ---------- Results ledger ---------- */
.results-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 80px); }
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.entry { display: grid; gap: 6px; padding-top: 20px; border-top: 2px solid var(--charcoal); }
.entry .num {
  font-weight: 700;
  font-size: clamp(64px, 7.5vw, 120px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.entry .num.hold { min-height: 0.9em; }
.entry .what { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; margin-top: 8px; }
.entry .detail { color: var(--muted); }
.shot {
  margin-top: 24px;
  background: var(--white);
  border: 1px solid rgba(28, 28, 28, 0.12);
  padding: clamp(12px, 1.6vw, 24px);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10;
  width: 100%;
  text-align: left;
  overflow: hidden;
}

/* Ads Manager table, redrawn. Product UI font stack on purpose so it reads
   as the tool, not as the site. Values, columns, footnote markers and the
   dotted estimate underlines match the account screenshots line for line. */
.am {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
  font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: clamp(12px, 1.12vw, 16px);
  line-height: 1.3;
  color: #1c2b33;
  font-variant-numeric: tabular-nums;
}
.am th, .am td { padding: 0.7em 0.85em; border-left: 1px solid #dadde1; vertical-align: top; }
.am th:first-child, .am td:first-child { border-left: 0; }
.am th { text-align: left; font-weight: 600; border-bottom: 1px solid #dadde1; padding-right: 1.9em; position: relative; }
.am th .sort { font-weight: 400; color: #606770; margin-left: 0.15em; }
.am th .caret { position: absolute; right: 0.6em; top: 0.75em; font-size: 0.75em; color: #606770; }
.am th.on { color: #4a5df9; }
.am th.on .sort { color: #4a5df9; }
.am td { text-align: right; border-bottom: 1px solid #eceff1; }
.am td.l { text-align: left; }
.am tr.alt td { background: #f5f6f7; }
.am td .sub { display: block; font-size: 0.82em; color: #606770; margin-top: 0.15em; }
.am td .est { border-bottom: 1px dotted #1c2b33; }
.am td .n { font-size: 0.72em; color: #606770; margin-left: 0.35em; vertical-align: 0.35em; }
.am tfoot td { border-top: 2px solid #dadde1; border-bottom: 0; background: none; }
.am-bold-total tfoot td { font-weight: 600; }
.am-bold-total tfoot td .sub { font-weight: 400; }
.shot-cap { display: block; padding: 8px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Services: two offers, then what comes with them ---------- */
.services-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.offer-panel {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 3.4vw, 52px);
  min-height: clamp(320px, 30vw, 440px);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.offer-panel:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(28, 28, 28, 0.5); }
.offer-panel h3 { font-weight: 600; font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.025em; line-height: 1.08; max-width: 9em; }
.offer-panel p { max-width: 26em; color: var(--muted); }
.offer-panel .btn { margin-top: auto; align-self: flex-start; }
.offer-panel-ink { --text: var(--charcoal); --muted: rgba(28, 28, 28, 0.68); background: rgba(163, 101, 242, 0.16); color: var(--text); }
.offer-panel-dark { --text: var(--paper); --muted: rgba(248, 248, 254, 0.68); background: var(--charcoal); color: var(--text); }
.offer-panel-dark .btn-ink { background: var(--ink); color: var(--charcoal); }
.offer-panel-dark .btn-ink::before { background: var(--paper); }
/* a drop of the same liquid as the hero, sitting in the corner */
.offer-panel .drop {
  position: absolute; z-index: -1;
  width: clamp(140px, 16vw, 240px); aspect-ratio: 1; border-radius: 50%;
  right: -6%; top: -14%;
  background:
    radial-gradient(circle at 34% 30%, rgba(248, 248, 254, 0.55) 0, rgba(248, 248, 254, 0) 26%),
    radial-gradient(circle at 50% 50%, #B27EF5 0, #A365F2 45%, #5E2E9C 100%);
  box-shadow: 0 30px 50px -20px rgba(60, 26, 91, 0.45);
  transition: transform 0.7s var(--ease-out);
}
.offer-panel:hover .drop { transform: translate(-6px, 8px) scale(1.06); }
.offer-panel-dark .drop { background:
    radial-gradient(circle at 34% 30%, rgba(248, 248, 254, 0.5) 0, rgba(248, 248, 254, 0) 26%),
    radial-gradient(circle at 50% 50%, #B27EF5 0, #A365F2 45%, #4A2380 100%); }

.included-strip { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--rule); padding-top: 24px; }
.included-label { font-size: 15px; font-weight: 600; margin-bottom: 20px; }
.included-strip ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px clamp(24px, 4vw, 64px); }
.included-strip h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.included-strip p { color: var(--muted); font-size: 15px; max-width: 28em; }

/* ---------- Offer band (ink) ---------- */
.offer { position: relative; overflow: hidden; }
/* The ink band is a body of liquid, so its edges are a surface rather than
   a ruled line. The top wave is painted in the paper colour and the bottom
   one in charcoal, matching the sections either side, so each seam reads as
   the liquid meeting them. Both stretch to any width. */
.offer::before, .offer::after {
  content: "";
  position: absolute; left: -1px; right: -1px;
  height: clamp(44px, 5.5vw, 88px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
.offer::before {
  top: -1px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 90" preserveAspectRatio="none"><path d="M0 0H1440V36C1200 76 960 16 720 42 480 68 240 12 0 42Z" fill="%23F8F8FE"/></svg>');
}
.offer::after {
  bottom: -1px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 90" preserveAspectRatio="none"><path d="M0 90H1440V54C1200 14 960 74 720 48 480 22 240 78 0 48Z" fill="%231C1C1C"/></svg>');
}
.offer > .wrap { position: relative; z-index: 2; }
/* room for the waves so copy never sits under one */
.offer.section { padding-block: clamp(120px, 14vw, 210px); }
.offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px clamp(40px, 6vw, 120px);
  align-items: start;
}
.offer-copy { display: grid; gap: 28px; justify-items: start; }
.offer-copy p { max-width: 28em; font-size: clamp(17px, 1.35vw, 20px); }
.includes { list-style: none; display: grid; }
.includes li {
  display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
}
.includes li:last-child { border-bottom: 1px solid var(--rule); }
.includes li::before {
  content: "";
  width: 12px; height: 12px; margin-top: 0.45em;
  border-radius: 50%;
  background: var(--charcoal);
}
.includes-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }

/* Steps: this is a real sequence, so the numbers earn their place. */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps li { counter-increment: step; display: grid; gap: 12px; padding-top: 20px; border-top: 2px solid var(--charcoal); }
.steps li::before {
  content: counter(step);
  font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.04em;
  color: var(--ink);
}
.steps h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.steps p { color: var(--muted); font-size: 16px; }

/* ---------- Closing CTA ---------- */
.close-cta { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; gap: 32px 64px; }
.close-cta p { color: var(--muted); margin-top: 16px; max-width: 28em; font-size: 18px; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--rule);
  padding: 36px var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px;
  font-size: 14px; color: var(--muted);
}
.footer img { height: 26px; width: auto; }
.footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer a { display: inline-block; padding: 6px 0; text-decoration: none; color: var(--muted); transition: color 0.2s; }
.footer a:hover { color: var(--paper); }

/* ---------- Case study (websites) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.compare figure { display: grid; gap: 16px; }
.compare .frame { border: 1px solid rgba(28, 28, 28, 0.14); background: #fff; overflow: hidden; }
.compare .frame img { width: 100%; height: auto; }
.compare figcaption { display: grid; gap: 10px; }
.compare .tag { font-weight: 700; font-size: 15px; }
.compare .tag.before { color: var(--muted); }
.compare .tag.after { color: var(--ink-deep); }
.compare ul { list-style: none; display: grid; gap: 6px; color: var(--muted); font-size: 16px; }
.compare ul li { padding-left: 18px; position: relative; }
.compare ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.compare .after ~ ul li::before, .compare figure.is-after ul li::before { background: var(--ink); opacity: 1; }

.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 64px; align-items: start; }
.quote blockquote { font-size: clamp(22px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.quote blockquote::before { content: "\201C"; color: var(--ink); }
.quote blockquote::after { content: "\201D"; color: var(--ink); }
.quote cite { display: block; font-style: normal; margin-top: 20px; font-size: 16px; color: var(--muted); }
.quote cite strong { color: var(--text); font-weight: 600; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px clamp(40px, 6vw, 120px); align-items: start; }
.form-intro { display: grid; gap: 24px; position: sticky; top: 120px; }
.form-intro ul { list-style: none; display: grid; }
.form-intro li { padding: 14px 0; border-top: 1px solid var(--rule); color: var(--muted); }
.form-intro li:last-child { border-bottom: 1px solid var(--rule); }
form { display: grid; gap: 22px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--text);
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--rule);
  border-radius: 0;
  padding: 12px 0;
  transition: border-color 0.25s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 30px; }
.field select option { color: #1C1C1C; }
.field ::placeholder { color: var(--muted); opacity: 1; }
form .btn { justify-self: start; margin-top: 8px; }

/* ---------- Scroll-in ---------- */
.in-view { opacity: 0; transform: translateY(22px); }
.in-view.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.in-view.d1.is-in { transition-delay: 0.1s; }
.in-view.d2.is-in { transition-delay: 0.2s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ledger { grid-template-columns: 1fr 1fr; }
  .ledger .entry:first-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav-links, .nav > .btn { display: none; }
  .ledger-2 { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .hero { padding-top: 96px; }
  .hero-centre { gap: 20px; }
  .hero-foot > :last-child { display: none; }
  .services-head, .offer-grid, .compare, .quote, .form-grid, .close-cta, .offers, .included-strip ul { grid-template-columns: 1fr; }
  .offer-panel { min-height: 0; }
  .form-intro { position: static; }
  .row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ledger { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .btn { padding: 15px 24px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:not(.force-motion) .rl > span, html:not(.force-motion) .fade, html:not(.force-motion) .in-view { transform: none; opacity: 1; transition: none; }
  html:not(.force-motion) .reveal-ready .nav { opacity: 1; transition: none; }
  html:not(.force-motion) .hero-foot .scroll-cue i { animation: none; transform: none; }
  html:not(.force-motion) .btn::before { transition: none; }
  html:not(.force-motion) .menu { transition: none; }
}