/* ==========================================================================
   Western Reflections Publishing - redesign design system
   Converted from the Claude Design canvas artboards (WRP UI Mockups).

   The artboards carried every rule as an inline style attribute and swapped a
   map of CSS custom properties per breakpoint (desktop / tablet / mobile).
   Here those maps become real media queries on :root, so one stylesheet
   drives all three layouts instead of three copies of the markup.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Brand palette, straight from the artboards */
  --navy-900: #0B1728;
  --navy-800: #0D1A2E;
  --navy-700: #12233D;
  --navy-600: #16233F;
  --teal-700: #1D4A56;
  --green-600: #2F7F58;
  --green-500: #4AA373;
  --green-300: #7FC9A2;
  --cream: #FBFAF7;
  --cream-200: #F4F2ED;
  --mint-100: #E8F1EA;
  --ink: #58595B;
  --ink-muted: #8A8578;
  --ink-faint: #A5A199;
  --rule: rgba(18, 35, 61, .10);
  --rule-strong: rgba(18, 35, 61, .16);

  /* Fluid scale - desktop values. Overridden per breakpoint below. */
  --pad: clamp(20px, 4vw, 72px);
  --wrap: 1240px;
  --h1: 58px;
  --h2: 42px;
  --h3: 30px;
  --h4: 24px;
  --lead: 17px;
  --sy: 104px;          /* section rhythm */
  --heroy: 80px;
  --herogap: 72px;
  --herobasis: 520px;
  --navh: 104px;
  --logoh: 74px;
  --colgap: 48px;
  --ctapad: 40px;
  --railrows: 1;
  --loccol: 150px;
  --crow: 36px;
}

@media (max-width: 1024px) {
  :root {
    --pad: 40px; --h1: 46px; --h2: 36px; --h3: 30px; --h4: 24px; --lead: 16px;
    --sy: 80px; --heroy: 56px; --herogap: 48px; --herobasis: 100%;
    --navh: 84px; --logoh: 62px; --colgap: 34px; --ctapad: 32px; --crow: 24px;
  }
}

@media (max-width: 720px) {
  :root {
    --pad: 22px; --h1: 34px; --h2: 28px; --h3: 24px; --h4: 21px; --lead: 15.5px;
    --sy: 64px; --heroy: 40px; --herogap: 36px; --herobasis: 100%;
    --navh: 76px; --logoh: 46px; --colgap: 26px; --ctapad: 24px;
    --loccol: 130px; --crow: 16px;
  }
}

/* --- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }

/* The tab panes are toggled with the `hidden` attribute, but several of them
   also carry a layout class (.split sets display:flex), and a class selector
   beats the user-agent's [hidden] rule. Without !important every pane renders
   at once, stacked. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy-600);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--teal-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-600); }
img { max-width: 100%; }
input, textarea, select, button { font-family: inherit; }

h1, h2, h3, h4, .serif {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--navy-700);
  text-wrap: pretty;
}

h1 { font-size: var(--h1); line-height: 1.08; margin: 0 0 24px; }
h2 { font-size: var(--h2); line-height: 1.15; margin: 0 0 20px; }
h3 { font-size: var(--h3); line-height: 1.2;  margin: 0 0 14px; }
h4 { font-size: var(--h4); line-height: 1.25; margin: 0 0 12px; }
p  { line-height: 1.72; color: var(--ink); text-wrap: pretty; }

/* --- Layout primitives -------------------------------------------------- */
.wrap    { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.wrap-nr { max-width: 1200px; margin: 0 auto; padding-inline: var(--pad); }
.sec     { padding-block: var(--sy); }
.sec-sm  { padding-block: calc(var(--sy) * .62); }
.lead    { font-size: var(--lead); line-height: 1.72; color: var(--ink); max-width: 56ch; }

.eyebrow {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-600); font-weight: 600;
}
.eyebrow-muted { color: var(--ink-muted); }

.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green-500); flex: none; }
.vr  { width: 1px; height: 34px; background: rgba(18, 35, 61, .12); flex: none; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: linear-gradient(120deg, var(--navy-700), var(--teal-700) 60%, var(--green-600) 100%);
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  padding: 17px 32px; border-radius: 2px; transition: filter .25s;
}
.btn:hover { filter: brightness(1.18); color: #fff; }
.btn-sm { font-size: 13px; padding: 13px 22px; white-space: nowrap; }

.btn-ghost {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--teal-700);
  white-space: nowrap; border: 1px solid rgba(29, 74, 86, .35);
  border-radius: 2px; padding: 12px 18px; transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--green-600); color: var(--green-600); }

.btn-outline {
  display: inline-block; border: 1px solid rgba(18, 35, 61, .20); background: transparent;
  color: var(--navy-600); font-size: 14px; font-weight: 600;
  padding: 17px 32px; border-radius: 2px; cursor: pointer; transition: border-color .2s;
}
.btn-outline:hover { border-color: var(--navy-700); }

.btn-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg, var(--green-600), var(--green-500));
  color: var(--navy-900); font-size: 15px; font-weight: 700;
  padding: 16px 30px; border-radius: 999px; transition: filter .25s;
}
.btn-pill:hover { filter: brightness(1.12); color: var(--navy-900); }

/* --- Utility bar -------------------------------------------------------- */
.ubar {
  background: linear-gradient(96deg, var(--navy-800) 0%, var(--navy-700) 42%, var(--teal-700) 100%);
  color: rgba(255, 255, 255, .74); font-size: 12px;
}
.ubar-in {
  min-height: 42px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 24px;
}
.ubar-l, .ubar-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-width: 0; }
.ubar a { color: rgba(255, 255, 255, .74); }
.ubar a:hover { color: #fff; }
.ubar-phone { color: #fff !important; font-weight: 500; }
.ubar-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .18); }
.ubar-loc { display: flex; align-items: center; gap: 7px; }

@media (max-width: 720px) {
  .ubar-sep, .ubar-mail { display: none; }
  .ubar-in { justify-content: center; }
}

/* --- Header / nav ------------------------------------------------------- */
.hd {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 250, 247, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.hd-accent { height: 2px; background: linear-gradient(90deg, var(--navy-700), var(--teal-700) 40%, var(--green-500) 100%); }
.hd-in {
  min-height: var(--navh); display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 22px; padding-block: 10px;
}
.logo { flex: none; }
.logo img { height: var(--logoh); width: auto; display: block; }

.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-left: auto; min-width: 0;
  font-size: 13.5px; font-weight: 500; color: var(--navy-600);
}
.nav > a { color: var(--navy-600); }
.nav > a:hover { color: var(--teal-700); }
.nav-sep { width: 1px; height: 16px; background: rgba(18, 35, 61, .14); }

/* Mega-menu trigger. The artboard drove the underline off React state; here
   the .is-open class does it, toggled by wrp.js on hover/focus. */
.trig {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 0; border: 0; background: none;
  font-size: 13.5px; font-weight: 500; color: var(--navy-600);
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.trig .car { font-size: 9px; opacity: .5; transition: transform .2s; }
.trig.is-open { color: var(--teal-700); border-bottom-color: var(--green-500); }
.trig.is-open .car { transform: rotate(180deg); }

.hd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

.burger {
  display: none; margin-left: auto; border: 1px solid rgba(18, 35, 61, .15);
  background: transparent; border-radius: 2px; padding: 10px 12px; cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--navy-600); }
.burger span + span { margin-top: 4px; }

/* Hand over to the burger at 1100px. With a single CTA the desktop row fits
   comfortably down to about 1100px; below that it would be clipped rather than
   wrapped, because nothing in the row is allowed to wrap. */
@media (max-width: 1100px) {
  .nav, .hd-actions { display: none; }
  .burger { display: block; }
}

/* --- Mega menus --------------------------------------------------------- */
.mega {
  display: none; border-top: 1px solid var(--rule); background: #fff;
  box-shadow: 0 24px 48px -24px rgba(18, 35, 61, .22);
}
.mega.is-open { display: block; }
.mega-grid {
  padding-block: 34px 38px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px;
}
.mega-grid.cols-210 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 34px; }
.mega-h { font-family: Newsreader, serif; font-size: 17px; color: var(--navy-700); margin-bottom: 4px; }
.mega-h-row { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.mega-sub { font-size: 12px; color: var(--ink-muted); margin-bottom: 16px; }
.mega-links { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.mega-links a { color: var(--ink); }
.mega-links a:hover { color: var(--green-600); }
.mega-links.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px 20px; }

.mega-promo {
  margin-top: 24px; padding: 18px;
  background: linear-gradient(140deg, var(--cream-200), var(--mint-100));
  border-left: 2px solid var(--green-500);
}
.mega-promo-h { font-family: Newsreader, serif; font-size: 16px; color: var(--navy-700); margin-bottom: 6px; }
.mega-promo p { font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; }
.mega-cta { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green-600); }

.mega-dark {
  background: linear-gradient(150deg, var(--navy-700), var(--teal-700) 55%, var(--green-600) 100%);
  padding: 22px; color: #fff;
}
.mega-dark .mega-h { color: #fff; font-size: 19px; line-height: 1.35; margin-bottom: 16px; }
.mega-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 10.5px; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.mega-chips span { border: 1px solid rgba(255, 255, 255, .28); padding: 5px 8px; }

.mega-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); align-content: start;
}
/* The More panel holds eight cards across the full width: four and four, so it
   never ends on a half-empty row. Halving keeps that true on the way down. */
.mega-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .mega-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mega-card { background: #fff; padding: 18px; display: flex; gap: 12px; transition: background .2s; }
.mega-card:hover { background: #F2F7F3; }
.mega-card-t { display: block; font-family: Newsreader, serif; font-size: 16.5px; color: var(--navy-700); margin-bottom: 4px; }
.mega-card-d { display: block; font-size: 12.5px; line-height: 1.6; color: var(--ink-muted); }

/* --- Mobile drawer ------------------------------------------------------ */
.drawer {
  display: none; border-top: 1px solid var(--rule); background: #fff;
  padding: 20px var(--pad) 28px;
  max-height: calc(100vh - var(--navh)); overflow-y: auto;
}
.drawer.is-open { display: block; }
.drawer-links { display: flex; flex-direction: column; font-size: 16px; font-weight: 500; }
.drawer-links a {
  color: var(--navy-600); padding: 12px 0;
  border-bottom: 1px solid rgba(18, 35, 61, .07);
}
.drawer-links a:last-child { border-bottom: 0; }
.drawer .btn { width: 100%; margin-top: 18px; text-align: center; padding: 16px; }

/* --- Quote modal -------------------------------------------------------- */
.modal {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: rgba(13, 26, 46, .66); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 24px;
  overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal-box {
  background: var(--cream); max-width: 900px; width: 100%;
  display: flex; flex-wrap: wrap; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
  margin: auto;
}
.modal-aside {
  flex: 1 1 300px;
  background: linear-gradient(155deg, var(--navy-800), var(--navy-700) 45%, var(--teal-700) 100%);
  color: #fff; padding: 44px 38px;
}
.modal-aside h3 { color: #fff; font-size: 36px; line-height: 1.15; margin: 0 0 18px; }
.modal-aside p { font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); margin: 0 0 30px; }
.modal-aside .eyebrow { color: var(--green-300); margin-bottom: 16px; display: block; }
.modal-pts { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.modal-pts div { display: flex; gap: 10px; }
.modal-pts .tick { color: var(--green-300); }
.modal-body { flex: 1 1 320px; padding: 44px 38px; }
.modal-body h3 { font-size: 26px; margin: 0 0 8px; }
.modal-sub { font-size: 14px; color: var(--ink); margin-bottom: 28px; }
.modal-close {
  width: 100%; margin-top: 12px; border: 0; background: transparent;
  color: var(--ink-muted); font-size: 12.5px; cursor: pointer; padding: 8px;
}

/* --- Forms -------------------------------------------------------------- */
.field-stack { display: flex; flex-direction: column; gap: 12px; }
.field {
  border: 0; border-bottom: 1px solid rgba(18, 35, 61, .18); background: transparent;
  padding: 12px 2px; font-size: 14px; color: var(--navy-600); outline: none;
  transition: border-color .2s;
  width: 100%;
}
.field:focus { border-bottom-color: var(--green-600); }
.field::placeholder { color: var(--ink-faint); }
textarea.field { resize: none; }

.agree {
  display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 20px;
  font-size: 11.5px; line-height: 1.6; color: var(--ink-muted);
}
.agree input { margin-top: 2px; accent-color: var(--green-600); }
.agree a { color: var(--ink); text-decoration: underline; }

.submit {
  width: 100%; border: 0; cursor: pointer; border-radius: 2px;
  background: linear-gradient(120deg, var(--navy-700), var(--green-600));
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; padding: 17px;
  transition: filter .25s;
}
.submit:hover { filter: brightness(1.15); }

.form-card {
  flex: 1 1 380px; min-width: 0; background: #fff;
  border: 1px solid var(--rule); padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 30px 60px -40px rgba(18, 35, 61, .35);
}
.form-note {
  margin-top: 14px; font-size: 11.5px; line-height: 1.6;
  color: var(--ink-muted); text-align: center;
}
.form-ok {
  display: none; padding: 16px; margin-top: 16px;
  background: var(--mint-100); border-left: 2px solid var(--green-500);
  font-size: 13.5px; line-height: 1.6; color: var(--navy-700);
}
.form-ok.is-on { display: block; }

/* --- Footer ------------------------------------------------------------- */
.ft {
  background: var(--navy-900); color: rgba(255, 255, 255, .62);
  padding: var(--sy) var(--pad) 0;
}
.ft a { color: rgba(255, 255, 255, .62); }
.ft a:hover { color: var(--green-300); }
.ft-top {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
  justify-content: space-between; padding-bottom: 26px;
}
.ft-logo { height: var(--logoh); width: auto; display: block; filter: brightness(0) invert(1); opacity: .94; }
.ft-social { display: flex; gap: 10px; }
.ft-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .72); transition: background .2s, border-color .2s, color .2s;
}
.ft-social a:hover { background: var(--green-600); border-color: var(--green-500); color: #fff; }

.ft-contact {
  border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 16px 0; display: flex; flex-wrap: wrap; gap: 12px var(--crow);
  align-items: center; font-size: 13.5px;
}
.ft-contact span { display: flex; align-items: center; gap: 9px; }

.ft-cta {
  margin-top: 34px;
  background: linear-gradient(120deg, #14294A 0%, #16345A 52%, #1B4A5C 100%);
  border: 1px solid rgba(127, 201, 162, .22); border-radius: 14px; padding: var(--ctapad);
  display: flex; flex-wrap: wrap; gap: 36px; align-items: center; justify-content: space-between;
}
.ft-cta h2 { color: #fff; font-weight: 500; margin: 0 0 16px; }
.ft-cta p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .66); margin: 0; max-width: 46ch; }
.caret {
  display: inline-block; width: .42em; height: .86em; background: var(--green-500);
  vertical-align: -.08em; animation: wrpCaret 1.1s steps(1) infinite;
}
@keyframes wrpCaret { 50% { opacity: 0; } }

.ft-cols { display: flex; flex-wrap: wrap; gap: var(--colgap); padding: 40px 0 44px; }
.ft-col-h { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.ft-col-h span:last-child { font-size: 14.5px; font-weight: 700; color: #fff; }
.ft-col-links { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.ft-col-links.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 30px; }
.ft-divider { border-left: 1px solid rgba(255, 255, 255, .1); padding-left: var(--colgap); }
@media (max-width: 720px) { .ft-divider { border-left: 0; padding-left: 0; } }

/* Service/state picker rail */
.ft-rail-wrap { margin-top: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ft-rail-row { display: flex; align-items: center; gap: 14px; }
.rail-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .7); font-size: 14px; cursor: pointer; line-height: 1;
  transition: border-color .2s, color .2s;
}
.rail-btn:hover { border-color: var(--green-500); color: var(--green-300); }
.rail {
  flex: 1; min-width: 0; overflow-x: auto; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--railrows), auto); grid-auto-columns: max-content;
  gap: 10px; padding: 2px 0; scrollbar-width: none;
  /* Marquee: the track is duplicated in JS and scrolled continuously, so the
     scroll position must not snap or animate against the rAF loop. */
  scroll-behavior: auto; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.chip {
  display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  font-size: 12.5px; font-weight: 400; padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .68); transition: all .2s;
}
.chip:hover { border-color: rgba(127, 201, 162, .5); color: #fff; }
.chip .cdot { width: 4px; height: 4px; border-radius: 50%; flex: none; background: var(--green-500); }
.chip.is-on {
  font-weight: 600; background: var(--green-300); border-color: var(--green-300); color: var(--navy-900);
}
.chip.is-on .cdot { background: var(--navy-900); }

.ft-loc { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; }
.ft-loc-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; margin-bottom: 16px; }
.ft-loc-head strong { font-size: 14px; font-weight: 600; color: #fff; }
.ft-loc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--loccol), 1fr));
  gap: 10px 24px; font-size: 12.5px;
}
.ft-loc-grid a { display: flex; align-items: center; gap: 7px; }
.ft-loc-grid .cdot { width: 3px; height: 3px; border-radius: 50%; background: rgba(127, 201, 162, .6); flex: none; }

.ft-avail {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 26px 0;
  display: flex; flex-wrap: wrap; gap: 20px 34px; align-items: center;
}
.ft-avail-logos { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; opacity: .82; font-size: 13px; }

.ft-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center;
  justify-content: space-between; font-size: 12.5px; color: rgba(255, 255, 255, .5);
}
.ft-bottom-links { display: flex; flex-wrap: wrap; gap: 24px; }
.ft-bottom a { color: rgba(255, 255, 255, .5); }
.ft-bottom .brand { color: var(--green-300); }

/* --- Reusable page sections --------------------------------------------- */
.stats {
  background: linear-gradient(100deg, var(--navy-800) 0%, var(--navy-700) 45%, var(--teal-700) 100%);
  color: #fff; padding: clamp(48px, 5vw, 56px) var(--pad);
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 36px; }
.stat-n { font-family: Newsreader, serif; font-size: 38px; line-height: 1; color: #fff; }
.stat-l { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-top: 8px; }

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.card { background: #fff; padding: 34px 30px 38px; }
.card-icon {
  width: 46px; height: 46px; border: 1px solid rgba(74, 163, 115, .45);
  margin-bottom: 26px; display: flex; align-items: center; justify-content: center;
  color: var(--green-600);
}
.card h3 { font-size: 22px; margin: 0 0 12px; }
.card p { font-size: 14px; line-height: 1.7; margin: 0; }

.split { display: flex; flex-wrap: wrap; gap: var(--herogap); align-items: flex-start; }
.split > * { flex: 1 1 var(--herobasis); min-width: 0; }

.tick-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 30px; }
.tick-list span { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.tick-list .tick { color: var(--green-600); flex: none; }

/* Accordion (FAQ) - <details> replaces the artboard's React toggle state. */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  font-family: Newsreader, serif; font-size: 19px; color: var(--navy-700);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; color: var(--green-600); flex: none; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding: 0 0 24px; font-size: 14.5px; line-height: 1.75; color: var(--ink); max-width: 78ch; }

/* Scroll-reveal. JS adds .in; without JS the element is visible by default. */
[data-reveal] { opacity: 0; transform: translateY(20px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .caret { animation: none; }
}

/* Page hero for interior pages */
.phero {
  background: linear-gradient(100deg, var(--navy-800) 0%, var(--navy-700) 45%, var(--teal-700) 100%);
  color: #fff; padding: clamp(56px, 7vw, 92px) var(--pad);
}
.phero h1 { color: #fff; margin-bottom: 18px; }
.phero p { color: rgba(255, 255, 255, .72); font-size: var(--lead); max-width: 62ch; margin: 0; }
/* Most heroes carry one paragraph, so none ever needed separating. A directory
   hero carries two or three, and without this they run together as one block. */
.phero p + p { margin-top: 16px; }
.phero .eyebrow { color: var(--green-300); display: block; margin-bottom: 14px; }
/* Breadcrumb. One line at every width: the ancestors hold their width and the
   current page is the one that gives, ellipsised rather than wrapped. On a
   phone the earlier ancestors drop away instead of folding onto a second line.
   The separator is an ::after on each item except the last, so hiding an
   ancestor takes its slash with it and never leaves a leading one. */
.crumbs { font-size: 12px; color: rgba(255, 255, 255, .5); margin-bottom: 26px;
          display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.crumbs ol { display: flex; align-items: baseline; flex-wrap: nowrap; min-width: 0;
             list-style: none; margin: 0; padding: 0; }
.crumbs li { white-space: nowrap; min-width: 0; }
.crumbs li:not(:last-child)::after { content: "/"; opacity: .5; margin: 0 .5em; }
.crumbs li:last-child { overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--green-300); }
.crumbs [aria-current="page"] { color: rgba(255, 255, 255, .82); }
/* A kicker that is not already in the trail sits at the end of the same line. */
.crumbs-kicker { flex: none; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
                 color: var(--green-300); padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .18); }
/* On a light background the trail takes the page's ink instead of white. */
.crumbs-ink { color: var(--ink-muted); }
.crumbs-ink [aria-current="page"] { color: var(--navy-700); }
.crumbs-ink a:hover { color: var(--green-600); }
.crumbs-ink .crumbs-kicker { color: var(--green-600); border-left-color: var(--rule); }
@media (max-width: 640px) {
  .crumbs li:not(:nth-last-child(-n+2)) { display: none; }
  .crumbs-kicker { display: none; }
}

/* Demo ribbon - marks this build as a preview, not production. */
.demo-flag {
  background: #12233D; color: #7FC9A2; text-align: center;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 16px; font-weight: 600;
}

/* Service-page hero: intro column beside the stat rail (the rail drops under
   the copy once there is no room for both). */
.phero-in { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-end; }
.phero-stats {
  flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; gap: 26px;
  border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 34px;
}
@media (max-width: 900px) {
  .phero-stats { border-left: 0; padding-left: 0; }
}

/* --- Retailer logo row -------------------------------------------------- */
/* The logos are full-colour and dark-on-light, so each sits on its own white
   tile rather than being recoloured. That reads correctly on both the cream
   hero strip and the navy footer, and leaves the marks unmodified. */
.plat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.plat {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 5px; padding: 7px 12px;
  height: 40px; min-width: 84px;
  box-shadow: 0 1px 0 rgba(18, 35, 61, .06);
  transition: transform .2s;
}
.plat img { height: 24px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.plat:hover { transform: translateY(-2px); }
/* Apple Books ships as a square app icon, so it needs less width to read. */
.plat img[alt="Apple Books"] { max-width: 26px; }
@media (max-width: 720px) {
  .plat { height: 34px; padding: 6px 9px; min-width: 68px; }
  .plat img { height: 19px; max-width: 76px; }
}

/* --- Catalogue grids (library, portfolio) ------------------------------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.book-cover {
  aspect-ratio: 2/3; background: linear-gradient(160deg, #EFECE5, #DFDBD1);
  border: 1px solid rgba(18, 35, 61, .08);
}
/* Filter chips on a light ground reuse the footer chip, recoloured. */
.chip-light {
  border-color: var(--rule); background: #fff; color: var(--ink);
}
.chip-light:hover { border-color: var(--green-500); color: var(--navy-700); }
.chip-light.is-on { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.chip-light.is-on .cdot { background: var(--green-300); }

/* --- Event calendar rows ------------------------------------------------ */
.event-row {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
}
.event-date {
  flex: none; width: 78px; font-family: Newsreader, serif; font-size: 17px;
  color: var(--teal-700); letter-spacing: .02em;
}
@media (max-width: 560px) { .event-date { width: auto; } }

/* --- Focus ------------------------------------------------------------- */
/* Keyboard focus must stay visible, but the browser default outline sits
   awkwardly on the tab and chip buttons, so give it the brand ring instead.
   :focus-visible means pointer users do not see it on click. */
:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.step-tab:focus-visible, .chip:focus-visible { outline-offset: 1px; }

/* --- Header: one line, aligned to the body grid ------------------------
   The row is logo + seven nav items + one CTA inside the same 1240px measure
   the page content uses, which leaves roughly 20% headroom at desktop widths,
   so the artboard's 74px logo is kept. Nothing in the row may wrap: any future
   overflow should show up immediately rather than silently dropping an element
   onto a second line, which is what happened when the header carried two CTAs. */
.hd-in  { flex-wrap: nowrap; }
.nav    { flex: 0 1 auto; flex-wrap: nowrap; white-space: nowrap; gap: 10px 18px; }
.logo   { flex: none; }
.logo img { max-width: 100%; object-fit: contain; }
.hd-actions { flex: none; flex-wrap: nowrap; }

/* One step down between the burger breakpoint and full width. */
@media (max-width: 1300px) and (min-width: 1101px) {
  :root { --logoh: 62px; }
  .nav { gap: 10px 14px; font-size: 13px; }
  .trig { font-size: 13px; }
  .btn-sm { padding: 12px 18px; font-size: 12.5px; }
}

/* Below the burger breakpoint the row is only logo + burger. */
@media (max-width: 1100px) { :root { --logoh: 62px; } }
@media (max-width: 720px)  { :root { --logoh: 46px; } }

/* ==========================================================================
   Author tools
   ========================================================================== */
.phero-tool { padding-block: clamp(44px, 5vw, 64px); }

.tool { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.tool-main { flex: 1 1 460px; min-width: 0; }
.tool-side { flex: 1 1 300px; min-width: 0; position: sticky; top: calc(var(--navh) + 16px); }
@media (max-width: 900px) { .tool-side { position: static; } }

.panel { background: #fff; border: 1px solid var(--rule); padding: clamp(20px, 2.4vw, 28px); }
.panel + .panel { margin-top: 20px; }
.panel-h {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-600); font-weight: 600; margin-bottom: 16px;
}

/* Inputs ------------------------------------------------------------------ */
.tool-label {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 7px;
}
.tool-input, .tool-select, .tool-area {
  width: 100%; background: var(--cream); color: var(--navy-600);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 11px 12px; font-size: 14.5px; outline: none; transition: border-color .2s;
}
.tool-input:focus, .tool-select:focus, .tool-area:focus { border-color: var(--green-500); }
.tool-area { min-height: 260px; resize: vertical; line-height: 1.6; font-size: 14px; }
.tool-area.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.tool-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.tool-row + .tool-row { margin-top: 16px; }
.tool-field + .tool-field { margin-top: 16px; }

.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tool-btn {
  border: 0; cursor: pointer; border-radius: 2px; font-size: 13px; font-weight: 600;
  padding: 12px 20px; background: var(--navy-700); color: #fff; transition: filter .2s;
}
.tool-btn:hover { filter: brightness(1.25); }
.tool-btn.alt { background: transparent; color: var(--navy-700); border: 1px solid var(--rule); }
.tool-btn.alt:hover { border-color: var(--navy-700); filter: none; }
.tool-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

/* Results ----------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
             background: var(--rule); border: 1px solid var(--rule); }
.stat-cell { background: #fff; padding: 18px 16px; }
.stat-val  { font-family: Newsreader, serif; font-size: 26px; line-height: 1; color: var(--teal-700); }
.stat-key  { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
             color: var(--ink-muted); margin-top: 7px; }

.readout { display: flex; flex-direction: column; gap: 0; }
.readout-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.readout-row:last-child { border-bottom: 0; }
.readout-row b { font-family: Newsreader, serif; font-weight: 500; font-size: 18px; color: var(--navy-700); }
.readout-row .sub { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }

/* A meter for scores that sit on a scale (readability, blurb length). */
.meter { height: 6px; background: var(--cream-200); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.meter i { display: block; height: 100%; background: var(--green-500); transition: width .3s, background .3s; }
.meter i.warn { background: #C9922F; }
.meter i.over { background: #B4453C; }

.note {
  font-size: 12.5px; line-height: 1.65; color: var(--ink-muted);
  border-left: 2px solid var(--green-500); padding-left: 14px; margin-top: 18px;
}
.flag { border-left-color: #C9922F; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pill {
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--cream); color: var(--ink);
}
.pill.on   { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.pill.warn { background: #FBF2E1; border-color: #E4C889; color: #7A5A16; }
.pill.bad  { background: #FBECEA; border-color: #E5B5AF; color: #8C332B; }

.excerpt-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.excerpt {
  font-size: 13.5px; line-height: 1.7; color: var(--ink);
  background: var(--cream); border-left: 2px solid #C9922F; padding: 12px 14px;
}
.excerpt em { font-style: normal; color: var(--ink-muted); display: block; font-size: 11.5px; margin-top: 6px; }

.preview {
  background: #fff; border: 1px solid var(--rule); padding: 28px;
  font-family: 'Times New Roman', Times, serif; font-size: 15px; line-height: 2;
  max-height: 460px; overflow: auto;
}
.preview .tp { text-align: center; margin: 40px 0 60px; }
.preview .contact { text-align: left; line-height: 1.5; font-size: 14px; }
.preview p { margin: 0; text-indent: 2em; line-height: 2; }
.preview p.first { text-indent: 0; }
.preview .brk { text-align: center; text-indent: 0; margin: 12px 0; }

.empty { font-size: 13.5px; color: var(--ink-muted); font-style: italic; }

/* Checkbox rows, for the format and marketing options on the timeline. */
.tool-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 20px; }
.tool-check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.tool-check input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--green-600); }
.tool-check > span { color: var(--navy-600); }
.tool-check .sub { display: block; font-size: 11.5px; line-height: 1.6; color: var(--ink-muted); margin-top: 4px; }

/* The dated schedule. One row per milestone, ruled like the readout above. */
.tl-list { display: flex; flex-direction: column; }
.tl-row { display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.tl-row:first-child { padding-top: 0; }
.tl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tl-date { flex: none; width: 104px; }
.tl-date b { display: block; font-family: Newsreader, serif; font-weight: 500; font-size: 16.5px; color: var(--navy-700); }
.tl-date span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-top: 5px; }
.tl-body { flex: 1; min-width: 0; }
.tl-name { font-size: 14.5px; color: var(--navy-700); }
.tl-meta { font-size: 11.5px; color: var(--green-600); margin-top: 3px; }
.tl-note { font-size: 12.5px; line-height: 1.65; color: var(--ink-muted); margin-top: 6px; }
/* A date already behind you, and the parallel work that hangs off the chain. */
.tl-row.is-late .tl-date b { color: #B4453C; }
.tl-row.is-mark { border-left: 2px solid var(--green-500); padding-left: 16px; }
.tl-row.is-mark .tl-meta { color: #8A6A18; }
/* The highlighted launch row keeps its padding, which :last-child strips. */
.tl-row.is-launch, .tl-row.is-launch:last-child { background: var(--cream-200); padding: 15px 16px; border-left: 2px solid var(--navy-700); }
.tl-row.is-launch .tl-name { font-family: Newsreader, serif; font-size: 18px; }

/* --- Catalogue: books and authors ---------------------------------------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 20px; }
.book { display: flex; flex-direction: column; gap: 0; }
.book .book-cover {
  aspect-ratio: 2/3; width: 100%; object-fit: cover; display: block;
  background: linear-gradient(160deg, #EFECE5, #DFDBD1);
  border: 1px solid rgba(18, 35, 61, .10);
  transition: transform .25s, box-shadow .25s;
}
.book:hover .book-cover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(18, 35, 61, .45); }
/* Where the archive has no cover, set the title in the jacket area instead of
   showing an empty rectangle. */
.book-cover-none {
  display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center;
}
.book-cover-none span {
  font-family: Newsreader, serif; font-size: 15px; line-height: 1.3; color: #9A958A;
}
.book-title {
  font-family: Newsreader, serif; font-size: 15.5px; line-height: 1.35;
  color: var(--navy-700); margin-top: 12px;
}
.book-meta { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.book[hidden] { display: none !important; }

/* Author directory */
.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px;
               background: var(--rule); border: 1px solid var(--rule); }
.author-card { background: #fff; padding: 20px 22px; display: flex; gap: 14px; align-items: center; transition: background .2s; }
.author-card:hover { background: #F2F7F3; }
.author-card[hidden] { display: none !important; }
.mono {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy-700), var(--teal-700));
  color: #fff; font-family: Newsreader, serif; font-size: 16px; letter-spacing: .02em;
}
.mono.lg { width: 76px; height: 76px; font-size: 26px; }
.author-name { font-family: Newsreader, serif; font-size: 16.5px; color: var(--navy-700); line-height: 1.25; }
.author-count { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; }

/* Alphabet index */
.alpha { display: flex; flex-wrap: wrap; gap: 6px; }
.alpha button {
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  width: 32px; height: 32px; border-radius: 2px; cursor: pointer; font-size: 12.5px;
  transition: all .15s;
}
.alpha button:hover { border-color: var(--green-500); color: var(--navy-700); }
.alpha button.is-on { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.alpha button[disabled] { opacity: .3; cursor: default; }

/* Book detail */
.detail { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-start; }
.detail-cover { flex: 0 1 300px; min-width: 220px; }
.detail-cover img, .detail-cover .book-cover-none {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
  border: 1px solid var(--rule); box-shadow: 0 30px 60px -40px rgba(18, 35, 61, .5);
}
.detail-body { flex: 1 1 400px; min-width: 0; }
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
        background: var(--rule); border: 1px solid var(--rule); margin-top: 28px; }
.spec div { background: #fff; padding: 16px 18px; }
.spec dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.spec dd { margin: 6px 0 0; font-family: Newsreader, serif; font-size: 17px; color: var(--navy-700); }

/* Tools hub, grouped by the stage a book is at. Each group is a rail rather
   than a grid: the groups hold three and five tools, and an auto-fit grid
   strands the fifth card alone on a row of its own at every width. */
.tool-group + .tool-group { margin-top: clamp(48px, 5vw, 72px); }
.tool-group-top { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.tool-group-h { max-width: 620px; }
.tool-group-h h2 { font-size: clamp(24px, 2.4vw, 31px); margin: 0 0 10px; }
.tool-group-h p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-muted); }

.crsl-nav { display: flex; gap: 8px; flex: none; padding-bottom: 3px; }
.crsl-btn { width: 40px; height: 40px; flex: none; border: 1px solid var(--rule); background: #fff;
            color: var(--navy-700); cursor: pointer; border-radius: 50%; display: flex;
            align-items: center; justify-content: center;
            transition: border-color .2s, opacity .2s, color .2s; }
.crsl-btn:hover:not([disabled]) { border-color: var(--green-500); color: var(--green-600); }
.crsl-btn[disabled] { opacity: .28; cursor: default; }

/* A group of four or fewer is a plain row of exactly that many, so nothing is
   left over and nothing needs scrolling. --cols comes from the card count. */
.tool-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 22px; }
/* Four splits evenly at two across. Three does not, so it holds its row as long
   as the cards stay readable and then goes to one, never to a two plus one. */
@media (max-width: 940px) { .tool-cards[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tool-cards { grid-template-columns: 1fr; } }

/* --per is how many cards fill one view of a carousel. */
.tool-rail {
  --per: 4; --rail-gap: 22px;
  display: flex; gap: var(--rail-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tool-rail::-webkit-scrollbar { display: none; }
.tool-rail > .tool-card {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--rail-gap)) / var(--per));
  scroll-snap-align: start;
}
.tool-rail:focus-visible { outline: 2px solid var(--green-500); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) { .tool-rail { scroll-behavior: smooth; } }
@media (max-width: 1200px) { .tool-rail { --per: 3; } }
@media (max-width: 1040px) { .tool-rail { --per: 2; } }
/* Under the tablet breakpoint the next card peeks, which says swipe without
   a caption, and the arrows come off because the thumb is the control. */
@media (max-width: 680px) {
  .tool-rail { --per: 1.12; }
  .crsl-nav { display: none; }
  .tool-group-top { display: block; }
}
.tool-card { background: #fff; border: 1px solid var(--rule); padding: 26px 24px;
             display: flex; flex-direction: column; gap: 11px; transition: border-color .2s; }
.tool-card:hover { border-color: rgba(74, 163, 115, .55); }
.tool-card-i { width: 42px; height: 42px; border: 1px solid rgba(74, 163, 115, .45);
               display: flex; align-items: center; justify-content: center; color: var(--green-600); }
.tool-card-t { font-size: 20px; color: var(--navy-700); }
.tool-card-b { font-size: 14px; line-height: 1.7; margin: 0; flex: 1; }
.tool-card-f { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.tool-card-u { font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; }

/* Chapter balance chart. One ruled row a chapter, bar scaled to the longest. */
.cb-row { display: flex; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.cb-row:last-child { border-bottom: 0; }
.cb-n { flex: none; width: 26px; font-family: Newsreader, serif; font-size: 15px; color: var(--ink-muted); text-align: right; }
.cb-b { flex: 1; min-width: 0; }
.cb-t { font-size: 13px; color: var(--navy-700); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-bar { height: 7px; background: var(--cream-200); border-radius: 3px; overflow: hidden; }
.cb-bar i { display: block; height: 100%; background: var(--green-500); transition: width .3s; }
.cb-w { flex: none; width: 62px; text-align: right; font-family: Newsreader, serif; font-size: 15px; color: var(--navy-700); }
.cb-row.is-off .cb-bar i { background: #C9922F; }
.cb-row.is-off .cb-w { color: #8A6A18; }

/* Retailer button. Deliberately not dressed in Amazon's own branding: this is
   an outbound link from a publisher's site, not an Amazon storefront. */
.btn-amazon {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy-700); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  padding: 16px 26px; border-radius: 2px; border: 1px solid var(--navy-700);
  transition: background .2s, border-color .2s;
}
.btn-amazon:hover { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.btn-amazon svg { flex: none; opacity: .85; }

/* ------------------------------------------------------------------ */
/* Publishing directory (/publishing-directory/)                       */
/* ------------------------------------------------------------------ */
.dir-featured { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.dir-card { background: #fff; border: 1px solid var(--rule); padding: 24px 26px; }
.dir-card-h { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.dir-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px;
            margin: 0; font-size: 14px; line-height: 1.55; }
/* Two label-and-value pairs to a row, so four facts take two rows rather than
   four. Only in an entry's full-width foot: the featured card beside it is a
   320px column, where four columns would shred an address into one word a line. */
.dir-entry-foot .dir-meta { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.dir-meta dt { color: var(--ink-muted); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.dir-meta dd { margin: 0; color: var(--ink); }
/* The listings index travels with the listings and stops with them. A sticky
   grid item cannot leave its own grid, so the section's own layout is what
   holds it: no script decides where it stops. The index scrolls inside itself
   when there are more houses than fit the screen. */
.dir-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 38px; align-items: start; }
.dir-aside {
  position: sticky; top: calc(var(--navh) + 20px);
  max-height: calc(100vh - var(--navh) - 44px);
  overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
}
.dir-aside-h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
               color: var(--ink-muted); margin-bottom: 14px; }
.dir-jump { columns: 3; column-gap: 32px; list-style: none; padding: 0; margin: 0; font-size: 14px; }
.dir-aside .dir-jump { columns: 1; font-size: 13.5px; }
.dir-jump li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.dir-jump a { color: var(--navy-600); display: flex; gap: 8px; }
.dir-jump a span { color: var(--green-600); font-weight: 600; min-width: 2.2em; }
.dir-aside .dir-jump a { padding: 1px 0 1px 8px; margin-left: -10px;
                         border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.dir-aside .dir-jump a:hover { color: var(--green-600); }
/* The entry you are reading is marked, so a list of fifty keeps its place. */
.dir-aside .dir-jump a.is-here { color: var(--navy-800); font-weight: 600; border-left-color: var(--green-500); }
/* Stacked, the index becomes a panel above the listings. Fifty houses would
   push them off the screen, so it keeps a ceiling and scrolls inside it. */
@media (max-width: 1040px) {
  .dir-layout { grid-template-columns: 1fr; gap: 26px; }
  .dir-aside { position: static; max-height: 300px; overflow-y: auto;
               background: #fff; border: 1px solid var(--rule); padding: 20px 22px; }
  .dir-aside .dir-jump { columns: 2; }
}
@media (max-width: 620px) { .dir-aside .dir-jump { columns: 1; } }
/* A directory page carries fifty of these, so every row saved is saved fifty
   times. The quote button sits beside the name rather than under the contact
   details, which frees the details to run in two columns instead of five
   stacked rows, and the card loses roughly a third of its height. */
.dir-entry { background: #fff; border: 1px solid var(--rule); padding: clamp(22px, 2.4vw, 30px); margin-bottom: 16px; scroll-margin-top: 90px; }
.dir-entry-top { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.dir-entry-top .dir-cta { flex: none; margin-left: auto; }
.dir-entry-h { display: flex; align-items: baseline; gap: 14px; font-size: var(--h4); margin: 0; min-width: 0; }
.dir-num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-900); color: #fff; font-family: 'Public Sans', sans-serif; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.dir-entry-body p { font-size: 15px; line-height: 1.75; margin: 0 0 14px; max-width: 78ch; }
.dir-entry-body p:last-child { margin-bottom: 0; }
.dir-note { border-left: 2px solid var(--green-500); padding-left: 14px; font-size: 14px !important; color: var(--navy-600); }
.dir-rule { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }
.dir-entry-foot { display: block; }
.btn-outline.dir-cta { padding: 11px 20px; font-size: 13px; white-space: nowrap; }
@media (max-width: 620px) {
  .dir-entry-top { flex-wrap: wrap; gap: 14px; }
  .dir-entry-top .dir-cta { margin-left: 0; }
}
.dir-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.dir-svc-card { display: block; background: #fff; border: 1px solid var(--rule); padding: 24px; color: inherit; }
.dir-svc-card h4 { font-size: 19px; margin: 0 0 8px; }
.dir-svc-card p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; color: var(--ink); }
.dir-svc-go { color: var(--green-600); font-weight: 600; font-size: 13px; }
.dir-svc-card:hover { border-color: var(--green-600); }
.dir-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 34px; }
.dir-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.dir-links a { background: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; color: var(--navy-600); }
.dir-links a strong { font-weight: 600; }
.dir-links a span { font-size: 12.5px; color: var(--ink-muted); }
.dir-links a:hover { background: var(--cream-200); }
.dir-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0 26px; }
.dir-table th, .dir-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.55; }
.dir-table th { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.dir-table-wrap { overflow-x: auto; }
.dir-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; }
.dir-ledger div { background: #fff; border: 1px solid var(--rule); padding: 20px 22px; font-size: 14px; line-height: 1.65; }
.dir-ledger strong { display: block; font-family: Newsreader, serif; font-size: 18px; margin-bottom: 6px; }
.dir-ledger em { display: block; font-style: normal; font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; }
@media (max-width: 900px) { .dir-jump { columns: 2; } }
@media (max-width: 1000px) { .dir-entry-foot .dir-meta { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 600px) {
  .dir-jump { columns: 1; }
  .dir-meta, .dir-entry-foot .dir-meta { grid-template-columns: 1fr; gap: 2px 0; }
  .dir-meta dt { padding-top: 10px; }
}

/* ==========================================================================
   Author resources: guides and cluster hubs
   ========================================================================== */
.phero-guide p { max-width: 68ch; }
.phero-meta { margin-top: 22px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

.guide { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); align-items: flex-start; }
.guide-body { flex: 1 1 560px; min-width: 0; max-width: 72ch; }
/* The sidebar is sticky, but its contents and tool panels made it taller than
   the screen, so the offer of help at the foot of it was below the fold until
   about eighty per cent of the way down a ten thousand pixel guide. The column
   now fits the screen and the panels above the offer scroll inside it, which
   keeps the offer in view the whole way down. */
.guide-side {
  flex: 0 1 300px; min-width: 0; position: sticky; top: calc(var(--navh) + 16px);
  max-height: calc(100vh - var(--navh) - 32px); display: flex; flex-direction: column; gap: 18px;
}
.guide-side-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0;
                     display: flex; flex-direction: column; gap: 18px; padding-right: 2px; }
.guide-side > .guide-cta { flex: none; }
@media (max-width: 980px) {
  .guide-side { position: static; flex-basis: 100%; max-height: none; display: block; }
  .guide-side-scroll { overflow: visible; display: block; }
  .guide-side-scroll > .panel { margin-bottom: 18px; }
}

/* Prose. The global reset strips list bullets and paragraph rhythm, so the
   guide column restores what an article needs. */
.guide-body p, .guide-lead p { font-size: 16.5px; line-height: 1.8; margin: 0 0 20px; color: var(--ink); }
.guide-lead p { font-size: 17px; max-width: 72ch; }
.guide-body a, .guide-lead a { color: var(--teal-700); text-decoration: underline; text-decoration-color: rgba(29, 74, 86, .35); text-underline-offset: 3px; }
.guide-body a:hover, .guide-lead a:hover { color: var(--green-600); text-decoration-color: currentColor; }
.guide-body strong { color: var(--navy-700); font-weight: 600; }
.guide-sec { padding-top: 34px; margin-top: 30px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--navh) + 20px); }
.guide-sec .eyebrow { margin-bottom: 12px; }
.guide-sec h2 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.2; margin: 0 0 18px; }
.guide-sec h3 { font-size: 20px; line-height: 1.3; margin: 30px 0 12px; color: var(--navy-700); }
.guide-body ul, .guide-body ol { margin: 0 0 22px; padding-left: 22px; }
.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }
.guide-body li { font-size: 16px; line-height: 1.7; margin-bottom: 9px; padding-left: 4px; }
.guide-body li::marker { color: var(--green-600); }
.guide-fig { margin: 34px 0; }
.guide-fig img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.guide-close { background: var(--cream-200); border-top: 0; padding: 30px 28px 14px; margin-top: 40px; }
.guide-body .faq details > div { max-width: none; }

.guide-toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.guide-toc li { counter-increment: toc; display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 1.5; }
.guide-toc li:last-child { border-bottom: 0; }
.guide-toc li::before { content: counter(toc, decimal-leading-zero); font-family: Newsreader, serif; color: var(--green-600); flex: none; width: 22px; }
.guide-toc a { color: var(--navy-700); }
.guide-toc a:hover { color: var(--green-600); }
.guide-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.guide-links a { color: var(--navy-700); }
.guide-links a:hover { color: var(--green-600); }
.guide-links .mega-cta { margin-top: 6px; }
.guide-cta { background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-700) 60%, var(--green-600) 190%); border: 0; color: #fff; }
.guide-cta p { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .78); margin: 0 0 18px; }

/* The five stages on the resources front door: a numbered, ruled journey. */
.stages { border-top: 1px solid var(--rule); }
.stage { display: flex; flex-wrap: wrap; gap: 18px 28px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.stage-n { flex: none; width: 46px; height: 46px; border: 1px solid rgba(74, 163, 115, .45); display: flex; align-items: center; justify-content: center;
           font-family: Newsreader, serif; font-size: 22px; color: var(--green-600); }
.stage-body { flex: 1 1 420px; min-width: 0; }
.stage-body h3 { font-size: 24px; margin: 4px 0 8px; }
.stage-body h3 a { color: var(--navy-700); }
.stage-body h3 a:hover { color: var(--green-600); }
.stage-body p { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0 0 12px; max-width: 64ch; }
.stage-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }
.stage-links a { color: var(--teal-700); text-decoration: underline; text-decoration-color: rgba(29, 74, 86, .3); text-underline-offset: 3px; }
.stage-links a:hover { color: var(--green-600); }
.stage-go { flex: none; align-self: center; }
@media (max-width: 720px) { .stage-go { align-self: flex-start; margin-left: 74px; } }

/* Live-content pages: the service icons come across as the live site's own SVGs
   with no colour set, so they take the card's green via currentColor. */
.card-icon.live-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Pictogram tile: the live site's process/step graphics are ~60px icons. Setting
   them in a calm cream tile at 2x keeps them crisp instead of stretching a
   59px file across a 600px photo slot. */
.picto-tile {
  aspect-ratio: 3/2; width: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--cream-200), var(--mint-100)); border: 1px solid var(--rule);
}
.picto-tile img { width: 118px; height: 118px; image-rendering: auto; opacity: .92; }
.picto-sm { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
            background: var(--cream-200); border: 1px solid var(--rule); margin-bottom: 16px; }
.picto-sm img { width: 36px; height: 36px; }

/* ==========================================================================
   Polish layer. Restraint is the brief: every effect is transform/opacity
   only, eased out over 300–700ms, and switched off under reduced motion.
   ========================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }
html { scroll-behavior: smooth; }
::selection { background: var(--green-300); color: var(--navy-900); }
h1, h2, h3, .serif { font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; text-rendering: optimizeLegibility; }

/* Footer typewriter word: gradient-filled, as on the live site */
.type-word {
  background: linear-gradient(100deg, var(--green-500), var(--green-300));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* Header settles a shadow once scrolled */
.hd { transition: box-shadow .5s var(--ease), background-color .5s var(--ease); }
.hd.is-scrolled { box-shadow: 0 10px 30px -18px rgba(18, 35, 61, .35); background: rgba(251, 250, 247, .97); }

/* Mega menus and drawer arrive, rather than appear */
@keyframes wrpDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega.is-open, .drawer.is-open { animation: wrpDrop .35s var(--ease) both; }

/* Modal: fade the backdrop, lift the card */
@keyframes wrpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wrpLift { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.modal.is-open { animation: wrpFade .3s var(--ease) both; }
.modal.is-open .modal-box { animation: wrpLift .5s var(--ease) both; }

/* Buttons: a quiet lift and a slow sheen on hover */
.btn, .btn-pill, .btn-amazon, .submit, .tool-btn, .btn-outline, .btn-ghost {
  position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.btn:hover, .btn-pill:hover, .btn-amazon:hover, .submit:hover, .tool-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -16px rgba(18, 35, 61, .55); }
.btn::after, .btn-pill::after, .btn-amazon::after, .submit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn:hover::after, .btn-pill:hover::after, .btn-amazon:hover::after, .submit:hover::after { transform: translateX(120%); }

/* Cards lift; the green rule warms */
.card, .author-card, .mega-card, .book, .stat-cell, .panel {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background-color .3s var(--ease);
}
.card:hover, .author-card:hover, .panel:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(18, 35, 61, .35); border-color: rgba(74, 163, 115, .45); }
.book:hover .book-cover { transform: translateY(-5px) scale(1.015); }

/* Prose links: a drawn underline instead of a hard one */
p a, .lead a, .faq a, li a:not(.chip):not(.btn):not(.crumb-link) {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 100% 1px; background-position: 0 100%; transition: background-size .35s var(--ease), color .2s;
}
p a:hover, .lead a:hover, .faq a:hover { background-size: 0 1px; background-position: 100% 100%; }

/* Chips and pills */
.chip, .pill, .alpha button { transition: transform .3s var(--ease), background-color .3s, border-color .3s, color .3s; }
.chip:hover, .pill:hover { transform: translateY(-1px); }

/* Dark bands (heroes, stats, CTAs): a soft green bloom and a hairline of light */
.phero, .stats, .ft-cta { position: relative; isolation: isolate; }
.phero::before, .stats::before, .ft-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 80% at 88% 10%, rgba(74, 163, 115, .16), transparent 60%);
}
.phero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); }

/* Section photos: an unhurried settle on hover */
.split img, .detail-cover img, .picto-tile { transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.split > div:hover > img { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(18, 35, 61, .45); }

/* Reveal: a touch slower and softer than before */
[data-reveal].in { transition-duration: .9s, .9s; }

/* Thin scrollbar on browsers that allow it */
* { scrollbar-width: thin; scrollbar-color: rgba(18, 35, 61, .25) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(18, 35, 61, .22); border-radius: 8px; }

/* Focus ring stays clear on dark bands */
.phero :focus-visible, .stats :focus-visible, .ft :focus-visible { outline-color: var(--green-300); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn::after, .btn-pill::after, .btn-amazon::after, .submit::after { display: none; }
}

/* Card grids: the hairline "1px gaps over a grey ground" treatment shows a grey
   slab wherever the card count does not fill the last row (seven cards in five
   columns). Draw the hairline on each card instead, over a transparent gap, so
   a short last row simply ends. Columns are wider so bodies of copy breathe. */
.cards {
  gap: 16px; background: transparent; border: 0;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.card { border: 1px solid var(--rule); border-radius: 2px; }
.split-media img{object-fit:cover;}
/* Hero proof stats: always one row. The cells carry an inline flex-basis of
   150px from the templates, which wrapped the third stat under the first two;
   equal fluid columns keep the three together and let a long label wrap inside
   its own cell instead. Only very narrow phones fall back to wrapping. */
.phero-stats { flex: 1 1 460px; flex-wrap: nowrap; gap: 28px; align-items: flex-start; }
.phero-stats > div { flex: 1 1 0 !important; min-width: 0; }
.phero-stats > div > div:last-child { line-height: 1.45; }
@media (max-width: 480px) { .phero-stats { flex-wrap: wrap; } .phero-stats > div { flex: 1 1 120px !important; } }

/* FAQ aside: the eyebrow, heading and button stay in view while the accordion
   scrolls, and release when the section ends. Two-column widths only; on a
   phone the column stacks above the questions and a stuck heading would only
   steal reading room. The offset clears the sticky header. */
@media (min-width: 900px) {
  .faq-aside { position: sticky; top: calc(var(--navh) + 28px); align-self: flex-start; }
}

/* Split-section media: the photo column pins under the header while the
   longer text column scrolls past it, and lets go at the section's end. Same
   rule as the FAQ aside, and likewise only at two-column widths. */
@media (min-width: 900px) {
  .split-media { position: sticky; top: calc(var(--navh) + 28px); align-self: flex-start; }
}

/* --- Inner-page hero: masonry of three real covers/photos over the stats ---- */
.phero-side { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 30px; align-self: stretch; justify-content: flex-end; }
.phero-side .phero-stats { flex: none; }
.phero-in { align-items: stretch; }
.phero-gallery {
  display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px;
  max-width: 500px; margin-left: auto; align-self: flex-end;
}
.phero-gallery .tile {
  position: relative; overflow: hidden; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.phero-gallery .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero-gallery .t1 { grid-row: 1 / 3; aspect-ratio: 3 / 4; }
.phero-gallery .t2, .phero-gallery .t3 { aspect-ratio: 4 / 3.3; }
/* the staggered second column is what makes it read as masonry rather than a grid */
.phero-gallery .t2 { transform: translateY(22px); }
.phero-gallery .t3 { transform: translateY(22px); }
.phero-gallery .tile:hover { transform: translateY(-4px); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .7); }
.phero-gallery .t2:hover, .phero-gallery .t3:hover { transform: translateY(18px); }
/* a faint glass rim on the top edge, in keeping with the hero's hairline */
.phero-gallery .tile::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 30%); }
@media (max-width: 900px) {
  .phero-side { align-self: auto; }
  .phero-gallery { max-width: none; margin-left: 0; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 10px; }
  .phero-gallery .t1 { grid-row: auto; aspect-ratio: 3 / 4; }
  .phero-gallery .t2, .phero-gallery .t3 { aspect-ratio: 3 / 4; transform: none; }
  .phero-gallery .t2:hover, .phero-gallery .t3:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .phero-gallery .tile, .phero-gallery .t2, .phero-gallery .t3 { transform: none !important; } }
/* room for the 22px stagger so the lower tile never meets the stats */
.phero-gallery { padding-bottom: 22px; }

/* --- Decks: a run of cards is a grid only when it fills every row ----------
   Four columns is the measure a card was drawn for, so four or fewer sit in a
   row of exactly that many, and an exact multiple of four fills complete rows.
   Any other count would leave a hole in the last row, so the deck becomes a
   carousel instead and no section ever ends on a half-empty row. The look of
   the cards comes from the class beside .deck (.cards, .steps, .dir-svc...). */
.deck { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
/* Halving keeps every row full on the way down: four goes to two, never to a
   three plus one, and three goes straight to one rather than a two plus one. */
@media (max-width: 1040px) { .deck[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .deck[data-cols="3"] { grid-template-columns: 1fr; } }
/* The [data-cols] rules above out-rank a bare .deck, so the single-column
   state has to match their specificity or it never applies. */
@media (max-width: 600px)  { .deck, .deck[data-cols] { grid-template-columns: 1fr; } }

/* --per is how many cards fill one view of the carousel. */
.deck-rail {
  --per: 4; --deck-gap: 16px;
  display: flex; gap: var(--deck-gap); padding-bottom: 6px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.deck-rail::-webkit-scrollbar { display: none; }
.deck-rail > * { flex: 0 0 calc((100% - (var(--per) - 1) * var(--deck-gap)) / var(--per)); min-width: 0; scroll-snap-align: start; }
.deck-rail:focus-visible { outline: 2px solid var(--green-500); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) { .deck-rail { scroll-behavior: smooth; } }
@media (max-width: 1200px) { .deck-rail { --per: 3; } }
@media (max-width: 1040px) { .deck-rail { --per: 2; } }
/* Under the tablet breakpoint the next card peeks, which says swipe without a
   caption, and the arrows come off in favour of the thumb. */
@media (max-width: 680px)  { .deck-rail { --per: 1.12; } .deck-nav { display: none; } }
.deck-nav { justify-content: flex-end; margin: -18px 0 22px; }

/* --- Step cards ------------------------------------------------------------
   These were four bare columns under a green rule, with the pictogram floating
   above the rule in a tile of its own. Text of unequal length then ran to
   unequal depths with nothing holding it, and a title that wrapped to two lines
   pushed its body out of line with the rest of the row. Three fixes: the card
   is a real surface so the ragged ends sit inside something; the pictogram
   moves inside it; and the title reserves two lines so every body in a row
   starts on the same line whatever the headings do. */
.steps { --deck-gap: 18px; row-gap: 18px; column-gap: 18px; }
.step {
  min-width: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--green-500);
  border-radius: 2px; padding: 24px 22px 26px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.step:hover { border-color: rgba(74, 163, 115, .5); box-shadow: 0 22px 38px -30px rgba(18, 35, 61, .32); transform: translateY(-2px); }
/* The pictogram belongs to the card now, tinted to the palette rather than
   sitting in a pale tile of its own. */
.step .picto-sm { width: 44px; height: 44px; margin-bottom: 16px; flex: none;
                  background: var(--mint-100); border-color: rgba(74, 163, 115, .32); border-radius: 2px; }
.step .picto-sm img { width: 26px; height: 26px; }
.step-b { display: flex; flex-direction: column; flex: 1; }
.step-k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--green-600); margin-bottom: 9px; }
.step-t { font-size: 18px; line-height: 1.3; margin-bottom: 10px; color: var(--navy-700); }
/* Where a deck has a title long enough to wrap, every title reserves two lines
   so the bodies still start together. Decks of short titles reserve nothing. */
.steps-align .step-t { min-height: 2.6em; }
/* A call to action sits on the card's floor, so a row of them lines up. */
.step-cta { margin-top: auto; padding-top: 16px; }
.step p { font-size: 13.5px; line-height: 1.72; margin: 0; }
.picto-num { font-family: Newsreader, Georgia, serif; font-size: 22px; letter-spacing: .04em; color: var(--navy-700); }
/* A card that leads with a photograph lets it run to the card's own edges. */
.step-img { width: calc(100% + 44px); margin: -24px -22px 18px; aspect-ratio: 3 / 2; object-fit: cover;
            display: block; border: 0; border-bottom: 1px solid var(--rule); background: var(--cream-200); }
/* A card with no copy under the title reserves nothing, and neither does a
   single-column stack, where there is no row left to align to. */
.steps-align .step-lean .step-t { min-height: 0; }
.step-lean .step-t { margin-bottom: 0; }
.step-lean { padding-bottom: 20px; }
@media (max-width: 600px) { .step-t { min-height: 0; } }
/* Components whose own gap differs from the deck default. */
.dir-svc, .dir-ledger { --deck-gap: 18px; }
/* A rail that travels on its own can neither snap nor ease: both fight a
   position written every frame. The arrows are eased in JS instead. */
.deck-rail.is-auto, .tool-rail.is-auto { scroll-snap-type: none; scroll-behavior: auto; }
/* A card sliced flat at the edge reads as a broken layout rather than as
   travel, so both ends of a moving rail are faded out instead of cut. */
.deck-rail.is-auto, .tool-rail.is-auto {
  --fade: 52px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
@media (max-width: 680px) { .deck-rail.is-auto, .tool-rail.is-auto { --fade: 16px; } }

/* --- Content-only section: a prose block with no photograph beside it ------
   Left in a 1240px measure it leaves half the page empty, so the column is
   centred and the copy is centred with it. The rule before the eyebrow and
   any tick list have to be centred by hand, since neither inherits it. */
.prose-only { max-width: 76ch; margin-inline: auto; text-align: center; }
.prose-only .lp-eyebrow { justify-content: center; }
/* Centring each tick row scatters the check marks, so the list keeps its own
   left edge inside the centred column and the marks line up per column. */
.prose-only .tick-list { justify-items: start; }
.prose-only .tick-list > span { text-align: left; }

/* A long content section takes a photograph on the left and the copy on the
   right. The copy still comes first in the markup so the heading leads when the
   columns stack, so the photograph is moved by order, not by markup. */
@media (min-width: 900px) { .split-media-left { order: -1; } }

/* The homepage shelf of covers. Six a row, and every step down still divides
   the twelve cells exactly, so the shelf never ends on a short row. */
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Directory entries: the rest of a long description opens on request, so a
   fifty-house list can be scanned. Native <details>, so it needs no script. */
.dir-more { margin-top: 10px; }
.dir-more > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--green-600);
}
.dir-more > summary::-webkit-details-marker { display: none; }
.dir-more > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .25s var(--ease);
}
.dir-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dir-more > summary:hover { color: var(--navy-700); }
.dir-more > summary:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; border-radius: 2px; }
.dir-more > p:first-of-type { margin-top: 12px; }

/* --- Rate tables ------------------------------------------------------------
   A price list is a table and should be one: it is read by column, compared by
   row, and a screen reader needs the headers. On a phone a four-column table
   cannot be squeezed, so each row becomes a small block with its own labels
   rather than a horizontal scroll nobody discovers. */
.rate-wrap { border: 1px solid var(--rule); background: #fff; }
.rate { width: 100%; border-collapse: collapse; font-size: 14px; }
.rate thead th {
  text-align: left; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600; padding: 14px 20px; border-bottom: 1px solid var(--rule);
  background: var(--cream-200);
}
.rate tbody tr + tr { border-top: 1px solid var(--rule); }
.rate tbody tr:hover { background: var(--mint-100); }
.rate th[scope="row"] { text-align: left; font-family: Newsreader, Georgia, serif; font-size: 17px;
                        font-weight: 400; color: var(--navy-700); padding: 18px 20px; width: 23%; }
.rate td { padding: 18px 20px; vertical-align: top; color: var(--ink); }
.rate-n { font-weight: 600; color: var(--navy-800); white-space: nowrap; width: 15%; }
.rate-x { color: var(--ink-muted); white-space: nowrap; width: 17%; }
.rate-d { line-height: 1.65; }
@media (max-width: 860px) {
  .rate, .rate tbody, .rate tr, .rate th, .rate td { display: block; }
  .rate thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rate tbody tr { padding: 18px 20px; border-top: 1px solid var(--rule); }
  .rate tbody tr:first-child { border-top: 0; }
  .rate th[scope="row"] { width: auto; padding: 0 0 4px; font-size: 19px; }
  .rate td { padding: 0; width: auto; white-space: normal; }
  /* .rate td above is more specific than a bare .rate-n, so the price and the
     worked example need the same weight to sit on one line. */
  .rate .rate-n, .rate .rate-x { display: inline-block; }
  .rate .rate-x:not(:empty)::before { content: "\00b7"; margin: 0 7px; color: var(--ink-muted); }
  .rate .rate-x:empty { display: none; }
  .rate .rate-d { display: block; margin-top: 8px; }
}

/* Covers shown to be looked at rather than scanned: five a row, not as many as
   fit. Used by the portfolio and by an author's own books. The library keeps
   its denser grid, because browsing 196 books is a different job. */
.cover-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cover-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .cover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Every cover was being cropped, and nobody could see why from the stylesheet.
   .book .book-cover asks for aspect-ratio 2/3 but never sets height:auto, and
   the img tags carry width and height attributes. A dimension attribute is a
   presentational hint that computes to a real height, so height was not auto
   and the ratio could not apply: a cover sat in a box as tall as its file and
   as wide as its column, 160 by 300 on an author page, and object-fit:cover
   sliced the sides off. Covers were losing up to 27% of their width, which is
   how a title like "The 1776 Expedition of Dominguez and Escalante" lost its
   ending. One line hands the ratio back, everywhere at once. */
.book .book-cover { height: auto; }
/* And it crops with object-fit:cover, which is right for artwork that is
   already 2:3 and wrong for the ten covers in the catalogue that are landscape
   or square: an aerial geography of Colorado was showing half of itself. The
   tile keeps its 2:3 footprint so rows and captions still line up, but the
   cover is now fitted inside it and mounted on the cream ground rather than
   sliced. 136 of the 190 differ from 2:3 by under 5%, so almost nothing shows
   a band, and no title is ever cut off again. */
.book .book-cover { object-fit: contain; }

/* Screen-reader-only text: present for assistive technology, invisible on screen. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Tool next steps ---------------------------------------------------------
   The job that follows a tool, where we do not do it ourselves. It leaves the
   site, so it says so: the destination is named and an arrow marks the exit. */
.next-steps { border: 1px solid var(--rule); background: #fff; }
.next-h { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
          padding: 14px 22px; border-bottom: 1px solid var(--rule); background: var(--cream-200); }
.next-list { list-style: none; margin: 0; padding: 0; display: grid;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.next-list li + li { border-left: 1px solid var(--rule); }
.next-list a { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; height: 100%;
               color: inherit; text-decoration: none; transition: background-color .2s; }
.next-list a:hover { background: var(--mint-100); }
.next-list a:focus-visible { outline: 2px solid var(--green-500); outline-offset: -2px; }
.next-t { font-family: Newsreader, Georgia, serif; font-size: 18px; color: var(--navy-700); }
.next-d { font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.next-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 5px;
           font-size: 12.5px; font-weight: 600; color: var(--green-600); }
@media (max-width: 700px) {
  .next-list li + li { border-left: 0; border-top: 1px solid var(--rule); }
}

/* --- Client reviews ----------------------------------------------------------
   The live pages end on their reviews, and a review is only credible printed in
   full, so the cards grow with the quote rather than clamping it. Three to a row
   is the measure for a paragraph of quoted speech; three or six sit as complete
   rows and any other count runs as the shared carousel (inc/deck.php, max 3). */
.quotes { --deck-gap: 22px; gap: 22px; align-items: stretch; }
.quote-card { margin: 0; min-width: 0; background: var(--cream); border: 1px solid var(--rule);
              padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.quote-card p { font-size: 14.5px; line-height: 1.75; margin: 0; flex: 1; color: var(--ink); }
.quote-card cite { font-style: normal; font-size: 16px; color: var(--navy-700); }
.quote-stars { color: var(--green-600); font-size: 13px; letter-spacing: 2px; }

/* The live pages' "call us" line: phone, email and chat, in that order of
   directness. Separators are borders, so a wrapped row never starts on one. */
.lp-compose-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 26px; }
.lp-compose-acts a { font-size: 15px; font-weight: 600; color: var(--navy-700); text-decoration: none;
                     border-bottom: 1px solid rgba(18, 35, 61, .25); padding-bottom: 2px; }
.lp-compose-acts a:hover { border-bottom-color: var(--green-500); }

/* Blog cards: the picture bleeds to the card edges, a quiet meta line, then the
   headline as the link. The image is a duplicate link, so it is hidden from
   the tab order and from assistive technology. */
.blog-card { padding: 0 0 24px; overflow: hidden; display: flex; flex-direction: column; }
.blog-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-200); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 18px 22px 8px; font-size: 11px;
                  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.blog-card h3 { font-size: 19px; line-height: 1.35; margin: 0; padding: 0 22px; }
.blog-card h3 a { color: var(--navy-700); text-decoration: none; }
.blog-card h3 a:hover { color: var(--green-600); }

/* A lead form that could not send says so beside the button, with the phone
   number, rather than failing silently. */
.form-err { margin-top: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
            background: #FDECEA; color: #9B2C23; border-left: 2px solid #B4453C; }

/* The limited-time offer card in a dark hero (book publishing, non-fiction).
   One whole button, so the offer opens the quote form from anywhere on it. */
.hero-offer { display: grid; gap: 6px; margin-top: 28px; max-width: 520px; text-align: left; cursor: pointer;
              font: inherit; color: #fff; background: rgba(255, 255, 255, .06);
              border: 1px solid rgba(127, 201, 162, .45); border-left: 3px solid var(--green-500);
              border-radius: 2px; padding: 18px 22px; transition: background-color .2s, border-color .2s; }
.hero-offer:hover { background: rgba(255, 255, 255, .1); border-color: var(--green-500); }
.hero-offer:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }
.hero-offer-k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--green-300, #7FC9A2); font-weight: 600; }
.hero-offer-t { font-size: 24px; line-height: 1.2; color: #fff; }
.hero-offer-p { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .75); }
.hero-offer-go { font-size: 13px; font-weight: 600; color: var(--green-300, #7FC9A2); margin-top: 2px; }

/* --- Sitemap page ------------------------------------------------------------
   Long lists of links, set in columns so a group of thirty reads as a block
   rather than a scroll. Columns fall from four to one with the measure. */
.sm-h { font-size: 22px; margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; }
.sm-n { font-size: 11px; letter-spacing: .14em; color: var(--ink-muted); font-family: "Public Sans", sans-serif; }
.sm-list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 34px; }
.sm-list li { break-inside: avoid; margin: 0 0 9px; font-size: 14.5px; line-height: 1.5; }
.sm-list a { color: var(--navy-600); text-decoration: none; border-bottom: 1px solid transparent; }
.sm-list a:hover { color: var(--green-600); border-bottom-color: currentColor; }
@media (max-width: 1100px) { .sm-list { columns: 3; } }
@media (max-width: 820px)  { .sm-list { columns: 2; } }
@media (max-width: 560px)  { .sm-list { columns: 1; } }

/* --- Homepage process tabs ---------------------------------------------------
   The step tile used to be a 59px pictogram floated in the middle of an empty
   3:2 panel, which reads as an image that failed to load. Each step now carries
   a photograph of the stage it describes, with the pictogram kept as a badge so
   the icon language survives. */
.step-shot { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden;
             border: 1px solid var(--rule); background: var(--cream-200); }
.step-shot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-shot-badge { position: absolute; left: 0; bottom: 0; width: 66px; height: 66px;
                   display: flex; align-items: center; justify-content: center;
                   background: var(--cream); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.step-shot-badge img { width: 34px; height: 34px; }
@media (max-width: 600px) { .step-shot-badge { width: 54px; height: 54px; } .step-shot-badge img { width: 28px; height: 28px; } }

/* --- How to get a book -------------------------------------------------------
   A publisher should answer this plainly on its own catalogue page: direct
   first, the retailer second, and the ISBN so any bookshop can order it in. */
.buy-box { margin-top: 28px; border: 1px solid var(--rule); background: #fff; }
.buy-list { list-style: none; margin: 0; padding: 6px 22px 18px; display: grid; gap: 12px; }
.buy-list li { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.buy-k { flex: 0 0 116px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
         color: var(--ink-muted); padding-top: 3px; }
.buy-list a { color: var(--navy-600); border-bottom: 1px solid rgba(29, 74, 86, .3); }
.buy-list a:hover { color: var(--green-600); }
@media (max-width: 560px) { .buy-k { flex: 0 0 100%; padding-top: 0; } }

/* --- Book page: the cover stays with the reader -------------------------------
   The cover is the thing a reader is deciding on, so it holds its place while
   the details, the author's other books and the rest of the shelf scroll past,
   and it lets go at the foot of the section. Below 900px the two columns stack
   and nothing sticks, which is right on a phone. */
@media (min-width: 900px) {
  .detail-cover { position: sticky; top: calc(var(--navh) + 28px); align-self: flex-start; }
}
.book-more { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--rule); }
.book-grid-sm { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 24px 18px; }
.book-grid-sm .book-title { font-size: 14px; margin-top: 10px; }