/* ==========================================================================
   EDHN V2 — "Local Advantage"
   A performance system, not an editorial one. Bright, bold, data-forward,
   built to be scanned in seconds and to book meetings.
   One stylesheet on purpose: fewer render-blocking requests.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:          #F6F4F0;   /* warm light base */
  --card:        #FFFFFF;
  --deep:        #0E1620;   /* midnight band */
  --deep-2:      #16212E;

  /* Ink */
  --ink:         #12161C;
  --ink-2:       #55606E;
  --ink-on-deep: #EEF2F6;
  --ink-2-deep:  #9AA7B4;

  /* ---- Gold. This is El Dorado County: the Gold Rush started here and
     "El Dorado" means the golden one. Gold is local heritage, not luxury polish.
     It stays out of editorial territory by being a SOLID FILL with near-black
     text, set in a bold sans, on a light page.
     Three tokens because one gold cannot be legible everywhere:
       --fill      strike gold, button and highlight fills (dark text on top)
       --accent    deep gold, the only one legible as text on light surfaces
       --accent-hi bright gold, for text and accents on the dark bands        */
  --fill:        #E0A419;
  --fill-hi:     #F0B838;
  --on-fill:     #12161C;
  --accent:      #7F5D0E;
  --accent-hi:   #E8B33C;
  --accent-soft: #FBF0D8;
  --pos:         #17795E;

  --line:        #E4DFD7;
  --line-deep:   #26313E;

  --font: 'Jakarta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 4.5vw, 48px);
  --r: 14px;
  --r-sm: 8px;

  --dur: 200ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 1px 2px rgba(18,22,28,.05), 0 8px 24px rgba(18,22,28,.06);
  --shadow-lg: 0 2px 4px rgba(18,22,28,.06), 0 18px 48px rgba(18,22,28,.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3,h4 { margin: 0; line-height: 1.08; letter-spacing: -.02em; font-weight: 800; }
p { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(56px, 8vw, 104px); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 999; background: var(--fill); color: var(--on-fill); padding: 12px 20px; border-radius: var(--r-sm); }

/* ---- Type utilities ---------------------------------------------------- */
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
/* Every dark surface, in one place. .final and .page-hero kept getting missed
   individually, which is how a 3:1 gold label shipped on the closing band. */
.deep .kicker, .band-deep .kicker, .final .kicker, .page-hero .kicker, .hero .kicker { color: var(--accent-hi); }
h2.big { font-size: clamp(2rem, 4.4vw, 3.15rem); margin-top: 14px; text-wrap: balance; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); margin-top: 18px; max-width: 62ch; }
.band-deep .lead, .deep .lead, .final .lead { color: var(--ink-2-deep); }
.center { text-align: center; margin-inline: auto; }
.center .lead { margin-inline: auto; }

/* ---- Buttons ----------------------------------------------------------- */
/* Gold fill, near-black label: ~8:1 contrast, and it reads like a gold bar
   rather than a luxury flourish. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--fill); color: var(--on-fill); font-weight: 800; font-size: 16px;
  padding: 16px 28px; border-radius: var(--r-sm); border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: 0 4px 14px rgba(224,164,25,.34); }
.btn:hover { background: var(--fill-hi); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(224,164,25,.42); }
.btn--lg { font-size: 17px; padding: 19px 34px; }
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); box-shadow: none; }
.btn--ghost:hover { background: #fff; border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
/* Ghost buttons on any dark surface. The hero counts: without .hero here the
   label rendered dark-on-dark and vanished. */
.band-deep .btn--ghost, .deep .btn--ghost, .hero .btn--ghost, .final .btn--ghost {
  color: var(--ink-on-deep); border-color: rgba(255,255,255,.34); }
.band-deep .btn--ghost:hover, .deep .btn--ghost:hover, .hero .btn--ghost:hover, .final .btn--ghost:hover {
  background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
/* Both spellings: .center as an ancestor, and .center on the row itself.
   Only the ancestor form existed, so every closing CTA was left-aligned. */
.center .cta-row, .cta-row.center { justify-content: center; }
.micro { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.band-deep .micro, .deep .micro, .final .micro { color: var(--ink-2-deep); }

/* ---- Header ------------------------------------------------------------ */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(246,244,240,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr-in { max-width: var(--maxw); margin-inline: auto; padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; gap: 26px; }
.nav a { font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color var(--dur) var(--ease); }
.nav a:hover { color: var(--accent); }
.hdr-right { display: flex; align-items: center; gap: 18px; }
.hdr-tel { font-size: 15px; font-weight: 700; color: var(--ink); }
.hdr-tel:hover { color: var(--accent); }
.burger { display: none; background: #fff; border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 14px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); }

/* ==========================================================================
   HERO — scale, tenure, local owner, and the ask.
   ========================================================================== */
.hero { position: relative; background: var(--deep); color: var(--ink-on-deep); overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(102deg, rgba(14,22,32,.97) 0%, rgba(14,22,32,.93) 34%, rgba(14,22,32,.72) 56%, rgba(14,22,32,.42) 100%); }
.hero-in { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.hero-col { max-width: 780px; }
/* 780 not 660: the headline runs to 87 characters and at 660 it broke to five
   lines / 271px of display type, which reads as a wall. 780 puts it on three
   lines with no reduction in font size. */
.hero h1 { font-size: clamp(1.95rem, 4.6vw, 3.2rem); color: #fff; }
/* Sized to the headline, not the other way round. At the old 3.9rem cap the
   87-character headline broke to five lines of display type on every desktop
   width and seven on a phone. Measured across ten viewports: this puts it on
   three lines everywhere down to tablet, and five on the narrowest phones. */
.hero h1 .hl { color: var(--accent-hi); }
.hero .lead { color: #D6DEE7; font-size: clamp(1.05rem, 1.7vw, 1.24rem); max-width: 56ch; }
.hero .micro { color: #9AA7B4; }

/* ---- Hero film framing --------------------------------------------------
   The film is 16:9 and the logo reveal spans nearly its full width, but the
   hero box is tall and narrow (the copy, stats and partner row stack), so
   object-fit:cover was cropping 46% of the width on a tablet and 81% on a
   phone. A visitor on mobile saw about a fifth of the logo.

   So while the reveal is playing we CONTAIN the film - the whole title card is
   visible at every size - and only switch to COVER once the copy is in. The
   switch is masked because the film itself hard-cuts to the aerial at the same
   moment. Letterbox is invisible because the reveal is on black and we paint
   the media box black underneath it.

   The scrim is the second half of the fix. It sits ABOVE the video at up to
   97% opacity to make the copy legible, which also dimmed the gold logo it was
   never meant to cover. It now fades in with the copy instead. */
.hero.awaiting .hero-media { background: #000; }
.hero.awaiting .hero-media video,
.hero.awaiting .hero-media img { object-fit: contain; }
.hero.awaiting::after { opacity: 0; }
.hero.revealed::after { opacity: 1; transition: opacity 700ms var(--ease); }
.hero.revealed .hero-media video,
.hero.revealed .hero-media img { object-fit: cover; }

/* ==========================================================================
   HERO REVEAL — the film opens with a ~6s gold logo reveal, so the copy has to
   wait for it and then enter.

   The gate is `html.js .hero.awaiting`, set by JS only once it has decided the
   film will actually play. Default state is VISIBLE, on purpose: no-JS, a
   blocked autoplay, reduced motion, save-data and every AI crawler that does
   not execute JS all get the headline in the raw HTML. Nothing load-bearing is
   ever hidden behind a timer.
   ========================================================================== */
.hero-col > *:not(.hero-media) { opacity: 1; transform: none; }

.hero.awaiting .hero-col > * {
  opacity: 0;
  transform: translateY(16px);
  /* No transition while waiting: entering is animated, hiding is instant. */
  transition: none;
}
.hero.revealed .hero-col > * {
  opacity: 1;
  transform: none;
  transition: opacity 820ms var(--ease), transform 820ms var(--ease);
}
/* Staggered cascade so it reads as a title sequence rather than a flash. */
.hero.revealed .kicker    { transition-delay:   0ms; }
.hero.revealed h1         { transition-delay:  90ms; }
.hero.revealed .lead      { transition-delay: 240ms; }
.hero.revealed .cta-row   { transition-delay: 380ms; }
.hero.revealed .micro     { transition-delay: 470ms; }
.hero.revealed .stats     { transition-delay: 560ms; }
.hero.revealed .partners  { transition-delay: 650ms; }

@media (prefers-reduced-motion: reduce) {
  /* Never hold copy back from someone who asked for less motion. */
  .hero.awaiting .hero-col > *,
  .hero.revealed .hero-col > * { opacity: 1; transform: none; transition: none; }
}

/* stat strip beneath the hero copy */
.stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(20px, 4vw, 48px);
  margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); justify-content: start; }
.stat b { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; }
.stat span { display: block; font-size: 12.5px; color: #9AA7B4; margin-top: 7px; font-weight: 500; line-height: 1.35; max-width: 17ch; }

/* ==========================================================================
   PILLARS — why owners choose us
   ========================================================================== */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; }
.pill { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 26px; box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pill:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pill-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft);
  display: grid; place-items: center; color: var(--accent); margin-bottom: 18px; }
.pill-ic svg { width: 24px; height: 24px; }
.pill h3 { font-size: 1.12rem; font-weight: 800; }
.pill p { font-size: 15px; color: var(--ink-2); margin-top: 10px; }

/* ==========================================================================
   ADVANTAGE — the enterprise-leverage section (dark band)
   ========================================================================== */
.band-deep { background: var(--deep); color: var(--ink-on-deep); }
.band-deep h2 { color: #fff; }
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.adv-list { margin-top: 30px; display: grid; gap: 22px; }
.adv-item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.adv-num { width: 40px; height: 40px; border-radius: 10px; background: rgba(224,164,25,.18);
  color: var(--accent-hi); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.adv-item h3 { font-size: 1.05rem; color: #fff; font-weight: 700; }
.adv-item p { font-size: 15px; color: var(--ink-2-deep); margin-top: 7px; }
.adv-card { background: var(--deep-2); border: 1px solid var(--line-deep); border-radius: var(--r); padding: 34px 30px; }
.adv-card .big-n { font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 800; color: var(--accent-hi); letter-spacing: -.03em; line-height: 1; }
.adv-card .big-l { color: #fff; font-weight: 700; margin-top: 10px; font-size: 1.05rem; }
.adv-card p { color: var(--ink-2-deep); font-size: 15px; margin-top: 12px; }
.adv-split { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-deep); display: grid; gap: 16px; }
.adv-split div { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-on-deep); }
.adv-split svg { width: 20px; height: 20px; color: var(--accent-hi); flex: none; margin-top: 2px; }
/* Three .adv-card stats in a row. .adv-grid is a two-column split, so a
   three-card set needs its own track. */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 880px) { .statrow { grid-template-columns: 1fr; } }

/* ==========================================================================
   CHANNELS
   ========================================================================== */
.chan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 46px; }
.ch { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ch:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ch img { width: 100%; height: 210px; object-fit: cover; }
.ch-b { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.ch-tag { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.ch h3 { font-size: 1.3rem; margin-top: 8px; }
.ch p { color: var(--ink-2); font-size: 15.5px; margin-top: 12px; flex: 1; }
.ch .more { margin-top: 18px; font-weight: 700; font-size: 15px; color: var(--accent); }

/* ==========================================================================
   PROOF
   ========================================================================== */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pquote { font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.5; flex: 1; }
.pmeta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pmeta b { display: block; font-size: 15px; font-weight: 700; }
.pmeta span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.pnums { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700;
  padding: 6px 11px; border-radius: 999px; }
.gsrc { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.gsrc svg { width: 14px; height: 14px; }

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
.step { position: relative; padding-top: 28px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--fill); border-radius: 2px; opacity: .3; }
.step:first-child::before { opacity: 1; }
.step b { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.step h3 { font-size: 1.2rem; margin-top: 10px; }
.step p { color: var(--ink-2); font-size: 15.5px; margin-top: 10px; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; align-items: stretch; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.tier--best { background: var(--deep); border-color: var(--deep); color: var(--ink-on-deep);
  box-shadow: var(--shadow-lg); position: relative; }
.tier-flag { position: absolute; top: -13px; left: 28px; background: var(--fill); color: var(--on-fill);
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; }
.tier-name { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.tier--best .tier-name { color: var(--accent-hi); }
.tier-amt { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; margin-top: 14px; line-height: 1.05; }
.tier--best .tier-amt { color: #fff; }
.tier-amt small { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.tier--best .tier-amt small { color: var(--ink-2-deep); }
.tier p { font-size: 15px; color: var(--ink-2); margin-top: 14px; flex: 1; }
.tier--best p { color: var(--ink-2-deep); }
.tier .btn { margin-top: 24px; width: 100%; }

/* ==========================================================================
   SEATS / FAQ / FINAL
   ========================================================================== */
.seat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.seats { border-top: 1px solid var(--line); margin-top: 26px; }
.seats li { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--line); }
.seats .c { font-weight: 600; font-size: 15.5px; }
.tag { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.tag--taken { background: #E7E3DB; color: #575F6B; }
.tag--open { background: #E4F3EC; color: var(--pos); }

.faq { max-width: 820px; margin: 42px auto 0; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 700; font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; font-weight: 700; flex: none; line-height: 1;
  transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 24px 22px; color: var(--ink-2); font-size: 16px; }

.final { background: var(--deep); color: var(--ink-on-deep); text-align: center; }
.final h2 { color: #fff; font-size: clamp(2.1rem, 4.8vw, 3.3rem); max-width: 20ch; margin-inline: auto; text-wrap: balance; }

/* ---- Footer ------------------------------------------------------------ */
.ftr { background: var(--deep-2); color: var(--ink-2-deep); padding: 60px 0 28px; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.ftr img { height: 40px; width: auto; margin-bottom: 18px; }
.ftr h4 { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 14px; }
.ftr a, .ftr p { font-size: 14.5px; color: var(--ink-2-deep); display: block; margin-bottom: 8px; }
.ftr a:hover { color: #fff; }
.ftr-btm { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-deep);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
.ftr-legal { font-size: 12px; opacity: .75; margin-top: 16px; max-width: 82ch; line-height: 1.5; }

/* ---- Mobile sticky bar -------------------------------------------------- */
.mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  box-shadow: 0 -4px 16px rgba(0,0,0,.14); }
.mbar a { flex: 1; text-align: center; padding: 16px 0; font-weight: 800; font-size: 15px; }
.mbar .b1 { background: var(--fill); color: var(--on-fill); }
.mbar .b2 { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }

/* ---- Reveal ------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.rv.in { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .adv-grid, .seat-grid { grid-template-columns: 1fr; }
  .proof-grid, .steps, .tiers { grid-template-columns: 1fr; }
  .tier--best { order: -1; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
/* 861-1240px: six nav links plus the phone number and the button don't fit, so the
   nav wrapped and pushed the header from 58px to 107px tall. The burger hasn't
   kicked in yet at these widths, so tighten rather than collapse. */
@media (min-width: 861px) and (max-width: 1240px) {
  .hdr-in { gap: 14px; }
  .nav { gap: 16px; flex-wrap: nowrap; }
  .nav a { font-size: 14px; white-space: nowrap; }
  .hdr-tel { display: none; }
  .hdr-right .btn { padding: 13px 18px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 860px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card);
    flex-direction: column; padding: 20px var(--gutter); gap: 18px; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .burger { display: block; }
  .hdr-tel, .hdr-right .btn { display: none; }
  .mbar { display: flex; }
  body { padding-bottom: 54px; }
  .chan { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .stat span { max-width: none; }
}
@media (max-width: 560px) {
  .ftr-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BOOKING PAGE: scheduler, two-step form, thank-you
   ========================================================================== */
.page-hero { background: var(--deep); color: var(--ink-on-deep); padding-block: clamp(48px, 6vw, 76px); }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.1rem); max-width: 22ch; }
.page-hero .lead { color: var(--ink-2-deep); }
.page-hero .kicker { color: var(--accent-hi); }
.crumb { font-size: 13px; color: var(--ink-2-deep); margin-bottom: 16px; }
.crumb a { color: var(--ink-2-deep); }
.crumb a:hover { color: var(--fill); }

.book-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.cal-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.cal-head { padding: 22px 26px; border-bottom: 1px solid var(--line); }
.cal-head h2 { font-size: 1.3rem; }
.cal-head p { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; }
#cal-mount { min-height: 700px; }
.cal-skel { min-height: 700px; display: grid; place-items: center; color: var(--ink-2); font-size: 15px; padding: 30px; text-align: center; }
.cal-fallback { padding: 40px 26px; text-align: center; color: var(--ink-2); }
.cal-fallback a { color: var(--accent); font-weight: 700; }

.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.aside-card + .aside-card { margin-top: 20px; }
.aside-card h3 { font-size: 1.12rem; }
.aside-card ul { margin-top: 14px; display: grid; gap: 12px; }
.aside-card li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; font-size: 15px; color: var(--ink-2); align-items: start; }
.aside-card li svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.owner-mini { display: flex; gap: 14px; align-items: center; }
/* Square headshot: centre it. The old 72% offset existed only to rescue a face
   out of a wide two-person photo. */
.owner-mini img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
  object-position: center; flex: none; border: 2px solid var(--accent-soft); }
.owner-mini b { display: block; font-size: 15px; }
.owner-mini span { font-size: 13.5px; color: var(--ink-2); }
.quote-mini { font-size: 15.5px; color: var(--ink); font-weight: 600; line-height: 1.5; }
.quote-mini + .owner-mini { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---- Form -------------------------------------------------------------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow); }
.fbar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 26px; }
.fbar span { display: block; height: 100%; width: 50%; background: var(--fill); transition: width var(--dur) var(--ease); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.field label .opt { font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
  padding: 13px 15px; border: 2px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color var(--dur) var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--fill); }
.field textarea { min-height: 96px; resize: vertical; }
.field .err { display: none; color: #B3261E; font-size: 13.5px; margin-top: 6px; font-weight: 600; }
.field.bad .err { display: block; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: #B3261E; }
.checks { display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; font-size: 14.5px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fill); }
.fnav { display: flex; gap: 12px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.fnav .btn { flex: none; }
.link-btn { background: none; border: 0; font-family: var(--font); font-size: 15px; font-weight: 700;
  color: var(--ink-2); cursor: pointer; padding: 8px 4px; }
.link-btn:hover { color: var(--ink); }
/* Starts hidden via the [hidden] attribute. V1's version rendered permanently. */
.form-err { background: #FDECEA; border: 1px solid #F3C2BD; color: #8C1D18; padding: 14px 16px;
  border-radius: var(--r-sm); font-size: 15px; margin-top: 18px; }
.form-err a { color: #8C1D18; font-weight: 800; }

/* ---- Thank you ---------------------------------------------------------- */
.ty { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.ty-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; margin: 0 auto 24px; }
.ty-ic svg { width: 38px; height: 38px; }
.ty h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
.ty-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; text-align: left; }
.ty-next div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.ty-next b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ty-next p { font-size: 15px; color: var(--ink-2); margin-top: 8px; }

@media (max-width: 1000px) {
  .book-grid { grid-template-columns: 1fr; }
  .ty-next { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PROOF PAGE (/proof/) — four components the vocabulary above did not cover.
   Purely additive: nothing before this block is modified or overridden.
     1) .ledger*   the opening six-row table (scrolls sideways on small screens)
     2) .case*     the six case splits (layout itself is reused .adv-grid)
     3) .note      the honest-figures disclosure callout
     4) .wall*     the partner logo grid
   Gold discipline is the same as everywhere else: --fill only ever as a solid
   rule or fill, --accent for gold TEXT on light, --accent-hi for gold text on
   the dark bands. No gold text is ever set in --fill.
   ========================================================================== */

/* ---- 1) The Ledger ------------------------------------------------------ */
/* The table has four columns of real content, so below ~780px it scrolls
   inside its own container rather than crushing the figures column. */
.ledger-wrap { margin-top: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.ledger { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.ledger-cap { caption-side: top; text-align: left; padding: 20px 22px 0;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ledger th { text-align: left; padding: 16px 22px; background: var(--bg);
  border-bottom: 2px solid var(--line); font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ledger td { padding: 17px 22px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: var(--accent-soft); }
.ledger .biz a { font-weight: 800; color: var(--ink); border-bottom: 2px solid var(--fill); }
.ledger .biz a:hover { color: var(--accent); }
.ledger .fig { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ledger .fig span { display: block; margin-top: 5px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ledger-hint { display: none; font-size: 13px; color: var(--ink-2); margin-top: 12px; }
@media (max-width: 780px) { .ledger-hint { display: block; } }

/* ---- 2) Case splits ----------------------------------------------------- */
/* Layout is .adv-grid (already responsive). These rules only handle the
   heading scale, the figure pair, and the image frame. */
.case h2 { font-size: clamp(1.55rem, 2.9vw, 2.15rem); margin-top: 14px; text-wrap: balance; }
.case .lead { margin-top: 16px; }
.case-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-nums b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.case-nums span { display: block; margin-top: 9px; font-size: 13px; font-weight: 600;
  line-height: 1.35; color: var(--ink-2); }
.case-chan { margin-top: 20px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); }
.case-media img { width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
/* Alternate which side the artwork sits on, but only once the split is really
   two columns. Stacked, the text must always come first. */
@media (min-width: 1041px) { .case--rev .case-media { order: -1; } }
@media (max-width: 420px) { .case-nums { grid-template-columns: 1fr; } }

/* ---- 3) Honest-figures note --------------------------------------------- */
.note { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--fill);
  border-radius: var(--r-sm); padding: 22px 26px; margin: 36px auto 0; max-width: 84ch; }
.note b { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.note p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }

/* ---- 4) Partner wall ---------------------------------------------------- */
/* Every logo gets an identical box so the grid reads as a wall, not a jumble.
   object-fit keeps each mark at its own aspect ratio inside that box. */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px; margin-top: 46px; }
.wchip { display: flex; flex-direction: column; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 16px 18px; box-shadow: var(--shadow); }
.wchip img { width: 100%; height: 56px; object-fit: contain; margin-bottom: 15px; }
.wname { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.wcat { font-size: 12px; line-height: 1.35; color: var(--ink-2); margin-top: 6px; }
a.wchip { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
a.wchip .wcat { color: var(--accent); font-weight: 700; }
a.wchip:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--fill); }
@media (max-width: 560px) {
  .wall { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wchip { padding: 18px 12px 14px; }
}

/* ==========================================================================
   SERVICE PAGE IMAGERY  (added for /services/*)
   The split sections on the service pages pair a column of copy with a
   photograph. Nothing above styles a standalone image: .ch img is locked to
   the 210px channel tile and .owner-mini img is a 62px avatar. So this is the
   one addition, and it only borrows what the cards already use, a hairline,
   the shared radius, and the shared shadow. On the dark bands the hairline
   swaps to the dark line token so the edge does not glow.
   ========================================================================== */
.shot { width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.band-deep .shot, .deep .shot, .final .shot { border-color: var(--line-deep); }

/* ==========================================================================
   SEATS ON A DARK BAND — added for /services/print/
   .seats draws its rules with --line, a light hairline meant for the warm
   base. On a .band-deep surface seven of those rules read as bright stripes,
   so the list gets the dark-surface line token instead. Additive only:
   the original .seats rules are untouched and still govern light sections.
   ========================================================================== */
.band-deep .seats, .band-deep .seats li { border-color: var(--line-deep); }

/* ==========================================================================
   DARK-SURFACE GAPS ON .page-hero — added for /services/websites/
   .page-hero is a dark surface, but two rules far above list their dark
   surfaces explicitly (.band-deep, .deep, .hero, .final) and .page-hero is in
   neither list. /book/ never hit this because its hero carries no ghost
   button and no .micro line. Any interior page with a secondary hero CTA drew
   a dark-on-dark, invisible label, and a hero .micro line fell back to the
   light-surface ink at roughly 2:1 on midnight. Both get the same treatment
   the other dark surfaces already get, declared later in the cascade so they
   win without editing either original rule.
   ========================================================================== */
.page-hero .btn--ghost { color: var(--ink-on-deep); border-color: rgba(255,255,255,.34); }
.page-hero .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.page-hero .micro { color: var(--ink-2-deep); }

/* ==========================================================================
   WIDE CROP FOR .shot — added for /services/websites/
   Extends the .shot image treatment defined above rather than duplicating it.
   The library photography is 4:3, so a .shot running the full 1200px content
   width would stand ~900px tall. .shot--wide crops it to a banner instead.
   ========================================================================== */
.shot--wide { aspect-ratio: 16 / 7; object-fit: cover; }
@media (max-width: 640px) { .shot--wide { aspect-ratio: 16 / 10; } }

/* ==========================================================================
   LEGAL PROSE + ABOUT
   ========================================================================== */
.legal { max-width: 760px; margin-inline: auto; }
.legal h2 { font-size: 1.35rem; margin-top: 38px; }
.legal p, .legal li { color: var(--ink-2); font-size: 16px; margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 20px; list-style: disc; }
.legal li { margin-top: 9px; }
.legal a { color: var(--accent); font-weight: 700; }
.legal .updated { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.legal .fineprint { font-size: 13px; color: var(--ink-2); opacity: .8; margin-top: 32px; }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.tmember { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; text-align: center; box-shadow: var(--shadow); }
.tmember img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; }
.tmember b { display: block; font-size: 15.5px; font-weight: 800; }
.tmember span { display: block; font-size: 13px; color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-top: 5px; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }

/* ==========================================================================
   SIGNATURE TOUCHES
   Premium here means restraint plus precision, not ornament. Five small things:
   a gold sheen across the hero highlight, counting stats, a scroll hairline,
   refined card edges, and a subtle gold grain on the dark bands.
   Every one degrades to a calm static state under prefers-reduced-motion.
   ========================================================================== */

/* 1. Gold sheen. Runs once, 2.4s, then rests as solid gold. Gold Country, lit. */
.hero h1 .hl {
  background-image: linear-gradient(100deg,
    var(--accent-hi) 0%, var(--accent-hi) 42%, #FFF2CF 50%, var(--accent-hi) 58%, var(--accent-hi) 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 2400ms var(--ease) 500ms 1 forwards;
}
@keyframes sheen { to { background-position: -30% 0; } }

/* 2. Counting stats. Tabular figures so the width never jumps mid-count. */
.stat b, .big-n { font-variant-numeric: tabular-nums; }

/* 3. Scroll hairline. A thin gold rule that tracks progress. */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 90;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--fill), var(--fill-hi));
  box-shadow: 0 0 12px rgba(224,164,25,.55); }

/* 4. Refined edges. Cards pick up a gold hairline on hover instead of a shadow alone. */
.pill, .ch, .pcard, .tier, .aside-card, .tmember { border-color: var(--line); }
.pill:hover, .ch:hover, .tmember:hover { border-color: rgba(224,164,25,.55); }
.tier:not(.tier--best):hover { border-color: rgba(224,164,25,.55); transform: translateY(-3px);
  box-shadow: var(--shadow-lg); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }

/* 5. Gold grain. A barely-there wash so the dark bands read as depth, not flat black. */
.hero::before, .band-deep::before, .final::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(224,164,25,.10), transparent 62%),
    radial-gradient(900px 420px at 88% 108%, rgba(224,164,25,.07), transparent 60%);
}
.band-deep, .final { position: relative; }
.band-deep > *, .final > * { position: relative; z-index: 1; }

/* ==========================================================================
   DISCOVERY MODAL — the 15 minute booking invitation
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal-bd { position: absolute; inset: 0; background: rgba(8,12,18,.72);
  backdrop-filter: blur(6px); animation: fadeIn 260ms var(--ease) both; }
.modal-card { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
  background: var(--card); border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.45);
  animation: popIn 320ms var(--ease) both; }
.modal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--fill), var(--fill-hi), var(--fill)); }
.modal-head { padding: 34px 34px 22px; text-align: center; }
.modal-head .kicker { color: var(--accent); }
.modal-head h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-top: 10px; }
.modal-head p { color: var(--ink-2); font-size: 15.5px; margin-top: 12px; }
.modal-body { padding: 0 18px 18px; }
.modal-body iframe { width: 100%; min-height: 620px; border: 0; border-radius: 12px; display: block; }
.modal-foot { padding: 0 34px 26px; text-align: center; }
.modal-foot a { color: var(--accent); font-weight: 700; }
.modal-x { position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(18,22,28,.06); color: var(--ink); font-size: 22px; line-height: 1;
  display: grid; place-items: center; transition: background var(--dur) var(--ease); }
.modal-x:hover { background: rgba(18,22,28,.14); }
.modal-later { display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 14px; color: var(--ink-2); text-decoration: underline; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .hl { animation: none; background: none; -webkit-text-fill-color: var(--accent-hi); color: var(--accent-hi); }
  .modal-bd, .modal-card { animation: none; }
  .progress { display: none; }
}
@media (max-width: 560px) {
  .modal-head { padding: 30px 22px 18px; }
  .modal-foot { padding: 0 22px 22px; }
  .modal-body iframe { min-height: 560px; }
}

/* ==========================================================================
   HERO PLATFORM PARTNERS
   Sits under the stat strip. Brand marks stay in their own colors so they are
   recognized instantly; labels are white so they hold up on the dark hero.
   ========================================================================== */
.partners { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.partners-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #9AA7B4; margin-bottom: 14px; }
.partner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.partner-row li { display: flex; align-items: center; gap: 9px; }
.partner-row svg { width: 22px; height: 22px; flex: none; display: block; }
.partner-row span { font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: .01em; }
@media (max-width: 560px) {
  .partner-row { gap: 10px 18px; }
  .partner-row span { font-size: 13.5px; }
  .partner-row svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   WHO THIS WORKS FOR — self-identification. One highlighted "best fit" band
   plus the broader categories underneath.
   ========================================================================== */
.fitgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; }
.fit { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fit:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(224,164,25,.55); }
.fit h3 { font-size: 1.15rem; }
.fit p { font-size: 14.5px; color: var(--ink-2); margin-top: 10px; }
.fit-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; }
.fit-ic svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .fitgrid { grid-template-columns: 1fr; } }

/* Closing invitation on the who-this-works-for section */
.fit-cta { margin-top: 44px; text-align: center; background: var(--accent-soft);
  border: 1px solid rgba(224,164,25,.4); border-radius: var(--r); padding: clamp(28px, 3.6vw, 42px); }
.fit-cta h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); max-width: 22ch; margin-inline: auto; }
.fit-cta p { color: var(--ink-2); font-size: 16px; margin-top: 12px; max-width: 54ch; margin-inline: auto; }
.fit-cta .cta-row { margin-top: 24px; }
.fit-cta-note { font-size: 14px; color: var(--ink-2); margin-top: 20px; max-width: 58ch; margin-inline: auto; }

/* ==========================================================================
   JOURNAL — article index + article body
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.post { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(224,164,25,.55); }
.post-tag { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.post h3 { font-size: 1.3rem; margin-top: 10px; }
.post p { color: var(--ink-2); font-size: 15.5px; margin-top: 12px; flex: 1; }
.post .more { margin-top: 18px; font-weight: 700; font-size: 15px; color: var(--accent); }
.post--soon { background: transparent; box-shadow: none; border-style: dashed; }
.post--soon h3 { color: var(--ink-2); }

@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } }