/* =========================================================
   VIBRANT — Shared design system
   Used by every page. Change once here, applies site-wide.
========================================================= */

/* ===================== Design tokens ===================== */
:root{
  /* Brand palette (per the official brand guideline slides).
     Primary: Vibrant Blue #00B8D6, Vibrant Orange #F2600C, Vibrant Green #42F481, Gray Storm #1D1D1D.
     Secondary: Vibrant Orange (coral) #ED614D, Orange juice #F5E256, Lavender tea #C9BFEF. */
  --blue: #00B8D6;          /* primary — Vibrant Blue */
  --blue-dark: #007D93;     /* derived — established site-wide icon-accent colour */
  --blue-deep: #0B3B45;     /* derived */
  --green: #42F481;         /* primary — Vibrant Green */
  --green-dark: #1FCB63;    /* derived */
  --orange: #ED614D;        /* secondary — Vibrant Orange (coral) */
  --orange-bright: #F2600C; /* primary — Vibrant Orange (strong) */
  --yellow: #F5E256;        /* secondary — Orange juice */
  --lavender: #C9BFEF;      /* secondary — Lavender tea */
  --ink: #12181D;           /* ≈ brand Gray Storm – Dark #1D1D1D */
  --ink-soft: #3C4650;
  --paper: #FBFAF8;
  --paper-warm: #F5F1EA;
  --gray-100: #F1EFEA;
  --gray-200: #E4E1DA;
  --gray-400: #9B958A;

  --font-display: 'Instrument Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --max: 1240px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 88px; }   /* clear the sticky header on anchor jumps */
body{
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 40px; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body); font-weight:600; font-size: 16.9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-dark);
  margin-bottom: 18px;
}
.eyebrow::before{ content:''; width: 26px; height: 2px; background: var(--green); border-radius: 2px; }
.eyebrow.on-dark{ color: var(--yellow); }
.eyebrow.on-dark::before{ background: var(--green); }
/* IT Services page only (2026-09-15 redesign) — green accent on dark
   sections, matching the mockup, instead of the site's usual yellow-on-dark.
   The extra `.hero-content .eyebrow.tech-accent` selector is needed to
   out-specificity the generic `.hero-content .eyebrow{ color:yellow }`
   rule below (same 2-class specificity, source order would otherwise
   let that one win inside the hero). */
.eyebrow.tech-accent,
.hero-content .eyebrow.tech-accent{ color: var(--green); }

/* Service pages label the hero with just the page name — no "Services /"
   breadcrumb — set 2px smaller than the base eyebrow. Covers every split-hero
   service page (Manga Studio + BPM included). */
.hero-split .hero-content .eyebrow{ font-size: 14.9px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 8.5px;
  padding: 13.5px 25.5px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 16.6px;
  cursor:pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary{ background: var(--green); color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(66,244,129,.55); }
.btn-ghost{ border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover{ background: rgba(255,255,255,.12); transform: translateY(-3px); }
.btn-dark{ background: var(--ink); color: #fff; }
.btn-dark:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); }
.btn-outline-ink{ border-color: var(--ink); color: var(--ink); }
.btn-outline-ink:hover{ background: var(--ink); color:#fff; transform: translateY(-3px); }
.btn-sm{ padding: 10px 20px; font-size: 12.75px; }

/* ===================== Reveal on scroll ===================== */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0); }
.stagger.in > *{ transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; opacity:1; transform:none; }
  .stagger.in > *{ transition-delay: 0s; }
}

/* ===================== Nav ===================== */
header.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 26px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
header.site-nav.solid{
  background: rgba(251,250,248,0.86);
  backdrop-filter: blur(14px) saturate(160%);
  padding: 16px 0;
  border-color: var(--gray-200);
}
header.site-nav.on-light{
  background: rgba(251,250,248,0.86);
  backdrop-filter: blur(14px) saturate(160%);
  border-color: var(--gray-200);
}
.nav-inner{ display:flex; align-items:center; }
.logo{ font-family: var(--font-display); font-weight:700; font-size: 28.6px; letter-spacing: -0.02em; color:#fff; transition: color .4s ease; display:flex; align-items:center; gap:9px;}
.logo .dot{ width:9px; height:9px; border-radius:50%; background: var(--green); display:inline-block; }
.logo-img{ height: 36px; width:auto; display:block; }
header.site-nav.solid .logo, header.site-nav.on-light .logo{ color: var(--ink); }

.nav-links{ display:flex; align-items:center; gap: 36px; margin-left: auto; margin-right: 48px; }
.nav-links a{
  font-size: 17.5px; font-weight: 500; color: rgba(255,255,255,.85);
  position: relative; padding: 6px 0; transition: color .4s ease;
}
header.site-nav.solid .nav-links a, header.site-nav.on-light .nav-links a{ color: var(--ink-soft); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:hover{ color: #fff; }
header.site-nav.solid .nav-links a:hover, header.site-nav.on-light .nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ transform: scaleX(1); }

/* Active nav item: yellow on dark (transparent) nav, green on light (solid) nav */
.nav-links a.is-current{ color: var(--yellow); font-weight: 600; }
header.site-nav.solid .nav-links a.is-current, header.site-nav.on-light .nav-links a.is-current{ color: #12B76A; }

.nav-right{ display:flex; align-items:center; gap: 22px; }
header.site-nav .btn-primary{ padding: 10px 20px; font-size: 15.5px; }

.nav-toggle{ display:none; }

/* Services dropdown — frosted-glass light panel
   Joined to the trigger by an invisible hover bridge (padding-top on
   .nav-dropdown). The panel is a translucent light card: whatever is behind
   blurs into a soft wash (backdrop-filter), with an opaque-enough fallback
   where blur isn't supported so text is never hard to read. Open = a springy
   pop (rise + scale from the trigger, gentle overshoot); rows deal out
   top→bottom (rise + fade, staggered on entrance only). Row hover: a soft
   brand-blue wash, a solid-blue icon tile, a green bar on the left edge, the
   label nudges right. Keyboard: the trigger is focusable; :focus-within
   opens it; rows respond on :focus-visible. */
.nav-item{ position: relative; }
.nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-item.has-dropdown > a[role="button"]{ cursor: pointer; }
.nav-item > a .caret{ transition: transform .34s cubic-bezier(.34,1.4,.5,1); }
.nav-item:hover > a .caret, .nav-item:focus-within > a .caret{ transform: rotate(180deg); }

.nav-dropdown{
  position:absolute; top:100%; left:50%;
  padding-top:16px; /* invisible hover bridge */
  transform: translateX(-50%);
  min-width:296px;
  visibility:hidden; pointer-events:none;
  transition: visibility 0s linear .42s;
  z-index:120;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown{
  visibility:visible; pointer-events:auto;
  transition: visibility 0s linear 0s;
}
.nav-dropdown-panel{
  position:relative;
  background: rgba(252, 251, 249, .99);   /* fallback: effectively opaque paper */
  border: 1px solid rgba(18, 24, 29, .08);
  border-radius: 14px;
  box-shadow: 0 28px 60px -22px rgba(9,15,18,.34), 0 6px 18px -8px rgba(9,15,18,.14),
              inset 0 1px 0 rgba(255,255,255,.75);
  padding: 7px; display:flex; flex-direction:column; gap:2px;
  opacity:0; transform: translateY(-14px) scale(.96);
  transform-origin: top center;
  transition: opacity .16s ease,
              transform .44s cubic-bezier(.34, 1.42, .5, 1);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nav-dropdown-panel{
    background: rgba(252, 251, 249, .93);   /* mostly opaque — just a hint of frost */
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
}
.nav-item:hover .nav-dropdown-panel, .nav-item:focus-within .nav-dropdown-panel{
  opacity:1; transform: translateY(0) scale(1);
  transition: opacity .2s ease, transform .46s cubic-bezier(.34, 1.42, .5, 1);
}

/* rows — dealt out top→bottom on open */
header.site-nav .nav-dropdown a{
  position:relative; display:grid;
  grid-template-columns: 22px 1fr; align-items:center; column-gap:13px;
  padding:9px 14px 9px 11px; border-radius:10px; white-space:nowrap;
  color: var(--ink-soft) !important; font-size:14.5px; font-weight:500;
  opacity:0; transform: translateY(10px);
  transition: background .18s ease, color .18s ease,
              opacity .24s ease, transform .34s cubic-bezier(.34,1.45,.5,1);
}
header.site-nav .nav-dropdown a::after{ content:none; }
header.site-nav .nav-dropdown a::before{        /* leading accent bar — brand green */
  content:''; position:absolute; left:4px; top:50%;
  width:3px; height:0; border-radius:2px; background: var(--green);
  transform: translateY(-50%) scaleY(.4);
  transition: height .24s cubic-bezier(.34,1.5,.5,1), transform .24s cubic-bezier(.34,1.5,.5,1);
}
header.site-nav .nav-dropdown .nd-ic{        /* bare icon — no tile */
  width:22px; height:28px;
  display:grid; place-items:center;
  color: var(--blue-dark);
  transition: color .2s ease, transform .28s cubic-bezier(.34,1.5,.5,1);
}
header.site-nav .nav-dropdown .nd-ic svg{ width:15px; height:15px; }
header.site-nav .nav-dropdown .nd-label{ transition: transform .24s cubic-bezier(.34,1.5,.5,1); }
.nav-item:hover .nav-dropdown a,
.nav-item:focus-within .nav-dropdown a{
  opacity:1; transform: translateY(0);
  transition-delay: 0s, 0s, calc(80ms + var(--i, 0) * 40ms), calc(80ms + var(--i, 0) * 40ms);
}

/* hover / focus — soft brand-blue wash */
header.site-nav .nav-dropdown a:hover,
header.site-nav .nav-dropdown a:focus-visible{
  background: rgba(0, 184, 214, .11); color: var(--blue-deep) !important;
}
header.site-nav .nav-dropdown a:hover::before,
header.site-nav .nav-dropdown a:focus-visible::before{ height:20px; transform: translateY(-50%) scaleY(1); }
header.site-nav .nav-dropdown a:hover .nd-ic,
header.site-nav .nav-dropdown a:focus-visible .nd-ic{ color: var(--blue-deep); transform: scale(1.12); }
header.site-nav .nav-dropdown a:hover .nd-label,
header.site-nav .nav-dropdown a:focus-visible .nd-label{ transform: translateX(3px); }

@media (prefers-reduced-motion: reduce){
  .nav-dropdown-panel,
  .nav-item:hover .nav-dropdown-panel, .nav-item:focus-within .nav-dropdown-panel{
    transform:none; transition: opacity .12s linear;
  }
  header.site-nav .nav-dropdown a{ transform:none; transition: background .14s linear, color .14s linear, opacity .12s linear; }
  .nav-item:hover .nav-dropdown a, .nav-item:focus-within .nav-dropdown a{ transform:none; transition-delay:0s; }
  header.site-nav .nav-dropdown a:hover .nd-ic, header.site-nav .nav-dropdown a:focus-visible .nd-ic{ transform:none; }
}

/* ===================== Hero — full (Home) ===================== */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  overflow:hidden; background: var(--ink);
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(0,184,214,.55), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(237,97,77,.45), transparent 45%),
    radial-gradient(circle at 70% 15%, rgba(66,244,129,.28), transparent 40%),
    linear-gradient(160deg, #0c1216 0%, #101a20 45%, #241611 100%);
  background-size: 160% 160%;
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{ background-position: 0% 0%; } 100%{ background-position: 100% 100%; } }
.hero-grain{
  position:absolute; inset:0; opacity:.35; mix-blend-mode: overlay; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-wash{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(12,16,17,.75) 0%, rgba(12,16,17,.15) 45%, rgba(30,15,10,.25) 100%); }

.hero-content{ position:relative; z-index:2; padding-top: 90px; }
.hero-content .eyebrow{ color: var(--yellow); }
.hero-content .eyebrow::before{ background: var(--green); }
.hero-content h1{
  font-size: clamp(59.8px, 8.3vw, 119.6px); color:#fff; max-width: 15ch;
}
.hero-content h1 em{ font-style: normal; color: var(--green); }
.hero-sub{
  margin-top: 26px; font-size: 24.7px; line-height:1.6; color: rgba(255,255,255,.78);
  max-width: 46ch; font-weight: 400;
}
.hero-ctas{ display:flex; gap:18px; margin-top: 44px; flex-wrap: wrap; }

/* ============ Home — full-bleed photographic hero background ============
   assets/home-hero.png is a full desk scene: a dark teal→navy wash on the
   left, and a laptop content editor + notebook + reference books + plant
   under warm window light on the right. It fills the whole hero; the copy
   sits in a single left column over a left-weighted scrim. */
.page-home .hero-bg{
  background: #0e1c22 url("home-hero.png") 82% center / cover no-repeat;
  animation: none;
}
.page-home .hero-grain{ opacity: .18; }
.page-home .hero-wash{
  background:
    linear-gradient(90deg, rgba(9,19,24,.97) 0%, rgba(9,19,24,.95) 40%, rgba(9,19,24,.82) 56%, rgba(9,19,24,.4) 74%, rgba(9,19,24,.08) 92%, rgba(9,19,24,0) 100%),
    linear-gradient(180deg, rgba(9,19,24,.32) 0%, rgba(9,19,24,.34) 55%, rgba(9,19,24,.52) 100%);
}
/* shorter hero so the floating stat card clears the fold; copy stays a
   left column, heading breaks to two lines like the comp.
   (`.hero` is a <section>, so it also carries the global 130px block
   padding — zero it here or the hero can't get short.) */
.page-home .hero{ min-height: 84vh; padding: 0; }
.page-home .hero-content{ padding-top: 100px; padding-bottom: 112px; }
.page-home .hero-scroll{ display: none; }   /* card sits right here; scroll cue is redundant */
#home .home-hero-copy{ max-width: 49rem; }
#home .home-hero-copy h1{ text-shadow: 0 2px 24px rgba(9,19,24,.5); }
#home .home-hero-copy .hero-sub{ text-shadow: 0 1px 14px rgba(9,19,24,.6); max-width: 40ch; }
@media (max-width: 900px){
  .page-home .hero{ min-height: 84vh; }
  .page-home .hero-bg{ background-position: 72% center; }
  .page-home .hero-wash{
    background: linear-gradient(180deg, rgba(9,19,24,.72) 0%, rgba(9,19,24,.8) 45%, rgba(9,19,24,.87) 100%);
  }
  #home .home-hero-copy{ max-width: none; }
}

.hero-scroll{
  position:absolute; bottom: 40px; left: 40px; z-index:2;
  display:flex; align-items:center; gap:12px; color: rgba(255,255,255,.65); font-size: 16.9px; letter-spacing:.08em; text-transform:uppercase;
}
.hero-scroll .line{ width:1px; height: 46px; background: linear-gradient(#fff, transparent); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--green); animation: scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ===================== Hero — sub-page (smaller, page-tinted) ===================== */
.hero-sm{ min-height: 62vh; }
.hero-sm .hero-content{ padding-top: 130px; padding-bottom: 70px; }
.hero-sm .hero-content h1{ font-size: clamp(46px, 6vw, 78px); max-width: 17ch; }
.hero-sm .hero-sub{ font-size: 21px; }

/* Home hero — compact two-line heading (see comp), sub matches other pages */
#home .hero-content h1{ font-size: clamp(40px, 4.6vw, 60px); max-width: 26ch; }
#home .hero-sub{ font-size: 21px; }

.hero-tech .hero-bg{
  background:
    radial-gradient(circle at 20% 20%, rgba(0,184,214,.55), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0,184,214,.25), transparent 45%),
    linear-gradient(160deg, #081a1f 0%, #0B3B45 55%, #071418 100%);
  background-size: 160% 160%;
}
/* ===================== Hero — split (copy left, image right) ===================== */
.hero-split.hero-sm{ min-height: 0; }
/* Uniform hero height across the service pages: every service hero carries the
   same content shape (eyebrow + h1 + sub, no CTAs), so lock a shared desktop
   min-height — matches Content Transformation's natural 701px — and let the
   flex `align-items:center` centre the copy in any slack. Mobile is untouched. */
@media (min-width: 901px){
  .hero.hero-sm.hero-split{ min-height: 701px; }
}
.hero-split .hero-content{ padding-top: 112px; padding-bottom: 64px; }
.hero-split .hero-split-inner{
  display:grid; grid-template-columns: 1.9fr 1fr; gap: 64px; align-items:start;
}
.hero-split .hero-content h1{ max-width: 30ch; font-size: clamp(30px, 3.5vw, 46px); }
.hero-split .hero-sub{ max-width: 44ch; }
.nobreak{ white-space: nowrap; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 30px; }
.hero-badge{
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.85);
  font-size: 13.5px; font-weight: 500; line-height:1.4;
}
@media (max-width: 900px){
  .hero-split .hero-split-inner{ grid-template-columns: 1fr; gap: 36px; }
  .hero-media{ order: 2; }
}

/* ===================== BPM hero — vertical "flow" glass panel =====================
   Replaces the never-filled image placeholder (2026-09-06). A compact frosted panel
   in the narrow hero-media column showing the same Source→Collect→Clean→Validate→
   Deliver stages the page's Workflow section uses, stacked vertically with dashed
   links — no photography, and it ties the hero into the rest of the redesign. */
.page-bpm .hero-flow{
  margin-left: auto; width: 100%; max-width: 340px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 20px;
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 22px 24px;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.page-bpm .hero-flow-row{ display:flex; align-items:center; gap:14px; }
.page-bpm .hero-flow-node{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-body); font-size:12.5px; font-weight:700; color: var(--green);
  border: 1.5px solid rgba(66,244,129,.42); background: rgba(66,244,129,.07);
}
.page-bpm .hero-flow-ic{ flex-shrink:0; color: rgba(255,255,255,.72); display:flex; }
.page-bpm .hero-flow-ic svg{ width:18px; height:18px; }
.page-bpm .hero-flow-label{ font-size:14.5px; font-weight:600; color:#fff; letter-spacing:.01em; }
.page-bpm .hero-flow-link{
  width:2px; height:14px; margin:5px 0 5px 18px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.32) 0 3px, transparent 3px 7px);
}
@media (max-width: 900px){
  .page-bpm .hero-flow{ margin: 0 auto; }
}

/* =========================================================
   Manga Studio — full-bleed photographic hero background
   assets/hero-manga-studio.png is a full rectangular scene (dark teal→green
   ground, a manga-editing tablet, printed pages, a scanner, reference books),
   so it sits as the whole hero's background rather than a floating cut-out.
   The copy stays in the left column over a left-weighted dark scrim; the
   image's workspace reads through the empty right side of the split. No
   .hero-media panel and no callouts on this hero. */
.page-manga-studio .hero-bg{ display: none; }   /* the photo replaces the animated gradient */
.page-manga-studio .hero-photo{
  position: absolute; inset: 0; z-index: 0;
  background: #0c1216 url("hero-manga-studio.png") center right / cover no-repeat;
}
.page-manga-studio .hero-grain{ opacity: .22; }
/* left-weighted scrim so the copy holds up over the lighter parts of the
   photo, plus a gentle overall darken */
.page-manga-studio .hero-wash{
  background:
    linear-gradient(90deg, rgba(7,16,20,.97) 0%, rgba(7,16,20,.93) 40%, rgba(7,16,20,.7) 56%, rgba(7,16,20,.3) 76%, rgba(7,16,20,0) 94%),
    linear-gradient(180deg, rgba(7,16,20,.34) 0%, rgba(7,16,20,.46) 55%, rgba(7,16,20,.66) 100%);
}
/* single-column inner: copy sits left, the photo fills the rest of the banner */
.page-manga-studio .hero-split .hero-split-inner{ grid-template-columns: 1fr; }
.page-manga-studio .hero-copy{ max-width: 30rem; }
.page-manga-studio .hero-copy .hero-sub{ max-width: 26rem; text-shadow: 0 1px 12px rgba(7,16,20,.75); }
.page-manga-studio .hero-copy h1{ text-shadow: 0 2px 22px rgba(7,16,20,.55); }
@media (max-width: 900px){
  .page-manga-studio .hero{ min-height: 82vh; }
  .page-manga-studio .hero-photo{ background-position: center; }
  .page-manga-studio .hero-wash{
    background:
      linear-gradient(180deg, rgba(7,16,20,.7) 0%, rgba(7,16,20,.78) 40%, rgba(7,16,20,.82) 70%, rgba(7,16,20,.88) 100%);
  }
  .page-manga-studio .hero-copy{ max-width: none; }
  .page-manga-studio .hero-copy .hero-sub{ max-width: none; }
}

/* ===================== Hero — legal/utility slim banner (Privacy, Terms) ===================== */
.hero-legal{ min-height: 0; }
.hero-legal .hero-bg{
  background: linear-gradient(155deg, #10161a 0%, #182229 100%);
  background-size: 100% 100%;
  animation: none;
}
.hero-legal .hero-grain{ opacity: .15; }
.hero-legal .hero-wash{ background: none; }
.hero-legal .hero-content{ padding-top: 86px; padding-bottom: 8px; text-align: left; }
.hero-legal .hero-content .eyebrow{ margin-bottom: 6px; font-size: 13px; letter-spacing: .16em; }
.hero-legal .hero-content h1{ font-size: clamp(20px, 2.4vw, 28px); max-width: 24ch; }
.hero-legal .hero-sub{ margin-top: 4px; font-size: 13.5px; line-height: 1.45; max-width: 90ch; color: rgba(255,255,255,.62); }
@media (max-width: 640px){
  .hero-legal .hero-content{ padding-top: 76px; padding-bottom: 8px; }
}

/* ===================== About hero — full-height, copy + CTAs + stat row =====================
   Matches the About comp: a tall dark hero, warm light bleeding in from the upper-right
   (as if from a window), a faint vertical wall-text deco, and a 4-up stat row under the
   CTAs. Built as a rich CSS ground for now — drop an `assets/hero-about.png` desk scene
   (dark-left / warm-right, ~1920×960) and it can slot straight into `.page-about .hero-bg`
   the same way `home-hero.png` does on the homepage. */
.page-about .hero.hero-sm{ min-height: 90vh; padding: 0; }   /* `.hero` is a <section> — kill the global 130px block padding */
.page-about .hero-bg{
  background:
    radial-gradient(circle at 84% 22%, rgba(245,226,86,.16), transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(237,97,77,.12), transparent 46%),
    radial-gradient(circle at 12% 62%, rgba(66,244,129,.22), transparent 52%),
    linear-gradient(155deg, #0a1f1c 0%, #0c2620 44%, #061512 100%);
  background-size: 170% 170%;
}
.page-about .hero-wash{
  background: linear-gradient(95deg, rgba(6,18,16,.6) 0%, rgba(6,18,16,.28) 45%, rgba(6,18,16,0) 78%),
             linear-gradient(0deg, rgba(6,18,16,.55) 0%, rgba(6,18,16,0) 40%);
}
.page-about .hero-content{ padding-top: 150px; padding-bottom: 84px; }
.page-about .hero-content h1{ font-size: clamp(40px, 4.6vw, 60px); max-width: 22ch; }
.page-about .hero-sub{ max-width: 44ch; }
.page-about .hero-ctas{ margin-top: 40px; }

.about-hero-deco{
  position:absolute; top: 118px; right: 64px; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; gap:16px; text-align:right;
  font-family: var(--font-body); font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color: rgba(255,255,255,.13);
}
@media (max-width: 1100px){ .about-hero-deco{ display:none; } }

.about-hero-stats{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:0;
  margin-top: 52px; max-width: 760px;
}
.about-stat{ display:flex; align-items:center; gap:12px; padding: 4px 30px; position:relative; }
.about-stat:first-child{ padding-left: 0; }
.about-stat + .about-stat::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px; background: rgba(255,255,255,.16);
}
.about-stat-ic{ flex-shrink:0; color: var(--green); display:flex; }
.about-stat-ic svg{ width:20px; height:20px; }
.about-stat-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.about-stat .v{ font-family: var(--font-body); font-size:19px; font-weight:700; color:#fff; line-height:1.15; }
.about-stat .l{ font-size:13.5px; color: rgba(255,255,255,.6); line-height:1.3; }
@media (max-width: 760px){
  .about-hero-stats{ gap: 22px 0; }
  .about-stat{ flex: 1 1 46%; padding: 0; }
  .about-stat + .about-stat::before{ display:none; }
}
@media (max-width: 420px){
  .about-stat{ flex: 1 1 100%; }
}

/* ===================== About — "Our story" two-column (matches its comp) =====================
   Left: eyebrow + 2-line h2 + 3 paragraphs + an outline "Our Journey" pill.
   Right: a warm typographic panel ("GOOD CONTENT BUILDS BRIGHTER FUTURES", built in CSS —
   swap in a photo on `.story-statement` later if one arrives) with an overlapping
   "A long-term mindset" mint card. */
#story .story-split{ display:grid; grid-template-columns: 1fr 1.02fr; gap: 72px; align-items:center; }
#story .story-copy .eyebrow{ margin-bottom: 18px; }
#story .story-copy h2{ font-size: 46px; }
#story .story-copy > p{ margin-top: 20px; font-size: 16.5px; line-height: 1.8; color: var(--ink-soft); max-width: 48ch; }
#story .story-copy .btn{ margin-top: 34px; }

#story .story-visual{ position: relative; }
#story .story-statement{
  min-height: 470px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(120deg, #efe7db 0%, #e6d8c6 52%, #d9c8b1 100%);
  padding: 54px 46px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.14; letter-spacing: .01em;
  color: #2b2620;
  box-shadow: 0 44px 100px -46px rgba(18,24,29,.38);
}
#story .story-statement .dash{ width: 46px; height: 3px; border-radius: 2px; background: #2b2620; margin-top: 20px; }
#story .story-card{
  position: absolute; right: -24px; bottom: -60px; max-width: 336px;
  background: #F2F8F4; border: 1px solid rgba(18,24,29,.08); border-radius: 18px;
  padding: 24px 24px 22px;
  box-shadow: 0 34px 64px -30px rgba(18,24,29,.3);
}
#story .story-card-ic{
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  background: rgba(0,184,214,.10); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
}
#story .story-card strong{ display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
#story .story-card p{ font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 940px){
  #story .story-split{ grid-template-columns: 1fr; gap: 44px; }
  #story .story-statement{ min-height: 0; padding: 44px 40px 48px; }
  #story .story-card{ position: static; max-width: none; margin: -24px 16px 0; }
}
@media (max-width: 520px){
  #story .story-statement{ padding: 38px 28px 40px; }
  #story .story-card{ margin: -20px 0 0; }
}

/* ===================== About — "Our values" 5-up editorial row (matches its comp) =====================
   Left-aligned header + one row of 5 columns with hairline dividers, blue-tinted icon
   tiles. Overrides the shared .values-grid/.value-item (used on the homepage) page-scoped. */
.page-about #values .section-head{ max-width: none; margin-bottom: 54px; }
.page-about #values .values-grid{ grid-template-columns: repeat(5, 1fr); gap: 0; }
.page-about #values .value-item{
  flex-direction: column; align-items: flex-start; gap: 0;
  padding: 4px 30px; border-left: 1px solid var(--gray-200);
}
.page-about #values .value-item:first-child{ padding-left: 0; border-left: none; }
.page-about #values .value-item:last-child{ padding-right: 0; }
.page-about #values .value-item .icon{
  width: 48px; height: 48px; border-radius: 13px; border: none;
  background: rgba(0,184,214,.10); color: var(--blue-dark); margin-bottom: 18px;
}
.page-about #values .value-item h4{ font-size: 17px; margin-bottom: 8px; }
.page-about #values .value-item p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; max-width: none; }
@media (max-width: 1040px){
  .page-about #values .values-grid{ grid-template-columns: repeat(3, 1fr); gap: 40px 34px; }
  .page-about #values .value-item{ padding: 0; border-left: none; }
}
@media (max-width: 680px){
  .page-about #values .values-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px){
  .page-about #values .values-grid{ grid-template-columns: 1fr; }
}

/* ===================== Trust bar — floating stat card ===================== */
.trust{
  background: transparent; position:relative; z-index:6;
  padding: 0; margin-top: -58px;
}
.trust-row{
  display:flex; align-items:stretch; gap: 0;
  background: linear-gradient(180deg, #18222a 0%, #0f171c 100%);
  border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
  padding: 26px 20px;
  box-shadow: 0 44px 90px -34px rgba(0,0,0,.6), 0 8px 24px -14px rgba(0,0,0,.5);
}
.trust-stat{
  flex: 1 1 0; min-width: 0; position:relative;
  display:flex; align-items:center; gap: 14px;
  padding: 6px 20px; color:#fff;
}
.trust-stat + .trust-stat::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background: rgba(255,255,255,.12);
}
.trust-ic{
  width: 44px; height:44px; border-radius:50%; flex-shrink:0;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center; color: var(--green);
}
.trust-ic svg{ width: 20px; height:20px; }
/* number stacked over its label so long labels ("Publishing clients served")
   wrap under the number instead of overflowing the card */
.trust-meta{ display:flex; flex-direction:column; gap: 1px; min-width: 0; }
.trust-stat .num{ font-family: var(--font-display); font-size: 34px; font-weight:700; color: var(--green); line-height: 1.08; }
.trust-stat .label{ font-size: 16.5px; color: rgba(255,255,255,.6); line-height: 1.28; }
@media (max-width: 1023px){
  .trust-row{ flex-wrap: wrap; padding: 20px 14px; }
  .trust-stat{ flex: 1 1 42%; padding: 14px 18px; }
  .trust-stat + .trust-stat::before{ display:none; }
}
@media (max-width: 560px){
  .trust-stat{ flex: 1 1 100%; }
}

/* ===================== Section shell ===================== */
section{ padding: 130px 0; position:relative; }
section.tight{ padding: 90px 0; }
.section-head{ max-width: 640px; margin-bottom: 64px; }
.section-head h2{ font-size: 46px; }
.section-head p{ margin-top: 18px; font-size: 22.1px; color: var(--ink-soft); line-height:1.65; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.wide{ max-width: 760px; }

.on-warm{ background: var(--paper-warm); }
.on-ink{ background: var(--ink); }

/* ===================== Services layout (Home) — intro over a 4-up card grid ===================== */
.services-layout{ display:block; }
/* Heading/intro sized to match the shared .section-head used for every
   section title on the service pages (46px h2 / 22.1px intro p) — kept as
   its own rule (rather than the .section-head class) since this block also
   carries a wider 720px measure. */
.services-left{ max-width: 720px; margin: 0 auto 54px; text-align: center; }
.services-left h2{ font-size: 46px; }
.services-left p{ margin-top: 18px; font-size: 22.1px; color: var(--ink-soft); line-height:1.65; max-width: 52ch; }

.services-items{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.service-item{
  display:flex; flex-direction:column; padding: 28px 26px 22px; margin: 0;
  border: 1px solid var(--gray-200); border-radius: 16px; background: #fff;
  transition: border-color .3s ease, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.service-item:hover{
  background: #fff; border-color: rgba(0,184,214,.55);
  box-shadow: 0 26px 46px -28px rgba(18,24,29,.28); transform: translateY(-4px);
}
.service-item .icon-plain{
  width: 30px; height:30px; color: var(--blue-dark); margin-bottom: 14px;
  transition: transform .35s var(--ease);
}
.service-item:hover .icon-plain{ transform: translateY(-4px); }
.service-item h3{
  font-size: 20.8px; margin-bottom: 8px; font-family: var(--font-display); font-weight:600;
  transition: color .3s ease;
}
.service-item:hover h3{ color: var(--blue-dark); }
.service-item p{ font-size: 16.5px; color: var(--ink-soft); line-height:1.6; max-width: none; flex: 1 1 auto; }
.service-item .si-arrow{
  margin-top: 18px; width: 32px; height: 32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  border: 1px solid var(--gray-200); color: var(--blue-dark);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.service-item .si-arrow svg{ width: 16px; height:16px; }
.service-item:hover .si-arrow{ background: var(--blue-dark); border-color: var(--blue-dark); color:#fff; transform: translateX(3px); }
@media (max-width: 1160px){ .services-items{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px){ .services-items{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .services-items{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .services-items{ grid-template-columns: 1fr; } }

/* 2026-09-14 — homepage "What we do" now lists 5 services, not 8/4-per-row.
   A plain 4-col grid would leave a lone orphan card on its own row, so
   `#services` switches to a flex-wrap-centred layout instead (same
   3-then-2-centred technique as `.bpm-grid`): 3 cards fill row one, the
   remaining 2 centre themselves on row two. High-specificity `#services`
   override — the 4-col grid rules above are unused here but left alone
   in case another page still needs an 8-card `.services-items`. */
#services .services-items{
  display: flex; flex-wrap: wrap; justify-content: center;
}
#services .service-item{
  flex: 1 1 calc((100% - 44px) / 3); max-width: calc((100% - 44px) / 3); min-width: 240px;
}
@media (max-width: 720px){
  #services .service-item{ flex: 1 1 calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); min-width: 0; }
}
@media (max-width: 460px){
  #services .service-item{ flex: 1 1 100%; max-width: 100%; }
}

/* ===================== "From content to code" — full-width tech section (Home) =====================
   Reuses the .on-dark-custom full-bleed machinery (same as the "Who this is for" sections), but
   the ground + glows follow a technology palette: deep teal base, blue/green radial glows, a dot
   grid and faint circuit traces — all in the inline .who-bg SVG. .tech-banner is now just the
   two-column content layout inside the section's .wrap. */
.on-dark-custom.on-tech{ background: #06181e; }
.on-tech .eyebrow::before{ background: var(--blue); }

.tech-banner{
  position: relative; z-index: 2;
  display:grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items:center;
}
.tech-banner .eyebrow{ color: var(--yellow); }
/* Matches the shared .section-head title size (46px h2 / 22.1px intro p)
   used across the service pages. */
.tech-banner h2{ color:#fff; font-size: 46px; }
.tech-banner p{ color: rgba(255,255,255,.75); margin-top: 18px; font-size: 22.1px; line-height:1.65; max-width: 46ch; }
.tech-banner .actions{ margin-top: 32px; display:flex; gap:16px; flex-wrap:wrap; }
.tech-pillars{ display:grid; gap: 14px; }
.tech-pill{
  display:flex; align-items:center; gap:14px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #fff; font-size: 18.9px; font-weight:500;
  transition: background .3s ease, transform .3s ease;
}
.tech-pill:hover{ background: rgba(255,255,255,.12); transform: translateX(4px); }
.tech-pill svg{ flex-shrink:0; color: var(--blue); }

/* ===================== Compact cross-sell callout (Content Transformation / BPM) ===================== */
.cross-sell{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  background: var(--blue-deep); border-radius: 24px; padding: 40px 44px;
  position:relative; overflow:hidden;
}
.cross-sell::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 90% 0%, rgba(0,184,214,.35), transparent 55%);
}
.cross-sell-icon{
  width:56px; height:56px; border-radius:16px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color: var(--blue); flex-shrink:0; position:relative;
}
.cross-sell-text{ flex:1; min-width:240px; position:relative; }
.cross-sell-text .label{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color: var(--yellow); font-weight:700; margin-bottom:8px; }
.cross-sell-text p{ color:#fff; font-size:18px; line-height:1.6; max-width: 62ch; }
.cross-sell .btn{ position:relative; flex-shrink:0; }

/* ===================== Quote / pull-quote block (reused) ===================== */
.pull-quote{
  font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px); line-height:1.48; color: var(--ink);
  padding-left: 34px; border-left: 3px solid var(--green);
}

/* ===================== Why Vibrant (Home) ===================== */
.why-inner{ display:grid; grid-template-columns: 0.82fr 1.55fr; gap: 60px; align-items:start; }
/* Scoped down from the shared .pull-quote size (36px) to ~32px so the quote
   block's height roughly matches the values-grid column beside it — weight,
   line-height and the green accent border are untouched (from .pull-quote).
   Scoped to .why so this doesn't affect About's unrelated .pull-quote. */
.why .pull-quote{ font-size: clamp(23px, 2.5vw, 32px); }
.values-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; }
.value-item{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.value-item .icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:#fff; border:1px solid var(--gray-200); display:flex; align-items:center; justify-content:center; color: var(--blue);
}
.value-item h4{ font-size: 20.8px; margin-bottom: 8px; font-family: var(--font-body); font-weight:600; }
.value-item p{ font-size: 17.6px; color: var(--ink-soft); line-height:1.55; max-width: none; }

/* ===================== Testimonials — heading left, card right ===================== */
#testimonials .ts-layout{ display:grid; grid-template-columns: 0.8fr 1.25fr; gap: 60px; align-items:center; }
#testimonials .ts-layout .section-head{ margin-bottom: 0; }
.testimonial-spotlight{
  max-width: none; margin: 0; position:relative;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 22px;
  padding: 42px 42px 34px; box-shadow: 0 34px 66px -38px rgba(18,24,29,.24);
}
@media (max-width: 980px){
  #testimonials .ts-layout{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px){
  .testimonial-spotlight{ padding: 30px 26px 26px; }
}
.ts-slides{ cursor: grab; touch-action: pan-y; user-select: none; }
.ts-slides:active{ cursor: grabbing; }
.ts-slide{ display:none; }
.ts-slide.is-active{ display:block; animation: tsFade .6s var(--ease); }
@keyframes tsFade{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }
.ts-quote{
  font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); line-height:1.5; color: var(--ink);
  padding-left: 34px; border-left: 3px solid var(--green); min-height: 2em;
}
#testimonials .ts-quote{ padding-left: 0; border-left: none; min-height: 0; }
#testimonials .ts-quote::before{
  content: '\201C'; display:block; font-family: var(--font-display); color: var(--green);
  font-size: 3em; line-height: 0.9; height: 0.62em; overflow: hidden; margin-bottom: 6px;
}
/* Home's testimonial card reads a little large next to the name/role below it —
   trimmed ~12% off the shared .ts-quote size (34px cap → 30px). Scoped to
   .page-home so About's identical #testimonials markup is untouched. */
.page-home #testimonials .ts-quote{ font-size: clamp(23px, 2.3vw, 30px); }
.ts-person{ display:flex; align-items:center; gap:16px; margin-top: 40px; padding-left: 34px; }
#testimonials .ts-person{ padding-left: 0; margin-top: 28px; }
#testimonials .ts-controls{ padding-left: 0; margin-top: 30px; }
#testimonials .t-note{ padding-left: 0; margin-top: 22px; }
.ts-avatar{
  width:52px; height:52px; border-radius:50%; background: linear-gradient(135deg, var(--blue), var(--lavender));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family: var(--font-display); font-size:18px; flex-shrink:0;
}
.ts-name{ font-size: 18.5px; font-weight:600; }
.ts-role{ font-size: 15.5px; color: var(--ink-soft); }

.ts-controls{ display:flex; align-items:center; gap: 26px; margin-top: 52px; padding-left: 34px; }
.ts-arrow{
  width: 54px; height:54px; border-radius:50%; border:1.5px solid var(--ink); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(18,24,29,.35);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.ts-arrow svg{ width:20px; height:20px; }
.ts-arrow:hover{ background: var(--ink); color:#fff; transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 30px -14px rgba(18,24,29,.5); }
.ts-arrow:active{ transform: translateY(-1px) scale(.98); }
.ts-dots{ display:flex; align-items:center; gap: 10px; }
.ts-dot{ width:11px; height:11px; border-radius:50%; background: var(--gray-200); border: 1.5px solid transparent; cursor:pointer; padding:0; transition: all .35s var(--ease); }
.ts-dot:hover{ background: var(--blue); }
.ts-dot.is-active{ width: 34px; border-radius: 6px; background: var(--green); }
.t-note{ margin-top: 40px; padding-left: 34px; font-size: 15.5px; color: var(--gray-400); font-style: italic; }

/* ===================== Closing CTA — always full width ===================== */
.cta-band{
  background: var(--ink); text-align:center; position:relative; overflow:hidden;
  padding: 130px 0;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 50% -20%, rgba(66,244,129,.25), transparent 55%);
}
.cta-band h2{ color:#fff; font-size: 46px; position:relative; max-width: 18ch; margin: 0 auto;}
.cta-band p{ color: rgba(255,255,255,.68); margin: 22px auto 0; max-width: 50ch; font-size: 18px; font-weight: 400; line-height: 1.65; position:relative; }
.cta-band .actions{ margin-top: 40px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ===================== Category tiles (Services hub) ===================== */
.category-tiles{ display:grid; grid-template-columns: repeat(6, 1fr); row-gap: 44px; column-gap: 24px; align-items: stretch; }
.cat-tile{
  grid-column: span 3; border: 1px solid var(--gray-200); border-radius: 24px; padding: 44px 40px;
  display:flex; flex-direction:column; background: var(--paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
  position:relative; overflow:hidden;
}
.cat-tile:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(18,24,29,.25); border-color: transparent; }
.cat-tile.large{ grid-column: span 4; }
.cat-tile.small{ grid-column: span 2; }
.cat-tile.full{ grid-column: span 6; }
.cat-tile .icon{
  width:56px; height:56px; border-radius:16px; background: var(--ink); color: var(--green);
  display:flex; align-items:center; justify-content:center; margin-bottom: 28px;
  transition: transform .4s var(--ease);
}
.cat-tile:hover .icon{ transform: translateY(-4px) rotate(-4deg); }
.cat-tile h3{ font-size: 24px; margin-bottom: 12px; }
.cat-tile p{ font-size: 16px; color: var(--ink-soft); line-height:1.6; flex:1; }
.cat-tile .go{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color: var(--blue-dark); }
.cat-tile .go svg{ transition: transform .3s var(--ease); }
.cat-tile:hover .go svg{ transform: translateX(5px); }

/* ===================== Card trio (Editorial Services) ===================== */
.card-trio{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trio-card{
  border: 1px solid var(--gray-200); border-radius: 24px; padding: 42px 34px; background:#fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.trio-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(18,24,29,.2); }
.trio-card .icon{
  width:52px; height:52px; border-radius:14px; background: var(--paper-warm); color: var(--blue-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom: 26px;
}
.trio-card h3{ font-size: 22px; margin-bottom: 12px; }
.trio-card p{ font-size: 16px; color: var(--ink-soft); line-height:1.65; }

/* ===================== Tools row (Production Services) ===================== */
.tools-row{ display:flex; flex-wrap:wrap; gap: 16px; }
.tool-pill{
  display:flex; align-items:center; gap:12px; padding: 16px 26px; border-radius: 999px;
  border: 1.5px solid var(--gray-200); font-family: var(--font-display); font-weight:600; font-size:18px;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.tool-pill:hover{ border-color: var(--blue); background: rgba(0,184,214,.06); transform: translateY(-3px); }
.tool-pill .dot{ width:8px; height:8px; border-radius:50%; background: var(--green); }
.language-note{
  margin-top: 40px; padding: 24px 28px; border-radius: 16px; background: var(--paper-warm);
  font-size: 16px; color: var(--ink-soft); display:flex; align-items:center; gap:14px;
}

/* ===================== Standards grid (Accessibility Services) =============
   A wrapping row of compact framework cards + a highlighted testing note.
   Restyled from the shared .tool-pill chips (production-services keeps those):
   same 1.5px border, display-font label and blue hover; the note reuses the
   .language-note treatment. Accessibility-only. */
.std-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 up (7 cards -> 4 + 3) */
  gap: 16px;
}
.std-card{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border: 1.5px solid var(--gray-200); border-radius: 14px;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.std-card:hover{
  border-color: var(--blue);
  background: rgba(0, 184, 214, .06);
  transform: translateY(-3px);
}
.std-card__icon{
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center; color: var(--blue-dark);
}
.std-card__icon svg{ width: 100%; height: 100%; }
.std-card__label{ display: flex; flex-direction: column; gap: 2px; line-height: 1.25; min-width: 0; }
.std-card__label .l{
  font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink);
  white-space: nowrap;
}
.std-card__label .s{ font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

.std-note{
  margin-top: 40px;
  display: flex; align-items: center; gap: 14px;
  padding: 24px 28px;
  border-radius: 16px; background: var(--paper-warm);
}
.std-note__icon{
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(0, 184, 214, .12); color: var(--blue-dark);
}
.std-note p{ font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.std-note strong{ color: var(--blue-dark); font-weight: 600; }

/* ===================== Checklist (BPM) ===================== */
.checklist{ display:flex; flex-direction:column; gap: 4px; }
.check-item{
  display:flex; gap:20px; align-items:flex-start; padding: 28px 0; border-top: 1px solid var(--gray-200);
}
.check-item:last-child{ border-bottom: 1px solid var(--gray-200); }
.check-item .tick{
  width:32px; height:32px; border-radius:50%; background: var(--green); color: var(--ink); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.check-item h3{ font-size: 20px; margin-bottom: 6px; }
.check-item p{ font-size: 16px; color: var(--ink-soft); line-height:1.6; max-width: 60ch; }

/* ===================== Capability cards (IT Services — refined 2026-09-15) =====================
   Nine editorial panels — restrained glass, but with more room to breathe
   than the first pass: bigger padding/icon/type, a livelier hover (icon
   nudges up + brightens, border shifts to green, subtle lift). Page-
   exclusive class, safe to resize/restyle here. */
.capability-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.capability-card{
  border-radius: 22px; padding: 36px 32px; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  position:relative; overflow:hidden; transition: transform .35s var(--ease), border-color .35s ease, background .35s ease;
}
.capability-card:hover{ transform: translateY(-5px); border-color: rgba(66,244,129,.4); background: rgba(255,255,255,.075); }
.capability-card .icon{
  width:46px; height:46px; border-radius:13px; background: rgba(0,184,214,.12); color: var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom: 22px; position:relative;
  transition: transform .35s var(--ease), background .35s ease, color .35s ease;
}
.capability-card:hover .icon{ transform: translateY(-3px); background: rgba(66,244,129,.16); color: var(--green); }
.capability-card h3{ color:#fff; font-size: 19.5px; margin-bottom: 10px; position:relative; }
.capability-card p{ color: rgba(255,255,255,.62); font-size: 15px; line-height:1.65; position:relative; }
@media (max-width: 1024px){ .capability-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .capability-cards{ grid-template-columns: 1fr; } }

/* =========================================================
   IT SERVICES PAGE (technology-solutions.html) — 2026-09-15 redesign
   Everything below is prefixed `.its-` and used only on this page,
   built from CSS/SVG (no photography) per the "no stock photo" brief.
   Reuses .hero-split / .on-warm / .on-ink / .eyebrow / .section-head /
   .process-steps / .cta-band / .btn from the shared design system.
========================================================= */

/* ---- 1. Hero photo (2026-09-16) — real desk/workstation photo replaces the
   hand-built laptop illustration, same .hero-photo + left-weighted .hero-wash
   scrim technique used on the homepage and Manga Studio hero. Single-column
   split since the photo is now the full-bleed background, not a right-side
   media box. ---- */
.page-it-services .hero-split .hero-split-inner{ grid-template-columns: 1fr; }
.page-it-services .hero-bg{ display: none; }
.page-it-services .hero-photo{
  position: absolute; inset: 0; z-index: 0;
  background: #081a1f url("hero-it-services.png") center right / cover no-repeat;
}
.page-it-services .hero-grain{ opacity: .2; }
.page-it-services .hero-wash{
  background:
    linear-gradient(90deg, rgba(8,26,31,.97) 0%, rgba(8,26,31,.93) 40%, rgba(8,26,31,.72) 56%, rgba(8,26,31,.32) 76%, rgba(8,26,31,0) 94%),
    linear-gradient(180deg, rgba(8,26,31,.34) 0%, rgba(8,26,31,.46) 55%, rgba(8,26,31,.66) 100%);
}
@media (max-width: 900px){
  .page-it-services .hero-photo{ background-position: 68% center; }
  .page-it-services .hero-wash{
    background: linear-gradient(180deg, rgba(8,26,31,.72) 0%, rgba(8,26,31,.8) 45%, rgba(8,26,31,.87) 100%);
  }
}
@media (prefers-reduced-motion: no-preference){
  .its-tag--target::before{
    content:''; position:absolute; inset:-4px; border-radius:inherit; border:1px solid rgba(66,244,129,.5);
    animation: itsPulse 2.6s ease-out infinite;
  }
}
@keyframes itsPulse{ 0%{ opacity:.7; transform:scale(1); } 100%{ opacity:0; transform:scale(1.18); } }

/* ---- 2. Extended engineering intro ---- */
.its-intro-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items:start; }
.its-intro-grid h2{ font-size: 44px; margin-bottom: 20px; }
.its-intro-grid h2 em{ color: var(--green); font-style: normal; }
.its-intro-grid > div > p{ font-size:18px; line-height:1.75; color: var(--ink-soft); max-width: 56ch; }
.its-value-list{
  display:flex; flex-direction:column; gap:0;
  border-left: 1px solid var(--gray-200); padding-left: 32px;
}
.its-value-item{
  display:flex; align-items:center; gap:14px;
  padding: 17px 0; border-bottom: 1px solid var(--gray-200);
  font-size: 16.5px; font-weight:600; color: var(--ink);
}
.its-value-item:last-child{ border-bottom:none; }
.its-value-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  background:#fff; border:1px solid var(--gray-200); color: var(--blue-dark);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width: 900px){
  .its-intro-grid{ grid-template-columns: 1fr; gap: 40px; }
  .its-value-list{ border-left:none; padding-left:0; border-top: 1px solid var(--gray-200); padding-top: 20px; }
}

/* ---- 4. Startup / Enterprise ---- */
.its-stage-section{
  position:relative; overflow:hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  background-color: var(--ink);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E"),
    radial-gradient(120% 120% at 85% 0%, #0e2f38 0%, var(--ink) 55%);
  background-repeat: repeat, no-repeat;
  background-size: 34px 34px, 120% 120%;
  background-position: 0 0, 85% 0%;
}
.its-stage-section::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:-20%; right:-10%; width:60%; aspect-ratio:1;
  background: radial-gradient(circle, rgba(66,244,129,.09), transparent 68%);
}
.its-stage-section .wrap{ position:relative; z-index:1; }
.its-stage-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.its-stage-card{
  border-radius: 24px; padding: 44px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-top: 2px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .35s var(--ease), border-color .35s ease;
}
.its-stage-card--startup{ border-top-color: rgba(0,184,214,.55); }
.its-stage-card--startup:hover{ border-color: rgba(0,184,214,.4); }
.its-stage-card--startup:hover{ transform: translateY(-4px); }
.its-stage-card--enterprise{ border-top-color: rgba(66,244,129,.55); }
.its-stage-card--enterprise:hover{ transform: translateY(-4px); border-color: rgba(66,244,129,.4); }
.its-stage-card .eyebrow{ margin-bottom: 14px; }
.its-stage-card h3{ color:#fff; font-size: 27px; margin-bottom: 16px; max-width: 20ch; }
.its-stage-card p{ color: rgba(255,255,255,.65); font-size: 16px; line-height:1.65; margin-bottom: 24px; }
.its-journey{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color: rgba(255,255,255,.45);
  padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.1);
}
.its-journey span{ position:relative; padding-right:20px; }
.its-journey span::after{ content:'→'; position:absolute; right:0; color: rgba(255,255,255,.25); }
.its-journey span:last-child{ padding-right:0; }
.its-journey span:last-child::after{ content:none; }
.its-journey span:last-child{ color: var(--green); }
@media (max-width: 900px){ .its-stage-grid{ grid-template-columns: 1fr; } }

/* ---- 5. M365 ecosystem ---- */
.its-m365-head{ display:flex; align-items:center; justify-content:space-between; gap: 40px; margin-bottom: 52px; }
.its-m365-head > div{ max-width: 640px; }
.its-m365-head h2{ font-size: 42px; margin-top: 6px; }
.its-m365-head p{ margin-top: 18px; font-size: 17.5px; line-height:1.7; color: var(--ink-soft); }
.its-m365-badge{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  font-size: 17px; font-weight:600; color: var(--ink-soft); white-space:nowrap;
}
.its-m365-badge img{ display:block; height:44px; width:auto; }
.its-m365-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.its-m365-panel{
  background:#fff; border: 1px solid var(--gray-200); border-radius: 22px; padding: 40px 38px;
  box-shadow: 0 28px 56px -34px rgba(18,24,29,.22);
}
.its-m365-panel h3{ font-size: 20px; margin-bottom: 22px; padding-bottom:18px; border-bottom:1px solid var(--gray-200); }
.its-m365-item{ display:flex; gap:16px; padding: 16px 0; align-items:flex-start; }
.its-m365-item + .its-m365-item{ border-top: 1px solid var(--gray-100); }
.its-m365-item .icon{
  flex-shrink:0; width:34px; height:34px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
}
.its-m365-item .icon svg, .its-m365-item .icon img{ width:100%; height:100%; object-fit:contain; }
.its-m365-item strong{ display:block; font-size: 16px; font-weight:600; margin-bottom:4px; }
.its-m365-item p{ font-size: 14.8px; color: var(--ink-soft); line-height:1.6; }
@media (max-width: 900px){
  .its-m365-head{ flex-direction:column; }
  .its-m365-grid{ grid-template-columns: 1fr; }
}

/* ===================== Process steps (How it works) ===================== */
.process-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items:flex-start; }
.process-step{ position:relative; padding: 8px 28px 8px 0; }
.process-step .ps-num{
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:17px; margin-bottom: 22px;
}
.process-step h3{ font-family: var(--font-body); font-size:21px; margin-bottom:10px; }
.process-step p{ font-size:15.5px; color: var(--ink-soft); line-height:1.6; }
.process-step .ps-arrow{ position:absolute; top:22px; right:-6px; color: var(--gray-200); display:none; }

/* IT Services "How it works" — left-aligned head, horizontal row per step (num beside
   copy) with hairline dividers between columns, per client comp. Scoped to this page
   since .process-steps/.process-step/.ps-num are shared by 6+ other pages. */
.page-it-services #how-it-works .section-head{ margin-left:0; margin-right:0; text-align:left; }
.page-it-services #how-it-works .eyebrow{ justify-content:flex-start; }
.page-it-services #how-it-works .process-steps{ gap:0; margin-top: 56px; }
.page-it-services #how-it-works .process-step{
  display:flex; align-items:flex-start; gap:20px;
  padding: 0 36px; border-left: 1px solid var(--gray-200);
}
.page-it-services #how-it-works .process-step:first-child{ border-left:none; padding-left:0; }
.page-it-services #how-it-works .process-step .ps-num{
  width:36px; height:36px; font-size:14px; font-weight:600; margin-bottom:0; flex-shrink:0;
  border-color: var(--gray-300); color: var(--ink-soft);
}
.page-it-services #how-it-works .process-step h3{ font-size:19px; margin-bottom:6px; }
.page-it-services #how-it-works .process-step .step-lead{ font-size:15.5px; font-weight:600; color: var(--ink); margin-bottom:8px; line-height:1.5; }
.page-it-services #how-it-works .process-step p{ font-size:14.5px; }
@media (max-width: 900px){
  .page-it-services #how-it-works .process-steps{ grid-template-columns: 1fr; gap:32px; margin-top:36px; }
  .page-it-services #how-it-works .process-step{
    border-left:none; padding:24px 0 0; border-top: 1px solid var(--gray-200);
  }
  .page-it-services #how-it-works .process-step:first-child{ padding-top:0; border-top:none; }
}

/* ===================== Contact split layout ===================== */
.contact-split{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items:start; }
.interest-select{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 32px; }
.interest-option{
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--gray-200); font-size: 15px; font-weight:600;
  cursor:pointer; transition: all .3s ease; background:#fff;
}
.interest-option input{ display:none; }
.interest-option:has(input:checked){ background: var(--ink); border-color: var(--ink); color:#fff; }
.field{ margin-bottom: 22px; }
.field label{ display:block; font-size: 14px; font-weight:600; margin-bottom: 8px; color: var(--ink-soft); }
.field input, .field textarea{
  width:100%; padding: 15px 18px; border-radius: 12px; border: 1.5px solid var(--gray-200);
  font-family: var(--font-body); font-size: 15.5px; color: var(--ink); background:#fff;
  transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--blue); }
.field textarea{ resize: vertical; min-height: 130px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note{ margin-top: 18px; font-size: 13.5px; color: var(--gray-400); }
.form-success{ display:none; padding: 18px 22px; border-radius: 14px; background: rgba(66,244,129,.15); color: var(--green-dark); font-weight:600; margin-bottom: 20px; }
.form-success.show{ display:block; }

.contact-info{ display:flex; flex-direction:column; gap: 28px; }
.info-card{ border: 1px solid var(--gray-200); border-radius: 20px; padding: 30px; }
.info-card .icon{ width:44px; height:44px; border-radius:12px; background: var(--paper-warm); color: var(--blue-dark); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.info-card h4{ font-size:17px; margin-bottom:6px; font-family: var(--font-body); font-weight:600; }
.info-card p{ font-size: 15px; color: var(--ink-soft); line-height:1.6; }
.info-card p a{ color: var(--blue-dark); text-decoration: none; transition: color .25s ease; }
.info-card p a:hover{ color: var(--blue); text-decoration: underline; }

/* ===================== Footer ===================== */
/* Dark footer (2026-09-01): most pages close with .cta-band (flat var(--ink), neutral near-black)
   directly above the footer, so the footer uses a distinctly different, hue-shifted dark — the
   same deep-teal gradient already established for tech-banner/hero-tech — rather than repeating
   .cta-band's tone. That hue break plus a soft hairline keeps the two dark sections from reading
   as one flat block while both stay dark, per the site's now-established "dark sections for
   separation" language (see #who on Content Development). */
footer{
  padding: 70px 0 34px;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(18,24,29,0) 200px),
    radial-gradient(120% 160% at 15% 0%, #124a58 0%, #0B3B45 45%, #081f26 100%);
  background-color: var(--ink);
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 50px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand .logo{ margin-bottom: 16px; }
.footer-brand p{ font-size: 14.5px; color: rgba(255,255,255,.65); max-width: 30ch; line-height:1.6; }
.footer-col h5{ font-size: 16.9px; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.45); margin-bottom: 18px; }
.footer-col a{ display:block; font-size: 15px; color: rgba(255,255,255,.78); margin-bottom: 12px; transition: color .25s ease; }
.footer-col a:hover{ color: var(--green); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 26px; font-size: 13.5px; color: rgba(255,255,255,.45); flex-wrap:wrap; gap:12px; }
.footer-legal{ display:flex; align-items:center; gap: 22px; }
.footer-legal a{ color: rgba(255,255,255,.55); font-size: 13.5px; transition: color .25s ease; }
.footer-legal a:hover{ color: var(--green); }

/* ===================== Responsive ===================== */
@media (max-width: 980px){
  .wrap{ padding: 0 24px; }
  .nav-right{ margin-left: auto; }

  /* =========================================================
     MOBILE NAVIGATION — true full-screen opaque overlay drawer
     The existing site-nav bar (logo + hamburger/X) is floated above
     the overlay when open and acts as the drawer header. Services is
     a tap accordion, collapsed by default. z-index is deliberately
     far above the project's normal range (max ~200) per the overlay
     recommendation, and only raised while the menu is open.
  ========================================================= */
  .nav-links{
    position: fixed; inset: 0;
    min-height: 100vh; min-height: 100dvh;
    margin: 0; z-index: 9990;
    background: var(--ink);            /* fully opaque — nothing shows through */
    display: flex; flex-direction: column; align-items: center;
    padding: 0; gap: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity .22s ease-out, visibility 0s linear .24s;
  }
  .nav-links.open{
    visibility: visible; opacity: 1;
    transition: opacity .24s ease-out, visibility 0s linear 0s;
  }
  .nav-links:focus{ outline: none; }   /* container is only a programmatic focus target */
  /* the rows settle slightly upward into place (opaque backdrop just fades) */
  .nav-links > *{ transform: translateY(12px); transition: transform .28s ease-out; }
  .nav-links.open > *{ transform: translateY(0); }

  /* one shared horizontal container: each row ≤ 420px content + 24px gutters,
     centred on wider phones, with hairline dividers between items */
  .nav-links > *{
    width: 100%; max-width: 468px;
    border-top: 1px solid rgba(255,255,255,.09);
  }
  .nav-links > *:first-child{ margin-top: 78px; }   /* clear the fixed header bar */
  .nav-links > *:last-child{ border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 44px; }

  /* primary items */
  .nav-links a{
    font-size: 19px; font-weight: 500; color: #fff;
    display: block; text-align: left;
  }
  .nav-links a::after{ display: none; }               /* no desktop underline sweep */
  .nav-links > a{ padding: 15px 24px; }               /* BPM / Technology Solutions / About / Contact */
  .nav-item{ display: block; padding: 0 24px; }       /* Services row gutter */
  .nav-item > a{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 0;
  }
  .nav-item > a .caret{ display: none; }

  /* Services accordion trigger: +  /  −  on the right */
  .nav-item.has-dropdown > a::before{
    content: "+"; order: 2; width: 22px; text-align: center;
    font-size: 22px; font-weight: 400; line-height: 1;
    color: rgba(255,255,255,.5); transition: color .2s ease;
  }
  .nav-item.has-dropdown.is-open > a::before{ content: "\2212"; color: #fff; }

  /* Services submenu: collapsed by default, smooth open, not tabbable while closed */
  .nav-item.has-dropdown .nav-dropdown{
    position: static; left: auto; transform: none; min-width: 0; padding-top: 0;
    pointer-events: auto;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s ease, visibility 0s linear .3s;
  }
  .nav-item.has-dropdown.is-open .nav-dropdown{
    max-height: 520px; visibility: visible;
    transition: max-height .3s ease, visibility 0s linear 0s;
  }
  .nav-dropdown-panel{
    margin: 0; background: transparent; border: none; box-shadow: none;
    padding: 2px 0 12px; gap: 0; align-items: stretch;
    opacity: 1; transform: none;   /* desktop uses a springy pop */
  }
  header.site-nav .nav-dropdown a{
    display: flex; align-items: center; gap: 12px;
    opacity: 1; transform: none; transition: color .18s ease;   /* desktop uses a staggered deal-out */
    color: rgba(255,255,255,.62) !important; font-size: 14.5px; font-weight: 400;
    padding: 10px 0 10px 16px; border: none; text-align: left; white-space: normal;
  }
  header.site-nav .nav-dropdown a + a{ border-top: none; }   /* no hairlines inside the mobile accordion */
  .nav-item:hover .nav-dropdown a, .nav-item:focus-within .nav-dropdown a{ transform: none; transition-delay: 0s; }
  header.site-nav .nav-dropdown a::before{ display: none; }   /* no accent bar on mobile */
  header.site-nav .nav-dropdown .nd-ic{
    flex: none; width: 22px; height: 22px; border-radius: 0;
    background: none; color: var(--blue);   /* bare brand-blue icon on the dark menu */
  }
  header.site-nav .nav-dropdown .nd-ic svg{ width: 15px; height: 15px; }
  header.site-nav .nav-dropdown a:hover,
  header.site-nav .nav-dropdown a:focus-visible{ background: none; color: #fff !important; }
  header.site-nav .nav-dropdown a:hover .nd-ic,
  header.site-nav .nav-dropdown a:focus-visible .nd-ic{ background: none; color: var(--blue); transform: none; }
  header.site-nav .nav-dropdown a:hover .nd-label,
  header.site-nav .nav-dropdown a:focus-visible .nd-label{ transform: none; }

  /* hamburger → X toggle (also the close button); stays above the overlay */
  .nav-toggle{
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 28px; height: 28px; padding: 0; border: 0; background: none;
    z-index: 10000; cursor: pointer;
  }
  .nav-toggle span{
    height: 2px; width: 100%; background: currentColor; color: #fff; border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease, background .3s ease;
  }
  header.site-nav.solid .nav-toggle span, header.site-nav.on-light .nav-toggle span{ background: var(--ink); }
  .nav-toggle.active span{ background: #fff !important; }
  .nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity: 0; }
  .nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* while open: lock scroll + float the nav bar (logo + X) above the overlay,
     forced to the dark-transparent treatment regardless of scroll state */
  body.nav-open{ overflow: hidden; }
  body.nav-open header.site-nav{
    z-index: 9999; padding: 18px 0 !important;
    background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: transparent !important; box-shadow: none !important;
  }
  body.nav-open header.site-nav .logo,
  body.nav-open header.site-nav .nav-right{ position: relative; z-index: 10000; }
  body.nav-open header.site-nav .logo{ color: #fff !important; }
  body.nav-open header.site-nav .nav-toggle span{ background: #fff !important; }

  @media (prefers-reduced-motion: reduce){
    .nav-links, .nav-links.open{ transition: opacity .01ms, visibility 0s; }
    .nav-links > *, .nav-links.open > *{ transform: none; transition: none; }
    .nav-item.has-dropdown .nav-dropdown,
    .nav-item.has-dropdown.is-open .nav-dropdown{ transition: max-height 0s, visibility 0s; }
    .nav-toggle span{ transition: none; }
  }
  .services-layout{ grid-template-columns: 1fr; gap: 50px; }
  .services-left{ position: static; top: auto; }
  .tech-banner{ grid-template-columns: 1fr; gap: 40px; }
  .why-inner{ grid-template-columns: 1fr; gap: 46px; }
  .values-grid{ grid-template-columns: 1fr 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .category-tiles{ grid-template-columns: 1fr 1fr; }
  .cat-tile, .cat-tile.large, .cat-tile.small, .cat-tile.full{ grid-column: span 1; }
  .card-trio{ grid-template-columns: 1fr; }
  /* .capability-cards column-count is now owned by its own breakpoints
     (2026-09-15 redesign, 9-card grid: see the @media rules right after
     .capability-card above) rather than this generic 900px block. */
  .process-steps{ grid-template-columns: 1fr; gap: 40px; }
  .contact-split{ grid-template-columns: 1fr; gap: 56px; }
  .std-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  section{ padding: 90px 0; }
  section.tight{ padding: 60px 0; }
  .services-items{ gap: 16px; }
  .values-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .hero-ctas{ flex-direction:column; align-items: stretch; }
  .cta-band{ padding: 90px 0; }
  .field-row{ grid-template-columns: 1fr; }
  .std-grid{ grid-template-columns: 1fr 1fr; }
  .std-note{ align-items: flex-start; }
  .category-tiles{ grid-template-columns: 1fr; }
  .cat-tile, .cat-tile.large, .cat-tile.small, .cat-tile.full{ grid-column: span 1; padding: 32px 28px; }
  .cross-sell{ flex-direction:column; align-items:flex-start; padding: 32px 28px; gap:20px; }
  .cross-sell-text{ min-width: 0; }
  .cross-sell .btn{ width:100%; text-align:center; justify-content:center; white-space:normal; }
  .card-trio, .card-trio.two-col{ grid-template-columns: 1fr; }
}
@media (max-width: 400px){
  .hero-content h1{ font-size: clamp(38px, 11vw, 52px); }
  .hero-sub{ font-size: 17px; }
  .logo-img{ height: 30px; }
}

/* ===================== Extra: two-column card variant (About) ===================== */
.card-trio.two-col{ grid-template-columns: 1fr 1fr; }
@media (max-width: 760px){
  .card-trio.two-col{ grid-template-columns: 1fr; }
}

/* ===================== Extra: inline note strip (placeholder flags) ===================== */
.note-strip{
  display:flex; align-items:flex-start; gap:14px; margin-top: 28px; padding: 20px 24px;
  border-radius: 14px; background: rgba(245,226,86,.16); border: 1px solid rgba(245,226,86,.4);
  font-size: 14.5px; color: var(--ink-soft); line-height:1.6;
}
.note-strip svg{ flex-shrink:0; color: #a8871a; margin-top:2px; }

/* ===================== Extra: prose block ===================== */
.prose{ max-width: 74ch; }
.prose p{ font-size: 18px; line-height:1.8; color: var(--ink-soft); margin-bottom: 22px; }
.prose p:last-child{ margin-bottom:0; }

/* ===================== Extra: creative swatch accent (Creative Services cards) ===================== */
.trio-card .swatch{ height: 64px; border-radius: 12px; margin-bottom: 22px; }

/* ===================== BPM — "What's included" editorial card grid =====================
   Replaces the old asymmetric bento grid (2-then-3 span layout, rainbow per-item badge
   gradients) with a calmer, more premium 3-then-2-centered row: flexbox with justify-
   content:center so the last two cards centre themselves under the first three rather
   than needing manual grid-column math. Icon tile matches every other page's single
   --blue-dark icon language instead of the old per-card gradient badges — "not overly
   colourful" per the 2026-09-04 redesign brief. */
.bpm-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; }
.bpm-card{
  flex: 1 1 calc((100% - 56px) / 3); max-width: calc((100% - 56px) / 3); min-width: 260px;
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--gray-200); border-radius:20px;
  padding: 40px 34px 34px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.bpm-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -32px rgba(18,24,29,.2); border-color: rgba(0,184,214,.4); }
.bpm-card .bpm-num{
  position:absolute; top:2px; right:22px; font-family: var(--font-display); font-weight:700;
  font-size:68px; color: var(--gray-100); line-height:1; z-index:0; user-select:none;
}
.bpm-card .bpm-icon{
  width:58px; height:58px; border-radius:14px; background: var(--paper-warm); color: var(--blue-dark);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1; margin-bottom:22px;
}
.bpm-card .bpm-icon svg{ width:28px; height:28px; }
.bpm-card h3{ font-size:22px; margin-bottom:10px; position:relative; z-index:1; }
.bpm-card p{ font-size:15.5px; color:var(--ink-soft); line-height:1.65; position:relative; z-index:1; }
.bpm-card .ai-tag{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:7px 14px; border-radius:999px;
  background: rgba(66,244,129,.15); color: var(--green-dark); font-size:12.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; position:relative; z-index:1;
}
@media (max-width: 980px){
  .bpm-card{ flex-basis: calc((100% - 28px) / 2); max-width: calc((100% - 28px) / 2); }
}
@media (max-width: 640px){
  .bpm-card{ flex-basis: 100%; max-width: 100%; padding: 32px 28px; }
  .bpm-card .bpm-num{ font-size:56px; }
}

/* ===================== Audience row (Who this is for) ===================== */
.audience-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.audience-item{ padding: 34px 32px; border-left: 1px solid var(--gray-200); }
.audience-item:first-child{ border-left: none; }
.audience-item .icon{
  width:40px; height:40px; border-radius:11px; background: var(--paper-warm); color: var(--blue-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.audience-item h4{ font-size: 17px; margin-bottom: 8px; font-family: var(--font-body); font-weight:600; }
.audience-item p{ font-size: 14.5px; color: var(--ink-soft); line-height:1.6; }

/* ===================== FAQ accordion ===================== */
.faq-list{ max-width: 800px; }
.faq-item{
  border-top: 1px solid var(--gray-200);
}
.faq-item:last-child{ border-bottom: 1px solid var(--gray-200); }
.faq-item summary{
  list-style:none; cursor:pointer; padding: 26px 4px; display:flex; align-items:center; justify-content:space-between; gap: 20px;
  font-family: var(--font-display); font-weight:600; font-size: 18px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex-shrink:0; transition: transform .35s var(--ease); color: var(--blue-dark); }
.faq-item[open] summary .chev{ transform: rotate(180deg); }
.faq-item .faq-answer{ padding: 0 4px 26px; font-size: 15.5px; color: var(--ink-soft); line-height:1.7; max-width: 68ch; }

@media (max-width: 860px){
  .audience-list{ grid-template-columns: 1fr; }
  .audience-item{ border-left: none; border-top: 1px solid var(--gray-200); }
  .audience-item:first-child{ border-top: none; }
}

/* ===================== "What's included" — two-column split (.whats-split) =====================
   First built for Content Development, then generalised (2026-09-02) so other service pages can
   opt in. Add class="whats-split" to the <section id="sub-services"> and wrap the heading block
   + the item list in <div class="wrap whats-split-inner">: left column = eyebrow + heading +
   intro line; right column = a vertical list where each item's icon sits inline to the LEFT of
   its title with the copy beneath, hairline between items. Icons use the brand blue
   (var(--blue-dark), the site-wide icon-accent colour). Anything after the grid (voice-note,
   catch-block on Editorial) goes in its own following <div class="wrap">. Scoped to
   .whats-split so pages that don't opt in are untouched. */
.whats-split .whats-split-inner{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px 80px; align-items:start;
}
.whats-split .whats-split-inner .section-head{ margin-bottom: 0; max-width: none; }

.whats-split .icon-trio{ display:flex; flex-direction:column; gap:0; }
.whats-split .icon-trio-item{
  display:grid; grid-template-columns: 28px 1fr; column-gap:16px; row-gap:8px;
  padding: 26px 0;
}
.whats-split .icon-trio-item + .icon-trio-item{ border-top:1px solid var(--gray-200); }
.whats-split .icon-trio-item:first-child{ padding-top:2px; }
.whats-split .icon-trio-item:last-child{ padding-bottom:2px; }
.whats-split .icon-trio-item .item-icon{
  grid-column:1; grid-row:1; align-self:center;
  width:28px; height:28px; margin:0; color: var(--blue-dark);
  display:flex; align-items:center; justify-content:center;
}
.whats-split .icon-trio-item .item-icon svg{ width:100%; height:100%; }
.whats-split .icon-trio-item h3{
  grid-column:2; grid-row:1; align-self:center;
  font-family: var(--font-body); font-size: 22px; margin:0;
}
/* User instruction (2026-09-02): every h3 on this page — not just the icon-trio ones above —
   should be Inter at 22px. The remaining h3s live in the shared .process-step component (used
   on 6 other pages too), so overridden page-scoped here rather than in the shared rule. Font
   and size unchanged below (2026-09-02 numeral update) — only position/z-index added so the
   heading paints over the big overlapping numeral in normal flow, same as the h3 in the .step-num
   rule right below. */
.page-content-development .process-step h3{ font-family: var(--font-body); font-size: 22px; position:relative; z-index:2; }

/* Content Development "How it works" — horizontal 3-up (2026-09-02, revised). User comp:
   one header row per step — a large pale-green numeral beside a thin-outline icon circle
   (identical treatment on all three steps: 1.5px hairline ring, white fill, dark line
   icon — no filled/green variant), and a long finely-dashed arrow that starts just past
   one step's icon and lands its arrowhead just before the next step's numeral. Title and
   copy sit beneath. h3 / p font, size and colour stay untouched per the earlier
   instruction. Scoped to .page-content-development; .step-head/.step-num/.step-icon exist
   only in this page's markup. Below the shared 3->1 column break (<=980px) the arrows are
   hidden and steps stack. */
.page-content-development .process-steps{ gap: 44px 80px; align-items: flex-start; }
.page-content-development .process-step{ position:relative; padding: 0; }
.page-content-development .process-step .step-head{
  display:flex; align-items:center; gap:16px; margin-bottom: 20px;
}
.page-content-development .process-step .step-num{
  font-family: var(--font-display); font-weight:700; font-size:46px; line-height:1;
  color: rgba(31,203,99,.45); margin:0;
}
.page-content-development .process-step .step-icon{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--gray-200); background:#fff; color: var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0; box-shadow:none;
}
.page-content-development .process-step .step-icon svg{ width:21px; height:21px; }
.page-content-development .process-step h3{ margin-bottom: 10px; }
.page-content-development .process-step p{ max-width: 34ch; }
/* connector — a plain, clean right-arrow (straight shaft + open chevron head) in
   dark grey, sitting in the column gap around the step-title row. Replaces the
   earlier hand-drawn coral arrow. */
.page-content-development .process-step:not(:last-child)::after{
  content:''; position:absolute; left:100%; top:78px; width:80px; height:26px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' fill='none' stroke='%233C4650' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12 H33'/%3E%3Cpath d='M25 4 L35 12 L25 20'/%3E%3C/svg%3E") no-repeat center/contain;
}
@media (max-width: 980px){
  .page-content-development .process-steps{ gap: 40px; }
  .page-content-development .process-step:not(:last-child)::after{ display:none; }
}
.whats-split .icon-trio-item p{
  grid-column:2; grid-row:2;
  font-size: 15.5px; color: var(--ink-soft); line-height:1.65; max-width: 54ch;
}
/* trailing block inside a .whats-split section (Production's tool pills + language
   note) — sits clear of the item list above it */
.whats-split .whats-split-extra{ margin-top: 64px; }
@media (max-width: 900px){
  .whats-split .whats-split-inner{ grid-template-columns: 1fr; gap: 32px; }
  .whats-split .whats-split-extra{ margin-top: 48px; }
}

/* ===================== Content Development page — "Who this is for" dark custom background =====================
   Hand-built vector background (no photography / AI image tool available): warm dark gradient
   behind the audience row, soft coral + gold glows, and faint rotated panel outlines echoing
   manga pages, plus the same grain texture used on the hero for consistency. Creates a clear
   dark/light break between the lime icon-trio section above and whatever follows. Scoped via
   .on-dark-custom so no other page/section is affected. */
.on-dark-custom{ background: #14100c; overflow: hidden; }
.on-dark-custom .who-bg{ position:absolute; inset:0; z-index:0; }
.on-dark-custom .who-bg svg{ width:100%; height:100%; display:block; }
.on-dark-custom .who-grain{
  position:absolute; inset:0; z-index:1; opacity:.3; mix-blend-mode: overlay; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.on-dark-custom .wrap{ position:relative; z-index:2; }
.on-dark-custom .section-head h2{ color:#fff; }
.on-dark-custom .eyebrow{ color: var(--yellow); }
.on-dark-custom .eyebrow::before{ background: var(--green); }
.on-dark-custom .audience-list{ border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.14); }
.on-dark-custom .audience-item{ border-left-color: rgba(255,255,255,.14); }
.on-dark-custom .audience-item h4{ color:#fff; }
.on-dark-custom .audience-item p{ color: rgba(255,255,255,.65); }
/* User instruction (2026-09-02): titles 22px, body text 15.5px for this "Who this is for" row.
   .audience-item is a shared component used on 5 other pages too, so sized here page-scoped via
   .page-content-development rather than in the shared .audience-item h4/p rule. */
.page-content-development .audience-item h4{ font-size: 22px; }
.page-content-development .audience-item p{ font-size: 15.5px; }
.on-dark-custom .audience-item .icon{ background: rgba(255,255,255,.08); color: var(--yellow); }
.on-dark-custom .audience-item.accent-a .icon{ background: rgba(237,97,77,.18); color: var(--orange); }
.on-dark-custom .audience-item.accent-b .icon{ background: rgba(245,226,86,.18); color: var(--yellow); }
.on-dark-custom .audience-item.accent-c .icon{ background: rgba(0,184,214,.18); color: var(--blue); }
.on-dark-custom .audience-item.accent-green .icon{ background: rgba(66,244,129,.18); color: var(--green); }
@media (max-width: 860px){
  .on-dark-custom .audience-item{ border-top-color: rgba(255,255,255,.14); }
}

/* Hero-palette variant of the dark "Who this is for" treatment (2026-09-02) — same
   .on-dark-custom layout, but the ground + glows follow the site hero's blue / coral /
   green on a blue-black base instead of Content Development's warm coral/gold on brown-
   black. The glow colours live in the page's inline .who-bg SVG; this just sets the
   fallback ground and is ordered after .on-dark-custom so it wins. Used on Editorial. */
.on-dark-hero{ background: #0c1216; }
/* Match the audience-row sizing used on the Content Development / Editorial "Who this is
   for" — applied via the class so pages without a body class (Production, Content
   Transformation, Creative) pick it up too. */
.on-dark-hero .audience-item h4{ font-size: 22px; }
.on-dark-hero .audience-item p{ font-size: 15.5px; }

/* ===================== BPM page — signature "How it works" pipeline =====================
   Content+design overhaul (2026-09-02), first page of the site-wide differentiation pass:
   BPM previously had only a hero + the "Five ways" bento grid, then jumped straight to the
   cross-sell/CTA — no "Who this is for" or "How it works" or FAQ, unlike the other service
   pages. Added those three sections using only facts already stated elsewhere on this page
   (the five bento items), restructured/reframed rather than inventing new claims. For visual
   distinction from the shared 3-card .process-steps grid (used by 6 other pages), "How it
   works" here is a connected 4-stage pipeline instead — fits BPM's own subject (data moving
   through a workflow) better than three independent activity cards. Scoped to .page-bpm only;
   "Who this is for" and FAQ reuse the shared .audience-list/.faq-list components as-is, since
   per instruction common section types are fine looking the same across pages. */
/* ---- BPM typography (2026-09-04): the page runs on Inter only — no Instrument Sans
   display face anywhere — and every size matches the equivalent element on the other
   service pages (46px section h2, 22px "what's included"/"who" item titles, 20px/15px
   "how it works" step title/copy, 21px step numeral, 18px FAQ summary). ---- */
.page-bpm h1, .page-bpm h2, .page-bpm h3, .page-bpm h4, .page-bpm h5, .page-bpm h6,
.page-bpm .faq-item summary,
.page-bpm .bpm-num, .page-bpm .pipeline-node,
.page-bpm .quality-point strong, .page-bpm .quality-inner h2{
  font-family: var(--font-body);
}
.page-bpm #how .section-head{ max-width: none; }   /* headline sets on one line, per the comp */
.page-bpm .pipeline-flow{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; position:relative; margin-top: 8px;
}
/* Dashed connector at the number-circle centre, running from stage 01's circle to
   stage 04's circle (2026-09-04 — matches its reference comp). */
.page-bpm .pipeline-flow::before{
  content:''; position:absolute; top:27px; left:28px; right: calc(25% - 28px); height:2px; z-index:0;
  background-image: repeating-linear-gradient(90deg, rgba(18,24,29,.22) 0 6px, transparent 6px 13px);
}
.page-bpm .pipeline-step{ position:relative; z-index:1; padding: 0 26px 0 0; }
/* Number circle + icon sit on one row; the circle is white with a hairline border and a
   faint blue halo (outer box-shadow ring), the icon to its right in --blue-dark. */
.page-bpm .pipeline-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.page-bpm .pipeline-node{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:21px; color: var(--blue-dark);
  background:#fff; border: 1.5px solid var(--gray-200);
  box-shadow: 0 0 0 6px rgba(0,184,214,.05), 0 10px 24px -12px rgba(0,184,214,.22);
}
.page-bpm .pipeline-icon{ flex-shrink:0; color: var(--blue-dark); display:flex; }
.page-bpm .pipeline-icon svg{ width:26px; height:26px; }
.page-bpm .pipeline-step h3{ font-size:20px; margin-bottom:8px; }   /* matches .edit-step h3 on the other pages */
.page-bpm .pipeline-step p{ font-size:15px; color: var(--ink-soft); line-height:1.65; max-width: 32ch; }
@media (max-width: 980px){
  .page-bpm .pipeline-flow{ grid-template-columns: 1fr 1fr; gap: 40px 22px; }
  .page-bpm .pipeline-flow::before{ display:none; }
}
@media (max-width: 600px){
  .page-bpm .pipeline-flow{ grid-template-columns: 1fr; }
}

/* ===================== BPM — "The Workflow" full-width dark data-flow section =====================
   Added 2026-09-04, replacing "Who this is for" in this slot — that content now follows this
   section instead (unchanged, just retitled/shortened — see #who below). Reuses the shared
   .on-dark-custom full-bleed shell (the same mechanism behind the homepage's dark "Who this is
   for" bands and its "From content to code" tech strip) with its own inline .who-bg SVG: a deep
   teal gradient, a faint dot grid, soft blue/green corner glows and two faint rotated outline
   rectangles. No dashboard chrome, no charts — a horizontal Source→Collect→Clean→Validate→
   Deliver track of icon nodes joined by thin arrow connectors. */
.on-dark-custom.on-workflow{ background:#06181e; }
.on-workflow .eyebrow::before{ background: var(--blue); }
.workflow-tags-deco{
  position:absolute; top:58px; right:64px; z-index:1;
  display:flex; flex-direction:column; gap:14px; text-align:right; pointer-events:none;
  font-family: var(--font-body); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color: rgba(255,255,255,.14);
}
.workflow-track{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:16px;
}
.workflow-stage{ flex:1 1 0; min-width:0; max-width:200px; text-align:center; padding:0 4px; }
/* Gradient ring drawn as a masked ::after (border can't take a gradient) + a faint
   translucent disc behind the icon. */
.workflow-node{
  position:relative;
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,184,214,.09); color: var(--green);
}
.workflow-node::after{
  content:''; position:absolute; inset:0; border-radius:50%; padding:1.5px; pointer-events:none;
  background: linear-gradient(150deg, var(--blue), var(--green));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.workflow-stage.is-accent .workflow-node{ background: rgba(66,244,129,.11); }
.workflow-node svg{ width:24px; height:24px; position:relative; z-index:1; }
/* Titles follow the reference: label word white, number in the accent colour
   (cyan for 01–03, green for the .is-accent stages 04–05). */
.workflow-tag{
  font-family: var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: #fff; margin-bottom:8px;
}
.workflow-tag .n{ color: var(--blue); margin-right:6px; }
.workflow-stage.is-accent .workflow-tag .n{ color: var(--green); }
.workflow-stage p{ font-size:13.5px; color: rgba(255,255,255,.6); line-height:1.5; }
.workflow-arrow{ flex:0 0 auto; align-self:center; color: rgba(66,244,129,.55); margin-top:-45px; }
.workflow-arrow svg{ width:33px; height:20px; display:block; }
@media (max-width: 1100px){ .workflow-tags-deco{ display:none; } }
@media (max-width: 900px){
  .workflow-track{ flex-direction:column; align-items:center; gap:28px; }
  .workflow-stage{ max-width:320px; }
  .workflow-arrow{ margin-top:0; transform: rotate(90deg); }
}

/* ===================== BPM — compact "quality" strip before FAQ =====================
   Dark teal band (2026-09-04) — same ground + faint dot texture as the "The Workflow"
   section so the page's dark moments read as a set. */
.on-quality{
  background: radial-gradient(130% 160% at 12% 15%, #0b333d 0%, #06181e 62%);
  position: relative; overflow: hidden;
}
.on-quality::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
}
.quality-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.quality-inner h2{ font-size:30px; line-height:1.3; max-width:18ch; flex:1 1 320px; color:#fff; }
.quality-points{ display:flex; flex-wrap:wrap; gap:0; flex:2 1 480px; }
.quality-point{
  flex:1 1 0; min-width:150px; padding:0 26px; border-left:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; gap:8px;
}
.quality-point:first-child{ border-left:none; padding-left:0; }
.quality-point .icon{ color: var(--green); }
.quality-point strong{ font-family: var(--font-body); font-size:16.5px; font-weight:600; color:#fff; }
.quality-point span{ font-size:13.5px; color: rgba(255,255,255,.6); line-height:1.5; }
@media (max-width: 860px){
  .quality-inner{ flex-direction:column; align-items:flex-start; gap:32px; }
  .quality-inner h2{ flex-basis:auto; max-width:none; }
  .quality-points{ flex-basis:auto; width:100%; }
}
@media (max-width: 640px){
  .quality-points{ flex-direction:column; gap:22px; }
  .quality-point{ border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top:18px; }
  .quality-point:first-child{ border-top:none; padding-top:0; }
}

/* ===================== BPM — "Who this is for" (matches its own reference comp) =====================
   Overrides the shared .audience-list look on this page only: no top/bottom rules on the list,
   just the vertical hairline dividers; first column flush-left, last flush-right; a slightly
   larger blue-tinted icon tile (the shared component uses --paper-warm). */
.page-bpm #who .audience-list{ border-top:none; border-bottom:none; }
.page-bpm #who .audience-item{ padding: 14px 40px; }
.page-bpm #who .audience-item:first-child{ padding-left:0; }
.page-bpm #who .audience-item:last-child{ padding-right:0; }
.page-bpm #who .audience-item .icon{
  width:48px; height:48px; border-radius:13px;
  background: rgba(0,184,214,.10); color: var(--blue-dark); margin-bottom:18px;
}
.page-bpm #who .audience-item .icon svg{ width:22px; height:22px; }
.page-bpm #who .audience-item h4{ font-size:22px; }        /* matches every other service page's "Who this is for" title */
.page-bpm #who .audience-item p{ font-size:15.5px; max-width:32ch; }
@media (max-width: 860px){
  .page-bpm #who .audience-item{ padding: 24px 0; }
  .page-bpm #who .audience-item + .audience-item{ border-top:1px solid var(--gray-200); }
}

/* ===================== Editorial Services page — content + design pass (2026-09-02) =====================
   Rollout page 2. The original page had "What's included" (Copyediting/Proofreading/Indexing)
   immediately followed by a "How it works" that just restated the same 3 items with different
   labels — real content duplication, flagged during review before rebuilding. Fixed by (a)
   adding a short callout paragraph under the service-trio explaining what "voice-preserving"
   editing actually means (grounded in the client's own source doc language), and (b) replacing
   the duplicate "How it works" with genuinely new content — engagement mechanics (what you send,
   how edits are delivered, how revisions happen) — using a tracked-changes-document visual motif
   instead of the shared numbered-circle .process-step used on 5 other pages, since it's a
   thematically exact fit for an editorial page. Scoped to .page-editorial-services. */
/* "What's included" on Editorial now uses the shared .whats-split two-column layout
   (see that block above) — heading + intro line on the left, the three passes as a
   hairline-divided list on the right. The callout paragraph below runs the full
   section width; the "what a pass catches" chips keep the softer dotted treatment. */
.page-editorial-services .voice-note{
  max-width: none; margin-top: 44px;
  font-size: 15.5px; line-height:1.7; color: var(--ink-soft);
}
.page-editorial-services .voice-note em{ color: var(--ink); font-style:normal; font-weight:600; }

/* "How it works" (2026-09-02) — numbered-circle steps in a centred row with a dashed
   connector running between the badges. Layout matched from a supplied reference; replaces
   the earlier left-aligned tracked-changes line-icon layout. Scoped to .edit-step(s),
   which are used only on this page. */
.edit-steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items:start; margin-top: 4px;
}
.edit-step{ position:relative; text-align:center; padding: 0 10px; }
.edit-step:not(:last-child)::after{
  content:''; position:absolute; top:31px;
  left: calc(50% + 40px); right: calc(-50% + 4px);
  border-top: 2px dashed rgba(0,184,214,.4);
}
.edit-step .edit-num{
  width:64px; height:64px; border-radius:50%; margin: 0 auto 24px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,184,214,.12); color: var(--blue-dark);
  font-family: var(--font-display); font-weight:700; font-size: 21px;
  position:relative; z-index:1;
}
.edit-step h3{ font-family: var(--font-body); font-size:20px; margin-bottom:12px; }
.edit-step p{ font-size:15px; color: var(--ink-soft); line-height:1.7; max-width: 36ch; margin: 0 auto; }
@media (max-width: 860px){
  .edit-steps{ grid-template-columns: 1fr; gap: 44px; }
  .edit-step:not(:last-child)::after{ display:none; }
}

/* Editorial Services page — additional content pass (2026-09-02), following up on the
   restructure above. User asked whether there was scope for more content; added three things
   grounded in real material rather than invented specifics: (1) a concrete "what a pass catches"
   pill list — standard, verifiable editorial concepts, itemizing what the existing copy already
   claimed in vaguer form ("meticulous", "keen eye for detail"); (2) a light/heavy-touch mention
   folded into edit-step 1's own copy rather than a whole new section; (3) a confidentiality
   reassurance section grounded in the client's own stated "Integrity" value (source:
   client_source_content.md) — a real, verifiable company value, not a fabricated policy claim.
   All scoped to .page-editorial-services. */
.page-editorial-services .catch-block{ margin-top: 32px; }
.page-editorial-services .catch-label{ font-size:14px; font-weight:600; color: var(--ink-soft); margin-bottom:16px; }
.page-editorial-services .catch-list{ display:flex; flex-wrap:wrap; gap:10px; }
.page-editorial-services .catch-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding: 10px 16px 10px 13px; border-radius:999px;
  border: 1px solid var(--gray-200); background:#fff;
  font-size:13.5px; font-weight:500; color: var(--ink);
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.page-editorial-services .catch-pill::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background: var(--green-dark); flex-shrink:0;
}
.page-editorial-services .catch-pill:hover{
  border-color: var(--green-dark);
  background: rgba(66,244,129,.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(31,203,99,.4);
}
/* "Your manuscript stays yours." — pulled out of the FAQ's warm block and given its own
   section on plain --paper (see #trust markup: class="tight", not on-warm) so it reads as
   a distinct confidentiality statement rather than merging into the beige FAQ below.
   Redesigned as a wide split card: a solid blue shield tile on the left, the statement on
   the right, with a faint shield watermark bleeding out of the bottom-right corner. */
.page-editorial-services #trust .trust-card{
  max-width: 900px; margin: 0 auto; text-align:left;
  display:flex; align-items:center; gap: 38px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0,184,214,.09), transparent 60%),
    var(--paper);
  border: 1px solid var(--gray-200);
  border-radius: 26px;
  padding: 46px 50px;
  box-shadow: 0 34px 64px -36px rgba(18,24,29,.18);
  position: relative; overflow: hidden;
}
.page-editorial-services #trust .trust-card::after{
  content:''; position:absolute; right:-38px; bottom:-52px; width:210px; height:210px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312181D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9 8 11 4.6-2 8-6 8-11V5l-8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.05; pointer-events:none;
}
.page-editorial-services #trust .trust-icon{
  flex-shrink:0; width:66px; height:66px; border-radius:18px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 16px 30px -12px rgba(0,125,147,.5);
  position: relative; z-index:1;
}
.page-editorial-services #trust .trust-content{ flex:1; position:relative; z-index:1; }
.page-editorial-services #trust .trust-content h3{ font-size:24px; margin-bottom:10px; }
.page-editorial-services #trust .trust-content p{ font-size:15px; color: var(--ink-soft); line-height:1.75; max-width: 62ch; }
@media (max-width: 720px){
  .page-editorial-services #trust .trust-card{ flex-direction:column; text-align:center; align-items:center; padding: 40px 30px; gap: 24px; }
  .page-editorial-services #trust .trust-content p{ max-width:none; }
}

/* Hero visual (assets/hero-editorial-services.png): a transparent cut-out illustration
   placed directly on the hero, used as-is — NO css frame (no border, box, radius, clip,
   shadow or mask). On desktop .es-hero-image is the artwork STAGE: a fixed-pixel box
   that rides inside the centred, max-width .wrap (no %, no vw), so it sits at a constant
   place relative to the centred container — the whole hero shifts as a unit on wide
   monitors and the callouts (fixed px offsets inside this box) never drift toward the
   viewport edge. Drops to normal centred flow under the copy on mobile. */
.page-editorial-services .hero-split .hero-split-inner{ position: relative; }
.page-editorial-services .es-hero-image{
  position: absolute; top: 52%; right: -104px; width: 672px;
  transform: translateY(-50%);
  margin: 0; pointer-events: none;
}
.page-editorial-services .es-hero-image img{ display:block; width:100%; height:auto; }
/* tablet 768–1023: a smaller stage so it doesn't crowd the narrower column.
   1024px and up keeps the 672px desktop stage, so the composition is identical
   across 1024 / 1280 / 1366 / 1440 / 1600 / 1920. */
@media (max-width: 1023px) and (min-width: 901px){
  .page-editorial-services .es-hero-image{ width: 548px; right: -78px; }
}
@media (max-width: 900px){
  .page-editorial-services .hero-split .hero-split-inner{ position: static; }
  .page-editorial-services .es-hero-image{
    position: static; transform: none; right: auto; width: 100%;
    max-width: 560px; margin: 0 auto;
  }
}

/* =========================================================
   Editorial Services — hero callouts
   Same pattern as Content Development: the shared .hero-callout component,
   with every offset a FIXED PIXEL value against .es-hero-image (the stage),
   so the three annotations stay pinned to the same spots on the artwork at
   1024 / 1280 / 1366 / 1440 / 1600 / 1920. No idle motion.
     tl  Copyedited with care  → manuscript / document area
     tr  Your style preserved  → red-pen style edits on the manuscript
     br  Ready to publish      → the finished manuscript / output
========================================================= */
.page-editorial-services .hero-callouts{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.page-editorial-services .hero-callout{ width: 178px; }
.page-editorial-services .hero-callout__card{
  gap: 8px; padding: 9px 12px 9px 11px;
  border-radius: 9px;
  background: rgba(6, 20, 24, .82);
  border: 1px solid rgba(120, 220, 200, .20);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-editorial-services .hero-callout__card::after{ display: none; }   /* no card status dot */
.page-editorial-services .hero-callout__icon{ width: 22px; height: 22px; border-radius: 6px; }
.page-editorial-services .hero-callout__icon svg{ width: 13px; height: 13px; }
.page-editorial-services .hero-callout__text strong{ font-size: 11px; }
.page-editorial-services .hero-callout__text span{ font-size: 10px; white-space: nowrap; }

.page-editorial-services .hero-callout:hover .hero-callout__card{
  transform: translateY(-2px);
  border-color: rgba(120, 220, 200, .42);
}
/* no idle float — override the shared motion-safe rule */
@media (prefers-reduced-motion: no-preference){
  .page-editorial-services .hero-callout--tl,
  .page-editorial-services .hero-callout--tr,
  .page-editorial-services .hero-callout--br{
    animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both;
  }
}

/* ---- fixed px offsets against the stage (see .es-hero-image) ---- */
.page-editorial-services .hero-callout--tl{ top: -46px;  left: -46px; }
.page-editorial-services .hero-callout--tr{ top: -14px;  left: 400px; }
.page-editorial-services .hero-callout--br{ bottom: 30px; left: 386px; }

/* connectors, aimed from each card at its artwork target */
.page-editorial-services .hero-callout--tl .hero-callout__wire{
  left: 150px; top: calc(100% - 6px); width: 124px; height: 120px;
}
.page-editorial-services .hero-callout--tr .hero-callout__wire{
  left: -4px; top: calc(100% - 6px); width: 44px; height: 66px;
}
.page-editorial-services .hero-callout--br .hero-callout__wire{
  left: 44px; bottom: calc(100% - 6px); top: auto; width: 44px; height: 44px;
}

/* tablet 768–1023: slightly smaller cards, offsets nudged to the smaller stage */
@media (max-width: 1023px) and (min-width: 901px){
  .page-editorial-services .hero-callout{ width: 164px; }
  .page-editorial-services .hero-callout--tl{ top: -40px; left: -34px; }
  .page-editorial-services .hero-callout--tr{ top: -10px; left: 322px; }
  .page-editorial-services .hero-callout--br{ bottom: 24px; left: 308px; }
}

/* mobile <=900: no floating composition — stack the three cards under the
   artwork in order, connectors hidden */
@media (max-width: 900px){
  .page-editorial-services .hero-callouts{
    position: static; inset: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; margin-top: 16px;
  }
  .page-editorial-services .hero-callout{
    position: static; inset: auto; left: auto; top: auto; bottom: auto;
    width: 100%; max-width: 320px;
    opacity: 1; animation: none;
  }
  .page-editorial-services .hero-callout__wire{ display: none; }
}

/* Creative Services — hero visual (assets/hero-creative-services_new.png): a transparent
   cut-out illustration placed directly on the hero, used as-is — NO css frame (no border,
   box, radius, clip, shadow or mask). Same fixed-pixel STAGE pattern as .cd-hero-image /
   .es-hero-image / .ct-hero-image: an absolutely-placed box with a FIXED PIXEL width +
   right offset (no %, no vw), riding inside the centred max-width .wrap. The stage sits
   at a constant place relative to the centred container, so the whole hero (artwork +
   callouts) shifts as ONE unit on wide monitors and the callouts — fixed px offsets
   inside this box — keep the exact same relationship to the artwork at
   1024 / 1280 / 1366 / 1440 / 1600 / 1920. Drops to centred flow under the copy on mobile. */
.page-creative-services .hero-split .hero-split-inner{ position: relative; }
.cs-hero-image{
  position: absolute; top: 52%; right: -116px; width: 700px;
  transform: translateY(-50%);
  margin: 0; pointer-events: none;
}
.cs-hero-image img{ display:block; width:100%; height:auto; }
/* tablet 768–1023: a smaller stage so it doesn't crowd the narrower column.
   1024px and up keeps the desktop stage, so the composition is identical
   across 1024 / 1280 / 1366 / 1440 / 1600 / 1920. */
@media (max-width: 1023px) and (min-width: 901px){
  .cs-hero-image{ width: 590px; right: -64px; }
}
@media (max-width: 900px){
  .page-creative-services .hero-split .hero-split-inner{ position: static; }
  .cs-hero-image{
    position: static; transform: none; right: auto; width: 100%;
    max-width: 560px; margin: 0 auto;
  }
}

/* =========================================================
   Creative Services — hero callouts
   Shared .hero-callout component; every offset a FIXED PIXEL value against
   .cs-hero-image (the stage), so the three annotations stay pinned to the
   same spots on the artwork at every desktop width. No idle float.
   CREATE → PRODUCE → REFINE.
     tl  Cover-ready concepts  → wire to the left-side manuscript / creative materials
     tr  Production precision  → wire to the cover mock-up crop / layout guides
     br  Images refined        → wire to the colour swatches / sketchbook thumbnails
========================================================= */
.page-creative-services .hero-callouts{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.page-creative-services .hero-callout{ width: 184px; }
.page-creative-services .hero-callout__card{
  gap: 8px; padding: 9px 12px 9px 11px;
  border-radius: 9px;
  background: rgba(6, 20, 24, .82);
  border: 1px solid rgba(120, 220, 200, .20);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-creative-services .hero-callout__card::after{ display: none; }   /* no card status dot */
.page-creative-services .hero-callout__icon{ width: 22px; height: 22px; border-radius: 6px; }
.page-creative-services .hero-callout__icon svg{ width: 13px; height: 13px; }
.page-creative-services .hero-callout__text strong{ font-size: 11px; }
.page-creative-services .hero-callout__text span{ font-size: 10px; white-space: nowrap; }

.page-creative-services .hero-callout:hover .hero-callout__card{
  transform: translateY(-2px);
  border-color: rgba(120, 220, 200, .42);
}
/* no idle float — override the shared motion-safe rule */
@media (prefers-reduced-motion: no-preference){
  .page-creative-services .hero-callout--tl,
  .page-creative-services .hero-callout--tr,
  .page-creative-services .hero-callout--br{
    animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both;
  }
}

/* ---- fixed px offsets against the stage (see .cs-hero-image) ----
   Right-side cards are held well inside the stage so their right edge never
   reaches the viewport edge at the narrowest desktop (1024). */
.page-creative-services .hero-callout--tl{ top: -26px;  left: -74px; }
.page-creative-services .hero-callout--tr{ top: -34px;  left: 380px; }
.page-creative-services .hero-callout--br{ bottom: 40px; left: 430px; }

/* connectors, aimed from each card at its artwork target */
.page-creative-services .hero-callout--tl .hero-callout__wire{
  left: 84px; top: calc(100% - 6px); width: 132px; height: 150px;
}
.page-creative-services .hero-callout--tr .hero-callout__wire{
  left: 24px; top: calc(100% - 6px); width: 66px; height: 150px;
}
.page-creative-services .hero-callout--br .hero-callout__wire{
  left: 30px; bottom: calc(100% - 6px); top: auto; width: 70px; height: 90px;
}

/* tablet 768–1023: slightly smaller cards; right-side cards pulled further in
   so they clear the viewport edge on the narrower single-gutter layout, and
   shorter connectors so the tl wire clears the taller two-line headline */
@media (max-width: 1023px) and (min-width: 901px){
  .page-creative-services .hero-callout{ width: 166px; }
  .page-creative-services .hero-callout--tl{ top: -18px; left: -26px; }
  .page-creative-services .hero-callout--tr{ top: -26px; left: 296px; }
  .page-creative-services .hero-callout--br{ bottom: 92px; left: 314px; }
  .page-creative-services .hero-callout--tl .hero-callout__wire{ left: 54px; width: 88px; height: 50px; }
  .page-creative-services .hero-callout--tr .hero-callout__wire{ left: 20px; width: 50px; height: 92px; }
  .page-creative-services .hero-callout--br .hero-callout__wire{ left: 24px; width: 58px; height: 68px; }
}

/* mobile <=900: no floating composition — stack the three cards under the
   artwork in order (Cover-ready concepts → Production precision → Images
   refined), connectors hidden */
@media (max-width: 900px){
  .page-creative-services .hero-callouts{
    position: static; inset: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; margin-top: 16px;
  }
  .page-creative-services .hero-callout{
    position: static; inset: auto; left: auto; top: auto; bottom: auto;
    width: 100%; max-width: 320px;
    opacity: 1; animation: none;
  }
  .page-creative-services .hero-callout__wire{ display: none; }
}

/* ---- Content Transformation hero image — artwork STAGE (frameless) --------
   assets/hero-content-transformation.png: a transparent cut-out, used as-is —
   NO css frame. Same fixed-pixel STAGE pattern as .cd-hero-image /
   .es-hero-image: an absolutely-placed box with a FIXED PIXEL width + right
   offset (no %, no vw), riding inside the centred max-width .wrap. The stage
   sits at a constant place relative to the centred container, so the whole
   hero (artwork + callouts) shifts as ONE unit on wide monitors and the
   callouts — fixed px offsets inside this box — keep the exact same
   relationship to the artwork at 1024 / 1280 / 1366 / 1440 / 1600 / 1920.
   Drops to normal centred flow under the copy on mobile. */
.page-content-transformation .hero-split .hero-split-inner{ position: relative; }
.page-content-transformation .ct-hero-image{
  position: absolute; top: 52%; right: -104px; width: 560px;
  transform: translateY(-50%);
  margin: 0; pointer-events: none;
}
.page-content-transformation .ct-hero-image img{ display:block; width:100%; height:auto; }
/* tablet 768–1023: a smaller stage so it doesn't crowd the narrower column.
   1024px and up keeps the desktop stage, so the composition is identical
   across 1024 / 1280 / 1366 / 1440 / 1600 / 1920. */
@media (max-width: 1023px) and (min-width: 901px){
  .page-content-transformation .ct-hero-image{ width: 468px; right: -84px; }
}
@media (max-width: 900px){
  .page-content-transformation .hero-split .hero-split-inner{ position: static; }
  .page-content-transformation .ct-hero-image{
    position: static; transform: none; right: auto; width: 100%;
    max-width: 520px; margin: 0 auto;
  }
}

/* ---- Accessibility Services hero image (frameless float, same pattern) ----
   assets/hero-accessibility-services.png: a transparent cut-out (laptop +
   screen-reader panel, EPUB/PDF-UA cards, headphones, checklist, open book,
   tablet, WCAG book stack), used as-is — NO css frame. Edge-to-edge like the
   Creative image, so sized to match: absolutely placed in the hero-split,
   bleeding off the right edge on desktop; centred flow under the copy on mobile. */
.page-accessibility-services .hero-split .hero-split-inner{ position: relative; }
.as-hero-image{
  position: absolute; top: 52%; right: -92px; width: 588px;
  transform: translateY(-50%);
  margin: 0; pointer-events: none;
}
.as-hero-image img{ display:block; width:100%; height:auto; }
/* tablet 768–1023: a smaller stage so it doesn't crowd the narrower column */
@media (max-width: 1023px) and (min-width: 901px){
  .as-hero-image{ width: 496px; right: -52px; }
}
@media (max-width: 900px){
  .page-accessibility-services .hero-split .hero-split-inner{ position: static; }
  .as-hero-image{
    position: static; transform: none; right: auto; width: 100%;
    max-width: 540px; margin: 0 auto;
  }
}

/* =========================================================
   Accessibility Services — hero callouts
   Shared .hero-callout component; every offset a FIXED PIXEL value against
   .as-hero-image (the 588px stage), so the three annotations stay pinned to
   the same spots on the artwork at every desktop width. No idle float.
     tl  Screen-reader ready  → wire to the laptop screen-reader panel
     tr  Accessible structure → wire down to the numbered Reading Order list
     br  Alt text included    → wire up to the tablet's Alt Text preview
========================================================= */
.page-accessibility-services .hero-callouts{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.page-accessibility-services .hero-callout{ width: 178px; }
.page-accessibility-services .hero-callout--br{ width: 190px; }   /* fits "Meaningful image descriptions" on one line */
.page-accessibility-services .hero-callout__card{
  gap: 8px; padding: 9px 12px 9px 11px;
  border-radius: 9px;
  background: rgba(6, 20, 24, .82);
  border: 1px solid rgba(120, 220, 200, .20);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-accessibility-services .hero-callout__card::after{ display: none; }   /* no card status dot */
.page-accessibility-services .hero-callout__icon{ width: 22px; height: 22px; border-radius: 6px; }
.page-accessibility-services .hero-callout__icon svg{ width: 13px; height: 13px; }
.page-accessibility-services .hero-callout__text strong{ font-size: 11px; }
.page-accessibility-services .hero-callout__text span{ font-size: 10px; white-space: nowrap; }

.page-accessibility-services .hero-callout:hover .hero-callout__card{
  transform: translateY(-2px);
  border-color: rgba(120, 220, 200, .42);
}
/* no idle float — override the shared motion-safe rule */
@media (prefers-reduced-motion: no-preference){
  .page-accessibility-services .hero-callout--tl,
  .page-accessibility-services .hero-callout--tr,
  .page-accessibility-services .hero-callout--br{
    animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both;
  }
}

/* ---- fixed px offsets against the stage (see .as-hero-image) ---- */
.page-accessibility-services .hero-callout--tl{ top: -40px;  left: -14px; }
.page-accessibility-services .hero-callout--tr{ top: -34px;  left: 330px; }
.page-accessibility-services .hero-callout--br{ bottom: 34px; left: 326px; }

/* connectors, aimed from each card at its artwork target */
.page-accessibility-services .hero-callout--tl .hero-callout__wire{
  left: 84px; top: calc(100% - 6px); width: 190px; height: 56px;
}
.page-accessibility-services .hero-callout--tr .hero-callout__wire{
  left: 8px; top: calc(100% - 6px); width: 44px; height: 100px;
}
.page-accessibility-services .hero-callout--br .hero-callout__wire{
  left: 92px; bottom: calc(100% - 6px); top: auto; width: 44px; height: 74px;
}

/* tablet 768–1023: smaller cards, offsets nudged to the smaller (496px) stage */
@media (max-width: 1023px) and (min-width: 901px){
  .page-accessibility-services .hero-callout{ width: 160px; }
  .page-accessibility-services .hero-callout--br{ width: 172px; }
  .page-accessibility-services .hero-callout--tl{ top: -34px; left: -10px; }
  .page-accessibility-services .hero-callout--tr{ top: -30px; left: 280px; }
  .page-accessibility-services .hero-callout--br{ bottom: 20px; left: 284px; }
}

/* mobile <=900: no floating composition — stack the three cards under the
   artwork in order (Screen-reader ready → Accessible structure → Alt text
   included), connectors hidden */
@media (max-width: 900px){
  .page-accessibility-services .hero-callouts{
    position: static; inset: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; margin-top: 16px;
  }
  .page-accessibility-services .hero-callout,
  .page-accessibility-services .hero-callout--br{
    position: static; inset: auto; left: auto; top: auto; bottom: auto;
    width: 100%; max-width: 320px;
    opacity: 1; animation: none;
  }
  .page-accessibility-services .hero-callout__wire{ display: none; }
}

/* =========================================================
   Content Transformation — hero callouts
   Shared .hero-callout component; every offset a FIXED PIXEL value against
   .ct-hero-image (the stage), so the three annotations stay pinned to the
   same spots on the artwork at every desktop width. No idle float — they
   read as fixed editorial annotations. CONVERT → PRESERVE → DELIVER.
     tl  Format conversion    → wire to the DOCX/PDF/ePub/HTML file tiles
     tr  Structure preserved  → wire to the laptop chapter-preview panel
     br  Ready to publish     → wire to the books / "Ready to publish" output
========================================================= */
.page-content-transformation .hero-callouts{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.page-content-transformation .hero-callout{ width: 178px; }
.page-content-transformation .hero-callout__card{
  gap: 8px; padding: 9px 12px 9px 11px;
  border-radius: 9px;
  background: rgba(6, 20, 24, .82);
  border: 1px solid rgba(120, 220, 200, .20);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-content-transformation .hero-callout__card::after{ display: none; }   /* no card status dot */
.page-content-transformation .hero-callout__icon{ width: 22px; height: 22px; border-radius: 6px; }
.page-content-transformation .hero-callout__icon svg{ width: 13px; height: 13px; }
.page-content-transformation .hero-callout__text strong{ font-size: 11px; }
.page-content-transformation .hero-callout__text span{ font-size: 10px; white-space: nowrap; }

.page-content-transformation .hero-callout:hover .hero-callout__card{
  transform: translateY(-2px);
  border-color: rgba(120, 220, 200, .42);
}
/* no idle float — override the shared motion-safe rule */
@media (prefers-reduced-motion: no-preference){
  .page-content-transformation .hero-callout--tl,
  .page-content-transformation .hero-callout--tr,
  .page-content-transformation .hero-callout--br{
    animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both;
  }
}

/* ---- fixed px offsets against the stage (see .ct-hero-image) ----
   Right-side cards are held well inside the stage (left ~300) so their right
   edge never reaches the viewport edge at the narrowest desktop (1024). */
.page-content-transformation .hero-callout--tl{ top: -24px;  left: -50px; }
.page-content-transformation .hero-callout--tr{ top: -34px;  left: 300px; }
.page-content-transformation .hero-callout--br{ top: 150px;  left: 316px; }

/* connectors, aimed from each card at its artwork target */
.page-content-transformation .hero-callout--tl .hero-callout__wire{
  left: 60px; top: calc(100% - 6px); width: 60px; height: 104px;
}
.page-content-transformation .hero-callout--tr .hero-callout__wire{
  left: 40px; top: calc(100% - 6px); width: 44px; height: 100px;
}
.page-content-transformation .hero-callout--br .hero-callout__wire{
  left: 60px; top: calc(100% - 6px); width: 96px; height: 100px;
}

/* tablet 768–1023: slightly smaller cards; right-side cards pulled further in
   so they clear the viewport edge on the narrower single-gutter layout */
@media (max-width: 1023px) and (min-width: 901px){
  .page-content-transformation .hero-callout{ width: 162px; }
  .page-content-transformation .hero-callout--tl{ top: -22px; left: -28px; }
  .page-content-transformation .hero-callout--tr{ top: -30px; left: 228px; }
  .page-content-transformation .hero-callout--br{ top: 126px; left: 240px; }
}

/* mobile <=900: no floating composition — stack the three cards under the
   artwork in order (Format conversion → Structure preserved → Ready to
   publish), connectors hidden */
@media (max-width: 900px){
  .page-content-transformation .hero-callouts{
    position: static; inset: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; margin-top: 16px;
  }
  .page-content-transformation .hero-callout{
    position: static; inset: auto; left: auto; top: auto; bottom: auto;
    width: 100%; max-width: 320px;
    opacity: 1; animation: none;
  }
  .page-content-transformation .hero-callout__wire{ display: none; }
}

/* ---- Production Services hero image (frameless float, same pattern) -------
   This PNG is tightly cropped (~91% canvas fill) vs the Creative image's ~80%,
   so its container is set narrower than Creative's to render the artwork at a
   comparable on-screen size, with a smaller negative right offset. */
.page-production-services .hero-split .hero-split-inner{ position: relative; }
.ps-hero-image{
  position: absolute; top: 52%; right: -13.5%; width: 63%;
  transform: translateY(-50%);
  margin: 0; pointer-events: none;
}
.ps-hero-image img{ display:block; width:100%; height:auto; }
@media (min-width: 1280px){
  .ps-hero-image{ width: 58.5%; right: -11.25%; }
}
/* tablet: a gentler enlargement + shifted right so the wider artwork doesn't
   crowd the hero paragraph in the single-gutter layout */
@media (max-width: 1100px) and (min-width: 901px){
  .ps-hero-image{ width: 59.5%; right: -9%; }
}
@media (max-width: 900px){
  .page-production-services .hero-split .hero-split-inner{ position: static; }
  .ps-hero-image{
    position: static; transform: none; right: auto; width: 100%;
    max-width: 560px; margin: 0 auto;
  }
}

/* =========================================================
   HeroCallout — floating editorial annotation cards
   ---------------------------------------------------------
   A small reusable "component": a glass card (icon + title + subtitle)
   with a dashed connector that points at the hero artwork. The card
   styling, entrance/idle motion and hover are generic; the per-artwork
   PLACEMENT (which corner, how far) is set in a page-scoped block so the
   same pattern can annotate a different hero image elsewhere.

   Markup contract:
     .hero-callouts                     positioning layer — absolute, inset:0,
                                        pointer-events:none, sits over the artwork
       .hero-callout.hero-callout--tl   one annotation; modifier picks the anchor
         style="--cd:120ms"             entrance-stagger delay
         .hero-callout__wire            dashed connector + ring endpoint
         .hero-callout__card            the visible glass card
           .hero-callout__icon          20px line icon (green accent)
           .hero-callout__text          <strong> title + <span> subtitle
========================================================= */
.hero-callouts{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.hero-callout{
  position: absolute; width: 200px; pointer-events: none;
  opacity: 0;
  animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd, 0ms) both;
}
.hero-callout__card{
  position: relative;
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 16px 11px 13px;
  border-radius: 11px;
  background: rgba(9, 24, 26, .82);
  border: 1px solid rgba(120, 224, 224, .28);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .66);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  color: #fff;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* small green status dot, top-right */
.hero-callout__card::after{
  content: ""; position: absolute; top: 9px; right: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(66, 244, 129, .16);
}
.hero-callout__icon{
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(66, 244, 129, .14); color: var(--green);
}
.hero-callout__icon svg{ width: 15px; height: 15px; }
.hero-callout__text{ display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.hero-callout__text strong{
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0;
  white-space: nowrap;
}
.hero-callout__text span{ font-size: 11px; color: rgba(255, 255, 255, .62); }

/* connector: a thin, slightly curved dashed line ending in a small green dot
   that lands on the artwork. One inline <svg> per callout; the modifier only
   places/sizes the svg box, the curve is baked into the path. */
.hero-callout__wire{
  position: absolute; overflow: visible; pointer-events: none;
}
.hero-callout__wire path{
  stroke: rgba(66, 244, 129, .55); stroke-width: 1.25; fill: none;
  stroke-dasharray: 3 3.5; stroke-linecap: round;
}
.hero-callout__wire .dot{ fill: var(--green); }
.hero-callout__wire .halo{ fill: rgba(66, 244, 129, .16); }
/* from the card's lower-right, curving down to the page-thumbnail panel */
.hero-callout--tl .hero-callout__wire{ left: 150px; top: calc(100% - 8px); width: 108px; height: 86px; }
/* short curve down to the laptop's dark tools panel */
.hero-callout--tr .hero-callout__wire{ left: 70px; top: calc(100% - 4px); width: 46px; height: 58px; }
/* down from the card into the open printed book */
.hero-callout--br .hero-callout__wire{ left: 84px; top: calc(100% - 6px); width: 34px; height: 52px; }

/* hover: gentle lift + brighter edge (on the card, so it never fights the
   layer's entrance/idle animation) */
.hero-callout:hover .hero-callout__card{
  transform: translateY(-3px);
  border-color: rgba(120, 224, 224, .5);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .62);
}

@keyframes heroCalloutIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroCalloutFloatA{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
@keyframes heroCalloutFloatB{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }

/* idle float only when the user hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference){
  .hero-callout--tl{ animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both, heroCalloutFloatA 7s ease-in-out 1.4s infinite; }
  .hero-callout--tr{ animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both, heroCalloutFloatB 8.5s ease-in-out 1.8s infinite; }
  .hero-callout--br{ animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both, heroCalloutFloatA 8s ease-in-out 2.2s infinite; }
}
/* reduced motion: no entrance, no float, no hover slide — just show the cards */
@media (prefers-reduced-motion: reduce){
  .hero-callout, .hero-callout--tl, .hero-callout--tr, .hero-callout--br{
    animation: none; opacity: 1; transform: none;
  }
  .hero-callout__card{ transition: border-color .2s ease, box-shadow .2s ease; }
  .hero-callout:hover .hero-callout__card{ transform: none; }
}

/* ---- Placement — anchored to .ps-hero-image (the artwork box) -------------
   .hero-callouts is now a child of .ps-hero-image with inset:0, so every
   offset below is a % of the ARTWORK. Each callout therefore stays locked to
   the same point on the illustration at every viewport width — it no longer
   drifts relative to the artwork as the window resizes.
     tl  above-left of the laptop  → wire to the page-thumbnail panel (screen left)
     tr  above the laptop's right  → wire to the dark tools panel (screen right)
     br  lower-right               → wire into the open printed book */
.page-production-services .hero-callout--tl{ left: 3%;  top: 0%; }
.page-production-services .hero-callout--tr{ left: 52%; top: 1%; }
.page-production-services .hero-callout--br{ left: 50%; top: 55%; }

/* tablet — smaller cards; the % anchors still line up with the artwork */
@media (max-width: 1100px) and (min-width: 901px){
  .hero-callout{ width: 178px; }
  .hero-callout__text strong{ font-size: 11.5px; }
  .hero-callout__text span{ font-size: 10.5px; }
}

/* mobile — the artwork drops into normal flow; the callouts follow it as a
   centred chip row directly beneath the image (no floating, no connectors) */
@media (max-width: 900px){
  .page-production-services .hero-callouts{
    position: static; inset: auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-top: 14px;
  }
  .page-production-services .hero-callout{
    position: static; left: auto; top: auto;
    width: auto; flex: 1 1 44%; max-width: 250px;
    opacity: 1; animation: none;
  }
  .page-production-services .hero-callout__wire{ display: none; }
  .page-production-services .hero-callout__card{ width: 100%; padding: 10px 12px; }
}
@media (max-width: 480px){
  .page-production-services .hero-callout{ flex-basis: 100%; max-width: 320px; }
}

/* =========================================================
   Content Development — REDESIGN PREVIEW (content-development-v2.html)
   Standalone new page, does not touch the live content-development.html.
   Everything below is scoped to body.page-cd-redesign, or uses brand-new
   "cdr-" class names that exist nowhere else in the project, so none of
   this can affect any other page even without the body-class prefix —
   the prefix is added anyway for consistency with the rest of the file.
========================================================= */

/* ---- Hero visual: user-supplied editorial illustration (manuscript page
   marked up with edits, two characters discussing the revision). Framed to
   match the hero'''s premium dark aesthetic; this is real informative
   content (not decorative), so it keeps a full descriptive alt attribute
   rather than aria-hidden. ---- */
.page-cd-redesign .cdr-hero-image{
  position:relative; width:100%; max-width: 520px; margin-left:auto;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.65);
}
.page-cd-redesign .cdr-hero-image img{ display:block; width:100%; height:auto; }
@media (max-width: 900px){
  .page-cd-redesign .cdr-hero-image{ max-width: 420px; margin: 0 auto; }
}

/* ---- "What's included" — bordered editorial cards with a number, a
   plain-line icon, and a small illustrative "visual" strip per card. ---- */
.page-cd-redesign .cdr-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.page-cd-redesign .cdr-card{
  border:1px solid var(--gray-200); border-radius:16px; padding:34px 30px 30px;
  background:#fff; display:flex; flex-direction:column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.page-cd-redesign .cdr-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(18,24,29,.22); border-color:transparent; }
.page-cd-redesign .cdr-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-cd-redesign .cdr-card-num{ font-family:var(--font-display); font-weight:700; font-size:14px; color: var(--green-dark); letter-spacing:.05em; }
.page-cd-redesign .cdr-card-icon{ width:40px; height:40px; border-radius:10px; background: var(--gray-100); color:var(--ink); display:flex; align-items:center; justify-content:center; }
.page-cd-redesign .cdr-card h3{ font-size:20px; margin-bottom:10px; }
.page-cd-redesign .cdr-card p{ font-size:15px; color:var(--ink-soft); line-height:1.65; }
.page-cd-redesign .cdr-card-visual{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--gray-200); min-height:44px; display:flex; align-items:center; }
.page-cd-redesign .cdr-stack{ position:relative; width:100%; height:52px; }
.page-cd-redesign .cdr-stack span{ position:absolute; left:0; height:14px; border-radius:4px; background: var(--gray-100); border:1px solid var(--gray-200); }
.page-cd-redesign .cdr-stack span:nth-child(1){ top:0; width:70%; }
.page-cd-redesign .cdr-stack span:nth-child(2){ top:19px; width:88%; }
.page-cd-redesign .cdr-stack span:nth-child(3){ top:38px; width:55%; background: rgba(66,244,129,.16); border-color: rgba(31,203,99,.4); }
.page-cd-redesign .cdr-alt-chip{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:8px; background: var(--gray-100); font-size:12.5px; color: var(--ink-soft); line-height:1.5; }
.page-cd-redesign .cdr-alt-chip b{ color: var(--blue-dark); font-weight:700; }
.page-cd-redesign .cdr-diff{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; }
.page-cd-redesign .cdr-diff .before{ text-decoration:line-through; color: var(--gray-400); background:var(--gray-100); padding:7px 11px; border-radius:6px; }
.page-cd-redesign .cdr-diff .after{ color: var(--green-dark); background: rgba(66,244,129,.14); padding:7px 11px; border-radius:6px; font-weight:600; }
.page-cd-redesign .cdr-diff svg{ color: var(--gray-400); flex-shrink:0; }
@media (max-width: 860px){
  .page-cd-redesign .cdr-cards{ grid-template-columns:1fr; gap:24px; }
}

/* ---- "How it works" — pale numeral above a small icon circle, with a
   dotted arrow connector between steps (desktop only). ---- */
.page-cd-redesign .cdr-process{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.page-cd-redesign .cdr-step{ position:relative; }
.page-cd-redesign .cdr-step-num{ font-family:var(--font-display); font-weight:700; font-size:32px; color: rgba(31,203,99,.35); line-height:1; }
.page-cd-redesign .cdr-step-icon{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--gray-200); display:flex; align-items:center; justify-content:center; color:var(--ink); margin: 8px 0 20px; background:#fff; }
.page-cd-redesign .cdr-step h3{ font-size:19px; margin-bottom:8px; }
.page-cd-redesign .cdr-step p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; max-width:32ch; }
.page-cd-redesign .cdr-step:not(:last-child)::after{
  content:''; position:absolute; top:28px; right:-48px; width:48px; height:16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cline x1='0' y1='8' x2='36' y2='8' stroke='%239B958A' stroke-width='2' stroke-dasharray='4 4'/%3E%3Cpath d='M32 3 L42 8 L32 13' fill='none' stroke='%239B958A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.7;
}
@media (max-width: 860px){
  .page-cd-redesign .cdr-process{ grid-template-columns:1fr; gap:40px; }
  .page-cd-redesign .cdr-step:not(:last-child)::after{ display:none; }
}

/* ---- Subtle decorative texture: halftone dots over "Who this is for",
   faint line-art speech-bubble behind the FAQ. Both aria-hidden, both
   low-opacity, neither affects text contrast. ---- */
.page-cd-redesign .cdr-halftone-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image: radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 75% 30%, black, transparent 60%);
  mask-image: radial-gradient(circle at 75% 30%, black, transparent 60%);
}
.page-cd-redesign #faq{ overflow:hidden; }
.page-cd-redesign #faq .wrap{ position:relative; z-index:1; }
.page-cd-redesign .cdr-faq-deco{
  position:absolute; right:-40px; bottom:-40px; color: var(--ink); opacity:.05; pointer-events:none; z-index:0;
}

/* ---- Final CTA: restrained corner panel accents, echoing the rotated-
   rect motif used in the "Who this is for" background. ---- */
.page-cd-redesign .cta-band::after{
  content:''; position:absolute; top:28px; left:28px; width:64px; height:84px;
  border:1.5px solid rgba(255,255,255,.14); border-radius:10px; transform:rotate(-7deg); pointer-events:none;
}
.page-cd-redesign .cta-band .wrap::after{
  content:''; position:absolute; bottom:28px; right:28px; width:70px; height:56px;
  border:1.5px solid rgba(255,255,255,.12); border-radius:10px; transform:rotate(6deg); pointer-events:none;
}
.page-cd-redesign .cta-band h2 em{ color: var(--green); font-style:normal; }
@media (max-width: 700px){
  .page-cd-redesign .cta-band::after, .page-cd-redesign .cta-band .wrap::after{ display:none; }
}

/* ---- Accessibility: visible focus states for this page's interactive
   elements (links, buttons, FAQ summaries). ---- */
.page-cd-redesign a:focus-visible,
.page-cd-redesign button:focus-visible,
.page-cd-redesign summary:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px;
}

/* =========================================================
   Content Development (LIVE page) — visual polish pass (2026-09-02)
   Scoped to body.page-content-development. Works within the existing
   Vibrant system — no new tokens, no restyled shared components. Fixes
   this page's actual weak spots: (1) hero was a dashed placeholder box
   with no CTA; now the real hero illustration + the same Get a Quote /
   Explore Services actions every other service page's hero carries,
   (2) the "Three ways" icons and FAQ rows had no hover feedback,
   (3) no visible keyboard-focus states, (4) the closing CTA was a flat
   band — now carries the same restrained rotated-rect corner accents
   used behind "Who this is for", tying the page's top and bottom
   together. The hero-image frame mirrors .es-hero-image / .cdr-hero-image
   (premium dark framing) but is its own class so nothing coupled to the
   v2 redesign preview is touched.
========================================================= */

/* Hero visual (assets/hero-content-services-new.png): a transparent cut-out illustration
   used as-is — NO css frame (no border, box, radius, clip, shadow or mask). Desktop:
   absolutely placed in the hero-split, bleeding off the right edge. Mobile: pulled up
   to sit directly BELOW the H1 (before the sub-copy and CTAs) — done by making
   .hero-copy display:contents so its children become flex items that can be re-ordered
   around .hero-media. Scoped to .page-content-development. */
.page-content-development .hero-split .hero-split-inner{ position: relative; }
/* The artwork STAGE. It's absolutely placed inside .hero-split-inner (which fills
   the centred, max-width .wrap), and given a FIXED PIXEL width + a fixed px right
   offset — no %, no vw. So the stage sits at a constant place relative to the
   centred container: on wide monitors the whole hero shifts as a unit, the stage
   never drifts toward the viewport edge, and the callouts (absolute, fixed px
   offsets inside this box) keep the exact same relationship to the artwork at
   1024 / 1280 / 1366 / 1440 / 1600 / 1920. */
.page-content-development .cd-hero-image{
  position: absolute; top: 52%; right: -120px; width: 584px;
  transform: translateY(-50%);
  margin: 0; pointer-events: none;
}
.page-content-development .cd-hero-image img{ display:block; width:100%; height:auto; }
/* tablet 768–1023: a smaller stage so it doesn't crowd the narrower column */
@media (max-width: 1023px) and (min-width: 901px){
  .page-content-development .cd-hero-image{ width: 486px; right: -96px; }
}
@media (max-width: 900px){
  .page-content-development .hero-split .hero-split-inner{
    position: static; display: flex; flex-direction: column;
  }
  .page-content-development .hero-split .hero-copy{ display: contents; }
  .page-content-development .hero-split .hero-copy > .eyebrow{ order: 1; }
  .page-content-development .hero-split .hero-copy > h1{ order: 2; }
  .page-content-development .hero-split .hero-media{ order: 3; }
  .page-content-development .hero-split .hero-copy > .hero-sub{ order: 4; }
  .page-content-development .cd-hero-image{
    position: static; transform: none; right: auto;
    width: 100%; max-width: 500px; margin: 20px auto 0;
  }
}

/* =========================================================
   Content Development — hero callouts
   Reuses the shared .hero-callout component, but every offset is a FIXED
   PIXEL value measured against .cd-hero-image (the stage) — so the three
   annotations stay pinned to the same spots on the artwork at every desktop
   width. No idle float here: they read as fixed editorial annotations.
     tl  Canon-accurate content  → wire to the tablet / manga panels
     tr  Accessible by design    → wire to the manga artwork
     br  Polished for readers    → wire to the red-pen manuscript markup
========================================================= */
.page-content-development .hero-callouts{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.page-content-development .hero-callout{ width: 186px; }
.page-content-development .hero-callout__card{
  gap: 8px; padding: 10px 12px 10px 11px;
  border-radius: 9px;
  background: rgba(5, 25, 28, .80);
  border: 1px solid rgba(120, 220, 190, .20);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-content-development .hero-callout__card::after{ display: none; }   /* no card status dot here */
.page-content-development .hero-callout__icon{ width: 24px; height: 24px; border-radius: 6px; }
.page-content-development .hero-callout__icon svg{ width: 14px; height: 14px; }
.page-content-development .hero-callout__text strong{ font-size: 11.5px; }
.page-content-development .hero-callout__text span{ font-size: 10.5px; }

/* hover: 2px max, per spec */
.page-content-development .hero-callout:hover .hero-callout__card{
  transform: translateY(-2px);
  border-color: rgba(120, 220, 190, .42);
}
/* no idle float — override the shared motion-safe rule */
@media (prefers-reduced-motion: no-preference){
  .page-content-development .hero-callout--tl,
  .page-content-development .hero-callout--tr,
  .page-content-development .hero-callout--br{
    animation: heroCalloutIn .6s cubic-bezier(.22,1,.36,1) var(--cd,0ms) both;
  }
}

/* ---- fixed px offsets against the stage (see .cd-hero-image) ---- */
.page-content-development .hero-callout--tl{ top: -46px; left: -42px; }
.page-content-development .hero-callout--tr{ top: 14px;  left: 300px; }
.page-content-development .hero-callout--br{ bottom: 22px; left: 288px; }

/* connectors, aimed from each card at its artwork target */
.page-content-development .hero-callout--tl .hero-callout__wire{
  left: 140px; top: calc(100% - 6px); width: 92px; height: 84px;
}
.page-content-development .hero-callout--tr .hero-callout__wire{
  left: -78px; top: calc(100% - 6px); width: 96px; height: 56px;
}
.page-content-development .hero-callout--br .hero-callout__wire{
  left: 132px; bottom: calc(100% - 6px); top: auto; width: 46px; height: 48px;
}

/* tablet 768–1023: slightly smaller cards, offsets nudged to the smaller stage */
@media (max-width: 1023px) and (min-width: 901px){
  .page-content-development .hero-callout{ width: 172px; }
  .page-content-development .hero-callout--tl{ top: -46px; left: -30px; }
  .page-content-development .hero-callout--tr{ top: 12px;  left: 256px; }
  .page-content-development .hero-callout--br{ bottom: 18px; left: 240px; }
}

/* mobile <=900: no floating composition — stack the three cards under the
   artwork in order, connectors hidden */
@media (max-width: 900px){
  .page-content-development .hero-callouts{
    position: static; inset: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; margin-top: 16px;
  }
  .page-content-development .hero-callout{
    position: static; inset: auto; left: auto; top: auto; bottom: auto;
    width: 100%; max-width: 340px;
    opacity: 1; animation: none;
  }
  .page-content-development .hero-callout__wire{ display: none; }
}

/* "What's included" list — subtle icon-only hover (no row lift now that the
   items are full-width rows with hairline dividers). */
.whats-split .icon-trio-item .item-icon{
  transition: transform .35s var(--ease), color .3s ease;
}
.whats-split .icon-trio-item:hover .item-icon{
  transform: translateY(-2px); color: var(--blue);
}

/* FAQ summary — rounded hit area + a transition hook. Hover colour is set
   in the dark-FAQ redesign block further down (the section is no longer
   on a light background). */
.page-content-development .faq-item summary{
  border-radius: 10px;
  transition: color .25s ease, background .3s ease;
}

/* Closing CTA — same rotated-rect corner accents as the "Who this is for"
   panel outlines, so the page opens and closes on the same motif. */
.page-content-development .cta-band{ isolation:isolate; }
.page-content-development .cta-band::after{
  content:''; position:absolute; top:30px; left:30px; width:64px; height:84px;
  border:1.5px solid rgba(255,255,255,.13); border-radius:10px;
  transform:rotate(-7deg); pointer-events:none; z-index:0;
}
.page-content-development .cta-band .wrap::after{
  content:''; position:absolute; bottom:30px; right:30px; width:72px; height:56px;
  border:1.5px solid rgba(255,255,255,.11); border-radius:10px;
  transform:rotate(6deg); pointer-events:none; z-index:0;
}
@media (max-width: 700px){
  .page-content-development .cta-band::after,
  .page-content-development .cta-band .wrap::after{ display:none; }
}

/* Accessibility — visible keyboard-focus states for this page's links,
   buttons and FAQ toggles (previously relied on the UA default only). */
.page-content-development a:focus-visible,
.page-content-development button:focus-visible,
.page-content-development summary:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px;
}

/* ===================== FAQ — light two-column layout (.faq-split) =====================
   First built for Content Development (2026-09-02), then rolled out to every service page's
   FAQ. Opt-in via class="faq-split" on the <section id="faq"> plus the two-column markup
   (.faq-split-inner > .faq-intro + .faq-list). Left column = eyebrow + "Common questions."
   heading; right column = a plain hairline-divided accordion with a large drawn +/- toggle.
   Halved vertical padding (65px vs the shared 130px). Scoped to .faq-split so the shared
   .faq-list / .faq-item component and any FAQ not opting in (e.g. the .page-cd-redesign
   draft) are untouched. */
.faq-split{ padding-top: 65px; padding-bottom: 65px; }
.faq-split .faq-split-inner{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px 80px; align-items:start;
}
.faq-split .faq-intro h2{ font-size: 46px; }

/* plain hairline accordion + large +/- toggle */
.faq-split .faq-list{ max-width: none; }
.faq-split .faq-item{
  border: 0; border-top: 1px solid var(--gray-200);
  background: transparent; border-radius: 0; margin: 0;
}
.faq-split .faq-item:last-child{ border-bottom: 1px solid var(--gray-200); }
.faq-split .faq-item summary{
  padding: 24px 6px; gap: 24px; color: var(--ink); font-size: 17px; border-radius: 0;
  transition: color .25s ease;
}
.faq-split .faq-item summary:hover{ color: var(--blue-dark); background: transparent; }
.faq-split .faq-item summary .chev{ display:none; }
.faq-split .faq-item summary::after{
  content:''; flex-shrink:0; width: 18px; height: 18px; color: var(--ink);
  background:
    linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
  transition: color .3s ease, transform .3s var(--ease);
}
.faq-split .faq-item[open] summary::after{
  color: var(--blue-dark);
  background: linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat;
}
.faq-split .faq-item .faq-answer{
  padding: 0 46px 26px 6px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 64ch;
}
@media (max-width: 900px){
  .faq-split .faq-split-inner{ grid-template-columns: 1fr; gap: 28px; }
  .faq-split .faq-intro h2{ font-size: 38px; }
}
@media (max-width: 640px){
  .faq-split{ padding-top: 45px; padding-bottom: 45px; }
}