/* ============================================================
   Crown Publishers UK — MAIN STYLESHEET
   Premium publishing brand · Navy + Crimson + Cream
   ============================================================ */

/* ============================================================
   PAGE-LOAD ANIMATIONS — fire once on first paint.
   GPU-accelerated (transform / opacity only).
   Disabled automatically for prefers-reduced-motion.
   ============================================================ */
@keyframes ukphFadeDown {
  from { opacity: 0; transform: translate3d(0, -18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ukphFadeUp {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ukphBookReveal {
  /* Animates the inner <img> only — the .hero-book wrapper keeps its
     position + rotation transform untouched. */
  from { opacity: 0; transform: translateY(20px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

@view-transition {
  navigation: auto;
}

/* ----- Utility bar + nav drop in from the top first ----- */
.util  { animation: ukphFadeDown .55s cubic-bezier(.2,.7,.2,1) both; }
nav.top { animation: ukphFadeDown .65s .05s cubic-bezier(.2,.7,.2,1) both; }

/* ----- Hero copy staggers in left-to-right ----- */
.hero .eyebrow-pill,
.hero .hero-title,
.hero .hero-sub,
.hero .hero-lede,
.hero .trust-badges,
.hero .hero-ctas {
  opacity: 0;
  animation: ukphFadeUp .8s cubic-bezier(.2,.7,.2,1) both;
}
.hero .eyebrow-pill { animation-delay: .25s; }
.hero .hero-title   { animation-delay: .35s; }
.hero .hero-sub     { animation-delay: .5s;  }
.hero .hero-lede:nth-of-type(1) { animation-delay: .6s; }
.hero .hero-lede:nth-of-type(2) { animation-delay: .7s; }
.hero .trust-badges { animation-delay: .85s; }
.hero .hero-ctas    { animation-delay: 1.0s; }

/* ----- Hero books reveal one-by-one (inner <img> only) ----- */
.hero-book img {
  opacity: 0;
  will-change: transform, opacity;
  animation: ukphBookReveal 1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-book.hb-left   img { animation-delay: .9s;  }
.hero-book.hb-center img { animation-delay: 1.15s; }
.hero-book.hb-right  img { animation-delay: 1.4s; }

/* About-page hero (animated bg) — copy fades up after the bg renders */
.about-hero .eyebrow-pill,
.about-hero h1,
.about-hero p,
.about-hero .about-hero-actions {
  opacity: 0;
  animation: ukphFadeUp .75s cubic-bezier(.2,.7,.2,1) both;
}
.about-hero .eyebrow-pill        { animation-delay: .2s; }
.about-hero h1                   { animation-delay: .35s; }
.about-hero p                    { animation-delay: .55s; }
.about-hero .about-hero-actions  { animation-delay: .75s; }

/* ----- AOS tuning — slightly snappier curve than default ----- */
[data-aos] {
  transition-timing-function: cubic-bezier(.2,.7,.2,1) !important;
}

/* ----- Reduced-motion safety net — skip every entrance animation ----- */
:root {
  --paper: #ffffff;
  --paper-2: #f4f7fa;
  --rule: #dde5ee;
  --text: #373737;
  --ink: #123254;
  --ink-deep: var(--ink);
  --ink-soft: var(--ink);
  --muted: #5f6b7d;
  --crimson: var(--gold);
  --crimson-deep: var(--gold);
  --gold: #dfb470;
  /* The brand runs on two colours only: --ink and --gold, straight from the
     logo. Every other slot below is an alias onto one of them, kept so the
     rules still read by intent. Note --gold is a mid-tone: it carries navy
     text (~7:1) but not white (~1.9:1), so anything filled with --gold takes
     --on-accent for its text. */
  --gold-deep: var(--gold);
  --accent-ink: var(--gold);
  --on-accent: var(--ink);
  --lilac: #e7edf5;
  --cream: #fbf6ed;
  /* Heading face. Every heading rule in this file resolves through --serif, so
     --serif is kept as an alias rather than rewriting ~167 declarations; change
     --heading alone to swap the display type. Was "Fraunces". */
  --heading: Outfit, sans-serif;
  --serif: var(--heading);
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow-sm: 0 6px 18px -8px rgba(18, 50, 84, 0.18);
  --shadow-md: 0 18px 38px -16px rgba(18, 50, 84, 0.22);
  --shadow-lg: 0 30px 60px -20px rgba(18, 50, 84, 0.28);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  /* Stop AOS fade-left/right and full-bleed sliders from creating
     a horizontal scrollbar. `overflow-x: clip` doesn't establish a
     scrolling context like `hidden` does, so position: sticky
     descendants keep working. Falls back to `hidden` on older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-size: 16px;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
  /* Companion to the width/height attributes on every <img>: without this the
     browser keeps the attribute height while scaling the width down. */
  height: auto;
}
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============== BUTTONS (shared) ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  border-radius: 999px;
  transition:
    transform 0.2s,
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.25s;
  font-family: inherit;
  text-decoration: none;
  line-height: 1;
}
.btn:hover {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn .arr {
  font-size: 14px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.btn:hover .arr {
  transform: translateX(3px);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: #fff;
}
/* Variant — outline button on dark backgrounds */
.btn-outline.on-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}
.btn-outline.on-dark:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn-red {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--on-accent);
}
.btn-red:hover {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: #fff;
}
.btn-red .arr {
  background: rgba(18, 50, 84, 0.18);
}
.btn-crimson {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--on-accent);
}
.btn-crimson:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn-ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* ============== UTILITY TOP BAR ============== */
.util {
  background: #123254;
  color: #fff;
  font-size: 13px;
}
.util .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 6px;
  padding-bottom: 6px;
}
.util .left,
.util .right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.util a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  transition: color 0.2s;
  line-height: 1.3;
}
.util a:hover {
  color: #fff;
}
.util svg {
  width: 14px;
  height: 14px;
  color: var(--accent-ink);
  flex-shrink: 0; 
}
.util .tag {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

/* ============== NAV ============== */
nav.top {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  transition:
    box-shadow 0.25s,
    height 0.25s;
}
nav.top.scrolled {
  box-shadow: 0 6px 24px -16px rgba(18, 50, 84, 0.18);
  border-bottom-color: transparent;
}
nav.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  height: 64px;
  width: auto;
  display: block;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  justify-content: center;
  margin: 0 8px;
}
.navlinks a {
  position: relative;
  padding: 8px 12px;
  border-radius: 6px;
  transition:
    color 0.2s,
    background 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.navlinks a:hover {
  color: var(--accent-ink);
  background: rgba(223, 180, 112, 0.05);
}
.navlinks a.active {
  color: var(--accent-ink);
}
.navlinks a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--crimson);
  border-radius: 2px;
}
.navlinks .caret {
  font-size: 9px;
  opacity: 0.7;
}
.navlinks .nav-caret {
  font-size: 11px;
  margin-left: 2px;
  transition: transform .25s;
  opacity: .7;
}

/* ========== DESKTOP DROPDOWNS ========== */
.nav-item {
  position: relative;
}
.nav-item.has-dd > a { cursor: pointer; }
.nav-dd {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 280px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 28px 60px -22px rgba(18, 50, 84, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 60;
}
.nav-dd::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #fff;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-radius: 3px 0 0 0;
}
.nav-dd::after {
  /* Invisible bridge to prevent flicker between trigger and panel */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}
.nav-item:hover > .nav-dd,
.nav-item:focus-within > .nav-dd,
.nav-item.is-open > .nav-dd {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-item:hover > a > .nav-caret,
.nav-item:focus-within > a > .nav-caret,
.nav-item.is-open > a > .nav-caret { transform: rotate(180deg); }

.nav-dd > li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  transition: background .2s, color .2s, transform .2s;
}
.nav-dd > li > a:hover {
  background: var(--cream);
  color: var(--ink);
  transform: translateX(2px);
}
.nav-dd > li > a > i.bi {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--lilac);
  color: var(--ink);
  font-size: 16px;
  transition: background .2s, color .2s;
}
.nav-dd > li > a:hover > i.bi {
  background: var(--crimson);
  color: var(--on-accent);
}
.nav-dd > li > a > div { display: flex; flex-direction: column; min-width: 0; }
.nav-dd > li > a > div > b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.2;
}
.nav-dd > li > a > div > span {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: -.005em;
  margin-top: 2px;
}

/* Wide variant — 2 columns for Services (6 items) */
.nav-dd--wide {
  min-width: 540px;
  max-width: min(620px, calc(100vw - 64px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.navactions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-cta {
  padding: 11px 20px;
  font-size: 13.5px;
}

/* hamburger */
.navtoggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.navtoggle:hover {
  background: var(--cream);
  border-color: var(--ink);
}
.navtoggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s;
}

/* ============== MOBILE SLIDE-IN MENU ============== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 50, 84, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 80;
}
.mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: #fff;
  z-index: 90;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform 0.35s cubic-bezier(0.6, 0.05, 0.3, 1);
  box-shadow: -30px 0 60px -20px rgba(18, 50, 84, 0.25);
  overflow-y: auto;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu .mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule);
}
.mobile-menu .mm-head .brand img {
  height: 52px;
}
.mm-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: #fff;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.mm-close:hover {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
}
.mm-links {
  display: flex;
  flex-direction: column;
  padding: 14px 24px;
}
.mm-links a {
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition:
    color 0.2s,
    padding-left 0.2s;
}
.mm-links a:hover,
.mm-links a.active {
  color: var(--accent-ink);
  padding-left: 8px;
}

/* ========== MOBILE DROPDOWN GROUPS ========== */
.mm-group {
  border-bottom: 1px solid var(--rule);
}
.mm-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: color .2s, padding-left .2s;
}
.mm-trigger:hover { color: var(--crimson); padding-left: 8px; }
.mm-trigger i.bi {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform .25s, background .25s, color .25s;
}
.mm-trigger[aria-expanded="true"] { color: var(--crimson); }
.mm-trigger[aria-expanded="true"] i.bi {
  transform: rotate(180deg);
  background: var(--crimson);
  color: var(--on-accent);
}

/* Collapsible sub — uses max-height for reliable multi-child animation */
.mm-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.2,.7,.2,1);
  background: var(--cream);
  border-radius: 10px;
  margin: 0 0 10px;
}
.mm-trigger[aria-expanded="true"] + .mm-sub {
  /* generous cap — no submenu hits this in normal use */
  max-height: 600px;
}
.mm-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: color .2s, padding-left .2s, background .2s;
}
.mm-sub a:last-child { border-bottom: 0; }
.mm-sub a::before {
  content: "";
  width: 8px;
  height: 2px;
  background: var(--crimson);
  border-radius: 2px;
  flex-shrink: 0;
  opacity: .7;
  transition: width .2s, opacity .2s;
}
.mm-sub a:hover {
  color: var(--accent-ink);
  padding-left: 28px;
  background: rgba(223, 180, 112, .04);
}
.mm-sub a:hover::before {
  width: 14px;
  opacity: 1;
}

/* group owns the bottom border so the inner trigger stays clean */
.mm-group .mm-trigger { border-bottom: 0; }
.mm-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}
.mm-cta .btn {
  width: 100%;
}
.mm-foot {
  padding: 18px 24px;
  background: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-foot a {
  color: var(--ink);
  font-weight: 600;
}
.mm-foot a:hover {
  color: var(--accent-ink);
}
body.no-scroll {
  overflow: hidden;
}

/* ============== HERO ============== */
.hero {
  position: relative;
  padding: 80px 0 90px;
  overflow: hidden;
  background: #FBF5EE;
  isolation: isolate;
}
.hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -2;
  pointer-events: none;
  user-select: none;
}
.hero .hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/home/1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: rgba(223, 180, 112, 0.35);
  z-index: -1;
  pointer-events: none;
}
.hero:has(.hero-video) .hero-bg {
  background-image: none;
}
.hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0.55) 100%);
  pointer-events: none;
}.hero .container-xxl {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
.hero-grid {
  min-height: 580px;
  align-items: center;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

/* Eyebrow pill */
.eyebrow-pill {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 26px;
  transition: background .25s, color .25s, border-color .25s;
}
/* Variant — for dark navy sections */
.eyebrow-pill.on-dark {
  background: rgba(223, 180, 112, 0.16);
  color: #fff;
  border-color: rgba(223, 180, 112, 0.5);
}
/* Variant — solid crimson chip */
.eyebrow-pill.solid {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
}

/* Multi-color hero heading */
.hero-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 62px;
  line-height: 1.09;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
  align-items: baseline;
  gap: 0 14px;
}
.hero-title em{
  font-style: normal;
  color: var(--accent-ink);
}
.hero-title .w-expert {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero-title .w-book,
.hero-title .w-pub {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  color: var(--ink);
}
.hero-title .w-in {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  color: var(--ink-soft);
  font-size: 0.78em;
}
.hero-title .w-uk {
  font-family: var(--sans);
  font-weight: 800;
  color: var(--accent-ink);
  letter-spacing: -0.02em;
}

/* Italic red subtitle */
/* .au-sub is the same gold strapline one level down - the line under the
   "Crown Publishers UK ..." heading in the About section. Same rule so the two
   can never drift apart. */
.hero-sub,
.au-sub {
    font-family: var(--serif);
    /* font-style: normal; */
    font-weight: 500;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.25;
    color: var(--accent-ink);
    margin: 0 0 20px;
    letter-spacing: -0.005em;
}

/* Body lede */
.hero-lede {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.7;
    color: #373737;
    max-width: 580px;
    font-weight: 500;
    margin: 0 0 14px;
}
.hero-lede:last-of-type {
  margin-bottom: 28px;
}

/* Trust badges row */
.trust-badges {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 18px;
  margin: 6px 0 30px;
  white-space: nowrap;
}
.tb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.tb-mark {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.tb-stars {
  color: #dfb470;
  font-size: 14px;
  letter-spacing: 1.5px;
}
.tb-google {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.tb-google .tb-stars {
  font-size: 12px;
  letter-spacing: 1px;
}
.tb-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.tb-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tb-reviews .tb-name {
  color: #1A1A1A;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 16px;
}
.tb-reviews .tb-name sup {
  font-size: 0.55em;
  vertical-align: super;
  letter-spacing: 0;
  text-transform: lowercase;
  margin-left: 1px;
}
.tb-bark {
  gap: 6px;
}
.tb-bark .tb-name {
  color: #6B7280;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.tb-bark .tb-tick {
  width: 16px;
  height: 16px;
}
.tb-img {
  height: 42px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity .2s, transform .2s;
}
.tb-img img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}
.tb-img:hover {
  opacity: .82;
  transform: translateY(-1px);
}

/* CTAs */
.hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.hero-ctas .btn {
  padding: 14px 28px;
  font-size: 14px;
  border-radius: 999px;
}

/* ====== Hero books (right column) ====== */
.hero-books {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-book {
  position: absolute;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(18, 50, 84, 0.28));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-book img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero-book.hb-left {
  width: clamp(190px, 19vw, 270px);
  top: 50%;
  left: 6%;
  transform: translateY(-46%) rotate(-12deg);
  z-index: 1;
}
.hero-book.hb-center {
  width: clamp(220px, 22vw, 310px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%) rotate(-2deg);
  z-index: 3;
}
.hero-book.hb-right {
  width: clamp(210px, 20vw, 290px);
  top: 50%;
  right: 4%;
  transform: translateY(-44%) rotate(10deg);
  z-index: 2;
}
.hero-book.hb-left:hover {
  transform: translateY(-50%) rotate(-12deg) scale(1.03);
}
.hero-book.hb-center:hover {
  transform: translate(-50%, -56%) rotate(-2deg) scale(1.03);
}
.hero-book.hb-right:hover {
  transform: translateY(-48%) rotate(10deg) scale(1.03);
}

/* ============== HERO STATS BAND ============== */
.hero-stats {
  background: linear-gradient(180deg, #fbf6ed 0%, #f5f1e8 100%);
  padding: 36px 0;
  border-top: 1px solid #ede7d9;
}
.hero-stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hstat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-right: 1px solid #e5dfcd;
}
.hstat:last-child {
  border-right: none;
}
.hstat:first-child {
  padding-left: 0;
}
.hstat .ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  color: var(--ink);
  flex-shrink: 0;
  background: #fff;
  transition: transform 0.3s;
}
.hstat:hover .ring {
  transform: rotate(-8deg) scale(1.05);
}
.hstat .num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hstat .num .star {
  color: var(--accent-ink);
  font-size: 22px;
  margin-left: 2px;
}
.hstat .lab {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}

/* ============== ABOUT ============== */
.about {
  padding: 110px 0;
  background: var(--cream);
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.about .grid {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.about .left {
  position: relative;
}
.about .ms {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 48px 44px;
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(18, 50, 84, 0.2);
}
.about .ms::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -12px;
  right: 12px;
  bottom: 12px;
  border: 1px solid var(--ink);
  z-index: -1;
}
.about .ms .stamp {
  position: absolute;
  top: -22px;
  right: 32px;
  background: var(--crimson);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 14px;
  font-weight: 600;
}
.about .ms .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.about .ms h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}
.about .ms h3 em {
  font-style: normal;
  color: var(--accent-ink);
}
.about .ms p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.about .ms .meta-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.about .ms .meta-row b {
  color: var(--ink);
  font-weight: 600;
}
.about .right .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.about .right h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--ink);
}
.about .right h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.about .right p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.about .right .keep {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin: 24px 0;
  padding: 18px 24px;
  border-left: 3px solid var(--crimson);
  background: #fff;
  line-height: 1.5;
}

/* ============== GENRES ============== */
.genres {
  padding: 110px 0 90px;
  background: var(--paper);
}
.genres .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 64px;
}
.genres .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.genres .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--ink);
}
.genres .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.genres .head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto;
  max-width: 680px;
}
.genre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gcard {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.25s,
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
  border-radius: 6px;
}
.gcard:hover {
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 24px 48px -16px rgba(18, 50, 84, 0.16);
  transform: translateY(-4px);
}
.gcard.feature {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.gcard.feature:hover {
  background: var(--ink-deep);
}
.gcard .ico-wrap {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--ink);
  margin-bottom: 24px;
}
.gcard.feature .ico-wrap {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #dfb470;
}
.gcard .ico-wrap svg {
  width: 30px;
  height: 30px;
}
.gcard h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.gcard.feature h3 {
  color: #fff;
}
.gcard .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.gcard.feature .meta {
  color: rgba(255, 255, 255, 0.55);
}
.gcard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px dashed var(--rule);
}
.gcard.feature ul {
  border-color: rgba(255, 255, 255, 0.16);
}
.gcard ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.gcard.feature ul li {
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
}
.gcard ul li svg {
  width: 14px;
  height: 14px;
  color: var(--accent-ink);
  flex-shrink: 0;
}
.gcard.feature ul li svg {
  color: #dfb470;
}
.genres .cta-row {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.genres .cta-row .btn {
  padding: 16px 32px;
  font-size: 14.5px;
}

/* ============== TRUST BAND ============== */
.trust {
  background: var(--ink);
  color: #fff;
  padding: 56px 0;
}
.trust .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.trust .head {
  padding-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.trust .head .mono {
  color: rgba(255, 255, 255, 0.55);
}
.trust .head h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 10px 0 0;
}
.trust .head h4 em {
  font-style: normal;
  color: #dfb470;
}
.stat .num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat .num sup {
  font-size: 22px;
  color: var(--accent-ink);
  vertical-align: super;
  margin-left: 2px;
  font-style: italic;
}
.stat .num em {
  font-style: italic;
  color: #dfb470;
  font-weight: 300;
}
.stat .lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
}
.stat .stars {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  color: #dfb470;
  font-size: 14px;
  letter-spacing: 2px;
}

/* ============== SECTION HEAD ============== */
.sec {
  padding: 110px 0;
}
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.sec-head .num {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--accent-ink);
}
.sec-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  max-width: 18ch;
}
.sec-head h2 em {
  font-style: normal;
}
.sec-head .desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 340px;
  text-align: right;
}

/* ============== SERVICES ============== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.svc {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 28px 36px;
  background: #fff;
  min-height: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    background 0.25s,
    box-shadow 0.25s;
}
.svc:hover {
  box-shadow: inset 0 -2px 0 var(--crimson);
}
.svc .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.svc h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 32px 0 12px;
}
.svc h3 em {
  font-style: normal;
  color: var(--accent-ink);
}
.svc p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
  flex: 1;
}
.svc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border-top: 1px dashed var(--rule);
}
.svc ul li {
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.svc ul li::before {
  content: "—";
  color: var(--accent-ink);
  margin-right: 10px;
}
.svc ul li span {
  flex: 1;
}
.svc ul li b {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
}
.svc .footlink {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  cursor: pointer;
}
.svc .footlink::after {
  content: "→";
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 400;
  transition: transform 0.25s;
}
.svc:hover .footlink::after {
  transform: translateX(6px);
}
.svc.feature {
  background: var(--ink);
  color: #fff;
}
.svc.feature h3,
.svc.feature .footlink {
  color: #fff;
}
.svc.feature p,
.svc.feature ul li {
  color: rgba(255, 255, 255, 0.8);
}
.svc.feature ul,
.svc.feature ul li {
  border-color: rgba(255, 255, 255, 0.14);
}
.svc.feature ul li b,
.svc.feature .num {
  color: rgba(255, 255, 255, 0.5);
}
.svc.feature h3 em {
  color: #dfb470;
}

/* ============== PROCESS ============== */
.process {
  background: var(--paper-2);
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 24px;
}
.process-left {
  position: sticky;
  top: 120px;
  align-self: start;
}
.process-left .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 300;
  margin: 28px 0;
  letter-spacing: -0.005em;
}
.process-left .quote::before {
  content: "\201C";
  font-size: 80px;
  line-height: 0;
  color: var(--accent-ink);
  margin-right: 6px;
  vertical-align: -22px;
}
.process-left .attrib {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.process-left .attrib b {
  color: var(--ink);
  font-weight: 600;
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 4px;
}
.process-cover {
  margin-top: 40px;
  aspect-ratio: 3/4;
  background: #fff;
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.process-cover .stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    rgba(18, 50, 84, 0.04) 9px 10px
  );
}
.process-cover .inner {
  position: absolute;
  inset: 24px;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}
.process-cover .inner .top {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
}
.process-cover .inner h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.process-cover .inner h4 em {
  font-style: normal;
  color: var(--accent-ink);
}
.process-cover .inner .bottom {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}
.steps {
  display: flex;
  flex-direction: column;
}
.step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 0.25s;
}
.step:first-child {
  border-top: 1px solid var(--rule);
}
.step:hover {
  background: #fff;
}
.step .stepnum {
  font-family: var(--serif);
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  color: var(--accent-ink);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.step h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 6px 0 6px;
  color: var(--ink);
}
.step p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.step .meta {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.step .meta b {
  color: var(--ink);
  font-weight: 500;
}
.step.active {
  background: #fff;
}
.step.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--crimson);
}

/* ============== TALK / FEATURED CATALOGUE ============== */
.talk {
  padding: 110px 0;
  background: #fff;
  border-top: 1px solid var(--rule);
}
.talk .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.talk .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.talk .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
}
.talk .head h2 em {
  font-style: normal;
}
.talk .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.bk {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 28px 24px 24px;
  border-radius: 6px;
  transition:
    transform 0.25s,
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}
.bk:hover {
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 24px 48px -20px rgba(18, 50, 84, 0.2);
  transform: translateY(-4px);
}
.bk .cover {
  aspect-ratio: 2/3;
  border-radius: 3px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 32px -10px rgba(18, 50, 84, 0.3);
}
.bk .cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}
.bk .cover .tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  text-align: center;
}
.bk .cover .ttl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.005em;
}
.bk .cover .auth {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.85;
}
.bk .cover.c1 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
}
.bk .cover.c2 {
  background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%);
  color: #dfb470;
}
.bk .cover.c3 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
  color: #dfb470;
}
.bk .cover.c4 {
  background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%);
}
.bk .meta-line {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.bk h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.bk p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
  flex: 1;
}
.bk .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--rule);
  padding-top: 14px;
}
.bk .row .by {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}
.bk .row .stars {
  color: #dfb470;
  font-size: 11px;
  letter-spacing: 1.5px;
}

/* ============== PORTFOLIO SLIDER ============== */
.portfolio {
  padding: 110px 0;
  background: var(--cream);
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
  overflow: hidden;
}
.portfolio .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.portfolio .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.portfolio .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
}
.portfolio .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.portfolio .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}
.portfolio-track-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 -40px;
  padding: 8px 40px 40px;
}
.portfolio-track {
  display: flex;
  gap: 24px;
  animation: slidein 50s linear infinite;
  width: max-content;
}
.portfolio-track:hover {
  animation-play-state: paused;
}
@keyframes slidein {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.pcard {
  flex: 0 0 240px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.pcard .pcover {
  aspect-ratio: 2/3;
  border-radius: 4px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 32px -14px rgba(18, 50, 84, 0.32);
}
.pcard .pcover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
.pcard .pcover .pcat {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}
.pcard .pcover .pttl {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.15;
  margin-top: auto;
  letter-spacing: -0.005em;
}
.pcover.p1 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
}
.pcover.p2 {
  background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%);
  color: #dfb470;
}
.pcover.p3 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
  color: #dfb470;
}
.pcover.p4 {
  background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%);
}
.pcover.p5 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
}
.pcover.p6 {
  background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%);
  color: #dfb470;
}
.pcover.p7 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
}
.pcover.p8 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
  color: #dfb470;
}
.pcover.p9 {
  background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%);
  color: #fbf6ed;
}
.pcover.p10 {
  background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%);
}
.pcover.p11 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
}
.pcover.p12 {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
  color: #dfb470;
}
.pcard h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--ink);
}
.pcard .pmeta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============== TESTIMONIALS ============== */
.testi {
  background: #fff;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.tcard {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.tcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.tcard.a {
  grid-column: span 5;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.tcard.b {
  grid-column: span 4;
}
.tcard.c {
  grid-column: span 3;
}
.tcard.d {
  grid-column: span 4;
}
.tcard.e {
  grid-column: span 4;
}
.tcard.f {
  grid-column: span 4;
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
}
.tcard .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.tcard .stars {
  color: #dfb470;
  font-size: 14px;
  letter-spacing: 3px;
}
.tcard.a .stars,
.tcard.f .stars {
  color: #fff;
}
.tcard .top .where {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.tcard.a .top .where {
  color: rgba(255, 255, 255, 0.6);
}
.tcard.f .top .where {
  color: rgba(255, 255, 255, 0.7);
}
.tcard h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.tcard.a h4 {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 400;
}
.tcard.f h4 {
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
}
.tcard p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
  flex: 1;
}
.tcard.a p {
  color: rgba(255, 255, 255, 0.85);
}
.tcard.f p {
  color: rgba(255, 255, 255, 0.92);
}
.tcard .author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.tcard.a .author {
  border-color: rgba(255, 255, 255, 0.16);
}
.tcard.f .author {
  border-color: rgba(255, 255, 255, 0.25);
}
.tcard .ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  font-size: 15px;
  border: 1px solid var(--rule);
}
.tcard.a .ava {
  background: rgba(255, 255, 255, 0.08);
  color: #dfb470;
  border-color: rgba(255, 255, 255, 0.16);
}
.tcard.f .ava {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.tcard .author .who b {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.tcard .author .who span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
  display: block;
}
.tcard.a .author .who span {
  color: rgba(255, 255, 255, 0.55);
}
.tcard.f .author .who span {
  color: rgba(255, 255, 255, 0.75);
}

/* ============== PACKAGES ============== */
.packages {
  background: var(--paper-2);
}
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pkg {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
  position: relative;
}
.pkg:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ink);
}
.pkg.feature {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pkg.feature:hover {
  transform: translateY(-6px);
}
.pkg .ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--crimson);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 16px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}
.pkg .pkg-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pkg.feature .pkg-tag {
  color: rgba(255, 255, 255, 0.65);
}
.pkg h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.pkg.feature h3 {
  color: #fff;
}
.pkg .price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.pkg.feature .price {
  color: #dfb470;
}
.pkg p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.pkg.feature p {
  color: rgba(255, 255, 255, 0.8);
}
.pkg ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 8px 12px 8px 0;
  border-top: 1px dashed var(--rule);
  flex: 1;
  /* Equalise heights — list scrolls so all 3 cards finish at the same point */
  max-height: 320px;
  overflow-y: auto;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--crimson) transparent;
}
.pkg ul::-webkit-scrollbar { width: 5px; }
.pkg ul::-webkit-scrollbar-track {
  background: rgba(18, 50, 84, .06);
  border-radius: 4px;
  margin: 4px 0;
}
.pkg ul::-webkit-scrollbar-thumb {
  background: var(--crimson);
  border-radius: 4px;
}
.pkg ul::-webkit-scrollbar-thumb:hover {
  background: var(--crimson-deep);
}
.pkg.feature ul {
  scrollbar-color: #dfb470 rgba(255,255,255,.08);
}
.pkg.feature ul::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
}
.pkg.feature ul::-webkit-scrollbar-thumb {
  background: #dfb470;
}
.pkg.feature ul {
  border-color: rgba(255, 255, 255, 0.15);
}
.pkg ul li {
  padding: 11px 11px;
  border-bottom: 1px dashed var(--rule);
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pkg.feature ul li {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.86);
}
.pkg ul li::before {
  content: "✓";
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 13px;
}
.pkg.feature ul li::before {
  color: #dfb470;
}
.pkg .btn {
  align-self: stretch;
  justify-content: center;
}

/* ============== PACKAGES PAGE — section, heading, scroller ============== */
.packages-sec {
  position: relative;
  background: var(--cream);
  /* Anchor target for the hero's "View Our Services" button and the "Compare
     Packages" button. nav.top is sticky at 85px, so without this the jump
     leaves the heading only 26px clear of it. */
  scroll-margin-top: 85px;
  padding: 110px 0 130px;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
  overflow: hidden;
  isolation: isolate;
}
.packages-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 20%, rgba(223, 180, 112,.10), transparent 38%),
    radial-gradient(circle at 88% 84%, rgba(223, 180, 112,.14), transparent 40%),
    repeating-linear-gradient(
      45deg,
      rgba(223, 180, 112,.025) 0,
      rgba(223, 180, 112,.025) 1px,
      transparent 1px,
      transparent 6px
    );
}

/* Heading band — centred */
.pkg-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.pkg-head .eyebrow-pill { margin-bottom: 18px; }
.pkg-head h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 18px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.pkg-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.pkg-head p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 660px;
  margin: 0 auto;
}

/* Quick comparison strip */
.pkg-compare {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 64px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 18px 38px -22px rgba(18, 50, 84, .25);
}
.pkc-stat {
  text-align: center;
  position: relative;
  padding: 6px 4px;
}
.pkc-stat + .pkc-stat::before {
  content: "";
  position: absolute;
  left: -10px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--rule);
}
.pkc-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.pkc-num span {
  font-style: italic;
  color: var(--accent-ink);
  margin-left: 2px;
}
.pkc-lbl {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.pkc-feature .pkc-num {
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Slider shell */
.pkg-shell {
  position: relative;
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 24px 64px 48px;
}
.pkg-swiper {
  /* Was overflow:visible so the highlighted card's glow could breathe. With a
     real slider that let the off-screen fourth card spill past the container
     and off the page edge. Clipping instead, with padding to give the lifted
     ribbon card and its shadow room, then negative margin so the surrounding
     layout is unchanged. */
  overflow: hidden;
  padding: 52px 6px 28px;
  margin: -52px -6px -28px;
}
/* flex-start, not stretch: with stretch every card grew to match the tallest,
   so raising the highlighted card's height left dead space in the other two.
   Each card now takes its own height. */
/* stretch, not flex-start: the four tiers carry 6, 7, 8 and 6 features, so
   letting each card size to its own content finished them at different heights
   with the CTA buttons on four different lines. Stretch makes every slide as
   tall as the tallest, and .pkg's height:100% fills it. */
.pkg-swiper .swiper-wrapper { align-items: stretch; }
.pkg-swiper .swiper-slide {
  height: auto;
  display: flex;
  /* The lifted ribbon card is 40px taller than the rest (negative top margin,
     matching bottom margin). Aligning slides to the end keeps every card's
     footer on the same line while that one still stands proud at the top. */
  align-items: stretch;
}
/* The list is the only part that should absorb the extra height, so the header
   and the CTA stay put and the feature rows spread to fill the card. */
.pkg .pkg-list-wrap {
  display: flex;
}
.pkg .pkg-list {
  width: 100%;
}
.pkg-swiper .pkg { width: 100%; }

/* === Reset card to clean divider-list look (matches reference screenshot) === */
.pkg {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(18, 50, 84, .18);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.pkg::before { display: none; }                /* drop the old top accent ribbon */
.pkg:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -22px rgba(18, 50, 84, .28);
  border-color: var(--ink);
}
/* override the legacy `.pkg.feature` dark variant — all cards now look the same */
.pkg.feature {
  background: #fff;
  color: var(--ink);
  border-color: var(--rule);
}
.pkg.feature::before { display: none; }

/* Header — name + "Package" subtitle, centred */
.pkg-header {
  text-align: center;
  padding: 36px 28px 28px;
  border-bottom: 1px solid var(--rule);
}
.pkg-header h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 4px;
}
.pkg-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--muted);
  display: block;
  min-height: 34px;
}
/* Price block. The cards carried no price until the four-tier set went in. */
.pkg-price {
  margin: 14px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  line-height: 1;
}
.pkg-price-from {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pkg-price-int {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* "Contact Us" sits in the same slot as a figure, so it is stepped down to keep
   the four card headers on one baseline. */
.pkg-price-int:not(:nth-child(2)) {
  font-size: 40px;
}

/* Feature list wrapper — clips overflow + fade-out indicates scroll */
.pkg-list-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}
.pkg-list-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 80%);
  pointer-events: none;
  z-index: 1;
}

/* Feature list — centred rows with horizontal dividers */
.pkg-list {
  list-style: none;
  margin: 0;
  padding: 6px 28px 36px;       /* bottom padding lets the last row clear the fade */
  height: 100%;
  max-height: 432px;             /* aligns to ~9 rows + breathing room */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--crimson) transparent;
}
/* Only the highlighted "best seller" card is taller - it carries the longest
   list (23 rows against 13 and 17). Targeted at .has-ribbon because that is
   the class this card actually uses; .pkg.feature is not in the markup. */
/* The featured card used to be lifted 40px clear of the row (and, before that,
   pinned to a fixed 651px height back when the cards held 13-23 features). Both
   are off: all four tiers now sit on the same line, and the ribbon alone marks
   the best seller. */
.pkg.has-ribbon {
  /* margin-top: -40px; */
  /* margin-bottom: 40px; */
}

.pkg.has-ribbon .pkg-list {
  max-height: 496px;
}

.pkg-list::-webkit-scrollbar { width: 4px; }
.pkg-list::-webkit-scrollbar-track { background: transparent; }
.pkg-list::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: 4px; }
.pkg-list::-webkit-scrollbar-thumb:hover { background: var(--crimson-deep); }
.pkg-list li {
  text-align: center;
  padding: 14px 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
  transition: color .2s, background .2s;
}
.pkg-list li:last-child { border-bottom: none; }
.pkg-list li:hover {
  color: var(--ink);
  background: rgba(223, 180, 112, .04);
}

/* CTA pinned to the bottom */
.pkg-cta {
  margin: 18px 28px 28px;
  padding: 15px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  align-self: stretch;
  justify-content: center;
}

/* Diagonal "BEST SELLER" corner ribbon */
.pkg-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.pkg-ribbon span {
  position: absolute;
  top: 22px;
  right: -38px;
  display: block;
  width: 170px;
  padding: 7px 0;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: var(--on-accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 8px 18px -6px rgba(223, 180, 112, .55);
}
.pkg-ribbon::before,
.pkg-ribbon::after {
  /* tiny shadow tails at the two ends of the ribbon */
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent var(--crimson-deep) transparent transparent;
}
.pkg-ribbon::before {
  top: 5px;
  right: 65px;
  border-width: 0 6px 6px 0;
  transform: rotate(45deg);
}
.pkg-ribbon::after {
  bottom: 65px;
  left: 5px;
  border-width: 0 0 6px 6px;
  border-color: transparent transparent transparent var(--crimson-deep);
  transform: rotate(45deg);
}

/* Highlighted card — keep the diagonal ribbon visible on hover lift */
.pkg.has-ribbon { overflow: hidden; }

/* Note line below the package slider */

/* Slider nav buttons */
.pkg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 14px 26px -12px rgba(18, 50, 84, .25);
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.pkg-nav:hover {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
  transform: translateY(-50%) scale(1.06);
}
.pkg-nav i.bi { font-size: 22px; line-height: 1; }
.pkg-prev { left: 0; }
.pkg-next { right: 0; }
.pkg-nav.swiper-button-disabled { opacity: .35; cursor: default; transform: translateY(-50%); }

/* Pagination dots */
.pkg-pagination {
  text-align: center;
  margin-top: 24px;
  position: relative;
  bottom: auto !important;
}
.pkg-pagination .swiper-pagination-bullet {
  background: rgba(18, 50, 84, .25);
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  transition: background .25s, transform .25s, width .25s;
}
.pkg-pagination .swiper-pagination-bullet-active {
  background: var(--crimson);
  width: 24px;
  border-radius: 4px;
}
/* ============== PARTNERS BAND ============== */
.partners {
  background: #fff;
  padding: 64px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.partners .lead {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.partners-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 32px;
  align-items: center;
}
.partner {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: -0.01em;
  opacity: 0.7;
  transition:
    opacity 0.25s,
    color 0.25s;
}
.partner:hover {
  opacity: 1;
  color: var(--ink);
}

/* ============== FAQ ============== */
.faq {
  background: #fff;
}
.faq-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.faq-left {
  position: sticky;
  top: 120px;
}
.faq-left .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.faq-left h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.faq-left h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.faq-left p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 26px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
/* Category nav in the sticky left column of the FAQ page */
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.faq-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.faq-nav a b {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s;
}
.faq-nav a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.faq-nav a:hover b {
  color: var(--gold);
}
/* Service heading between FAQ groups */
.faq-cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 34px 0 14px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display, inherit);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  scroll-margin-top: 120px;
}
.faq-list > .faq-cat:first-child {
  padding-top: 4px;
}
.faq-cat-link {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.faq-cat-link span {
  display: inline-block;
  transition: transform 0.2s;
}
.faq-cat-link:hover {
  color: var(--ink);
}
.faq-cat-link:hover span {
  transform: translateX(4px);
}
@media (max-width: 640px) {
  .faq-cat {
    font-size: 18px;
    padding-top: 26px;
  }
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 6px 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
  gap: 16px;
  transition: color 0.2s;
}
.faq-item summary:hover {
  color: var(--accent-ink);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item .qnum {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 6px;
  width: 36px;
}
.faq-item .qtxt {
  flex: 1;
}
.faq-item .toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background .35s cubic-bezier(.22,.61,.36,1),
              color .35s cubic-bezier(.22,.61,.36,1),
              border-color .35s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1);
  font-size: 18px;
  line-height: 1;
  will-change: transform;
}
.faq-item[open] .toggle {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
  transform: rotate(45deg);
}
.faq-item .answer {
  padding: 0 0 24px 36px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 78ch;
  will-change: opacity, transform;
}
/* When height animation is running, prevent the inner content from poking out */
.faq-item {
  will-change: height;
}

/* ============== BIG CTA ============== */
.bigcta {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 110px 0 90px;
}
.bigcta .ghost {
  position: absolute;
  right: -60px;
  bottom: -200px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 680px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}
.bigcta .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 64px;
  align-items: end;
}
.bigcta .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.bigcta .eyebrow .bar {
  width: 36px;
  height: 1px;
  background: var(--crimson);
}
.bigcta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.bigcta h2 em {
  font-style: normal;
  color: #dfb470;
  font-weight: 300;
}
.bigcta h2 .red {
  color: var(--accent-ink);
}
.bigcta .lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px;
  margin: 0 0 36px;
}
.bigcta .ctarow {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.bigcta .panel {
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.02);
}
.bigcta .panel .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}
.bigcta .panel h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.bigcta .panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bigcta .panel ul li {
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  gap: 12px;
}
.bigcta .panel ul li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.bigcta .panel ul li b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #dfb470;
  text-transform: uppercase;
  font-weight: 500;
  text-align: right;
}
.bigcta .panel .foot {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* ============================================
   BLOG — LISTING & SINGLE POST
   ============================================ */

/* ---- Hero on /blogs.php ---- */
.blog-hero {
  position: relative;
  padding: 90px 0 70px;
  background: var(--cream);
  overflow: hidden;
  text-align: center;
}
.blog-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(223, 180, 112, .08) 0%, transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(223, 180, 112, .12) 0%, transparent 70%);
}
.blog-hero .wrap { position: relative; }
.blog-hero-inner { max-width: 760px; margin: 0 auto; }
.blog-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 18px 0 14px;
}
.blog-hero h1 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}
.blog-hero p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- Featured card ---- */
.blog-featured { padding: 72px 0 30px; background: #fff; }
.blog-featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .4s cubic-bezier(.22,.61,.36,1),
              box-shadow .4s, border-color .35s;
}
.blog-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -22px rgba(223, 180, 112, .25);
  border-color: transparent;
}
.blog-featured-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.blog-featured-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.blog-featured-card:hover .blog-featured-media img { transform: scale(1.04); }
.blog-featured-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--crimson);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  font-weight: 600;
}
.blog-featured-body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.blog-featured-body h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
}
.blog-featured-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- Meta line ---- */
.blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}
.blog-meta i { color: var(--crimson); margin-right: 3px; font-size: 13px; }
.blog-dot { color: var(--rule); }
.blog-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(223, 180, 112, .08);
  border: 1px solid rgba(223, 180, 112, .22);
  padding: 5px 10px;
  border-radius: 100px;
  font-weight: 600;
}

/* ---- Read more ---- */
.blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  margin-top: 4px;
  text-decoration: none;
  transition: gap .3s cubic-bezier(.22,.61,.36,1);
}
.blog-readmore i { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.blog-card:hover .blog-readmore,
.blog-readmore:hover { gap: 12px; }
.blog-card:hover .blog-readmore i,
.blog-readmore:hover i { transform: translateX(4px); }

/* ---- Listing grid ---- */
.blog-listing { padding: 60px 0 100px; background: #fff; }
.blog-listing .head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}
.blog-listing .head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 14px 0 0;
}
.blog-listing .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,.61,.36,1),
              box-shadow .4s, border-color .35s;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 55px -22px rgba(223, 180, 112, .25);
  border-color: transparent;
}

/* Lazy-reveal states */
.blog-card.is-hidden { display: none !important; }
.blog-card.is-revealed {
  animation: blogCardIn .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes blogCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   IMAGE SKELETON / SHIMMER LOADING
   JS adds .img-fade to <img> tags inside blog content / cards,
   and toggles .is-loaded after the image finishes loading.
   The parent gets .img-skeleton to display the shimmer.
   ============================================================ */
.img-skeleton {
  position: relative;
  overflow: hidden;
  background-color: #f1ece4;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)  0%,
    rgba(255, 255, 255, .65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  background-repeat: no-repeat;
  animation: imgShimmer 1.4s ease-in-out infinite;
}
.img-skeleton.is-loaded {
  animation: none;
  background-image: none;
  background-color: transparent;
}
@keyframes imgShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}
img.img-fade {
  opacity: 0;
  transition: opacity .55s ease, filter .55s ease;
  filter: blur(8px);
}
img.img-fade.is-loaded {
  opacity: 1;
  filter: blur(0);
}
img.img-fade:not(.is-loaded) {
  color: transparent; /* hide alt-text while loading */
}
/* Slightly stronger skeleton inside the dark featured card / hero */
.blog-featured-media.img-skeleton,
.blog-card-media.img-skeleton,
.blog-single-hero.img-skeleton {
  background-color: #f4ede2;
}
@media (prefers-reduced-motion: reduce) {
  .img-skeleton { animation: none; }
  img.img-fade  { transition: none; filter: none; }
}

/* Loading sentinel */
.blog-load-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 40px 0 0;
  padding: 22px 0;
  color: #6a6770;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.blog-load-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(223, 180, 112, .25);
  border-top-color: var(--crimson);
  animation: blogSpin .8s linear infinite;
}
@keyframes blogSpin { to { transform: rotate(360deg); } }
.blog-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.blog-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.blog-card:hover .blog-card-media img { transform: scale(1.06); }
.blog-card-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  font-weight: 600;
}
.blog-card-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.blog-card-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.blog-card-body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.blog-card-body h3 a:hover { color: var(--crimson); }
.blog-card-body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

/* ---- Single post ---- */
.blog-single { padding: 60px 0 70px; background: #fff; }

.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.blog-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.blog-breadcrumb a:hover { color: var(--crimson); }
.blog-breadcrumb i { font-size: 10px; }

.blog-single-head {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}
.blog-single-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 20px 0 22px;
}
.blog-single-head .blog-meta {
  justify-content: center;
}

.blog-single-hero {
  max-width: 1100px;
  margin: 0 auto 56px;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.blog-single-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.blog-single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 60px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---- Article body ---- */
.blog-single-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.blog-lead {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.005em;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.blog-single-content h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 44px 0 14px;
  position: relative;
  padding-bottom: 10px;
  scroll-margin-top: 110px;
}
.blog-single-content h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius: 3px;
}
.blog-single-content p { margin: 0 0 16px; }
.blog-single-content a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(223, 180, 112, .35);
  transition: color .2s, border-color .2s;
}
.blog-single-content a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.blog-single-content strong { color: var(--ink); font-weight: 600; }
.blog-content-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 12px;
}
.blog-content-list li {
  position: relative;
  padding: 4px 0 4px 28px;
  line-height: 1.7;
}
.blog-content-list li::before {
  content: "";
  position: absolute;
  left: 6px; top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 3px rgba(223, 180, 112, .12);
}

/* ---- In-article H3 / H4 ---- */
.blog-single-content h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 32px 0 12px;
  scroll-margin-top: 110px;
}
.blog-single-content h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin: 24px 0 10px;
}

/* ---- In-article images (auto-fit, no overflow) ---- */
.blog-single-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 22px auto;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(18, 50, 84, .08);
}
.blog-single-content .aligncenter { margin-left: auto; margin-right: auto; }

/* ---- Blockquote ---- */
.blog-single-content blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--crimson);
  background: var(--cream);
  border-radius: 0 10px 10px 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}

/* ---- Tables (used widely in imported blog posts) ---- */
.blog-single-content figure.wp-block-table,
.blog-single-content .table-wrap {
  margin: 28px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(18, 50, 84, .06);
  background: #fff;
}
.blog-single-content table,
.blog-single-content table.table-responsive {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 28px 0;
  font-size: 15px;
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(18, 50, 84, .06);
  display: table;
}
.blog-single-content table th,
.blog-single-content table td {
  padding: 14px 18px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.blog-single-content table thead th {
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
  color: #fff;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-transform: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  white-space: nowrap;
}
.blog-single-content table thead th b,
.blog-single-content table thead th strong { color: #fff; }
.blog-single-content table tbody tr:nth-child(even) td { background: #fbfaf6; }
.blog-single-content table tbody tr:last-child td { border-bottom: 0; }
.blog-single-content table tbody td b,
.blog-single-content table tbody td strong { color: var(--ink); font-weight: 600; }
.blog-single-content table tbody td span[style*="font-weight: 400"] { font-weight: 400 !important; }
.blog-single-content table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  padding: 8px 4px 12px;
  font-size: 16px;
}

/* Make blog tables horizontally scrollable on tablet + mobile with a
   clearly visible scrollbar so users know there's more content to swipe. */
@media (max-width: 1024px) {
  .blog-single-content table,
  .blog-single-content table.table-responsive {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    border-radius: 12px;
    /* Slightly indented soft fade on the right edge hints at scrollable content */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0% 50%, rgba(18, 50, 84,.18), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(18, 50, 84,.18), rgba(0,0,0,0)) right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* Cells: don't wrap so the natural width can exceed the viewport and trigger scroll */
  .blog-single-content table th,
  .blog-single-content table td {
    white-space: nowrap;
    min-width: 140px;
  }
  /* Visible, branded scrollbar so the affordance is obvious */
  .blog-single-content table {
    scrollbar-width: thin;
    scrollbar-color: var(--crimson, #dfb470) #f1ecdd;
  }
  .blog-single-content table::-webkit-scrollbar {
    height: 10px;
    -webkit-appearance: none;
  }
  .blog-single-content table::-webkit-scrollbar-track {
    background: #f1ecdd;
    border-radius: 999px;
  }
  .blog-single-content table::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--crimson, #dfb470), var(--gold, #dfb470));
    border-radius: 999px;
  }
  .blog-single-content table::-webkit-scrollbar-thumb:hover {
    background: var(--crimson, #dfb470);
  }
}

/* ---- Sidebar ---- */
.blog-sidebar {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 18px;
}
.blog-side-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 20px;
}
.blog-side-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.blog-share {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  transition: background .25s, color .25s, border-color .25s, transform .3s;
}
.share-btn:hover {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
  transform: translateY(-2px);
}

.blog-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: tocnum;
  display: grid;
  gap: 2px;
}
.blog-toc-list li { counter-increment: tocnum; }
.blog-toc-list a {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, padding-left .2s;
}
.blog-toc-list a::before {
  content: counter(tocnum, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
}
.blog-toc-list a:hover,
.blog-toc-list a.active {
  color: var(--ink);
  background: #fff;
  border-left-color: var(--crimson);
  padding-left: 14px;
}

.blog-side-cta {
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(223, 180, 112,.18) 0%, transparent 60%),
    linear-gradient(155deg, #123254 0%, #123254 100%);
  color: #fff;
  border-color: transparent;
  text-align: center;
}
.blog-side-cta .blog-side-label {
  color: rgba(255,255,255,.7);
  display: block;
  text-align: center;
}
.blog-side-cta h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
  text-align: center;
}
.blog-side-cta h4 em { font-style: normal; color: #dfb470; }
.blog-side-cta p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0 0 16px;
  text-align: center;
}
.blog-side-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* ---- FAQ block on blog posts ---- */
.blog-faqs {
  margin: 90px auto 0;
  max-width: 920px;
}
.blog-faqs .head {
  text-align: center;
  margin-bottom: 32px;
}
.blog-faqs .head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 12px 0 0;
}
.blog-faqs .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}

/* ---- "Keep Reading" strip ---- */
.blog-recent {
  background: var(--cream);
  padding: 80px 0 90px;
  margin-top: 60px;
}
.blog-recent .head {
  text-align: center;
  margin-bottom: 44px;
}
.blog-recent .head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 12px 0 0;
}
.blog-recent .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}

/* ---- Article body: guard against oversized inline content (tables, CTAs, images) ---- */
.blog-single-content { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
.blog-single-content > * { max-width: 100%; }
.blog-single-content iframe,
.blog-single-content video,
.blog-single-content embed,
.blog-single-content object { max-width: 100%; height: auto; }
/* Inline CTA banners authored inside post content (style="max-width:1100px; padding:10px 28px") */
.blog-single-content section[aria-label="Call to action"] > div {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .blog-hero h1 { font-size: 52px; }
  .blog-featured-card {
    grid-template-columns: 1fr;
  }
  .blog-featured-body { padding: 30px 32px; }
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blog-single-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .blog-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .blog-side-cta { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .blog-single { padding: 50px 0 60px; }
  .blog-single-head h1 { font-size: 38px; }
  .blog-single-content section[aria-label="Call to action"] > div {
    padding: 18px 22px !important;
  }
  .blog-single-content section[aria-label="Call to action"] h2 {
    font-size: 22px !important;
  }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .blog-hero { padding: 70px 0 50px; }
  .blog-hero h1 { font-size: 36px; }
  .blog-featured { padding: 52px 0 20px; }
  .blog-featured-body h2 { font-size: 24px; }
  .blog-listing { padding: 44px 0 70px; }
  .blog-listing .head h2 { font-size: 28px; }
  .blog-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .blog-single { padding: 40px 0 50px; }
  .blog-single-head h1 { font-size: 28px; }
  .blog-single-hero { margin-bottom: 28px; aspect-ratio: 16 / 10; border-radius: 12px; }
  .blog-single-content { font-size: 15px; line-height: 1.7; }
  .blog-single-content h2 { font-size: 22px; margin-top: 32px; }
  .blog-single-content h3 { font-size: 18px; }
  .blog-lead { font-size: 17px; }
  .blog-sidebar { grid-template-columns: 1fr; }
  .blog-faqs { margin-top: 60px; }
  .blog-faqs .head h2 { font-size: 24px; }
  .blog-recent { padding: 50px 0 60px; }
  .blog-recent .head h2 { font-size: 26px; }
  /* Inline CTAs in post body */
  .blog-single-content section[aria-label="Call to action"] > div {
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  .blog-single-content section[aria-label="Call to action"] h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .blog-single-content section[aria-label="Call to action"] p {
    font-size: 14px !important;
  }
  .blog-single-content section[aria-label="Call to action"] a {
    display: block !important;
    text-align: center;
    padding: 12px 16px !important;
    font-size: 14px;
  }
  /* Tables stay readable on small screens */
  .blog-single-content table th,
  .blog-single-content table td {
    padding: 10px 12px;
    font-size: 13px;
  }
  /* Breadcrumb shouldn't wrap awkwardly */
  .blog-breadcrumb { font-size: 10px; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
}
@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
  .blog-single-head h1 { font-size: 24px; }
  .blog-single-content { font-size: 14.5px; }
  .blog-single-content h2 { font-size: 20px; }
}

/* ---- Author bio block on blog posts ---- */
.blog-author {
  margin: 60px auto 0;
  max-width: 920px;
}
.blog-author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 32px;
  background: linear-gradient(135deg, #f4f7fa 0%, #ffffff 100%);
  border: 1px solid rgba(18, 50, 84, 0.12);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(18, 50, 84, 0.06);
}
.blog-author-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #123254 0%, #123254 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.04em;
  margin: 0 auto;
}
.blog-author-body {
  min-width: 0;
  text-align: center;
  width: 100%;
}
.blog-author-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson, #dfb470);
  margin-bottom: 6px;
  text-align: center;
}
.blog-author-name {
  font-family: var(--serif, Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #123254);
  margin: 0 0 8px;
  text-align: center;
}
.blog-author-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #123254;
  margin: 0 auto;
  text-align: center;
  max-width: 640px;
}
@media (max-width: 720px) {
  .blog-author { margin-top: 40px; }
  .blog-author-card { padding: 24px 20px; }
  .blog-author-avatar { width: 80px; height: 80px; font-size: 26px; }
  .blog-author-name { font-size: 20px; }
  .blog-author-desc { font-size: 14px; }
}


/* ============================================
   FOOTER (rebuilt)
   ============================================ */
footer.site-footer {
  position: relative;
  background: linear-gradient(180deg, #123254 0%, #123254 100%);
  color: #fff;
  padding: 0 0 28px;
  overflow: hidden;
}
footer.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--crimson) 35%, var(--gold) 65%, transparent 100%);
  opacity: .9;
  pointer-events: none;
}
footer.site-footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 520px; height: 520px;
  border-radius: 50%;
  right: -180px;
  bottom: -260px;
  background: radial-gradient(circle, rgba(223, 180, 112,.18) 0%, transparent 65%);
}

/* ---------- Top CTA band ---------- */
/* The band now also runs standalone above the testimonial slider, where there
   is no dark footer behind it - hence the solid colour underneath the two
   glows. It matches the top of the footer gradient, so it looks unchanged in
   its original position. */

/* ---------- Main link grid ---------- */
footer.site-footer .top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-top: 80px;
  margin-bottom: 56px;
}
.footer-logo {
  display: inline-block;
}
footer.site-footer .brandcol img {
  height: 72px;
  width: auto;
  margin-bottom: 22px;
  /* footer-logo.png is already drawn for a dark ground - white wordmark, gold
     crown and rule - so no filter here. Inverting it would flatten the gold. */
}
footer.site-footer .brandcol p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  max-width: 360px;
  margin: 0 0 22px;
}
/* The address moved out of the brand column into the "Contact Info" column, so
   these are no longer scoped to .brandcol. */
footer.site-footer .addr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  margin-bottom: 16px;
}
footer.site-footer .addr i {
  color: #dfb470;
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}
footer.site-footer .contact-rows {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}
footer.site-footer .contact-rows a,
footer.site-footer .contact-rows .hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.8);
  font-size: 13px;
  transition: color .25s;
}
footer.site-footer .contact-rows a:hover { color: #fff; }
footer.site-footer .contact-rows i {
  color: #dfb470;
  font-size: 14px;
  width: 16px;
  flex-shrink: 0;
}

footer.site-footer .socials {
  display: flex;
  gap: 10px;
}
footer.site-footer .socials a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
footer.site-footer .socials a:hover {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--on-accent);
  transform: translateY(-3px);
}

/* ---- Link columns ---- */
footer.site-footer .linkcol h4 {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #dfb470;
  margin: 0 0 20px;
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
}
footer.site-footer .linkcol h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius: 2px;
}
footer.site-footer .linkcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer.site-footer .linkcol ul li {
  padding: 5px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.74);
}
footer.site-footer .linkcol ul li a {
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: color .25s, padding-left .25s;
}
footer.site-footer .linkcol ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--crimson);
  transition: width .25s ease;
}
footer.site-footer .linkcol ul li a:hover {
  color: #fff;
  padding-left: 14px;
}
footer.site-footer .linkcol ul li a:hover::before {
  width: 10px;
}

/* ---------- Trust badges row ---------- */
.footer-trust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 32px;
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 26px;
}
.footer-trust-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.945);
}
.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  flex: 1;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 13px;
  transition: color .25s, transform .3s;
}
.trust-badge:hover { color: #fff; transform: translateY(-1px); }
.trust-badge i {
  font-size: 18px;
  color: #dfb470;
}
.trust-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.trust-badge b {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.trust-badge em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.979);
  margin-top: 1px;
}

/* ---------- Bottom bar ---------- */
footer.site-footer .bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgb(255, 255, 255);
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-top: 24px;
}
footer.site-footer .bottom .rights-text {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
footer.site-footer .bottom .rights {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
footer.site-footer .bottom a {
  color: rgb(255, 255, 255);
  transition: color .25s;
}
footer.site-footer .bottom a:hover {
  color: #fff;
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 95px; /* sits above the Tawk.to chat bubble */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--crimson);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  z-index: 90;
  box-shadow: 0 18px 38px -10px rgba(223, 180, 112,.5);
  opacity: 0;
  transform: translateY(20px) scale(.85);
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1),
              transform .35s cubic-bezier(.22,.61,.36,1),
              visibility .35s,
              background .25s;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}
/* --on-accent is the ink navy (it is meant for text on the gold), so the arrow
   has to flip to white here or it vanishes into the navy hover background. */
.back-to-top:hover {
  background: var(--ink);
  color: #fff;
}

/* ---------- Floating WhatsApp badge ---------- */
.wa-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 18px 38px -12px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04);
  text-decoration: none;
  color: var(--ink, #123254);
  font-family: inherit;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s ease,
              background .25s ease;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -12px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.05);
  color: var(--ink, #123254);
  outline: none;
}
.wa-fab-ico {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dfb470;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 6px 14px -4px rgba(223, 180, 112,.55);
}
.wa-fab-ico::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(223, 180, 112,.5);
  animation: waPulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { transform: scale(.85); opacity: .85; }
  100% { transform: scale(1.45); opacity: 0; }
}
.wa-fab-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.wa-fab-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #123254);
  white-space: nowrap;
}
.wa-fab-sub {
  font-size: 12px;
  color: #5a5a5a;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab-ico::before { animation: none; }
  .wa-fab { transition: none; }
}

/* ---------- Branded Live Chat FAB (replaces Tawk's default widget) ---------- */
.ukph-chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  background: var(--ink, #123254);
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 18px 38px -12px rgba(18, 50, 84,.55), 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s ease,
              background .25s ease;
}
.ukph-chat-fab[hidden] { display: none !important; }
.ukph-chat-fab:hover,
.ukph-chat-fab:focus-visible {
  transform: translateY(-2px);
  background: var(--ink-deep, #123254);
  box-shadow: 0 24px 44px -12px rgba(18, 50, 84,.65);
  outline: none;
}
.ukph-chat-ico {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--crimson, #dfb470);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 6px 14px -4px rgba(223, 180, 112,.55);
}
/* Toggle icons: chat dots when closed, X when open */
.ukph-chat-ico .ukph-chat-icon-open,
.ukph-chat-ico .ukph-chat-icon-close {
  grid-column: 1;
  grid-row: 1;
  transition: opacity .2s ease, transform .2s ease;
}
.ukph-chat-ico .ukph-chat-icon-close { opacity: 0; transform: scale(.7); }
.ukph-chat-fab.is-open .ukph-chat-ico {
  background: #123254;
  box-shadow: 0 6px 14px -4px rgba(18, 50, 84,.55);
}
.ukph-chat-fab.is-open .ukph-chat-ico .ukph-chat-icon-open  { opacity: 0; transform: scale(.7); }
.ukph-chat-fab.is-open .ukph-chat-ico .ukph-chat-icon-close { opacity: 1; transform: scale(1); }
.ukph-chat-fab.is-open .ukph-chat-ico::before { animation: none; opacity: 0; }
.ukph-chat-ico::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(223, 180, 112,.45);
  animation: ukphChatPulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes ukphChatPulse {
  0%   { transform: scale(.85); opacity: .85; }
  100% { transform: scale(1.45); opacity: 0; }
}
.ukph-chat-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #123254;
  border: 3px solid var(--ink, #123254);
  transition: background .25s ease, box-shadow .25s ease;
  z-index: 1;
}
.ukph-chat-dot[data-status="online"]  { background: #dfb470; box-shadow: 0 0 10px rgba(223, 180, 112,.55); }
.ukph-chat-dot[data-status="away"]    { background: #dfb470; }
.ukph-chat-dot[data-status="offline"] { background: #6b7280; }

.ukph-chat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.ukph-chat-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
}
.ukph-chat-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ukph-chat-ico::before { animation: none; }
  .ukph-chat-fab { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  footer.site-footer .top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
  footer.site-footer .brandcol { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  footer.site-footer .top {
    grid-template-columns: 1fr 1fr;
    padding-top: 60px;
    margin-bottom: 40px;
    gap: 36px 24px;
  }
  footer.site-footer .brandcol { grid-column: 1 / -1; }
  .footer-trust {
    gap: 18px 22px;
    padding: 22px 0;
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 540px) {
  footer.site-footer .top {
    grid-template-columns: 1fr;
  }
  .back-to-top {
    right: 14px;
    bottom: 80px; /* clear the Tawk.to chat bubble on mobile */
    width: 42px;
    height: 42px;
  }
  .wa-fab {
    left: 14px;
    bottom: 14px;
    padding: 4px;
    gap: 0;
  }
  .wa-fab-text { display: none; }
  .wa-fab-ico { width: 46px; height: 46px; font-size: 22px; }
  .ukph-chat-fab {
    right: 14px;
    bottom: 14px;
    padding: 4px;
    gap: 0;
  }
  .ukph-chat-text { display: none; }
  .ukph-chat-ico { width: 46px; height: 46px; font-size: 22px; }
  footer.site-footer .bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ============== LOCATIONS PAGE ============== */
.loc-section {
  padding: 90px 0 110px;
  background: var(--cream);
}
.loc-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.loc-head .eyebrow-pill { margin-bottom: 14px; }
.loc-head h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 500;
}
.loc-head h2 em {
  color: var(--accent-ink);
  font-style: normal;
}
.loc-head p {
  color: #123254;
  font-size: 17px;
  line-height: 1.6;
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.loc-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(18, 50, 84, .25);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(18, 50, 84, .06);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.loc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -18px rgba(18, 50, 84, .32);
}
.loc-card.is-primary {
  border-color: rgba(223, 180, 112, .18);
  box-shadow: 0 22px 44px -22px rgba(223, 180, 112, .28);
}

.loc-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
}
.loc-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.loc-card:hover .loc-card-image img {
  transform: scale(1.05);
}
.loc-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.25);
}
.loc-card.is-primary .loc-card-badge {
  background: var(--crimson);
  color: var(--on-accent);
}

.loc-card-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.loc-card-brand {
  height: 38px;
  display: flex;
  align-items: center;
}
.loc-card-brand img {
  max-height: 38px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.loc-card-title { display: flex; flex-direction: column; gap: 4px; }
.loc-card-country {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
}
.loc-card-title h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}
.loc-card-intro {
  margin: 0;
  color: #123254;
  font-size: 15px;
  line-height: 1.6;
}

.loc-card-list {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(18, 50, 84, .12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loc-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: #123254;
  line-height: 1.5;
}
.loc-card-list i {
  color: var(--accent-ink);
  font-size: 15px;
  margin-top: 3px;
  flex: 0 0 auto;
}
.loc-card-list a {
  color: #123254;
  text-decoration: none;
  word-break: break-word;
  transition: color .2s ease;
}
.loc-card-list a:hover { color: var(--crimson); }
.loc-card-list address {
  margin: 0;
  font-style: normal;
}

.loc-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  flex-wrap: wrap;
}
.loc-card-btn {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 140px;
  padding-inline: 18px !important;
  font-size: 14px !important;
}

@media (max-width: 1100px) {
  .loc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .loc-section { padding: 70px 0 80px; }
  .loc-grid { grid-template-columns: 1fr; gap: 22px; }
  .loc-card-body { padding: 22px 20px 24px; }
}

/* ============== SUBMISSIONS PAGE ============== */
.sub-section {
  padding: 90px 0 110px;
  background: var(--cream);
}
.sub-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* Left: submission guide */
.sub-guide .eyebrow-pill { margin-bottom: 14px; }
.sub-guide h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 500;
}
.sub-guide h2 em { color: var(--crimson); font-style: normal; }
.sub-guide > p {
  color: #123254;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 22px;
}
.sub-guide h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  margin: 6px 0 14px;
  font-weight: 600;
}
.sub-checklist {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.sub-checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(18, 50, 84,.06);
  border-radius: 12px;
  box-shadow: 0 6px 18px -14px rgba(18, 50, 84,.25);
}
.sub-checklist li i {
  color: var(--accent-ink);
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}
.sub-checklist li b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 2px;
}
.sub-checklist li span {
  display: block;
  font-size: 13.5px;
  color: #123254;
  line-height: 1.55;
}

.sub-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.sub-or span {
  height: 1px;
  background: rgba(18, 50, 84,.12);
  display: block;
}
.sub-or b {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
}
.sub-mailto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s ease, transform .2s ease;
  word-break: break-all;
}
.sub-mailto:hover {
  background: var(--crimson);
  color: var(--on-accent);
  transform: translateY(-1px);
}
.sub-foot {
  margin-top: 14px;
  font-size: 12.5px;
  color: #123254;
  font-style: italic;
  line-height: 1.6;
}

/* Right: form */
.sub-form-wrap {
  background: #fff;
  border-radius: 18px;
  padding: 36px clamp(22px, 3vw, 40px) 32px;
  border: 1px solid rgba(18, 50, 84,.06);
  box-shadow: 0 24px 50px -28px rgba(18, 50, 84,.28);
}
.sub-form-head { margin-bottom: 22px; }
.sub-form-head h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 500;
}
.sub-form-head h2 em { color: var(--crimson); font-style: normal; }
.sub-form-head p {
  margin: 0;
  color: #123254;
  font-size: 15px;
  line-height: 1.6;
}

/* Reuse .best-form field styling but tighten spacing for this layout */
.sub-form .bf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.sub-form .bf-full { display: block; margin-bottom: 16px; }
.sub-form label { display: block; }
.sub-form label > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.sub-form label .req { color: var(--crimson); font-style: normal; }
.sub-form input[type="text"],
.sub-form input[type="email"],
.sub-form input[type="tel"],
.sub-form select,
.sub-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(18, 50, 84,.18);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sub-form textarea { resize: vertical; min-height: 110px; }
.sub-form input:focus,
.sub-form select:focus,
.sub-form textarea:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(223, 180, 112,.12);
}

/* Custom file picker — fully styled */
.sub-file-label .sub-file {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid rgba(18, 50, 84,.18);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.sub-file input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.sub-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease;
}
.sub-file-btn:hover { background: var(--crimson); color: var(--on-accent); }
.sub-file-name {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  color: #123254;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-file-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #7a8298;
}

/* Submit + trust line */
.sub-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  padding: 14px 18px !important;
  font-size: 15px !important;
}
.sub-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(18, 50, 84,.12);
}
.sub-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #123254;
  font-weight: 600;
}
.sub-trust i { color: var(--crimson); font-size: 14px; }

@media (max-width: 980px) {
  .sub-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .sub-section { padding: 70px 0 80px; }
  .sub-form .bf-row { grid-template-columns: 1fr; }
  .sub-form-wrap { padding: 28px 18px 24px; border-radius: 14px; }
  .sub-file { flex-direction: column; }
  .sub-file-btn { justify-content: center; }
  .sub-file-name { padding: 10px 14px; }
}

/* ============== ABOUT PAGE — HERO ============== */
.about-hero {
  position: relative;
  padding: 100px 0 110px;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Layer primitives shared by every banner. The four pages then each pick a
   different treatment below via .ah-v1 - .ah-v4, so no two banners match. */
.ah-grid {
  position: absolute;
  inset: -40px;
}
.ah-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}
.ah-shape {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(223, 180, 112, .20);
  opacity: 1;
  animation: none;
}
/* The drifting icons and the scan line went with the quieter treatment. They
   stay in the markup so the pages need no edits. */
.ah-icon,
.ah-scan { display: none; }
.ah-dot { display: none; }

/* ---------- v1 - About: concentric rings over fine pinstripes ---------- */
.ah-v1 .ah-grid {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .05) 0 1px,
    transparent 1px 14px
  );
  mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 35%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 35%, transparent 92%);
}
.ah-v1 .ah-glow-1 {
  top: -240px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 640px;
  background: radial-gradient(ellipse at center, rgba(223, 180, 112, .22), transparent 65%);
}
.ah-v1 .ah-glow-2 {
  right: -190px; bottom: -280px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(223, 180, 112, .14), transparent 62%);
}
.ah-v1 .ah-shape-1 { width: 320px; height: 320px; left: -110px; top: 14%; }
.ah-v1 .ah-shape-2 { width: 520px; height: 520px; left: -210px; top: -4%; border-color: rgba(223, 180, 112, .11); }
.ah-v1 .ah-shape-3 { width: 270px; height: 270px; left: auto; right: -80px;  bottom: -70px;  border-color: rgba(255, 255, 255, .10); }
.ah-v1 .ah-shape-4 { width: 440px; height: 440px; left: auto; right: -160px; bottom: -150px; border-color: rgba(223, 180, 112, .13); }
.ah-v1 .ah-shape-5 { display: none; }

/* ---------- v2 - Packages: broad diagonal gold sweep ---------- */
.ah-v2 .ah-grid {
  inset: -20%;
  background-image: linear-gradient(
    116deg,
    transparent 0 38%,
    rgba(223, 180, 112, .16) 38% 46%,
    transparent 46% 52%,
    rgba(223, 180, 112, .08) 52% 57%,
    transparent 57%
  );
}
.ah-v2 .ah-glow-1 {
  left: -220px; bottom: -260px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(223, 180, 112, .20), transparent 62%);
}
.ah-v2 .ah-glow-2 {
  right: -240px; top: -240px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(255, 255, 255, .07), transparent 62%);
}
.ah-v2 .ah-shape { display: none; }

/* ---------- v3 - FAQs: fine gold dot matrix, centre lit ---------- */
.ah-v3 .ah-grid {
  background-image: radial-gradient(circle, rgba(223, 180, 112, .28) 0 1.6px, transparent 2px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 80%);
}
.ah-v3 .ah-glow-1 {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 760px; height: 520px;
  background: radial-gradient(ellipse at center, rgba(223, 180, 112, .18), transparent 66%);
}
.ah-v3 .ah-glow-2 { display: none; }
.ah-v3 .ah-shape { display: none; }

/* ---------- v4 - Contact: vertical gold streaks ---------- */
/* The contact hero is a heading on its own - no strapline, no button - so the
   full about-hero band left a tall empty stripe under it. Scoped to ah-v4,
   which only contact-us.php uses; packages.php shares .contact-hero but still
   has copy and buttons in its hero. */
.about-hero.ah-v4 {
  padding: 74px 0 78px;
}
.about-hero.ah-v4 h1 {
  margin-bottom: 0;
}

.ah-v4 .ah-grid {
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(223, 180, 112, .16) 0 1px,
    transparent 1px 62px
  );
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 62%, transparent 100%);
}
.ah-v4 .ah-glow-1 {
  right: -200px; top: -180px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(223, 180, 112, .20), transparent 60%);
}
.ah-v4 .ah-glow-2 {
  left: -220px; bottom: -240px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 62%);
}
.ah-v4 .ah-shape { display: none; }

/* Respect reduced-motion users — pause all hero animations */.about-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.about-hero-inner .eyebrow-pill { margin-bottom: 22px; }
.about-hero-inner h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 22px;
}
.about-hero-inner h1 em {
  font-style: normal;
  color: var(--accent-ink);
}
.about-hero-inner p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  max-width: 740px;
  margin: 0 auto 36px;
}
.about-hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============== ABOUT — PROMISE BAND ============== */
.promise {
  background: var(--paper);
  padding: 110px 0;
}
.promise-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: start;
}
.promise-side {
  position: sticky;
  top: 110px;
}
.promise-side .eyebrow-pill { margin-bottom: 18px; }
.promise-side h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 22px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.promise-side h2 em { font-style: normal; color: var(--crimson); }
.promise-side p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}
.promise-cards {
  display: grid;
  gap: 18px;
}
.pcard {
  position: relative;
  /* display: grid;
  grid-template-columns: 60px minmax(0, 1fr); */
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
  overflow: hidden;
}
.pcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -22px rgba(223, 180, 112,.32);
  border-color: transparent;
}
.pcard:hover::before { transform: scaleY(1); }
.pcard-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 26px;
  flex-shrink: 0;
  transition: background .3s, color .3s, transform .3s;
}
.pcard:hover .pcard-ico {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(-6deg) scale(1.04);
}
.pcard h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 4px 0 8px;
}
.pcard p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* ============== ABOUT — MEET AUTHORS ============== */
.meet-authors {
  background: var(--cream);
  padding: 110px 0;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.ma-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}
.ma-body .eyebrow-pill { margin-bottom: 18px; }
.ma-body h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.ma-body h2 em { font-style: normal; color: var(--crimson); }
.ma-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
/* Three-point list under the "What makes us stand out" copy. */
.ma-points {
  list-style: none;
  margin: -6px 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ma-points li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.ma-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  /* Tick drawn as a mask so it inherits the navy the brand uses on gold */
  box-shadow: inset 0 0 0 1px rgba(18, 50, 84, 0.12);
}
.ma-points li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 8px;
  margin-top: -1px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
}
.ma-stat {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
  text-align: center;
  position: relative;
}
.ma-stat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--ink) 100%);
  border-radius: 18px 18px 0 0;
}
.ma-bignum {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 84px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.04em;
}
.ma-bignum span { color: var(--crimson); font-style: italic; }
.ma-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.ma-divider {
  height: 1px;
  background: var(--rule);
  margin: 26px 0 22px;
}
.ma-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.ma-row b {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -.01em;
}

/* ============== ABOUT — WHAT MAKES SPECIAL ============== */
.special-sec {
  background: var(--paper);
  padding: 110px 0 120px;
}
.special-sec .head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.special-sec .head .eyebrow-pill { margin-bottom: 18px; }
.special-sec .head h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 18px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.special-sec .head h2 em { font-style: normal; color: var(--crimson); }
.special-sec .head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto;
}
.special-sec .head p strong {
  color: var(--ink);
  font-weight: 700;
}
.special-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 56px;
}
.special-card {
  position: relative;
  text-align: center;
  padding: 40px 32px 36px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.special-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -55% auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 180, 112,.10), transparent 70%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.special-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -22px rgba(18, 50, 84,.28);
  border-color: transparent;
}
.special-card:hover::after { opacity: 1; transform: scale(1); }
.special-card > * { position: relative; z-index: 1; }
.special-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 28px;
  margin: 0 auto 22px;
  transition: background .3s, color .3s, transform .35s;
}
.special-card:hover .special-ico {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(-6deg) scale(1.04);
}
.special-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.special-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.special-foot {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.special-foot p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

/* ============== ABOUT-PAGE RESPONSIVE ============== */
/* ============== FULL PORTFOLIO PAGE (search + genres + grid) ============== */
.pf-page {
  background: var(--paper);
  padding: 100px 0 120px;
  position: relative;
  isolation: isolate;
}
.pf-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(223, 180, 112,.04), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(223, 180, 112,.06), transparent 38%);
  z-index: -1;
}
.pf-page .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.pf-page .head .eyebrow-pill { margin-bottom: 16px; }
.pf-page .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.pf-page .head h2 em { font-style: normal; color: var(--crimson); }
.pf-page .head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Toolbar — search + tabs */
.pf-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto 18px;
}
.pf-search {
  position: relative;
  width: 100%;
  max-width: 560px;
}
.pf-search > i.bi {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 18px;
  pointer-events: none;
  transition: color .25s;
}
.pf-search input {
  width: 100%;
  padding: 16px 50px 16px 54px;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 12px 24px -16px rgba(18, 50, 84,.18);
  transition: border-color .2s, box-shadow .2s;
}
.pf-search input::placeholder { color: var(--muted); opacity: .7; }
.pf-search input:hover { border-color: var(--ink-soft); }
.pf-search input:focus {
  outline: 0;
  border-color: var(--crimson);
  box-shadow: 0 0 0 4px rgba(223, 180, 112,.12);
}
.pf-search:has(input:focus) > i.bi,
.pf-search input:focus + .pf-clear { color: var(--crimson); }
.pf-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: color .2s, background .2s;
}
.pf-clear:hover { color: var(--crimson); background: rgba(223, 180, 112,.06); }

/* Result-count line */
.pf-result-line {
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 auto 36px;
  letter-spacing: 0.04em;
}
.pf-result-line span#pf-result-count,
.pf-result-line span#pf-result-filter { color: var(--ink); }
.pf-result-sep { color: var(--rule); margin: 0 4px; }

/* Card grid */
.pf-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  max-width: 1320px;
  margin: 0 auto;
}
.pf-page-grid.is-empty { display: none; }
.pf-page-card {
  background: #fff;
  border-radius: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.pf-page-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -18px rgba(18, 50, 84,.4);
}
/* Reuse .pf-cover, .pf-cat, .pf-row, .pf-info, .pf-amazon
   from the existing portfolio carousel CSS — same card body. */

/* Empty state */
.pf-empty {
  text-align: center;
  max-width: 460px;
  margin: 60px auto 0;
  padding: 40px 24px;
}
.pf-empty i.bi {
  font-size: 64px;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 18px;
}
.pf-empty h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 10px;
}
.pf-empty p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 24px;
}
/* ============== INDEPENDENT PUBLISHING CONTRACT PAGE ============== */

/* Hero overrides — slightly tighter so benefits land above fold */
.contract-hero-inner h1 strong { color: var(--crimson); font-weight: 700; }
.contract-hero-inner p strong { color: #fff; font-weight: 700; }

/* Two-column benefits band */
.contract-benefits {
  background: var(--paper);
  padding: 90px 0 100px;
  position: relative;
  isolation: isolate;
}
.contract-benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(223, 180, 112,.06), transparent 38%),
    radial-gradient(circle at 84% 78%, rgba(223, 180, 112,.08), transparent 38%);
  z-index: -1;
}
.cb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
}
.cb-col {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 40px 38px 36px;
  box-shadow: 0 18px 40px -22px rgba(18, 50, 84,.18);
  position: relative;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.cb-col::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--ink) 100%);
  border-radius: 18px 18px 0 0;
}
.cb-col:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -22px rgba(223, 180, 112,.28);
  border-color: transparent;
}
.cb-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px dashed var(--rule);
}
.cb-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 12px 22px -10px rgba(223, 180, 112,.55);
}
.cb-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
}
.cb-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.cb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.cb-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -.005em;
  transition: color .2s, transform .2s;
}
.cb-list li:hover { color: var(--ink); transform: translateX(2px); }
.cb-list li i.bi {
  color: var(--accent-ink);
  font-size: 20px;
  flex-shrink: 0;
}
.cb-list li.cb-highlight {
  background: linear-gradient(90deg, rgba(223, 180, 112,.10) 0%, rgba(223, 180, 112,0) 100%);
  padding: 6px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--crimson);
  color: var(--accent-ink);
  font-weight: 700;
}
.cb-list li.cb-highlight i.bi { color: var(--crimson); }

/* Contract page reader */
.contract-reader {
  position: relative;
  background: var(--cream);
  padding: 110px 0 120px;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
  overflow: hidden;
  isolation: isolate;
}
.contract-reader-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* paper-grain texture using stacked subtle dots */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(223, 180, 112,.06), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(223, 180, 112,.10), transparent 38%),
    repeating-linear-gradient(
      45deg,
      rgba(223, 180, 112,.03) 0,
      rgba(223, 180, 112,.03) 1px,
      transparent 1px,
      transparent 4px
    );
}
.cr-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 24px;
}
.cr-head .eyebrow-pill { margin-bottom: 16px; }
.cr-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 18px;
}
.cr-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.cr-head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 660px;
  margin: 0 auto;
}
.cr-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 48px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cr-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cr-meta-item i.bi {
  color: var(--accent-ink);
  font-size: 14px;
}
.cr-meta-divider {
  color: var(--rule);
  font-weight: 700;
}

.cr-shell {
  position: relative;
  max-width: 1180px;
  margin: 0 auto 40px;
  padding: 0 56px;
}
.contract-swiper {
  overflow: visible;        /* let page shadows breathe */
  padding: 12px 0;
}
.cr-page-frame {
  position: relative;
  display: block;
  background: #fff;
  padding: 12px 12px 28px;
  border: 1px solid #e5dfd2;
  border-radius: 4px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.6) inset,
    0 22px 40px -22px rgba(18, 50, 84,.4),
    0 1px 2px rgba(18, 50, 84,.08);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .3s;
}
.cr-page-frame::after {
  /* page-corner fold */
  content: "";
  position: absolute;
  right: 0; top: 0;
  width: 36px; height: 36px;
  background:
    linear-gradient(225deg, transparent 50%, rgba(0,0,0,.06) 50%, rgba(0,0,0,.10));
  border-bottom-left-radius: 4px;
  pointer-events: none;
}
.cr-page-frame:hover {
  transform: translateY(-6px) rotate(-.5deg);
  box-shadow:
    0 32px 60px -22px rgba(18, 50, 84,.55),
    0 0 0 2px var(--crimson);
  border-color: var(--crimson);
}
.cr-page-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  /* Subtle grayscale → full colour on hover for an "archival" feel */
  filter: contrast(1.02);
}
.cr-page-num {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px -4px rgba(18, 50, 84,.18);
}
.cr-page-zoom {
  position: absolute;
  right: 20px; bottom: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .3s, background .3s;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.5);
}
.cr-page-frame:hover .cr-page-zoom {
  opacity: 1;
  transform: scale(1);
  background: var(--crimson);
  color: var(--on-accent);
}

/* Nav buttons */
.cr-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 14px 26px -12px rgba(18, 50, 84,.32);
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.cr-nav:hover {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
  transform: translateY(-50%) scale(1.06);
}
.cr-nav i.bi { font-size: 22px; line-height: 1; }
.cr-prev { left: 0; }
.cr-next { right: 0; }
.cr-nav.swiper-button-disabled { opacity: .35; cursor: default; transform: translateY(-50%); }

/* Fraction-style pagination ("01 / 05") */
.cr-pagination {
  text-align: center;
  position: relative !important;
  bottom: auto !important;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-top: 12px;
}
.cr-pagination .swiper-pagination-current { color: var(--crimson); font-size: 22px; }
.cr-pagination .swiper-pagination-total   { color: var(--muted); }

/* Foot stamp + reassurance */
.cr-foot {
  text-align: center;
  max-width: 720px;
  margin: 32px auto 0;
}
.cr-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(223, 180, 112,.10);
  color: var(--accent-ink);
  border: 1px solid rgba(223, 180, 112,.32);
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.cr-stamp i.bi { font-size: 14px; }
.cr-foot p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ============== CONTRACT DOCUMENT — full-text legal reader ============== */
.contract-doc {
  position: relative;
  background: var(--cream);
  padding: 100px 0 120px;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
  /* NOTE: no overflow:hidden — would break sticky positioning of .cd-toc */
  isolation: isolate;
}
.contract-doc-bg {
  pointer-events: none;
  overflow: hidden;
}
.contract-doc-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(223, 180, 112,.06), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 90%, rgba(223, 180, 112,.08), transparent 60%);
}
.contract-doc-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(18, 50, 84,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
}

/* Intro band */
.cd-intro {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.cd-intro .eyebrow-pill { margin-bottom: 14px; }
.cd-intro h2 {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 500;
}
.cd-intro h2 em { color: var(--crimson); font-style: normal; }
.cd-intro p {
  font-size: 17px;
  line-height: 1.65;
  color: #123254;
  margin: 0 0 22px;
}
.cd-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Layout: sticky TOC + paper */
.cd-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  /* Items stretch by default so the sticky child inside .cd-toc has scroll room */
}

/* Table of contents — sticky lives on the inner card so the outer grid cell can stretch */
.cd-toc { min-width: 0; }
.cd-toc-inner {
  position: sticky;
  top: 100px;
  background: #fff;
  border: 1px solid rgba(18, 50, 84,.08);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 18px 38px -22px rgba(18, 50, 84,.22);
}
.cd-toc-title {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: 14px;
}
.cd-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cd-toc;
}
.cd-toc-list li { counter-increment: cd-toc; }
.cd-toc-list a {
  display: block;
  padding: 7px 0 7px 28px;
  position: relative;
  font-size: 13.5px;
  line-height: 1.4;
  color: #123254;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 30px;
  margin-left: -2px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.cd-toc-list a::before {
  content: counter(cd-toc, decimal-leading-zero);
  position: absolute;
  left: 4px;
  top: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: #123254;
  font-weight: 600;
  letter-spacing: .04em;
}
.cd-toc-list a:hover,
.cd-toc-list a:focus-visible {
  color: var(--accent-ink);
  border-left-color: var(--crimson);
  outline: none;
}
.cd-toc-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 6px 12px;
  background: rgba(223, 180, 112,.08);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.cd-toc-stamp i { font-size: 13px; }

/* The paper itself */
.cd-paper {
  background: #fff;
  border-radius: 6px;
  padding: 60px clamp(28px, 5vw, 72px) 56px;
  box-shadow:
    0 30px 70px -28px rgba(18, 50, 84,.28),
    0 1px 0 rgba(0,0,0,.04);
  border: 1px solid rgba(18, 50, 84,.06);
  position: relative;
  color: #123254;
}
.cd-paper::before,
.cd-paper::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  height: 6px;
  background: linear-gradient(to right, transparent, rgba(18, 50, 84,.10), transparent);
  border-radius: 999px;
}
.cd-paper::before { top: -10px; }
.cd-paper::after  { bottom: -10px; }

.cd-paper-head {
  text-align: center;
  margin-bottom: 36px;
}
.cd-paper-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
}
.cd-paper-title {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.2;
  color: var(--ink);
  margin: 12px 0 0;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cd-paper-rule {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--crimson);
  margin: 18px auto 0;
}

.cd-paper-lede {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-size: 17.5px;
  line-height: 1.7;
  color: #123254;
  margin: 0 0 40px;
  padding: 18px 22px;
  border-left: 3px solid var(--crimson);
  background: rgba(223, 180, 112,.04);
  border-radius: 0 8px 8px 0;
}

/* Sections */
.cd-sec {
  padding: 32px 0;
  border-top: 1px solid rgba(18, 50, 84,.08);
  scroll-margin-top: 100px;
}
.cd-sec:first-of-type { border-top: none; padding-top: 8px; }
.cd-sec-h {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 22px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 10px;
  letter-spacing: -0.005em;
}
.cd-sec-no {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: .02em;
}
.cd-sec-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: #123254;
  margin: 0 0 18px;
}

/* Clause row: 2.1, 2.2, etc. */
.cd-clause {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0 16px;
  padding: 14px 0;
  align-items: start;
}
.cd-clause-no {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: .02em;
  padding-top: 3px;
}
.cd-clause-body p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #123254;
  margin: 0 0 10px;
}
.cd-clause-body p:last-child { margin-bottom: 0; }

/* Lists inside clauses */
.cd-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.cd-list li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #123254;
}
.cd-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
}

/* Definitions list (Section 1) */
.cd-defs {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.cd-defs dt {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
}
.cd-defs dd {
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 2px solid rgba(223, 180, 112,.18);
  font-size: 15.5px;
  line-height: 1.7;
  color: #123254;
}

/* Paper footer */
.cd-paper-foot {
  margin-top: 40px;
  padding-top: 28px;
  text-align: center;
}
.cd-paper-foot .cd-paper-rule { margin: 0 auto 24px; }
.cd-paper-foot p {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: #123254;
  margin: 0 0 18px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.cd-paper-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  transition: background .2s ease, transform .2s ease;
}
.cd-paper-mail:hover {
  background: var(--crimson);
  color: var(--on-accent);
  transform: translateY(-1px);
}
.cd-paper-mail i { font-size: 15px; }

/* Responsive */
@media (max-width: 1100px) {
  .cd-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .cd-layout { grid-template-columns: 1fr; gap: 24px; }
  .cd-toc-inner {
    position: static;
    padding: 18px 16px;
  }
  .cd-toc-list a { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 640px) {
  .contract-doc { padding: 70px 0 90px; }
  .cd-paper { padding: 44px 22px 40px; }
  .cd-paper-lede { padding: 14px 16px; font-size: 16px; }
  .cd-clause { grid-template-columns: 46px 1fr; }
  .cd-clause-no { font-size: 12px; }
  .cd-sec { padding: 26px 0; }
  .cd-sec-h { font-size: 19px; }
}

/* Print: clean, paper-only output */
@media print {
  @page { margin: 18mm 15mm; }

  /* Hide everything that isn't the contract section */
  body > *:not(.contract-doc) { display: none !important; }

  /* Hide non-document chrome inside the section */
  .contract-doc-bg,
  .cd-intro,
  .cd-toc,
  .cd-actions,
  .cd-paper-mail { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .contract-doc {
    background: #fff !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
  }
  .cd-layout {
    display: block !important;
    grid-template-columns: none !important;
  }
  .cd-paper {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    color: #000 !important;
    max-width: 100% !important;
  }
  .cd-paper::before,
  .cd-paper::after { display: none !important; }
  .cd-paper-lede {
    background: none !important;
    border-left: 2px solid #000 !important;
    color: #000 !important;
  }

  /* Pagination hints — keep clauses and sections intact across pages */
  .cd-sec, .cd-clause, .cd-defs > dt + dd {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cd-sec-h {
    break-after: avoid;
    page-break-after: avoid;
  }

  a { color: #000 !important; text-decoration: none !important; }
}

/* ============== SERVICE PAGES — shared layout ============== */

/* ---------- HERO — split layout, cream background, decorative accents ---------- */
.svc-hero {
  position: relative;
  padding: 100px 0 90px;
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid #ede7d9;
}
.svc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, rgba(223, 180, 112,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(223, 180, 112,.12), transparent 60%);
}
.svc-hero-bg::before {
  /* Subtle diagonal paper-grain */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(223, 180, 112,.025) 0,
    rgba(223, 180, 112,.025) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity: .8;
}
.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.svc-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(223, 180, 112,.22);
  border-radius: 999px;
  padding: 8px 18px 8px 12px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 26px;
  box-shadow: 0 8px 18px -10px rgba(223, 180, 112,.25);
}
.svc-hero-tag i.bi {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: var(--on-accent);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
}

.svc-hero-content h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 22px;
}
.svc-hero-content h1 em {
  font-style: normal;
  color: var(--accent-ink);
}
.svc-hero-content > p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 0 32px;
}
.svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

/* Trust stats row under the CTAs */
.svc-hero-stats {
  display: flex;
  gap: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.svc-hero-stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.svc-hero-stat b em {
  font-style: italic;
  color: var(--accent-ink);
}
.svc-hero-stat span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Media side — image with offset accent rectangle */
.svc-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
}
.svc-hero-image {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 36px 70px -28px rgba(18, 50, 84, 0.5);
  z-index: 2;
}
.svc-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.svc-hero-media:hover .svc-hero-image img {
  transform: scale(1.03);
}
.svc-hero-accent {
  position: absolute;
  inset: 28px -28px -28px 28px;/*
  border: 2px solid var(--crimson);*/
  border-radius: 18px;
  z-index: 1;
  opacity: .6;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.svc-hero-media:hover .svc-hero-accent {
  transform: translate(-6px, -6px);
}
.svc-hero-badge {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 14px 26px -10px rgba(18, 50, 84,.45);
}
.svc-hero-badge i.bi { color: var(--crimson); font-size: 14px; }

/* Intro split uses the universal .split component — tighten vertical padding */
.svc-split { padding: 90px 0 100px; }

/* ---------- OFFERINGS · 2x2 card grid ---------- */
.svc-offer {
  background: var(--cream);
  padding: 100px 0 110px;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.svc-offer .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.svc-offer .head .eyebrow-pill { margin-bottom: 18px; }
.svc-offer .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.svc-offer .head h2 em { font-style: normal; color: var(--crimson); }
.svc-offer .head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}
.svc-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.svco-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  overflow: hidden;
}
.svco-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.svco-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 50px -22px rgba(223, 180, 112,.28);
  border-color: transparent;
}
.svco-card:hover::before { transform: scaleY(1); }
.svco-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
  transition: background .3s, color .3s, transform .3s;
}
.svco-card:hover .svco-ico {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(-6deg) scale(1.04);
}
.svco-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.svco-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- 3-COLUMN OFFER GRID variant (book-design page) ---------- */
.svc-offer-grid.svc-offer-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.svco-card-tall {
  padding: 28px 28px 26px;
  gap: 16px;
  min-height: 360px;
}
.svco-card-tall .svco-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.svco-card-tall .svco-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  opacity: .18;
  letter-spacing: -.02em;
  transition: opacity .35s, color .35s;
}
.svco-card-tall:hover .svco-num {
  color: var(--accent-ink);
  opacity: .55;
}
.svco-card-tall h3 {
  font-size: 20px;
  line-height: 1.25;
}
.svco-card-tall .svco-body {
  position: relative;
  max-height: 168px;
  overflow-y: auto;
  padding-right: 8px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 180, 112,.4) transparent;
  -webkit-overflow-scrolling: touch;
}
.svco-card-tall .svco-body::-webkit-scrollbar {
  width: 5px;
}
.svco-card-tall .svco-body::-webkit-scrollbar-track {
  background: transparent;
}
.svco-card-tall .svco-body::-webkit-scrollbar-thumb {
  background: rgba(223, 180, 112,.35);
  border-radius: 4px;
}
.svco-card-tall .svco-body::-webkit-scrollbar-thumb:hover {
  background: var(--crimson);
}
.svco-card-tall .svco-body p {
  font-size: 14px;
  line-height: 1.75;
}
.svc-offer-design .svco-card {
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fdfaf5 100%);
}
.svc-offer-design .svco-card::before {
  width: 3px;
}

/* ---------- PROCESS · numbered steps on dark ---------- */
.svc-process {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: #fff;
  padding: 110px 0 120px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.svc-process::before,
.svc-process::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.svc-process::before {
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(223, 180, 112,.20), transparent 70%);
}
.svc-process::after {
  bottom: -140px; right: -120px;
  background: radial-gradient(circle, rgba(223, 180, 112,.16), transparent 70%);
}
.svc-process > * { position: relative; z-index: 1; }
.svc-process .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.svc-process .head .eyebrow-pill { margin-bottom: 18px; }
.svc-process .head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0;
}
.svc-process .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.svc-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.svcp-step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s;
}
.svcp-step:hover {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(223, 180, 112,.10) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(223, 180, 112,.4);
}
.svcp-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--accent-ink);
  letter-spacing: -.04em;
}
.svcp-body { min-width: 0; }
.svcp-ico {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(223, 180, 112,.16);
  color: var(--accent-ink);
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 10px;
}
.svcp-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: #fff;
  margin: 0 0 8px;
}
.svcp-body p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  margin: 0;
}

/* ---------- DELIVERABLES card inside the team split ---------- */
.svc-deliver .split-body { gap: 0; }
.svc-deliver-list {
  margin: 24px 0 28px;
  padding: 22px 26px;
  background: rgba(223, 180, 112,.04);
  border: 1px dashed rgba(223, 180, 112,.28);
  border-radius: 14px;
}
.svc-deliver-list .sdl-head {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.svc-deliver-list .sdl-head em {
  font-style: italic;
  color: var(--accent-ink);
}
.svc-deliver-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.svc-deliver-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.svc-deliver-list li i.bi {
  color: var(--accent-ink);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============== LBF · HOME-PAGE CAROUSEL (auto-ticker) ============== */
.bfc-sec {
  background: var(--paper);
  padding: 80px 0 90px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
/* The eyebrow pill and the gallery link that used to sit either side of this
   heading are gone, so the row centres its one remaining child instead of
   spreading a lone heading across the full width. */
.bfc-head {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.bfc-head .eyebrow-pill { margin-bottom: 14px; }
.bfc-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.bfc-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.bfc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 4px;
  transition: color .25s, border-color .25s, gap .25s;
  flex-shrink: 0;
}
.bfc-link:hover {
  color: var(--accent-ink);
  border-color: var(--crimson);
  gap: 12px;
}
.bfc-link i.bi { font-size: 16px; transition: transform .25s; }
.bfc-link:hover i.bi { transform: translateX(2px); }

.bfc-swiper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 6px 0 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.bfc-swiper .swiper-wrapper {
  /* Linear timing for the conveyor-belt feel */
  transition-timing-function: linear !important;
}
.bfc-slide {
  position: relative;
  width: 240px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0px 15px 11px -16px rgba(18, 50, 84, .32);
  cursor: zoom-in;
  display: block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.bfc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.bfc-slide:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -16px rgba(18, 50, 84,.45);
}
.bfc-slide:hover img { transform: scale(1.06); }
.bfc-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(223, 180, 112,.55), rgba(18, 50, 84,.55));
  color: #fff;
  opacity: 0;
  transition: opacity .35s;
}
.bfc-slide:hover .bfc-overlay { opacity: 1; }
.bfc-overlay i.bi {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.35);
  font-size: 22px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: scale(.7);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.bfc-slide:hover .bfc-overlay i.bi { transform: scale(1); }

/* The cover lightbox shows the image only. Dropping the data-glightbox titles
   empties the caption, but GLightbox still builds the description panel, which
   leaves a blank ~63px strip under the picture - so hide the panel itself. */
.glightbox-container .gslide-description { display: none; }
/* ============== LONDON BOOK FAIR PAGE ============== */

/* Quick stats band sitting under the LBF hero */
.lbf-stats {
  background: #fff;
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.lbf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.lbf-stat {
  position: relative;
  padding: 14px 8px;
}
.lbf-stat + .lbf-stat::before {
  content: "";
  position: absolute;
  left: -12px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--rule);
}
.lbf-stat-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.04em;
}
.lbf-stat-num span:not([data-counter-target]) {
  font-style: italic;
  color: var(--accent-ink);
  margin-left: 2px;
}
.lbf-stat-lbl {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* Spotlights · trust pillars (replaces the stats counters) */
.author-trust {
  background: #fff;
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.at-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.at-pillar {
  position: relative;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-align: left;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.at-pillar:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 24px 40px -22px rgba(223, 180, 112,.22);
}
.at-ico {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(223, 180, 112,.10) 0%, rgba(223, 180, 112,.06) 100%);
  color: var(--accent-ink);
  font-size: 22px;
  margin-bottom: 16px;
  transition: transform .3s, color .3s, background .3s;
}
.at-pillar:hover .at-ico {
  transform: rotate(-6deg) scale(1.06);
  background: var(--crimson);
  color: var(--on-accent);
}
.at-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.at-desc {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 980px) {
  .at-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 540px) {
  .at-grid { grid-template-columns: 1fr; }
  .author-trust { padding: 56px 0; }
}

/* Featured video band */
.lbf-video-sec {
  background: var(--cream);
  padding: 110px 0;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.lbf-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.lbf-video-side .eyebrow-pill { margin-bottom: 18px; }
.lbf-video-side h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 22px;
}
.lbf-video-side h2 em { font-style: normal; color: var(--crimson); }
.lbf-video-side > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.lbf-video-side strong { color: var(--ink); font-weight: 700; }

.lbf-meta {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lbf-meta li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.lbf-meta li i.bi {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--accent-ink);
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(223, 180, 112,.18);
}

.lbf-video-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px -22px rgba(18, 50, 84,.45);
  aspect-ratio: 16 / 10;
}
.lbf-video-frame::after {
  content: "";
  position: absolute;
  inset: -12px -12px auto auto;
  width: 110px;
  height: 110px;
  border: 2px solid var(--crimson);
  border-radius: 18px;
  pointer-events: none;
  opacity: .5;
}
.lbf-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.lbf-video-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(223, 180, 112,.92);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(223, 180, 112,.6);
}
.lbf-video-tag i.bi {
  font-size: 13px;
  animation: lbfBlink 1.6s ease-in-out infinite;
}
@keyframes lbfBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Photo gallery — varied tile sizes for an editorial feel */
.lbf-gallery {
  background: #fff;
  padding: 110px 0 120px;
  position: relative;
  isolation: isolate;
}
.lbf-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(223, 180, 112,.05), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(223, 180, 112,.08), transparent 40%);
  z-index: -1;
}
.lbf-gallery .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.lbf-gallery .head .eyebrow-pill { margin-bottom: 16px; }
.lbf-gallery .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.lbf-gallery .head h2 em { font-style: normal; color: var(--crimson); }
.lbf-gallery .head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
}

.lbf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.lbf-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  display: block;
  aspect-ratio: 3 / 4;            /* portrait — matches the source photos */
  background: var(--paper-2);
  box-shadow: 0 14px 30px -14px rgba(18, 50, 84,.25);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  cursor: zoom-in;
}
.lbf-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.lbf-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -16px rgba(18, 50, 84,.4);
}
.lbf-tile:hover img { transform: scale(1.05); }
.lbf-tile-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(223, 180, 112,.65), rgba(18, 50, 84,.65));
  color: #fff;
  font-size: 32px;
  opacity: 0;
  transition: opacity .35s;
}
.lbf-tile:hover .lbf-tile-overlay { opacity: 1; }
.lbf-tile-overlay i.bi {
  transform: scale(.7);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  background: rgba(255,255,255,.18);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lbf-tile:hover .lbf-tile-overlay i.bi { transform: scale(1); }

/* GLightbox theme overrides — match brand colours */
.glightbox-clean .gbtn,
.glightbox-clean .gnext,
.glightbox-clean .gprev,
.glightbox-clean .gclose {
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
  transition: background .2s, transform .2s;
}
.glightbox-clean .gbtn:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover,
.glightbox-clean .gclose:hover {
  background: var(--crimson);
  transform: scale(1.06);
}
.glightbox-clean .gslide-title {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
}
.glightbox-clean .gslide-desc {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}
.goverlay { background: rgba(18, 50, 84, .85) !important; }

/* CTA strip — "Your Bestseller Starts Here" */
.lbf-cta {
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: var(--on-accent);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.lbf-cta::before,
.lbf-cta::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .25;
}
.lbf-cta::before { top: -100px; left: -60px; background: radial-gradient(circle, #fff, transparent 60%); }
.lbf-cta::after  { bottom: -100px; right: -60px; background: radial-gradient(circle, #fff, transparent 60%); }
.lbf-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}
.lbf-cta-text {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
}
.lbf-cta-text > i.bi {
  font-size: 30px;
  color: #fff;
  flex-shrink: 0;
  animation: lbfTwinkle 2.4s ease-in-out infinite;
}
@keyframes lbfTwinkle {
  0%, 100% { transform: rotate(0deg)  scale(1);    opacity: 1;   }
  50%      { transform: rotate(15deg) scale(1.15); opacity: .85; }
}
.lbf-cta-text h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  letter-spacing: -.012em;
}
.lbf-cta-text h3 em {
  font-style: normal;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.5);
  text-underline-offset: 4px;
}
.lbf-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* ============== MARQUEE STRIP (continuous text ticker) ============== */
.marquee-strip {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.marquee-strip::before,
.marquee-strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink) 0%, transparent 100%);
}
.marquee-strip::after {
  right: 0;
  background: linear-gradient(270deg, var(--ink) 0%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: marqueeRun 50s linear infinite;
  will-change: transform;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  letter-spacing: -.005em;
}
.marquee-emoji {
  display: inline-block;
  margin-right: 10px;
  font-style: normal;
  filter: drop-shadow(0 0 12px rgba(223, 180, 112,.4));
}
.marquee-dot {
  color: var(--accent-ink);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* ============== DISCLAIMER TOP-BAR MARQUEE ============== */
.disclaimer-bar {
  position: relative;
  background: var(--crimson, #dfb470);
  color: var(--on-accent);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.3;
  z-index: 60;
}
.disclaimer-bar::before,
.disclaimer-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;
}
.disclaimer-bar::before {
  left: 0;
  background: linear-gradient(90deg, var(--crimson, #dfb470) 0%, transparent 100%);
}
.disclaimer-bar::after {
  right: 0;
  background: linear-gradient(270deg, var(--crimson, #dfb470) 0%, transparent 100%);
}
.disclaimer-bar-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: disclaimerBarRun 60s linear infinite;
  will-change: transform;
}
.disclaimer-bar:hover .disclaimer-bar-track { animation-play-state: paused; }
@keyframes disclaimerBarRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.disclaimer-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  letter-spacing: .005em;
  color: #fff;
}
.disclaimer-bar-item i {
  font-size: 14px;
  opacity: .92;
}
.disclaimer-bar-item strong { color: #fff; font-weight: 700; }
.disclaimer-bar-dot {
  color: rgba(255,255,255,.55);
  font-size: 7px;
  line-height: 1;
  flex-shrink: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (max-width: 600px) {
  .disclaimer-bar { padding: 7px 0; font-size: 12.5px; }
  .disclaimer-bar-track { gap: 16px; animation-duration: 50s; }
}
@media (prefers-reduced-motion: reduce) {
  .disclaimer-bar-track { animation: none; }
}

/* ============== CONTACT PAGE — INFO + FORM ============== */
.contact-sec {
  background: var(--cream);
  padding: 110px 0 120px;
  border-bottom: 1px solid #ede7d9;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}
.contact-info {
  position: sticky;
  top: 110px;
}
.contact-info .eyebrow-pill { margin-bottom: 18px; }
.contact-info h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 22px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.contact-info h2 em { font-style: normal; color: var(--crimson); }
.contact-info > p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

/* Contact info cards */
.contact-cards {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ccard {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.ccard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--crimson);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.ccard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(223, 180, 112,.32);
  border-color: transparent;
}
.ccard:hover::before { transform: scaleY(1); }
.ccard-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: background .3s, color .3s, transform .3s;
}
.ccard:hover .ccard-ico {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(-6deg) scale(1.04);
}
.ccard-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ccard-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ccard-value {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -.005em;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
}
.ccard:hover .ccard-value { color: var(--crimson); }
.ccard-addr {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The same cards also sit in the left column of the dark "begin your book"
   band, under the numbered steps. There they take the translucent treatment
   the steps use rather than the white card of the contact page. */
.bestsec .contact-cards {
  margin: 0;
  gap: 16px;
}
.bestsec .ccard {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .02) 100%);
  border-color: rgba(255, 255, 255, .10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bestsec .ccard:hover {
  background: linear-gradient(135deg, rgba(223, 180, 112, .10) 0%, rgba(255, 255, 255, .04) 100%);
  border-color: rgba(223, 180, 112, .35);
  box-shadow: 0 18px 40px -18px rgba(223, 180, 112, .45);
}
.bestsec .ccard-ico {
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: var(--on-accent);
  box-shadow: 0 10px 22px -8px rgba(223, 180, 112, .55);
}
.bestsec .ccard-label {
  color: rgba(255, 255, 255, .62);
}
.bestsec .ccard-value {
  color: #fff;
}
.bestsec .ccard-addr {
  color: rgba(255, 255, 255, .75);
}

.contact-hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(223, 180, 112,.08);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
}
.contact-hours i.bi {
  color: var(--accent-ink);
  font-size: 16px;
}

/* Form on light background — extends .best-form */
.contact-form {
  background: #fff;
  color: var(--ink);
  padding: 44px 40px;
  border-radius: 16px;
  box-shadow: 0 24px 50px -22px rgba(18, 50, 84,.18);
  position: relative;
  overflow: hidden;
}
.contact-form::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--ink) 100%);
}
.contact-form .req {
  font-style: normal;
  color: var(--accent-ink);
  margin-left: 2px;
}

/* Trust footer line under form */
/* Consent checkbox, sits directly above the submit button on every form.
   The form label rules further up are more specific than a lone class
   (.best-form label stacks its children in a column, and .best-form label>span
   uppercases them), so these are scoped the same way to win cleanly rather
   than reaching for !important. */
.form-consent,
.best-form label.form-consent,
.popup-form label.form-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 2px 0 18px;
  cursor: pointer;
}
.form-consent > span,
.best-form label.form-consent > span,
.popup-form label.form-consent > span {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}
.form-consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.form-consent a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent a:hover { color: var(--accent-ink); }

.contact-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 24px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.contact-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.contact-trust i.bi {
  color: var(--accent-ink);
  font-size: 15px;
}
/* ============== SPLIT (universal image / text section) ==============
   Markup contract:
   <section class="split [reverse] [alt-bg] [tight]">
     <div class="wrap">
       <div class="split-grid">
         <div class="split-media">
           <img src="..." alt="...">
           <div class="split-badge"><span class="num">01</span><span class="lbl">Label</span></div>  // optional
         </div>
         <div class="split-body">
           <span class="eyebrow-pill">...</span>
           <h2>... <em>...</em></h2>
           <p>...</p>
           <ul class="split-list"><li><i class="bi bi-..."></i> ...</li></ul>   // optional
           <a class="btn btn-red" href="#">CTA <span class="arr">→</span></a>     // optional
         </div>
       </div>
     </div>
   </section>
   .reverse  → flips image to the right
   .alt-bg   → cream background variant
   .tight    → reduces vertical padding
============================================================== */
.split {
  background: var(--paper);
  padding: 110px 0;
  position: relative;
}
.split.alt-bg {
  background: var(--cream);
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.split.tight { padding: 80px 0; }

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split.reverse .split-grid { grid-template-columns: 1fr 1fr; }
.split.reverse .split-media { order: 2; }
.split.reverse .split-body  { order: 1; }

.split-media {
  position: relative;
  border-radius: 14px;
  overflow: visible;
}
.split-media img {
  width: 100%;
  height: auto;
  /* aspect-ratio: 4 / 3; */
  object-fit: cover;
  display: block;
  border-radius: 14px;
  /* box-shadow: 0 30px 60px -25px rgba(18, 50, 84,.45); */
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
/*.split-media::after {
  content: "";
  position: absolute;
  left: -18px;
  top: -18px;
  width: 110px;
  height: 110px;
  border: 2px solid var(--crimson);
  border-radius: 14px;
  z-index: -1;
  opacity: .55;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}*/
.split.reverse .split-media::after {
  left: auto;
  right: -18px;
}
.split:hover .split-media img { transform: scale(1.015); }
.split:hover .split-media::after { transform: translate(-4px, -4px); }
.split.reverse:hover .split-media::after { transform: translate(4px, -4px); }

.split-badge {
  position: absolute;
  right: -18px;
  bottom: -18px;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 18px 32px -14px rgba(18, 50, 84,.45);
  min-width: 140px;
}
.split.reverse .split-badge {
  right: auto;
  left: -18px;
}
.split-badge .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--accent-ink);
}
.split-badge .lbl {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.split-body .eyebrow-pill { margin-bottom: 20px; }
.split-body h2 {
  font-family: var(--serif);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.split-body h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.split-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 20px;
}
.split-body p.emph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}

.split-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 28px;
  display: grid;
  gap: 12px;
}
.split-list li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-items: center;
}
.split-list li i.bi {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--accent-ink);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  margin-top: 1px;
  transition: background .25s, color .25s;
}
.split-list li:hover i.bi {
  background: var(--crimson);
  color: var(--on-accent);
}
.split.alt-bg .split-list li i.bi { background: #fff; }

/* Bullets that carry a bold label plus a line of detail, rather than one line.
   The base rule centres the icon against a single line; with two lines that
   leaves it floating in the middle, so these align to the top instead. */
.split-list.has-detail li {
  align-items: flex-start;
}
.split-list.has-detail li i.bi {
  margin-top: 1px;
}
.split-list.has-detail li b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.split-list.has-detail li span {
  display: block;
  color: var(--text);
}
/* ============== BESTSELLER PROCESS (4 steps · book + 2x2 cards) ============== */
.bsprocess {
  background: var(--cream);
  padding: 110px 0 120px;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.bsp-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}
.bsp-head .eyebrow-pill {
  margin-bottom: 22px;
}
.bsp-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 28px;
}
.bsp-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}

.bsp-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}
.bsp-image {
  position: sticky;
  top: 110px;
  align-self: start;
}
.bsp-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(18, 50, 84,.18));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.bsp-image:hover img { transform: translateY(-4px) rotate(-1deg); }

.bsp-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 32px;
}
.bsp-step {
  position: relative;
  padding-top: 4px;
}
.bsp-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 18px;
  box-shadow: 0 14px 24px -14px rgba(223, 180, 112,.45);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s;
}
.bsp-step:hover .bsp-icon {
  background: var(--crimson);
  color: var(--on-accent);
  transform: translateY(-3px) rotate(-6deg);
}
.bsp-step-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}
.bsp-step-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--crimson);
}
.bsp-step h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 12px;
}
.bsp-num {
  color: var(--accent-ink);
  font-weight: 700;
  margin-right: 6px;
}
.bsp-step p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

.bsprocess .cta-row {
  margin-top: 64px;
}
/* ============== TOP CATEGORIES (compact genre tiles) ============== */
.topgenres {
  background: var(--paper);
  padding: 110px 0;
}
.topgenres .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.topgenres .head .eyebrow-pill { margin-bottom: 16px; }
.topgenres .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
}
.topgenres .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.topgenres .head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto;
  max-width: 600px;
}

.tg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tg-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  color: var(--ink);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  overflow: hidden;
}
.tg-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--crimson);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.tg-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 16px 28px -16px rgba(18, 50, 84,.28);
}
.tg-tile:hover::before { transform: scaleY(1); }

.tg-ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background .3s, color .3s, transform .3s;
}
.tg-tile:hover .tg-ico {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(-6deg) scale(1.04);
}
.tg-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.005em;
  flex: 1;
  min-width: 0;
}
.tg-arrow {
  color: var(--muted);
  font-size: 16px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .25s, transform .25s, color .25s;
  flex-shrink: 0;
}
.tg-tile:hover .tg-arrow {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--accent-ink);
}

/* ---- Genres: 3-column checklist ---- */
.genre-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.genre-col {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px 28px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.genre-col:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 18px 32px -18px rgba(18, 50, 84,.22);
}
.genre-col-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 22px;
}
.genre-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.genre-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.genre-check {
  color: var(--accent-ink);
  font-size: 18px;
  line-height: 1.35;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.genre-text {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
}

/* ============== PORTFOLIO (Swiper · full-bleed ticker) ============== */
.portfolio-sec {
  background: var(--paper);
  padding: 110px 0 120px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.portfolio-sec .head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.portfolio-sec .head .eyebrow-pill {
  margin-bottom: 16px;
}
.portfolio-sec .head h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.portfolio-sec .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.portfolio-sec .head p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
}

/* Full-width slider — escapes any .wrap padding */
.portfolio-swiper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 8px 0 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.portfolio-swiper .swiper-wrapper {
  /* Linear easing for the conveyor-belt feel */
  transition-timing-function: linear !important;
}
/* Bare covers rather than cards: no white panel, no badge, no title row - the
   artwork carries the section. The padding gives the drop shadow and the hover
   lift somewhere to go without the carousel clipping them. */
.pf-slide {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 14px;
  height: auto;
}
.pf-cover {
  position: relative;
  display: block;
  /* Seven of the eight covers are exactly 574x940; holding that ratio keeps the
     row even, and the odd one out only loses a sliver either side. */
  aspect-ratio: 574 / 940;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 22px 45px -20px rgba(18, 50, 84, .65);
  transition: transform .4s ease, box-shadow .4s ease;
}
.pf-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.pf-slide:hover .pf-cover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -22px rgba(18, 50, 84, .75);
}
.pf-cat {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s, transform .25s;
}
.pf-slide:hover .pf-cat { opacity: 1; transform: translateY(0); }

.pf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px 4px;
}
.pf-info { flex: 1; min-width: 0; }
.pf-info h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-info span {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-amazon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #131A22;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.pf-amazon svg { width: 22px; height: 22px; display: block; }
.pf-amazon:hover {
  background: #FF9900;
  transform: scale(1.08);
  box-shadow: 0 12px 22px -10px rgba(223, 180, 112,.6);
}
/* Reusable tab/nav styles preserved for future portfolio.php page */
.pf-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 48px;
  max-width: 980px;
}
.pf-tab {
  appearance: none;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.005em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.pf-tab:hover { border-color: var(--ink); transform: translateY(-1px); }
.pf-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pf-tab.is-active:hover { background: var(--crimson); border-color: var(--crimson); color: var(--on-accent); }

/* ============== SERVICES (icon cards) ============== */
.services-sec {
  background: var(--paper-2);
  padding: 110px 0;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.services-sec .head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}
.services-sec .head .eyebrow-pill {
  margin-bottom: 18px;
}
.services-sec .head h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.services-sec .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.services-sec .head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* The whole card is the anchor - the old "Explore Service" link inside it was
   removed, so the click target is the card itself. */
.svc-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 38px 34px 34px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s,
              border-color .35s;
}
.svc-card:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -55% auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 180, 112,.12), rgba(223, 180, 112,0) 70%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.svc-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--ink));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px -28px rgba(18, 50, 84,.35);
  border-color: transparent;
}
.svc-card:hover::before { opacity: 1; transform: scale(1); }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card > * { position: relative; z-index: 1; }

.svc-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--ink);
  margin-bottom: 26px;
  position: relative;
  transition: background .35s, color .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.svc-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(223, 180, 112,.35);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.85) rotate(0deg);
  transition: opacity .35s, transform .8s linear;
}
.svc-icon svg {
  width: 30px;
  height: 30px;
}
.svc-card:hover .svc-icon {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(-6deg) scale(1.04);
}
.svc-card:hover .svc-icon::after {
  opacity: 1;
  transform: scale(1) rotate(180deg);
}

.svc-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 14px;
  transition: color .25s;
}
.svc-card:hover h3 {
  color: var(--accent-ink);
}
.svc-card p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 26px;
  flex: 1;
}
/* Last element now that the link is gone - no dead space under the copy. */
.svc-card > p:last-child { margin-bottom: 0; }
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  color: var(--ink);
  padding: 4px 0 6px;
  position: relative;
  transition: color .25s;
}
.svc-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform-origin: right center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
}
.svc-card:hover .svc-link {
  color: var(--accent-ink);
}
.svc-card:hover .svc-link::before {
  transform-origin: left center;
  animation: svcUnderline .55s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes svcUnderline {
  0% { transform: scaleX(1); transform-origin: right center; }
  50% { transform: scaleX(0); transform-origin: right center; }
  51% { transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
.svc-link .svc-arr {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  transition: transform .3s, background .25s;
}
.svc-card:hover .svc-link .svc-arr {
  background: var(--crimson);
  color: var(--on-accent);
  transform: translateX(4px);
}
/* ============== SHARED CTA ROW ============== */
.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
  gap: 16px;
}
.cta-row .btn {
  padding: 16px 32px;
  font-size: 14.5px;
}

/* ============== CATALOGUE (Books We've Helped) ============== */
.catalogue {
  background: var(--paper);
  padding: 110px 0;
  border-top: 1px solid var(--rule);
}
.catalogue .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 64px;
}
.catalogue .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.catalogue .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
}
.catalogue .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.catalogue .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.cbook {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cbook:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink);
}
.cbook-cover {
  aspect-ratio: 2/3;
  border-radius: 4px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  text-align: left;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 32px -14px rgba(18, 50, 84,.32);
}
.cbook-cover::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}
.cbook-cover .cb-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .85;
}
.cbook-cover .cb-ttl {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.18;
  margin-top: auto;
  letter-spacing: -.005em;
}
.cbook-cover .cb-num {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 12px;
  opacity: .7;
}
.cbook h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -.005em;
}
.cbook .cb-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.cbook .cb-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  padding: 12px 0 4px;
  border-top: 1px solid var(--rule);
  transition: color .2s, gap .2s;
}
.cbook .cb-more:hover {
  color: var(--ink);
  gap: 12px;
}
.cbook .cb-more .arr { font-size: 13px; }

/* Catalogue cover variants — reuse portfolio palette + a couple more */
.cbook-cover.p1 { background: linear-gradient(180deg, #123254 0%, #123254 100%); }
.cbook-cover.p2 { background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%); color: #dfb470; }
.cbook-cover.p3 { background: linear-gradient(180deg, #123254 0%, #123254 100%); color: #dfb470; }
.cbook-cover.p4 { background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%); }
.cbook-cover.p5 { background: linear-gradient(180deg, #123254 0%, #123254 100%); }
.cbook-cover.p6 { background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%); color: #dfb470; }
.cbook-cover.p7 { background: linear-gradient(180deg, #123254 0%, #123254 100%); }
.cbook-cover.p8 { background: linear-gradient(180deg, #123254 0%, #123254 100%); color: #dfb470; }
.cbook-cover.p9 { background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%); color: #fbf6ed; }
.cbook-cover.p10 { background: linear-gradient(180deg, #dfb470 0%, #dfb470 100%); }
.cbook-cover.p11 { background: linear-gradient(180deg, #123254 0%, #123254 100%); }
.cbook-cover.p12 { background: linear-gradient(180deg, #123254 0%, #123254 100%); color: #dfb470; }

/* ============== UPCOMING AUTHORS ============== */
.upcoming {
  padding: 110px 0;
  background: var(--cream);
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.upcoming .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.upcoming .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.upcoming .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
}
.upcoming .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.upcoming .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
}
.ucard {
  text-align: left;
  display: flex;
  flex-direction: column;
}
.ucover {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-2);
  margin-bottom: 18px;
  box-shadow: 0 24px 44px -18px rgba(18, 50, 84,.4);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.ucard:hover .ucover {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -16px rgba(18, 50, 84,.5);
}
.ucover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.ucard:hover .ucover img { transform: scale(1.05); }
.ucover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
}
.ucard:hover .ucover::after { opacity: 1; }
.ubadge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--crimson);
  color: var(--on-accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  box-shadow: 0 6px 12px -4px rgba(223, 180, 112,.5);
}
.ubadge i.bi { font-size: 11px; }
.ucard h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}
.ucard .umeta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============== MOST PUBLISHED CATEGORIES ============== */
.topcats {
  background: #fff;
  padding: 110px 0;
}
.topcats .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 64px;
}
.topcats .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.topcats .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
}
.topcats .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.topcats .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}
.topcats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tcat {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 36px 32px 32px;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  overflow: hidden;
}
.tcat::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px;
  height: 0;
  background: var(--crimson);
  transition: height .35s ease;
}
.tcat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink);
}
.tcat:hover::before { height: 100%; }
.tcat .tc-num {
  position: absolute;
  top: 22px;
  right: 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.16em;
}
.tcat .tc-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lilac);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--ink);
  transition: background .25s, color .25s;
}
.tcat:hover .tc-ico {
  background: var(--crimson);
  color: var(--on-accent);
}
.tcat .tc-ico svg { width: 28px; height: 28px; }
.tcat h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.18;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -.005em;
}
.tcat .tc-stat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  margin-bottom: 14px;
}
.tcat p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* ============== COST / PRICING ============== */
.cost {
  background: var(--cream);
  padding: 120px 0;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
.cost-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.cost-left {
  position: sticky;
  top: 120px;
}
.cost-left .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.cost-left h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 28px;
}
.cost-left h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.cost-divider {
  width: 64px;
  height: 2px;
  background: var(--ink);
}
.cost-right p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.cost-right p.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
}
.cost-right p.lead em {
  font-style: italic;
  color: var(--accent-ink);
}
.cost-right p.emph {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 32px;
}

/* ============== WHY AUTHORS COME BACK ============== */
.whyback {
  background: var(--ink);
  color: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.whyback::before {
  content: "";
  position: absolute;
  top: -100px; left: -120px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 180, 112,.18), transparent 70%);
  pointer-events: none;
}
.whyback-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 80px;
  align-items: start;
  position: relative;
}
.wb-left .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.wb-left h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
}
.wb-left h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.wb-left .lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  font-family: var(--serif);
  font-weight: 300;
}
.wb-right {
  display: grid;
  gap: 22px;
}
.wb-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: rgba(255,255,255,.03);
  transition: background .25s, border-color .25s;
}
.wb-card:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--crimson);
}
.wb-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(223, 180, 112,.14);
  display: grid;
  place-items: center;
  color: var(--accent-ink);
}
.wb-icon svg { width: 28px; height: 28px; }
.wb-card h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: -.005em;
}
.wb-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
  margin: 0;
}

/* ============== ABOUT US ============== */
.aboutus {
  background: var(--cream);
  padding: 120px 0;
  border-top: 1px solid #ede7d9;
  border-bottom: 1px solid #ede7d9;
}
/* Copy on the left, artwork on the right. The columns are flipped to match, so
   the wider track still belongs to the text. `order` rather than reordered
   markup keeps the mobile stack (copy first, then image) sensible. */
.aboutus-grid {
  display: grid;
  /* Artwork column first, copy second. The copy keeps the wider share so the
     paragraphs do not get cramped. */
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
/* Covers left, copy right. The markup already has .au-left first, so these
   simply undo the swap that used to flip them. */
.aboutus-grid .au-left  { order: 1; }
.aboutus-grid .au-right { order: 2; }

/* Two covers just touching: the smaller one tilted and sitting low on the left,
   the taller one all but upright and higher on the right, in front. */
.au-books {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.au-book {
  display: block;
  height: auto;
  /* Both PNGs are transparent, so the shadow belongs here, not in the artwork. */
  filter: drop-shadow(0 22px 38px rgba(18, 50, 84, 0.28));
}
.au-book-back {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
  transform: rotate(-6deg) translateY(4%);
}
.au-book-front {
  width: 55%;
  max-width: 450px;
  margin-left: -1%;
  position: relative;
  z-index: 2;
  /* Positive angle: leans right, against the left-leaning cover behind it. */
  transform: rotate(2deg);
}
.au-card {
  background: #fff;
  border: 1px solid #ede7d9;
  padding: 44px 36px;
  position: relative;
  box-shadow: var(--shadow-md);
}
.au-stamp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 18px;
}
.au-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.au-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--ink);
}
.au-card h3 em {
  font-style: normal;
  color: var(--accent-ink);
}
.au-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 3px solid var(--crimson);
  padding: 4px 0 4px 18px;
  margin: 0 0 32px;
}
.au-meta-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.au-meta-row b { color: var(--ink); margin-right: 4px; }
.au-right .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.au-right h2 {
  font-family: var(--serif);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 28px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.15;
}
.au-right h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.au-right p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 16px;
}
.au-right p.emph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin: 24px 0 28px;
}

/* ============== SERVICES — 6 column variant ============== */
.services-grid.services-six {
  grid-template-columns: repeat(3, 1fr);
}

/* ============== DISTRIBUTION ============== */
.distrib {
  background: #fff;
  padding: 120px 0;
}
.distrib .head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}
.distrib .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.distrib .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 16px;
}
.distrib .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.distrib .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 700px;
}
.distrib-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}
.dist-col {
  background: #fff;
  padding: 40px 38px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.dist-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 24px;
  color: var(--ink);
  letter-spacing: -.005em;
}
.dist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.dist-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dist-list li i.bi {
  flex-shrink: 0;
  color: var(--accent-ink);
  font-size: 18px;
  margin-top: 1px;
}
.dist-list li span {
  flex: 1;
}
.dist-foot {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 auto 8px;
}

/* ============== VIDEO TESTIMONIALS ============== */
.videotesti {
  padding: 110px 0;
  background: var(--ink);
  color: #fff;
}
.videotesti .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.videotesti .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.videotesti .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 16px;
}
.videotesti .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.videotesti .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.7);
  margin: 0 auto;
  max-width: 620px;
}
/* ----- Video testimonial slider (vertical Shorts) ----- */
.vt-shell {
  position: relative;
  padding: 0 60px;
  max-width: 1400px;
  margin: 0 auto;
}
.vt-swiper {
  overflow: hidden;
  padding: 12px 0 30px;
}
.vt-card {
  width: 280px;
  flex-shrink: 0;
  height: auto;
}
.vt-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  box-shadow: 0 30px 50px -22px rgba(0,0,0,.65);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.vt-card:hover .vt-thumb {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 38px 64px -18px rgba(0,0,0,.7);
}
.vt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.vt-card:hover .vt-thumb img { transform: scale(1.06); }
.vt-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  transition: opacity .25s;
}
.vt-card.is-playing .vt-thumb::after,
.vt-card.is-playing .vt-pill,
.vt-card.is-playing .vt-play { display: none; }
.vt-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Fallback when YouTube serves no usable thumbnail */
.vt-card.vt-no-thumb .vt-thumb {
  background: linear-gradient(160deg, #123254 0%, #dfb470 60%, #123254 100%);
}
.vt-card.vt-no-thumb .vt-thumb img { display: none; }
.vt-card.vt-no-thumb .vt-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(223, 180, 112,.18), transparent 60%);
}

.vt-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: rgba(223, 180, 112,.95);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 16px 30px -8px rgba(223, 180, 112,.6), 0 0 0 6px rgba(255,255,255,.18);
  transition: transform .25s, background .25s, box-shadow .25s;
}
.vt-play i.bi {
  font-size: 30px;
  margin-left: 3px;
  line-height: 1;
}
.vt-card:hover .vt-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
  color: var(--accent-ink);
  box-shadow: 0 18px 34px -8px rgba(0,0,0,.55), 0 0 0 8px rgba(255,255,255,.22);
}

.vt-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vt-pill i.bi {
  color: #dfb470;
  font-size: 13px;
}

/* Nav arrows */
.vt-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.vt-nav:hover {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
  transform: translateY(-50%) scale(1.06);
}
.vt-nav i.bi { font-size: 22px; line-height: 1; }
.vt-prev { left: 0; }
.vt-next { right: 0; }
.vt-nav.swiper-button-disabled { opacity: .35; cursor: default; }

/* Pagination */
.vt-pagination {
  text-align: center;
  margin-top: 24px;
  position: relative;
  bottom: auto !important;
}
.vt-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,.4);
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  transition: background .25s, transform .25s;
}
.vt-pagination .swiper-pagination-bullet-active {
  background: var(--crimson);
  transform: scale(1.25);
}
/* ============== KNOW MORE BAND ============== */

/* ============== BLOG POSTS ============== */
.blogs {
  background: var(--paper-2);
  padding: 120px 0;
}
.blogs .head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 64px;
}
.blogs .head .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent-ink);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.blogs .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 16px;
}
.blogs .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.blogs .head p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.bpost {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.bpost:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -22px rgba(18, 50, 84,.28);
  border-color: transparent;
}
.bcover {
  display: block;
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}
.bcover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.bpost:hover .bcover img { transform: scale(1.06); }
.bcover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55));
  pointer-events: none;
}
.bcover .bcat {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--crimson);
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 6px 14px -4px rgba(223, 180, 112,.5);
}
.bbody {
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bdate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.bdate i.bi { font-size: 14px; line-height: 1; }
.bbody h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -.005em;
}
.bbody h4 a { color: var(--ink); transition: color .2s; }
.bbody h4 a:hover { color: var(--crimson); }
.bbody p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 20px;
}
.readmore {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  transition: color .2s, gap .2s;
}
.readmore:hover {
  color: var(--accent-ink);
  gap: 12px;
}

/* ============== AUTHOR REVIEWS (Swiper · platform cards) ============== */
/* Flat tinted gradient like the reference section - the crimson corner glows
   that used to sit behind the cards went with the redesign. */
.rv-sec {
  position: relative;
  background: linear-gradient(160deg, #f4f7fa 0%, #e7edf5 100%);
  padding: 80px 0;
  overflow: hidden;
  isolation: isolate;
}
.rv-sec > * { position: relative; z-index: 1; }

.rv-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.rv-head .eyebrow-pill { margin-bottom: 16px; }
.rv-head h2 {
  font-family: var(--serif);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 18px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.rv-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.rv-head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto 30px;
  max-width: 640px;
}

/* Platform-logo strip under heading */
.rv-platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
}
.rv-plogo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  height: 32px;
  padding: 0 6px;
  opacity: .75;
  transition: opacity .25s, transform .25s, filter .25s;
}
.rv-plogo img { height: 100%; width: auto; display: block; object-fit: contain; }
.rv-plogo:hover { opacity: 1; transform: translateY(-2px); }

/* Slider shell + nav */
/* Full-bleed: the slider runs the width of the section rather than sitting in
   the 1320px column the rest of the page uses, so cards reach both edges. */
.rv-shell {
  position: relative;
  /* Pulled back off full-bleed to the same container width the rest of the
     site uses, so the cards line up with every other section. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
.rv-swiper {
  overflow: hidden;
  padding: 12px 4px 32px;
}
/* flex-start, not stretch. Measured: with stretch Swiper pins every slide to a
   height it works out far too early (99px against 315px of content), which
   clipped all 24 cards. Cards take their natural height here instead, and the
   title/text line clamps below are what make them end level. */
.rv-swiper .swiper-wrapper { align-items: flex-start; }

/* Grid variant (all reviews on one page · scroll-reveal) */
.rv-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 24px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  /* 1fr rows all resolve to the same height - the tallest row's content - so
     every card on the page matches, not just the ones sharing a row. The height
     is set by the longest review rather than by a number picked by hand, so no
     card is left half empty and none is taller than it needs to be. */
  grid-auto-rows: 1fr;
}
/* The line clamp and fixed min-height below exist for the slider, where equal
   card heights are the only way to stop Swiper clipping them. Here the rows do
   that job, so the text is free to run its natural length. */
.rv-grid .rv-text {
  display: block;
  overflow: visible;
  min-height: 0;
  -webkit-line-clamp: none;
  /* Not flex:1 here - growing it would push the name block to the bottom and
     leave the gap above the quote, which is the opposite of centring. */
  flex: 0 0 auto;
}
/* Every card is the same height, so a short review would otherwise sit at the
   top with dead space under the name. Centre the whole block instead. */
.rv-grid .rv-inner { justify-content: center; }
.rv-grid .rv-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1),
              transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.rv-grid .rv-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 980px) {
  .rv-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 12px 20px 0; }
}
@media (max-width: 640px) {
  .rv-grid { grid-template-columns: 1fr; padding: 12px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-grid .rv-card { opacity: 1; transform: none; transition: none; }
}

/* Card */
/* Card layout copied from the reference testimonial slider: cover on the left,
   quote and name on the right, no avatar / stars / platform link. */
/* The slide itself stays transparent and carries top padding, so the quote
   glyph can sit above the white card without being clipped by the slider. */
.rv-card {
  position: relative;
  display: flex;
  height: auto;
  padding-top: 26px;
  background: transparent;
}
.rv-quote {
  position: absolute;
  top: 1px;
  left: 34px;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 120px;
  line-height: 1;
  color: var(--gold);
  pointer-events: none;
  user-select: none;
}
.rv-inner {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: 0 18px 40px -26px rgba(18, 50, 84, .30);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}
.rv-card:hover .rv-inner {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 26px 52px -26px rgba(18, 50, 84, .38);
}
/* The body is locked to a fixed number of lines so every card comes out the
   same height without relying on flex stretch, which this slider cannot do
   without clipping. Shorter reviews pad to the same box; a longer one ends in
   an ellipsis. The count went from five to eight when the card heading was
   removed - the reviews are full paragraphs now and five lines cut them off
   mid-sentence. .rv-title is kept styled in case a heading is ever wanted
   back. */
.rv-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 14px;
  min-height: calc(20px * 1.35 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 26px;
  min-height: calc(15px * 1.75 * 8);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-person {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
/* A monogram rather than stock photography - these are real people's names. */
.rv-avatar {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--on-accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
}
.rv-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rv-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.rv-loc {
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
}
/* Arrow buttons were dropped with the redesign - dots only, like the reference. */
.rv-pagination {
  text-align: center;
  margin-top: 24px;
  position: relative;
  bottom: auto !important;
}
.rv-pagination .swiper-pagination-bullet {
  background: rgba(18, 50, 84,.25);
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  transition: background .25s, transform .25s;
}
.rv-pagination .swiper-pagination-bullet-active {
  background: var(--crimson);
  transform: scale(1.3);
}
/* ============== BESTSELLER FORM ============== */
.bestsec {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.bestsec::before {
  content: "";
  position: absolute;
  right: -160px; top: -160px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 180, 112,.20), transparent 70%);
  pointer-events: none;
}
.bestsec::after {
  content: "";
  position: absolute;
  left: -180px; bottom: -180px;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 180, 112,.10), transparent 70%);
  pointer-events: none;
}
.best-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 72px;
  position: relative;
}
.best-head .eyebrow-pill { margin-bottom: 22px; }
.best-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
  color: #fff;
}
.best-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.best-head p {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  max-width: 660px;
  margin: 0 auto;
}
.best-grid {
  display: grid;
  /* minmax(0,1fr) prevents intrinsic content from blowing out columns */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  /* The left column is now three contact cards against a much taller form,
     so it is centred rather than pinned to the top. */
  align-items: center;
  position: relative;
}
.best-steps {
  display: grid;
  gap: 16px;
}
.bstep {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 26px 28px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s, box-shadow .3s;
  overflow: hidden;
}
.bstep::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.bstep:hover {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(223, 180, 112,.10) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(223, 180, 112,.35);
  box-shadow: 0 18px 40px -18px rgba(223, 180, 112,.45);
}
.bstep:hover::before { transform: scaleY(1); }
.bs-num {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 10px 22px -8px rgba(223, 180, 112,.55);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.bstep:hover .bs-num {
  transform: rotate(-8deg) scale(1.06);
}
.bstep > div:not(.bs-num),
.bstep-body { min-width: 0; flex: 1; }
.bstep h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  margin: 4px 0 8px;
  letter-spacing: -.005em;
  line-height: 1.2;
}
.bstep p {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.best-form {
  background: #fff;
  color: var(--ink);
  padding: 44px 40px;
  border-radius: 16px;
  box-shadow: 0 36px 70px -22px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}
.best-form::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--ink) 100%);
}
.bf-head { margin-bottom: 30px; }
.bf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bf-eyebrow::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: var(--crimson);
}
.bf-head h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  margin: 0;
  letter-spacing: -.018em;
  line-height: 1.1;
  color: var(--ink);
}
.bf-head h3 em {
  font-style: normal;
  color: var(--accent-ink);
}
.bf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.best-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.best-form label.bf-full { margin-bottom: 18px; }
.best-form label > span {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.best-form input,
.best-form select,
.best-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper-2);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.best-form input::placeholder,
.best-form textarea::placeholder {
  color: var(--muted);
  opacity: .65;
}
.best-form input:hover,
.best-form select:hover,
.best-form textarea:hover {
  border-color: var(--ink-soft);
}
.best-form input:focus,
.best-form select:focus,
.best-form textarea:focus {
  outline: 0;
  border-color: var(--crimson);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(223, 180, 112,.12);
}
.best-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231b2a6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 2 6 7 11 2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 42px;
}
.best-form textarea { resize: vertical; min-height: 110px; }
.best-form button[type="submit"] {
  width: 100%;
  padding: 17px 26px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}
.bf-foot {
  text-align: center;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 18px;
}
/* ============== PARTNERS — 5 col variant ============== */
.partners-row.partners-row-5 {
  grid-template-columns: repeat(5, 1fr);
  max-width: 1100px;
  margin: 0 auto;
}

/* ============== FINAL CTA ============== */
/* ============== CTA BANNER (book-tile background) ============== */
.ctabanner {
  position: relative;
  padding: 130px 0;
  color: #fff;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.ctabanner-bg {
  position: absolute;
  inset: 0;
  background: url("../images/home/4.png") center/cover no-repeat;
  z-index: -2;
  transform: scale(1.02);
  transition: transform 8s ease;
}
.ctabanner:hover .ctabanner-bg {
  transform: scale(1.08);
}
.ctabanner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(18, 50, 84, .92) 0%, rgba(18, 50, 84, .78) 50%, rgba(18, 50, 84, .94) 100%);
  z-index: -1;
}
.ctabanner-inner {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}
.ctabanner h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 28px;
}
.ctabanner h2 em {
  font-style: normal;
  color: #dfb470;
}
.ctabanner p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,.9);
  max-width: 720px;
  margin: 0 auto 40px;
}
.ctabanner-phone {
  color: #dfb470;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  border-bottom: 1px dashed rgba(223, 180, 112, .55);
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.ctabanner-phone:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.ctabanner-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Pill-style CTAs with circular arrow chip */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 28px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
  border: 0;
  cursor: pointer;
}
.cta-pill .cta-pill-lbl { line-height: 1; }
.cta-pill-arr {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background .25s, transform .25s;
}
.cta-pill-arr i.bi { font-size: 17px; line-height: 1; }
.cta-pill:hover { transform: translateY(-2px); }
.cta-pill:hover .cta-pill-arr {
  transform: translateX(3px);
  background: rgba(255,255,255,.22);
}
.cta-pill-red {
  background: var(--crimson);
  color: var(--on-accent);
  box-shadow: 0 14px 28px -10px rgba(223, 180, 112, .55);
}
.cta-pill-red:hover {
  background: #fff;
  color: var(--accent-ink);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .4);
}
.cta-pill-red:hover .cta-pill-arr {
  background: rgba(223, 180, 112, .18);
}
.cta-pill-dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(18, 50, 84, .55);
}
.cta-pill-dark:hover {
  background: #fff;
  color: var(--ink);
}
.cta-pill-dark:hover .cta-pill-arr {
  background: rgba(18, 50, 84, .18);
  color: var(--ink);
}
/* ============================================
   GLOBAL POPUP / QUOTE MODAL
   ============================================ */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18, 50, 84, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1), visibility .35s;
  overflow-y: auto;
}
.popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
body.popup-locked {
  overflow: hidden;
}

.popup-modal {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(18, 50, 84, .55),
              0 18px 40px -16px rgba(18, 50, 84, .35);
  transform: translateY(28px) scale(.98);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s;
}
.popup-overlay.is-open .popup-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 6px 18px -4px rgba(18, 50, 84,.25);
  transition: background .25s, color .25s, transform .25s;
}
.popup-close:hover {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(90deg);
}

.popup-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  min-height: 540px;
  max-height: calc(100vh - 48px);
}

/* ---- Aside (brand side) ---- */
.popup-aside {
  position: relative;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(223, 180, 112,.35) 0%, transparent 55%),
    radial-gradient(100% 100% at 100% 100%, rgba(223, 180, 112,.28) 0%, transparent 60%),
    linear-gradient(155deg, #123254 0%, #123254 100%);
  color: #fff;
  /* No padding - the collage inside bleeds to the panel edges. */
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.popup-aside::before,
.popup-aside::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.popup-aside::before {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(223, 180, 112,.35) 0%, transparent 70%);
  top: -100px; right: -80px;
}
.popup-aside::after {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(223, 180, 112,.3) 0%, transparent 70%);
  bottom: -90px; left: -60px;
}
.popup-aside-inner {
  position: relative;
  z-index: 1;
}

/* ---- Cover collage (replaces the headline / bullet panel) ----
   Twenty covers already published elsewhere on the site, as a tilted wall of
   four columns drifting slowly in alternating directions. Each column holds its
   five covers twice and scrolls by exactly one set, so the loop is seamless.
   The wall is rotated and over-scaled so no corner of the panel shows through,
   and .popup-veil darkens the edges back into the navy. */
.popup-collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  transform: rotate(-9deg) scale(1.42);
  transform-origin: 50% 50%;
}
.popup-collage .pc-col {
  min-width: 0;
  overflow: hidden;
}
.popup-collage .pc-track {
  display: grid;
  gap: 10px;
  will-change: transform;
  animation: pcDriftUp 46s linear infinite;
}
/* Second and fourth columns run the other way, and slower, so the wall never
   reads as one block sliding. */
.popup-collage .pc-col:nth-child(even) .pc-track {
  animation-name: pcDriftDown;
  animation-duration: 58s;
}
.popup-collage .pc-col:nth-child(3) .pc-track { animation-duration: 52s; }

/* One set is five covers plus five gaps; the track is two sets with nine gaps,
   so half its height is half a gap short - hence the 5px. */
@keyframes pcDriftUp {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - 5px)); }
}
@keyframes pcDriftDown {
  from { transform: translateY(calc(-50% - 5px)); }
  to   { transform: translateY(0); }
}
.popup-aside:hover .pc-track { animation-play-state: paused; }

.popup-collage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .75),
              0 0 0 1px rgba(255, 255, 255, .07);
}

/* Fades the wall into the panel at the edges and dims the corners, so the
   covers read as texture behind the form rather than a grid of thumbnails. */
.popup-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(18, 50, 84, .92) 0%,
      rgba(18, 50, 84, .18) 26%,
      rgba(18, 50, 84, .18) 74%,
      rgba(18, 50, 84, .92) 100%),
    radial-gradient(120% 85% at 50% 50%,
      rgba(18, 50, 84, 0) 38%,
      rgba(18, 50, 84, .78) 100%),
    radial-gradient(70% 50% at 15% 12%, rgba(223, 180, 112, .22) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .popup-collage .pc-track { animation: none; }
}
.popup-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.popup-eyebrow.mob {
  display: none;
  background: rgba(223, 180, 112,.08);
  border-color: rgba(223, 180, 112,.25);
  color: var(--accent-ink);
}
.popup-aside h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.popup-aside h3 em {
  font-style: normal;
  color: #dfb470;
  font-weight: 500;
}
.popup-aside p {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  margin: 0 0 22px;
}
.popup-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 10px;
}
.popup-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
}
.popup-list li i {
  color: #dfb470;
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 14px;
}
.popup-aside-contact {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.popup-aside-contact a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color .2s;
}
.popup-aside-contact a:hover {
  color: #fff;
}
.popup-aside-contact a i {
  color: var(--accent-ink);
}

/* ---- Body (form side) ---- */
.popup-body {
  padding: 40px 38px;
  overflow-y: auto;
  background: #fff;
}
.popup-head h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.popup-head h4 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}
.popup-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.popup-form {
  display: grid;
  gap: 14px;
}
.popup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.popup-form label {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
}
.popup-form label > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.popup-form .req {
  color: var(--accent-ink);
  font-style: normal;
}
.popup-form input,
.popup-form select,
.popup-form textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fafaf8;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
  width: 100%;
}
.popup-form textarea {
  resize: vertical;
  min-height: 84px;
}
.popup-form input:focus,
.popup-form select:focus,
.popup-form textarea:focus {
  border-color: var(--crimson);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(223, 180, 112,.08);
}
.popup-full {
  width: 100%;
}
.popup-submit {
  margin-top: 6px;
  justify-self: start;
}
.popup-microcopy {
  font-size: 11.5px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ---- Success state ---- */
.popup-success {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px 8px;
  gap: 14px;
}
.popup-success-ico {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(223, 180, 112, .12);
  color: #123254;
  display: grid;
  place-items: center;
  font-size: 38px;
}
.popup-success h4 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0;
  color: var(--ink);
}
.popup-success p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
  max-width: 380px;
  margin: 0;
}

/* ---- Mobile ---- */
@media (max-width: 820px) {
  .popup-overlay { padding: 12px; }
  .popup-modal {
    border-radius: 14px;
    max-height: calc(100vh - 24px);
  }
  .popup-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: calc(100vh - 24px);
  }
  .popup-aside {
    display: none;
  }
  .popup-body {
    padding: 50px 22px 26px;
  }
  /* The "Free Quote" pill only ever appeared at this width (the aside carries
     the branding on desktop) and the consent line under the button was the
     longest thing on a phone screen. Both are dropped here; the pill stays in
     the markup in case it is wanted back. */
  .popup-eyebrow.mob,
  .popup-microcopy { display: none; }
  .popup-head h4 { font-size: 22px; }
  .popup-row { grid-template-columns: 1fr; gap: 12px; }
  .popup-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup-overlay,
  .popup-modal,
  .popup-close { transition: none !important; }
  .popup-modal { transform: none !important; }
}

/* ============================================
   SERVICES HUB PAGE
   ============================================ */
.services-hero {
  position: relative;
  padding: 100px 0 90px;
  background: var(--cream);
  overflow: hidden;
  text-align: center;
}
.services-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(223, 180, 112, .12) 0%, transparent 60%),
    radial-gradient(40% 50% at 0% 100%, rgba(18, 50, 84, .10) 0%, transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(223, 180, 112, .14) 0%, transparent 70%);
}
.services-hero .wrap { position: relative; z-index: 1; }
.services-hero-inner {
  max-width: 880px;
  margin: 0 auto;
}
.services-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 18px 0 18px;
}
.services-hero h1 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}
.services-hero p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto 32px;
}
.services-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.services-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid rgba(18, 50, 84, .08);
}
.services-stat {
  text-align: center;
}
.services-stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}
.services-stat b em {
  font-size: 22px;
  color: var(--accent-ink);
  font-style: normal;
  font-weight: 500;
  margin-left: 1px;
}
.services-stat span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- All-services grid ---- */
.services-all {
  padding: 90px 0 100px;
  background: #fff;
}
.services-all .head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.services-all .head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 14px 0 14px;
}
.services-all .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}
.services-all .head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.services-all-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.svca-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px 28px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,.61,.36,1),
              box-shadow .4s,
              border-color .35s,
              background .35s;
}
.svca-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--gold) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.svca-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -22px rgba(223, 180, 112, .28),
              0 12px 24px -14px rgba(18, 50, 84, .25);
  border-color: transparent;
  background: linear-gradient(180deg, #fff 0%, #fdfaf5 100%);
}
.svca-card:hover::before {
  transform: scaleX(1);
}

.svca-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  opacity: .12;
  letter-spacing: -.02em;
  transition: color .3s, opacity .3s;
}
.svca-card:hover .svca-num {
  color: var(--accent-ink);
  opacity: .55;
}

.svca-ico {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: background .3s, color .3s, transform .35s;
}
.svca-card:hover .svca-ico {
  background: var(--crimson);
  color: var(--on-accent);
  transform: rotate(-6deg) scale(1.05);
}

.svca-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 6px 0 0;
}
.svca-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.svca-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  transition: gap .3s;
}
.svca-link i {
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.svca-card:hover .svca-link {
  gap: 12px;
}
.svca-card:hover .svca-link i {
  transform: translateX(4px);
}

.svca-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
}
.svca-tags span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid rgba(223, 180, 112, .22);
  padding: 4px 8px;
  border-radius: 100px;
  transition: background .25s, color .25s, border-color .25s;
}
.svca-card:hover .svca-tags span {
  background: #fff;
  border-color: rgba(223, 180, 112, .22);
  color: var(--ink);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .services-hero h1 { font-size: 52px; }
  .services-all-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .services-hero { padding: 76px 0 60px; }
  .services-hero h1 { font-size: 36px; }
  .services-hero p { font-size: 15px; }
  .services-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
    padding-top: 24px;
  }
  .services-stat b { font-size: 28px; }
  .services-all { padding: 64px 0 76px; }
  .services-all .head { margin-bottom: 36px; }
  .services-all .head h2 { font-size: 30px; }
  .services-all-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 480px;
  }
  .svca-card { padding: 26px 24px 22px; }
  .svca-card h3 { font-size: 20px; }
}

/* ============================================
   LEGAL PAGES (Terms, Privacy, etc.)
   ============================================ */
.legal-hero {
  position: relative;
  padding: 90px 0 70px;
  background: var(--cream);
  overflow: hidden;
  text-align: center;
}
.legal-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(223, 180, 112, .08) 0%, transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(223, 180, 112, .12) 0%, transparent 70%);
}
.legal-hero .wrap {
  position: relative;
}
.legal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(223, 180, 112, .08);
  border: 1px solid rgba(223, 180, 112, .22);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.legal-hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.legal-hero h1 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}
.legal-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 18px;
}
.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.legal-body {
  padding: 80px 0 100px;
  background: #fff;
}
.legal-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

/* ---- Sticky TOC ---- */
.legal-toc {
  position: sticky;
  top: 100px;
}
.legal-toc-inner {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 22px 18px;
}
.legal-toc-title {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: tocnum;
  display: grid;
  gap: 4px;
}
.legal-toc li {
  counter-increment: tocnum;
}
.legal-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, padding-left .2s;
}
.legal-toc a::before {
  content: counter(tocnum, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
  letter-spacing: .05em;
}
.legal-toc a:hover {
  color: var(--ink);
  background: #fff;
  border-left-color: var(--crimson);
  padding-left: 12px;
}

/* ---- Long-form content ---- */
.legal-content {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink);
  max-width: 760px;
}
.legal-content h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 48px 0 16px;
  scroll-margin-top: 100px;
  position: relative;
  padding-bottom: 12px;
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
}
.legal-content p {
  margin: 0 0 18px;
  color: var(--ink-soft);
}
.legal-content p:last-child { margin-bottom: 0; }
.legal-content a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(223, 180, 112, .35);
  transition: color .2s, border-color .2s;
  word-break: break-word;
}
.legal-content a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.legal-content strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
}
.legal-list li {
  position: relative;
  padding: 4px 0 4px 28px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 3px rgba(223, 180, 112, .12);
}
.legal-list li strong { color: var(--ink); }

.legal-contact {
  display: grid;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 6px 0 22px;
}
.legal-contact a,
.legal-contact-addr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: none;
}
.legal-contact a i,
.legal-contact-addr i {
  color: var(--accent-ink);
  font-size: 16px;
  flex-shrink: 0;
}
.legal-contact a:hover {
  color: var(--accent-ink);
}
.legal-trailing {
  font-style: italic;
  color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  margin-top: 26px !important;
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .legal-hero { padding: 70px 0 50px; }
  .legal-hero h1 { font-size: 42px; }
  .legal-body { padding: 56px 0 70px; }
  .legal-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .legal-toc {
    position: static;
  }
  .legal-toc-inner {
    padding: 18px 18px 14px;
  }
  .legal-toc ol {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}
@media (max-width: 560px) {
  .legal-hero h1 { font-size: 34px; }
  .legal-content { font-size: 14.5px; }
  .legal-content h2 { font-size: 22px; margin-top: 36px; }
  .legal-toc ol { grid-template-columns: 1fr; }
}

/* ============================================
   FIRST-VISIT DISCLAIMER MODAL
   ============================================ */
.dsc-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(18, 50, 84, .58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: grid;
  place-items: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s cubic-bezier(.22,.61,.36,1), visibility .4s;
  overflow-y: auto;
}
.dsc-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.dsc-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  background: #fefcf6;
  border-radius: 18px;
  border: 2px solid var(--crimson);
  box-shadow:
    0 50px 90px -30px rgba(18, 50, 84, .55),
    0 0 0 8px rgba(223, 180, 112, .08);
  transform: translateY(28px) scale(.97);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .35s;
  overflow: hidden;
}
.dsc-overlay.is-open .dsc-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Subtle paper grain + radial wash */
.dsc-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(223, 180, 112, .06) 0%, transparent 55%),
    radial-gradient(100% 90% at 100% 100%, rgba(223, 180, 112, .07) 0%, transparent 60%);
  pointer-events: none;
}

/* Gold corner flourishes */
.dsc-decor { position: absolute; inset: 0; pointer-events: none; }
.dsc-decor-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 1.5px solid var(--gold);
  opacity: .55;
}
.dsc-decor-tl { top: 14px;    left: 14px;    border-right: none;  border-bottom: none; border-top-left-radius: 6px; }
.dsc-decor-tr { top: 14px;    right: 14px;   border-left: none;   border-bottom: none; border-top-right-radius: 6px; }
.dsc-decor-bl { bottom: 14px; left: 14px;    border-right: none;  border-top: none;    border-bottom-left-radius: 6px; }
.dsc-decor-br { bottom: 14px; right: 14px;   border-left: none;   border-top: none;    border-bottom-right-radius: 6px; }

.dsc-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(18, 50, 84, .14);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: background .25s, color .25s, transform .35s, border-color .25s;
}
.dsc-close:hover {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
  transform: rotate(90deg);
}

.dsc-inner {
  position: relative;
  z-index: 1;
  padding: 48px 52px 40px;
  text-align: center;
  overflow-y: auto;
  max-height: calc(100vh - 48px);
}

.dsc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(223, 180, 112, .08);
  border: 1px solid rgba(223, 180, 112, .22);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.dsc-eyebrow i {
  font-size: 13px;
}

.dsc-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--accent-ink);
  margin: 0 0 10px;
}

.dsc-tagline {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent-ink);
  margin: 0 0 22px;
}
.dsc-tagline em {
  font-style: italic;
  font-weight: 500;
}

.dsc-rule {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius: 3px;
  margin: 0 auto 26px;
}

.dsc-body {
  text-align: center;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 30px;
}
.dsc-body p { margin: 0 0 16px; }
.dsc-body p:last-child { margin-bottom: 0; }
.dsc-body strong {
  color: var(--ink);
  font-weight: 600;
}
.dsc-body a {
  color: var(--accent-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(223, 180, 112, .35);
  transition: color .2s, border-color .2s;
}
.dsc-body a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.dsc-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.dsc-accept {
  min-width: 200px;
  justify-content: center;
}
.dsc-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.dsc-remember input {
  width: 14px;
  height: 14px;
  accent-color: var(--crimson);
  cursor: pointer;
  margin: 0;
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .dsc-overlay { padding: 12px; }
  .dsc-modal { border-radius: 14px; max-height: calc(100vh - 24px); }
  .dsc-inner { padding: 40px 24px 28px; max-height: calc(100vh - 24px); }
  .dsc-title { font-size: 34px; }
  .dsc-tagline { font-size: 15px; }
  .dsc-body { font-size: 13.5px; }
  .dsc-decor-corner { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .dsc-overlay, .dsc-modal, .dsc-close { transition: none !important; }
  .dsc-modal { transform: none !important; }
}

/* ============================================
   AUTHOR WEBSITES SHOWCASE
   Used on authors.php (and the includes/author-websites.php partial).
   ============================================ */
.aws-sec {
  background: var(--paper);
  padding: 100px 0 120px;
  position: relative;
}
.aws-sec .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.aws-sec .head .eyebrow-pill { margin-bottom: 16px; }
.aws-sec .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
}
.aws-sec .head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.aws-sec .head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}

.aws-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.aws-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.aws-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 28px 50px -22px rgba(18, 50, 84,.28);
}
.aws-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
.aws-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s;
}
.aws-card:hover .aws-thumb img {
  transform: scale(1.04);
  filter: brightness(.96);
}
.aws-thumb img.aws-img-fallback {
  object-fit: contain;
  padding: 28px;
  background: var(--cream);
}
.aws-thumb-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 16px;
  opacity: 0;
  transform: translate(4px, -4px);
  transition: opacity .25s, transform .25s, background .25s, color .25s;
  pointer-events: none;
}
.aws-card:hover .aws-thumb-overlay {
  opacity: 1;
  transform: translate(0, 0);
  background: var(--crimson);
  color: var(--on-accent);
}

.aws-info {
  padding: 22px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.aws-meta { min-width: 0; flex: 1; }
.aws-author {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aws-book {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: -.005em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aws-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.005em;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, gap .25s, transform .25s;
}
.aws-btn:hover {
  background: var(--crimson);
  color: var(--on-accent);
  border-color: var(--crimson);
  gap: 12px;
  transform: translateY(-1px);
}
.aws-btn i.bi { font-size: 13px; transition: transform .25s; }
.aws-btn:hover i.bi { transform: translate(2px, -2px); }

@media (max-width: 1024px) {
  .aws-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .aws-sec .head h2 { font-size: 40px; }
}
@media (max-width: 640px) {
  .aws-sec { padding: 72px 0 88px; }
  .aws-grid { grid-template-columns: 1fr; gap: 18px; }
  .aws-sec .head { margin-bottom: 40px; }
  .aws-sec .head h2 { font-size: 32px; }
  .aws-info { padding: 18px 18px 20px; flex-direction: column; align-items: flex-start; }
  .aws-btn { align-self: stretch; justify-content: center; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* ============================================
   COUNTRY SELECT (searchable dropdown with auto-detect)
   Wrapper:  <div class="csc" data-csc></div>  (markup injected by JS)
   ============================================ */
.csc {
  position: relative;
  width: 100%;
}
.csc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.csc-btn:hover { border-color: var(--ink); }
.csc.is-open .csc-btn,
.csc-btn:focus-visible {
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(223, 180, 112, .12);
  outline: none;
}
.csc-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.csc-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csc-label.is-placeholder { color: var(--muted); }
.csc-caret {
  font-size: 14px;
  color: var(--muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.csc.is-open .csc-caret { transform: rotate(180deg); }

/* Popover */
.csc-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 20px 40px -16px rgba(18, 50, 84,.18),
              0 4px 12px -4px rgba(0,0,0,.06);
  padding: 10px;
  overflow: hidden;
}
.csc-search-wrap {
  position: relative;
  margin-bottom: 8px;
}
.csc-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}
.csc-search {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, background .2s;
}
.csc-search:focus {
  border-color: var(--crimson);
  background: #fff;
}
.csc-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.csc-list::-webkit-scrollbar { width: 8px; }
.csc-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.csc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  transition: background .15s, color .15s;
}
.csc-item:hover {
  background: var(--cream);
}
.csc-item.is-active {
  background: rgba(223, 180, 112, .08);
  color: var(--accent-ink);
  font-weight: 600;
}
.csc-item-flag {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}
.csc-item-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csc-empty {
  padding: 18px 12px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

/* ============================================
   CAREERS PAGE
   Used on careers.php — roles grid + hiring process.
   Hero, pillars (.author-trust), FAQ and CTA reuse global styles.
   ============================================ */
.cr-roles {
  background: var(--paper);
  padding: 100px 0;
}
.cr-roles .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.cr-roles .head .eyebrow-pill { margin-bottom: 16px; }
.cr-roles .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
}
.cr-roles .head h2 em { font-style: normal; color: var(--crimson); }
.cr-roles .head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto;
  max-width: 600px;
}

.cr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.cr-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.cr-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--crimson);
  border-radius: 14px 0 0 14px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.cr-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 24px 44px -22px rgba(18, 50, 84,.22);
}
.cr-card:hover::before { transform: scaleY(1); }
.cr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.cr-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.cr-tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
}
.cr-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cr-tag i.bi { font-size: 11px; }
.cr-tag-type { color: var(--crimson); }
.cr-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 18px;
  flex: 1;
}
.cr-apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -.005em;
  color: var(--accent-ink);
  text-decoration: none;
  padding: 4px 0 6px;
  border-bottom: 1.5px solid var(--crimson);
  transition: color .25s, border-color .25s, gap .25s;
}
.cr-apply i.bi { font-size: 14px; transition: transform .25s; }
.cr-apply:hover {
  color: var(--accent-ink);
  border-color: var(--crimson-deep);
  gap: 12px;
}
.cr-apply:hover i.bi { transform: translate(2px, -2px); }

/* Speculative-application strip */
.cr-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 32px 36px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.cr-spec-text { flex: 1; }
.cr-spec-text h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.cr-spec-text p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 640px;
}
.cr-spec .btn { flex-shrink: 0; }

/* Hiring process */
.cr-process {
  background: #fff;
  padding: 100px 0;
  border-top: 1px solid var(--rule);
}
.cr-process .head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.cr-process .head .eyebrow-pill { margin-bottom: 16px; }
.cr-process .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 14px;
}
.cr-process .head h2 em { font-style: normal; color: var(--crimson); }
.cr-process .head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto;
  max-width: 620px;
}
.cr-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cr-step {
  position: relative;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.cr-step:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 20px 36px -20px rgba(223, 180, 112,.22);
}
.cr-step-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-ink);
  display: inline-block;
  margin-bottom: 14px;
}
.cr-step h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.cr-step p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .cr-grid { gap: 18px; }
  .cr-roles .head h2, .cr-process .head h2 { font-size: 40px; }
  .cr-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cr-roles, .cr-process { padding: 72px 0; }
  .cr-grid { grid-template-columns: 1fr; }
  .cr-card { padding: 24px 22px 20px; }
  .cr-card-head { flex-direction: column; gap: 10px; }
  .cr-tags { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .cr-spec { flex-direction: column; align-items: flex-start; padding: 26px 22px; gap: 18px; }
  .cr-roles .head h2, .cr-process .head h2 { font-size: 32px; }
}
@media (max-width: 480px) {
  .cr-steps { grid-template-columns: 1fr; }
}

/* ============================================
   RESPONSIVE — NEW SECTIONS
   ============================================ */

/* ============================================================
   LOCATION PAGES — Cardiff hub + Cardiff service pages
   Scoped entirely under .loc-* so nothing here can leak into
   the existing service, blog or home page styles.
   ============================================================ */

/* ---- Shared section header (mirrors .svc-offer .head) ---- */
.loc-sec { padding: 100px 0; }
.loc-sec.alt { background: var(--cream); }
.loc-sec .head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 52px;
}
.loc-sec .head .eyebrow-pill { margin-bottom: 18px; }
.loc-sec .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.loc-sec .head h2 em { font-style: normal; color: var(--crimson); }
.loc-sec .head p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 auto 14px;
}
.loc-sec .head p:last-child { margin-bottom: 0; }
.loc-sec .head a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Breadcrumb trail ---- */
.loc-crumb-bar { border-bottom: 1px solid var(--rule); background: #fff; }
.loc-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.loc-crumb a { color: var(--muted); transition: color .2s; }
.loc-crumb a:hover { color: var(--crimson); }
.loc-crumb [aria-current] { color: var(--ink); }
.loc-crumb i { font-size: 10px; opacity: .55; }

/* ---- Lede / prose blocks ----
   The lede carries the intro paragraphs that don't fit in the hero. It needs
   padding on BOTH sides: without the lower half the last line butts straight
   against the tinted band that follows it. */
.loc-lede {
  padding: 54px 0 76px;
  background: var(--paper);
}
.loc-lede-inner { max-width: 900px; margin: 0 auto; }
/* Short rule marks the block as a deliberate standfirst rather than a
   paragraph left stranded in the white space. */
.loc-lede-inner::before {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 0 0 26px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
}
.loc-lede-inner p,
.loc-prose-body p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 20px;
}
.loc-lede-inner p { font-size: 17px; }
.loc-lede-inner p:last-child,
.loc-prose-body p:last-child { margin-bottom: 0; }
.loc-prose-body { max-width: 900px; margin: 0 auto; }

/* ---- Check-list point grids ---- */
.loc-points-grid {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.loc-points-grid li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.loc-points-grid li:hover {
  transform: translateY(-3px);
  border-color: rgba(223, 180, 112,.35);
  box-shadow: var(--shadow-md);
}
.loc-points-grid li i {
  color: var(--accent-ink);
  font-size: 18px;
  line-height: 1.5;
  flex-shrink: 0;
}
.loc-points-grid:last-child { margin-bottom: 0; }
.loc-points-note {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}
.loc-points-note p { margin: 0 0 16px; }
.loc-points-note p:last-child { margin-bottom: 0; }

/* ---- Lists nested inside offer cards ---- */
.svco-body .svco-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.svco-body .svco-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.svco-body .svco-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
}

/* Bootstrap-icon variant of the sitewide .svc-icon (which sizes <svg>) */
.svc-icon i { font-size: 26px; line-height: 1; }

/* ---- Closing CTA band ---- */
.loc-final {
  padding: 92px 0;
  background: var(--ink);
  color: #fff;
}
.loc-final-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.loc-final h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 20px;
  color: #fff;
}
.loc-final h2 em { font-style: normal; color: #dfb470; }
.loc-final p {
  font-size: 16.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.82);
  margin: 0 0 18px;
}
.loc-final p:last-of-type { margin-bottom: 30px; }
.loc-final-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- Other-services cross-link strip ---- */
.loc-cross { padding: 100px 0; background: var(--cream); }
.loc-cross .head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
}
.loc-cross .head .eyebrow-pill { margin-bottom: 18px; }
.loc-cross .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.loc-cross .head h2 em { font-style: normal; color: var(--crimson); }
.loc-cross .head p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0; }
.loc-cross .head a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.loc-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.loc-cross-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 24px 22px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.loc-cross-card:hover {
  transform: translateY(-4px);
  border-color: rgba(223, 180, 112,.35);
  box-shadow: var(--shadow-md);
}
.loc-cross-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lilac);
  color: var(--ink);
  font-size: 19px;
  flex-shrink: 0;
  transition: background .35s, color .35s;
}
.loc-cross-card:hover .loc-cross-ico { background: var(--crimson); color: var(--on-accent); }
.loc-cross-body { display: block; }
.loc-cross-body b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.loc-cross-body span {
  display: block;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.loc-cross-arr {
  margin-left: auto;
  align-self: center;
  color: var(--accent-ink);
  font-size: 18px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s, transform .3s;
}
.loc-cross-card:hover .loc-cross-arr { opacity: 1; transform: translateX(0); }
.loc-cross-foot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

/* ---- Cardiff hub ---- */
.loc-hub-hero { position: relative; padding: 78px 0 84px; background: var(--cream); overflow: hidden; }
.loc-hub-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(223, 180, 112,.10), transparent 70%);
  pointer-events: none;
}
.loc-hub-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 64px;
  align-items: center;
}
.loc-hub-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 18px 0 20px;
}
.loc-hub-hero h1 em { font-style: normal; color: var(--crimson); }
.loc-hub-hero p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 18px;
  max-width: 620px;
}
.loc-hub-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.loc-hub-media { position: relative; }
.loc-hub-media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.loc-hub-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.loc-hub-fact b {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}
.loc-hub-fact span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.loc-hub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.loc-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 34px 30px 30px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.loc-hub-card:hover {
  transform: translateY(-5px);
  border-color: rgba(223, 180, 112,.35);
  box-shadow: var(--shadow-md);
}
.loc-hub-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.loc-hub-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--ink);
  font-size: 23px;
  transition: background .35s, color .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.loc-hub-card:hover .loc-hub-ico { background: var(--crimson); color: var(--on-accent); transform: rotate(-6deg) scale(1.04); }
.loc-hub-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(18, 50, 84,.28);
}
.loc-hub-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
}
.loc-hub-card p {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--muted);
  margin: 0 0 22px;
}
.loc-hub-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.loc-hub-link .arr { transition: transform .3s; }
.loc-hub-card:hover .loc-hub-link .arr { transform: translateX(5px); }


/* ---- Location pages: responsive ---- */
@media (max-width: 1100px) {
  .loc-cross-grid { grid-template-columns: repeat(2, 1fr); }
  .loc-hub-cards { grid-template-columns: repeat(2, 1fr); }
  .loc-hub-grid { grid-template-columns: 1fr; gap: 44px; }
  .loc-hub-hero h1 { font-size: 46px; }
  .loc-hub-hero p { max-width: none; }
}
@media (max-width: 900px) {
  .loc-sec, .loc-cross { padding: 76px 0; }
  .loc-lede { padding: 44px 0 58px; }
  .loc-final { padding: 72px 0; }
  .loc-sec .head h2, .loc-cross .head h2 { font-size: 36px; }
  .loc-final h2 { font-size: 34px; }
  .loc-points-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .loc-hub-hero { padding: 56px 0 62px; }
  .loc-hub-hero h1 { font-size: 36px; }
  .loc-hub-cards, .loc-cross-grid { grid-template-columns: 1fr; }
  .loc-hub-facts { grid-template-columns: 1fr; gap: 14px; }
  .loc-sec .head h2, .loc-cross .head h2 { font-size: 30px; }
  .loc-final h2 { font-size: 28px; }
  .loc-lede-inner p, .loc-prose-body p { font-size: 15.5px; }
  .loc-lede-inner::before { width: 44px; margin-bottom: 20px; }
  .loc-final-actions .btn, .loc-cross-foot .btn, .loc-hub-actions .btn { width: 100%; justify-content: center; }
}

/* ---- Location pages: inline sub-headings, emphasis and pill icons ---- */
.loc-prose-body h3,
.loc-points-note h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin: 30px 0 12px;
}
.loc-prose-body h3:first-child,
.loc-points-note h3:first-child { margin-top: 0; }
.loc-prose-body ul.svco-list { margin: 4px 0 22px; }
.loc-points-grid li b { color: var(--ink); font-weight: 600; }
.loc-hub-content .eyebrow-pill i { margin-right: 6px; color: var(--crimson); }
.bsp-head .loc-prose-body p { color: var(--muted); font-size: 16px; }
@media (max-width: 720px) {
  .loc-prose-body h3, .loc-points-note h3 { font-size: 19px; }
}

/* ============================================================
   LOCATIONS INDEX  —  /locations/
   ============================================================ */
.loc-index-hero {
  position: relative;
  padding: 84px 0 88px;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.loc-index-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(223, 180, 112,.28), transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(223, 180, 112,.24), transparent 58%);
  pointer-events: none;
}
.loc-index-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.loc-index-hero .eyebrow-pill {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #dfb470;
}
.loc-index-hero .eyebrow-pill i { margin-right: 6px; }
.loc-index-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: 20px 0 20px;
  color: #fff;
}
.loc-index-hero h1 em { font-style: normal; color: #dfb470; }
.loc-index-hero p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,.82);
  margin: 0;
}

.loc-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.loc-index-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.loc-index-card:hover {
  transform: translateY(-5px);
  border-color: rgba(223, 180, 112,.32);
  box-shadow: var(--shadow-lg);
}
.loc-index-media {
  position: relative;
  display: block;
  aspect-ratio: 760 / 380;
  overflow: hidden;
  background: var(--lilac);
}
.loc-index-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.loc-index-card:hover .loc-index-media img { transform: scale(1.05); }
.loc-index-flag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(18, 50, 84,.72);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.loc-index-flag i { color: #dfb470; font-size: 12px; }

.loc-index-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 30px 30px 30px;
}
.loc-index-title {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.loc-index-title h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.loc-index-title h3 a { transition: color .25s; }
.loc-index-card:hover .loc-index-title h3 a { color: var(--crimson); }
.loc-index-body > p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 20px;
}
.loc-index-services {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-bottom: 24px;
}
.loc-index-services-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.loc-index-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.loc-index-chips a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--ink);
  background: #fff;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.loc-index-chips a i { font-size: 13px; color: var(--crimson); transition: color .25s; }
.loc-index-chips a:hover {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--on-accent);
  transform: translateY(-2px);
}
.loc-index-chips a:hover i { color: #fff; }

.loc-index-cta { margin-top: auto; align-self: flex-start; }

.loc-index-note {
  max-width: 720px;
  margin: 44px auto 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted);
}
.loc-index-note a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }

/* Photo credit line under the Cardiff hub hero image */
.loc-hub-credit {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 1000px) {
  .loc-index-grid { grid-template-columns: 1fr; }
  .loc-index-hero h1 { font-size: 44px; }
}
@media (max-width: 720px) {
  .loc-index-hero { padding: 60px 0 64px; }
  .loc-index-hero h1 { font-size: 34px; }
  .loc-index-hero p { font-size: 15.5px; }
  .loc-index-body { padding: 24px 22px; }
  .loc-index-title h3 { font-size: 26px; }
  .loc-index-cta { width: 100%; justify-content: center; }
  .loc-index-hero .loc-hub-actions .btn { width: 100%; justify-content: center; }
}

/* A single location fills the row instead of leaving a gap beside it:
   photo on the left, detail on the right. Falls back to the stacked
   card layout below 1000px, same as the multi-city grid. */
.loc-index-grid.is-single { grid-template-columns: 1fr; }
@media (min-width: 1001px) {
  .loc-index-grid.is-single .loc-index-card { flex-direction: row; align-items: stretch; }
  .loc-index-grid.is-single .loc-index-media {
    flex: 0 0 44%;
    aspect-ratio: auto;
    align-self: stretch;
  }
  .loc-index-grid.is-single .loc-index-body { padding: 44px 44px 40px; }
  .loc-index-grid.is-single .loc-index-title h3 { font-size: 38px; }
  .loc-index-grid.is-single .loc-index-body > p { font-size: 16px; }
}

/* ============== PUBLISHING PROCESS ==============
   Ported from the sticky-column process section on thewebsiteproviders.com:
   a left column that stays put while a numbered list scrolls past it, joined by
   a dashed rule with a caret pointing at each card. Their blue (#1650B7) is
   swapped for this site's --ink / --crimson throughout. */
.process-sec {
  background: var(--paper);
  padding: 110px 0 120px;
  border-top: 1px solid var(--rule);
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 90px;
  /* Deliberately NOT align-items: start. A sticky element can only travel
     inside its own containing block, so the left column has to stretch to the
     full row height (the height of the card list) for the panel to stick as
     you scroll past. With `start` the column collapses to its content and
     sticky silently does nothing. */
  align-items: stretch;
}
.process-sticky {
  position: sticky;
  top: 120px;
}
.process-logo {
  width: 250px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
.process-sticky h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.process-sticky h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.process-sticky > p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  max-width: 42ch;
}
.process-cta { margin-top: 30px; }

/* The list sits to the right of the dashed rule, so it carries the left padding
   the rule and carets are positioned against. */
.process-list {
  position: relative;
  padding-left: 30px;
}
.process-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--ink) 50%, transparent 50%);
  background-size: 100% 8px;
}
.process-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.process-list li {
  position: relative;
  margin: 0 0 34px;
}
.process-list li:last-child { margin-bottom: 0; }
/* Caret pointing from the rule into each card. */
.process-list li::after {
  content: '';
  position: absolute;
  left: -30px;
  top: 46px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 12px solid var(--crimson);
}
.process-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 38px 34px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.07);
  transition: box-shadow .35s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.11);
}
.process-num span {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--accent-ink);
  display: block;
}
.process-body { flex: 1; min-width: 0; }
.process-body h6 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.process-body h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
}
.process-body p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 12px;
}
.process-body p:last-child { margin-bottom: 0; }

/* "Explore Service" link inside a process card - matches the one the service
   grid further down the page uses. */
.process-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s, gap .25s;
}
.process-link .arr {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  transition: background .25s, transform .25s;
}
.process-link:hover {
  color: var(--accent-ink);
  gap: 12px;
}
.process-link:hover .arr {
  background: var(--crimson);
  color: var(--on-accent);
  transform: translateX(2px);
}

/* ============== SERVICES · HOW IT WORKS (4 steps) ==============
   Four numbered steps in a row: number, circled icon, title, one line of copy.
   Site palette throughout - crimson for the numbers and icons, ink for the
   headings - rather than the orange the reference layout used. */
.spro {
  background: var(--paper);
  padding: 100px 0 110px;
  border-top: 1px solid var(--rule);
}
.spro-head {
  max-width: 860px;
  margin: 0 auto 60px;
  text-align: center;
}
.spro-head h2 {
  font-family: var(--serif);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.spro-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.spro-head p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
.spro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.spro-step {
  text-align: center;
}
.spro-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.spro-ico {
  width: 74px;
  height: 74px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--accent-ink);
  font-size: 28px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s;
}
.spro-step:hover .spro-ico {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(18, 50, 84, .38);
}
.spro-step h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
}
.spro-step p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

/* Four across instead of the default three - used where the "Other Services"
   block drops the card for the page it is sitting on. */
.svc-grid.svc-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* ============== HOME SERVICES (centred icon cards, three across) ==============
   Replaces the sticky-column + numbered-timeline block. The whole card is the
   anchor, so the layout stays clean while each one still opens its service
   page. Own namespace so it cannot collide with the .svc-* cards used on the
   service pages themselves. */
.hsvc-sec {
  background: var(--paper);
  padding: 110px 0;
}
.hsvc-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.hsvc-head h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 18px;
}
.hsvc-head h2 em {
  font-style: normal;
  color: var(--gold);
}
.hsvc-head p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

.hsvc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.hsvc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 32px 40px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s, background .3s;
}
.hsvc-card:hover {
  transform: translateY(-5px);
  background: var(--paper);
  border-color: var(--gold);
  box-shadow: 0 22px 46px -22px rgba(18, 50, 84, .35);
}

.hsvc-ico {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 32px;
  line-height: 1;
  margin-bottom: 24px;
  flex-shrink: 0;
  transition: background .3s, color .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.hsvc-card:hover .hsvc-ico {
  background: var(--ink);
  color: var(--gold);
  transform: rotate(-6deg) scale(1.06);
}

.hsvc-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 14px;
}
.hsvc-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

.hsvc-cta {
  text-align: center;
  margin-top: 52px;
}

/* ============== THANK YOU ==============
   Confirmation page after a form is submitted: header, this block, footer. */
.ty-sec {
  background: var(--cream);
  padding: 120px 0 110px;
  text-align: center;
}
.ty-inner {
  max-width: 720px;
  margin: 0 auto;
}
.ty-ico {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 52px;
  line-height: 1;
  margin: 0 auto 30px;
  box-shadow: 0 20px 44px -18px rgba(18, 50, 84, .40);
}
.ty-sec h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 58px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 18px;
}
.ty-sec h1 em {
  font-style: normal;
  color: var(--gold);
}
.ty-lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 620px;
  margin: 0 auto 14px;
}
.ty-note {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 36px;
}
.ty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.ty-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  justify-content: center;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.ty-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .2s;
}
.ty-contact a i {
  font-size: 18px;
  color: var(--gold);
}
.ty-contact a:hover {
  opacity: .72;
}

/* ============== 5 KEY STAGES (arc) ==============
   Nodes sit on a quadratic curve from (40,250) through control (500,-60) to
   (960,250). Their left/top percentages are that curve evaluated at
   t = .1 / .3 / .5 / .7 / .9, so each one lands exactly on the line. The SVG
   uses preserveAspectRatio="none" and shares the same box, which keeps them
   seated at every width. */
.aproc {
  /* Hidden for now. The markup is still in index.php and the rest of this
     block is intact - delete this one line to bring the section back. */
  display: none;

  background: var(--paper);
  /* Deep bottom padding: the two end cards hang below their nodes and the logo
     is offset downwards, and this section clips its overflow. */
  padding: 100px 0 210px;
  overflow: hidden;
}
.aproc-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.aproc-head h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.aproc-head h2 em {
  font-style: normal;
  color: var(--gold);
}

.aproc-stage {
  position: relative;
  height: 260px;
  /* The top margin is the room the cards need above the curve - the tallest
     sits over node 3 at the apex. */
  margin: 200px auto 30px;
}
.aproc-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.aproc-arc path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
}
/* The soft dome the arc sits on */
.aproc-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  height: 210px;
  transform: translateX(-50%);
  border-radius: 340px 340px 0 0;
  background: linear-gradient(180deg, rgba(18, 50, 84, .05), rgba(18, 50, 84, 0));
  pointer-events: none;
}

/* Logo where the reference had its row of dots */
.aproc-logo {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 2;
  top: 120px;
}
.aproc-logo img {
  display: block;
  height: 196px;
  width: auto;
  position: relative;
  top: 120px;
}

/* Zero-size anchors: every child positions from the point on the curve */
.aproc-node {
  position: absolute;
  width: 0;
  height: 0;
}
.aproc-n1 { left: 6%;    top: 91.1%; }
.aproc-n2 { left: 23.6%; top: 56.2%; }
.aproc-n3 { left: 41.2%; top: 38.7%; }
.aproc-n4 { left: 58.8%; top: 38.7%; }
.aproc-n5 { left: 76.4%; top: 56.2%; }
.aproc-n6 { left: 94%;   top: 91.1%; }

/* The two end nodes sit low where the curve dives, so a card above them runs
   into its neighbour's. They drop below their node instead, anchored to the
   inner edge so they cannot hang off the section, which clips. */
.aproc-n1 .aproc-card,
.aproc-n6 .aproc-card {
  bottom: auto;
  top: 82px;
  transform: none;
}
.aproc-n1 .aproc-card { left: -12px; }
.aproc-n6 .aproc-card { left: auto; right: -12px; }
.aproc-n1:hover .aproc-card,
.aproc-n6:hover .aproc-card { transform: translateY(-6px); }

.aproc-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  background: var(--ink);
  color: var(--gold);
  box-shadow: 0 14px 30px -14px rgba(18, 50, 84, .55);
  z-index: 2;
}
.aproc-n2 .aproc-ico,
.aproc-n4 .aproc-ico,
.aproc-n6 .aproc-ico {
  background: var(--gold);
  color: var(--on-accent);
}
.aproc-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 34px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  z-index: 3;
}

.aproc-card {
  position: absolute;
  left: 50%;
  bottom: 68px;
  /* --shift is how far the card is pulled back across its own width. -50%
     centres it on the node; a larger value nudges it left. Per-node overrides
     below. */
  --shift: -50%;
  transform: translateX(var(--shift));
  width: 196px;
  text-align: left;
}
/* 2 pulled left and 5 pushed right by the same amount, so the pair stays
   symmetrical about the centre. */
.aproc-n2 .aproc-card { --shift: -82%; }
.aproc-n5 .aproc-card { --shift: -18%; }
.aproc-card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.aproc-n2 .aproc-card h3,
.aproc-n4 .aproc-card h3,
.aproc-n6 .aproc-card h3 { color: var(--accent-ink); }
.aproc-card p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text);
  margin: 0;
}
.aproc-card p b {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Stages: interaction ----------
   .aproc-node is a zero-size anchor, but :hover still matches it while the
   pointer is over any of its children, so one rule set drives the whole group. */
.aproc-ico,
.aproc-num,
.aproc-card,
.aproc-card h3 {
  transition:
    transform .35s cubic-bezier(.2, .7, .2, 1),
    background .3s,
    color .3s,
    border-color .3s,
    box-shadow .35s,
    opacity .3s;
}

/* A ring that sits under each icon and expands on hover */
.aproc-ico::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0;
  transform: scale(.82);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s;
  pointer-events: none;
}

/* Pointing at one stage dims the rest so the eye follows it */
.aproc-stage:hover .aproc-node { opacity: .45; }
.aproc-stage:hover .aproc-node:hover { opacity: 1; }

.aproc-node:hover .aproc-ico {
  transform: translate(-50%, -50%) scale(1.12) rotate(-6deg);
  background: var(--gold);
  color: var(--on-accent);
  box-shadow: 0 22px 44px -16px rgba(18, 50, 84, .55);
}
.aproc-n2:hover .aproc-ico,
.aproc-n4:hover .aproc-ico,
.aproc-n6:hover .aproc-ico {
  background: var(--ink);
  color: var(--gold);
}
.aproc-node:hover .aproc-ico::after {
  opacity: 1;
  transform: scale(1);
}
.aproc-node:hover .aproc-num {
  transform: translate(-50%, 40px) scale(1.1);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}
.aproc-node:hover .aproc-card {
  transform: translateX(var(--shift)) translateY(-6px);
}
.aproc-node:hover .aproc-card h3 { color: var(--gold); }

/* The heading keeps a rule under it that draws across on hover */
.aproc-card h3 {
  position: relative;
  padding-bottom: 8px;
}
.aproc-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: width .4s cubic-bezier(.2, .7, .2, 1);
}
.aproc-node:hover .aproc-card h3::after { width: 100%; }

/* Idle: the icons breathe, staggered, so the row is not dead on arrival */
@keyframes aprocFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 7px)); }
}
.aproc-ico { animation: aprocFloat 5.5s ease-in-out infinite; }
.aproc-n2 .aproc-ico { animation-delay: .6s; }
.aproc-n3 .aproc-ico { animation-delay: 1.2s; }
.aproc-n4 .aproc-ico { animation-delay: 1.8s; }
.aproc-n5 .aproc-ico { animation-delay: 2.4s; }
.aproc-n6 .aproc-ico { animation-delay: 3s; }
/* Hover takes over from the float */
.aproc-node:hover .aproc-ico { animation-play-state: paused; }

/* The logo lifts gently with the section */
.aproc-logo img { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.aproc-stage:hover .aproc-logo img { transform: scale(1.04); }

/* The curve draws itself in once on load, then a light runs along it */
.aproc-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: aprocDraw 1.8s cubic-bezier(.4, 0, .2, 1) .15s forwards;
}
@keyframes aprocDraw {
  to { stroke-dashoffset: 0; }
}
.aproc-comet {
  fill: var(--gold);
  filter: drop-shadow(0 0 6px rgba(223, 180, 112, .9));
  opacity: 0;
  animation: aprocCometIn .6s ease 1.6s forwards;
}
@keyframes aprocCometIn {
  to { opacity: 1; }
}

/* ============== HOW WE PUBLISH (numbered grid) ==============
   Three across, two down. Each cell carries its own right and bottom rule,
   with the last column and last row clearing theirs, which draws the grid
   lines without any extra elements. */
.xstep {
  background: var(--paper);
  padding: 100px 0;
}
.xstep-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 54px;
}
.xstep-head h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.xstep-head h2 em {
  font-style: normal;
  color: var(--gold);
}
.xstep-head p {
  font-size: 15.5px;
  line-height: 1.75;
  margin-top: 10px;
}

.xstep-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xstep-item {
  padding: 30px 36px 34px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.xstep-item:nth-child(3n) { border-right: 0; }
.xstep-item:nth-last-child(-n + 3) { border-bottom: 0; padding-bottom: 8px; }
.xstep-item:nth-child(-n + 3) { padding-top: 0; }

.xstep-item h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 14px;
}
.xstep-num {
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 2px solid var(--rule);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--gold);
}
.xstep-item p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}

.xstep-cta {
  text-align: center;
  margin-top: 52px;
}

/* ============== WHY CHOOSE US ==============
   Two columns: the pitch on the left, the reasons on the right in their own
   two-up grid. Deliberately unlike the centred service cards above it and the
   ruled process grid, so the page does not read as three versions of one
   layout. */
.wcu {
  background: var(--paper-2);
  padding: 104px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wcu-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}

.wcu-intro {
  position: sticky;
  top: 110px;
}
.wcu-intro h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 20px;
}
.wcu-intro h2 em {
  font-style: normal;
  color: var(--gold);
}
.wcu-intro p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 16px;
}
.wcu-intro .btn { margin-top: 12px; }

.wcu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 32px;
}
.wcu-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.wcu-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 23px;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .3s, color .3s;
}
.wcu-item:hover .wcu-ico {
  transform: translateY(-3px) rotate(-6deg);
  background: var(--ink);
  color: var(--gold);
}
.wcu-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.3;
  color: var(--ink);
  margin: 4px 0 9px;
}
.wcu-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

/* ==========================================================================
   Consultation CTA  (.ctaband - written inline on each page)

   Was a full-bleed navy strip with the copy on the left, one small button on
   the right and a wide empty gap between them - the gap grew when the phone
   number came off the site and left the button alone in a column. It is now a
   raised card on a cream ground, and the space between the two sides is filled
   deliberately: trust points on one side, a larger button with a fallback
   contact line on the other.
   ========================================================================== */
.ctaband {
  background: var(--cream);
  padding: 72px 0;
  position: relative;
  z-index: 1;
}
.ctaband-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  padding: 48px 52px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, #16395e 0%, var(--ink) 55%, #0f2b48 100%);
  box-shadow: var(--shadow-lg);
}
/* A hairline of brand gold along the top edge */
.ctaband-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* --- decoration ------------------------------------------------------- */
.ctaband-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}
.ctaband-glow-1 {
  width: 320px;
  height: 320px;
  top: -140px;
  right: 12%;
  background: rgba(223, 180, 112, 0.18);
}
.ctaband-glow-2 {
  width: 260px;
  height: 260px;
  bottom: -150px;
  left: -60px;
  background: rgba(223, 180, 112, 0.12);
}
.ctaband-mark {
  position: absolute;
  right: 34%;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  font-size: 190px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

/* --- copy ------------------------------------------------------------- */
.ctaband-body {
  position: relative;
  z-index: 2;
}
.ctaband-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(223, 180, 112, 0.14);
  border: 1px solid rgba(223, 180, 112, 0.3);
  padding: 6px 13px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.ctaband h3 {
  font-family: var(--serif);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  color: #fff;
  max-width: 20ch;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
}
.ctaband h3 em {
  font-style: normal;
  font-weight: 500;
  color: var(--gold);
}
.ctaband p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
}

/* --- trust points ----------------------------------------------------- */
.ctaband-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 22px 0 0;
  padding: 0;
}
.ctaband-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.ctaband-points i {
  font-size: 15px;
  color: var(--gold);
}

/* --- action ----------------------------------------------------------- */
.ctaband-action {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ctaband-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 18px 30px;
  border-radius: 999px;
  background: var(--gold);
  /* --gold is a mid-tone: navy on it clears 7:1, white would sit at 1.9:1 */
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 16px 32px -14px rgba(223, 180, 112, 0.75);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s;
}
.ctaband-btn-arr {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-size: 14px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ctaband-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -14px rgba(223, 180, 112, 0.9);
}
.ctaband-btn:hover .ctaband-btn-arr {
  transform: translateX(4px);
}
.ctaband-alt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.25s;
}
.ctaband-alt i {
  color: var(--gold);
}
.ctaband-alt:hover {
  color: #fff;
}

/* --- responsive ------------------------------------------------------- */
@media (max-width: 991px) {
  .ctaband { padding: 56px 0; }
  .ctaband-card {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 34px;
  }
  .ctaband h3 { font-size: 28px; max-width: none; }
  .ctaband-action { align-items: flex-start; }
  /* The watermark sat behind the button on desktop; stacked, it would sit
     behind the copy instead, so it goes. */
  .ctaband-mark { display: none; }
}
@media (max-width: 560px) {
  .ctaband { padding: 44px 0; }
  .ctaband-card {
    padding: 32px 22px;
    border-radius: 16px;
  }
  .ctaband h3 { font-size: 23px; }
  .ctaband-points { gap: 9px 18px; }
  .ctaband-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
  }
}


.img-right {
    position: relative;
    left: 100px;
}


.four-o-four .faq-nav {
    margin-top: 10px;
    gap: 15px;
}


.nf-hero { padding: 80px 0 90px; }
.nf-code {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 150px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--crimson);
  margin: 18px 0 6px;
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.nf-links { margin-top: 44px; }
.nf-links-title {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.nf-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.nf-links a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}
.nf-links a:hover { color: var(--crimson); }
@media (max-width: 560px) {
  .nf-hero { padding: 60px 0 70px; }
  .nf-code { font-size: 100px; }
}









































.legal-hero {
  position: relative;
  padding: 90px 0 70px;
  background: var(--cream);
  overflow: hidden;
  text-align: center;
}
.legal-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(223, 180, 112, .08) 0%, transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(223, 180, 112, .12) 0%, transparent 70%);
}
.legal-hero .wrap {
  position: relative;
}
.legal-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(223, 180, 112, .08);
  border: 1px solid rgba(223, 180, 112, .22);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.legal-hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.legal-hero h1 em {
  font-style: normal;
  color: var(--accent-ink);
  font-weight: 500;
}
.legal-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 18px;
}




@media (max-width: 1024px) {
  .faq-left h2 { font-size: 38px; }
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .faq-left { position: static; }
}
@media (max-width: 768px) {
  .faq-left h2 { font-size: 32px; }
}
@media (max-width: 720px) {
  .faq-left { text-align: center; }
}