/* ==================================================================
   ANZ PUBLISHING HOUSE — Master Stylesheet
   Brand: Crimson · Cream · Charcoal · NZ Fern
   Fonts (self-hosted, variable, font-display:swap):
     Sentient (serif headings + italic accents) · Cabinet Grotesk (body/UI)
   ================================================================== */

/* ------------------------------------------------------------------
   0. SELF-HOSTED FONTS — variable woff2 (one file = every weight),
      font-display:swap so text paints instantly with a fallback.
   ------------------------------------------------------------------ */
@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('../fonts/cabinet/fonts/CabinetGrotesk-Variable.woff2') format('woff2'),
         url('../fonts/cabinet/fonts/CabinetGrotesk-Variable.woff')  format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sentient';
    src: url('../fonts/sentient/fonts/Sentient-Variable.woff2') format('woff2'),
         url('../fonts/sentient/fonts/Sentient-Variable.woff')  format('woff');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sentient';
    src: url('../fonts/sentient/fonts/Sentient-VariableItalic.woff2') format('woff2'),
         url('../fonts/sentient/fonts/Sentient-VariableItalic.woff')  format('woff');
    font-weight: 200 700;
    font-style: italic;
    font-display: swap;
}

/* ------------------------------------------------------------------
   1. BRAND VARIABLES
   ------------------------------------------------------------------ */
:root {
    /* Primary palette — ANZ brand crimson #6B1F3A (dark), cool Apple-style neutrals */
    --burgundy:       #6B1F3A;   /* ANZ crimson — anchor of the brand gradient */
    --red-bright:     #8B3050;   /* lighter crimson — top of the gradient */
    --crimson:        #6B1F3A;   /* primary accent: ANZ dark crimson (text/icons/borders) */
    --crimson-light:  #8B3050;   /* crimson hover — hovers & highlights */
    --crimson-pale:   #F5EEF0;   /* faint crimson tint — pills / icon tiles */
    --silver:         #86868B;   /* cool grey — muted text on dark */
    --cream:          #F5F5F7;   /* cool light-grey — primary soft background */
    --cream-dark:     #E8E8ED;   /* hairline borders / alternating sections */
    --cream-letter:   #F5F5F7;   /* light text on dark surfaces */
    --charcoal:       #1D1D1F;   /* near-black — headings + dark sections */
    --charcoal-light: #2C2C2E;
    --text-muted-custom: #6E6E73; /* Apple secondary-text grey */
    --white:          #FFFFFF;
    --gold:           #D4A017;

    /* New Zealand green */
    --nz-fern:        #1B6B3A;
    --nz-fern-hover:  #2E9E5A;
    --nz-fern-tint:   #D4F0E2;

    /* Typography */
    --font-display:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* labels · buttons · logo */
    --font-heading:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* display headings */
    --font-accent:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* italic emphasis accents */
    --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* body / UI text */

    /* Bootstrap primary override */
    --bs-primary:     #6B1F3A;
    --bs-primary-rgb: 107, 31, 58;
    --bs-link-color:  #6B1F3A;
    --bs-link-hover-color: #8B3050;

    --ease:           cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------
   2. BASE & TYPOGRAPHY
   ------------------------------------------------------------------ */
* { box-sizing: border-box; }

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

/* Lenis smooth-scroll — let Lenis own the scroll; never run native
   smooth scrolling at the same time (that combination causes the
   "glitchy / fighting" scroll). These are Lenis's recommended rules. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--charcoal);
    background-color: var(--cream);
    line-height: 1.65;
    overflow-x: hidden;
    margin: 0;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--charcoal);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.024em;
}

p { margin-bottom: 1rem; }

a {
    color: var(--crimson);
    text-decoration: none;
    transition: color 0.3s var(--ease);
}
a:hover { color: var(--crimson-light); }

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

.cinzel { font-family: var(--font-display); }
.serif  { font-family: var(--font-heading); }

/* NZ inline accent — neutralised (no special colour, reads as body text) */
.nz-accent {
    color: inherit;
    font-weight: inherit;
}

/* Reusable section helpers */
.section-pad { padding: 6rem 0; }
.bg-cream     { background-color: var(--cream); }
.bg-cream-dark{ background-color: var(--cream-dark); }
.bg-charcoal  { background-color: var(--charcoal); }
.bg-white     { background-color: var(--white); }

/* Eyebrow / pill label */
.anz-label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--crimson);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.anz-label.light { color: var(--cream-letter); }

/* Section heading + crimson underline accent */
.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.1rem, 4.2vw, 3.3rem);
    line-height: 1.06;
    margin-bottom: 1rem;
}
.section-title.on-dark { color: var(--cream-letter); }
.section-subtitle {
    color: var(--text-muted-custom);
    font-size: 1.1rem;
    max-width: 640px;
}
.section-subtitle.on-dark { color: var(--silver); }

.accent-underline {
    width: 64px; height: 3px; border: none; opacity: 1;
    background: var(--crimson);
    border-radius: 2px;
    margin: 1.1rem 0;
}
.accent-underline.center { margin-left: auto; margin-right: auto; }

/* Crimson badge / pill */
.anz-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--crimson-pale);
    color: var(--crimson);
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    border: 1px solid rgba(107,31,58,0.15);
}
.nz-pill {
    background: var(--nz-fern-tint);
    color: var(--nz-fern);
    border-color: rgba(27,107,58,0.2);
}

/* ------------------------------------------------------------------
   3. CUSTOM SCROLLBAR
   ------------------------------------------------------------------ */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb {
    background: var(--crimson);
    border-radius: 10px;
    border: 2px solid var(--cream-dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--crimson-light); }
* { scrollbar-color: var(--crimson) var(--cream-dark); scrollbar-width: thin; }

/* ------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------ */
.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.005em; border-radius: 10px; padding: 0.72rem 1.6rem; transition: all 0.3s var(--ease); }

.btn-crimson {
    background: var(--grad-crimson);
    color: #fff;
    border: 2px solid transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(107,31,58,0.26);
}
.btn-crimson:hover, .btn-crimson:focus {
    background: var(--grad-crimson);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(107,31,58,0.42);
    filter: brightness(1.06);
}

.btn-outline-crimson {
    background: transparent;
    border: 2px solid var(--crimson);
    color: var(--crimson);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}
.btn-outline-crimson:hover, .btn-outline-crimson:focus {
    background: var(--crimson);
    color: var(--cream-letter);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(107,31,58,0.2);
}

.btn-light { background: var(--cream-letter); color: var(--crimson); border: 2px solid var(--cream-letter); font-weight: 600; }
.btn-light:hover { background: var(--white); color: var(--crimson); transform: translateY(-2px); }
.btn-white { background: var(--white); color: var(--crimson); border: 2px solid var(--white); font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.04em; box-shadow: 0 6px 18px rgba(26,18,20,0.08); }
.btn-white:hover, .btn-white:focus { background: var(--cream); color: var(--crimson-light); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26,18,20,0.16); }
.btn-outline-light { border: 2px solid rgba(232,224,216,0.6); color: var(--cream-letter); background: transparent; }
.btn-outline-light:hover { background: var(--cream-letter); color: var(--charcoal); transform: translateY(-2px); }

.btn-lg { padding: 0.85rem 2.1rem; font-size: 1rem; }

/* ------------------------------------------------------------------
   5. CROSS-DOCUMENT VIEW TRANSITIONS  (preloader removed)
   Smooth crossfade between same-origin page navigations. Both the
   outgoing and incoming documents opt in via @view-transition; the
   header is shared, so every page is opted in automatically.
   Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition
   ------------------------------------------------------------------ */
@view-transition { navigation: auto; }

/* Persistent sticky navbar morphs in place instead of cross-fading */
.anz-navbar { view-transition-name: anz-navbar; }

/* A slightly longer, gentler default crossfade */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.45s; }

/* Respect reduced-motion — skip the transition animation entirely */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------
   6. (custom cursor removed — native cursor used everywhere)
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   7. NAVBAR  (dark mode · clean text links, no icons)
   ------------------------------------------------------------------ */
.anz-navbar {
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    padding: 0.5rem 0;
    transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.35s var(--ease);
    border-bottom: 1px solid var(--cream-dark);
    z-index: 1030;
}
.anz-navbar.scrolled {
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 28px rgba(29,29,31,0.10);
    padding: 0.2rem 0;
}
.anz-logo-img { height: 52px; width: auto; transition: height 0.35s var(--ease); }
.anz-navbar.scrolled .anz-logo-img { height: 42px; }

/* Desktop nav links — modern pill hover (charcoal / crimson) */
.anz-nav { gap: 0.1rem; }
.anz-nav .nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.93rem;
    letter-spacing: 0.01em;
    color: var(--text-muted-custom);
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.anz-nav .nav-link:hover { color: var(--charcoal); background: var(--cream); }
.anz-nav .nav-link.active { color: var(--crimson); background: var(--crimson-pale); }

.anz-quote-btn { align-items: center; border-radius: 999px; padding-left: 1.3rem; padding-right: 1.3rem; }

/* Hamburger (light) */
.anz-toggler { border: none; color: var(--charcoal); font-size: 1.4rem; padding: 0.25rem 0.55rem; }
.anz-toggler:focus { box-shadow: none; }

/* ---- Desktop Services dropdown — opens on HOVER, caret beside label ---- */
.anz-dropdown { position: relative; }
/* Invisible hover bridge spanning the gap between the toggle and the menu,
   so the cursor never leaves :hover while moving down into the dropdown. */
.anz-dropdown::before {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    width: 288px; height: 18px;
    pointer-events: none;
}
.anz-dropdown:hover::before,
.anz-dropdown:focus-within::before { pointer-events: auto; }
.anz-caret { font-size: 0.6rem; transition: transform 0.3s var(--ease); }
.anz-dropdown:hover .anz-caret,
.anz-dropdown:focus-within .anz-caret { transform: rotate(180deg); }

.anz-dropdown-menu {
    display: block;               /* override Bootstrap's display:none; visibility drives show/hide */
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    min-width: 264px; margin: 0; padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--cream-dark);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(29,29,31,0.14);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease);
}
.anz-dropdown:hover .anz-dropdown-menu,
.anz-dropdown:focus-within .anz-dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(8px);
}
.anz-dropdown-menu .dropdown-item {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--charcoal);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    display: flex; align-items: center; gap: 0.65rem;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.anz-dropdown-menu .dropdown-item i { color: var(--crimson); width: 1.2rem; text-align: center; font-size: 0.95rem; }
.anz-dropdown-menu .dropdown-item:hover,
.anz-dropdown-menu .dropdown-item:focus { background: var(--crimson-pale); color: var(--crimson); }
.anz-dropdown-menu .dropdown-item.active { background: var(--crimson-pale); color: var(--crimson); font-weight: 600; }
.anz-dropdown-menu .dropdown-divider { border-color: var(--cream-dark); margin: 0.35rem 0.2rem; opacity: 1; }

/* ---- Offcanvas (light menu, dark header band for the white logo) ---- */
.anz-offcanvas { background: #fff; width: 320px; color: var(--charcoal); }
.anz-offcanvas .offcanvas-header { background: var(--charcoal); border-bottom: none; padding-top: 1rem; padding-bottom: 1rem; }
.anz-offcanvas-brand { display: inline-flex; align-items: center; }
.oc-logo-img { height: 48px; width: auto; }
.anz-mobile-nav .nav-link {
    font-size: 1.02rem; color: var(--charcoal); font-weight: 500; padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--cream-dark);
    transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.anz-mobile-nav .nav-link:hover { color: var(--crimson); padding-left: 0.5rem; }
.anz-mobile-nav .nav-link.active { color: var(--crimson); font-weight: 600; padding-left: 0.6rem; border-left: 3px solid var(--crimson); }
.anz-offcanvas-foot { margin-top: 1.5rem; font-size: 0.8rem; color: var(--text-muted-custom); text-align: center; }

/* Mobile Services submenu */
.anz-mobile-services-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; cursor: pointer;
}
.anz-mobile-services-toggle.active { color: var(--crimson); }
.anz-ms-caret { font-size: 0.7rem; transition: transform 0.3s var(--ease); }
.anz-mobile-services-toggle[aria-expanded="true"] .anz-ms-caret { transform: rotate(180deg); }
.anz-mobile-subnav { padding: 0.25rem 0 0.5rem 0.5rem; }
.anz-mobile-subnav .nav-link {
    font-size: 0.95rem; color: var(--text-muted-custom); font-weight: 500;
    padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--cream-dark);
    display: flex; align-items: center; gap: 0.55rem;
}
.anz-mobile-subnav .nav-link i { color: var(--crimson); width: 1.1rem; text-align: center; }
.anz-mobile-subnav .nav-link:hover { color: var(--crimson); padding-left: 0.5rem; }
.anz-mobile-subnav .nav-link.active { color: var(--crimson); font-weight: 600; }

/* ------------------------------------------------------------------
   8. SECTIONS  (snap scroll removed — smooth Lenis scrolling only)
   ------------------------------------------------------------------ */
.snap-section { position: relative; }

/* ------------------------------------------------------------------
   9. SCROLL REVEALS  (IntersectionObserver-driven · bulletproof)
   Elements with [data-reveal] start hidden ONLY when JS is active
   (html.js, set inline in <head>), then fade/slide/zoom in as they
   enter the viewport. Without JS, content stays visible.
   ------------------------------------------------------------------ */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
html.js [data-reveal="left"]  { transform: translateX(-60px); }
html.js [data-reveal="right"] { transform: translateX(60px); }
html.js [data-reveal="zoom"]  { transform: scale(0.9); }
html.js [data-reveal="down"]  { transform: translateY(-48px); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   10. HERO
   ------------------------------------------------------------------ */
#hero {
    position: relative; overflow: hidden;
    min-height: 90vh;
    display: flex; align-items: center; justify-content: center;
    /* Library photo as a textured backdrop, under a light cream scrim so
       the dark headline + white button stay readable. Stronger (lighter)
       in the centre where the text sits, lighter scrim at the edges so
       the candlelit library shows through. */
    background:
        /* radial-gradient(ellipse 82% 72% at 50% 42%,
            rgba(250,246,241,0.94) 0%,
            rgba(245,240,235,0.88) 50%,
            rgba(232,224,216,0.80) 100%), */
        url('../images/hero-background.webp') center center / cover no-repeat;
    padding: 7rem 0 5rem;
}

/* Real book covers floating on the light hero — parallax via --px/--py.
   Entrance fades OPACITY only so it never fights the scroll transforms.
   .faded = soft low-opacity background layer for depth. */
.hero-fallback-books { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float-cover {
    position: absolute;
    border-radius: 5px;
    box-shadow: 0 16px 38px rgba(26,18,20,0.20);
    opacity: 0; animation: fadeInBook 1s var(--ease) forwards;
    will-change: transform;
}
.float-cover.faded { box-shadow: 0 10px 24px rgba(26,18,20,0.10); animation-name: fadeInBookFaded; }
@keyframes fadeInBook { from { opacity: 0; filter: blur(9px); } to { opacity: 1; filter: blur(0); } }
@keyframes fadeInBookFaded { from { opacity: 0; filter: blur(9px); } to { opacity: 0.34; filter: blur(0); } }

/* Hero center content — dark text on the light scene */
.hero-content { position: relative; z-index: 3; text-align: center; max-width: 880px; margin: 0 auto; }
.hero-headline {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.7rem, 6.2vw, 4.7rem);
    line-height: 1.03;
    color: var(--charcoal);
    margin: 1.1rem 0;
}
.hero-headline .em { font-style: italic; color: var(--crimson); }
.hero-subhead {
    font-family: var(--font-accent); font-style: italic; font-weight: 500;
    font-size: clamp(1.3rem, 2.8vw, 1.85rem);
    color: var(--crimson); margin: 0 auto 1.1rem; max-width: 720px; letter-spacing: 0;
}
.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--text-muted-custom);
    max-width: 720px; margin: 0 auto 2rem;
    font-weight: 300;
}
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Scroll indicator — full-width centred at the bottom of the hero */
.scroll-indicator {
    position: absolute; bottom: 22px; left: 0; right: 0;
    z-index: 3; color: var(--crimson); font-size: 1.3rem;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center;
    animation: bounceArrow 1.8s infinite;
}
.scroll-indicator span { font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted-custom); }
@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(9px); }
}

/* ------------------------------------------------------------------
   11. PARTNERS STRIP
   ------------------------------------------------------------------ */
#partners { background: var(--white); display: flex; align-items: center; }
.partners-heading {
    font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--silver); text-align: center; margin-bottom: 0.7rem;
}
.partners-subtext {
    text-align: center; max-width: 780px; margin: 0 auto 2.2rem;
    color: var(--text-muted-custom); font-size: 1rem; line-height: 1.7;
}
.partners-swiper { width: 100%; }
.partner-logo {
    display: flex; align-items: center; justify-content: center;
    height: 62px; padding: 0.5rem 0.75rem;
}
.partner-logo img {
    max-height: 40px; max-width: 150px; width: auto; object-fit: contain;
    filter: grayscale(100%); opacity: 0.6;
    transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.partner-logo:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------------
   12. ABOUT PREVIEW
   ------------------------------------------------------------------ */
#about { background: var(--cream); display: flex; align-items: center; }
.about-stats { margin-top: 2rem; }
.stat-card { text-align: center; padding: 0.5rem; }
.stat-card .stat-icon { color: var(--crimson); font-size: 1.6rem; margin-bottom: 0.4rem; }
.stat-card .stat-num { font-family: var(--font-heading); font-weight: 700; font-size: 2.1rem; color: var(--charcoal); line-height: 1; }
.stat-card .stat-label { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-muted-custom); letter-spacing: 0.04em; }

/* CSS stacked-book illustration */
.about-visual { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.about-img { position: relative; z-index: 1; width: 100%; max-width: 460px; height: auto; filter: drop-shadow(0 26px 44px rgba(26,18,20,0.32)); }
.deco-circle {
    position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(107,31,58,0.12), rgba(107,31,58,0));
    top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;
}
.book-stack { position: relative; z-index: 1; width: 230px; height: 330px; }
.book-spine {
    position: absolute; left: 0; right: 0; border-radius: 4px;
    box-shadow: 0 12px 30px rgba(26,18,20,0.25);
    display: flex; align-items: center; padding-left: 22px;
    font-family: var(--font-heading); color: var(--cream-letter); font-size: 1rem; font-weight: 500;
}
.book-spine::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 3px; background: rgba(255,255,255,0.25); border-radius: 2px; }
.book-spine.s1 { height: 56px; bottom: 0;   background: var(--crimson); transform: rotate(-1deg); }
.book-spine.s2 { height: 56px; bottom: 60px; background: var(--charcoal-light); transform: rotate(1.5deg); width: 96%; }
.book-spine.s3 { height: 56px; bottom: 120px; background: #1B5E6B; transform: rotate(-2deg); width: 92%; }
.book-spine.s4 { height: 56px; bottom: 180px; background: var(--silver); color: var(--charcoal); transform: rotate(1deg); width: 88%; }
.book-stack .float-book {
    position: absolute; top: -10px; right: -20px; width: 120px; height: 168px;
    background: linear-gradient(135deg, var(--crimson), var(--crimson-light));
    border-radius: 4px 8px 8px 4px; box-shadow: 0 20px 40px rgba(107,31,58,0.35);
    border-left: 6px solid rgba(0,0,0,0.25); z-index: 2;
    display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px;
    animation: floatBook 4s ease-in-out infinite;
}
.book-stack .float-book .fb-title { font-family: var(--font-heading); color: var(--cream-letter); font-size: 1rem; font-weight: 600; line-height: 1.1; }
.book-stack .float-book .fb-anz { font-family: var(--font-display); color: rgba(232,224,216,0.7); font-size: 0.6rem; letter-spacing: 0.14em; }
@keyframes floatBook { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }

/* ------------------------------------------------------------------
   13. SERVICES (dark)
   ------------------------------------------------------------------ */
#services {
    position: relative; overflow: hidden; display: flex; align-items: center;
    background:
        radial-gradient(60% 55% at 12% 8%,  rgba(107,31,58,0.32), transparent 70%),
        radial-gradient(55% 55% at 90% 92%, rgba(27,107,58,0.16), transparent 70%),
        linear-gradient(160deg, #251521 0%, var(--charcoal) 52%, #120a0d 100%);
}
/* subtle dot texture on the dark sections, faded toward the edges */
#services::before, #why::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 85%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 85%);
}
#services > .container, #why > .container { position: relative; z-index: 1; }
.service-card {
    background: var(--charcoal-light);
    border: 1px solid rgba(168,168,176,0.2);
    border-radius: 12px; padding: 2rem 1.6rem; height: 100%;
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
    position: relative; overflow: hidden;
}
.service-card .svc-icon {
    width: 62px; height: 62px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--crimson-light);
    background: rgba(107,31,58,0.16); border: 1px solid rgba(107,31,58,0.3);
    margin-bottom: 1.1rem;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.service-card h3 { font-family: var(--font-heading); color: var(--cream-letter); font-size: 1.4rem; margin-bottom: 0.6rem; }
.service-card p { color: var(--silver); font-size: 0.92rem; margin-bottom: 1.1rem; }
.service-card .svc-link { font-family: var(--font-body); font-weight: 500; color: var(--crimson-light); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.3s var(--ease); }
.service-card .svc-link i { transition: transform 0.3s var(--ease); }
.service-card:hover { transform: translateY(-8px); border-color: var(--crimson); box-shadow: 0 18px 40px rgba(107,31,58,0.3); }
.service-card:hover .svc-icon { background: var(--crimson); color: var(--cream-letter); border-color: var(--crimson); transform: translateY(-4px) rotate(-6deg); }
.service-card:hover .svc-link { gap: 0.7rem; color: var(--cream-letter); }

/* ------------------------------------------------------------------
   14. PROCESS / HOW IT WORKS
   ------------------------------------------------------------------ */
#process { background: linear-gradient(180deg, var(--cream) 0%, #EFF3EC 100%); display: flex; align-items: center; }
.process-wrap { position: relative; }
.process-line {
    position: absolute; top: 96px; left: 12%; right: 12%; height: 3px; z-index: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--crimson) 0%, var(--crimson-light) 52%, var(--nz-fern) 100%);
    opacity: 0.5;
}
.process-step {
    text-align: center; position: relative; z-index: 1;
    padding: 1.6rem 1rem 1.4rem; border-radius: 18px;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.process-step:hover { background: var(--white); box-shadow: 0 20px 44px rgba(26,18,20,0.10); transform: translateY(-6px); }
.process-num {
    font-family: var(--font-display); font-size: 2.8rem; font-weight: 600; line-height: 1;
    background: var(--grad-crimson); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--crimson); opacity: 0.9;
}
.process-icon {
    width: 78px; height: 78px; border-radius: 50%;
    background: var(--white); border: 2px solid var(--crimson);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--crimson); margin: -0.4rem auto 1rem;
    box-shadow: 0 8px 20px rgba(107,31,58,0.12);
    transition: all 0.4s var(--ease);
}
.process-step:hover .process-icon { background: var(--grad-crimson); color: var(--cream-letter); border-color: transparent; transform: scale(1.08) rotate(-4deg); box-shadow: 0 14px 30px rgba(107,31,58,0.3); }
.process-step h4 { font-family: var(--font-heading); font-size: 1.32rem; margin-bottom: 0.4rem; }
.process-step p { color: var(--text-muted-custom); font-size: 0.9rem; }

/* ------------------------------------------------------------------
   15. FEATURED BOOKS (3D book cards)
   ------------------------------------------------------------------ */
#books { background: var(--grad-cream); }

/* Real book-cover image cards (homepage swiper + catalogue) */
.book-img-card { text-align: center; padding: 0.5rem 0 1rem; }
.cover-img {
    display: block; width: 100%; max-width: 210px; aspect-ratio: 2 / 3;
    object-fit: cover; margin: 0 auto;
    border-radius: 6px; background: var(--cream-dark);
    box-shadow: 0 16px 34px rgba(26,18,20,0.28);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.book-img-card:hover .cover-img,
.catalog-cover:hover .cover-img { transform: translateY(-8px) scale(1.02); box-shadow: 0 28px 52px rgba(26,18,20,0.42); }

.book-card-3d { perspective: 1000px; padding: 1rem 0 1.5rem; }
.book-3d {
    position: relative; width: 180px; height: 260px; margin: 0 auto;
    transform-style: preserve-3d; transform: rotateY(-22deg);
    transition: transform 0.5s var(--ease);
    border-radius: 3px 7px 7px 3px;
}
.book-card-3d:hover .book-3d { transform: rotateY(-6deg) translateY(-8px); }
.book-3d .cover {
    position: absolute; inset: 0; border-radius: 3px 7px 7px 3px;
    box-shadow: 0 16px 34px rgba(26,18,20,0.32);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 18px 16px; color: var(--white);
}
.book-3d .cover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: rgba(0,0,0,0.28); border-radius: 3px 0 0 3px; }
.book-3d .cover::after { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.18); }
.book-3d .cover .b-cat { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; padding-left: 10px; }
.book-3d .cover .b-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.1; padding-left: 10px; }
.book-3d .cover .b-anz { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.14em; opacity: 0.75; padding-left: 10px; }
.book-meta { text-align: center; margin-top: 1.4rem; }
.book-meta .b-author { color: var(--text-muted-custom); font-size: 0.92rem; }
.book-meta .b-badge { display: inline-block; margin-top: 0.35rem; background: var(--crimson-pale); color: var(--crimson); font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.2rem 0.7rem; border-radius: 40px; font-weight: 500; }

/* Swiper shared */
.swiper { padding-bottom: 3rem; }
.swiper-pagination-bullet { background: var(--silver); opacity: 0.5; }
.swiper-pagination-bullet-active { background: var(--crimson); opacity: 1; }
.swiper-button-next, .swiper-button-prev { color: var(--crimson); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.5rem; font-weight: 700; }
.books-swiper .swiper-button-next, .books-swiper .swiper-button-prev { top: 42%; }

/* ------------------------------------------------------------------
   16. TESTIMONIALS
   ------------------------------------------------------------------ */
#testimonials { display: block; }
.testimonial-card {
    background: var(--white); border-radius: 14px; padding: 2.2rem 1.8rem;
    box-shadow: 0 14px 34px rgba(26,18,20,0.07); height: auto;
    border: 1px solid rgba(107,31,58,0.06);
}
.testimonial-card .quote-icon { font-size: 2.5rem; color: var(--crimson); opacity: 0.28; line-height: 1; }
.testimonial-card .stars { color: var(--gold); margin: 0.6rem 0 1rem; font-size: 0.9rem; }
.testimonial-card .t-quote { font-family: var(--font-body); font-style: italic; color: var(--text-muted-custom); font-size: 1rem; line-height: 1.7; margin-bottom: 1.4rem; }
.testimonial-author { display: flex; align-items: center; gap: 0.9rem; }
.t-avatar {
    width: 50px; height: 50px; border-radius: 50%; flex: 0 0 50px;
    background: var(--crimson); color: var(--cream-letter);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}
.testimonial-author .t-name { font-weight: 600; color: var(--charcoal); font-size: 0.98rem; }
.testimonial-author .t-book { color: var(--silver); font-size: 0.82rem; }

/* ------------------------------------------------------------------
   17. WHY CHOOSE ANZ (dark)
   ------------------------------------------------------------------ */
#why {
    position: relative; overflow: hidden; display: flex; align-items: center;
    background:
        radial-gradient(55% 55% at 88% 10%, rgba(107,31,58,0.28), transparent 70%),
        radial-gradient(55% 60% at 8% 92%,  rgba(27,107,58,0.16), transparent 70%),
        linear-gradient(200deg, #231420 0%, var(--charcoal) 55%, #120a0d 100%);
}
.why-item { display: flex; gap: 1.1rem; padding: 1rem 0.6rem; }
.why-item .why-icon {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px;
    background: rgba(107,31,58,0.18); border: 1px solid rgba(107,31,58,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--crimson-light); transition: all 0.35s var(--ease);
}
.why-item:hover .why-icon { background: var(--crimson); color: var(--cream-letter); transform: rotate(-6deg); }
.why-item h5 { font-family: var(--font-heading); color: var(--cream-letter); font-size: 1.25rem; margin-bottom: 0.3rem; }
.why-item p { color: var(--silver); font-size: 0.9rem; margin: 0; }

/* ------------------------------------------------------------------
   18. CTA BANNER
   ------------------------------------------------------------------ */
#cta {
    position: relative; overflow: hidden; display: flex; align-items: center;
    background: linear-gradient(rgba(107,31,58,0.92), rgba(107,31,58,0.93)), url('../images/cta.webp') center / cover no-repeat;
}
#cta .cta-content { position: relative; z-index: 2; text-align: center; }
#cta h2 { color: var(--cream-letter); font-size: clamp(2rem, 4.5vw, 3.2rem); }
#cta p { color: rgba(232,224,216,0.8); font-size: 1.15rem; max-width: 560px; margin: 1rem auto 2rem; }
.cta-watermark {
    position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
    width: 440px; height: 440px; opacity: 0.07; z-index: 1; color: var(--cream-letter);
}
.cta-watermark i { font-size: 440px; }

/* ------------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------------ */
.anz-footer {
    position: relative; overflow: hidden;
    padding: 5rem 0 1.8rem; color: var(--silver);
    border-top: 1px solid rgba(107,31,58,0.40);
    background:
        radial-gradient(55% 65% at 0% 0%,    rgba(107,31,58,0.32), transparent 60%),
        radial-gradient(50% 60% at 100% 100%, rgba(107,31,58,0.20), transparent 62%),
        linear-gradient(180deg, #20151a 0%, var(--charcoal) 58%, #140d10 100%);
}
/* glowing gradient accent line along the very top edge */
.anz-footer::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--crimson) 22%, #8B3050 50%, var(--crimson) 78%, transparent);
}
/* faint dot-grid paper texture, fading in from the top */
.anz-footer::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(245,240,235,0.05) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%);
            mask-image: linear-gradient(180deg, transparent, #000 38%);
}
/* oversized faint feather motif (literary watermark) */
.footer-feather {
    position: absolute; right: -3%; top: 46%; z-index: 0; pointer-events: none;
    transform: translateY(-50%) rotate(-16deg); line-height: 0;
    font-size: clamp(13rem, 24vw, 27rem); color: rgba(139,48,80,0.13);
}
.anz-footer .container { position: relative; z-index: 1; }
.footer-brand { display: inline-flex; align-items: center; line-height: 1.05; margin-bottom: 1rem; }
.footer-logo-img { height: 72px; width: auto; }
.footer-anz { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--cream-letter); letter-spacing: 0.05em; }
.footer-ph  { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.3em; color: var(--silver); }
.footer-est { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--crimson-light); margin-top: 4px; }
.footer-tagline { font-family: var(--font-accent); font-style: italic; font-size: 1.3rem; color: var(--cream-letter); margin-bottom: 0.8rem; letter-spacing: 0; }
.footer-about { font-size: 0.9rem; color: var(--silver); line-height: 1.7; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.04); color: var(--silver);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--ease);
}
.footer-social a:hover { background: var(--grad-crimson); color: var(--cream-letter); border-color: transparent; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(107,31,58,0.45); }
.footer-heading { position: relative; font-family: var(--font-heading); color: var(--cream-letter); font-size: 1.25rem; margin-bottom: 1.4rem; padding-bottom: 0.7rem; }
.footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: var(--grad-crimson); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.65rem; }
.footer-links a { color: var(--silver); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s var(--ease); }
.footer-links a i { font-size: 0.65rem; color: var(--crimson-light); transition: transform 0.3s var(--ease); }
.footer-links a:hover { color: var(--cream-letter); }
.footer-links a:hover i { transform: translateX(3px); }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.8rem; font-size: 0.9rem; color: var(--silver); }
.footer-contact li i { color: var(--crimson-light); margin-top: 4px; width: 16px; }
.footer-contact a { color: var(--silver); }
.footer-contact a:hover { color: var(--cream-letter); }
.footer-cta-btn { font-size: 0.85rem; padding: 0.5rem 1.2rem; }
.footer-divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(107,31,58,0.65), transparent); margin: 3rem 0 1.5rem; opacity: 1; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; font-size: 0.85rem; color: var(--silver); }
.footer-legal { display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: center; }
.footer-legal a { color: var(--silver); transition: color 0.3s var(--ease); }
.footer-legal a:hover { color: var(--cream-letter); }
.footer-legal-sep { color: var(--crimson-light); }

/* ------------------------------------------------------------------
   LEGAL / POLICY PAGES (terms, privacy)
   ------------------------------------------------------------------ */
.legal-wrap { max-width: 860px; margin: 0 auto; }
.legal-meta { font-size: 0.9rem; color: var(--text-muted-custom); margin-bottom: 2.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(107,31,58,0.15); }
.legal-block { margin-bottom: 2.2rem; }
.legal-block h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 0.7rem; color: var(--charcoal); }
.legal-block h3 { font-size: 1.1rem; margin: 1.3rem 0 0.5rem; color: var(--charcoal); }
.legal-block p { color: var(--text-muted-custom); line-height: 1.75; margin-bottom: 1rem; }
.legal-block ul { color: var(--text-muted-custom); line-height: 1.75; padding-left: 1.2rem; margin-bottom: 1rem; }
.legal-block ul li { margin-bottom: 0.5rem; }
.legal-block a { color: var(--crimson); text-decoration: underline; }
/* Guard: section anchor ids (#services, #contact, #how, #use, #links, #rights, ...)
   must NOT inherit legacy homepage-section styling. Keep legal blocks plain prose. */
.legal-block { display: block !important; background: none !important; background-image: none !important; min-height: 0 !important; columns: auto !important; column-count: auto !important; padding: 0 !important; transform: none !important; }
.legal-toc { background: var(--cream); border: 1px solid rgba(107,31,58,0.14); border-radius: 14px; padding: 1.6rem 1.8rem; margin-bottom: 2.6rem; }
.legal-toc h2 { font-size: 1.1rem; margin: 0 0 0.9rem; color: var(--charcoal); }
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: 0.45rem; }
.legal-toc a { color: var(--crimson); text-decoration: none; font-size: 0.92rem; }
.legal-toc a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .legal-toc ol { columns: 1; } }

/* ------------------------------------------------------------------
   20. INNER-PAGE HERO / BREADCRUMB
   ------------------------------------------------------------------ */
.page-hero {
    background: url('../images/hero-background.webp') center center / cover no-repeat;
    padding: 5.5rem 0 4rem; text-align: center; position: relative; overflow: hidden;
}
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 0.6rem; }
.page-hero .lead { color: var(--text-muted-custom); font-size: 1.15rem; max-width: 600px; margin: 0 auto; }
.anz-breadcrumb { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; margin-bottom: 1.2rem; font-family: var(--font-body); color: var(--text-muted-custom); justify-content: center; }
.anz-breadcrumb a { color: var(--crimson); }
.anz-breadcrumb .sep { color: var(--silver); }

/* ------------------------------------------------------------------
   21. ABOUT PAGE specifics
   ------------------------------------------------------------------ */
.mv-card {
    background: var(--white); border-radius: 14px; padding: 2.4rem 2rem; height: 100%;
    border: 1px solid rgba(107,31,58,0.08); box-shadow: 0 14px 34px rgba(26,18,20,0.06);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.mv-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(107,31,58,0.14); }
.mv-icon { width: 64px; height: 64px; border-radius: 14px; background: var(--crimson-pale); color: var(--crimson); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.2rem; }
.mv-card h3 { font-size: 1.6rem; margin-bottom: 0.7rem; }

.value-card { text-align: center; padding: 1.8rem 1.2rem; border-radius: 12px; transition: background 0.35s var(--ease), transform 0.35s var(--ease); height: 100%; }
.value-card:hover { background: var(--white); transform: translateY(-5px); box-shadow: 0 14px 30px rgba(26,18,20,0.07); }
.value-card .v-icon { font-size: 2rem; color: var(--crimson); margin-bottom: 0.8rem; }
.value-card h5 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.value-card p { color: var(--text-muted-custom); font-size: 0.9rem; margin: 0; }

.team-card { text-align: center; background: var(--white); border-radius: 14px; padding: 2.2rem 1.4rem; border: 1px solid rgba(107,31,58,0.07); box-shadow: 0 14px 34px rgba(26,18,20,0.06); transition: transform 0.35s var(--ease); height: 100%; }
.team-card:hover { transform: translateY(-6px); }
.team-avatar { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 1.1rem; overflow: hidden; background: linear-gradient(135deg, var(--crimson), var(--crimson-light)); color: var(--cream-letter); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; font-weight: 600; border: 3px solid var(--cream-dark); box-shadow: 0 12px 28px rgba(26,18,20,0.16); }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h5 { font-size: 1.35rem; margin-bottom: 0.15rem; }
.team-role { color: var(--crimson); font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 0.9rem; font-family: var(--font-body); }
.team-social a { width: 34px; height: 34px; border-radius: 50%; background: var(--crimson-pale); color: var(--crimson); display: inline-flex; align-items: center; justify-content: center; margin: 0 3px; transition: all 0.3s var(--ease); }
.team-social a:hover { background: var(--crimson); color: var(--cream-letter); }

/* ------------------------------------------------------------------
   22. SERVICES PAGE specifics
   ------------------------------------------------------------------ */
.service-detail-card {
    background: var(--white); border-radius: 14px; overflow: hidden; height: 100%;
    border: 1px solid rgba(107,31,58,0.08); box-shadow: 0 14px 34px rgba(26,18,20,0.06);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    display: flex; flex-direction: column;
}
.service-detail-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(107,31,58,0.16); }
.sd-strip { height: 6px; background: linear-gradient(to right, var(--crimson), var(--crimson-light)); }
.sd-body { padding: 2rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.sd-icon { width: 70px; height: 70px; border-radius: 16px; background: var(--crimson-pale); color: var(--crimson); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; margin-bottom: 1.2rem; }
.service-detail-card h3 { font-size: 1.55rem; margin-bottom: 0.7rem; }
.service-detail-card .sd-desc { color: var(--text-muted-custom); font-size: 0.95rem; }
.sd-features { list-style: none; padding: 0; margin: 1rem 0 1.6rem; }
.sd-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--charcoal); margin-bottom: 0.5rem; }
.sd-features li i { color: var(--crimson); margin-top: 4px; }
.sd-body .btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------------------
   23. BOOKS PAGE specifics
   ------------------------------------------------------------------ */
.book-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 3rem; }
.book-filter .filter-btn {
    font-family: var(--font-body); font-weight: 500; font-size: 0.88rem;
    border: 2px solid var(--crimson); color: var(--crimson); background: transparent;
    padding: 0.45rem 1.25rem; border-radius: 40px; cursor: pointer; transition: all 0.3s var(--ease);
}
.book-filter .filter-btn:hover { background: var(--crimson-pale); }
.book-filter .filter-btn.active { background: var(--crimson); color: var(--cream-letter); }

.book-grid-item { margin-bottom: 2.5rem; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.book-grid-item.d-none { display: none !important; }
.catalog-book { perspective: 1100px; }
.catalog-book .book-3d { width: 200px; height: 290px; }
.catalog-book .book-3d { transform: rotateY(-18deg); }
.catalog-book:hover .book-3d { transform: rotateY(0deg) translateY(-6px); }

/* ------------------------------------------------------------------
   24. CONTACT PAGE specifics
   ------------------------------------------------------------------ */
.contact-info-card { background: var(--charcoal); color: var(--cream-letter); border-radius: 16px; padding: 2.6rem 2.2rem; height: 100%; }
.ci-image { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 1.8rem; }
.contact-info-card h3 { color: var(--cream-letter); font-size: 1.7rem; margin-bottom: 0.4rem; }
.contact-info-card .ci-sub { color: var(--silver); font-size: 0.95rem; margin-bottom: 1.8rem; }
.ci-item { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.ci-item .ci-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: rgba(107,31,58,0.25); color: var(--crimson-light); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.ci-item .ci-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); }
.ci-item .ci-value { color: var(--cream-letter); font-size: 0.98rem; }
.ci-item a.ci-value:hover { color: var(--crimson-light); }
.ci-social { display: flex; gap: 0.6rem; margin-top: 1.8rem; }
.ci-social a { width: 42px; height: 42px; border-radius: 50%; background: var(--charcoal-light); color: var(--silver); display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); }
.ci-social a:hover { background: var(--crimson); color: var(--cream-letter); transform: translateY(-3px); }

.contact-form-card { background: var(--white); border-radius: 16px; padding: 2.6rem 2.2rem; box-shadow: 0 18px 44px rgba(26,18,20,0.08); border: 1px solid rgba(107,31,58,0.06); }
.form-label { font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: var(--charcoal); margin-bottom: 0.35rem; }
.input-icon-group { position: relative; }
.input-icon-group > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--silver); font-size: 0.95rem; pointer-events: none; }
.input-icon-group .form-control,
.input-icon-group .form-select { padding-left: 40px; }
.input-icon-group.textarea > i { top: 18px; transform: none; }
.form-control, .form-select { border: 1.5px solid var(--cream-dark); border-radius: 8px; padding: 0.7rem 0.9rem; font-family: var(--font-body); font-size: 0.95rem; background: var(--cream); }
.form-control:focus, .form-select:focus { border-color: var(--crimson); box-shadow: 0 0 0 0.2rem rgba(107,31,58,0.12); background: var(--white); }
.captcha-box { background: var(--crimson-pale); border-radius: 8px; padding: 0.9rem 1.1rem; font-family: var(--font-heading); font-weight: 600; color: var(--crimson); }

/* ------------------------------------------------------------------
   24b. FAQ ACCORDION
   ------------------------------------------------------------------ */
#faq { background: var(--cream-dark); }
.faq-accordion { max-width: 880px; margin: 0 auto; }
.faq-accordion .accordion-item {
    background: var(--white); border: 1px solid rgba(107,31,58,0.1);
    border-radius: 12px !important; margin-bottom: 1rem; overflow: hidden;
}
.faq-accordion .accordion-button {
    font-family: var(--font-heading); font-size: 1.18rem; font-weight: 600;
    color: var(--charcoal); background: var(--white); padding: 1.15rem 1.4rem;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--crimson); background: var(--crimson-pale); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%236B1F3A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.faq-accordion .accordion-body { color: var(--text-muted-custom); font-size: 0.98rem; line-height: 1.8; padding: 1.1rem 1.4rem 1.5rem; border-top: 1px solid rgba(107,31,58,0.08); }

/* ------------------------------------------------------------------
   25. REVEAL — reduced-motion safeguard
   Never leave [data-reveal] content hidden for reduced-motion users.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   26. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .snap-section, #hero, #partners, #about, #services, #process, #books, #testimonials, #why, #cta {
        min-height: auto; height: auto; display: block;
    }
    #hero { min-height: 90vh; display: flex; }
    .section-pad { padding: 4rem 0; }
    .process-line { display: none; }
    .cta-watermark { display: none; }
    .hero-fallback-books { display: none; } /* decorative side covers off on tablet/mobile */
}

@media (max-width: 767.98px) {
    .hero-headline { font-size: 2.4rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .anz-logo-img { height: 46px; }
    .book-3d, .catalog-book .book-3d { width: 160px; height: 232px; }
    .section-pad { padding: 3rem 0; }
    #cta p { font-size: 1rem; }
}

/* ------------------------------------------------------------------
   27. REDUCED MOTION
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .book-cover { opacity: 1 !important; }
}

/* Utility: animated entrance baseline for non-GSAP fallback */
.animate-in { opacity: 1 !important; transform: none !important; }

/* ==================================================================
   28. GRADIENTS · PORTFOLIO TICKER · PLATFORM TESTIMONIALS
   ================================================================== */
:root {
    --grad-crimson:      linear-gradient(135deg, #8B3050 0%, #6B1F3A 50%, #4A1528 100%);
    --grad-crimson-soft: linear-gradient(135deg, rgba(107,31,58,0.10), rgba(107,31,58,0.03));
    --grad-cream:        linear-gradient(180deg, #FFFFFF 0%, var(--cream) 55%, var(--cream-dark) 100%);
    --grad-reviews:      linear-gradient(180deg, var(--cream) 0%, #F5EEF0 100%);
}

/* EVERY emphasis word inside a heading uses the Cormorant italic accent
   (Bebas Neue has no italic). The specific selectors below additionally
   give it the clipped gradient fill. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Gradient text accent on heading emphasis.
   display:inline-block + padding-bottom (offset by a negative margin)
   stops italic descenders (g, H, y) from being clipped by the
   background-clip:text box. line-height keeps the clip box tall enough. */
.hero-headline .em,
.section-title em,
.page-hero h1 em,
.rv-head h2 em,
.portfolio-sec .head h2 em {
    background: var(--grad-crimson);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--crimson);                 /* fallback if clip unsupported */
    /* Emphasis words use the Cormorant italic accent (Bebas has no italic);
       condensed caps + flowing italic serif = the premium contrast. */
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    /* Italic + background-clip:text clips the slanted right overhang of the
       LAST glyph and the descenders. Pad the clip box on the right + bottom
       (and a touch left), then pull it back with equal negative margins so
       surrounding layout/spacing does not move. */
    display: inline-block;
    line-height: 1.2;
    padding: 0 0.24em 0.18em 0.06em;
    margin: 0 -0.24em -0.18em -0.06em;
}

/* Gradient button (optional) */
.btn-gradient {
    background: var(--grad-crimson); color: var(--cream-letter);
    border: none; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.04em;
    box-shadow: 0 10px 26px rgba(107,31,58,0.30);
}
.btn-gradient:hover, .btn-gradient:focus { color: var(--white); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(107,31,58,0.42); }

.eyebrow-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--crimson-pale); color: var(--crimson);
    font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.4rem 1rem; border-radius: 50px; border: 1px solid rgba(107,31,58,0.15); margin-bottom: 1rem;
}

/* ---------------- PORTFOLIO TICKER (3D book cards) ---------------- */
.portfolio-swiper {
    padding: 1.6rem 0; perspective: 1700px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.portfolio-swiper .swiper-wrapper { transition-timing-function: linear !important; } /* smooth marquee */
.pf-slide { width: 232px; height: auto; }
.pf-cover {
    position: relative; display: block; border-radius: 3px 8px 8px 3px; overflow: hidden;
    aspect-ratio: 2 / 3; background: var(--cream-dark);
    box-shadow: 0 18px 34px rgba(26,18,20,0.26);
    transform: rotateY(-16deg); transform-style: preserve-3d;
    transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* spine + page-edge highlight for the 3D book look */
.pf-cover::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 15px; z-index: 3; background: linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.10) 60%, rgba(255,255,255,0.18) 100%); }
.pf-cover::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 52%, rgba(26,18,20,0.55)); opacity: 0; transition: opacity 0.4s var(--ease); }
.pf-slide:hover .pf-cover { transform: rotateY(-3deg) translateY(-10px); box-shadow: 0 32px 56px rgba(107,31,58,0.32); }
.pf-slide:hover .pf-cover::after { opacity: 1; }
.pf-img-fallback { object-fit: contain !important; padding: 12px; background: var(--cream); }
.pf-cat {
    position: absolute; top: 10px; left: 20px; z-index: 5;
    background: var(--grad-crimson); color: var(--cream-letter);
    font-family: var(--font-body); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem; border-radius: 40px; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(107,31,58,0.4);
}
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 1.1rem; }
.pf-info h4 { font-size: 1rem; line-height: 1.2; margin: 0 0 2px; }
.pf-info span { font-size: 0.82rem; color: var(--text-muted-custom); }
.pf-amazon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--grad-crimson); display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease); box-shadow: 0 6px 16px rgba(107,31,58,0.3); }
.pf-amazon i { color: #fff; font-size: 1.15rem; }
.pf-amazon:hover { transform: scale(1.12) rotate(-4deg); }

/* ---------------- PLATFORM TESTIMONIALS ---------------- */
.rv-sec { padding: 5.5rem 0; background: var(--grad-reviews); position: relative; overflow: hidden; }
.rv-head { text-align: center; max-width: 760px; margin: 0 auto 2.4rem; padding: 0 1.25rem; }
.rv-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.8rem; }
.rv-head p { color: var(--text-muted-custom); }
.rv-platforms { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; align-items: center; margin-top: 1.5rem; }
.rv-plogo { display: inline-flex; height: 30px; opacity: 0.85; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.rv-plogo img { height: 100%; width: auto; object-fit: contain; }
.rv-plogo:hover { opacity: 1; transform: translateY(-2px); }
.rv-shell { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; position: relative; }
.rv-swiper { padding: 0.5rem 0; }
.rv-card {
    background: var(--white); border-radius: 16px; padding: 2rem 1.7rem 1.6rem;
    box-shadow: 0 18px 40px rgba(26,18,20,0.09); height: auto; position: relative;
    border: 1px solid rgba(107,31,58,0.06); overflow: hidden;
}
.rv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-crimson); }
.rv-quote { font-size: 2.4rem; color: var(--crimson); opacity: 0.2; line-height: 1; }
.rv-top { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.3rem; }
.rv-avatar { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: 0 0 46px; background: var(--cream); display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--cream-dark); }
.rv-avatar img { width: 100%; height: 100%; object-fit: contain; }
.rv-meta h3 { font-size: 1.02rem; margin: 0; }
.rv-date { font-size: 0.78rem; color: var(--text-muted-custom); }
.rv-rating { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0; }
.rv-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 1px; }
.rv-rating b { font-size: 0.85rem; color: var(--charcoal); }
.rv-text {
    font-family: var(--font-body); color: var(--text-muted-custom); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.2rem;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; font-size: 0.85rem; color: var(--crimson); }
.rv-link:hover { gap: 0.55rem; color: var(--crimson-light); }
.rv-nav { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--white); color: var(--crimson); box-shadow: 0 8px 20px rgba(26,18,20,0.16); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); }
.rv-nav:hover { background: var(--crimson); color: var(--cream-letter); }
.rv-prev { left: -4px; } .rv-next { right: -4px; }
.rv-pagination { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 1.8rem; }
.rv-pagination .swiper-pagination-bullet { margin: 0 !important; }
.rv-pagination .swiper-pagination-bullet { background: var(--silver); opacity: 0.5; }
.rv-pagination .swiper-pagination-bullet-active { background: var(--crimson); opacity: 1; }

/* ---------------- PORTFOLIO PAGE — genre filter + flat grid cards ---------------- */
.filter-btn.active { background: var(--grad-crimson); border-color: transparent; }
.pf-page-grid .pf-cover,
.pf-portfolio-card .pf-cover { aspect-ratio: 2 / 3; transform: none; }
.pf-portfolio-card:hover .pf-cover { transform: translateY(-9px); box-shadow: 0 30px 54px rgba(107,31,58,0.30); }
.pf-portfolio-card:hover .pf-cover::after { opacity: 1; }

/* ---------------- ANIMATED ICONS ON CARD HOVER ---------------- */
@keyframes iconPop {
    0%   { transform: translateY(0) scale(1) rotate(0); }
    35%  { transform: translateY(-4px) scale(1.22) rotate(-10deg); }
    70%  { transform: scale(0.96) rotate(5deg); }
    100% { transform: translateY(0) scale(1) rotate(0); }
}
.service-card:hover .svc-icon i,
.why-item:hover .why-icon i,
.process-step:hover .process-icon i,
.mv-card:hover .mv-icon i,
.value-card:hover .v-icon i,
.stat-card:hover .stat-icon i,
.pf-amazon:hover i { animation: iconPop 0.6s var(--ease); display: inline-block; }

/* ---------------- ITALIC EMPHASIS IN BODY COPY ---------------- */
p em, .lead em, .section-subtitle em, .hero-subtitle em, .footer-about em, .pf-info em {
    font-style: italic; color: var(--crimson); font-weight: 500;
}
.section-subtitle.on-dark em { color: #E9B7C4; }
/* lighter gradient for emphasis on dark sections (keeps contrast).
   Use background-IMAGE (not the shorthand) so background-clip:text is
   preserved — the shorthand resets clip to border-box and the gradient
   fills the whole box as a solid rectangle. */
.section-title.on-dark em {
    background-image: linear-gradient(135deg, #F2CBD6 0%, #D98AA0 100%);
    -webkit-background-clip: text; background-clip: text;
}

@media (max-width: 600px) {
    .pf-slide { width: 158px; }
    .rv-nav { width: 38px; height: 38px; }
    .rv-prev { left: 0; } .rv-next { right: 0; }
}

/* ==================================================================
   29. HOME REDESIGN — spines-style: light, airy & modern (ANZ brand)
   All rules are scoped to the home page through .sp-* classes and
   #sp-* section ids, so the inner pages (about/services/books/contact)
   are completely unaffected.
   ================================================================== */

/* ---- Section rhythm + alternating light backgrounds ---- */
.sp-section { position: relative; padding: 5.5rem 0; background: var(--white); }
/* alternating light backgrounds in page order */
#sp-books,
#sp-genres,
#sp-cost,
#testimonials,
#sp-blog       { background: var(--cream); }
#sp-about,
#sp-services,
#sp-how,
#sp-why,
#sp-cta,
#faq           { background: var(--white); }

/* ---- Shared section heading block ---- */
.sp-head { max-width: 760px; margin: 0 auto 3rem; }
.sp-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--crimson);
    background: var(--crimson-pale);
    border: 1px solid rgba(107,31,58,0.14);
    padding: 0.4rem 1rem; border-radius: 50px; margin-bottom: 1.1rem;
}
.sp-title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08;
    color: var(--charcoal); margin-bottom: 1rem;
}
.sp-lead { color: var(--text-muted-custom); font-size: 1.08rem; line-height: 1.7; max-width: 660px; }
.sp-head.text-center .sp-lead { margin-left: auto; margin-right: auto; }

/* Italic crimson-gradient emphasis (works on <span class="em">) */
.sp-hero-title .em,
.sp-title .em {
    background: var(--grad-crimson);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--crimson);
    font-family: var(--font-accent); font-style: italic; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    display: inline-block; line-height: 1.2;
    padding: 0 0.24em 0.18em 0.06em; margin: 0 -0.24em -0.18em -0.06em;
}

/* Inline text link with arrow */
.sp-textlink {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
    letter-spacing: 0.02em; color: var(--crimson);
}
.sp-textlink i { transition: transform 0.3s var(--ease); }
.sp-textlink:hover { color: var(--crimson-light); }
.sp-textlink:hover i { transform: translateX(4px); }

.sp-stars { color: var(--gold); letter-spacing: 1px; }

/* ---- 1. HERO ---- */
#sp-hero {
    overflow: hidden; padding: 6rem 0 5rem;
    /* hero-background photo, under a light scrim so the dark headline and
       crimson buttons stay readable */
    background:
        linear-gradient(180deg, rgba(245,245,247,0.82) 0%, rgba(245,245,247,0.78) 60%, rgba(232,232,237,0.85) 100%),
        url('../images/hero-background.webp') center center / cover no-repeat;
}
.sp-hero-glow {
    position: absolute; top: -22%; right: -8%; width: 680px; height: 680px;
    border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(107,31,58,0.12), rgba(107,31,58,0) 70%);
}
#sp-hero .container { position: relative; z-index: 2; }
.sp-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--white); color: var(--crimson);
    font-family: var(--font-display); font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.45rem 1.1rem; border-radius: 50px;
    border: 1px solid rgba(107,31,58,0.16); box-shadow: 0 6px 18px rgba(26,18,20,0.06);
    margin-bottom: 1.4rem;
}
.sp-hero-title {
    font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04;
    color: var(--charcoal); margin: 0 0 1.2rem;
}
.sp-hero-sub {
    font-family: var(--font-body); font-weight: 300;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7;
    color: var(--text-muted-custom); max-width: 560px; margin: 0 0 2rem;
}
.sp-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.sp-hero-trust { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.8rem; flex-wrap: wrap; }
.sp-trust-text { font-size: 0.92rem; color: var(--text-muted-custom); }
.sp-trust-text strong { color: var(--charcoal); }

/* Hero book collage */
.sp-hero-visual { position: relative; }
.sp-hero-stack {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    max-width: 460px; margin: 0 0 0 auto;
}
.sp-cover {
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 18px 40px rgba(26,18,20,0.22);
    animation: spFloat 6s ease-in-out infinite;
}
.sp-cover img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
/* push the outer columns down so the centre column stands tall */
.sp-cover-1, .sp-cover-3, .sp-cover-4, .sp-cover-6 { margin-top: 2rem; }
@keyframes spFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.sp-float-badge {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.7rem;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 14px; padding: 0.7rem 1rem; box-shadow: 0 16px 36px rgba(26,18,20,0.16);
}
.sp-float-badge i { color: var(--crimson); font-size: 1.3rem; }
.sp-float-badge strong { display: block; font-family: var(--font-display); font-size: 0.85rem; color: var(--charcoal); }
.sp-float-badge span { font-size: 0.76rem; color: var(--text-muted-custom); }
.sp-float-badge-1 { top: 4%; left: -3%; }
.sp-float-badge-2 { bottom: 2%; right: -2%; }

/* ---- 2. TRUST / STATS ---- */
#sp-trust { padding: 3.5rem 0 4.5rem; }
.sp-trust-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 1.2rem 2.6rem; padding-bottom: 2.6rem; margin-bottom: 2.8rem;
    border-bottom: 1px solid var(--cream-dark);
}
.sp-trust-rating { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.sp-trust-excellent { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--charcoal); }
.sp-stars-lg { font-size: 1.05rem; }
.sp-trust-count { color: var(--text-muted-custom); font-size: 0.9rem; }
.sp-trust-logos { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
.sp-trust-logos img { height: 24px; width: auto; object-fit: contain; opacity: 0.8; filter: grayscale(35%); transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); }
.sp-trust-logos a:hover img { opacity: 1; filter: none; }

.sp-stats { text-align: center; }
.sp-stat { padding: 0.5rem; }
.sp-stat-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--crimson); line-height: 1; }
.sp-stat-label { font-family: var(--font-body); color: var(--text-muted-custom); font-size: 0.9rem; margin-top: 0.45rem; letter-spacing: 0.02em; }

.sp-partners-label {
    text-align: center; font-family: var(--font-display);
    font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--silver); margin: 3.2rem 0 1.2rem;
}

/* ---- 3. WHY / FEATURE CARDS ---- */
.sp-feature {
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 16px; padding: 2.2rem 1.7rem; height: 100%;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sp-feature:hover { transform: translateY(-8px); border-color: rgba(107,31,58,0.3); box-shadow: 0 22px 46px rgba(26,18,20,0.1); }
.sp-feature-icon {
    width: 58px; height: 58px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--crimson); background: var(--crimson-pale);
    margin-bottom: 1.2rem; transition: all 0.4s var(--ease);
}
.sp-feature:hover .sp-feature-icon { background: var(--crimson); color: var(--cream-letter); transform: translateY(-3px) rotate(-6deg); }
.sp-feature h3 { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 0.5rem; }
.sp-feature p { color: var(--text-muted-custom); font-size: 0.93rem; margin: 0; }

/* ---- 4. DID YOU KNOW + QUOTES ---- */
.sp-bignum { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.sp-stat-copy { color: var(--text-muted-custom); font-size: 1.08rem; line-height: 1.8; }
.sp-quotes-swiper { margin-top: 3.5rem; padding-bottom: 3rem; }
.sp-quote {
    background: var(--cream); border: 1px solid var(--cream-dark);
    border-radius: 16px; padding: 2rem 1.8rem; height: 100%; margin: 0;
}
.sp-quote i { color: var(--crimson); opacity: 0.3; font-size: 1.8rem; }
.sp-quote blockquote {
    font-family: var(--font-accent); font-style: italic;
    font-size: 1.15rem; line-height: 1.5; color: var(--charcoal); margin: 0.6rem 0 1rem;
}
.sp-quote figcaption { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--crimson); }

/* ---- 4b. ABOUT US (image + content, two columns) ---- */
.sp-about-media {
    position: relative;
    overflow: hidden;
}
.sp-about-media img { display: block; width: 100%; height: auto; border-radius : 18px; object-fit: cover; box-shadow: 0 22px 50px rgba(26,18,20,0.16); border: 1px solid var(--cream-dark); transition: transform 0.35s ease; }
.sp-about-media img:hover { transform: scale(1.05); border-radius : 18px;}
.sp-about-badge {
    position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 2;
    display: flex; flex-direction: column; gap: 0.15rem;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 16px; padding: 0.85rem 1.2rem;
    box-shadow: 0 16px 36px rgba(26,18,20,0.18);
}
.sp-about-badge-num {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem;
    color: var(--crimson); line-height: 1;
}
.sp-about-badge-label { font-size: 0.78rem; line-height: 1.3; color: var(--text-muted-custom); }
.sp-about-copy { color: var(--text-muted-custom); font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.1rem; }
.sp-about-copy:last-of-type { margin-bottom: 0; }
.sp-about-points { margin-top: 1.3rem; margin-bottom: 0; }
.sp-about-cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.7rem; }

/* ---- 5. HOW IT WORKS (alternating rows) ---- */
.sp-steps { display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 992px) { .sp-step-rev { flex-direction: row-reverse; } }
.sp-step-imgwrap {
    position: relative; border-radius: 18px; overflow: hidden;
    box-shadow: 0 22px 50px rgba(26,18,20,0.16); border: 1px solid var(--cream-dark);
}
.sp-step-imgwrap img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.sp-step-badge {
    position: absolute; top: 1rem; left: 1rem; z-index: 2;
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--grad-crimson); color: var(--cream-letter);
    font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(107,31,58,0.4);
}
.sp-step-step { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crimson); font-weight: 600; }
.sp-step-body h3 { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0.4rem 0 0.8rem; }
.sp-step-body p { color: var(--text-muted-custom); font-size: 1.02rem; line-height: 1.7; }
.sp-step-points { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.sp-step-points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: var(--charcoal); margin-bottom: 0.5rem; }
.sp-step-points li i { color: var(--nz-fern); margin-top: 3px; }

/* ---- 6. SERVICES (light cards) ---- */
.sp-svc {
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 16px; padding: 2rem 1.7rem; height: 100%;
    display: flex; flex-direction: column;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sp-svc:hover { transform: translateY(-8px); border-color: rgba(107,31,58,0.28); box-shadow: 0 22px 46px rgba(26,18,20,0.1); }
.sp-svc-icon {
    width: 60px; height: 60px; border-radius: 14px;
    background: var(--crimson-pale); color: var(--crimson);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; margin-bottom: 1.1rem; transition: all 0.4s var(--ease);
}
.sp-svc:hover .sp-svc-icon { background: var(--crimson); color: var(--cream-letter); transform: rotate(-6deg); }
.sp-svc h3 { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 0.5rem; }
.sp-svc p { color: var(--text-muted-custom); font-size: 0.92rem; flex: 1; }
.sp-svc-link { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--crimson); display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; }
.sp-svc-link i { transition: transform 0.3s var(--ease); }
.sp-svc:hover .sp-svc-link i { transform: translateX(4px); }

/* ---- 9. CTA ---- */
#sp-cta { padding: 4rem 0 5.5rem; }
.sp-cta-box {
    position: relative; overflow: hidden; border-radius: 26px; text-align: center;
    padding: 4.2rem 2rem; color: var(--cream-letter);
    background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-light) 58%, #4d1228 100%);
    box-shadow: 0 30px 70px rgba(107,31,58,0.35);
}
/* Animated moving blobs that drift behind the CTA content */
.sp-cta-box::before,
.sp-cta-box::after {
    content: ''; position: absolute; border-radius: 50%;
    z-index: 0; pointer-events: none; filter: blur(58px); will-change: transform;
}
.sp-cta-box::before {
    width: 48%; aspect-ratio: 1; top: -16%; left: -10%;
    background: radial-gradient(circle, rgba(233,150,180,0.55), rgba(233,150,180,0) 70%);
    animation: ctaBlobA 22s ease-in-out infinite;
}
.sp-cta-box::after {
    width: 56%; aspect-ratio: 1; bottom: -22%; right: -12%;
    background: radial-gradient(circle, rgba(150,30,82,0.70), rgba(150,30,82,0) 70%);
    animation: ctaBlobB 28s ease-in-out infinite;
}
@keyframes ctaBlobA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(42%, 34%) scale(1.28); }
    66%      { transform: translate(14%, 60%) scale(0.9); }
}
@keyframes ctaBlobB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(-38%, -28%) scale(1.32); }
    72%      { transform: translate(-14%, -48%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .sp-cta-box::before, .sp-cta-box::after { animation: none; }
}
.sp-cta-box > * { position: relative; z-index: 1; }
.sp-cta-box h2 { color: var(--cream-letter); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.sp-cta-box h2 .em {
    background-image: linear-gradient(135deg, #F2CBD6 0%, #E9B7C4 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: #F2CBD6; font-family: var(--font-accent); font-style: italic; font-weight: 500;
}
.sp-cta-box p { color: rgba(232,224,216,0.9); max-width: 600px; margin: 0 auto 2rem; font-size: 1.1rem; }
.sp-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .sp-section { padding: 3.8rem 0; }
    #sp-hero { padding: 4.5rem 0 3.5rem; }
    .sp-hero-stack { margin: 2.6rem auto 0; }
    .sp-steps { gap: 3rem; }
    .sp-head { margin-bottom: 2.4rem; }
}
@media (max-width: 575.98px) {
    .sp-float-badge { display: none; }
    .sp-about-badge { left: 0.8rem; bottom: 0.8rem; padding: 0.7rem 0.95rem; }
    .sp-about-badge-num { font-size: 1.3rem; }
    .sp-hero-cta .btn, .sp-cta-btns .btn { width: 100%; }
    .sp-hero-stack { max-width: 320px; }
    .sp-trust-bar { gap: 1rem; }
    .sp-cta-box { padding: 3rem 1.4rem; border-radius: 20px; }
}

/* ==================================================================
   30. HERO BOOK TOWER + PREMIUM REFINEMENTS (Apple-style spacing,
   tighter tracking, crisp-red gradients)
   ================================================================== */

/* ---- Tilted 3-column auto-scrolling book tower (hero visual) ---- */
.sp-booktower {
    display: flex; gap: 16px;
    height: 580px; width: 100%; max-width: 520px;
    margin: 0 0 0 auto;
    transform: rotate(5deg); transform-origin: center center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.sp-bt-col { flex: 1 1 0; min-width: 0; overflow: hidden; position: relative; }
.sp-bt-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 16px;
    animation: spBtScroll 38s linear infinite; will-change: transform;
}
.sp-bt-list li {
    list-style: none; flex: none; width: 100%; aspect-ratio: 2 / 3;
    background-size: cover; background-position: center;
    background-color: var(--burgundy);
    border-radius: 12px;
    box-shadow: 0 20px 38px -18px rgba(20,18,22,0.55), 0 5px 14px rgba(20,18,22,0.16);
    position: relative; overflow: hidden;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.sp-bt-list li:hover { transform: scale(1.05); box-shadow: 0 28px 50px -16px rgba(107,31,58,0.5); }
.sp-bt-list li > a { position: absolute; inset: 0; display: block; border-radius: inherit; }
.sp-bt-list li > a:focus-visible { outline: 2px solid var(--crimson-light); outline-offset: 2px; }
/* stagger column speed + direction */
.sp-bt-col--1 .sp-bt-list { animation-duration: 42s; }
.sp-bt-col--2 .sp-bt-list { animation-duration: 52s; animation-direction: reverse; }
.sp-bt-col--3 .sp-bt-list { animation-duration: 38s; }
.sp-bt-col--4 .sp-bt-list { animation-duration: 48s; animation-direction: reverse; }
.sp-bt-col--5 .sp-bt-list { animation-duration: 34s; }
.sp-booktower:hover .sp-bt-list { animation-play-state: paused; }
@keyframes spBtScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .sp-bt-list { animation: none; } }

#sp-hero { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.sp-hero-glow { background: radial-gradient(circle, rgba(107,31,58,0.14), rgba(107,31,58,0) 70%); }

@media (max-width: 991.98px) {
    .sp-booktower { margin: 2.6rem auto 0; max-width: 460px; height: 500px; transform: rotate(4deg); }
    /* keep only 3 columns when stacked so covers don't shrink too far */
    .sp-booktower .sp-bt-col--4,
    .sp-booktower .sp-bt-col--5 { display: none; }
}
@media (max-width: 575.98px) {
    .sp-booktower { transform: none; height: 430px; gap: 10px; max-width: 320px; }
    .sp-bt-list { gap: 10px; }
    .sp-bt-list li { border-radius: 9px; }
}

/* ---- Apple-style premium polish: whitespace + tracking ---- */
.sp-section { padding: 6.5rem 0; }
.sp-head { margin-bottom: 3.5rem; }
.sp-hero-title { font-weight: 800; letter-spacing: -0.035em; }
.sp-title { font-weight: 800; letter-spacing: -0.03em; }
.sp-eyebrow { letter-spacing: 0.18em; font-weight: 600; }
.sp-lead { font-size: 1.12rem; line-height: 1.72; color: var(--text-muted-custom); }
.sp-hero-sub { line-height: 1.72; }

/* Crisp-red gradient on the emphasis words + stat numbers */
.sp-stat-num {
    background: var(--grad-crimson);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--crimson);
}

/* Eyebrow gets a soft gradient tint border for a premium accent */
.sp-eyebrow { background: var(--grad-crimson-soft); border-color: rgba(107,31,58,0.18); }

/* CTA box: crisp-red → burgundy gradient (was static crimson) */
.sp-cta-box { background: linear-gradient(135deg, #8B3050 0%, #6B1F3A 45%, #3D1220 100%); }

@media (max-width: 991.98px) { .sp-section { padding: 4.2rem 0; } }

/* ---- Full-height hero book tower (desktop): tower spans the whole
   hero section top-to-bottom, with the soft top/bottom fade kept ---- */
@media (min-width: 992px) {
    #sp-hero { padding: 0; }
    #sp-hero > .container { position: relative; }
    #sp-hero .row { min-height: 720px; }
    .sp-hero-copy { padding: 4rem 0; }
    .sp-hero-visual {
        position: absolute; top: 0; right: 0; bottom: 0;
        width: 50%; max-width: none; padding: 0; overflow: hidden;
        /* screen-aligned fade on the LEFT & RIGHT edges so covers feather
           off the sides instead of hard-cutting (the tower itself handles
           the top/bottom fade); the two masks nest to soften all 4 edges */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    /* Tower fills the full hero height and is widened past the window so the
       tilt never leaves a gap at the sides. Covers bleed off the edges and
       clip cleanly instead of being cut mid-cover. The soft top/bottom fade
       stays on the tower (tilting with it) and hides the rotated corners. */
    .sp-booktower {
        position: absolute; top: 50%; left: 50%;
        width: 134%; height: 100%; max-width: none; margin: 0; gap: 16px;
        transform: translate(-50%, -50%) rotate(5deg);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
                mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    }
    .sp-booktower .sp-bt-col { flex: 1 1 0; width: auto; }
}

/* ==================================================================
   31. HOME LAYOUT v2 — genres, 6-step cards, why-list, blog slider
   ================================================================== */

/* ---- Genres we publish in ---- */
.sp-genre {
    display: flex; align-items: center; gap: 1rem;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 14px; padding: 1.3rem 1.4rem; height: 100%;
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.sp-genre:hover { transform: translateY(-5px); border-color: rgba(107,31,58,0.28); box-shadow: 0 18px 38px rgba(26,18,20,0.10); }
.sp-genre-icon {
    flex: 0 0 50px; width: 50px; height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--crimson); background: var(--crimson-pale);
    transition: all 0.35s var(--ease);
}
.sp-genre:hover .sp-genre-icon { background: var(--crimson); color: #fff; transform: rotate(-6deg); }
.sp-genre h3 { font-family: var(--font-heading); font-size: 1.12rem; margin: 0 0 0.15rem; }
.sp-genre p { font-size: 0.85rem; color: var(--text-muted-custom); margin: 0; line-height: 1.5; }

/* ---- Six-step cards ---- */
.sp-step-card {
    position: relative; overflow: hidden;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 18px; padding: 2.2rem 1.9rem 2.2rem 2.15rem; height: 100%;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* vertical crimson-to-gold accent line on the left edge */
.sp-step-card::after {
    content: ''; position: absolute; left: 0; top: 2rem; bottom: 2rem; width: 3px;
    border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--crimson), var(--crimson-pale));
    opacity: 0.5; transition: opacity 0.4s var(--ease);
}
.sp-step-card:hover { transform: translateY(-6px); border-color: rgba(107,31,58,0.28); box-shadow: 0 24px 48px rgba(26,18,20,0.12); }
.sp-step-card:hover::after { opacity: 1; }
.sp-step-card-num {
    position: absolute; top: 1.1rem; right: 1.4rem; z-index: 0;
    font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 4.6vw, 4rem);
    line-height: 1; letter-spacing: -0.02em;
    color: transparent; -webkit-text-stroke: 1.6px rgba(107,31,58,0.18);
}
.sp-step-card-icon {
    position: relative; z-index: 1;
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--crimson-pale); background: var(--grad-crimson);
    margin-bottom: 1.2rem;
    box-shadow: 0 10px 22px rgba(107,31,58,0.30), 0 0 0 6px rgba(107,31,58,0.06);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sp-step-card:hover .sp-step-card-icon { transform: translateY(-2px) rotate(-6deg); box-shadow: 0 16px 30px rgba(107,31,58,0.38), 0 0 0 6px rgba(212,160,23,0.12); }
.sp-step-card h3 {
    position: relative; z-index: 1;
    font-family: var(--font-accent); font-style: italic; font-weight: 600;
    font-size: 1.22rem; color: var(--charcoal); margin-bottom: 0.55rem; letter-spacing: -0.01em;
}
.sp-step-card p { position: relative; z-index: 1; font-size: 0.92rem; color: var(--text-muted-custom); line-height: 1.7; margin: 0; }

/* ---- Why authors choose us — icon checklist ---- */
.sp-why-list { list-style: none; padding: 0; margin: 0.4rem 0 1.6rem; display: grid; gap: 0.9rem; }
.sp-why-list li { display: flex; align-items: center; gap: 0.85rem; font-size: 0.98rem; color: var(--charcoal); }
.sp-why-ic {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; color: var(--crimson); background: var(--crimson-pale);
}

/* ---- Blog slider ---- */
.sp-blog-swiper { padding: 0.5rem 0 3.2rem; }
.sp-blog-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 16px; overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sp-blog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(26,18,20,0.12); }
.sp-blog-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.sp-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.sp-blog-card:hover .sp-blog-thumb img { transform: scale(1.05); }
.sp-blog-cat {
    position: absolute; top: 0.85rem; left: 0.85rem;
    background: var(--grad-crimson); color: #fff;
    font-family: var(--font-display); font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.25rem 0.7rem; border-radius: 40px; box-shadow: 0 4px 12px rgba(107,31,58,0.35);
}
.sp-blog-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.6rem; }
.sp-blog-date { font-size: 0.78rem; color: var(--silver); margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.sp-blog-body h3 { font-family: var(--font-heading); font-size: 1.14rem; line-height: 1.3; margin-bottom: 0.5rem; }
.sp-blog-body h3 a { color: var(--charcoal); transition: color 0.3s var(--ease); }
.sp-blog-body h3 a:hover { color: var(--crimson); }
.sp-blog-body p { font-size: 0.9rem; color: var(--text-muted-custom); line-height: 1.6; flex: 1; margin-bottom: 1rem; }
.sp-blog-link { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--crimson); display: inline-flex; align-items: center; gap: 0.45rem; }
.sp-blog-link i { transition: transform 0.3s var(--ease); }
.sp-blog-link:hover { color: var(--crimson-light); }
.sp-blog-link:hover i { transform: translateX(4px); }
.sp-blog-pagination { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 1.6rem; }
.sp-blog-pagination .swiper-pagination-bullet { background: var(--silver); opacity: 0.5; margin: 0 !important; }
.sp-blog-pagination .swiper-pagination-bullet-active { background: var(--crimson); opacity: 1; }

/* ==================================================================
   32. SERVICES PAGE — hero with consultation form
   ================================================================== */
/* alternating section backgrounds (page order) */
#svc-included, #svc-pricing, #svc-more, #svc-faq, #svc-cards { background: var(--cream); }

#svc-hero, #svc-list-hero, #tm-hero {
    background:
        linear-gradient(180deg, rgba(245,245,247,0.82) 0%, rgba(245,245,247,0.78) 60%, rgba(232,232,237,0.85) 100%),
        url('../images/hero-background.webp') center center / cover no-repeat;
    padding: 5.5rem 0;
}
#tm-hero { padding-bottom: 2.5rem; }
#tm-grid { padding-top: 2rem; }
.svc-crumb {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
    margin-bottom: 1.4rem;
}
.svc-crumb a { color: var(--text-muted-custom); display: inline-flex; align-items: center; gap: 0.4rem; }
.svc-crumb a:hover { color: var(--crimson); }
.svc-crumb .sep { color: var(--silver); }
.svc-crumb .cur { color: var(--crimson); }
.svc-hero-title {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.05;
    letter-spacing: -0.03em; color: var(--charcoal); margin: 0 0 1.3rem;
}
.svc-hero-copy p { color: var(--text-muted-custom); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1rem; max-width: 560px; }
.svc-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* Consultation form card */
.svc-form-card {
    position: relative;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 22px; padding: 2.3rem 2rem 2rem;
    box-shadow: 0 34px 80px rgba(26,18,20,0.12);
}
.svc-form-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad-crimson);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
}
.svc-form-head { text-align: center; margin-bottom: 1.3rem; }
.svc-form-eyebrow {
    display: inline-block; font-family: var(--font-display);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--crimson);
    background: var(--crimson-pale); padding: 0.4rem 0.9rem;
    border-radius: 999px; margin-bottom: 0.9rem;
}
.svc-form-title {
    font-family: var(--font-heading); font-weight: 800;
    font-size: 1.55rem; line-height: 1.18; letter-spacing: -0.02em;
    margin: 0; color: var(--charcoal);
}
.svc-form-sub {
    color: var(--text-muted-custom); font-size: 0.93rem; line-height: 1.65;
    margin: 0.7rem auto 1.6rem; max-width: 30rem; text-align: center;
}
.svc-form-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; color: var(--silver); font-size: 0.82rem; margin: 1.1rem 0 0; }
.svc-form-note i { color: var(--nz-fern); }
/* slightly softer field labels in the hero form */
.svc-form-card .form-label { font-size: 0.85rem; margin-bottom: 0.3rem; font-weight: 600; color: var(--charcoal); }

/* Refined, modern filled inputs */
.svc-form-card .form-control,
.svc-form-card .form-select {
    background: var(--cream);
    border: 1.5px solid transparent;
    border-radius: 11px;
    padding: 0.82rem 1rem;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.svc-form-card .form-control:hover,
.svc-form-card .form-select:hover { border-color: var(--cream-dark); background: #fff; }
.svc-form-card .form-control:focus,
.svc-form-card .form-select:focus {
    background: #fff; border-color: var(--crimson);
    box-shadow: 0 0 0 3px rgba(107,31,58,0.13);
}
.svc-form-card .form-control::placeholder { color: var(--silver); }
.svc-form-card .btn-crimson { border-radius: 12px; font-weight: 600; padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* ------------------------------------------------------------------
   QUOTE POPUP MODAL  (site-wide CTA popup — see includes/quote-modal.php)
   ------------------------------------------------------------------ */
.quote-modal .modal-content {
    position: relative; border: none; border-radius: 22px; overflow: hidden;
    box-shadow: 0 40px 90px rgba(26,18,20,0.30);
}
.quote-modal .modal-content::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad-crimson); z-index: 2;
}
.quote-modal .modal-body { padding: 2.6rem 2.3rem 2rem; }
.quote-modal-close { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3; }
.qm-head { text-align: center; margin-bottom: 1.5rem; }
.qm-eyebrow {
    display: inline-block; font-family: var(--font-display);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--crimson); background: var(--crimson-pale);
    padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.qm-title {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 1.95rem); line-height: 1.15; letter-spacing: -0.02em;
    margin: 0; color: var(--charcoal);
}
.qm-sub { color: var(--text-muted-custom); font-size: 0.95rem; line-height: 1.6; margin: 0.7rem auto 0; max-width: 32rem; }
.qm-form .form-label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--charcoal); }
.qm-form .form-control,
.qm-form .form-select {
    background: var(--cream); border: 1.5px solid transparent; border-radius: 11px; padding: 0.8rem 1rem;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.qm-form .form-control:hover,
.qm-form .form-select:hover { border-color: var(--cream-dark); background: #fff; }
.qm-form .form-control:focus,
.qm-form .form-select:focus { background: #fff; border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(107,31,58,0.13); }
.qm-form .form-control::placeholder { color: var(--silver); }
.qm-form .btn-crimson { border-radius: 12px; }
.qm-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; color: var(--silver); font-size: 0.82rem; margin: 1.1rem 0 0; }
.qm-note i { color: var(--nz-fern); }
@media (max-width: 575.98px) { .quote-modal .modal-body { padding: 2rem 1.4rem 1.6rem; } }

@media (max-width: 991.98px) {
    #svc-hero, #svc-list-hero { padding: 3.8rem 0; }
    .svc-form-card { margin-top: 0.5rem; padding: 1.7rem 1.4rem; }
}
.svc-crumb.justify-content-center { justify-content: center; }

/* "What's included" feature items (individual service pages) */
.svc-inc {
    display: flex; align-items: flex-start; gap: 0.8rem; height: 100%;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 14px; padding: 1.2rem 1.3rem;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.svc-inc:hover { transform: translateY(-4px); border-color: rgba(107,31,58,0.25); box-shadow: 0 16px 34px rgba(26,18,20,0.09); }
.svc-inc i { color: var(--nz-fern); font-size: 1.05rem; margin-top: 2px; }
.svc-inc span { font-size: 0.95rem; font-weight: 500; color: var(--charcoal); }

/* Whole service card clickable (services.php listing) */
.svc-link-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.svc-link-card:hover { color: inherit; }
.svc-link-card .sp-svc-link { cursor: pointer; }
.svc-link-card:hover .sp-svc-link i { transform: translateX(4px); }

/* ==================================================================
   31. RESPONSIVE: CENTRE CONTENT ON TABLET & MOBILE + KILL H-SCROLL
   ================================================================== */

/* Stop sideways scrolling caused by decorative glows, the logo marquee and
   rotated book towers. Scoped to page content so the sticky navbar is not
   affected; overflow-x:clip keeps vertical flow normal (no scroll container). */
#page-main { overflow-x: clip; }

/* ---- Tablet and below (<= 991.98px): centre stacked two-column copy ---- */
@media (max-width: 991.98px) {

    /* Homepage hero copy */
    .sp-hero-copy { text-align: center; }
    .sp-hero-copy .sp-pill,
    .sp-hero-sub { margin-left: auto; margin-right: auto; }
    .sp-hero-cta,
    .sp-hero-trust { justify-content: center; }

    /* Service-page hero copy */
    .svc-hero-copy { text-align: center; }
    .svc-hero-copy p { margin-left: auto; margin-right: auto; }
    .svc-crumb,
    .svc-hero-cta { justify-content: center; }

    /* Stacked "image + text" sections (homepage about/cost/why,
       service overview + pricing). Only the text column is centred. */
    .sp-section .row > [class*="col-"]:has(.sp-about-copy),
    .sp-section .row > [class*="col-"]:has(.sp-why-list) { text-align: center; }
    .sp-section .row > [class*="col-"]:has(.sp-about-copy) .sp-eyebrow,
    .sp-section .row > [class*="col-"]:has(.sp-why-list) .sp-eyebrow { display: inline-flex; }
    .sp-about-cta { justify-content: center; }
    /* Checklist + benefit lists: centre the list as a block, keep ticks left */
    .sp-about-points { display: inline-block; text-align: left; }
    .sp-why-list { display: inline-grid; text-align: left; }

    /* Legacy section-pad text columns (about story, books CTA).
       :has() on the heading keeps the contact FORM column left-aligned. */
    .section-pad .row > [class*="col-"]:has(> .anz-label),
    .section-pad .row > [class*="col-"]:has(> .section-title) { text-align: center; }
    .section-pad .row > [class*="col-"]:has(> .anz-label) .accent-underline,
    .section-pad .row > [class*="col-"]:has(> .section-title) .accent-underline {
        margin-left: auto; margin-right: auto;
    }
}

/* ---- Mobile (<= 767.98px): centre footer + contact info card ---- */
@media (max-width: 767.98px) {

    /* Footer columns */
    .anz-footer [class*="col-"] { text-align: center; }
    .footer-brand { justify-content: center; }
    .footer-social,
    .footer-links a,
    .footer-contact li { justify-content: center; }
    .footer-contact li { text-align: left; }
    .footer-legal { justify-content: center; }
    .footer-heading { padding-bottom: 0.9rem; }
    .footer-heading::after { left: 50%; transform: translateX(-50%); }
    .footer-feather { opacity: 0.5; }

    /* Contact info card (the form column is left untouched for usability) */
    .contact-info-card { text-align: center; }
    .contact-info-card .ci-item { justify-content: center; text-align: left; }
    .contact-info-card .ci-social { justify-content: center; }
}

/* ---- Card grids: centre content on tablet & mobile ---- */
@media (max-width: 991.98px) {

    /* Vertical cards (icon on top): centre text and the icon tile */
    .sp-svc,
    .sp-step-card,
    .service-detail-card .sd-body,
    .mv-card,
    .value-card { text-align: center; }
    .sp-svc-icon,
    .sp-step-card-icon,
    .sd-icon,
    .mv-card .mv-icon,
    .value-card .v-icon { margin-left: auto; margin-right: auto; }

    /* Feature checklist inside service cards: centred block, ticks stay left */
    .sd-features { display: inline-block; text-align: left; }

    /* "What's included" tick items + genre/benefit horizontal cards */
    .svc-inc,
    .sp-genre { justify-content: center; }

    /* Centre the "Learn more" link inside the (column-flex) service cards */
    .sp-svc-link { margin-left: auto; margin-right: auto; }
    .sd-features { margin-left: auto; margin-right: auto; }
}

/* ---- Mobile: keep the homepage hero eyebrow pill on a single line ---- */
@media (max-width: 575.98px) {
    .sp-pill {
        font-size: 0.6rem; letter-spacing: 0.04em;
        padding: 0.4rem 0.85rem; white-space: nowrap;
    }
}

/* ==================================================================
   40. BLOG — listing, cards, single post, sidebar, author, FAQ
   ================================================================== */

/* ---- Listing hero ---- */
#blog-hero { background: var(--cream); padding-bottom: 1rem; }

/* ---- Featured post card ---- */
.blog-featured { padding: 1.5rem 0 0; }
.blog-featured-card {
    display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 20px; color: inherit;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-featured-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(26,18,20,0.12); }
.blog-featured-media { position: relative; min-height: 320px; }
.blog-featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-featured-badge {
    position: absolute; top: 1rem; left: 1rem;
    background: var(--grad-crimson); color: #fff;
    font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.3rem 0.8rem; border-radius: 40px;
    display: inline-flex; align-items: center; gap: 0.4rem;
    box-shadow: 0 4px 12px rgba(107,31,58,0.35);
}
.blog-featured-body { padding: 2.2rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body h2 {
    font-family: var(--font-heading); font-weight: 800; color: var(--charcoal);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.22;
    letter-spacing: -0.02em; margin: 0.9rem 0 0.7rem;
    transition: color 0.3s var(--ease);
}
.blog-featured-body p { color: var(--text-muted-custom); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.1rem; }
.blog-featured-card:hover .blog-featured-body h2 { color: var(--crimson); }

/* ---- Shared meta row / chips ---- */
.blog-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
    font-family: var(--font-display); font-size: 0.78rem; color: var(--silver);
}
.blog-meta i { color: var(--crimson); margin-right: 0.25rem; }
.blog-dot { color: var(--cream-dark); }
.blog-chip, .blog-card-chip {
    background: var(--crimson-pale); color: var(--crimson);
    font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.25rem 0.7rem; border-radius: 40px;
}
.blog-readmore {
    font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
    color: var(--crimson); display: inline-flex; align-items: center; gap: 0.45rem;
}
.blog-readmore i { transition: transform 0.3s var(--ease); }
.blog-readmore:hover { color: var(--crimson-light); }
.blog-readmore:hover i { transform: translateX(4px); }

/* ---- Listing grid ---- */
.blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.blog-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 16px; overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(26,18,20,0.12); }
.blog-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-chip { position: absolute; top: 0.85rem; left: 0.85rem; background: var(--grad-crimson); color: #fff; box-shadow: 0 4px 12px rgba(107,31,58,0.35); }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.6rem; }
.blog-card-body h3 { font-family: var(--font-heading); font-size: 1.14rem; line-height: 1.3; margin: 0.6rem 0 0.5rem; }
.blog-card-body h3 a { color: var(--charcoal); transition: color 0.3s var(--ease); }
.blog-card-body h3 a:hover { color: var(--crimson); }
.blog-card-body p { font-size: 0.9rem; color: var(--text-muted-custom); line-height: 1.6; flex: 1; margin-bottom: 1rem; }

/* ---- Single post ---- */
.blog-single { padding: 3.2rem 0 1rem; }
.blog-single-head h1 {
    font-family: var(--font-heading); font-weight: 800; color: var(--charcoal);
    font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15;
    letter-spacing: -0.025em; margin: 0.9rem 0 1rem; max-width: 60rem;
}
.blog-single-hero { margin: 1.8rem 0 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--cream-dark); }
.blog-single-hero img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.blog-single-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.6rem; align-items: start; margin-top: 2.4rem;
}

/* ---- Article typography ---- */
.blog-single-content { min-width: 0; }
.blog-deck { font-size: 1.08rem; color: var(--charcoal); }
.blog-single-content p { color: #3A3A3C; font-size: 1rem; line-height: 1.75; margin-bottom: 1.15rem; }
.blog-single-content h2 {
    font-family: var(--font-heading); font-weight: 800; color: var(--charcoal);
    font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25;
    margin: 2.2rem 0 0.9rem; scroll-margin-top: 110px;
}
.blog-single-content h3 {
    font-family: var(--font-heading); font-weight: 700; color: var(--charcoal);
    font-size: 1.17rem; margin: 1.7rem 0 0.7rem; scroll-margin-top: 110px;
}
.blog-single-content ul, .blog-single-content ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.blog-single-content li { color: #3A3A3C; line-height: 1.7; margin-bottom: 0.45rem; }
.blog-single-content a { color: var(--crimson); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.blog-single-content a:hover { color: var(--crimson-light); }
.blog-single-content blockquote {
    background: var(--crimson-pale); border-left: 4px solid var(--crimson);
    border-radius: 0 12px 12px 0; padding: 1rem 1.3rem; margin: 1.4rem 0;
    color: var(--charcoal); font-size: 0.97rem; line-height: 1.65;
}
.blog-single-content blockquote p:last-child { margin-bottom: 0; }
.blog-single-content table {
    width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.9rem;
    border: 1px solid var(--cream-dark);
}
.blog-single-content th {
    background: var(--charcoal); color: var(--cream-letter); text-align: left;
    font-family: var(--font-display); font-weight: 600; padding: 0.75rem 0.9rem;
}
.blog-single-content td { padding: 0.75rem 0.9rem; border-top: 1px solid var(--cream-dark); color: #3A3A3C; line-height: 1.55; vertical-align: top; }
.blog-single-content tr:nth-child(even) td { background: var(--cream); }
.blog-table-wrap { overflow-x: auto; }

/* ---- Sidebar ---- */
.blog-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.2rem; }
.blog-side-card {
    background: var(--white); border: 1px solid var(--cream-dark);
    border-radius: 16px; padding: 1.3rem 1.4rem;
}
.blog-side-label {
    display: block; font-family: var(--font-display); font-size: 0.72rem;
    font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--crimson); margin-bottom: 0.8rem;
}
.blog-share { list-style: none; display: flex; gap: 0.55rem; margin: 0; padding: 0; }
.share-btn {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--crimson-pale); color: var(--crimson); font-size: 0.95rem;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.share-btn:hover { background: var(--crimson); color: #fff; transform: translateY(-3px); }
.blog-toc-list { list-style: none; margin: 0; padding: 0; }
.blog-toc-list li + li { margin-top: 0.15rem; }
.blog-toc-list a {
    display: block; padding: 0.45rem 0.7rem; border-radius: 8px;
    font-family: var(--font-display); font-size: 0.85rem; line-height: 1.4;
    color: var(--text-muted-custom); transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.blog-toc-list a:hover { color: var(--crimson); background: var(--cream); }
.blog-toc-list a.active { color: var(--crimson); background: var(--crimson-pale); font-weight: 600; }
.blog-side-cta { background: var(--charcoal); border-color: var(--charcoal); }
.blog-side-cta .blog-side-label { color: var(--gold); }
.blog-side-cta h4 { font-family: var(--font-heading); color: var(--cream-letter); font-size: 1.12rem; line-height: 1.35; margin-bottom: 0.5rem; }
.blog-side-cta p { color: var(--silver); font-size: 0.86rem; line-height: 1.6; margin-bottom: 1rem; }

/* ---- Post FAQ ---- */
.blog-faqs { margin-top: 3rem; }
.blog-faqs .faq-accordion { max-width: none; }

/* ---- Author box ---- */
.blog-author { margin-top: 3rem; }
.blog-author-card {
    display: flex; gap: 1.4rem; align-items: flex-start;
    background: var(--cream); border: 1px solid var(--cream-dark);
    border-radius: 16px; padding: 1.6rem 1.7rem;
}
.blog-author-avatar {
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
    background: var(--grad-crimson); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
}
.blog-author-eyebrow {
    font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--crimson);
}
.blog-author-name { font-family: var(--font-heading); font-size: 1.2rem; color: var(--charcoal); margin: 0.25rem 0 0.45rem; }
.blog-author-desc { color: var(--text-muted-custom); font-size: 0.92rem; line-height: 1.65; margin: 0; }

/* ---- Keep reading strip ---- */
.blog-recent { background: var(--cream); }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .blog-featured-card { grid-template-columns: 1fr; }
    .blog-featured-media { min-height: 240px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-single-grid { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-side-toc { display: none; }
}
@media (max-width: 575.98px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured-body { padding: 1.6rem 1.5rem; }
    .blog-author-card { flex-direction: column; }
}

/* ==================================================================
   41. THANK YOU PAGE
   ================================================================== */
#thank-you { background: var(--cream); }
.ty-card {
    max-width: 760px; margin: 0 auto; background: var(--white);
    border: 1px solid var(--cream-dark); border-radius: 24px;
    padding: 3.5rem 2.5rem 2.8rem;
}
.ty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--crimson-pale); color: var(--crimson);
    font-size: 2.6rem; margin-bottom: 1.4rem;
}
.ty-card .sp-cta-btns { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 1.6rem; }
.ty-note { margin: 1.8rem 0 0; font-size: 0.9rem; color: var(--text-muted-custom); }
.ty-note a { color: var(--crimson); font-weight: 600; }