/*
Theme Name:  Prints24x7
Theme URI:   https://prints24x7.com
Author:      Digital Fixaters
Author URI:  https://digitalfixaters.com
Description: Prints24x7 — B2B Print Platform. Built per SOW-DF-P24X7-001 design brief.
Version:     6.7.0
Requires at least: 6.0
Requires PHP: 7.4
License:     Private
Text Domain: prints24x7
*/

/* ══════════════════════════════════════════════════════════════
   GOOGLE FONTS — Brief mandated: Playfair Display + Plus Jakarta Sans + Inter
   NO Poppins. NO Rajdhani. NO Syne. Brief explicit on this.
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Per brief §2 & §3. Non-negotiable.
══════════════════════════════════════════════════════════════ */
:root {
  /* The 4 UI colours — logo already contributes 5, UI adds exactly 4 more */
  --ivory:       #FAF8F2;   /* BASE — all page backgrounds, nav, hero, sections */
  --navy:        #1E293B;   /* BUTTONS & FOOTER ONLY — not backgrounds, not headings */
  --crimson:     #C0392B;   /* ACCENT — italic text inside headlines ONLY */
  --near-black:  #231F20;   /* TEXT — all headings & body. Warm black from logo K channel */
  --gold:        #C9A84C;   /* TERTIARY — 1px dividers, eyebrow labels, badge borders ONLY */

  /* Supporting tones derived from the 4 */
  --ivory-dark:  #F0EDE4;   /* Card backgrounds — slightly deeper ivory */
  --ivory-border:#E8E3D9;   /* Subtle borders — ivory family */
  --ink-slate:   #64748B;   /* Body copy — Inter body text colour per brief */
  --navy-ghost:  rgba(30,41,59,0.08); /* Ghost button/hover states */

  /* Professional subdomain accents — brief §7 */
  --advocate-crimson: #9B2335;  /* adv. subdomain */
  --ca-teal:          #005B4F;  /* ca. subdomain — ICAI colour */
  --doctor-blue:      #0369A1;  /* doc. subdomain — deferred but defined */

  /* Typography — brief §3 */
  --font-display: 'Playfair Display', Georgia, serif;  /* Headlines, section titles */
  --font-ui:      'Plus Jakarta Sans', sans-serif;     /* Nav, CTAs, labels, badges */
  --font-body:    'Inter', sans-serif;                 /* Body copy, descriptions */

  /* Spacing */
  --space-xs:  4px;  --space-sm: 8px;   --space-md: 16px;
  --space-lg:  24px; --space-xl: 40px;  --space-2xl: 64px;
  --space-3xl: 96px; --space-4xl:128px;

  /* Layout */
  --max-w:      1200px;
  --nav-h:      72px;
  --topbar-h:   38px;                              /* utility bar above main nav */
  --header-total-h: calc(var(--nav-h) + var(--topbar-h)); /* fixed-header offset used site-wide */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-card:16px;

  /* Transitions */
  --ease:  cubic-bezier(.22,1,.36,1);
  --fast:  .18s;
  --mid:   .28s;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(35,31,32,.06), 0 1px 3px rgba(35,31,32,.04);
  --shadow-hover:0 8px 32px rgba(35,31,32,.10), 0 2px 8px rgba(35,31,32,.06);
  --shadow-btn:  0 4px 14px rgba(30,41,59,.20);
}

/* ══════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* body alone isn't reliable — some mobile browsers treat html as the actual scrolling root, not body, so a body-only rule doesn't always stop sideways scroll */
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--near-black);
  background: var(--ivory); /* ALWAYS ivory — brief §2 */
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
@media (max-width: 768px) { .container { padding: 0 var(--space-lg); } }

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM — Brief §3 exactly
══════════════════════════════════════════════════════════════ */

/* H1 — Playfair Display, 48–64px per brief */
.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--near-black);
}

/* H2 — Playfair Display, 32–40px per brief */
.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--near-black);
}

/* H3 */
.t-h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--near-black);
}

/* Eyebrow label — brief §3: Inter 500, 11px, 0.2em letter-spacing, Gold */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

/* Body — brief §3: Inter 16px, line-height 1.65, ink-slate */
.t-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-slate);
}

/* Crimson italic accent — for ONE word inside headlines per brief */
.t-crimson-italic {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--crimson);
}

/* Gold rule divider — 1px, brief §5.1 */
.gold-rule {
  width: 100%;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
  border: none;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — Brief §2: Navy for primary CTA, sentence case
══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  transition: all var(--mid) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

/* Primary — Deep Navy per brief. Sentence case. */
.btn-navy {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-navy:hover {
  background: #263548;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(30,41,59,.28);
}

/* Ghost secondary */
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-ghost:hover {
  background: var(--navy-ghost);
}

/* Small text link CTA */
.btn-link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--fast) var(--ease);
}
.btn-link:hover { gap: 10px; }
.btn-link::after { content: '→'; }

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ══════════════════════════════════════════════════════════════
   NAVIGATION — Brief §6 §1: ALWAYS white/ivory. Logo must breathe.
   Max 5 items. One CTA button.
══════════════════════════════════════════════════════════════ */
/* Header and footer content go edge-to-edge instead of capping at the
   sitewide 1200px .container — scoped to just these two (not the base
   .container class itself, which every other page/section still relies
   on) so nothing else on the site is affected. Padding from .container
   itself (var(--space-xl) each side) still keeps content off the
   viewport edge. */
.site-header .container,
.site-footer .container {
  max-width: 100%;
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--ivory); /* IRON RULE — never dark per brief */
  border-bottom: 1px solid var(--ivory-border);
  transition: box-shadow var(--mid) var(--ease);
}
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(35,31,32,.08);
}

/* WordPress admin bar fix — when logged into wp-admin, WP adds an
   `admin-bar` class to <body> and shows a 32px (46px on small screens)
   fixed bar at the very top of the viewport. Our header is ALSO fixed
   at top:0, so without this it renders underneath/behind the admin bar
   — which reads as the top bar's colour having changed (it's really
   the dark admin bar showing through/over it) and can throw off the
   mega-menu's vertical alignment. This pushes our header below it.
   Logged-out visitors never see this — it's editor-only. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Top utility bar — hours, phone, email, order portal. Sits above the
   main nav row, inside the same fixed header block (see --topbar-h). */
.top-bar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ivory-border);
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-slate);
}
.top-bar a { color: var(--ink-slate); text-decoration: none; transition: color var(--fast) var(--ease); }
.top-bar a:hover { color: var(--near-black); }
.top-bar .tb-sep { opacity: .4; margin: 0 10px; }
.top-bar .tb-left, .top-bar .tb-right { display: flex; align-items: center; white-space: nowrap; }
.top-bar .tb-right .tb-order { color: var(--gold-deep, var(--gold)); font-weight: 600; }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  height: var(--nav-h);
}

/* Logo — 24px padding each side per brief */
.site-logo {
  flex-shrink: 0;
  padding: 0 var(--space-lg);
  margin-left: -var(--space-lg);
  display: flex;
  align-items: center;
}
.site-logo img { height: 40px; width: auto; }
/* Logo fallback text */
.logo-text {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 800;
  color: var(--near-black);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.3px;
}
.logo-mark {
  color: var(--crimson);
  font-family: var(--font-display);
  font-style: italic;
}

/* Nav — max 5 items per brief */
.primary-nav { flex: 1; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-list a {
  position: relative;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--fast) var(--ease);
  opacity: 0.7;
}
.nav-list a:hover { opacity: 1; background: var(--ivory-dark); }
.nav-list .current-menu-item a { opacity: 1; }
/* Small underline accent on hover — a bit more premium than the flat
   background swap alone now that the header has more room to breathe. */
.nav-list a::before {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.nav-list a:hover::before { transform: scaleX(1); }

/* Nav dropdown */
.nav-list .has-dropdown { position: relative; }
.nav-list .has-dropdown > a::after {
  content: ' ▾';
  font-size: 9px;
  opacity: 0.6;
}
.nav-list .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: var(--radius-md);
  padding: 8px;
  padding-top: 14px;
  margin-top: -6px;
  min-width: 210px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  transform: translateX(-50%) translateY(4px);
}
.nav-list .has-dropdown:hover .dropdown,
.nav-list .has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-list .dropdown li a {
  display: block;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  opacity: 0.75;
}
.nav-list .dropdown li a:hover { opacity: 1; background: var(--ivory); }

/* Mega dropdown — WORK / MADE FOR YOU / ORDER A PRINT. A compact card
   anchored directly under the hovered nav item, sized to its own
   content — not a viewport-wide bar with the content floating centred
   in a sea of empty margin either side (that was .has-mega's own
   position:static trick, which made .mega's left:0/right:0 resolve
   against the whole nav bar instead of this one item). */
.nav-list .has-mega { position: relative; }
.nav-list .mega {
  position: absolute;
  top: 100%; left: 0;
  width: max-content;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 20px 24px;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.nav-list .has-mega:hover .mega,
.nav-list .has-mega:focus-within .mega,
.nav-list .has-mega.mega-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mega-inner { max-width: none; margin: 0; padding: 0; display: block; }
.mega-inner.mega-single { max-width: none; }
.mega-col-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep, var(--gold));
  margin-bottom: 16px;
}
.mega-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.mega-items.mega-items--single-col { grid-template-columns: 1fr; }
.mega-item {
  display: block;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--fast) var(--ease);
}
.mega-item:hover { background: var(--ivory); }
.mega-item-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 3px;
  opacity: 1;
}
.mega-item-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-slate);
}
.mega-pro-list { display: flex; flex-direction: column; gap: 2px; }

/* Order a Print — single CTA-style mega item */
.mega-cta-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--ivory-dark);
  border: 1px solid var(--ivory-border);
  transition: background var(--fast) var(--ease);
}
.mega-cta-item:hover { background: var(--ivory); }
.mega-cta-item .mega-item-title { font-size: 15px; }

/* Groups cart + CTA + hamburger so they share one gap instead of each
   picking up .header-inner's own (wide, nav-item-sized) gap — see the
   comment in inc/header.php next to this markup. */
.header-actions { display: flex; align-items: center; gap: var(--space-xl); flex-shrink: 0; }
.header-cta { flex-shrink: 0; }

.header-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--near-black);
  flex-shrink: 0;
  transition: color var(--fast) var(--ease);
}
.header-cart-link:hover { color: var(--navy); }
.header-cart-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--crimson);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
}

/* Mobile toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px; /* matches .header-cart-link's 40x40 box so the two sit at the same visual size/baseline next to each other */
  padding: 0 6px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--fast);
  flex-shrink: 0;
}
.mobile-toggle:hover { background: var(--ivory-dark); }
.mobile-toggle span {
  display: block;
  height: 2px;
  background: var(--near-black);
  border-radius: 2px;
  transition: all var(--mid) var(--ease);
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-total-h) 0 0 0;
  background: var(--ivory);
  z-index: 999;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--mid) var(--ease);
}
.mobile-nav.open { transform: none; }
.mobile-nav-inner { padding: var(--space-lg); }
.mobile-nav-list li a {
  display: block;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--near-black);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--ivory-border);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--crimson);
  z-index: 1001;
  width: 0;
  transition: width .1s linear;
}

/* ══════════════════════════════════════════════════════════════
   HERO — Brief §6 §2:
   Two-column: text LEFT, product photo RIGHT.
   Left-aligned (not centred — brief explicit).
   Trust stats inline below text.
   ONE primary CTA (navy) + ghost secondary.
   Background: IVORY.
══════════════════════════════════════════════════════════════ */
.hero {
  background: var(--ivory);
  padding: calc(var(--header-total-h) + 80px) 0 80px;
  position: relative;
  overflow: hidden;
}

/* Subtle grain texture */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content { /* Left column — text, left-aligned per brief */ }

.hero-eyebrow {
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.hero-eyebrow-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-eyebrow-rule {
  flex: 1;
  max-width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.hero-heading {
  margin-bottom: var(--space-lg);
}

/* Trust stats — INLINE below text per brief, NOT separate section */
.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--ivory-border);
}
.hero-trust-item { }
.hero-trust-num {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 800;
  color: var(--near-black);
  line-height: 1;
  margin-bottom: 3px;
}
.hero-trust-label {
  font-size: 12px;
  color: var(--ink-slate);
}
.hero-trust-div {
  width: 1px;
  height: 32px;
  background: var(--ivory-border);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

/* Right column — product photography */
.hero-visual {
  position: relative;
}
.hero-photo-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ivory-dark);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Photo placeholder — remove when real photography added */
.hero-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  color: var(--ink-slate);
  padding: var(--space-2xl);
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: linear-gradient(135deg, #f0ede4, #e8e4da);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--ivory-border);
}
.hero-photo-placeholder .ph-icon {
  font-size: 48px;
  opacity: 0.4;
}
.hero-photo-placeholder .ph-text {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-slate);
  opacity: 0.7;
  line-height: 1.5;
}

/* Gold hairline divider between sections */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: 0.3;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   B2B VERTICALS — Brief §6 §3:
   3 cards. Gold LEFT-BORDER. Ivory background. No emoji icons.
   Product sub-categories listed underneath.
══════════════════════════════════════════════════════════════ */
.verticals-section {
  background: var(--ivory);
  padding: var(--space-3xl) 0;
}

.section-header {
  margin-bottom: var(--space-2xl);
}
.section-header.text-left { text-align: left; }
.section-header.text-centre { text-align: center; }
.section-header .t-eyebrow { margin-bottom: var(--space-md); }
.section-header .t-h2 { margin-bottom: var(--space-md); }
.section-header p {
  font-size: 16px;
  color: var(--ink-slate);
  line-height: 1.65;
  max-width: 560px;
}
.section-header.text-centre p { margin: 0 auto; }

.verticals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.vertical-card {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-left: 3px solid var(--gold); /* Gold left-border per brief */
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-xl) var(--space-xl) var(--space-xl) calc(var(--space-xl) - 3px);
  transition: all var(--mid) var(--ease);
  box-shadow: var(--shadow-card);
}
.vertical-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-left-color: var(--crimson);
}

.vc-number {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
  display: block;
}
.vc-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
.vc-desc {
  font-size: 14px;
  color: var(--ink-slate);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}
.vc-products {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-lg);
}
.vc-product {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--near-black);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.75;
}
.vc-product::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   ORDERING PORTAL TEASER — Brief §6 §4:
   CONTAINED card. Navy background ONLY here (not full section).
   "Upload. Configure. Track." One CTA.
══════════════════════════════════════════════════════════════ */
.portal-section {
  background: var(--ivory);
  padding: var(--space-3xl) 0;
}
.portal-card {
  background: var(--navy); /* Navy OK here as contained card per brief */
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-3xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.portal-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
}
.portal-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,76,.7);
  display: block;
  margin-bottom: var(--space-md);
}
.portal-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: var(--space-md);
}
.portal-steps {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
.portal-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}
.portal-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Crimson button — brief §6 §4 specifies crimson for portal CTA specifically */
.btn-crimson {
  background: var(--crimson);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all var(--mid) var(--ease);
  flex-shrink: 0;
}
.btn-crimson:hover {
  background: #a93226;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   PROFESSIONAL SUITES — Brief §6 §5:
   3 subdomain cards. Brief-specified accent colours for borders.
   adv = crimson, ca = ICAI teal, doc = clinical blue.
══════════════════════════════════════════════════════════════ */
.suites-section {
  background: var(--ivory-dark);
  padding: var(--space-3xl) 0;
}
.suites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.suite-card {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  transition: all var(--mid) var(--ease);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.suite-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--gold));
}
.suite-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.suite-card--advocate { --card-accent: var(--advocate-crimson); }
.suite-card--ca       { --card-accent: var(--ca-teal); }
.suite-card--doctor   { --card-accent: var(--doctor-blue); }

.suite-subdomain {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--card-accent, var(--gold));
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  display: block;
}
.suite-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
.suite-desc {
  font-size: 13px;
  color: var(--ink-slate);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}
.suite-products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-lg);
}
.suite-product-tag {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--ivory);
  color: var(--near-black);
  opacity: 0.8;
  border: 1px solid var(--ivory-border);
}
.suite-link {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--card-accent, var(--navy));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--fast) var(--ease);
}
.suite-link:hover { gap: 10px; }
.suite-link::after { content: '→'; }
.suite-card--doctor .suite-link,
.suite-card--doctor .suite-subdomain {
  opacity: 0.5;
}
.suite-deferred-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--ivory-dark);
  border: 1px solid var(--ivory-border);
  border-radius: 100px;
  color: var(--ink-slate);
  margin-left: 8px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   SOCIAL PROOF — Brief §6 §6: Minimal. 3 quotes max or logo strip.
══════════════════════════════════════════════════════════════ */
.proof-section {
  background: var(--ivory);
  padding: var(--space-3xl) 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.proof-card {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
}
.proof-quote {
  /* Brief §6 §6: "sans-serif, ink slate" — NOT Playfair Display */
  font-family: var(--font-body);
  font-size: 15px;
  font-style: normal;
  color: var(--ink-slate);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}
.proof-author {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--near-black);
}
.proof-role {
  font-size: 12px;
  color: var(--ink-slate);
  margin-top: 2px;
}
.proof-gold-mark {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--space-md);
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — Brief §6 §7: Dark navy footer acceptable here.
══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--navy);
}
.footer-main {
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--space-2xl);
}
.footer-grid--5 { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: var(--space-xl); }
.footer-brand-name {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-md);
}
.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}
.footer-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
  transition: color var(--fast);
}
.footer-contact a:hover { color: #fff; }
.footer-gstin {
  margin-top: var(--space-lg);
  font-size: 11px;
  color: rgba(255,255,255,.3);
  font-family: var(--font-body);
}
.footer-col-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: var(--space-lg);
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  transition: color var(--fast);
}
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--space-lg) 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.3);
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-bottom-links a { color: rgba(255,255,255,.5); text-decoration: none; transition: color var(--fast); }
.footer-bottom-links a:hover { color: #fff; }
.footer-bottom-links .tb-sep { opacity: .35; margin: 0 2px; }

/* Sticky floating WhatsApp button — bottom-right, every page */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }

/* ══════════════════════════════════════════════════════════════
   INNER PAGES — About, Service pages, Contact
══════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--ivory);
  padding: calc(var(--header-total-h) + 64px) 0 64px;
  border-bottom: 1px solid var(--ivory-border);
}
.page-hero .t-eyebrow { margin-bottom: var(--space-md); }
.page-hero .t-h1 { margin-bottom: var(--space-md); max-width: 640px; }
.page-hero p { max-width: 560px; color: var(--ink-slate); font-size: 16px; line-height: 1.65; }
.page-body { padding: var(--space-3xl) 0; background: var(--ivory); }
.page-body .container { max-width: 860px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .footer-grid--5 { grid-template-columns: 1fr 1fr 1fr; }
  .verticals-grid, .suites-grid, .proof-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .portal-card { grid-template-columns: 1fr; text-align: left; }
  .portal-steps { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .mobile-toggle { display: flex; }
  .mobile-nav { display: block; }
  /* With .primary-nav gone, nothing has flex:1 left to push the cart/
     hamburger cluster to the right — space-between does that job instead.
     The cluster's own internal gap also drops from the wide desktop
     nav-item spacing to a tight icon-pair gap. */
  .header-inner { justify-content: space-between; }
  .header-actions { gap: var(--space-sm); }
  /* Utility bar drops off on mobile — nav row becomes the whole fixed header */
  .top-bar { display: none; }
  :root { --header-total-h: var(--nav-h); }
  .verticals-grid, .suites-grid, .proof-grid { max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid--5 { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
  .footer-bottom-links { justify-content: center; text-align: center; }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-trust { flex-wrap: wrap; gap: var(--space-md); }
}

/* ── Portal CTA wrap ── */
.portal-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.portal-content { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   WAVE PATTERN — From client's Calendar Box PDF
   Used as subtle background texture in key sections.
   The flowing blue wave lines give a premium, editorial feel.
══════════════════════════════════════════════════════════════ */

/* Wave corner — top-left corner radiating lines (page 1 of PDF) */
.wave-corner-bg {
  position: relative;
  overflow: hidden;
}
.wave-corner-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 480px; height: 380px;
  background: url('/assets/images/wave-corner.png') no-repeat top left;
  background-size: contain;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.wave-corner-bg > * { position: relative; z-index: 1; }

/* Wave full — flowing wave across whole section (page 2 of PDF) */
.wave-full-bg {
  position: relative;
  overflow: hidden;
}
.wave-full-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/wave-full.png') no-repeat center center;
  background-size: cover;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.wave-full-bg > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   FOOTER — CLIENT REQUEST: Different colour footer
   Changed from navy #1E293B to warm near-black #1A1208
   A rich warm dark tone — like aged parchment turned dark.
   Still passes brief §6§7 "dark footer acceptable" and the
   B2B trust test (boardroom feel, not cold tech).
══════════════════════════════════════════════════════════════ */
.site-footer {
  background: #1A1208; /* Warm dark — different from navy, still premium */
}
.footer-bottom {
  border-top: 1px solid rgba(201,168,76,.15); /* Gold tint instead of white */
  background: rgba(0,0,0,.25);
}

/* ── Inner pages ── */
.page-hero {
  background: var(--ivory);
  padding: calc(var(--header-total-h) + 64px) 0 64px;
  border-bottom: 1px solid var(--ivory-border);
}
.page-hero .container { max-width: 860px; }
.page-body {
  padding: var(--space-3xl) 0;
  background: var(--ivory);
}
.page-body .container { max-width: 860px; }

/* ── Product page feature grid ── */
.product-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.product-feature {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 24px;
}
.product-feature h4 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 8px;
}
.product-feature p {
  font-size: 13px;
  color: var(--ink-slate);
  line-height: 1.6;
}

/* ── About page ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  margin-bottom: var(--space-3xl);
}
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.value-card {
  background: var(--ivory-dark);
  border-radius: var(--radius-md);
  padding: 20px;
  border-left: 3px solid var(--gold);
}
.value-card h4 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 6px;
}
.value-card p { font-size: 12px; color: var(--ink-slate); line-height: 1.55; }

/* ── Contact page ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-3xl);
  max-width: 1100px;
  margin: 0 auto;
}
.contact-form-wrap { }
.contact-info-card {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.contact-info-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ivory-border);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--ivory-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--near-black);
}
.contact-info-label {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-slate); margin-bottom: 3px;
}
.contact-info-value {
  font-size: 14px; color: var(--near-black); font-weight: 500;
}

/* ── Form styles ── */
.p24-form-group { margin-bottom: 18px; }
.p24-form-group label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--near-black); margin-bottom: 6px;
}
.p24-form-input, .p24-form-textarea, .p24-form-select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--ivory-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px;
  color: var(--near-black); background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.p24-form-input:focus, .p24-form-textarea:focus, .p24-form-select:focus {
  border-color: var(--near-black);
  box-shadow: 0 0 0 3px rgba(35,31,32,.06);
}
.p24-form-textarea { resize: vertical; min-height: 120px; }
.p24-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Testimonials ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s;
}
.testimonial-card:hover { box-shadow: var(--shadow-hover); }
.testimonial-stars {
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.testimonial-text {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.7;
  color: var(--ink-slate); margin-bottom: 20px;
}
.testimonial-author {
  display: flex; align-items: center; gap: 12px;
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ivory-dark);
  border: 2px solid var(--ivory-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  color: var(--near-black); flex-shrink: 0;
}
.testimonial-name {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  color: var(--near-black);
}
.testimonial-role { font-size: 12px; color: var(--ink-slate); }

@media (max-width: 768px) {
  .about-grid, .contact-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .product-features, .about-values, .p24-form-row { grid-template-columns: 1fr; }
  .wave-corner-bg::before { width: 240px; height: 190px; }
}

/* ══════════════════════════════════════════════════════════════
   V5 HOMEPAGE — approved partner/vendor design, client copy
   Changes per client review (July 2026):
   1. Eyebrows on IVORY sections sit on a translucent Deep Navy chip
      so the gold reads clearly. Navy sections keep bare gold eyebrows.
   2. Vendor/Partner white comparison board removed — replaced by the
      typographic ledger inside the hero (client HERO copy).
   All classes namespaced hm- to avoid collisions with earlier sections.
══════════════════════════════════════════════════════════════ */

/* — Eyebrow chip: translucent Deep Navy behind gold (ivory sections) — */
.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(30, 41, 59, .92);   /* Deep Navy, translucent */
  padding: 8px 16px;
  border-radius: 3px;
}
.hm-eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--gold);
  flex: none;
}
/* On navy sections the chip is unnecessary — bare gold, as approved */
.hm-eyebrow--dark {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* — Shared type — */
.hm-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--crimson);
}
.hm-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--near-black);
  margin: 30px 0 0;
}
.hm-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--near-black);
  margin: 20px 0 0;
}
.hm-h2 em { font-family: var(--font-display); font-style: italic; }
.hm-h2--light { color: #fff; }
.hm-h2--light em { color: var(--gold); }
.hm-sub {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink-slate);
  margin-top: 16px;
}
.hm-link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9rem;
  color: var(--near-black);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
  transition: color var(--fast) var(--ease);
  align-self: flex-start;
}
.hm-link:hover { color: var(--crimson); }

/* Full-width homepage — client feedback: extends the widening
   validated on "Why clients stay" (was previously scoped to just
   that section) to every homepage section. Text-heavy sections
   (hero, "how we're different", quote, CTA band) already cap their
   own inner content width independently — .hm-hero-inner (880px),
   .hm-different-body (700px), .hm-quote-inner (820px), .hm-band-
   inner (680px) — so widening the outer .container only gives them
   more symmetric breathing room either side, no readability
   regression. The three card grids (proof strip, verticals, trust)
   have no such inner cap and directly gain room, same improvement
   already seen on the "Why clients stay" grid. Scoped to homepage
   section wrappers only — the sitewide .container class itself
   (every other page template, header, footer) is untouched. */
.hm-hero .container,
.hm-proof .container,
.hm-sec .container {
  max-width: 1560px;
}

/* — HERO — */
.hm-hero {
  background: var(--ivory);
  padding: calc(var(--header-total-h) + 84px) 0 80px;
}
/* Two columns on desktop — copy on the left, the illustration on the
   right (client-supplied graphic, purely decorative — see the empty
   alt/aria-hidden on the <img> in index.php, the copy already carries
   the meaning). .hm-hero-text keeps the old 880px reading width so the
   copy doesn't stretch wider just because the row itself grew; the grid
   column for the visual is auto-sized to the image instead of forced
   1fr, so it doesn't crowd the text on narrower desktop widths. */
.hm-hero-inner {
  display: grid;
  /* No max-width of its own — it fills the shared .hm-hero .container
     (1560px, see the "Full-width homepage" rule above) exactly like
     .hm-different-grid does, so the two sections' right-aligned images
     land on the same right edge instead of two different container
     widths fighting each other. 1fr on the first column (not a fixed
     cap) is the same fix as .hm-different-grid's, for the same reason:
     without it, the grid doesn't stretch to fill that full width and
     packs against the left edge instead. */
  grid-template-columns: minmax(0, 1fr) minmax(380px, 620px);
  align-items: end;
  gap: 24px;
}
.hm-hero-text { max-width: 760px; padding-bottom: 4px; }
.hm-hero-visual { justify-self: end; position: relative; }
.hm-hero-visual img { width: 100%; height: auto; display: block; position: relative; }
/* Soft grounding glow behind the illustration — matches the client's
   own reference mockup for this banner (large character/product group,
   tight negative space, soft radial shadow beneath it), not a real
   drop-shadow since the artwork's edge is irregular. */
.hm-hero-visual::before {
  content: "";
  position: absolute;
  inset: -6% -12% -6% -16%;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, var(--ivory-dark) 0%, rgba(240,237,228,0) 72%);
  z-index: 0;
}
.hm-struck {
  position: relative;
  color: var(--ink-slate);
  font-style: italic;
  font-weight: 400;
}
.hm-struck::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 54%;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  animation: hm-strike .7s 1s forwards;
}
@keyframes hm-strike { to { transform: scaleX(1); } }

/* Hero subhead — was a 5-row ledger; client kept only the first line
   (Aug 2026 round 2), so this is now one flowing sentence. */
.hm-hero-sub {
  max-width: 640px;
  margin: 28px 0 40px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
}
.hm-lv { color: var(--ink-slate); }
.hm-lp { color: var(--near-black); font-weight: 500; }

.hm-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hm-actions--center { justify-content: center; }

/* — PROOF STRIP — */
.hm-proof {
  background: var(--ivory-dark);
  border-top: 1px solid var(--ivory-border);
  border-bottom: 1px solid var(--ivory-border);
  padding: 30px 0;
}
.hm-proof-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hm-proof-item { display: flex; flex-direction: column; gap: 3px; }
.hm-proof-item .num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--near-black);
}
.hm-proof-item .lbl {
  font-size: .73rem;
  color: var(--ink-slate);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
/* Text-only proof badge (no leading number) — e.g. "Institutional & Corporate" */
.hm-proof-item--text { justify-content: center; }
.hm-proof-item--text .txt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--near-black);
  max-width: 190px;
}

/* — SECTIONS — */
.hm-sec { padding: 96px 0; }
.hm-sec-head { max-width: 700px; margin-bottom: 52px; }

/* — HOW WE'RE DIFFERENT — */
.hm-different { background: var(--ivory); }
/* Text column left, illustration right — same pattern as .hm-hero-inner.
   Scoped to this section's own wrapper, not .container itself, so the
   1560px homepage-wide .hm-sec .container rule above is untouched for
   every other section that reuses it. */
.hm-different-grid {
  display: grid;
  /* First column is flexible (1fr), not a fixed max — otherwise, on a
     wide viewport, the two columns' combined width falls short of the
     section's own (wider) container and the whole grid packs against
     the left edge by default, leaving the image short of the container's
     right edge instead of balancing the text's left edge. The text
     itself still can't stretch past its own max-width (.hm-different-body/
     .hm-sec-head, 700px) so readability is unaffected either way. */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 560px);
  align-items: end;
  gap: 24px;
}
.hm-different .hm-sec-head { margin-bottom: 30px; }
.hm-different-visual { justify-self: end; position: relative; }
.hm-different-visual img { width: 100%; height: auto; display: block; position: relative; }
/* Same grounding glow as .hm-hero-visual — see its comment above. */
.hm-different-visual::before {
  content: "";
  position: absolute;
  inset: -6% -12% -6% -16%;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, var(--ivory-dark) 0%, rgba(240,237,228,0) 72%);
  z-index: 0;
}
.hm-different-body { max-width: 700px; display: flex; flex-direction: column; gap: 4px; }
.hm-different-body p {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-slate);
  margin-bottom: 18px;
}
.hm-different-body .hm-link { margin-top: 6px; }

/* — QUOTE (navy, contained) — */
.hm-quote { background: var(--navy); }
.hm-quote-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hm-quote .hm-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold);
  line-height: .4;
  display: block;
  margin-bottom: 14px;
}
/* Closing mark under the blockquote, mirroring the opening one above it
   — matches the quote visually "closing" instead of only opening. */
.hm-quote .hm-mark--close {
  margin-bottom: 0;
  margin-top: -6px;
}
.hm-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.34;
  color: #fff;
  margin: 0 0 24px;
}
.hm-quote blockquote em { color: var(--gold); }
.hm-quote cite {
  font-style: normal;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200, 208, 218, .55);
}

/* — VERTICALS — */
.hm-verticals { background: var(--ivory); }
.hm-vert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hm-vert-card {
  background: #fff;
  border: 1px solid var(--card-border, rgba(35,31,32,.10));
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.hm-vert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.hm-vert-num {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #A8842F;
  margin-bottom: 16px;
}
.hm-vert-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--near-black);
  margin-bottom: 14px;
}
.hm-vert-card p {
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.62;
  color: var(--ink-slate);
  margin-bottom: 22px;
  flex-grow: 1;
}

/* — COST OF WRONG (navy, contained — approved, unchanged) — */
.hm-cost { background: var(--navy); }
.hm-cost-flex {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.hm-cost .hm-h2--light { margin-bottom: 20px; }
.hm-cost p {
  font-family: var(--font-body);
  color: #c8d0da;
  font-size: 1.03rem;
  line-height: 1.65;
  margin-bottom: 16px;
}
/* 2x2 grid (was a single 4-row vertical stack) — client feedback: the
   stack ran noticeably taller than the left text column, leaving the
   left side visibly empty above/below once the row (align-items:
   center) stretched to match. A 2x2 grid keeps the same content and
   the same thin-gold-divider look (parent bg showing through the 1px
   gap) but roughly halves the column's height. */
.hm-cost-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(201,168,76,.45);
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 6px;
  overflow: hidden;
}
.hm-cost-rows-head { grid-column: 1 / -1; }
.hm-cost-row { background: var(--navy); padding: 16px 20px; }
@media (max-width: 640px) {
  .hm-cost-rows { grid-template-columns: 1fr; }
}
.hm-cost-row .w {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b97a6;
  margin-bottom: 6px;
}
.hm-cost-row .v { font-size: .99rem; line-height: 1.45; color: #fff; }
.hm-cost-row .v b { color: var(--gold); font-weight: 600; }

/* "What clients come to us with." — heading above the row stack */
.hm-cost-rows-head {
  font-family: var(--font-ui);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--navy);
  padding: 16px 24px 12px;
}
/* Wide row variant: label word · row title · description, stacked */
.hm-cost-row--wide .rt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: #fff;
  margin-bottom: 8px;
}
.hm-cost-row--wide .v { color: #c8d0da; font-size: .93rem; }

/* — TRUST — */
.hm-trust { background: var(--ivory); }
.hm-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hm-trust-grid.hm-trust-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hm-trust-card {
  background: #fff;
  border: 1px solid var(--card-border, rgba(35,31,32,.10));
  border-radius: 4px;
  padding: 30px 26px;
}
.hm-trust-card .t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--near-black);
  margin-bottom: 10px;
}
.hm-trust-card .d {
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-slate);
}
.hm-trust-more {
  display: none; /* only shown on mobile, and only by main.js on cards whose text actually overflows */
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
}

/* — SAMPLE BAND (navy, contained) — */
.hm-band { background: var(--navy); text-align: center; }
.hm-band-inner { max-width: 680px; margin: 0 auto; }
.hm-band .hm-eyebrow--dark { justify-content: center; margin-bottom: 22px; }
.hm-band .hm-h2--light { margin-bottom: 20px; }
.hm-band p {
  font-family: var(--font-body);
  color: #c8d0da;
  font-size: 1.06rem;
  line-height: 1.65;
  margin-bottom: 36px;
}
.hm-btn-ghost-d { border: 1px solid rgba(255,255,255,.3); color: #fff; background: transparent; }
.hm-btn-ghost-d:hover { border-color: var(--gold); color: var(--gold); }

/* — Responsive — */
@media (max-width: 900px) {
  .hm-cost-flex { grid-template-columns: 1fr; gap: 36px; }
  .hm-vert-grid { grid-template-columns: 1fr; }
  /* .hm-trust-grid.hm-trust-grid--3 (both classes) is needed here, not
     just .hm-trust-grid alone — the base rule at .hm-trust-grid.hm-trust-grid--3
     (line ~1880) has two classes' worth of specificity and otherwise
     beats this single-class rule at ANY viewport, media query or not,
     which is exactly why the 3-card trust section was staying at 3
     cramped columns on mobile instead of collapsing. */
  .hm-trust-grid, .hm-trust-grid.hm-trust-grid--3 { grid-template-columns: 1fr 1fr; }
  .hm-hero-inner { grid-template-columns: 1fr; }
  .hm-hero-text { max-width: 100%; }
  .hm-hero-visual { justify-self: center; max-width: 480px; margin-top: 8px; }
  .hm-different-grid { grid-template-columns: 1fr; }
  .hm-different-visual { justify-self: center; max-width: 460px; margin-top: 8px; }
}
@media (max-width: 560px) {
  .hm-sec { padding: 72px 0; }
  .hm-hero { padding: calc(var(--header-total-h) + 56px) 0 64px; }
  .hm-trust-grid, .hm-trust-grid.hm-trust-grid--3 { grid-template-columns: 1fr; }
  .hm-actions .btn { width: 100%; justify-content: center; }
  .hm-hero-sub { font-size: 1rem; }
  .hm-lv { display: block; }
  .hm-eyebrow { letter-spacing: .14em; }
  .hm-hero-visual { max-width: 320px; }
  .hm-different-visual { max-width: 300px; }
  /* Card copy length varies a lot (a DPDP Act compliance paragraph next
     to two one-liners) — clamped to 4 lines by default once stacked
     full-width so the three cards read as an even set instead of one
     towering over the other two; main.js adds a "Read more" toggle
     only on cards that actually overflow, and .is-expanded lifts the
     clamp for that card without losing/shortening any of the text. */
  .hm-trust-card .d {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .hm-trust-card.is-expanded .d {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .hm-trust-more { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-struck::after { animation: none; transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════════════
   CORPORATE PRINT SOLUTIONS — click-to-reveal flow (v3, Aug 2026)
   /page-templates/page-corporate-print-solutions.php

   Styled as an actual diary: Screen 1 is the cover (navy, gold foil
   title, ribbon), Screens 2–12 are paper pages (warm ivory-dark tone,
   red margin rule, folded corner), the final CTA is the inside back
   cover (navy again). Reveals are a real 3D page-turn — the outgoing
   screen rotates off its spine edge (rotateY, backface-visibility:
   hidden) rather than just fading. Normal page scroll is back on;
   only the diary itself swaps one page at a time, it doesn't
   accumulate. Every colour below is one of the theme's 5 tokens
   (ivory / navy / crimson / near-black / gold) or an existing derived
   tone — no new hues, just used with more contrast and intent.
   Classes namespaced flow- / fl- to avoid collisions.
══════════════════════════════════════════════════════════════ */

.flow-section {
  background: var(--ivory-dark);
  min-height: calc(100vh - var(--header-total-h));
  padding: calc(var(--header-total-h) + 28px) 0 72px;
  position: relative;
}

/* Ambient drift behind the diary — visible only in the margins around
   the cover/page card, same low-opacity brand-colour blobs as before. */
.flow-section::before,
.flow-section::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .09;
  z-index: 0;
  pointer-events: none;
}
.flow-section::before { background: var(--gold); top: -10%; right: -10%; animation: flow-drift-a 26s ease-in-out infinite alternate; }
.flow-section::after  { background: var(--crimson); bottom: -12%; left: -12%; opacity: .05; animation: flow-drift-b 32s ease-in-out infinite alternate; }
@keyframes flow-drift-a { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-4%,4%) scale(1.08); } }
@keyframes flow-drift-b { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(4%,-3%) scale(1.05); } }

/* — Chrome: Back link + progress bar — */
.flow-chrome {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--space-lg) 18px;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.flow-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--near-black);
  cursor: pointer;
  padding: 6px 2px;
  flex-shrink: 0;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.flow-back:hover { color: var(--crimson); transform: translateX(-2px); }
.flow-back[hidden] { display: none; }
.flow-progress-track { flex: 1; height: 4px; background: var(--ivory-border); border-radius: 2px; overflow: hidden; }
.flow-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--crimson));
  border-radius: 2px;
  transition: width .5s cubic-bezier(.22,.9,.32,1);
}

/* — Stage: 3D space for the page-turn, one screen visible at a time — */
.flow-stage {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-lg);
  min-height: 620px;
  perspective: 2400px;
}
.flow-screen {
  position: absolute;
  inset: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  backface-visibility: hidden;
  padding: clamp(32px, 6vh, 64px) clamp(28px, 7vw, 68px);
  border-radius: 3px;
}
.flow-screen[hidden] { display: none; }
.flow-screen:not(.flow-active):not(.flow-entering):not(.flow-leaving):not(.flow-entering-back) { display: none; }

/* ═══ THE COVER — Screen 1 ═══ */
.flow-screen--cover {
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(155deg, #24334A 0%, var(--navy) 45%, #16202F 100%);
  border: 1px solid rgba(201,168,76,.30);
  box-shadow: 0 30px 70px -24px rgba(15,23,42,.45), inset 0 0 0 1px rgba(201,168,76,.08);
  color: #fff;
  align-items: center;
  text-align: center;
}
.flow-cover-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 12px 8px;
  border-top: 1px solid rgba(201,168,76,.4);
  border-bottom: 1px solid rgba(201,168,76,.4);
}
.flow-cover-frame::before, .flow-cover-frame::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.flow-cover-frame::before { top: -3px; }
.flow-cover-frame::after { bottom: -3px; }
.flow-cover-illustration {
  color: var(--gold);
  margin-top: 16px;
  opacity: 0;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.flow-screen.flow-active .flow-cover-illustration,
.flow-screen.flow-entering .flow-cover-illustration,
.flow-screen.flow-entering-back .flow-cover-illustration {
  animation: flow-rise-in .5s ease forwards;
}
.flow-cover-kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 14px 0 22px;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.flow-screen--cover .fl {
  font-family: var(--font-display);
  color: rgba(255,255,255,.82);
}
.flow-screen--cover .fl.fl-accent {
  color: var(--gold);
  font-style: italic;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 26px rgba(201,168,76,.18);
}
/* Ribbon bookmark — pure CSS, hangs from the top edge */
.flow-cover-ribbon {
  position: absolute;
  top: -2px;
  right: 54px;
  width: 26px;
  height: 92px;
  background: linear-gradient(180deg, var(--crimson), #8f2c20);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  box-shadow: -2px 4px 10px rgba(0,0,0,.25);
  z-index: 2;
}

/* Cover CTA — gold outline, fills gold on hover; deliberately NOT navy
   so it reads clearly against the navy cover (contrast, not vanilla) */
.flow-btn--cover {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  margin-top: 34px;
}
.flow-btn--cover:hover { background: var(--gold); color: var(--navy); }

/* ═══ THE PAGES — Screens 2–12 ═══ */
.flow-screen--page {
  background:
    linear-gradient(90deg, rgba(192,57,43,.14) 0px, rgba(192,57,43,.14) 1px, transparent 1px),
    var(--ivory);
  background-position: 46px 0, 0 0;
  background-repeat: repeat-y, no-repeat;
  border: 1px solid var(--ivory-border);
  box-shadow: 0 22px 50px -22px rgba(35,31,32,.16), 0 2px 8px rgba(35,31,32,.05);
  padding-left: clamp(56px, 10vw, 92px);
}
/* Folded corner — bottom-right, pure CSS */
.flow-screen--page::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, transparent 50%, var(--ivory-dark) 50%);
  box-shadow: -2px -2px 6px rgba(35,31,32,.08);
  border-bottom-right-radius: 3px;
}

/* — Split layout: text left, a conceptual illustration filling the
   right side instead of sitting empty. Opt-in per screen via
   .flow-screen--split (not every page has bespoke art yet). — */
.flow-screen--split {
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.flow-screen--split .flow-page-text { flex: 1 1 54%; min-width: 0; }
/* The narrower column leaves too little room for 2-up short lists —
   they'd wrap mid-phrase. Single column reads cleanly at this width. */
.flow-screen--split .fl-grid { grid-template-columns: 1fr; }
.flow-screen--split .flow-page-illustration {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 0;
}
.flow-screen--split .flow-page-illustration svg { width: 100%; height: auto; max-width: 260px; }
.flow-screen.flow-active .flow-page-illustration,
.flow-screen.flow-entering .flow-page-illustration,
.flow-screen.flow-entering-back .flow-page-illustration {
  animation: flow-rise-in .55s ease forwards;
  animation-delay: .12s;
}
@media (max-width: 760px) {
  .flow-screen--split { flex-direction: column; align-items: flex-start; gap: 20px; }
  .flow-screen--split .flow-page-illustration { order: -1; align-self: center; opacity: 1; animation: none; }
  .flow-screen--split .flow-page-illustration svg { max-width: 160px; }
}

.flow-screen--reconverge {
  background:
    linear-gradient(90deg, rgba(192,57,43,.14) 0px, rgba(192,57,43,.14) 1px, transparent 1px),
    var(--ivory-dark);
  background-position: 46px 0, 0 0;
  background-repeat: repeat-y, no-repeat;
}

/* ═══ THE INSIDE BACK COVER — final CTA ═══ */
.flow-cta {
  background: linear-gradient(155deg, #24334A 0%, var(--navy) 55%, #16202F 100%);
  border: 1px solid rgba(201,168,76,.28);
  box-shadow: 0 30px 70px -24px rgba(15,23,42,.45);
  align-items: center;
  text-align: center;
}

/* ═══ Page-turn transition (3D, hinge at the spine) ═══
   The LEAVING page must render on top while it rotates — that's the
   whole illusion (you watch the current page lift and turn away,
   revealing the next one underneath). Getting this backwards means
   the incoming page just crossfades over static text instead. */
.flow-screen.flow-active   { z-index: 1; }
.flow-screen.flow-entering,
.flow-screen.flow-entering-back { z-index: 2; }
.flow-screen.flow-leaving  { z-index: 3; }

.flow-screen.flow-entering      { transform-origin: 0% 50%;   animation: flow-page-in .75s cubic-bezier(.22,.85,.3,1) forwards; }
.flow-screen.flow-entering-back { transform-origin: 100% 50%; animation: flow-page-in-back .7s cubic-bezier(.22,.85,.3,1) forwards; }
.flow-screen.flow-leaving       { transform-origin: 100% 50%; animation: flow-page-out .55s cubic-bezier(.55,0,.1,1) forwards; }
.flow-screen.flow-leaving.flow-leaving-back { transform-origin: 0% 50%; animation: flow-page-out-back .5s cubic-bezier(.55,0,.1,1) forwards; }

/* A leaving screen must keep showing its already-"printed" content —
   without this, losing .flow-active snaps every line back to its
   pre-animation invisible state and the page flips away blank. */
.flow-screen.flow-leaving .fl,
.flow-screen.flow-leaving .flow-btn,
.flow-screen.flow-leaving .flow-choices,
.flow-screen.flow-leaving .flow-path-tag,
.flow-screen.flow-leaving .flow-cover-illustration,
.flow-screen.flow-leaving .flow-page-illustration,
.flow-screen.flow-leaving .flow-cta-footnote {
  opacity: 1 !important;
  clip-path: inset(0 0% 0 0) !important;
  transform: none !important;
  animation: none !important;
}
.flow-screen.flow-leaving .flow-cta-icon {
  opacity: 1 !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
}

@keyframes flow-page-in {
  0%   { opacity: .4; transform: rotateY(-6deg) scale(.985); }
  100% { opacity: 1;  transform: rotateY(0deg) scale(1); }
}
@keyframes flow-page-in-back {
  0%   { opacity: .4; transform: rotateY(6deg) scale(.985); }
  100% { opacity: 1;  transform: rotateY(0deg) scale(1); }
}
@keyframes flow-page-out {
  0%   { opacity: 1; transform: rotateY(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  35%  { box-shadow: -30px 6px 50px -14px rgba(15,23,42,.4); }
  100% { opacity: 0; transform: rotateY(-135deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
@keyframes flow-page-out-back {
  0%   { opacity: 1; transform: rotateY(0deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  35%  { box-shadow: 30px 6px 50px -14px rgba(15,23,42,.4); }
  100% { opacity: 0; transform: rotateY(135deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* — Lines "print" onto the page: left-to-right wipe — */
.flow-lines { display: flex; flex-direction: column; gap: 8px; }
.fl {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--near-black); /* strong ink — contrast over the muted grey used before */
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}
.flow-screen--cover .flow-lines--big .fl { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.fl.fl-accent { color: var(--crimson); font-weight: 500; }
.fl.fl-space { margin-top: 12px; }
.flow-cta .fl { color: #c8d0da; font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
.flow-cta .fl.fl-accent { color: var(--gold); font-style: italic; font-family: var(--font-display); }

.flow-screen.flow-active .fl,
.flow-screen.flow-entering .fl,
.flow-screen.flow-entering-back .fl {
  animation: flow-print-line .5s cubic-bezier(.3,.6,.25,1) forwards;
}
@keyframes flow-print-line {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  2%   { opacity: 1; }
  100% { clip-path: inset(0 0% 0 0); opacity: 1; }
}
.flow-lines > .fl:nth-child(1), .flow-lines > .fl-grid:nth-child(1) > .fl:nth-child(1) { animation-delay: .10s; }
.flow-lines > .fl:nth-child(2), .flow-lines > .fl-grid:nth-child(1) > .fl:nth-child(2) { animation-delay: .17s; }
.flow-lines > .fl:nth-child(3), .flow-lines > .fl-grid:nth-child(1) > .fl:nth-child(3) { animation-delay: .24s; }
.flow-lines > .fl:nth-child(4), .flow-lines > .fl-grid:nth-child(1) > .fl:nth-child(4) { animation-delay: .31s; }
.flow-lines > .fl:nth-child(5), .flow-lines > .fl-grid:nth-child(1) > .fl:nth-child(5) { animation-delay: .38s; }
.flow-lines > .fl:nth-child(6), .flow-lines > .fl-grid:nth-child(1) > .fl:nth-child(6) { animation-delay: .45s; }
.flow-lines > .fl:nth-child(7) { animation-delay: .52s; }
.flow-lines > .fl:nth-child(8) { animation-delay: .59s; }
.flow-lines > .fl:nth-child(n+9) { animation-delay: .64s; }

/* Two-column list layout — genuine short-item enumerations only (the
   client asked these stop wasting horizontal space as one-per-line). */
.fl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 26px;
}
.fl-grid .fl { margin: 0; }
.fl-grid--space { margin-top: 12px; }
@media (max-width: 560px) {
  .fl-grid { grid-template-columns: 1fr; }
}

/* — Button / choices settle in just after the lines finish — */
.flow-btn { opacity: 0; transform: translateY(10px); margin-top: 30px; }
.flow-screen.flow-active .flow-btn,
.flow-screen.flow-entering .flow-btn,
.flow-screen.flow-entering-back .flow-btn {
  animation: flow-rise-in .45s ease forwards;
  animation-delay: .58s;
}
.flow-btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
@keyframes flow-rise-in { to { opacity: 1; transform: translateY(0); } }

.flow-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(10px);
}
.flow-screen.flow-active .flow-choices,
.flow-screen.flow-entering .flow-choices,
.flow-screen.flow-entering-back .flow-choices {
  animation: flow-rise-in .45s ease forwards;
  animation-delay: .3s;
}
/* Bolder than before: white card, thicker gold spine, stronger hover/select */
.flow-choice {
  text-align: left;
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.flow-choice:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(35,31,32,.2); border-left-color: var(--crimson); }
.flow-choice-title { font-family: var(--font-ui); font-weight: 700; font-size: .98rem; color: var(--near-black); }
.flow-choice--selected { animation: flow-choice-pop .4s var(--ease); border-left-color: var(--crimson); border-left-width: 6px; box-shadow: 0 14px 28px -10px rgba(35,31,32,.22); }
.flow-choice--selected.flow-btn:disabled { opacity: 1; }
.flow-choice--unselected { opacity: .3; transform: scale(.97); pointer-events: none; }
@keyframes flow-choice-pop { 0% { transform: scale(1); } 45% { transform: scale(1.045); } 100% { transform: scale(1); } }

.flow-path-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--crimson);
  padding: 5px 12px;
  border-radius: 3px;
  margin-bottom: 18px;
  opacity: 0;
}
.flow-screen.flow-active .flow-path-tag,
.flow-screen.flow-entering .flow-path-tag,
.flow-screen.flow-entering-back .flow-path-tag {
  animation: flow-rise-in .4s ease forwards;
}

/* — Final CTA (inside back cover) — icon draws in, then copy prints — */
.flow-cta-inner { max-width: 520px; margin: 0 auto; }
.flow-cta-icon {
  color: var(--gold);
  margin-bottom: 20px;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  opacity: 0;
}
.flow-screen.flow-active .flow-cta-icon,
.flow-screen.flow-entering .flow-cta-icon {
  animation: flow-icon-draw 1.1s cubic-bezier(.3,.6,.25,1) forwards .05s;
}
@keyframes flow-icon-draw { 0% { stroke-dashoffset: 140; opacity: 0; } 15% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.flow-cta .flow-btn { margin-top: 24px; }
.flow-cta-footnote { margin-top: 18px; font-family: var(--font-body); font-size: .82rem; color: rgba(200,208,218,.6); opacity: 0; }
.flow-screen.flow-active .flow-cta-footnote,
.flow-screen.flow-entering .flow-cta-footnote {
  animation: flow-rise-in .45s ease forwards;
  animation-delay: 1.05s;
}

/* — Responsive — */
@media (max-width: 900px) { .flow-choices { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .flow-stage { min-height: 560px; perspective: 1400px; }
  .flow-screen { padding: 26px 22px; padding-left: 40px; }
  .flow-screen--page { background-position: 26px 0, 0 0; }
  .flow-cover-ribbon { right: 30px; width: 20px; height: 68px; }
  .flow-section::before, .flow-section::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-screen.flow-entering, .flow-screen.flow-entering-back,
  .flow-screen.flow-leaving, .flow-screen .fl,
  .flow-btn, .flow-choices, .flow-choice--selected, .flow-path-tag, .flow-cover-illustration, .flow-page-illustration, .flow-cta-icon, .flow-cta-footnote {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    stroke-dashoffset: 0 !important;
    box-shadow: revert !important;
  }
  .flow-section::before, .flow-section::after { animation: none; }
}

/* — No-JS fallback: normal scrolling page, everything shown at once — */
.no-js .flow-stage { position: static; perspective: none; min-height: 0; }
.no-js .flow-chrome { display: none; }
.no-js .flow-screen {
  position: static;
  inset: auto;
  display: block !important;
  opacity: 1;
  transform: none;
  box-shadow: none;
  margin-bottom: 24px;
}
.no-js .fl, .no-js .fl-grid .fl { clip-path: none; opacity: 1; }
.no-js .flow-btn, .no-js .flow-choices, .no-js .flow-path-tag, .no-js .flow-cover-illustration, .no-js .flow-page-illustration, .no-js .flow-cta-icon, .no-js .flow-cta-footnote { opacity: 1; animation: none; stroke-dashoffset: 0; }

/* ══════════════════════════════════════════════════════════════
   FLOW — "JOURNAL" REDESIGN (both flow pages)
   v2 (client feedback round, Aug 2026): the bespoke centred "notes
   app" type scale + hand-drawn circle highlight + boxed narrower
   card read as inconsistent with the rest of the site. Retired in
   favour of reusing the SAME classes the homepage itself uses —
   .hm-eyebrow, .hm-sub-equivalent body copy for every line, .fl-
   final (below) for the one emphasized closing line per screen with
   exactly one .hm-accent word inside it, .hm-link for secondary
   "keep going" actions, .hm-vert-card for the persona-pick cards.
   v3 (later feedback round): v2 additionally MOVED that emphasized
   line to lead each card like a headline — wrong, the client's own
   doc always places it LAST, after the setup lines. .fl-final now
   stays in normal document order; only its size (bumped to a 3.5rem
   cap per feedback) and weight set it apart. Full container width,
   left-aligned, no inset "card" box — the aged-paper texture stays
   as the section background. Scoped entirely under .flow-journal.
══════════════════════════════════════════════════════════════ */

.flow-journal .flow-stage { max-width: var(--max-w); min-height: 860px; }
.flow-journal .flow-screen {
  text-align: left;
  align-items: flex-start;
  background: var(--ivory);
  border: none;
  box-shadow: none;
  /* Same padding convention as .container sitewide — no extra inset
     "card" box narrowing the column below the site's own width. */
  padding: clamp(48px, 10vh, 96px) var(--space-xl);
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate; /* contain the texture layer's negative z-index */
}
@media (max-width: 768px) {
  .flow-journal .flow-screen { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}
/* Aged-paper texture — kept per the client's earlier approval; only
   the boxed-card framing and centred type are being retired here,
   not the background itself. */
.flow-journal .flow-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  background-image:
    repeating-linear-gradient(to bottom, rgba(35,31,32,.05) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(178deg, rgba(35,31,32,.032) 0 1px, transparent 1px 9px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.137 0 0 0 0 0.122 0 0 0 0 0.125 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, auto, 220px 220px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 46%, transparent 0%, #000 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 46%, transparent 0%, #000 72%);
}

/* Comfortable reading column, left-aligned within the full-width
   container (same idea as .hm-hero-sub's own max-width) — not
   centred, no auto margins. Split-image screens override to flex:1. */
.flow-journal .journal-inner { max-width: 640px; text-align: left; }

/* Reuses .hm-eyebrow verbatim in markup (navy chip, gold text) — this
   just adds the same fade-in reveal the rest of the flow already has. */
.flow-journal .hm-eyebrow { opacity: 0; margin-bottom: 22px; }
.flow-journal .flow-screen.flow-active .hm-eyebrow,
.flow-journal .flow-screen.flow-entering .hm-eyebrow,
.flow-journal .flow-screen.flow-entering-back .hm-eyebrow {
  animation: flow-rise-in .4s ease forwards;
}
.flow-journal .flow-screen.flow-leaving .hm-eyebrow { opacity: 1 !important; animation: none !important; }
.no-js .flow-journal .hm-eyebrow { opacity: 1; }

.flow-journal .flow-lines { gap: 14px; }
/* The one emphasized line per screen — the client's own doc always
   places this as the LAST line before the button, not a relocated
   "headline" at the top (that was the bug: v5 moved it to lead the
   card, breaking the document's actual reading order). It stays
   exactly where it falls in normal document flow; only its size/
   weight distinguish it, sized to fill the card (bumped from a
   2.5rem cap to 3.5rem per feedback — "big enough to fill the
   space"). Still a plain .fl underneath so it gets the same print-in
   wipe/stagger as every other line, just with this modifier added. */
.flow-journal .fl.fl-final {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.17rem, 3vw, 1.8rem); /* client-set default, Oct 2026 — all three flow pages (was clamp(1.6rem, 3.36vw, 2.4rem)) */
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--near-black);
  margin-top: 10px;
}
/* Playfair Display's italic numeral glyphs (the previous approach
   here) read as an odd slant on a bare digit like "50" — switched to
   the UI sans (Plus Jakarta Sans), upright, bold: a genuinely
   different typeface for the numeral rather than a style tweak on the
   same one, same idea as .hm-proof-item .num elsewhere on the site. */
.flow-journal .fl-final .fl-num {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 800;
}
/* Everything else drops from decorative display type to plain body
   copy — matches .hm-sub / .hm-vert-card p exactly. */
.flow-journal .fl {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-slate);
  clip-path: inset(0 100% 0 0);
}
.flow-journal .flow-screen.flow-active .fl,
.flow-journal .flow-screen.flow-entering .fl,
.flow-journal .flow-screen.flow-entering-back .fl {
  animation: journal-print-line .5s cubic-bezier(.3,.6,.25,1) forwards;
}
@keyframes journal-print-line {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  2%   { opacity: 1; }
  100% { clip-path: inset(0 0% 0 0); opacity: 1; }
}
.flow-journal .flow-screen.flow-leaving .fl {
  clip-path: inset(0 0% 0 0) !important;
}

/* Secondary "keep going" actions — reuses .hm-link verbatim in
   markup (bold underlined text, gold border-bottom, crimson on
   hover — the arrow is typed literally in the label, matching the
   homepage's own .hm-link copy convention). The one true CTA per
   flow (Book a Discovery Call / Send us a title) stays a real
   .btn-crimson button, so that hierarchy is unchanged. */
.flow-journal .hm-link.flow-btn { margin-top: 28px; }

/* Short enumerations (fl-grid) — columns sized to their own content
   so short paired items sit close together instead of stretching
   across a 50/50 split. */
.flow-journal .fl-grid {
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: 8px 44px;
}
@media (max-width: 560px) {
  .flow-journal .fl-grid { grid-template-columns: max-content; }
}

.flow-journal .journal-footnote {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--ink-slate);
  opacity: 0;
}
.flow-journal .flow-screen.flow-active .journal-footnote,
.flow-journal .flow-screen.flow-entering .journal-footnote {
  animation: flow-rise-in .45s ease forwards;
  animation-delay: .8s;
}
.flow-journal .flow-screen.flow-leaving .journal-footnote { opacity: 1 !important; animation: none !important; }
.no-js .journal-footnote { opacity: 1; }

/* Persona picks — the .hm-vert-card recipe verbatim (white bg, gold
   left-border, hover lift+shadow), for full consistency with the
   homepage's own "clickable card" pattern. Same selected/unselected
   class contract the JS already drives. */
.flow-journal .flow-choices {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: none;
  margin: 28px 0 0;
  gap: 10px;
}
.flow-journal .flow-choice {
  background: #fff;
  border: 1px solid var(--card-border, rgba(35,31,32,.10));
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 18px 24px;
  text-align: left;
  box-shadow: none;
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--fast) var(--ease);
}
.flow-journal .flow-choice:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-left-color: var(--crimson);
}
.flow-journal .flow-choice-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--near-black);
  transition: color var(--fast) var(--ease);
}
.flow-journal .flow-choice-title::after { content: '\2192'; margin-left: 8px; opacity: 0; transition: opacity var(--fast) var(--ease), margin-left var(--fast) var(--ease); }
.flow-journal .flow-choice:hover .flow-choice-title { color: var(--crimson); }
.flow-journal .flow-choice:hover .flow-choice-title::after { opacity: 1; margin-left: 12px; }
.flow-journal .flow-choice--selected { border-left-color: var(--crimson); border-left-width: 4px; box-shadow: var(--shadow-hover); }
.flow-journal .flow-choice--unselected { opacity: .28; }

/* Spotlight wipe — replaces the rotateY page-turn on both flow pages
   now. --spot-x/--spot-y are set by main.js from the triggering
   click's position (falls back to 50% 50%, e.g. via the Back
   button). Higher selector specificity (.flow-journal adds a third
   class) overrides the base rotateY rules without touching them. */
.flow-journal .flow-screen.flow-entering,
.flow-journal .flow-screen.flow-entering-back {
  z-index: 3;
  transform: none;
  transform-origin: initial;
  animation: journal-spotlight-in .9s cubic-bezier(.22,.85,.3,1) forwards;
}
.flow-journal .flow-screen.flow-leaving {
  z-index: 1;
  animation: none;
  transform: none;
}
@keyframes journal-spotlight-in {
  0%   { clip-path: circle(0% at var(--spot-x, 50%) var(--spot-y, 50%)); }
  100% { clip-path: circle(150% at var(--spot-x, 50%) var(--spot-y, 50%)); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-journal .flow-screen.flow-entering,
  .flow-journal .flow-screen.flow-entering-back,
  .flow-journal .flow-screen.flow-leaving {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}

.no-js .flow-journal .fl { clip-path: none; }

/* Split text+image layout for screens with a real illustration or
   photo — text stays left, visual sits right, full column used
   (no empty right-hand space). */
.flow-journal .flow-screen--split-img {
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.flow-journal .flow-screen--split-img .journal-inner {
  max-width: none;
  flex: 1 1 42%;
  min-width: 0;
}
.flow-journal .flow-screen--split-img .journal-visual {
  flex: 1 1 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* "Without background, full placement" — no card frame (no border-
   radius/shadow box around it), sized larger since it's no longer
   competing with a bounding box. Column was the real limit on size
   (46% of the stage came out narrower than this cap), not the cap
   itself — rebalanced above so illustrations with baked-in captions
   (e.g. screen1-books.png's "Enough for now" / "More, when needed")
   render large enough to actually read. */
.flow-journal .flow-screen--split-img .journal-visual img {
  width: 100%;
  height: auto;
  max-width: 1020px; /* static illustrations (Screens 1/5/6) — client asked for +50% over the previous 680px cap; the rotating Screen 3 gallery is untouched, see .pod-gallery below */
}
@media (max-width: 760px) {
  .flow-journal .flow-screen--split-img { flex-direction: column; align-items: flex-start; }
  .flow-journal .flow-screen--split-img .journal-visual img { max-width: 570px; }
}

/* Screens 1 and 5 (Print-on-Demand page): their illustrations still had
   visible negative space either side even at the 1020px cap above,
   since the real bottleneck was the inner/visual flex split (42/55),
   not the cap — these two screens' short copy can afford to give the
   image more of the row. Scoped with the page's own body class so this
   can't collide with another page reusing the same #screen1/#screen5
   ids (every flow page numbers its screens the same way). */
.page-print-on-demand #screen1 .journal-inner,
.page-print-on-demand #screen5 .journal-inner {
  flex: 1 1 34%;
}
.page-print-on-demand #screen1 .journal-visual,
.page-print-on-demand #screen5 .journal-visual {
  flex: 1 1 62%;
}
.page-print-on-demand #screen1 .journal-visual img,
.page-print-on-demand #screen5 .journal-visual img {
  max-width: 1200px;
}

/* Screen 6: "50 today." / "4,000 tomorrow." read as a mismatched pair
   side by side (the 2-column .fl-grid treatment below is meant for
   longer item lists, e.g. Screen 3's spec list) — stacked instead, one
   per line, just for this instance. */
.page-print-on-demand #screen6 .fl-grid {
  grid-template-columns: max-content;
}

/* Corporate Print Solutions — per-department illustrations (client-
   supplied illustration set, Sep 2026: Marketing/Brand, Procurement,
   Finance, Facilities/Administration, Vendor/dispatch, Sales/Promotion,
   Customer), background-removed, one on the right side of its matching
   screen. A continuous idle float plus a small dashed arrow that draws
   itself in on entrance, per client feedback ("give the image or arrows
   some animation... make it feel connected"). */
.flow-journal .corp-illus-wrap { position: relative; }
.flow-journal .corp-illus {
  animation: corp-illus-float 6s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(35,31,32,.16));
}
@keyframes corp-illus-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.flow-journal .flow-screen.flow-entering .corp-illus,
.flow-journal .flow-screen.flow-entering-back .corp-illus {
  animation: corp-illus-float 6s ease-in-out infinite, corp-illus-pop .7s cubic-bezier(.22,.85,.3,1) both;
}
@keyframes corp-illus-pop {
  0%   { opacity: 0; transform: scale(.82) translateY(18px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Connector — a small dashed arrow drawn (stroke-dashoffset) from the
   text block toward the illustration on entrance. Purely decorative;
   hidden on mobile where the layout stacks vertically and there's no
   gap to bridge. */
.flow-journal .corp-connector {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  width: clamp(40px, 5vw, 72px);
  height: 40px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.flow-journal .corp-connector path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
}
.flow-journal .flow-screen.flow-entering .corp-connector,
.flow-journal .flow-screen.flow-entering-back .corp-connector {
  animation: corp-connector-show .9s ease .15s forwards;
}
@keyframes corp-connector-show {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 1; }
}
.flow-journal .flow-screen.flow-entering .corp-connector path,
.flow-journal .flow-screen.flow-entering-back .corp-connector path {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: corp-connector-draw 1s cubic-bezier(.3,.8,.4,1) .15s forwards;
}
@keyframes corp-connector-draw {
  to { stroke-dashoffset: 0; }
}
@media (max-width: 760px) {
  .flow-journal .corp-connector { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-journal .corp-illus { animation: none; }
  .flow-journal .flow-screen.flow-entering .corp-illus,
  .flow-journal .flow-screen.flow-entering-back .corp-illus { animation: none; opacity: 1; transform: none; }
  .flow-journal .corp-connector { display: none; }
}

/* Screen 2's small original icon (not the client's Jerry/Tom-and-
   Jerry reference — that's a copyrighted character; see the PHP
   template's comment for why we won't use it even with the client's
   verbal copyright claim). Sits beside the body copy now, matching
   the split-img layout used everywhere else, rather than centred
   below it. */
.flow-journal .journal-mini-illustration {
  width: 100%;
  max-width: 220px; /* only size control needed here — raster image now, not the old SVG, so color/opacity (for currentColor strokes) were dropped as dead weight */
  height: auto;
}

/* Screen 4 — client's own book-spine photos (variety of paper/
   thickness/finish, the exact idea "the thickness changes, so does
   the spine" is about) in place of the hand-drawn line-art
   placeholder. Compact 3x2 grid rather than a scrolling gallery like
   Screen 3's — six photos fit without needing to scroll. */
.flow-journal .journal-spine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 660px; /* +50% over the previous 440px, per the same static-image resize request */
}
.flow-journal .journal-spine-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px -10px rgba(35,31,32,.28);
}
@media (max-width: 480px) {
  .flow-journal .journal-spine-grid { grid-template-columns: repeat(3, 1fr); max-width: 480px; }
}

/* Screen 3 — vertical auto-scrolling photo gallery. The track holds
   the 9 photos TWICE back-to-back; animating it up by exactly 50% of
   its own height loops seamlessly back to an identical frame, so the
   scroll reads as endless. Paused on hover so a click can land
   precisely; each photo opens #podLightbox (main.js). */
.flow-journal .pod-gallery {
  position: relative;
  flex: 1 1 44%;
  height: 560px;
  max-width: 420px;
  overflow: hidden;
  border-radius: var(--radius-md);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.flow-journal .pod-gallery-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: pod-gallery-scroll 46s linear infinite;
}
.flow-journal .pod-gallery:hover .pod-gallery-track { animation-play-state: paused; }
.flow-journal .pod-gallery-track img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(35,31,32,.32);
  transition: transform .3s var(--ease);
}
.flow-journal .pod-gallery-track img:hover { transform: scale(1.035); }
@keyframes pod-gallery-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@media (max-width: 760px) {
  .flow-journal .pod-gallery { max-width: 100%; height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-journal .pod-gallery-track { animation: none; }
}
.no-js .pod-gallery { height: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.no-js .pod-gallery-track { animation: none; }
.no-js .pod-gallery-track img[aria-hidden="true"] { display: none; }

/* Lightbox — one shared overlay, reused for whichever gallery photo
   was clicked (main.js swaps its <img> src). */
.pod-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(35,31,32,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pod-lightbox.is-open { opacity: 1; pointer-events: auto; }
.pod-lightbox img {
  max-width: 88vw;
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.pod-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pod-lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ══════════════════════════════════════════════════════════════
   GENERIC MODAL — the "Send us a title" popup (and reusable for any
   future one). Distinct from .pod-lightbox (that's a full-bleed
   image viewer); this is a white card panel with a scrollable form.
══════════════════════════════════════════════════════════════ */
.p24-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(35,31,32,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.p24-modal.is-open { opacity: 1; pointer-events: auto; }
.p24-modal-panel {
  background: #fff;
  border-radius: var(--radius-card);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.35);
  transform: translateY(12px);
  transition: transform .25s ease;
}
.p24-modal.is-open .p24-modal-panel { transform: translateY(0); }
.p24-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--ivory-border);
  color: var(--near-black);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p24-modal-close:hover { background: var(--ivory-dark); }
.p24-modal-status { margin-top: 14px; font-family: var(--font-body); font-size: 14px; }
.p24-modal-status.is-success { color: #1a7d3a; }
.p24-modal-status.is-error { color: var(--crimson); }
.p24-modal [disabled] { opacity: .6; cursor: default; }

/* File inputs — native picker, styled to match .p24-form-input's
   footprint; dashed border signals "drop a file here" even though
   this is a plain click-to-browse input, not a real drop zone. */
.p24-form-file {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px dashed var(--ivory-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-slate);
  background: var(--ivory);
}
.p24-form-file:focus { border-color: var(--near-black); outline: none; }

/* ══════════════════════════════════════════════════════════════
   LEGAL PAGES — Privacy Policy, Terms & Conditions, Cancellations.
   A plain, readable prose layout — the site has no article/blog
   typography yet, so this is its own small self-contained block.
══════════════════════════════════════════════════════════════ */
.legal-page { padding: 56px 0 96px; }
.legal-updated {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-slate);
  margin-bottom: 40px;
}
.legal-body { max-width: 760px; }
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--near-black);
  margin: 44px 0 14px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  color: var(--near-black);
  margin: 26px 0 10px;
}
.legal-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-slate);
  margin-bottom: 14px;
}
.legal-body ul { list-style: disc; margin: 0 0 14px; padding-left: 22px; }
.legal-body ol { list-style: decimal; margin: 0 0 14px; padding-left: 22px; }
.legal-body li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-slate);
  margin-bottom: 8px;
}
.legal-body strong { color: var(--near-black); }
.legal-body a { color: var(--crimson); text-decoration: underline; text-underline-offset: 2px; }
.legal-toc {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 40px;
  max-width: 760px;
}
.legal-toc div { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep, var(--gold)); margin-bottom: 10px; }
.legal-toc ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; }
.legal-toc li { font-family: var(--font-body); font-size: 14px; margin-bottom: 6px; }
.legal-toc a { color: var(--ink-slate); text-decoration: none; }
.legal-toc a:hover { color: var(--crimson); }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }