/* ==========================================================================
   SERVICES BOOK — 3D book whose pages turn as you scroll
   --------------------------------------------------------------------------
   How it works:
   • The HTML only has an empty <div id="book">. assets/js/components/book/
     book.js builds the pages from assets/js/data/services.js.
   • Each turning page ("leaf") is cut into 10 vertical strips. JavaScript
     rotates the strips slightly differently so the paper curls while turning.
   • At rest, a single flat copy of the page (".whole") is shown instead of
     the strips, so text stays perfectly sharp.
   • Two layouts: "spread" (two pages, laptops) and "single" (one page,
     phones / narrow windows). ".cards" is a plain list for reduced motion.
   • All text sizes use calc(… * var(--k)); JS lowers --k slightly on short
     screens so every page fits without being cut off.
   ========================================================================== */

/* ---- Scroll track & sticky stage ---- */
.book-scroll { position: relative; height: 640vh; }          /* height is reset by JS */
.book-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: var(--nav-height); overflow: hidden;
}

/* ---- Book size ---- */
.book-wrap {
  --k: 1;                                              /* text scale, set by JS */
  --bw: min(1060px, 86vw);                             /* spread width          */
  --bh: min(640px, calc(100svh - 196px));              /* spread height         */
  width: var(--bw); height: var(--bh); position: relative;
  perspective: 2400px; perspective-origin: 50% 20%; will-change: transform;
}
.single .book-wrap { --bw: min(460px, calc(100vw - 64px)); --bh: min(700px, calc(100svh - 200px)); }
.desk-shadow {
  position: absolute; left: 2%; right: -2%; bottom: -38px; height: 46px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(15, 39, 66, .30), transparent); filter: blur(8px);
}
.single .desk-shadow { left: 6%; right: 0; }
.book { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(6deg); }  /* slight "lying on a desk" tilt */

/* ---- Hard back cover (navy board behind the pages) ---- */
.board {
  position: absolute; top: -11px; bottom: -11px; left: 50%; width: calc(50% + 13px);
  border-radius: 2px 10px 10px 2px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 5px),
              linear-gradient(135deg, var(--navy-cover), var(--navy-deep));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 34px 60px -28px rgba(15, 39, 66, .6);
}
.single .board { left: 0; width: calc(100% + 13px); }

/* ---- Static paper: last right-hand page + left-hand page stack ---- */
.page { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 4px 4px 0; overflow: hidden; }
.single .page { left: 0; width: 100%; }
.stack-left { position: absolute; top: 0; left: 0; width: 50%; height: 100%; border-radius: 4px 0 0 4px; opacity: 0; }
.single .stack-left { display: none; }

/* ---- Turning pages ("leaves") ---- */
.leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.single .leaf { left: 0; width: 100%; }
.leaf.hard { top: -11px; height: calc(100% + 22px); width: calc(50% + 13px); }   /* front cover */
.single .leaf.hard { width: calc(100% + 13px); }

/* Strips (for the curl) — each strip is nested inside the previous one */
.strip { position: absolute; top: 0; left: 0; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; --s: 0; }
.strip .strip { left: 100%; width: 100%; }
.face {
  position: absolute; top: 0; left: 0; width: calc(100% + 1.5px); height: 100%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face.back { transform: rotateY(180deg); left: -1.5px; }
.face::after { content: ""; position: absolute; inset: 0; background: #0b1c30; opacity: var(--s); pointer-events: none; }  /* shading while bending */
.slice { position: absolute; top: 0; height: 100%; }

/* Flat copy shown while a page is resting */
.whole { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.whole.back { transform: rotateY(180deg); }
.leaf.rest > .strip { visibility: hidden; }
.leaf:not(.rest) > .whole { display: none; }

/* Paper vs. cover surfaces */
.leaf:not(.hard) .face, .leaf:not(.hard) > .whole { background: var(--sheet); }
.leaf:not(.hard) .face.front, .leaf:not(.hard) > .whole.front { border-radius: 0 4px 4px 0; }
.leaf:not(.hard) .face.back,  .leaf:not(.hard) > .whole.back  { border-radius: 4px 0 0 4px; }
.leaf.hard .face, .leaf.hard > .whole { background: linear-gradient(135deg, var(--navy-cover), var(--navy-deep)); }
.leaf.hard .face.front, .leaf.hard > .whole.front { border-radius: 2px 10px 10px 2px; }
.leaf.hard .face.back,  .leaf.hard > .whole.back  { border-radius: 10px 2px 2px 10px; }
.leaf.hard .slice { background: none !important; }

/* Paper texture + shadow near the spine */
.slice.fs, .page .slice {
  background: linear-gradient(to right, rgba(15, 39, 66, .16), rgba(15, 39, 66, .04) 4%, transparent 9%),
              linear-gradient(180deg, #fdfcf9, #f8f6f0);
}
.slice.bs, .stack-left {
  background: linear-gradient(to left, rgba(15, 39, 66, .16), rgba(15, 39, 66, .04) 4%, transparent 9%),
              linear-gradient(180deg, #fdfcf9, #f8f6f0);
}
.single .slice.fs, .single .page .slice {
  background: linear-gradient(to right, rgba(15, 39, 66, .10), transparent 5%), linear-gradient(180deg, #fdfcf9, #f8f6f0);
}

/* ==========================================================================
   PAGE CONTENT LAYOUTS
   ========================================================================== */
.pg { position: absolute; inset: 0; padding: calc(40px * var(--k)) calc(48px * var(--k)) calc(34px * var(--k)); display: flex; flex-direction: column; }
/* Running header at the top of each page */
.pg-run {
  flex: none; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
/* Bottom band — same height on left and right pages so the lines align */
.pg-base {
  flex: none; margin-top: auto; min-height: calc(52px * var(--k)); padding-top: calc(12px * var(--k));
  border-top: 1px solid var(--line); font-size: calc(12.5px * var(--k)); line-height: 1.45; color: var(--muted);
}
.pg-base b { color: var(--ink); font-weight: 600; display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 2px; }
.pg-base.sig { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.pg .mid { margin: auto 0; padding: calc(18px * var(--k)) 0; }   /* vertically centred block */

/* Left page: chapter opener */
.chap-no {
  font-family: var(--serif); font-weight: 300; font-size: calc(118px * var(--k)); line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.2px var(--ink);         /* outlined numerals */
}
.chap-lbl { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--green-text); margin: calc(18px * var(--k)) 0 calc(10px * var(--k)); }
.pg-chap h3, .pg-end h3 { font-family: var(--serif); font-weight: 380; font-size: calc(32px * var(--k)); line-height: 1.13; letter-spacing: -.02em; }
.tag { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: calc(17px * var(--k)); color: var(--muted); margin-top: calc(12px * var(--k)); }

/* Right page: details */
.lbl-sm { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: calc(20px * var(--k)) 0 calc(8px * var(--k)); }
.ov { font-family: var(--serif); font-weight: 350; font-size: calc(17.5px * var(--k)); line-height: 1.45; }
.pg ul { list-style: none; }
.pg li { font-size: calc(14px * var(--k)); padding: calc(6px * var(--k)) 0 calc(6px * var(--k)) 21px; border-bottom: 1px solid var(--line); position: relative; line-height: 1.4; }
.pg li:last-child { border-bottom: 0; }
.pg li::before {                                                    /* green diamond bullet */
  content: ""; position: absolute; left: 2px; top: calc(6px * var(--k) + .45em);
  width: 6px; height: 6px; border: 1.5px solid var(--green); transform: rotate(45deg);
}

/* Contents page */
.pg-toc h3 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: calc(48px * var(--k)); letter-spacing: -.02em; margin: calc(24px * var(--k)) 0 calc(12px * var(--k)); }
.pg-toc ol { list-style: none; }
.pg-toc li { padding: 0; border: 0; }
.pg-toc li::before { display: none; }
.pg-toc button {
  display: grid; grid-template-columns: 34px 1fr 16px; align-items: baseline; gap: 6px; width: 100%;
  text-align: left; padding: calc(9px * var(--k)) 0; border-bottom: 1px solid var(--line); transition: color .2s;
}
.pg-toc button:hover { color: var(--blue); }
.pg-toc .n { font-size: 11px; font-weight: 700; color: var(--green-text); letter-spacing: .08em; }
.pg-toc .t { font-family: var(--serif); font-size: calc(15.5px * var(--k)); line-height: 1.3; }
.pg-toc .a { color: var(--muted); font-size: 13px; }

/* Front cover & inside cover — full-colour logo on a paper medallion */
.medal {
  width: 36%; max-width: 180px; aspect-ratio: 1; border-radius: 50%; background: var(--paper);
  display: grid; place-items: center; box-shadow: 0 0 0 7px rgba(246, 244, 239, .07), 0 14px 30px -12px rgba(0, 0, 0, .55);
}
.medal svg { width: 80%; height: 80%; }
.pg-cover { align-items: center; justify-content: center; text-align: center; color: var(--paper); }
.cover-frame { position: absolute; inset: 16px; border: 1px solid rgba(246, 244, 239, .2); border-radius: 3px; pointer-events: none; }
.cover-frame::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(246, 244, 239, .08); }
.pg-cover .medal { margin-bottom: 30px; }
.pg-cover small { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; opacity: .75; font-weight: 600; }
.pg-cover h3 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(44px, 5vw, 70px); line-height: 1; margin: 14px 0 18px; letter-spacing: -.02em; }
.pg-cover .open-hint { position: absolute; bottom: 36px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .75; }
.pg-inside { padding: 12px; }
.endpaper {
  flex: 1; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: rgba(246, 244, 239, .8); gap: 14px; padding: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(39, 180, 240, .10), transparent 55%),
              repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px), var(--navy-endpaper);
}
.endpaper .medal { width: 30%; max-width: 140px; margin-bottom: 8px; }
.endpaper b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--paper); }
.endpaper small { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; opacity: .8; }
.endpaper p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 15px; max-width: 290px; margin-top: 8px; }

/* Closing page */
.pg-end p { color: var(--muted); font-size: calc(15px * var(--k)); max-width: 360px; margin-top: calc(12px * var(--k)); }
.pg-end .btn { margin-top: calc(24px * var(--k)); }
.pg-end .chap-lbl { margin-top: 0; }

/* Single-page layout (phones / narrow windows): whole service on one page */
.pg-one { padding: calc(26px * var(--k)) calc(26px * var(--k)) calc(20px * var(--k)); }
.pg-one .head { display: flex; align-items: flex-end; gap: 14px; margin-top: calc(18px * var(--k)); }
.pg-one .chap-no { font-size: calc(64px * var(--k)); }
.pg-one .chap-lbl { margin: 0 0 6px; }
.pg-one h3 { font-family: var(--serif); font-weight: 400; font-size: calc(23px * var(--k)); line-height: 1.15; letter-spacing: -.015em; margin-top: calc(14px * var(--k)); }
.pg-one .tag { font-size: calc(15px * var(--k)); margin-top: 6px; }
.pg-one .ov { font-size: calc(15px * var(--k)); margin-top: calc(14px * var(--k)); }
.pg-one .lbl-sm { margin: calc(14px * var(--k)) 0 calc(4px * var(--k)); }
.pg-one li { font-size: calc(13px * var(--k)); }
.single .pg-toc, .single .pg-end, .single .pg-chap { padding: calc(26px * var(--k)) calc(26px * var(--k)) calc(20px * var(--k)); }

/* ---- Chapter buttons under the book ---- */
.book-nav { margin-top: 30px; display: flex; align-items: center; gap: 20px; min-height: 40px; flex-wrap: wrap; justify-content: center; }
.book-dots { display: flex; gap: 4px; }
.book-dots button {
  width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--muted);
  border: 1px solid transparent; transition: all .3s;
}
.book-dots button:hover { border-color: var(--line); }
.book-dots button.on { background: var(--ink); color: var(--paper); }
.book-cur { font-size: 13px; color: var(--muted); min-width: 250px; font-weight: 500; }
.book-cur b { color: var(--ink); font-weight: 600; }
.single .book-cur { min-width: 0; text-align: center; width: 100%; }

/* ---- Plain list version ----
   • In book modes it is visually hidden but read by screen readers
     (the 3D book itself is hidden from them to avoid duplicate text).
   • With "reduce motion" on, or very short screens, the list is shown instead. */
.svc-list { gap: 18px; padding-bottom: 40px; }
.book-scroll:not(.cards) .svc-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cards { height: auto !important; }
.cards .book-stage { display: none; }
.cards .svc-list { display: grid; }
.svc-card { border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 24px 50px -30px rgba(15, 39, 66, .35); overflow: hidden; background: var(--sheet); }
.svc-card .pg { position: relative; }

/* ==========================================================================
   RIGHT-PAGE LAYOUT + ANIMATED SERVICE ICONS  (icons: book/book-icons.js)
   --------------------------------------------------------------------------
   The resting state of every icon is fully drawn, and only the keyframes
   hide parts of it — so with "reduce motion" on, icons simply appear static.
   ========================================================================== */
.ico-wrap { height: calc(104px * var(--k)); margin: calc(26px * var(--k)) 0 calc(4px * var(--k)); display: flex; align-items: center; }
.ico { height: 100%; width: auto; overflow: visible; }
.pg-detail .ov { font-size: calc(19px * var(--k)); line-height: 1.55; }
.pg-one .ico-wrap { height: calc(72px * var(--k)); margin: calc(14px * var(--k)) 0 calc(2px * var(--k)); }
.pg-one .ov { margin-top: calc(8px * var(--k)); }

.ico * { transform-box: fill-box; animation-fill-mode: both; }

/* Formation: floors stack up, flag is raised */
.ico-building .fl  { transform-origin: bottom; animation: ico-floor 5s var(--ease) infinite; }
.ico-building .fl2 { animation-delay: .45s; }
.ico-building .fl3 { animation-delay: .9s; }
.ico-building .flag { transform-origin: bottom; animation: ico-flag 5s var(--ease) infinite; }
@keyframes ico-floor { 0% { opacity: 0; transform: translateY(-8px); } 12%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes ico-flag  { 0%, 30% { transform: scaleY(0); } 42%, 82% { transform: scaleY(1); } 94%, 100% { transform: scaleY(0); } }

/* Finance technology: central hub pulses */
.ico-network .hub { transform-origin: center; animation: ico-pulse 2.4s ease-in-out infinite; }
@keyframes ico-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* Record-to-report: bars grow, trend line draws */
.ico-report .bar { transform-origin: bottom; animation: ico-grow 5s var(--ease) infinite; }
.ico-report .b2 { animation-delay: .15s; } .ico-report .b3 { animation-delay: .3s; } .ico-report .b4 { animation-delay: .45s; }
.ico-report .trend { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ico-draw 5s var(--ease) infinite; }
.ico-report .dot { animation: ico-appear 5s ease infinite; }
@keyframes ico-grow   { 0% { transform: scaleY(0); } 16%, 84% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes ico-draw   { 0%, 20% { stroke-dashoffset: 1; } 46%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes ico-appear { 0%, 44% { opacity: 0; } 52%, 84% { opacity: 1; } 100% { opacity: 0; } }

/* Process excellence: gears turn in opposite directions */
.ico-gears .gear { transform-origin: center; }
.ico-gears .g-big   { animation: ico-spin 8s linear infinite; }
.ico-gears .g-small { animation: ico-spin 4.7s linear infinite reverse; }

/* Acceptance testing: items ticked one by one */
.ico-checklist .tick { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ico-tick 4.5s var(--ease) infinite; }
.ico-checklist .t2 { animation-delay: .6s; } .ico-checklist .t3 { animation-delay: 1.2s; }
@keyframes ico-tick { 0%, 8% { stroke-dashoffset: 1; } 20%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

/* Finance operations: the cycle turns around the books */
.ico-cycle .ring { transform-box: view-box; transform-origin: 80px 50px; animation: ico-spin 7s linear infinite; }
.ico-cycle .c3 { animation: ico-bob 2.4s ease-in-out infinite; }
@keyframes ico-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@keyframes ico-spin { to { transform: rotate(360deg); } }