/* =====================================================================
   Dublin Publishing Press — core stylesheet
   ---------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography helpers
   4.  Buttons, badges & shared blocks
   5.  Header / navigation
   6.  Footer
   7.  Home page sections
   8.  Inner page sections
   9.  Forms
   Breakpoint overrides live in responsive.css.
   ===================================================================== */

/* ------------------------------------------------------- 1. tokens --- */
:root {
    --navy: #0e203c;
    --navy-deep: #0b1a31;
    --navy-line: #21324d;
    --navy-soft: #16304f;
    --gold: #eaab21;
    --gold-dark: #cf9414;
    --peach: #ffdbae;
    --cream: #f7f1e6;
    --cream-soft: #fffaf3;
    --ink: #111111;
    --body: #374151;
    --body-strong: #1f2937;
    --muted: #6b7280;
    --line: #ece7de;
    --line-soft: #f0ece4;
    --icon-bg: #e4efff;
    --surface: #fafafa;
    --field: #f8f8f8;
    --on-navy: #dbe3ee;
    --on-navy-muted: #aebbcf;
    --on-navy-faint: #8e9db4;

    --font-body: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-condensed: "Bebas Neue", Impact, "Arial Narrow", sans-serif;

    --shell: 1440px;
    --gutter: 40px;
    --header-h: 84px;
}

/* -------------------------------------------------- 2. reset & base --- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: #ffffff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.85;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }

a {
    color: var(--navy);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
a:hover { color: var(--gold); }

p { margin: 0 0 16px; color: var(--body); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--navy);
    line-height: 1.14;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, figcaption { margin: 0; }
hr { margin: 0; border: 0; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14.5px; }

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--navy); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

.container {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.container--narrow { max-width: 1240px; }
.container--reading { max-width: 900px; }

.section { padding: 100px 0; }
.section--tight { padding: 70px 0; }
.section--cream { background: var(--cream-soft); }
.section--navy { background: var(--navy); }
.section--flush-top { padding-top: 0; }

/* --------------------------------------------------- 3. typography --- */
.eyebrow {
    display: inline-block;
    background: var(--peach);
    color: #161616;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.4;
    padding: 7px 18px;
    border-radius: 999px;
}

.h-display { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.01em; line-height: 1.08; }
.h-section  { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.12; }
.h-page     { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; }
.h-sub      { font-size: clamp(28px, 2.8vw, 44px); }

.h-accent { color: var(--gold); font-style: italic; }

.lede { font-size: 15.5px; line-height: 1.85; color: var(--body); }

.section-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.section-head h2, .section-head h1 { margin: 22px 0 16px; }
.section-head p { margin: 0; }

.section-head--left { margin-left: 0; text-align: left; }

/* Header row with copy on the left and buttons on the right */
.split-head {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 60px;
}
.split-head__copy { max-width: 680px; }
.split-head__copy h2 { margin: 22px 0 14px; }
.split-head__copy p { margin: 0; }
.split-head__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Icons — Font Awesome 6, sized through the same hooks the layout uses */
.icon {
    display: inline-block;
    line-height: 1;
    font-style: normal;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* ------------------------------- 4. buttons, badges & shared blocks --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    padding: 13px 26px;
    border: 0;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-soft); color: #fff; }
.btn--gold { background: var(--gold); color: #161616; }
.btn--gold:hover { background: var(--gold-dark); color: #161616; }
.btn--ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: var(--navy);
    font-weight: 400;
}
.link-arrow .icon { font-size: 18px; transition: transform .2s ease; }
.link-arrow:hover .icon { transform: translateX(4px); }

/* Offset colour block behind a card / image */
.offset {
    position: relative;
    isolation: isolate;
}
.offset::before {
    content: "";
    position: absolute;
    inset: 7px -6px -7px 6px;
    background: var(--gold);
    z-index: -1;
}
.offset--navy::before { inset: 22px -20px -22px 20px; background: var(--navy); }
.offset--wide::before { inset: 14px -12px -14px 12px; border-radius: 16px; }

.tick-list { display: grid; gap: 14px; }
.tick-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.6;
    color: var(--body-strong);
}
.tick-list .icon { font-size: 22px; color: var(--gold); flex: 0 0 auto; }

.back-to-top {
    border-radius: 8px;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Custom live-chat launcher, in place of the one Tawk.to ships: a navy pill
   with a gold icon disc and a live status dot.

   display:none until main.js has confirmed the widget is loaded — on a
   local copy, or if the script is blocked, no dead button appears. */
.chat-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 8px 22px 8px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    text-align: left;
    box-shadow: 0 14px 34px rgba(6, 16, 32, .34);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.chat-launcher.is-ready { display: flex; }
.chat-launcher:hover {
    background: var(--navy-soft);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(6, 16, 32, .4);
}

.chat-launcher__mark {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
}
.chat-launcher__mark .icon { font-size: 19px; }

/* The "we are online" dot, sitting on the rim of the disc */
.chat-launcher__dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #2fbf5d;
    border: 2px solid var(--navy);
}

.chat-launcher__text { display: block; min-width: 0; }
.chat-launcher__text strong {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}
.chat-launcher__text small {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--on-navy-muted);
    white-space: nowrap;
}

/* Both live in the same corner, so the scroll button sits above the pill.
   Only while the pill is showing, or it would float in mid-air on a page
   where the widget never loaded. */
.chat-launcher.is-ready ~ .back-to-top { bottom: 94px; }

/* The pill floats over the end of the footer, where the legal links sit.
   They are pulled left to clear it rather than the footer being made
   taller — the links keep their row, and nothing is hidden behind it. */
.has-live-chat .site-footer__bar ul { padding-right: 244px; }
.back-to-top:hover { background: var(--gold); color: var(--navy); }

/* ------------------------------------------- 5. header & navigation --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 8px 26px rgba(14, 32, 60, .09); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { height: 54px; width: auto; }

.main-nav { margin-left: auto; }
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 26px;
    white-space: nowrap;
}
.main-nav__link {
    display: inline-block;
    font-size: 15.5px;
    font-weight: 400;
    color: var(--navy);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.main-nav__link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.main-nav__link.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 8px;
}

.header-call { display: flex; align-items: center; gap: 9px; }
.header-call .icon { font-size: 22px; color: var(--navy); }
.header-call__text { display: block; line-height: 1.25; }
.header-call__label { display: block; font-size: 12px; color: var(--muted); }
.header-call__number { display: block; font-size: 15px; font-weight: 500; color: var(--navy); }
.header-call:hover .header-call__number { color: var(--gold); }

.header-cta { padding: 12px 22px; }

/* Hamburger */
.nav-toggle {
    display: none;
    width: 46px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--line);
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
}
.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--navy);
    transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(14, 32, 60, .5);
    opacity: 0;
    transition: opacity .3s ease;
}
.nav-overlay.is-open { opacity: 1; }

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: min(340px, 86vw);
    height: 100%;
    background: #fff;
    padding: 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
}
.mobile-nav.is-open { transform: none; }
.mobile-nav[hidden] { display: none; }
.nav-overlay[hidden] { display: none; }

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.mobile-nav__head img { height: 44px; width: auto; }
.mobile-nav__close {
    background: transparent;
    border: 0;
    color: var(--navy);
    padding: 4px;
}
.mobile-nav__close .icon { font-size: 28px; }

.mobile-nav__list { padding: 12px 0; }
.mobile-nav__list a {
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    color: var(--navy);
    border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__list a.is-active { color: var(--gold); }

.mobile-nav__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 14px; }
.mobile-nav__contact {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: var(--body);
    word-break: break-word;
}
.mobile-nav__contact .icon { font-size: 20px; color: var(--gold); flex: 0 0 auto; }

/* --------------------------------------------------------- 6. footer --- */
.site-footer {
    background: var(--navy);
    color: #c9d3e2;
    font-size: 14.5px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr;
    gap: 48px 60px;
    padding: 78px 0 0;
}
.footer-col__title {
    font-family: var(--font-display);
    font-size: 19px;
    color: #fff;
    margin-bottom: 22px;
}
.footer-col p { color: var(--on-navy-muted); font-size: 14.5px; line-height: 1.85; }
.footer-logo { height: 62px; width: auto; margin-bottom: 24px; }

.footer-social { display: flex; gap: 12px; margin-top: 24px; }
.footer-social a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--navy-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-links { display: grid; gap: 13px; }
.footer-links a { color: var(--on-navy-muted); }
.footer-links a:hover { color: var(--gold); }

.footer-contact { display: grid; gap: 14px; margin-bottom: 26px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; color: var(--on-navy-muted); }
.footer-contact .icon { font-size: 20px; color: var(--gold); flex: 0 0 auto; }
.footer-contact a { color: var(--on-navy-muted); }
.footer-contact a:hover { color: var(--gold); }

.footer-newsletter__note { font-size: 13.5px; color: var(--on-navy-muted); margin-bottom: 12px; }
.footer-newsletter { display: flex; }
.footer-newsletter input {
    border-radius: 6px 0 0 6px;
    flex: 1;
    min-width: 0;
    border: 1px solid var(--navy-line);
    background: var(--navy-deep);
    color: #fff;
    padding: 13px 14px;
    font-size: 14px;
    outline: none;
}
.footer-newsletter input::placeholder { color: #7d8ca4; }
.footer-newsletter input:focus { border-color: var(--gold); }
.footer-newsletter button {
    border-radius: 0 6px 6px 0;
    background: var(--gold);
    color: #161616;
    border: 0;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
}
.footer-newsletter button:hover { background: var(--gold-dark); }

.site-footer__bar {
    border-top: 1px solid var(--navy-line);
    margin-top: 60px;
    padding: 24px 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--on-navy-faint);
}
.site-footer__bar p { margin: 0; color: var(--on-navy-faint); }
.site-footer__bar ul { display: flex; flex-wrap: wrap; gap: 26px; }
.site-footer__bar a { color: var(--on-navy-faint); }
.site-footer__bar a:hover { color: var(--gold); }

/* ---------------------------------------------- 7. home page blocks --- */

/* Hero
   The artwork is absolutely positioned so it fills the section from the very
   top (flush under the header) to the bottom and bleeds off the right edge.
   Layers, back to front: paint splash → tilted book columns → the author. */
.hero {
    position: relative;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
}
.hero::after {
    /* soft warm vignette so the copy always sits on a calm ground */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(100deg, var(--cream) 0%, var(--cream) 33%, rgba(247, 241, 230, .72) 44%, rgba(247, 241, 230, .28) 54%, rgba(247, 241, 230, 0) 64%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 50px;
    padding-top: 74px;
    padding-bottom: 0;
}
.hero__copy { flex: 1 1 520px; max-width: 620px; padding-bottom: 74px; }
.hero__copy h1 { margin: 22px 0 14px; color: var(--navy); }
.hero__copy h1 .h-accent { display: inline; }

.hero__art {
    position: absolute;
    top: 0;
    right: max(0px, calc((100% - var(--shell)) / 2));
    bottom: 0;
    width: min(52%, 760px);
    z-index: 1;
    pointer-events: none;
}
.hero__splash {
    position: absolute;
    top: 50%;
    right: 8%;
    width: 104%;
    aspect-ratio: 3 / 2;
    transform: translateY(-50%);
    background: url("../images/hero-splash.webp") center / contain no-repeat;
    opacity: .95;
}
.hero__books {
    position: absolute;
    top: -26%;
    right: -12%;
    height: 168%;
    display: flex;
    gap: 22px;
    transform: rotate(18deg);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
}
.hero__books-col { display: grid; gap: 22px; height: max-content; }
.hero__books-col--up { animation: dppScrollUp 46s linear infinite; }
.hero__books-col--down { animation: dppScrollDown 46s linear infinite; }
.hero__books img {
    width: 140px;
    height: auto;
}
.hero__girl {
    position: absolute;
    right: 13%;
    bottom: 0;
    z-index: 2;
    height: 90%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 24px 40px rgba(14, 32, 60, .18));
}

@keyframes dppMarqueeL {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes dppMarqueeR {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@keyframes dppScrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@keyframes dppScrollDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}
.hero__tagline {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.1vw, 27px);
    line-height: 1.25;
    color: var(--navy);
    margin: 0 0 20px;
}
.hero__copy p { color: var(--body-strong); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 44px; }

.hero__trust-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1c1c1c;
    margin-bottom: 14px;
}
.hero__trust { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__trust img { width: auto; max-height: 32px; }


/* Retailer marquee — one continuously scrolling Swiper row. The slide box
   is a fixed frame and every logo is contained inside it, so wide wordmarks
   and square marks end up with the same optical weight. */
.retailers {
    padding: 34px 0 30px;
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
}
.retailers__label {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1c;
    margin-bottom: 26px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.retailers__marquee {
    width: 100%;
    padding: 4px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.retailers__track {
    display: flex;
    width: max-content;
    animation: dppMarqueeL 60s linear infinite;
}
.retailers__slide {
    flex: 0 0 auto;
    width: 190px;
    height: 52px;
    margin-right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.retailers__slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.retailers__slide:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

/* About */
.about { padding: 110px 0 100px; overflow: hidden; }
.about__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    align-items: center;
}
.about__media { width: 100%; }
/* Natural aspect — the subjects run edge to edge, so any crop clips them */
.about__media img { width: 100%; height: auto; }
.about__copy { position: relative; }
.about__copy > * { position: relative; z-index: 1; }
.about__quill {
    position: absolute;
    right: -20px;
    top: -70px;
    height: 300px;
    width: auto;
    opacity: .45;
    z-index: 0 !important;
    pointer-events: none;
}
.about__copy h2 { font-size: clamp(34px, 3.4vw, 50px); margin: 0 0 22px; }
.about__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.about__copy .tick-list { margin-top: 26px; }

/* Service cards */
/* Service cards. Numbered like chapters, with a navy icon tile and a gold
   rule that draws itself across the top as the card lifts. The whole card
   is the link target — the arrow row just shows where it goes. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}
.service-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 38px 34px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1),
                box-shadow .3s ease,
                border-color .3s ease;
}
.service-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.service-card:hover,
.service-card:focus-within {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 26px 52px rgba(14, 32, 60, .16);
}
.service-card:hover::before,
.service-card:focus-within::before { transform: scaleX(1); }

/* Chapter number, parked in the empty space beside the icon tile */
.service-card__num {
    position: absolute;
    top: 26px;
    right: 30px;
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    color: var(--cream);
    letter-spacing: -.02em;
    transition: color .3s ease;
    pointer-events: none;
}
.service-card:hover .service-card__num { color: #fbeccb; }

.service-card__icon {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    transition: background .3s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}
.service-card__icon .icon { font-size: 31px; color: var(--gold); transition: color .3s ease; }
.service-card:hover .service-card__icon { background: var(--gold); transform: rotate(-6deg); }
.service-card:hover .service-card__icon .icon { color: var(--navy); }

.service-card h3 { font-size: 22px; margin: 0 0 14px; transition: color .25s ease; }
.service-card:hover h3 { color: var(--gold-dark); }
.service-card p { font-size: 14.5px; line-height: 1.8; margin: 0 0 26px; flex: 1; color: var(--body); }

.service-card .link-arrow {
    margin-top: auto;
    font-weight: 500;
    color: var(--gold-dark);
}
.service-card .link-arrow .icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cream);
    font-size: 12px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.service-card:hover .link-arrow .icon {
    background: var(--gold);
    color: var(--navy);
    transform: translateX(4px);
}
/* Stretch the link over the card so the whole tile is clickable */
.service-card .link-arrow::after { content: ""; position: absolute; inset: 0; }

/* ---------------------------------------------- portfolio ticker ----- */
/* Two Swiper rows on a slightly tilted plane. The rows never stop for a
   hover — only the card under the pointer reacts. */
.ticker {
    display: grid;
    gap: 26px;
    width: 114%;
    margin-left: -7%;
    padding: 26px 0 34px;
    transform: rotate(-2.4deg);
}
.ticker__row { width: 100%; padding: 16px 0 22px; overflow: hidden; }
.ticker__track {
    display: flex;
    width: max-content;
    animation: dppMarqueeL 88s linear infinite;
}
.ticker__row--reverse .ticker__track { animation-name: dppMarqueeR; }
/* Spacing lives on the slide, not as a track gap: the track holds the row
   twice and -50% only lands cleanly when every step is the same width. */
.ticker__slide { flex: 0 0 auto; width: 196px; height: auto; margin-right: 22px; }

.book-tile {
    display: block;
    color: inherit;
    outline: none;
}
.book-tile__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 2 / 3;
    background: var(--cream);
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.book-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.book-tile__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(to top, rgba(14, 32, 60, .92) 0%, rgba(14, 32, 60, .35) 48%, rgba(14, 32, 60, 0) 78%);
    opacity: 0;
    transition: opacity .3s ease;
}
.book-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: #161616;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 14px;
    transform: translateY(10px);
    transition: transform .3s ease;
}
.book-tile__cta .fa-solid { font-size: 11px; }

.book-tile:hover .book-tile__media,
.book-tile:focus-visible .book-tile__media {
    transform: translateY(-10px);
}
.book-tile:hover .book-tile__media img,
.book-tile:focus-visible .book-tile__media img { transform: scale(1.06); }
.book-tile:hover .book-tile__veil,
.book-tile:focus-visible .book-tile__veil { opacity: 1; }
.book-tile:hover .book-tile__cta,
.book-tile:focus-visible .book-tile__cta { transform: none; }
.book-tile:focus-visible .book-tile__media { outline: 3px solid var(--gold); outline-offset: 4px; }
.book-tile__cta { border-radius: 6px; }

.book-tile__meta { display: block; padding-top: 16px; }
.book-tile__title {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.35;
    color: var(--navy);
    transition: color .2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-tile:hover .book-tile__title { color: var(--gold-dark); }
.book-tile__author { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* Process timeline — a dashed rail across numbered nodes, with an
   equal-height card hanging under each one. */
.process { padding: 96px 0 104px; }
.process__flow { position: relative; }

.process__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.process__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* the rail: drawn from each node to the next, so it always lines up */
.process__item::before {
    content: "";
    position: absolute;
    top: 33px;
    left: calc(50% + 40px);
    width: calc(100% + 30px - 80px);
    height: 2px;
    background-image: linear-gradient(to right, #c9b48a 0 10px, transparent 10px 20px);
    background-size: 20px 2px;
    background-repeat: repeat-x;
}
.process__item:last-child::before { display: none; }

.process__node {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    margin-bottom: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gold);
    box-shadow: 0 8px 22px rgba(14, 32, 60, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.process__card {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    padding: 34px 28px 32px;
    border-radius: 18px;
    background: var(--navy);
    overflow: hidden;
    text-align: center;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease;
}
.process__item:nth-child(even) .process__card { background: var(--gold); }

.process__item:hover .process__card {
    transform: translateY(-8px);
    box-shadow: 0 26px 48px rgba(14, 32, 60, .2);
}
.process__item:hover .process__node {
    background: var(--gold);
    color: var(--navy);
    transform: scale(1.06);
}

.process__icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: background-color .3s ease;
}
.process__icon .icon { font-size: 21px; color: var(--gold); }
.process__item:nth-child(even) .process__icon {
    background: rgba(14, 32, 60, .1);
    border-color: rgba(14, 32, 60, .18);
}
.process__item:nth-child(even) .process__icon .icon { color: var(--navy); }
.process__item:hover .process__icon { background: rgba(255, 255, 255, .2); }
.process__item:nth-child(even):hover .process__icon { background: rgba(14, 32, 60, .16); }

.process__title {
    font-family: var(--font-condensed);
    font-size: 25px;
    letter-spacing: .03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 12px;
}
.process__item:nth-child(even) .process__title { color: #2a2205; }

.process__card p {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--on-navy);
    margin: 0;
}
.process__item:nth-child(even) .process__card p { color: #3a2f08; }

/* Testimonials — a scroll-snap carousel of soft rounded cards */
.testimonials { padding: 104px 0 96px; }

.testimonial-slider { position: relative; }
.testimonial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 56px) / 3);
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 4px 18px;
    margin: -10px -4px 0;
    scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial {
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 20px;
    padding: 28px 30px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(14, 32, 60, .06);
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.testimonial:hover {
    transform: translateY(-6px);
    border-color: #e3d9c2;
    box-shadow: 0 22px 46px rgba(14, 32, 60, .12);
}

/* The card is a column flex container, so the image has to opt out of
   `align-items: stretch` or it is forced to the full card width and the
   aspect ratio is ignored. */
.testimonial__stars {
    height: 18px;
    width: auto;
    align-self: flex-start;
    flex: 0 0 auto;
}

.testimonial__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.75;
    color: #1a1a1a;
    margin: 18px 0 24px;
    flex: 1;
}

.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 2px solid var(--gold);
    padding: 2px;
    background: #fff;
}
.testimonial__name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.45;
}
.testimonial__book {
    display: block;
    font-family: var(--font-display);
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.5;
}

.slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 34px;
}
.slider-nav button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.slider-nav button:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.slider-nav button[disabled] { opacity: .35; cursor: default; }
.slider-nav button[disabled]:hover { background: #fff; border-color: var(--line); color: var(--navy); }
.slider-nav .icon { font-size: 22px; }

/* The dots injected under a grid that only slides on mobile. Hidden by
   default so it can never appear on desktop, where the grid is a grid and
   there is nothing to page through; responsive.css switches it on. */
.slider-nav--mobile { display: none; margin-top: 22px; }

.slider-dots { display: flex; align-items: center; gap: 10px; }
.slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d9d3c8;
    transition: all .25s ease;
}
.slider-dots button.is-active { width: 34px; background: var(--gold); }

/* Marquee bands — two ribbons tilted against each other so they cross */
.band {
    position: relative;
    overflow: hidden;
    padding: 54px 0 62px;
    background: #fff;
}
.band__row {
    position: relative;
    width: 116%;
    margin-left: -8%;
    padding: 22px 0;
    overflow: hidden;
}
.band__row--navy {
    background: var(--navy);
    transform: rotate(-2.4deg);
    z-index: 1;
}
.band__row--gold {
    background: var(--gold);
    transform: rotate(2.4deg);
    margin-top: -20px;
    z-index: 2;
    box-shadow: 0 -10px 30px rgba(14, 32, 60, .14);
}
.band__track {
    display: flex;
    gap: 44px;
    width: max-content;
    align-items: center;
}
.band__row--navy .band__track { animation: dppMarqueeL 34s linear infinite; }
.band__row--gold .band__track { animation: dppMarqueeR 34s linear infinite; }
.band__track span {
    font-size: clamp(18px, 2.4vw, 28px);
    font-weight: 500;
    white-space: nowrap;
}
.band__row--navy .band__track span { color: #fff; }
.band__row--gold .band__track span { color: #161616; }
.band__track .icon { font-size: 24px; }
.band__row--navy .band__track .icon { color: var(--gold); }
.band__row--gold .band__track .icon { color: var(--navy); }

/* Contact / CTA block */
/* Sits on cream so the block reads as its own panel rather than more of
   the white page above it. */
.cta-block {
    padding: 92px 0 96px;
    background: var(--cream-soft);
    border-top: 1px solid var(--line);
}
.cta-block__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}
.cta-block__copy h2 { margin: 20px 0 18px; max-width: 480px; }
/* One even rhythm, instead of two paragraphs carrying odd 40px gaps */
.cta-block__copy p { max-width: 520px; margin-bottom: 16px; }
.cta-block__copy p:last-of-type { margin-bottom: 0; }

/* Contact rows as light cards. The old solid-navy squares were the heaviest
   thing on the page and pulled attention away from the form beside them. */
.contact-lines {
    display: grid;
    gap: 10px;
    max-width: 520px;
    margin-top: 32px;
}
.contact-lines li {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.contact-lines li:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(14, 32, 60, .10);
}
.contact-lines li > a,
.contact-lines li > span:last-child { flex: 1; min-width: 0; }
.contact-lines__icon {
    width: 46px;
    height: 46px;
    background: var(--cream);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color .25s ease;
}
.contact-lines__icon .icon { font-size: 18px; color: var(--gold-dark); transition: color .25s ease; }
.contact-lines li:hover .contact-lines__icon { background: var(--navy); }
.contact-lines li:hover .contact-lines__icon .icon { color: var(--gold); }
.contact-lines__label {
    display: block;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.4;
}
.contact-lines__value {
    display: block;
    font-size: 15px;
    color: var(--navy);
    line-height: 1.5;
    margin-top: 2px;
    transition: color .2s ease;
}
.contact-lines a:hover .contact-lines__value { color: var(--gold-dark); }

/* The gold plate behind the form was a hard slab at full saturation; a
   softer tint still reads as a lift without competing with the fields. */
.cta-block .offset::before { background: var(--peach); border-radius: 18px; }

/* --------------------------------------------- 8. inner page blocks --- */
.page-hero {
    background: var(--cream-soft);
    border-bottom: 1px solid #f0e8da;
    text-align: center;
}
.page-hero__inner { padding: 76px 0 72px; }
.page-hero h1 { margin: 22px 0 16px; }
.page-hero p { margin: 0 auto; max-width: 720px; }
.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--muted);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }

/* About page */
.story__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    align-items: center;
}
.story__media { position: relative; width: 100%; }
.story__media::before {
    content: "";
    position: absolute;
    left: -18px;
    top: -18px;
    width: 180px;
    height: 180px;
    background: var(--gold);
}
.story__media img { position: relative; width: 100%; height: auto; }
.story__copy h2 { margin: 0 0 22px; }
.story__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    text-align: center;
}
.stats__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(38px, 3.8vw, 52px);
    color: var(--gold);
    line-height: 1;
}
.stats__label { display: block; font-size: 14.5px; color: #c9d3e2; margin-top: 10px; line-height: 1.6; }

.value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}
.value-card {
    border: 1px solid var(--line);
    padding: 34px;
    transition: border-color .25s ease, transform .25s ease;
}
.value-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.value-card > .icon { font-size: 38px; color: var(--gold); }
.value-card h3 { font-size: 21px; margin: 18px 0 12px; }
.value-card p { font-size: 14.5px; line-height: 1.8; margin: 0; }

.standards__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}
.standards__list { display: grid; gap: 22px; }
.standards__list li { display: flex; gap: 18px; }
.standards__num { font-family: var(--font-display); font-size: 26px; color: var(--gold); line-height: 1.2; }
.standards__title { font-family: var(--font-display); font-size: 19px; color: var(--navy); margin-bottom: 6px; }
.standards__list p { font-size: 14.5px; line-height: 1.8; margin: 0; }

/* Services page */
.service-detail { display: grid; gap: 52px; }
.service-detail__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 34px;
    padding-bottom: 52px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 140px;
}
.service-detail__item:last-child { padding-bottom: 0; border-bottom: 0; }
.service-detail__icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-detail__icon .icon { font-size: 44px; color: var(--navy); }
.service-detail__item h2 { font-size: clamp(26px, 2.4vw, 32px); margin: 0 0 14px; }
.service-detail__item > div > p { max-width: 820px; margin: 0 0 22px; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 34px;
}
.feature-grid li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body);
}
.feature-grid .icon { font-size: 20px; color: var(--gold); flex: 0 0 auto; }

/* Packages */
.packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}
.package {
    background: #fff;
    border: 1px solid var(--line);
    padding: 38px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.package--featured { background: var(--navy); border-color: var(--navy); }
.package__name { font-family: var(--font-display); font-size: 24px; color: var(--navy); margin-bottom: 8px; }
.package--featured .package__name { color: #fff; }
.package__intro { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 22px; }
.package--featured .package__intro { color: var(--on-navy-muted); }
.package__price { font-family: var(--font-display); font-size: 42px; color: var(--navy); line-height: 1.1; }
.package--featured .package__price { color: var(--gold); }
.package__price-note { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.package--featured .package__price-note { color: var(--on-navy-muted); }
.package__list { display: grid; gap: 12px; flex: 1; margin-bottom: 30px; }
.package__list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--body); line-height: 1.6; }
.package--featured .package__list li { color: var(--on-navy); }
.package__list .icon { font-size: 19px; color: var(--gold); flex: 0 0 auto; }
.package__flag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--gold);
    color: #161616;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 7px 14px;
}
.package .btn { padding: 14px; }

/* Portfolio page */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 56px;
}
.filter-pills button {
    border: 1px solid #e2ddd4;
    background: transparent;
    color: var(--body);
    font-size: 14px;
    padding: 9px 20px;
    border-radius: 999px;
    transition: all .2s ease;
}
.filter-pills button:hover { border-color: var(--navy); }
.filter-pills button.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 44px 34px;
}
.book-card.is-hidden { display: none; }
.book-grid__empty {
    text-align: center;
    font-size: 15px;
    color: var(--muted);
    padding: 40px 0 0;
}

.cta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    align-items: center;
    justify-content: space-between;
}
.cta-strip__copy { max-width: 640px; }
.cta-strip__copy h2 { font-size: clamp(28px, 3vw, 40px); margin: 0 0 12px; }
.cta-strip__copy p { margin: 0; }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Blog cards
   ---------------------------------------------------------------------
   Article artwork is never cropped, anywhere. Covers, diagrams and quote
   cards arrive at different aspect ratios and a cover with its title sliced
   off is worse than a little letterboxing — so every image box is a fixed
   16:9 frame with object-fit:contain over a warm field. The frame keeps the
   grid tidy; contain keeps the artwork whole. */

.post-media,
.post-card__media,
.post-featured__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 50% 0%, #ffffff 0%, var(--cream-soft) 55%, var(--cream) 100%);
}
.post-media img,
.post-card__media img,
.post-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------- featured slot */
.post-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding: 0;
    border: 0;
}
.post-featured__media {
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(14, 32, 60, .14);
}
/* The house motif: a gold block set behind the artwork. */
.post-featured__frame { position: relative; isolation: isolate; }
.post-featured__frame::before {
    content: "";
    position: absolute;
    inset: 20px -18px -20px 18px;
    border-radius: 18px;
    background: var(--gold);
    z-index: -1;
}
.post-featured:hover .post-featured__media img { transform: scale(1.035); }

.post-featured__flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--peach);
    color: #161616;
    font-family: var(--font-display);
    font-size: 12.5px;
    letter-spacing: .04em;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.post-featured h2 {
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.14;
    margin: 0 0 18px;
}
.post-featured h2 a { color: inherit; }
.post-featured h2 a:hover { color: var(--gold-dark); }
.post-featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 18px;
}
.post-featured__body > p { font-size: 15.5px; line-height: 1.85; margin: 0 0 28px; }

/* --------------------------------------------------------------- grid */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 32, 60, .04);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.post-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 26px 54px rgba(14, 32, 60, .14);
}
.post-card__media { border-bottom: 1px solid var(--line-soft); }
.post-card:hover .post-card__media img { transform: scale(1.045); }

/* The category rides on the artwork rather than eating a line of the card */
.post-card__tag {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    margin: 0;
    background: rgba(14, 32, 60, .92);
    color: var(--peach);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.post-card__body { padding: 26px 26px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card h3,
.post-card__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.3;
    margin: 0 0 12px;
}
.post-card h3 a { color: var(--navy); }
.post-card h3 a:hover { color: var(--gold-dark); }
.post-card p { font-size: 14.5px; line-height: 1.8; color: var(--body); margin: 0 0 20px; flex: 1; }

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.post-card__more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--navy);
    white-space: nowrap;
}
.post-card__more i { font-size: 12px; transition: transform .25s ease; }
.post-card:hover .post-card__more { color: var(--gold-dark); }
.post-card:hover .post-card__more i { transform: translateX(4px); }

.newsletter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    align-items: center;
    justify-content: space-between;
}
.newsletter-strip h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.16; color: #fff; margin: 0 0 12px; }
.newsletter-strip p { color: var(--on-navy-muted); margin: 0; }
.newsletter-strip form { display: flex; min-width: 340px; flex: 0 1 460px; }
.newsletter-strip input {
    border-radius: 8px 0 0 8px;
    flex: 1;
    min-width: 0;
    border: 1px solid #2a3d5c;
    background: var(--navy-deep);
    color: #fff;
    padding: 15px 16px;
    font-size: 15px;
    outline: none;
}
.newsletter-strip input::placeholder { color: #7d8ca4; }
.newsletter-strip input:focus { border-color: var(--gold); }
.newsletter-strip button {
    border-radius: 0 8px 8px 0;
    background: var(--gold);
    color: #161616;
    border: 0;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 500;
}
.newsletter-strip button:hover { background: var(--gold-dark); }

/* Contact page */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.contact-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 34px;
    text-align: center;
    transition: border-color .25s ease;
}
.contact-card:hover { border-color: var(--gold); }
.contact-card__icon {
    width: 66px;
    height: 66px;
    background: var(--navy);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.contact-card__icon .icon { font-size: 30px; color: #fff; }
.contact-card h2 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; }
.contact-card p { font-size: 14.5px; color: var(--body); line-height: 1.7; margin: 0; }

.contact-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}
.faq { display: grid; gap: 14px; }
.faq details {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--gold); }
.faq summary {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "\f067";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 17px;
    color: var(--gold);
    flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\f068"; }
.faq p { font-size: 14.5px; line-height: 1.8; margin: 14px 0 0; }

.map-embed { border: 1px solid var(--line); line-height: 0; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* Legal / long-form pages */
.legal h2 { font-size: 28px; margin: 42px 0 14px; }
.legal h3 { font-size: 20px; margin: 28px 0 10px; }
.legal p, .legal li { font-size: 15px; line-height: 1.9; color: var(--body); }
.legal ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; display: grid; gap: 8px; }
.legal ul li { padding-left: 4px; }
.legal a { text-decoration: underline; }

/* 404 */
.error-page { text-align: center; padding: 120px 0; }
.error-page__code {
    font-family: var(--font-condensed);
    font-size: clamp(90px, 16vw, 190px);
    line-height: .9;
    color: var(--gold);
}
.error-page h1 { margin: 18px 0 14px; }
.error-page p { max-width: 560px; margin: 0 auto 32px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------------------------------------------------------- 9. forms --- */
.lead-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 14px 40px rgba(14, 32, 60, .07);
}
.lead-form h2,
.lead-form h3,
.lead-form__intro { text-align: center; }
.lead-form h2, .lead-form h3 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--ink);
    margin: 0 0 10px;
}
.lead-form__intro { font-size: 14.5px; line-height: 1.7; color: #4b5563; margin: 0 0 26px; }

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--field);
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid #ececec;
    border-radius: 10px;
    transition: border-color .2s ease, background-color .2s ease;
}
.field-row .field { margin-bottom: 0; }
.field:focus-within { border-color: var(--gold); background: #fff; }
.field--textarea { align-items: flex-start; }
.field > .icon { font-size: 22px; color: #9aa1ab; flex: 0 0 auto; }
.field input,
.field select,
.field textarea {
    border: 0;
    background: transparent;
    outline: none;
    color: var(--ink);
    width: 100%;
    padding: 0;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.field select { color: #5b6371; cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: #9aa1ab; }

.form-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12.5px;
    color: #5c5c5c;
}
.form-privacy .icon { font-size: 20px; }

/* In the lead form the heading, intro and submit button are all centred,
   so a left-hugging caption underneath reads as a stray line. Scoped to
   .lead-form deliberately: the same caption appears in the enquiry pop-up,
   which is left-aligned throughout and must stay that way. */
.lead-form .form-privacy { justify-content: center; text-align: center; }

.lead-form button[type="submit"] {
    width: 100%;
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 17px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .2s ease;
}
.lead-form button[type="submit"]:hover { background: var(--navy-soft); }

/* Honeypot — hidden from people, visible to naive bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-note {
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 14.5px;
    border-left: 3px solid var(--gold);
    background: var(--cream-soft);
    color: var(--body-strong);
}
.form-note--error { border-left-color: #c0392b; background: #fdf1ef; }

/* ------------------------------------------------------- motion pref --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ------------------------------------------- 10. reveal animations --- */
.js .js-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.js-reveal.is-revealed { opacity: 1; transform: none; }

.js-reveal--left  { transform: translateX(-34px); }
.js-reveal--right { transform: translateX(34px); }
.js-reveal--zoom  { transform: scale(.94); }
.js-reveal--left.is-revealed,
.js-reveal--right.is-revealed,
.js-reveal--zoom.is-revealed { transform: none; }

/* Children stagger in one after another */
.js .js-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}
.js-stagger.is-revealed > * { opacity: 1; transform: none; }
.js-stagger.is-revealed > *:nth-child(1) { transition-delay: .05s; }
.js-stagger.is-revealed > *:nth-child(2) { transition-delay: .12s; }
.js-stagger.is-revealed > *:nth-child(3) { transition-delay: .19s; }
.js-stagger.is-revealed > *:nth-child(4) { transition-delay: .26s; }
.js-stagger.is-revealed > *:nth-child(5) { transition-delay: .33s; }
.js-stagger.is-revealed > *:nth-child(6) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal,
    .js-stagger > * { opacity: 1 !important; transform: none !important; }
    .ticker__track,
    .retailers__track,
    .band__track,
    .hero__books-col { animation: none !important; }
}

/* Failsafe: the gate above is applied by an inline script in the head, so
   if main.js never arrives (blocked, cached badly, a script error) the
   observer never runs and the content would stay invisible for good. The
   head script clears the gate after a few seconds if it never reported in. */
.reveals-failed .js-reveal,
.reveals-failed .js-stagger > * {
    opacity: 1 !important;
    transform: none !important;
}

/* ------------------------------- 11. content sections from the brief --- */

/* Image + copy rows. The image sits on the left by default and on the right
   with --flip, so consecutive sections alternate down the page. */
.media-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    align-items: center;
}
.media-split--flip .media-split__copy  { order: 1; }
.media-split--flip .media-split__media { order: 2; justify-self: end; }

.media-split__media { width: 100%; }
.media-split__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* Mirror the offset block so it leans toward the copy on both sides */
.media-split--flip .offset--navy::before { inset: 22px 20px -22px -20px; }

.media-split__copy h2 { margin: 20px 0 0; }
.media-split__lede {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--gold-dark);
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-style: italic;
}
.media-split__body { margin-top: 26px; }
.media-split__body p { margin-bottom: 18px; }
.media-split__cta { margin-top: 26px; }

/* "We regularly work with" — icon + line cards */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.feature-cards li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 26px 28px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--body);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.feature-cards li:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(14, 32, 60, .08);
}
.feature-cards .icon {
    font-size: 20px;
    color: var(--navy);
    background: var(--icon-bg);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Numbered "why trust us" cards */
.reason-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.reason-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 34px 34px 32px;
    background: #fff;
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.reason-card:hover {
    border-color: var(--gold);
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(14, 32, 60, .1);
}
.reason-card__num {
    display: block;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    color: var(--gold);
    margin-bottom: 16px;
}
.reason-card h3 { font-size: 22px; margin: 0 0 12px; }
.reason-card p { font-size: 14.5px; line-height: 1.8; margin: 0; }

/* Genre pills */
.genre-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.genre-grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--navy);
    transition: border-color .25s ease, background-color .25s ease;
}
.genre-grid li:hover { border-color: var(--gold); background: var(--cream-soft); }
.genre-grid .icon { font-size: 15px; color: var(--gold); flex: 0 0 auto; }

/* Questions-to-ask checklist */
.checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 34px;
    max-width: 1100px;
    margin: 0 auto;
}
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--cream-soft);
    border-left: 3px solid var(--gold);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--body-strong);
}
.checklist .icon { font-size: 18px; color: var(--gold); flex: 0 0 auto; margin-top: 3px; }

/* Single column, for a checklist sitting inside one half of a split row
   rather than across the full width of a section. */
.checklist--stack { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 26px 0 0; }

/* Short reassurance words under the contact hero. A flex row ignores the
   hero's text-align, so it needs centring on its own axis. */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin: 28px 0 0;
}
.trust-badges li {
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--cream-soft);
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
}
.trust-badges li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--gold);
    margin-right: 8px;
}

/* Closing note under a grid */
.section-note {
    max-width: 900px;
    margin: 44px auto 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.85;
    color: var(--body);
}

/* Closing promise block on navy — the same card language as the light
   sections, restated for a dark ground: hairline borders instead of
   shadows, and a gold wash behind the icon rather than the blue one. */
.promise .section-head h2 { color: #fff; }
.promise .eyebrow { background: rgba(255, 255, 255, .12); color: #fff; }

.promise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.promise-card {
    position: relative;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--navy-line);
    border-radius: 14px;
    padding: 32px 28px 30px;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.promise-card:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, .06);
    transform: translateY(-4px);
}
/* Gold hairline down the left edge, drawn on hover only so the resting
   state stays quiet and the row does not reflow. */
.promise-card::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    border-radius: 2px;
    background: var(--gold);
    opacity: 0;
    transition: opacity .25s ease;
}
.promise-card:hover::before { opacity: 1; }

.promise-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 171, 33, .14);
    color: var(--gold);
    font-size: 19px;
    margin-bottom: 18px;
}
.promise-card__title {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 10px;
}
.promise-card p {
    color: var(--on-navy-muted);
    font-size: 14.5px;
    line-height: 1.8;
    margin: 0;
}

.promise__foot { text-align: center; margin-top: 46px; }
.promise__sign {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--gold) !important;
    border-top: 1px solid var(--navy-line);
    padding-top: 26px;
    margin: 34px auto 0;
    max-width: 760px;
}

/* --------------------------------------- 13. services navigation --- */
/* Desktop dropdown. The panel is painted but inert until the parent is
   hovered or something inside it takes focus, so it stays keyboard
   reachable without JavaScript holding it open. */
.main-nav li.has-dropdown { position: relative; }
.main-nav__caret {
    font-size: 10px;
    margin-left: 6px;
    transition: transform .25s ease;
    vertical-align: middle;
}
.has-dropdown:hover .main-nav__caret,
.has-dropdown:focus-within .main-nav__caret { transform: rotate(180deg); }

.main-nav .dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 10px);
    z-index: 70;
    width: min(560px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 2px 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 28px 60px -22px rgba(14, 32, 60, .34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
/* A hover bridge across the gap, so the pointer can travel from the link
   to the panel without the panel closing underneath it. */
.has-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 18px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.main-nav .dropdown li { display: block; }
.main-nav .dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 10px;
    white-space: normal;
    transition: background-color .16s ease;
}
.dropdown a:hover,
.dropdown a:focus-visible,
.dropdown a.is-active { background: var(--cream); }

/* A bare icon rather than a filled tile — ten tiles in one panel reads as
   clutter, and the gold alone is enough to separate the rows. */
.dropdown__icon {
    flex: 0 0 auto;
    width: 20px;
    font-size: 15px;
    text-align: center;
    color: var(--gold-dark);
    transition: color .16s ease;
}
.dropdown a:hover .dropdown__icon,
.dropdown a.is-active .dropdown__icon { color: var(--navy); }

.dropdown__text { display: block; min-width: 0; }
.dropdown__text strong {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.3;
}
.dropdown__text small {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------- desktop mega menu --- */
/* The Services panel spans the header rather than the link, so the four
   catalogue columns get room to breathe. The header is position:sticky,
   which already makes it the containing block for the panel below. */
.main-nav li.has-mega { position: static; }
/* The li no longer anchors anything, so its hover bridge would stretch
   across the whole header and swallow clicks. The panel brings its own. */
.has-mega::after { content: none; }

.main-nav .mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 28px 60px -26px rgba(14, 32, 60, .34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
/* Hover bridge — covers the header padding between the link and the panel.
   It is inside the li, so travelling across it keeps the panel open.

   It must overlap the bottom edge of the nav link, not merely meet it: a
   bridge that stops short leaves a dead band where the pointer is over
   neither, and the panel shuts halfway through the trip.

   The link sits ~20px above the panel, so 22px overlaps it by a couple of
   pixels — past sub-pixel rounding, but not so tall that it reaches up
   over the logo and the header button while the panel is open. Full width
   rather than link width, so a diagonal move to a far column survives. */
.main-nav .mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 22px;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.mega__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 30px 34px;
    padding-top: 34px;
    padding-bottom: 32px;
}

/* Gold rule then label, matching the section headings used site-wide */
.mega__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-dark);
    white-space: nowrap;
}
.mega__heading::before {
    content: "";
    flex: 0 0 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
}

/* Scoped under .main-nav so it outweighs the `.main-nav ul` flex row that
   lays out the top-level links — without this the columns run sideways. */
.main-nav .mega__list {
    display: grid;
    gap: 2px;
    white-space: normal;
}
.mega__item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 10px;
    white-space: normal;
    transition: background-color .16s ease;
}
.mega__item:hover,
.mega__item:focus-visible,
.mega__item.is-active { background: var(--cream); }

.mega__arrow {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gold-dark);
    transition: transform .18s ease, color .16s ease;
}
.mega__item:hover .mega__arrow { transform: translateX(3px); }
.mega__item.is-active .mega__arrow { color: var(--navy); }

.mega__text { display: block; min-width: 0; }
/* Flex rather than block so a flagship badge can sit beside the title,
   and wrap under it rather than squashing it when the column is tight. */
.mega__text strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--navy);
}
/* Same pill as the pop-up badge, shrunk to sit on one line of nav copy */
.mega__flag {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--peach);
    color: #6b4c07;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.6;
    text-transform: uppercase;
    white-space: nowrap;
}
.mega__item:hover .mega__text strong { color: var(--gold-dark); }
.mega__item.is-active .mega__text strong { color: var(--gold-dark); }
.mega__text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

/* Closing row — sits under the four columns, full width */
.mega__cta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.mega__cta-label { font-size: 14px; color: var(--body); }
.mega__cta .btn { padding: 11px 22px; font-size: 14px; }

/* The two warning lines on the scam-alert page. Given the page exists to
   stop someone wiring money to a fraudster, these need to catch the eye
   rather than read as another paragraph. */
.scam-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 26px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    background: var(--cream);
    font-weight: 500;
    color: var(--navy);
}
.scam-note span { flex: 0 0 auto; font-size: 18px; line-height: 1.5; color: var(--gold-dark); }

/* Mobile drawer submenu */
.mobile-nav__row { display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.mobile-nav__row a { flex: 1; border-bottom: 0 !important; }
.mobile-nav__expand {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--navy);
    font-size: 13px;
}
.mobile-nav__expand i { transition: transform .25s ease; display: inline-block; }
.mobile-nav__expand[aria-expanded="true"] i { transform: rotate(180deg); }

.mobile-nav__sub {
    display: grid;
    grid-template-rows: 0fr;
    grid-auto-rows: 0fr;
    transition: grid-template-rows .28s ease, grid-auto-rows .28s ease;
    overflow: hidden;
    background: var(--cream-soft);
    border-radius: 10px;
}
.mobile-nav__sub.is-open { grid-template-rows: 1fr; grid-auto-rows: 1fr; }
.mobile-nav__sub > li { min-height: 0; overflow: hidden; }
.mobile-nav__sub > li:first-child { padding-top: 6px; }
.mobile-nav__sub > li:last-child { padding-bottom: 6px; }
.mobile-nav__sub a {
    padding: 11px 16px;
    font-size: 14.5px;
    color: var(--body);
    border-bottom: 0;
}
.mobile-nav__sub a.is-active { color: var(--gold-dark); font-weight: 500; }

/* -------------------------------------------- 14. service pages --- */
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

/* Centred button under a grid */
.section-cta { text-align: center; margin: 48px 0 0; }

/* Long-form copy inside a narrow container */
.prose { max-width: 860px; margin: 0 auto; }
.prose p { font-size: 15px; line-height: 1.9; margin: 0 0 20px; color: var(--body); }
.prose p:last-child { margin-bottom: 0; }
.prose .tick-list { margin: 26px 0 28px; }
.prose--lead p { font-size: 16.5px; line-height: 1.9; color: var(--body-strong); }

/* Wider check list, for the "who we work with" style blocks */
.feature-grid--wide {
    max-width: 940px;
    margin: 0 auto;
    gap: 18px 40px;
}
.feature-grid--wide li { font-size: 15px; line-height: 1.75; }
.feature-grid--wide strong { color: var(--navy); font-weight: 500; }

/* Numbered process cards. A plain grid rather than the home page's dashed
   rail, because a service page can carry five or six steps and the rail
   only reads correctly along a single row. */
.step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}
.step-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px 28px 26px;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(14, 32, 60, .13); }
.step-card__num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--gold);
    margin-bottom: 14px;
}
.step-card h3 { font-size: 19px; margin: 0 0 10px; line-height: 1.35; }
.step-card p { font-size: 14.5px; line-height: 1.8; color: var(--body); margin: 0; }

/* FAQ answers sit in a wrapper so the summary row keeps its own spacing */
.faq__answer { padding-right: 34px; }
.faq__item summary > span { flex: 1; }

/* ------------------------------------- 15. related service links --- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.related-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.related-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(14, 32, 60, .13);
}
.related-card__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--cream);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background-color .25s ease, color .25s ease;
}
.related-card:hover .related-card__icon { background: var(--navy); color: var(--gold); }
.related-card__text { display: block; min-width: 0; flex: 1; }
.related-card__text strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}
.related-card__text small {
    display: block;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 4px;
}
.related-card__go {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--gold-dark);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease;
}
.related-card:hover .related-card__go { opacity: 1; transform: none; }

/* ------------------------------------ 16. service card slider --- */
/* Three cards in view, scroll-snapped. Same JS as the testimonial
   slider — it derives its page count from the slides themselves, so
   nothing here needs to tell it how many cards there are. */
.card-slider { position: relative; }
.card-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 3);
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 4px 20px;
    margin: -10px -4px 0;
    scrollbar-width: none;
}
.card-slider__track::-webkit-scrollbar { display: none; }
.service-card--slide { scroll-snap-align: start; }

/* The lift on hover would be clipped by the scroll container, so the
   slide variant trades it for a shadow that stays inside its box. */
.service-card--slide:hover,
.service-card--slide:focus-within { transform: none; }

.card-slider .slider-nav { margin-top: 10px; }

/* ------------------------------- service page image + copy rows --- */
/* The shared .media-split grid centres its columns; on a service page the
   copy column is long, so the artwork is pinned near the top of the row
   and given a fixed frame rather than being allowed to stretch. */
.page-service .media-split { align-items: center; gap: 72px; }
.page-service .media-split__media img {
    border-radius: 20px;
    max-height: 620px;
    object-fit: cover;
}
.page-service .media-split__copy .h-sub { margin-top: 18px; }
.page-service .media-split__body .tick-list { margin: 22px 0 6px; }
.page-service .media-split__body p:last-child { margin-bottom: 0; }
.media-split__note {
    margin-top: 22px;
    padding-left: 18px;
    border-left: 3px solid var(--gold);
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--muted);
}

/* Lead block at the top of a service page */
.cta-block--service { padding: 88px 0 92px; }
.cta-block--service .cta-block__copy p { max-width: 560px; margin-bottom: 18px; }
.cta-block--service .cta-block__copy p:nth-of-type(2) { margin-bottom: 18px; }
.cta-block--service .cta-block__copy .contact-lines { margin-top: 36px; }

/* ---------------------------------- 17. split hero with artwork --- */
/* Copy on the left, enquiry form on the right, over the scattered cover
   artwork. The artwork is already a pale cream wash, so the hero stays
   light and the type keeps the site's normal navy-on-cream colouring —
   no scrim is needed, only a soft cream veil to even out the corners. */
.page-hero--split {
    position: relative;
    isolation: isolate;
    background: var(--cream-soft);
    text-align: left;
    overflow: hidden;
}
.page-hero--split::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../images/services-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero--split::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(255, 250, 243, .82) 0%,
        rgba(255, 250, 243, .58) 45%,
        rgba(255, 250, 243, .28) 100%);
}

.page-hero__split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 64px;
    align-items: center;
    /* Horizontal padding stays with .container — only the block padding
       belongs to the hero, or the shorthand would drop the gutter. */
    padding-top: 72px;
    padding-bottom: 78px;
}

/* The breadcrumb leads the column, so it needs no top offset and the
   heading takes over the spacing below it. */
.page-hero--split .breadcrumb {
    justify-content: flex-start;
    margin: 0 0 20px;
}
.page-hero--split .h-page { margin: 0 0 18px; max-width: 620px; }
.page-hero--split .lede { margin: 0; max-width: 600px; }

/* The centred variant belongs to the stacked hero; here the column is
   left-aligned, so the buttons follow the copy rather than the container. */
.page-hero--split .page-hero__actions { justify-content: flex-start; margin-top: 32px; }

.hero-points { display: grid; gap: 12px; margin-top: 28px; }
.hero-points li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.6;
    color: var(--body);
}
.hero-points .icon { font-size: 19px; color: var(--gold); flex: 0 0 auto; }

.page-hero__form .lead-form { box-shadow: 0 30px 60px rgba(14, 32, 60, .16); }

/* Related-service cards ride the same slider track as the service cards,
   so they need to snap and to sit at a comfortable height in the row. */
.card-slider__track > .related-card {
    scroll-snap-align: start;
    align-items: flex-start;
    padding: 22px 24px;
}
.card-slider__track > .related-card:hover { transform: translateY(-4px); }
.related-services .card-slider { margin-top: 8px; }

/* Opening paragraphs, carried in the hero rather than a band of their own */
.page-hero__intro {
    max-width: 600px;
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--body);
}

/* ------------------------------------------ 18. enquiry pop-up --- */
/* Opened by main.js from any call-to-action button. The dialog is two
   panels: the author photograph on the left, the form on the right. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .25s ease;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 49, .62);
    backdrop-filter: blur(3px);
}

.modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    width: min(980px, 100%);
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(6, 16, 32, .45);
    transform: translateY(18px) scale(.98);
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.modal.is-open .modal__dialog { transform: none; }

/* Left panel — the cover photo sits on cream so the cut-out reads cleanly */
.modal__art {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(160deg, var(--cream) 0%, #f2e6d2 100%);
    overflow: hidden;
}
.modal__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.modal__art-note {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(14, 32, 60, .88);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.45;
}
.modal__art-note span { display: block; }
.modal__art-note span::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--gold);
    margin-right: 8px;
}

/* Right panel — the form */
.modal__body {
    padding: 34px 36px 32px;
    overflow-y: auto;
    background: var(--cream-soft);
}
.modal__logo { height: 40px; width: auto; display: block; margin-bottom: 18px; }

.modal__badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--peach);
    color: #6b4c07;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.modal__title {
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    color: var(--navy);
    margin: 14px 0 10px;
}
.modal__intro { font-size: 14.5px; line-height: 1.7; color: var(--body); margin: 0 0 22px; }

.modal__body .field { margin-bottom: 12px; }
.modal__body .field--textarea textarea { min-height: 88px; }
.modal__body button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 17px;
    font-size: 15px;
    font-weight: 500;
    transition: background-color .2s ease;
}
.modal__body button[type="submit"]:hover { background: var(--navy-soft); }
.modal__body .form-privacy { margin-top: 12px; }

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(6, 16, 32, .22);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.modal__close:hover { background: var(--navy); color: #fff; transform: rotate(90deg); }

/* ------------------------------------------- 20. blog "coming soon" --- */
/* Placeholder panel on blogs.php. Same card language as the rest of the
   site — cream ground, hairline border, gold accents — so an empty section
   still looks deliberate rather than unfinished. */
.soon {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 52px 46px 46px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--cream-soft);
}
/* Gold hairline across the top, echoing the offset blocks */
.soon::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}

.soon__badge {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--navy);
    background: linear-gradient(150deg, var(--gold) 0%, var(--gold-dark) 100%);
    box-shadow: 0 10px 26px rgba(234, 171, 33, .3);
    margin-bottom: 22px;
}
.soon__title {
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 1.25;
    color: var(--navy);
    margin: 0 0 12px;
}
.soon__text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--body);
    margin: 0 auto;
    max-width: 60ch;
}

/* The titles in progress. Left-aligned inside a centred panel, because a
   centred list gives every row a different starting edge to scan from. */
.soon__list {
    display: grid;
    gap: 14px;
    text-align: left;
    max-width: 620px;
    margin: 32px auto 0;
    padding: 28px 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.soon__list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}
.soon__list .fa-solid {
    color: var(--gold);
    font-size: 16px;
    flex: 0 0 auto;
    margin-top: 3px;
}
.soon__list strong {
    display: block;
    font-weight: 600;
    color: var(--body-strong);
    margin-bottom: 2px;
}

.soon__note {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--body);
    margin: 30px auto 0;
    max-width: 60ch;
}
.soon__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 26px;
}

/* --------------------------------------------- manuscript health check --- */
/* The input form, then the report. A report is scanned rather than read, so
   the numbers lead and the prose explaining them sits underneath at a smaller
   size — the opposite weighting to the rest of the site. */
.hc-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 38px 36px 32px;
    box-shadow: 0 20px 44px rgba(14, 32, 60, .07);
}
.hc-form__head { margin-bottom: 22px; }
.hc-form__head h2 { font-size: 24px; margin: 0 0 8px; }
.hc-form__head p { font-size: 14.5px; line-height: 1.8; margin: 0; color: var(--body); }

.hc-form textarea {
    width: 100%;
    min-height: 260px;
    resize: vertical;
    padding: 18px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: var(--field);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.hc-form textarea:focus { border-color: var(--gold); background: #fff; }

.hc-form__count {
    margin: 10px 2px 0;
    font-size: 13px;
    color: var(--muted);
    min-height: 20px;
    font-variant-numeric: tabular-nums;
}
.hc-form__count[data-state="ready"] { color: #2f6b4f; }
.hc-form__count[data-state="short"] { color: var(--gold-dark); }

.hc-form__or {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 18px;
    color: var(--muted);
    font-size: 13px;
}
.hc-form__or::before,
.hc-form__or::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.hc-file {
    display: block;
    position: relative;
    text-align: center;
    padding: 26px 22px;
    border: 1px dashed #cfd6df;
    border-radius: 14px;
    background: var(--cream-soft);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.hc-file:hover, .hc-file:focus-within { border-color: var(--gold); background: #fff; }
.hc-file > i { font-size: 26px; color: var(--navy); display: block; margin-bottom: 10px; }
.hc-file__label { display: block; font-weight: 600; color: var(--navy); font-size: 15px; }
.hc-file__hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.hc-file input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.hc-form .btn { margin-top: 24px; }
.hc-form__privacy {
    display: flex;
    gap: 9px;
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
}
.hc-form__privacy .icon { color: var(--gold-dark); flex: 0 0 auto; margin-top: 2px; }

/* What it measures */
.hc-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 40px;
}
.hc-checks li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.75; color: var(--body); }
.hc-checks .icon { color: var(--gold-dark); font-size: 15px; flex: 0 0 auto; margin-top: 4px; }
.hc-checks strong { color: var(--body-strong); }

/* ---- the report */
.verdict {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 34px;
    align-items: start;
    background: var(--navy);
    border-radius: 18px;
    padding: 38px 40px;
    margin-bottom: 34px;
}
.verdict__mark {
    border-right: 1px solid var(--navy-line);
    padding-right: 30px;
}
.verdict__level {
    display: block;
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--gold);
}
.verdict__caption {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-navy-faint);
}
.verdict__copy h2 { font-size: 25px; margin: 0 0 12px; color: #fff; }
.verdict__copy p { font-size: 14.5px; line-height: 1.85; margin: 0 0 12px; color: var(--on-navy); }
.verdict__signals { font-size: 13.5px; color: var(--on-navy-muted); }
.verdict__signals strong { color: #fff; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 40px;
}
.stat { background: #fff; padding: 22px 18px; text-align: center; }
.stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat__label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}
.report-col {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 28px 10px;
}
.report-col__title {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.metric { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.metric:last-child { border-bottom: 0; }
.metric__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 9px;
}
.metric__label { font-size: 15px; font-weight: 500; color: var(--body-strong); }
.metric__value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.metric__read { display: flex; gap: 12px; align-items: flex-start; }
.metric__read p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--body); }

.chip {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: 1px;
}
.chip--good { background: #eef6f1; color: #2f6b4f; }
.chip--warn { background: #fdf5e3; color: #96690c; }
.chip--flag { background: #fbf0ed; color: #a8402c; }

.habit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 44px;
}
.habit {
    background: var(--cream-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 26px 24px;
}
.habit h3 {
    font-size: 18px;
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.habit h3 span {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .04em;
    white-space: nowrap;
}
.habit__note { font-size: 13px; line-height: 1.7; color: var(--body); margin: 0 0 16px; }
.habit__empty { font-size: 13.5px; color: #2f6b4f; margin: 0; font-style: italic; }

.habit__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.habit__tags li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--body);
}
.habit__tags li b {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.habit__tags li[data-level="mid"] { border-color: #e8d3a4; background: #fffaf0; }
.habit__tags li[data-level="hi"] {
    border-color: var(--gold);
    background: #fdf3dd;
    color: var(--body-strong);
    font-weight: 500;
}
.habit__tags li[data-level="hi"] b { color: var(--gold-dark); }

.limits {
    border-left: 3px solid var(--gold);
    padding: 4px 0 4px 24px;
    margin-bottom: 44px;
}
.limits h3 { font-size: 19px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.limits h3 i { color: var(--gold-dark); font-size: 17px; }
.limits p { font-size: 14.5px; line-height: 1.85; color: var(--body); margin: 0 0 12px; }
.limits p:last-child { margin-bottom: 0; }

.hc-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 40px;
}
.hc-next__copy h2 { font-size: clamp(24px, 2.4vw, 31px); margin: 12px 0 14px; }
.hc-next__copy p { font-size: 14.5px; line-height: 1.85; margin: 0; color: var(--body); }
.hc-next__form {
    background: #fff;
    border-radius: 14px;
    padding: 26px 24px 22px;
    box-shadow: 0 16px 36px rgba(14, 32, 60, .09);
}
.hc-next__form .field { padding: 13px 14px; }
.hc-next__form .btn { margin-top: 6px; }

.hc-again { text-align: center; margin: 44px 0 0; }

/* =====================================================================
   BLOG — listing chrome and the article page
   ---------------------------------------------------------------------
   The article is an editorial reading layout: a cream masthead, a cover
   that lifts out of it into the white body, a 760px measure and a sticky
   contents rail. Artwork is never cropped — see the note above .post-media.
   ===================================================================== */

/* ------------------------------------------------- listing: filter row */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 42px;
}
.blog-filter__chip {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--body-strong);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;
    padding: 9px 20px;
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.blog-filter__chip:hover { border-color: var(--navy); }
.blog-filter__chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.blog-empty { margin: 40px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.blog-featured-section { padding-top: 76px; padding-bottom: 20px; }

/* The endless-scroll control. Scrolling to it presses it, so most readers
   never see it as a button — but it stays a real one for the keyboard and
   for browsers without IntersectionObserver. */
.blog-more { display: flex; justify-content: center; padding: 46px 0 4px; }
.blog-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    padding: 12px 26px;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.blog-more__btn:hover { border-color: var(--navy); background: var(--cream-soft); }
.blog-more__dots { display: inline-flex; gap: 5px; }
.blog-more__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: blog-pulse 1.1s ease-in-out infinite;
}
.blog-more__dots span:nth-child(2) { animation-delay: .18s; }
.blog-more__dots span:nth-child(3) { animation-delay: .36s; }

@keyframes blog-pulse {
    0%, 100% { opacity: .3; transform: scale(.75); }
    50%      { opacity: 1;  transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .blog-more__dots span { animation: none; opacity: .65; }
}

/* ------------------------------------------------ article: the masthead */
.read-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 120;
    background: transparent;
    pointer-events: none;
}
.read-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--peach));
    transition: width .1s linear;
}

/* One measure runs the whole article page: the masthead, the cover and the
   reading grid all sit inside the same 1140px column, so their left and
   right edges line up down the page. */
.post-top {
    position: relative;
    background:
        radial-gradient(90% 120% at 12% 0%, #ffffff 0%, var(--cream-soft) 46%, var(--cream) 100%);
    border-bottom: 1px solid var(--line);
    padding: 54px 0 0;
}
.post-measure { max-width: 1140px; margin-inline: auto; }
.post-top .breadcrumb { justify-content: flex-start; margin: 0 0 22px; }

.post-top__cat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--navy);
    color: var(--peach);
    font-size: 11.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
}
.post-top__cat::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
}

.post-top h1 {
    font-size: clamp(30px, 3.9vw, 50px);
    line-height: 1.1;
    letter-spacing: -.005em;
    max-width: 900px;
    margin: 22px 0 20px;
}
.post-top__standfirst {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--body-strong);
    max-width: 780px;
    margin: 0 0 30px;
}

.post-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 0 46px;
    border-top: 1px solid var(--line);
}
.post-byline__mark {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold);
    font-size: 16px;
}
.post-byline__who { font-size: 14px; color: var(--body-strong); line-height: 1.4; }
.post-byline__who strong { font-family: var(--font-display); font-weight: 400; color: var(--navy); display: block; }
.post-byline__facts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}
.post-byline__facts span[aria-hidden] { color: var(--line); }

/* The cover lifts out of the masthead into the white body below it. */
.post-cover-wrap { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 50%, #fff 50%, #fff 100%); }
.post-cover {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;
    background: radial-gradient(120% 100% at 50% 0%, #fff 0%, var(--cream-soft) 60%, var(--cream) 100%);
    box-shadow: 0 30px 70px rgba(14, 32, 60, .16);
}
.post-cover img { width: 100%; height: 100%; object-fit: contain; }

/* --------------------------------------------- article: reading columns */
.post-section { padding: 56px 0 90px; }
.post-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
    align-items: start;
}
/* No max-width here on purpose: capping the column inside a wider grid
   track is what leaves a dead strip between the text and the rail. The
   measure is set by .post-measure on the shell instead. */
.post-main { min-width: 0; }

/* ------------------------------------------------------- article: body */
.post-body { font-size: 16.5px; }
.post-body > *:first-child { margin-top: 0; }

.post-body h2 {
    position: relative;
    font-size: clamp(25px, 2.4vw, 32px);
    line-height: 1.2;
    margin: 56px 0 18px;
    padding-top: 22px;
    scroll-margin-top: 120px;
}
.post-body h2::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 46px; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--peach));
}
.post-body h3 { font-size: 21px; line-height: 1.3; margin: 38px 0 12px; scroll-margin-top: 120px; }
.post-body h4 { font-size: 18px; margin: 28px 0 10px; scroll-margin-top: 120px; }

.post-body p,
.post-body li { font-size: 16.5px; line-height: 1.9; color: var(--body); }
.post-body p { margin: 0 0 20px; }
.post-body strong { color: var(--body-strong); font-weight: 500; }

.post-body ul,
.post-body ol { margin: 0 0 24px; padding-left: 4px; display: grid; gap: 12px; list-style: none; }
.post-body li { position: relative; padding-left: 30px; }
.post-body ul > li::before {
    content: "";
    position: absolute;
    left: 6px; top: 13px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
}
.post-body ol { counter-reset: post-step; }
.post-body ol > li::before {
    counter-increment: post-step;
    content: counter(post-step);
    position: absolute;
    left: 0; top: 3px;
    width: 21px; height: 21px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--peach);
    font-family: var(--font-display);
    font-size: 11.5px;
    display: grid;
    place-items: center;
}

.post-body a {
    color: var(--navy);
    font-weight: 400;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    padding-bottom: 1px;
    transition: background-size .25s ease, color .2s ease;
}
.post-body a:hover { color: var(--gold-dark); background-size: 100% 2px; }

.post-body img { width: 100%; height: auto; border-radius: 12px; margin: 10px 0 28px; }
.post-body figure { margin: 0 0 28px; }
.post-body figcaption { font-size: 13.5px; color: var(--muted); margin-top: 12px; text-align: center; }
.post-body hr { border-top: 1px solid var(--line); margin: 44px 0; }

/* The house pull-quote */
.post-body blockquote {
    position: relative;
    background: var(--cream-soft);
    border: 0;
    border-radius: 16px;
    padding: 30px 32px 30px 74px;
    margin: 34px 0;
    box-shadow: inset 3px 0 0 var(--gold);
}
.post-body blockquote::before {
    content: "\201C";
    position: absolute;
    left: 26px;
    top: 6px;
    font-family: var(--font-display);
    font-size: 66px;
    line-height: 1;
    color: var(--gold);
    opacity: .55;
}
.post-body blockquote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.65;
    color: var(--body-strong);
}
.post-body blockquote p + p { margin-top: 12px; }

/* Tables scroll inside their own box rather than pushing the page wide */
.post-body .table-wrap {
    overflow-x: auto;
    margin: 0 0 32px;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(14, 32, 60, .06);
    -webkit-overflow-scrolling: touch;
}
.post-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.post-table th,
.post-table td { padding: 14px 20px; text-align: left; line-height: 1.55; }
.post-table thead th {
    background: var(--navy);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.post-table tbody td { border-top: 1px solid var(--line-soft); color: var(--body); }
.post-table tbody tr:nth-child(even) { background: var(--cream-soft); }
.post-table tbody tr:hover { background: var(--peach); }
.post-table tbody tr:hover td { color: var(--body-strong); }
.post-table td:first-child { color: var(--body-strong); font-weight: 400; }

/* -------------------------------------------- article: closing furniture */
.post-faq { margin-top: 64px; }
.post-faq__title {
    font-size: clamp(25px, 2.4vw, 32px);
    margin: 0 0 24px;
    padding-top: 22px;
    position: relative;
    scroll-margin-top: 120px;
}
.post-faq__title::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 46px; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--peach));
}

.post-author {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--navy);
    border-radius: 18px;
    padding: 32px 34px;
    margin-top: 56px;
}
.post-author__mark {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(234, 171, 33, .16);
    color: var(--gold);
    font-size: 21px;
}
.post-author__name {
    font-family: var(--font-display);
    font-size: 20px;
    color: #fff;
    margin: 0 0 10px;
}
.post-author__bio { font-size: 14.5px; line-height: 1.8; color: var(--on-navy-muted); margin: 0; }
.post-author__bio a { color: var(--gold); text-decoration: underline; }
.post-author__bio a:hover { color: var(--peach); }

.post-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.post-share__label {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 4px;
}
.post-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--navy);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.post-share__btn svg { width: 15px; height: 15px; fill: currentColor; }
.post-share__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------- article: the rail */
.post-side { position: sticky; top: 104px; display: grid; gap: 22px; min-width: 0; }
.post-side__title {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.post-toc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 22px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    box-shadow: 0 8px 22px rgba(14, 32, 60, .05);
}
.post-toc__nav ul { display: grid; gap: 1px; counter-reset: toc-step; }
.post-toc__nav a {
    display: block;
    position: relative;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--body);
    padding: 9px 10px 9px 14px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.post-toc__nav a:hover { color: var(--navy); background: var(--cream-soft); }
.post-toc__nav a.is-current {
    color: var(--navy);
    background: var(--cream-soft);
    border-left-color: var(--gold);
}
.post-toc__nav .is-sub a { padding-left: 26px; font-size: 12.5px; color: var(--muted); }

.post-side-cta {
    position: relative;
    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-radius: 16px;
    padding: 30px 26px;
    text-align: center;
    overflow: hidden;
}
.post-side-cta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--peach));
}
.post-side-cta__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(234, 171, 33, .16);
    color: var(--gold);
    font-size: 20px;
    margin-bottom: 16px;
}
.post-side-cta__title { font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: #fff; margin: 0 0 10px; }
.post-side-cta__text { font-size: 13.5px; line-height: 1.75; color: var(--on-navy-muted); margin: 0 0 22px; }

.post-side-list {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 22px;
}
.post-side-list ul { display: grid; gap: 16px; }
.post-side-list a { display: flex; gap: 14px; align-items: flex-start; }
.post-side-list img {
    flex: 0 0 78px;
    width: 78px;
    height: 50px;
    object-fit: contain;
    background: var(--cream-soft);
    border-radius: 8px;
}
.post-side-list strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--navy);
    margin-bottom: 5px;
}
.post-side-list a:hover strong { color: var(--gold-dark); }
.post-side-list small { font-size: 12px; color: var(--muted); }