/* ==========================================================================
   imagi-tech — Brand Guidelines v1.0 (Aug 2026)

   Imagi Gold #D9AA28 · Pie-Crust Cream #F8EFD9 · Charcoal #3A3A3A
   Nunito Sans (headlines, 900 italic) · Fraunces (accents, italic)
   Inter (body) · IBM Plex Mono (meta)

   The commissioned illustrations are loose mid-century ink — wobbly strokes,
   round caps, gold blobs. The UI follows: soft paper surfaces, ink-weight
   borders, generous white space, and gold as the one loud voice in the room.

   Motion follows the same brief. Cartoon animation has a small, specific
   vocabulary — anticipation, squash and stretch, overshoot, and the line
   "boil" you get from hand-inking the same shape three times — and this
   sheet uses those rather than generic fades. See §14.

   CONTENTS
     1  tokens              9  photographs
     2  base + reset       10  process, diagrams
     3  typography         11  FAQ
     4  layout utilities   12  forms
     5  header, mega menu  13  the scoping quiz
     6  buttons            14  motion
     7  sections, bands    15  footer, chrome
     8  cards, lists       16  reduced motion + no-JS
     8b pricing
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* brand */
  --gold: #D9AA28;
  --gold-deep: #A87A05;      /* AA against cream for body-size text */
  --gold-soft: #F1DCAE;
  --cream: #F8EFD9;
  --cream-deep: #F2E4C6;
  --charcoal: #3A3A3A;
  --ink: #1A1A1A;
  --gray: #5C5F66;
  --paper: #FFFFFF;
  --green: #3F6B3B;
  --red: #9E3D26;
  --line: #E8DCBE;
  --line-ink: #D2C29A;

  /* type */
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Nunito Sans', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* spacing — one scale, used everywhere */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 72px;
  --section-y: clamp(44px, 6vw, 76px);

  /* shape */
  --wrap: 1120px;
  --measure: 66ch;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-card: 0 1px 0 var(--line), 0 10px 26px -18px rgba(58, 45, 10, .5);
  --shadow-pop: 0 18px 44px -20px rgba(58, 45, 10, .55);
  --shadow-lift: 0 26px 60px -28px rgba(58, 45, 10, .6);

  /* motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);   /* overshoot, for pops */
  --fast: .16s;
  --med: .28s;
}

/* ==========================================================================
   2. Base + reset
   ========================================================================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }

/* The UA rule for [hidden] is display:none, which any explicit display wins
   against — .btn is inline-block, so a hidden button stayed visible. */
[hidden] { display: none !important; }

/* One focus treatment for the whole site, and it is never removed. */
:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gold-soft); color: var(--ink); }

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display); color: var(--ink);
  font-weight: 900; font-style: italic;
  letter-spacing: -.6px; line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: clamp(33px, 4.6vw, 52px); }
h2 { font-size: clamp(26px, 3vw, 35px); }
h3 { font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.2px; line-height: 1.3; }
h4 { font-size: 17px; font-style: normal; font-weight: 800; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s3); }

a { color: var(--gold-deep); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

strong { font-weight: 700; color: var(--ink); }

.serif { font-family: var(--serif); font-style: italic; }
.mono, .meta { font-family: var(--mono); font-size: 12.5px; color: var(--gray); line-height: 1.6; }

.lead { font-size: clamp(17px, 1.7vw, 19.5px); max-width: 60ch; margin-top: var(--s4); }
.lede { font-size: clamp(16.5px, 1.5vw, 18px); max-width: var(--measure); }
.lede + .lede { margin-top: var(--s3); }
.lede-lg { font-size: clamp(17px, 1.7vw, 19.5px); }
.narrow { max-width: var(--measure); }

/* Eyebrow / kicker */
.kicker {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--gold-deep); margin-bottom: var(--s2);
  display: flex; align-items: center; gap: var(--s2);
}
.kicker .pie-mark { width: 17px; height: 17px; flex: none; }

/* Hand-drawn marker underline under a heading */
.h-draw { position: relative; display: inline-block; }
.h-draw .sq-underline {
  position: absolute; left: 0; right: 0; bottom: -12px;
  width: 100%; height: 11px; color: var(--gold); overflow: visible;
}
.h-draw + * { margin-top: var(--s5); }

/* Pull quote / brand voice callout */
.pull {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px); color: var(--ink); line-height: 1.3;
  max-width: 24ch; border-left: 4px solid var(--gold);
  padding-left: var(--s5); margin-top: var(--s5);
}

/* ==========================================================================
   4. Layout utilities
   ========================================================================== */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
.narrow-wrap { max-width: 820px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s5); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s5); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s5); }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); margin-top: var(--s5); }
.gap-lg { gap: var(--s7); align-items: start; }
.split-lists { gap: var(--s7); align-items: start; margin-top: var(--s6); }

.mt-sm { margin-top: var(--s3); }
.mt-lg { margin-top: var(--s6); }

@media (max-width: 1000px) { .grid5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .gap-lg, .split-lists { gap: var(--s6); }
}
@media (max-width: 640px) { .grid5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grid4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   5. Header + mega menu
   ========================================================================== */

header.site {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
header.site > .wrap {
  display: flex; align-items: center; gap: var(--s4);
  padding-block: var(--s3);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link, .mm-trigger {
  font-family: var(--display); font-weight: 800; font-size: 14.5px;
  color: var(--charcoal); text-decoration: none; background: none; border: 0;
  padding: 10px 13px; border-radius: var(--r-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-link:hover, .mm-trigger:hover { color: var(--gold-deep); background: var(--cream); }
.mm-trigger .chev {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--med) var(--ease);
}
.mm-item.is-open .mm-trigger { color: var(--gold-deep); background: var(--cream); }
.mm-item.is-open .mm-trigger .chev { transform: rotate(-135deg) translateY(-2px); }

.nav .tel {
  font-family: var(--mono); font-size: 13px; color: var(--gray);
  text-decoration: none; padding: 10px var(--s2); white-space: nowrap;
}
.nav .tel:hover { color: var(--gold-deep); }
.nav .btn-nav {
  background: var(--gold); color: var(--ink); padding: 10px 18px;
  border-radius: var(--r-sm); border: 1.5px solid var(--gold);
  font-family: var(--display); font-weight: 800; font-size: 14.5px;
  text-decoration: none; margin-left: var(--s2); white-space: nowrap;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease-bounce);
}
.nav .btn-nav:hover {
  background: var(--gold-deep); border-color: var(--gold-deep); color: #fff;
  transform: translateY(-2px) rotate(-1deg);
}
.nav .btn-nav:active { transform: translateY(0) scale(.96); }

/* Mega panel */
.mm-item { position: static; }
.mm-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 2px solid var(--line);
  box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility var(--med);
  max-height: calc(100vh - 74px); overflow-y: auto;
}
.mm-item.is-open .mm-panel,
.mm-item:focus-within .mm-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.mm-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--s5) var(--s5) var(--s6);
  display: grid; gap: var(--s5);
}
.mm-inner.cols-ind { grid-template-columns: repeat(4, 1fr) 250px; }
/* Five services + the aside overflow --wrap, and the panel is full-bleed
   anyway, so the services column set gets its own wider track. */
.mm-inner.cols-svc {
  max-width: min(1300px, 100%);
  grid-template-columns: repeat(5, 1fr) 230px;
  gap: var(--s4);
}
.mm-inner.cols-mkt { grid-template-columns: 2.1fr 1fr 1fr 1fr 250px; }

.mm-head {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--gold-deep); margin-bottom: var(--s2); letter-spacing: .2px;
}
.mm-count { font-family: var(--mono); font-size: 11px; color: var(--gray); font-style: normal; margin-left: var(--s1); }

.mm-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--r-md); padding: var(--s3); margin: calc(var(--s3) * -1);
  transition: background var(--fast) var(--ease);
}
.mm-card:hover { background: var(--cream); }
.mm-card img { height: 46px; width: auto; margin-bottom: var(--s2); transition: transform var(--med) var(--ease-bounce); }
.mm-card:hover img { transform: rotate(-5deg) scale(1.08); }
.mm-card .t { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); display: block; }
.mm-card .d { font-size: 13px; color: var(--gray); line-height: 1.5; margin-top: 3px; display: block; }
.cols-svc .mm-card .d { min-height: 58px; }
.cols-ind .mm-card .d { min-height: 40px; }

.mm-list { display: grid; gap: 2px; margin-top: var(--s4); }
.mm-list.two-up { display: block; columns: 2; column-gap: var(--s5); margin-top: 0; }
.mm-list.two-up a { break-inside: avoid; }
.mm-list a {
  font-size: 13.5px; color: var(--charcoal); text-decoration: none;
  padding: 5px var(--s2); margin-left: calc(var(--s2) * -1);
  border-radius: 6px; display: block;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.mm-list a:hover { color: var(--gold-deep); background: var(--cream); }
.mm-list a .star { color: var(--gold); font-size: 10px; vertical-align: 2px; }

.mm-aside {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s5);
}
.mm-aside h4 { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.mm-aside p { font-size: 13.5px; color: var(--gray); margin-bottom: var(--s3); }
.mm-aside .btn { margin-top: 0; font-size: 13.5px; padding: 10px var(--s4); }
.mm-all {
  font-family: var(--display); font-weight: 800; font-size: 13.5px;
  text-decoration: none; display: inline-block; margin-top: var(--s3);
}
.mm-all:hover { text-decoration: underline; }

/* Mobile toggle */
.mm-toggle {
  display: none; background: none; border: 1.5px solid var(--line-ink);
  border-radius: var(--r-sm); padding: 9px 11px; margin-left: auto; cursor: pointer;
}
.mm-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--med) var(--ease), opacity var(--fast); }
.mm-toggle span + span { margin-top: 4px; }
body.nav-open .mm-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .mm-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .mm-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1020px) {
  .mm-toggle { display: block; }
  .nav {
    /* Top offset comes from JS, measured off the live header, so a staging
       ribbon or any other banner never ends up covering the drawer. */
    position: fixed; inset: var(--nav-top, 66px) 0 0 0; margin: 0;
    background: var(--paper); display: block; overflow-y: auto;
    padding: var(--s3) var(--s5) var(--s7);
    border-top: 1px solid var(--line);
    transform: translateX(100%); transition: transform var(--med) var(--ease); z-index: 70;
  }
  body.nav-open .nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .nav-link, .mm-trigger {
    width: 100%; justify-content: space-between;
    padding: var(--s3) var(--s1); font-size: 17px;
    border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav .tel, .nav .btn-nav { display: block; text-align: center; margin: var(--s3) 0 0; }
  .mm-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; max-height: 0; overflow: hidden;
    transition: max-height var(--med) var(--ease);
  }
  .mm-item.is-open .mm-panel { max-height: 2600px; }
  .mm-item:focus-within .mm-panel { max-height: none; }
  .mm-inner,
  .mm-inner.cols-svc, .mm-inner.cols-ind, .mm-inner.cols-mkt {
    grid-template-columns: 1fr; padding: var(--s3) var(--s1) var(--s5); gap: var(--s4);
  }
  .mm-list.two-up { columns: 2; }
  .cols-svc .mm-card .d, .cols-ind .mm-card .d { min-height: 0; }
  .mm-card img, .mm-aside { display: none; }
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  padding: 13px var(--s5); border-radius: var(--r-sm);
  display: inline-block; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--fast) var(--ease-bounce),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.btn.primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn.primary:hover {
  background: var(--gold-deep); border-color: var(--gold-deep); color: #fff;
  transform: translateY(-2px) rotate(-.6deg); box-shadow: var(--shadow-pop);
}
.btn.ghost { border-color: var(--charcoal); color: var(--ink); background: transparent; }
.btn.ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px) rotate(.6deg); }

/* Squash on press — the cartoon half of the anticipation pair. */
.btn:active { transform: translateY(1px) scale(.97, .94) rotate(0deg); box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.btn-row .btn { margin-top: 0; }

/* Inline "read more" link with a scooting arrow */
.arrow-link {
  font-family: var(--display); font-weight: 800; font-size: 14.5px;
  text-decoration: none; display: inline-block; margin-top: var(--s3);
}
.arrow-link::after {
  content: " →"; display: inline-block;
  transition: transform var(--fast) var(--ease-bounce);
}
.arrow-link:hover::after { transform: translateX(5px); }

/* ==========================================================================
   7. Sections + bands
   ========================================================================== */

section { padding-block: var(--section-y); position: relative; }
section.alt {
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.ink-rule { width: 100%; height: 14px; color: var(--line-ink); }

.hero { padding: clamp(40px, 6vw, 78px) 0 clamp(36px, 5vw, 62px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s7); align-items: center; }
.hero-grid .art-wrap { position: relative; }

/* Illustrations sit on paper, like a print pinned to a wall. */
.art-frame, .whitecard-img {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
  box-shadow: var(--shadow-card);
  width: 100%; max-width: 420px;
}
.hero .art { position: absolute; right: var(--s5); top: 44px; height: 232px; }
.hero .home-art { height: 320px; }

.stamp {
  display: inline-block; margin-top: var(--s5);
  border-left: 3px solid var(--gold); padding-left: var(--s3);
}

@media (max-width: 900px) {
  .hero .art { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-grid .art-wrap { max-width: 340px; }
}

/* Gold curls floating in a hero corner */
.curls { position: absolute; width: 120px; height: 90px; color: var(--gold); opacity: .5; pointer-events: none; }
.curls.top-right { right: 6%; top: 8%; }
.curls.bottom-left { left: 2%; bottom: 6%; }

/* Gold call-to-action band */
.band {
  background: var(--gold); padding-block: clamp(44px, 5vw, 62px);
  text-align: center; position: relative; overflow: hidden;
}
.band h2 { color: #fff; }
.band p { color: #4A3800; max-width: 62ch; margin: var(--s3) auto 0; font-size: 17px; }
.band .btn { background: #fff; color: var(--ink); border-color: #fff; margin-top: var(--s5); }
.band .btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.band .curls { color: #fff; opacity: .35; }

/* Breadcrumbs */
.crumbs {
  font-family: var(--mono); font-size: 12px; color: var(--gray);
  padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
}
.crumbs a { color: var(--gray); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }
.crumbs span { opacity: .5; }

/* ==========================================================================
   8. Cards + lists
   ========================================================================== */

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s5);
  box-shadow: var(--shadow-card);
  transition: transform var(--med) var(--ease-bounce),
              border-color var(--med) var(--ease),
              box-shadow var(--med) var(--ease);
}
section.alt .card { background: var(--cream); }
.card h3 { margin-bottom: var(--s2); }
.card p { font-size: 14.5px; color: var(--gray); }
.card .serif-label { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gold-deep); margin-bottom: var(--s1); }
.card img.icon { height: 64px; width: auto; margin-bottom: var(--s3); transition: transform var(--med) var(--ease-bounce); }

a.card { text-decoration: none; display: block; color: inherit; }
a.card:hover {
  border-color: var(--gold);
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: var(--shadow-lift);
}
a.card:hover img.icon { transform: rotate(-6deg) scale(1.09); }
/* "From $800 / month" on a service card — the one card that has a number. */
.card-price {
  font-family: var(--mono); font-size: 12.5px; color: var(--charcoal);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line-ink);
}
.card-price strong { color: var(--gold-deep); font-size: 15px; }

/* Sixth cell of the services grid: no illustration, so it reads as a door
   rather than a service. */
.card-cta { background: var(--cream); border-style: dashed; border-color: var(--line-ink); }
section.alt .card-cta { background: var(--paper); }

.card .more { font-family: var(--display); font-weight: 800; font-size: 13.5px; color: var(--gold-deep); margin-top: var(--s3); display: inline-block; }
.card .more::after { content: " →"; display: inline-block; transition: transform var(--fast) var(--ease-bounce); }
a.card:hover .more::after { transform: translateX(4px); }

/* Tick list */
ul.checks { margin-top: var(--s4); max-width: 640px; }
ul.checks li {
  padding: 10px 0 10px 30px; position: relative;
  border-bottom: 1px solid var(--line); font-size: 15.5px;
}
ul.checks li:last-child { border-bottom: 0; }
ul.checks li::before {
  content: "✓"; position: absolute; left: 3px; top: 10px;
  color: var(--gold-deep); font-weight: 700;
}

/* "What we'd look at" symptom list — index cards on a corkboard */
ul.signs { display: grid; gap: var(--s3); margin-top: var(--s4); }
ul.signs li {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: var(--r-sm);
  padding: 13px var(--s4) 13px var(--s5);
  font-size: 15px; color: var(--charcoal);
  box-shadow: var(--shadow-card);
  transition: transform var(--med) var(--ease-bounce), box-shadow var(--med) var(--ease);
}
section.alt ul.signs li { background: var(--cream); }
ul.signs li:hover { transform: translateX(4px) rotate(-.3deg); box-shadow: var(--shadow-pop); }

/* Chips — short system names */
ul.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
ul.chips li {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.4;
  background: var(--cream-deep); border: 1px solid var(--line-ink);
  border-radius: 999px; padding: 6px var(--s3); color: var(--charcoal);
}
section.alt ul.chips li { background: var(--cream); }

/* Tag row — the two local anchors under a city photo */
ul.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
ul.tag-row li {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--gold-deep); background: var(--cream);
  border: 1px dashed var(--line-ink); border-radius: var(--r-sm);
  padding: 7px var(--s3);
}
section.alt ul.tag-row li { background: var(--cream-deep); }

/* Internal link grids */
.linkgrid a {
  font-size: 14.5px; display: block; padding: 9px 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
  color: var(--charcoal);
  transition: padding-left var(--fast) var(--ease), color var(--fast) var(--ease);
}
.linkgrid a:hover { color: var(--gold-deep); padding-left: 6px; }
.linkgrid a .sub { display: block; font-size: 12.5px; color: var(--gray); }
h3.region {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 15px;
  color: var(--gold-deep); margin-top: var(--s5); letter-spacing: 0;
}
h3.region + .linkgrid, h3.region + .grid4, h3.region + .grid5 { margin-top: var(--s2); }

/* Stat band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.stat { text-align: center; padding: var(--s1); }
.stat .n {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: clamp(34px, 4.4vw, 50px); color: var(--ink);
  line-height: 1; letter-spacing: -1.5px;
}
.stat .l { font-family: var(--mono); font-size: 12px; color: var(--gray); margin-top: var(--s2); display: block; letter-spacing: .3px; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); } }

/* Definition list of quiz answers */
.answer-list { display: grid; gap: var(--s3); margin-top: var(--s5); }
.answer-list > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  align-items: baseline; padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.answer-list dt { font-size: 15px; color: var(--gray); }
.answer-list dd { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); text-align: right; }
@media (max-width: 620px) {
  .answer-list > div { grid-template-columns: 1fr; gap: var(--s1); }
  .answer-list dd { text-align: left; color: var(--gold-deep); }
}

/* ==========================================================================
   8b. Pricing — the published rate card

   Only Digital Marketing carries a price today, and the whole point of
   showing it is that nobody else in this market does. So it is set like a
   headline, not like a table: the number is the loudest thing in the
   section, and everything else hangs off it.
   ========================================================================== */

.price-section .lede { margin-bottom: var(--s2); }

.pricing {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s5); margin-top: var(--s6); align-items: start;
}

.price-card {
  position: relative;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s6) var(--s5) var(--s5);
  box-shadow: var(--shadow-card);
  transition: transform var(--med) var(--ease-bounce),
              border-color var(--med) var(--ease),
              box-shadow var(--med) var(--ease);
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.price-card.featured { border-color: var(--gold); border-width: 2px; padding: calc(var(--s6) - 1px) calc(var(--s5) - 1px) calc(var(--s5) - 1px); }

.price-badge {
  position: absolute; top: -12px; left: var(--s5);
  background: var(--gold); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: .3px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  transform: rotate(-1.5deg);
}

.price-card .tier {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  color: var(--ink); letter-spacing: -.2px;
}

.price-tag { display: flex; align-items: baseline; gap: 7px; margin-top: var(--s2); }
.price-tag .amount {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: clamp(40px, 5vw, 54px); line-height: 1;
  letter-spacing: -1.6px; color: var(--ink);
}
.price-tag .per { font-family: var(--mono); font-size: 13px; color: var(--gray); }

.price-card .covers,
.price-row .covers {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .3px;
  color: var(--gold-deep); margin-top: var(--s3);
}
.price-card .blurb { font-size: 15px; color: var(--gray); margin-top: var(--s3); }
.price-card ul.checks { margin-top: var(--s4); max-width: none; }
.price-card ul.checks li { font-size: 14.5px; padding-left: 26px; }
.price-card .best {
  font-size: 14.5px; color: var(--charcoal); margin-top: var(--s4);
  padding-top: var(--s4); border-top: 1px solid var(--line);
}
/* Cards run to different lengths (only one tier carries the ad-spend note),
   so the CTA is pinned to the bottom and the buttons line up. */
.price-card { display: flex; flex-direction: column; }
.price-card .btn { margin-top: auto; width: 100%; text-align: center; }
.price-card .best, .price-card .price-note { margin-bottom: var(--s4); }
.price-card .price-note + .btn, .price-card .best + .btn { margin-top: auto; }

.price-note {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--gray); margin-top: var(--s3);
}
.price-terms { margin-top: var(--s5); max-width: var(--measure); }

/* Compact form, for the permutation pages — the numbers without the
   120-word includes list repeated on 440 siblings. */
.price-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s5); }
.price-row {
  display: flex; align-items: center; gap: var(--s5);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
}
.price-row.featured { border-color: var(--gold); }
.price-row .price-tag { margin-top: 0; flex: none; }
.price-row .price-tag .amount { font-size: clamp(30px, 3.4vw, 38px); letter-spacing: -1.1px; }
.price-row .price-tag .per { display: none; }
.price-row h3 { font-size: 16px; }
.price-row .covers { margin-top: 3px; }

@media (max-width: 880px) {
  .pricing, .price-strip { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .price-row { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

/* ==========================================================================
   9. Photographs
   ========================================================================== */

/**
 * City photo. Taped into the page like a print in a scrapbook, which is how
 * a real photograph earns a place next to hand-drawn art instead of fighting
 * it. The credit is a licence condition, not decoration — see helpers.php.
 */
.photo-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s7); align-items: center;
}
@media (max-width: 900px) { .photo-split { grid-template-columns: 1fr; gap: var(--s6); } }

.city-photo {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s3) var(--s3) var(--s2);
  box-shadow: var(--shadow-card);
  transform: rotate(-1.1deg);
  transition: transform var(--med) var(--ease-bounce), box-shadow var(--med) var(--ease);
}
.city-photo:hover { transform: rotate(0deg) scale(1.015); box-shadow: var(--shadow-lift); }
.city-photo img { border-radius: 2px; width: 100%; }

/* A torn strip of tape across one corner */
.city-photo .tape {
  position: absolute; top: -12px; left: 50%;
  width: 104px; height: 26px; margin-left: -52px;
  background: rgba(217, 170, 40, .34);
  border-left: 1px dashed rgba(255, 255, 255, .5);
  border-right: 1px dashed rgba(255, 255, 255, .5);
  transform: rotate(-2.4deg);
}
.city-photo figcaption { margin-top: var(--s3); display: grid; gap: 3px; }
.city-photo figcaption strong {
  font-family: var(--display); font-style: italic; font-weight: 900;
  font-size: 15px; color: var(--ink);
}
.city-photo .credit { font-family: var(--mono); font-size: 11px; color: var(--gray); line-height: 1.5; }
.city-photo .credit a { color: var(--gray); }
.city-photo .credit a:hover { color: var(--gold-deep); }

/* ==========================================================================
   10. Process + diagrams
   ========================================================================== */

.process { display: grid; grid-template-columns: 290px 1fr; gap: var(--s7); align-items: start; margin-top: var(--s6); }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: var(--s5); }
  .process .process-pie { max-width: 230px; margin-inline: auto; }
}
.process-pie { width: 100%; height: auto; color: var(--ink); }
.pie-slice { fill: var(--gold); opacity: 0; transform-origin: 130px 130px; }
.pie-slice-2, .pie-slice-4 { fill: var(--gold-soft); }
.pie-num {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: 26px; fill: var(--ink); text-anchor: middle; opacity: 0;
}

/* Full step list (hubs, homepage) */
.steps { display: grid; gap: var(--s1); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step .n, .steps-compact .n {
  font-family: var(--display); font-weight: 900; font-style: italic; font-size: 15px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--ink);
  display: grid; place-items: center; flex: none;
}
.step h3 { margin-bottom: var(--s1); }
.step p { font-size: 14.8px; color: var(--gray); }

/* Compact step list (permutation pages — the detail lives on the hub) */
.steps-compact { display: grid; gap: var(--s2); margin-top: var(--s5); }
.steps-compact li { display: flex; align-items: center; gap: var(--s3); font-size: 15.5px; }
.steps-compact strong { font-family: var(--display); font-weight: 800; font-style: normal; }

/* Diagram frames */
.diagram {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--shadow-card); margin-top: var(--s5);
}
section.alt .diagram { background: var(--cream); }
.untangle, .coverage { width: 100%; height: auto; color: var(--ink); }

.ut-box rect { fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; }
section.alt .ut-box rect { fill: var(--cream); }
.ut-hub rect { fill: var(--gold); stroke: var(--ink); stroke-width: 2.6; }
.ut-box text { font-family: var(--display); font-weight: 800; font-size: 14px; fill: var(--ink); text-anchor: middle; }
.ut-hub text { font-family: var(--display); font-size: 20px; font-style: italic; font-weight: 900; fill: var(--ink); text-anchor: middle; }
.ut-caption { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--gold-deep); text-anchor: middle; }
.ut-tangle { stroke: var(--red); opacity: .55; }
.ut-arrow path, .ut-spoke { stroke: var(--ink); }
.ut-node circle { fill: var(--gold); stroke: var(--ink); stroke-width: 2.2; }
.ut-node text { font-family: var(--mono); font-size: 12px; fill: var(--gray); text-anchor: middle; }

.cov-dot { fill: var(--gold); }
.cov-pin path { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }
.cov-pin text { font-family: var(--mono); font-size: 12px; fill: var(--charcoal); text-anchor: middle; }
.cov-rings path { stroke: var(--gold-deep); }
.cov-legend { font-family: var(--mono); font-size: 11.5px; fill: var(--gray); text-anchor: middle; opacity: .8; }

/* ==========================================================================
   11. FAQ
   ========================================================================== */

.faq { max-width: 780px; margin-top: var(--s5); }
details {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
  margin-top: var(--s3); box-shadow: var(--shadow-card);
  transition: border-color var(--fast) var(--ease);
}
section.alt details { background: var(--cream); }
details:hover { border-color: var(--line-ink); }
details summary {
  font-family: var(--display); font-weight: 800; font-size: 15.5px; color: var(--ink);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--s4); align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; font-family: var(--display); font-weight: 900;
  color: var(--gold-deep); font-size: 24px; line-height: 1; flex: none;
  transition: transform var(--med) var(--ease-bounce);
}
details[open] summary::after { transform: rotate(135deg); }
details[open] > p { animation: answer-drop .3s var(--ease) both; }
details p { margin-top: var(--s3); font-size: 15px; color: var(--gray); }

@keyframes answer-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   12. Forms
   ========================================================================== */

form.lead { max-width: 580px; margin-top: var(--s5); }
.field { margin-top: var(--s4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

form.lead label {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 13.5px; margin-bottom: 6px; color: var(--ink);
}
.opt-tag { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--gray); margin-left: var(--s1); }

form.lead input,
form.lead textarea,
form.lead select {
  width: 100%; padding: 12px var(--s3);
  border: 1.5px solid var(--line-ink); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 15.5px;
  background: var(--paper); color: var(--charcoal);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
form.lead textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
form.lead input:focus,
form.lead textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 170, 40, .3);
}
form.lead button { margin-top: var(--s5); }

.notice { border-radius: var(--r-sm); padding: 13px var(--s4); margin-top: var(--s4); font-size: 14.5px; }
.notice.ok { background: #EDF3EC; color: var(--green); border: 1px solid var(--green); }
.notice.err { background: #F8ECE8; color: var(--red); border: 1px solid var(--red); }

.form-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; gap: var(--s6); } }

.form-aside {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-card);
}
section.alt .form-aside { background: var(--cream); }
.form-aside ul { display: grid; gap: var(--s3); margin-top: var(--s3); }
.form-aside li { font-size: 14.5px; padding-left: 26px; position: relative; }
.form-aside li::before { content: "✓"; position: absolute; left: 2px; color: var(--gold-deep); font-weight: 700; }
.form-aside .meta { margin-top: var(--s4); }
.aside-call { margin-top: var(--s4); font-size: 14.5px; }

/* ==========================================================================
   13. The scoping quiz
   ========================================================================== */

.quiz-band { background: var(--cream-deep); border-block: 1px solid var(--line); overflow: hidden; }
.quiz-intro { max-width: 720px; }
.quiz { margin-top: var(--s6); max-width: 760px; }

.quiz-progress { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.quiz-meter { width: 54px; height: 54px; color: var(--ink); flex: none; }
.qm-slice { fill: var(--paper); stroke: var(--line-ink); stroke-width: 1; transition: fill var(--med) var(--ease-bounce); }
.qm-slice.done { fill: var(--gold); animation: slice-pop .32s var(--ease-bounce) both; }
.quiz-count { font-family: var(--mono); font-size: 13px; color: var(--gray); }
.quiz-count .now { color: var(--ink); font-weight: 600; }

@keyframes slice-pop {
  0%   { transform: scale(.7); }
  65%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.qm-slice { transform-origin: 34px 34px; }

.quiz-step {
  border: 0; padding: 0;
  margin-bottom: var(--s6);
}
.quiz-step legend {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: clamp(21px, 2.3vw, 27px); color: var(--ink); line-height: 1.2;
  margin-bottom: var(--s2); padding: 0;
}
.quiz-step .step-n {
  font-family: var(--mono); font-style: normal; font-weight: 400;
  font-size: 13px; color: var(--gold-deep); flex: none;
}
.quiz-step .step-help { font-size: 14.5px; color: var(--gray); margin-bottom: var(--s4); }

.opts { display: grid; gap: var(--s2); }
.opt {
  display: block; cursor: pointer; position: relative;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease-bounce),
              box-shadow var(--fast) var(--ease);
}
.opt:hover { border-color: var(--gold); transform: translateX(4px) rotate(-.25deg); box-shadow: var(--shadow-card); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-body { display: block; padding-left: 30px; position: relative; }

/* The radio, drawn as a small hand-inked pie */
.opt-body::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-ink); background: var(--paper);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.opt-body::after {
  content: ""; position: absolute; left: 5px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); transform: scale(0);
  transition: transform var(--med) var(--ease-bounce);
}
.opt input:checked + .opt-body::before { border-color: var(--gold-deep); }
.opt input:checked + .opt-body::after { transform: scale(1); }
.opt:has(input:checked) {
  border-color: var(--gold-deep); background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.opt:has(input:focus-visible) { outline: 3px solid var(--gold-deep); outline-offset: 3px; }

.opt .t { display: block; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); }
.opt .d { display: block; font-size: 13.5px; color: var(--gray); margin-top: 2px; }

.quiz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.quiz-nav .btn { margin-top: 0; }
.quiz-nav .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.quiz-skip { flex-basis: 100%; margin: 0; }

/* Advancing a step moves focus to the new question so screen reader and
   keyboard users are carried along with the flow. The move is deliberate and
   the step is already the only thing on screen, so it does not also need a
   focus ring drawn around the heading. */
.quiz-step legend:focus,
.quiz-step legend:focus-visible { outline: none; }

/* JS mode: one question at a time, sliding in from the right */
.quiz.is-stepped .quiz-step { display: none; }
.quiz.is-stepped .quiz-step.is-current { display: block; animation: step-in .32s var(--ease) both; }
.quiz.is-stepped.going-back .quiz-step.is-current { animation-name: step-in-back; }

@keyframes step-in {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes step-in-back {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}

/* Teaser strip pointing at the quiz */
.quiz-teaser .teaser-inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s6); align-items: center;
}
.quiz-teaser .btn { margin-top: 0; white-space: nowrap; }
@media (max-width: 820px) {
  .quiz-teaser .teaser-inner { grid-template-columns: 1fr; gap: var(--s4); }
  .quiz-teaser .btn { justify-self: start; }
}

/* The generated brief */
.brief-hero h1 { max-width: 20ch; }
.brief-card {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-md); padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.brief-card + .brief-card { margin-top: var(--s4); }
.brief-card h3 { margin-bottom: var(--s2); }
.brief-card p { font-size: 15px; color: var(--gray); }

/* ==========================================================================
   14. Motion
   --------------------------------------------------------------------------
   Cartoon animation has a small vocabulary and this sheet sticks to it:
   anticipation before a move, overshoot on arrival (--ease-bounce), squash
   and stretch under pressure (:active), and "boil" — the shimmer you get
   because a hand-inked line is redrawn slightly differently every frame.
   Boil is done with steps() timing on purpose: cartoon linework snaps
   between drawings, it does not interpolate.
   ========================================================================== */

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .21s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .42s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .49s; }

/* Cards arrive with a small overshoot rather than a straight fade */
.reveal-stagger.in > .card { animation: card-drop .42s var(--ease-bounce) both; }
.reveal-stagger.in > .card:nth-child(2) { animation-delay: .07s; }
.reveal-stagger.in > .card:nth-child(3) { animation-delay: .14s; }
.reveal-stagger.in > .card:nth-child(4) { animation-delay: .21s; }
.reveal-stagger.in > .card:nth-child(5) { animation-delay: .28s; }
.reveal-stagger.in > .card:nth-child(6) { animation-delay: .35s; }
.reveal-stagger.in > .card:nth-child(7) { animation-delay: .42s; }
.reveal-stagger.in > .card:nth-child(8) { animation-delay: .49s; }
@keyframes card-drop {
  0%   { opacity: 0; transform: translateY(22px) scale(.96) rotate(-1.2deg); }
  70%  { opacity: 1; transform: translateY(-3px) scale(1.01) rotate(.3deg); }
  100% { opacity: 1; transform: none; }
}

/* Ink boil — three drawings, snapped between, never interpolated. */
.pie-mark { animation: boil 1.05s steps(1, end) infinite; transform-origin: center; }
.h-draw .sq-underline { animation: boil-wide 1.2s steps(1, end) infinite; }
@keyframes boil {
  0%   { transform: rotate(0deg)    translate(0, 0); }
  33%  { transform: rotate(-1.6deg) translate(.4px, -.4px); }
  66%  { transform: rotate(1.3deg)  translate(-.4px, .3px); }
  100% { transform: rotate(0deg)    translate(0, 0); }
}
@keyframes boil-wide {
  0%   { transform: translate(0, 0)     scaleY(1); }
  33%  { transform: translate(.6px, .4px) scaleY(1.06); }
  66%  { transform: translate(-.5px, -.3px) scaleY(.95); }
  100% { transform: translate(0, 0)     scaleY(1); }
}

/* The kicker's pie mark gives a little kick when its section arrives */
.reveal.in .pie-mark, .in .pie-mark { animation: boil 1.05s steps(1, end) infinite, mark-kick .5s var(--ease-bounce) both; }
@keyframes mark-kick {
  0%   { opacity: 0; transform: scale(.3) rotate(-40deg); }
  70%  { opacity: 1; transform: scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Marker underline draws itself */
.sq-underline path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset .8s var(--ease) .15s; }
.h-draw.in .sq-underline path, .in .sq-underline path { stroke-dashoffset: 0; }

/* Curls draw on, then drift like steam */
.curl { stroke-dasharray: 140; stroke-dashoffset: 140; animation: curl-draw 2.4s var(--ease) forwards; }
.curl-2 { animation-delay: .25s; }
.curl-3 { animation-delay: .5s; }
@keyframes curl-draw { to { stroke-dashoffset: 0; } }

.curls.top-right { animation: curl-float 7s ease-in-out infinite; }
.curls.bottom-left { animation: curl-float-flip 7s ease-in-out infinite; }
@keyframes curl-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes curl-float-flip {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  50%      { transform: scaleX(-1) translateY(-10px) rotate(2deg); }
}

/* Hero illustration breathes, and tips when you point at it */
.art-frame { transition: transform var(--med) var(--ease-bounce), box-shadow var(--med) var(--ease); }
.art-wrap:hover .art-frame { transform: rotate(-1.4deg) scale(1.02); box-shadow: var(--shadow-lift); }

/* Process pie: slices fill in one per step, with a wind-up */
.in .pie-slice { animation: pie-in .52s var(--ease-bounce) forwards; animation-delay: calc(var(--i) * .18s); }
@keyframes pie-in {
  0%   { opacity: 0; transform: scale(.7) rotate(-14deg); }
  70%  { opacity: 1; transform: scale(1.06) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
.in .pie-num { animation: fade-in .4s var(--ease) forwards; animation-delay: calc(var(--i) * .18s + .24s); }
@keyframes fade-in { to { opacity: 1; } }
.pie-rim { stroke-dasharray: 640; stroke-dashoffset: 640; }
.in .pie-rim { animation: draw 1.3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Untangle: the mess scribbles itself in, then the hub connects */
.ut-tangle { stroke-dasharray: 520; stroke-dashoffset: 520; }
.in .ut-tangle { animation: draw 1.5s var(--ease) forwards; animation-delay: calc(var(--i) * .18s); }
.ut-box { opacity: 0; }
.in .ut-box { animation: fade-in .45s var(--ease) forwards; animation-delay: calc(var(--i) * .1s); }
.ut-spoke { stroke-dasharray: 60; stroke-dashoffset: 60; }
.in .ut-spoke { animation: draw .5s var(--ease) forwards; animation-delay: calc(.7s + var(--i) * .12s); }
.ut-node, .ut-hub, .ut-arrow { opacity: 0; }
.in .ut-hub { animation: pop .5s var(--ease-bounce) forwards .7s; }
.in .ut-arrow { animation: fade-in .5s var(--ease) forwards .6s; }
.in .ut-node { animation: pop .45s var(--ease-bounce) forwards; animation-delay: calc(1.2s + var(--i) * .12s); }
@keyframes pop {
  0%   { opacity: 0; transform: scale(.4); }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Coverage: rings draw, dots pop on one after another */
.cov-rings path { stroke-dasharray: 900; stroke-dashoffset: 900; }
.in .cov-rings path { animation: draw 1.4s var(--ease) forwards; animation-delay: calc(var(--i) * .18s); }
.cov-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.in .cov-dot { animation: pop .4s var(--ease-bounce) forwards; animation-delay: calc(.5s + var(--i) * .06s); }
.cov-pin { opacity: 0; }
.in .cov-pin { animation: pin-drop .5s var(--ease-bounce) forwards 1.1s; transform-box: fill-box; transform-origin: center bottom; }
@keyframes pin-drop {
  0%   { opacity: 0; transform: translateY(-16px) scale(.8); }
  70%  { opacity: 1; transform: translateY(2px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}

/* City photo drops onto the page and settles */
.city-photo.reveal.in { animation: photo-drop .55s var(--ease-bounce) both; }
@keyframes photo-drop {
  0%   { opacity: 0; transform: rotate(-5deg) translateY(-16px) scale(.96); }
  70%  { opacity: 1; transform: rotate(.6deg) translateY(3px) scale(1.01); }
  100% { opacity: 1; transform: rotate(-1.1deg); }
}

/* ==========================================================================
   15. Footer + chrome
   ========================================================================== */

footer { background: var(--charcoal); color: var(--cream); padding: var(--s8) 0 var(--s7); margin-top: var(--s6); }
footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--s6); }
@media (max-width: 880px) { footer .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer .wrap { grid-template-columns: 1fr; } }
footer img { height: 58px; width: auto; margin-bottom: var(--s3); }
footer p, footer a { font-size: 13.5px; color: #D3CCB6; }
footer a { text-decoration: none; }
footer a:hover { color: var(--gold); text-decoration: underline; }
footer h3 { color: var(--cream); font-size: 15px; margin-bottom: var(--s3); }
footer .tagline { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 15px; }
footer .colophon {
  grid-column: 1 / -1; border-top: 1px solid #4C4C4C;
  padding-top: var(--s5); margin-top: var(--s2);
  font-family: var(--mono); font-size: 12px; color: #A39C86;
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
}

.stage-flag {
  background: var(--ink); color: var(--gold-soft);
  font-family: var(--mono); font-size: 12px;
  text-align: center; padding: 6px var(--s3); letter-spacing: .3px;
}

/* Skip link — visible only once focused */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 12px var(--s5); border-radius: 0 0 var(--r-sm) 0;
  font-family: var(--display); font-weight: 800; text-decoration: none;
}
.skip:focus { left: 0; }

/* ==========================================================================
   16. Reduced motion + no-JS
   --------------------------------------------------------------------------
   Motion is a decoration, never a dependency. Content must never be invisible
   because someone turned animation off or a script failed to load.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .pie-slice, .pie-num, .ut-box, .ut-node, .ut-hub, .ut-arrow, .cov-dot, .cov-pin { opacity: 1; }
  .curl, .pie-rim, .ut-spoke, .ut-tangle, .cov-rings path, .sq-underline path { stroke-dashoffset: 0; }
  .curls, .pie-mark, .h-draw .sq-underline { animation: none; }
  .city-photo { transform: none; }
}

/* .no-js covers scripting off; .reveal-fallback covers site.js failing to
   load or throwing — a head-level timer adds it. See layout.php. */
.no-js .reveal, .no-js .reveal-stagger > *,
.reveal-fallback .reveal, .reveal-fallback .reveal-stagger > * { opacity: 1; transform: none; }

.no-js .pie-slice, .no-js .pie-num, .no-js .ut-box, .no-js .ut-node, .no-js .ut-hub,
.no-js .ut-arrow, .no-js .cov-dot, .no-js .cov-pin,
.reveal-fallback .pie-slice, .reveal-fallback .pie-num, .reveal-fallback .ut-box,
.reveal-fallback .ut-node, .reveal-fallback .ut-hub, .reveal-fallback .ut-arrow,
.reveal-fallback .cov-dot, .reveal-fallback .cov-pin { opacity: 1; }

.no-js .pie-rim, .no-js .ut-spoke, .no-js .ut-tangle, .no-js .cov-rings path, .no-js .sq-underline path,
.reveal-fallback .pie-rim, .reveal-fallback .ut-spoke, .reveal-fallback .ut-tangle,
.reveal-fallback .cov-rings path, .reveal-fallback .sq-underline path { stroke-dashoffset: 0; }

/* Mega-menu spacing helpers (industry cards stack two per column; market
   lists are grouped by state within a column). */
.mm-card-stack { margin-bottom: var(--s4); }
.mm-list-group { margin-bottom: var(--s4); }

/* Photo wall — the major markets, on the locations index. */
.photo-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s4); margin-top: var(--s5);
}
.photo-tile {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--paper); text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--med) var(--ease-bounce), box-shadow var(--med) var(--ease);
}
.photo-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s var(--ease); }
.photo-tile span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s5) var(--s3) var(--s2);
  font-family: var(--display); font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(to top, rgba(20, 16, 6, .82), rgba(20, 16, 6, 0));
}
.photo-tile:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-lift); }
.photo-tile:hover img { transform: scale(1.06); }

/* Footer service list: the one service with a published number says so. */
.foot-price { font-family: var(--mono); font-size: 11.5px; color: var(--gold); white-space: nowrap; }

/* ==========================================================================
   17. Editorial — blog index, articles, case studies

   Long-form reading is a different problem from the marketing pages above.
   Those are scanned; these are read, top to bottom, often on a phone. So the
   measure is capped near 68 characters, the vertical rhythm is looser than
   the rest of the site, and the gold is used once per screen rather than as
   punctuation — an article is the one place on this site where the brand
   should get out of the way of the sentence.
   ========================================================================== */

/* A narrower column for prose. The marketing --wrap is built for grids. */
.wrap-narrow { max-width: 760px; }

.pt-0 { padding-top: 0; }
.hero-slim { padding-bottom: var(--s6); }
.hero-slim h1 { max-width: 16ch; }
.hero-slim .lead { max-width: 62ch; }

/* -- category bar ------------------------------------------------------- */
.cat-bar {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding: var(--s5) 0 var(--s2);
  border-bottom: 1px solid var(--line);
}
.cat-bar .chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--charcoal); text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease-bounce);
}
.cat-bar .chip span { font-family: var(--mono); font-size: 11px; opacity: .6; }
.cat-bar .chip:hover { border-color: var(--gold); transform: translateY(-2px); }
.cat-bar .chip.on { background: var(--gold); border-color: var(--gold); color: #241c05; }
.cat-bar .chip.on span { opacity: .75; }

/* -- post + case study cards -------------------------------------------- */
.post-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--s4); margin-top: var(--s5);
}
.post-card, .case-card { display: flex; flex-direction: column; text-decoration: none; }
.post-card h3, .case-card h3 { margin: var(--s2) 0 var(--s2); }
.post-card p, .case-card p { flex: 1; }
.post-card .badge, .case-card .badge {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-soft);
  padding: 3px 9px; border-radius: 999px;
}
.post-meta {
  font-family: var(--mono); font-size: 12px; color: var(--gray);
  margin-top: var(--s3); flex: 0 0 auto;
}

/* The lead article on the index: same card vocabulary, one size up. */
.post-feature {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center;
  margin-top: var(--s5); padding: var(--s5);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); text-decoration: none;
  transition: transform var(--med) var(--ease-bounce), box-shadow var(--med) var(--ease);
}
.post-feature:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: var(--shadow-lift); }
.post-feature h2 { margin: var(--s2) 0; }
.post-feature .art-wrap { width: 220px; flex: 0 0 auto; }
.post-feature img { width: 100%; height: auto; }
@media (max-width: 760px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-feature .art-wrap { display: none; }
}

/* -- article head + contents -------------------------------------------- */
.post-head { position: relative; padding: var(--s7) 0 var(--s5); background: var(--cream); overflow: hidden; }
.post-head h1 { max-width: 20ch; }
.post-head .lead { max-width: 60ch; }
.post-head .post-meta { margin-top: var(--s4); }

.post-toc {
  margin: var(--s6) 0 var(--s5); padding: var(--s4) var(--s5);
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--r-md);
}
.post-toc h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray); margin: 0 0 var(--s3);
}
.post-toc ol { margin: 0; padding-left: 1.2em; }
.post-toc li { margin: 4px 0; font-size: 15px; }
.post-toc a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid transparent; }
.post-toc a:hover { border-bottom-color: var(--gold); }

/* -- the prose itself ---------------------------------------------------- */
.prose { font-size: 17.5px; line-height: 1.72; }
.prose > p { margin: 0 0 var(--s4); max-width: 68ch; }
.prose h2 {
  margin: var(--s7) 0 var(--s3); font-size: clamp(24px, 3.2vw, 31px);
  scroll-margin-top: 90px;   /* the sticky header must not cover a jumped-to heading */
}
.prose h3 { margin: var(--s5) 0 var(--s2); font-size: 19px; }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.3em; max-width: 68ch; }
.prose li { margin: 7px 0; }
.prose a { color: var(--gold-deep); text-underline-offset: 3px; }
.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--cream-deep); padding: 1px 5px; border-radius: 4px;
}
.prose .pull { margin: var(--s5) 0; max-width: 62ch; }
.prose .client-blurb { font-style: italic; color: var(--gray); }

.post-note {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  background: var(--cream-deep); border-radius: var(--r-md);
  border-left: 3px solid var(--gold);
  font-size: 16px; max-width: 68ch;
}

/* Tables scroll rather than squeeze — a three-column comparison at 360px
   wide is unreadable if it wraps, and readable if it scrolls. */
.table-scroll { overflow-x: auto; margin: 0 0 var(--s5); -webkit-overflow-scrolling: touch; }
.prose table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: .02em; background: var(--cream-deep); border-bottom-color: var(--gold);
}
.prose tbody tr:last-child td { border-bottom: none; }

/* -- FAQ accordion at the foot of an article ----------------------------- */
.post-faq { margin: var(--s7) 0 0; }
.post-faq h2 { font-size: clamp(24px, 3.2vw, 31px); margin-bottom: var(--s4); }
.post-faq details {
  border-bottom: 1px solid var(--line); padding: var(--s3) 0;
}
.post-faq summary {
  cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 17px;
  list-style: none; padding-right: var(--s5); position: relative;
}
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after {
  content: '+'; position: absolute; right: 0; top: -2px;
  font-family: var(--mono); font-size: 20px; color: var(--gold-deep);
}
.post-faq details[open] summary::after { content: '–'; }
.post-faq details p { margin: var(--s3) 0 var(--s2); max-width: 66ch; color: var(--gray); }

/* -- the one CTA inside an article --------------------------------------- */
.post-cta {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center;
  margin: var(--s7) 0 var(--s6); padding: var(--s5);
  background: var(--cream-deep); border-radius: var(--r-lg);
  border: 1px solid var(--gold-soft);
}
.post-cta img { width: 110px; height: auto; }
.post-cta h2 { margin: var(--s1) 0 var(--s2); font-size: 24px; }
.post-cta p { margin: 0 0 var(--s3); }
.post-cta .btn-row { margin-top: var(--s3); }
@media (max-width: 620px) {
  .post-cta { grid-template-columns: 1fr; }
  .post-cta img { display: none; }
}

/* -- case study fact table ----------------------------------------------- */
.case-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s3) var(--s5); margin: var(--s6) 0 var(--s5);
  padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.case-facts dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 3px;
}
.case-facts dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 15.5px; }
.case-source { margin: var(--s5) 0 0; font-style: italic; }

/* -- the client roll ------------------------------------------------------ */
.roll {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0 var(--s6); margin-top: var(--s5);
}
.roll-row {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 9px 0; border-bottom: 1px dotted var(--line); font-size: 15px;
}
.roll-row strong { font-family: var(--display); font-weight: 700; }
.roll-row span { color: var(--gray); font-size: 13.5px; text-align: right; flex: 0 0 auto; max-width: 48%; }

/* §2 resets `ul, ol { list-style: none }` because every list in the marketing
   UI is a styled component (.checks, .signs, .mm-list) that draws its own
   marker. Prose is the exception: in an article a bullet and a number carry
   meaning — an unmarked ordered list of five steps reads as five orphan
   sentences — so markers come back here, and only here. */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul ul { list-style: circle; }
.prose li::marker { color: var(--gold-deep); }
.prose ol li::marker { font-family: var(--mono); font-size: .85em; }

/* .checks is reused inside case-study prose for feature lists, and it draws
   its own tick — so it must keep the reset even in there. */
.prose ul.checks, .prose ul.signs { list-style: none; padding-left: 0; }

.post-toc ol { list-style: decimal; }
.post-toc li::marker { font-family: var(--mono); font-size: 11px; color: var(--gray); }

/* -- KPI row, on a case study ------------------------------------------- *
   The figures a client published, above the narrative. They are deliberately
   not the .stats counters used on hubs: those animate from zero, which is
   fine for a portfolio total but reads as theatre next to "zero downtime on
   the .gov migration". These just sit there and state the number. */
.kpi-row {
  list-style: none; padding: 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--s6) 0 var(--s5);
}
.kpi {
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--cream); border: 1px solid var(--line);
}
.kpi-hero { background: var(--gold-soft); border-color: var(--line-ink); }
.kpi-value {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.05; color: var(--ink);
  letter-spacing: -.5px;
}
.kpi-label {
  display: block; margin-top: var(--s2);
  font-size: 13.5px; line-height: 1.4; color: var(--charcoal);
}

/* -- trust marks, anywhere on the site ---------------------------------- *
   Same figures, reused off the case studies, each one a link back to the
   study that states it. The client name is part of the mark, not a caption:
   an unattributed number is the thing this component exists to avoid. */
.trust { padding: var(--section-y) 0; }
.trust-bare { padding: var(--s7) 0; }
.trust-row {
  list-style: none; padding: 0;
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: var(--s5);
}
.trust-mark a {
  display: block; height: 100%; text-decoration: none;
  padding: var(--s5) var(--s4);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.trust-mark a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop); border-color: var(--gold);
}
section.alt .trust-mark a { background: var(--paper); }
.tm-value {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1; color: var(--ink);
  letter-spacing: -.6px;
}
.tm-label {
  display: block; margin-top: var(--s3);
  font-size: 14px; line-height: 1.45; color: var(--charcoal);
}
.tm-client {
  display: block; margin-top: var(--s3);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2px;
  color: var(--gold-deep);
}
.trust-note { margin-top: var(--s4); }

/* A KPI echoed on an index card, under the summary. */
.card-kpi {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px dashed var(--line-ink);
  font-size: 13.5px; color: var(--charcoal);
}
.card-kpi strong {
  font-family: var(--display); font-weight: 900;
  font-size: 16px; color: var(--ink); margin-right: 4px;
}

/* -- the PDF still on offer --------------------------------------------- *
   The page is the canonical version and the download is the courtesy, so the
   button is ghost-weight and the note says plainly that nothing is withheld
   from the page. It is not a gate and should not look like one. */
.pdf-get {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
  margin: var(--s6) 0 var(--s5); padding: var(--s4);
  border: 1px dashed var(--line-ink); border-radius: var(--r-md);
  background: var(--cream);
}
.pdf-get .meta { flex: 1 1 260px; margin: 0; }

@media (max-width: 560px) {
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .pdf-get { flex-direction: column; align-items: flex-start; }
}