/* ===== Base design system: variables, layout, components ===== */
:root {
    --navy: #01465A; --navy-deep: #013444; --navy-muted: #025A72;
    --orange: #FF8500; --orange-light: #FFA33A; --orange-soft: #FFD9B0;
    --cream: #FAF6F1; --linen: #F5F4ED; --warm-white: #FFFCF7;
    --warm-gray: #B8AFA6; --text-soft: #5C6478; --graphite: #171A1F;
    --page-w: 520px; --page-h: 680px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { min-height: 100vh; font-family: 'Jost', sans-serif; color: var(--graphite); overflow-x: hidden;
    background: radial-gradient(ellipse at 20% 10%, rgba(1,70,90,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(255,133,0,0.06) 0%, transparent 50%), linear-gradient(135deg, #1a2530 0%, #0d1820 50%, #1a2530 100%); background-attachment: fixed; }
  body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.015) 0%, transparent 40%), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.015) 0%, transparent 40%); z-index: 0; }
  .stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 80px; position: relative; z-index: 1; }
  .book-wrap { perspective: 2400px; perspective-origin: 50% 50%; position: relative; max-width: 100%; cursor: zoom-in; transition: transform 0.25s ease, transform-origin 0.2s ease; }
  .book { position: relative; width: calc(var(--page-w) * 2); height: var(--page-h); transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); margin: 0 auto; }
  .book-wrap.reading .book { transform: rotateX(2deg); }
  .book::after { content: ''; position: absolute; bottom: -30px; left: 8%; right: 8%; height: 40px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%); filter: blur(12px); z-index: -1; }
  .spine { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.25) 100%); transform: translateX(-50%); z-index: 50; pointer-events: none; }
  .leaf { position: absolute; top: 0; left: 50%; width: var(--page-w); height: var(--page-h); transform-style: preserve-3d; transform-origin: left center; transition: transform 1.1s cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform; }
  .leaf.flipped { transform: rotateY(-180deg); }
  .leaf { z-index: 10; } .leaf.flipped { z-index: 5; }
  .page-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--cream); overflow: hidden; box-shadow: inset 2px 0 4px rgba(0,0,0,0.08), inset -1px 0 2px rgba(0,0,0,0.04); }
  .page-face.back { transform: rotateY(180deg); box-shadow: inset -2px 0 4px rgba(0,0,0,0.08), inset 1px 0 2px rgba(0,0,0,0.04); }
  .page-face::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.55s ease; z-index: 100; }
  .leaf:not(.flipped) .page-face.front::before { background: linear-gradient(to left, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 20%, transparent 50%); }
  .leaf.flipping .page-face.front::before { opacity: 1; }
  .leaf.flipped .page-face.back::before { background: linear-gradient(to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 20%, transparent 50%); }
  .leaf.flipping .page-face.back::before { opacity: 1; }
  .page-inner { position: absolute; inset: 0; padding: 28px 40px 52px; display: flex; flex-direction: column; }
  .page-num { position: absolute; bottom: 22px; font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--text-soft); letter-spacing: 3px; font-weight: 300; }
  .page-face.front .page-num { right: 36px; } .page-face.back .page-num { left: 36px; }
  .page-footer-brand { position: absolute; bottom: 22px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-soft); opacity: 0.6; }
  .page-face.front .page-footer-brand { left: 36px; } .page-face.back .page-footer-brand { right: 36px; }
  .cover { background: radial-gradient(ellipse 90% 70% at 80% 30%, rgba(255,133,0,0.08) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 20% 80%, rgba(2,90,114,0.5) 0%, transparent 55%), linear-gradient(135deg, #013444 0%, #01465A 50%, #025A72 100%); padding: 0; display: flex; flex-direction: column; position: absolute; inset: 0; }
  .cover-top { position: relative; z-index: 2; padding: 44px 40px 0; display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; }
  .cover-logo { width: 200px; max-width: 75%; margin-bottom: 8px; }
  .cover-mid { position: relative; z-index: 2; padding: 0 40px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .cover-title { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 500; line-height: 0.95; letter-spacing: -1.5px; color: var(--cream); margin-bottom: 6px; }
  .cover-title .accent { color: var(--orange); font-style: italic; font-weight: 400; }
  .cover-rule { width: 70px; height: 2px; background: var(--orange); margin: 24px 0 20px; }
  .cover-subtitle { font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height: 1.55; font-weight: 300; font-style: italic; color: rgba(250,246,241,0.85); max-width: 420px; }
  .cover-bottom { position: relative; z-index: 2; padding: 0 40px 40px; display: flex; justify-content: space-between; align-items: flex-end; color: rgba(250,246,241,0.6); font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; flex-shrink: 0; }
  .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(1,70,90,0.15); }
  .page-header .section-tag { display: flex; align-items: center; gap: 10px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--orange); font-weight: 500; }
  .page-header .section-tag::before { content: ''; width: 22px; height: 1px; background: var(--orange); }
  .page-title { font-family: 'Cormorant Garamond', serif; font-size: 38px; line-height: 1.02; letter-spacing: -0.5px; color: var(--navy); font-weight: 500; margin-bottom: 2px; }
  .page-title .accent { color: var(--orange); font-style: italic; font-weight: 400; }
  .page-kicker { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: var(--text-soft); margin-bottom: 18px; font-weight: 300; }
  .team-grid { display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .team-lead { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: linear-gradient(135deg, rgba(1,70,90,0.09) 0%, rgba(1,70,90,0.15) 100%); border-left: 3px solid var(--orange); border-radius: 4px; }
  .avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-muted) 0%, var(--navy) 100%); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--cream); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; letter-spacing: 1px; position: relative; flex-shrink: 0; box-shadow: 0 4px 10px rgba(1,70,90,0.2); }
  .avatar.has-photo { font-size: 0; color: transparent; }
  .avatar::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(255,133,0,0.3); }
  .avatar.orange { background-image: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); }
  .avatar.sm { width: 52px; height: 52px; font-size: 15px; }
  .member-info .name { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--navy-deep); font-weight: 600; line-height: 1; }
  .member-info .role { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); font-weight: 500; margin: 3px 0 4px; }
  .member-info .contact { font-family: 'Jost', sans-serif; font-size: 10.5px; color: var(--text-soft); line-height: 1.35; }
  .member-info .contact em { font-style: italic; color: var(--navy); }
  .team-sub { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 2px; }
  .team-card { background: linear-gradient(135deg, rgba(1,70,90,0.07) 0%, rgba(1,70,90,0.12) 100%); border-radius: 4px; padding: 10px 8px 12px; text-align: center; border-top: 2px solid var(--navy); }
  .team-card .avatar { margin: 0 auto 6px; }
  .team-card .name { font-family: 'Cormorant Garamond', serif; font-size: 13.5px; color: var(--navy-deep); font-weight: 600; line-height: 1.1; }
  .team-card .role { font-family: 'Jost', sans-serif; font-size: 7.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); font-weight: 500; margin: 3px 0 4px; }
  .team-card .contact { font-family: 'Jost', sans-serif; font-size: 8.5px; color: var(--text-soft); line-height: 1.35; }
  .timeline { display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
  .step { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: flex-start; flex: 1; }
  .step-num { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; flex-shrink: 0; position: relative; box-shadow: 0 3px 8px rgba(255,133,0,0.35); }
  .step-content .step-title { font-family: 'Cormorant Garamond', serif; font-size: 17px; color: var(--navy-deep); font-weight: 600; line-height: 1.1; margin-bottom: 3px; }
  .step-content .step-desc { font-family: 'Jost', sans-serif; font-size: 11px; color: var(--navy-deep); line-height: 1.5; font-weight: 300; }
  .commitment-page { background: radial-gradient(ellipse 90% 70% at 80% 20%, rgba(255,133,0,0.05) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 10% 90%, rgba(2,90,114,0.4) 0%, transparent 55%), linear-gradient(160deg, #013444 0%, #01465A 60%, #02506A 100%); position: absolute; inset: 0; }
  .commitment-page .page-inner { color: var(--cream); padding: 36px 40px 48px; }
  .commitment-logo { width: 170px; margin-bottom: 22px; opacity: 0.95; }
  .commitment-title { font-family: 'Cormorant Garamond', serif; font-size: 48px; line-height: 0.95; letter-spacing: -1px; font-weight: 500; margin-bottom: 4px; }
  .commitment-title .accent { color: var(--orange); font-style: italic; }
  .commitment-rule { width: 60px; height: 2px; background: var(--orange); margin: 16px 0 22px; }
  .commit-intro { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; line-height: 1.5; color: rgba(250,246,241,0.85); margin-bottom: 22px; max-width: 440px; font-weight: 300; }
  .ed-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .ed-promise.dark { margin-top: 18px; gap: 10px; }
  .ed-promise.dark .ed-promise-card { background: rgba(250,246,241,0.06); border-top: 2px solid var(--orange); padding: 16px 10px 18px; }
  .ed-promise.dark .ed-promise-card .word { color: var(--cream); font-size: 19px; margin-bottom: 6px; }
  .ed-promise.dark .ed-promise-card .word-desc { color: rgba(250,246,241,0.65); font-size: 9px; line-height: 1.35; }
  .ed-promise.dark.six { grid-template-columns: repeat(3, 1fr); }
  .ed-promise.dark.six .ed-promise-card { padding: 14px 10px 16px; }
  .ed-promise.dark.six .ed-promise-card .word { font-size: 17px; }
  .ed-promise-card { background: var(--linen); border-top: 2px solid var(--orange); padding: 8px 6px 9px; text-align: center; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ed-promise-card .word { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 600; color: var(--navy-deep); line-height: 1; margin-bottom: 3px; }
  .ed-promise-card .word-desc { font-family: 'Jost', sans-serif; font-size: 7px; line-height: 1.3; color: var(--text-soft); font-weight: 300; }
  .commit-goal { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,133,0,0.3); text-align: center; }
  .commit-goal-label { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: var(--orange); font-weight: 400; margin-bottom: 12px; }
  .commit-goal-body { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.45; color: var(--cream); max-width: 440px; margin: 0 auto; font-weight: 400; }
  .editorial { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255,133,0,0.04) 0%, transparent 50%), radial-gradient(ellipse 70% 60% at 0% 100%, rgba(1,70,90,0.05) 0%, transparent 55%), var(--cream); }
  .editorial .page-inner { padding: 32px 38px 36px; }
  .ed-intro { font-family: 'Cormorant Garamond', serif; font-size: 15px; line-height: 1.55; color: var(--navy-deep); margin-bottom: 8px; font-weight: 400; }
  .u-ed-intro { font-size: 17px; line-height: 1.5; font-style: italic; color: var(--navy-deep); font-weight: 400; margin: 8px 0 14px; padding: 10px 8px; background: rgba(245,244,237,0.95); border-radius: 6px; border: 1px solid rgba(1,70,90,0.1); text-align: center; }
  .u-stat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; margin-bottom: 14px; }
  .u-stat-grid-4 { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 0 14px; border-top: 1px solid rgba(1,70,90,0.12); border-bottom: 1px solid rgba(1,70,90,0.12); margin-bottom: 16px; }
  .u-stat-divider { width: 1px; background: rgba(1,70,90,0.08); align-self: stretch; flex-shrink: 0; }
  .u-stat-cell { text-align: center; flex: 1; padding: 0; overflow: visible; }
  .u-stat-cell-pad { text-align: center; padding: 4px 16px 2px; }
  .u-num-lg { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 600; color: var(--orange); line-height: 1; letter-spacing: -2px; }
  .u-num-md { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 700; color: var(--navy-deep); line-height: 1; letter-spacing: -1px; }
  .u-stat-label { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-soft); margin-top: 6px; font-weight: 500; white-space: nowrap; overflow: visible; }
  .u-stat-caption { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: var(--navy-deep); font-style: italic; margin-top: 4px; }
  .u-stat-sep { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 1px; height: 80%; background: linear-gradient(to bottom, transparent, rgba(255,133,0,0.4), transparent); }
  body.mobile-mode { --page-w: 520px; --page-h: 680px; }
  body.mobile-mode .page-inner { padding: 28px 40px 52px; }
  body.mobile-mode .cover-top { padding: 44px 40px 0; }
  body.mobile-mode .cover-mid { padding-left: 40px; padding-right: 40px; }
  body.mobile-mode .cover-title { font-size: 60px; }
  body.mobile-mode .page-title { font-size: 38px; }
  body.mobile-mode .commitment-title { font-size: 48px; }
  body.mobile-mode .cover-logo { width: 200px; }
  body.mobile-mode .team-lead { grid-template-columns: 74px 1fr; gap: 14px; padding: 10px 14px 10px 10px; }
  body.mobile-mode .avatar { width: 72px; height: 72px; font-size: 22px; }
  body.mobile-mode .member-info .name { font-size: 20px; }
  body.mobile-mode .back-cover .thanks { font-size: 42px; }
  body.mobile-mode .stage { padding: 20px 0 120px; justify-content: flex-start; align-items: center; }
  body.mobile-mode .book-wrap { transform: scale(calc((100vw - 32px) / var(--page-w))); transform-origin: top left; margin-left: 16px; width: var(--page-w); }
  body.mobile-mode .book { width: var(--page-w); height: var(--page-h); perspective: none; transform: none !important; }
  body.mobile-mode .book::after { display: none; }
  body.mobile-mode .spine { display: none; }
  body.mobile-mode .leaf { display: none; position: absolute; top: 0; left: 0; width: var(--page-w); height: var(--page-h); transform-style: flat; transform: none !important; transition: none !important; }
  body.mobile-mode .leaf.mobile-visible { display: block; }
  body.mobile-mode .page-face { display: none; position: absolute; inset: 0; transform: none !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; transition: none !important; }
  body.mobile-mode .page-face.mobile-active { display: block; }
  body.mobile-mode .page-face::before { display: none !important; }
  body.mobile-mode .click-zone { display: none; }
  body.mobile-mode .dots { display: none; }
  @keyframes mobileFlipOut { 0%{transform:perspective(900px) rotateY(0deg);opacity:1} 100%{transform:perspective(900px) rotateY(-90deg);opacity:0} }
  @keyframes mobileFlipIn { 0%{transform:perspective(900px) rotateY(90deg);opacity:0} 100%{transform:perspective(900px) rotateY(0deg);opacity:1} }
  @keyframes mobileFlipOutRev { 0%{transform:perspective(900px) rotateY(0deg);opacity:1} 100%{transform:perspective(900px) rotateY(90deg);opacity:0} }
  @keyframes mobileFlipInRev { 0%{transform:perspective(900px) rotateY(-90deg);opacity:0} 100%{transform:perspective(900px) rotateY(0deg);opacity:1} }
  body.mobile-mode .page-face.flip-out { animation: mobileFlipOut 0.18s ease-in forwards; }
  body.mobile-mode .page-face.flip-in { animation: mobileFlipIn 0.22s ease-out forwards; }
  body.mobile-mode .page-face.flip-out-rev { animation: mobileFlipOutRev 0.18s ease-in forwards; }
  body.mobile-mode .page-face.flip-in-rev { animation: mobileFlipInRev 0.22s ease-out forwards; }
  .u-quote-text { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-style: italic; color: var(--navy-deep); line-height: 1.4; max-width: 500px; margin: 0 auto; }
  .u-quote-center { text-align: center; padding: 6px 16px 0; margin-bottom: 60px; }
  .u-starburst-sm { color: var(--orange); width: 28px; height: 28px; opacity: 0.7; margin-bottom: 8px; }
  .u-stat-disclosure { font-family: 'Jost', Arial, sans-serif; font-size: 7.5px; line-height: 1.3; color: var(--text-soft); position: absolute; bottom: 0px; left: 40px; right: 40px; padding-top: 4px; border-top: 0.5px solid rgba(1,70,90,0.15); }
  .u-principle-row { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: baseline; }
  .u-principle-num { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-style: italic; color: var(--orange); line-height: 1; font-weight: 500; }
  .u-principle-heading { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--cream); line-height: 1.2; margin-bottom: 8px; }
  .u-principle-body { font-family: 'Jost', sans-serif; font-size: 14px; color: rgba(250,246,241,0.78); line-height: 1.6; }
  .u-principle-block-border { padding: 18px 0 20px; border-bottom: 1px solid rgba(255,133,0,0.25); }
  .u-principle-block-border2 { padding: 20px 0; border-bottom: 1px solid rgba(255,133,0,0.25); }
  .u-principle-block-last { padding: 20px 0 8px; }
  .u-dark-face { background: linear-gradient(160deg, #12303B 0%, #0E2530 60%, #0A1E28 100%); }
  .u-dark-editorial { position: relative; overflow: hidden; background: linear-gradient(160deg, #12303B 0%, #0E2530 60%, #0A1E28 100%); color: var(--cream); }
  .u-footer-brand-dark { color: rgba(250,246,241,0.5); }
  .u-page-num-dark { color: rgba(250,246,241,0.7); }
  .u-rel-z1 { position: relative; z-index: 1; }
  .u-rel-hidden { position: relative; overflow: hidden; }
  .u-strong-cream { color: var(--cream); font-weight: 600; }
  .u-fiduciary-quote { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-style: italic; font-weight: 500; color: var(--orange); line-height: 1.0; letter-spacing: -1.2px; text-align: right; margin-top: -20px; padding-right: 11%; }
  .u-svg-orange { color: var(--orange); }
  .u-team-lead-grid { grid-template-columns: 110px 1fr; gap: 18px; padding: 14px 16px 14px 12px; }
  .u-team-card-grid { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; }
  .u-team-sub-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .u-name-lg { font-size: 18px; } .u-name-sm { font-size: 14px; }
  .u-contact-mt { margin-top: 4px; } .u-contact-block { display: block; margin-top: 4px; }
  .u-page-title-32 { font-size: 32px; } .u-page-title-34 { font-size: 34px; }
  .u-kicker-sm { font-size: 16px; margin-bottom: 8px; } .u-kicker-14 { font-size: 14px; margin-bottom: 8px; }
  .u-section-tag-orange { color: var(--orange); } .u-page-title-cream { color: var(--cream); }
  .u-kicker-dark { margin-bottom: 30px; font-size: 15px; color: rgba(250,246,241,0.75); font-style: italic; }
  .tb-section-label { font-family: 'Jost', sans-serif; font-size: 8.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); font-weight: 500; margin: 8px 0 6px; display: flex; align-items: center; gap: 10px; }
  .tb-section-label::before, .tb-section-label::after { content: ''; height: 1px; flex: 1; background: rgba(255,133,0,0.3); }
  .tb-section-label::before { max-width: 22px; flex: 0 0 22px; }
  .tb-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 2px; }
  .tb-leader { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px 10px; background: linear-gradient(180deg, rgba(1,70,90,0.14) 0%, rgba(1,70,90,0.08) 100%); border-radius: 4px; border-top: 3px solid var(--orange); }
  .tb-avatar { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-muted) 0%, var(--navy-deep) 100%); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--cream); font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; letter-spacing: 1px; margin-bottom: 8px; box-shadow: 0 3px 8px rgba(1,70,90,0.22); position: relative; }
  .tb-avatar.has-photo { font-size: 0; color: transparent; }
  .tb-avatar::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid rgba(255,133,0,0.25); }
  .tb-leader .tb-name { font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 600; color: var(--navy-deep); line-height: 1.1; margin-bottom: 3px; }
  .tb-leader .tb-role { font-family: 'Jost', sans-serif; font-size: 7px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); font-weight: 500; }
  .tb-pod-row, .tb-coach-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 2px; }
  .tb-person { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 6px 12px; background: linear-gradient(180deg, rgba(1,70,90,0.12) 0%, rgba(1,70,90,0.06) 100%); border-radius: 4px; }
  .tb-person .tb-avatar { width: 64px; height: 64px; font-size: 18px; margin-bottom: 6px; }
  .tb-person .tb-name { font-family: 'Cormorant Garamond', serif; font-size: 12px; font-weight: 600; color: var(--navy-deep); line-height: 1.1; margin-bottom: 2px; }
  .tb-person .tb-role { font-family: 'Jost', sans-serif; font-size: 7.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-soft); font-weight: 400; }
  .tb-ops { background: linear-gradient(135deg, rgba(1,70,90,0.03) 0%, rgba(255,133,0,0.04) 100%); border-radius: 4px; padding: 8px 10px 10px; border-left: 3px solid var(--orange); }
  .tb-ops-intro { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 10px; color: var(--navy-deep); margin-bottom: 6px; line-height: 1.35; }
  .u-tb-pod-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .u-tb-col-header { font-family: 'Jost', sans-serif; font-size: 8.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); font-weight: 500; display: flex; align-items: center; gap: 10px; }
  .u-tb-col-header-sm { font-family: 'Jost', sans-serif; font-size: 8.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); font-weight: 500; display: flex; align-items: center; gap: 6px; }
  .u-tb-sep-line { height: 1px; background: rgba(255,133,0,0.3); flex: 1; }
  .u-tb-sep-22 { height: 1px; width: 22px; background: rgba(255,133,0,0.3); }
  .u-nowrap { white-space: nowrap; }
  .u-tb-layout { display: grid; grid-template-columns: 3fr 1fr 1fr; gap: 10px; align-items: end; margin-top: 10px; }
  .u-tb-layout-mt6 { display: grid; grid-template-columns: 3fr 1fr 1fr; gap: 10px; margin-top: 6px; }
  .u-tb-leaders-mb0 { margin-bottom: 0; }
  .u-tb-section-label-mt { margin: 10px 0 4px; }
  .u-tb-ops-pad { padding: 10px 14px 12px; }
  .u-tb-ops-intro-mb { margin-bottom: 8px; font-size: 11.5px; }
  .u-sd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 6px; align-items: start; }
  .u-sd-name { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 11px; font-weight: 600; color: var(--navy-deep); line-height: 1.15; }
  .u-sd-label-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 6px; margin-top: 6px; align-items: start; }
  .u-sd-assoc-label { grid-column: 1 / span 6; text-align: center; font-family: 'Jost', sans-serif; font-size: 8px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange); font-weight: 500; padding-top: 5px; border-top: 1px solid rgba(255,133,0,0.4); }
  .u-sd-ops-label { grid-column: 7; text-align: center; font-family: 'Jost', sans-serif; font-size: 7px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); font-weight: 500; padding-top: 4px; border-top: 1px solid rgba(255,133,0,0.25); }
  .access-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; margin-top: 12px; }
  .access-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 7px 4px 8px; background: linear-gradient(180deg, rgba(1,70,90,0.14) 0%, rgba(1,70,90,0.08) 100%); border-radius: 4px; border-top: 3px solid var(--orange); position: relative; min-height: 0; }
  .acc-ico { width: 26px; height: 26px; color: var(--navy-deep); margin-bottom: 6px; flex-shrink: 0; }
  .acc-name { font-family: 'Cormorant Garamond', serif; font-size: 12.5px; font-weight: 600; color: var(--navy-deep); line-height: 1.15; margin-bottom: 3px; }
  .acc-desc { font-family: 'Jost', sans-serif; font-size: 9.5px; line-height: 1.35; color: var(--text-soft); font-weight: 400; letter-spacing: 0.1px; }
  .inside-front { background: var(--linen); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 44px; position: absolute; inset: 0; }
  .inside-front .ornament { width: 46px; height: 46px; margin-bottom: 24px; opacity: 0.85; }
  .inside-welcome { max-width: 400px; text-align: center; }
  .inside-welcome p { font-family: 'Cormorant Garamond', serif; font-size: 17px; line-height: 1.55; font-weight: 400; color: var(--navy-deep); margin-bottom: 18px; }
  .inside-welcome p:last-child { margin-bottom: 0; }
  .inside-welcome strong { color: var(--orange); font-weight: 600; font-style: italic; }
  .controls { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; z-index: 100; background: rgba(1,70,90,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px 20px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 12px 36px rgba(0,0,0,0.4); }
  .ctrl-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
  .ctrl-btn:hover:not(:disabled) { background: var(--orange); transform: scale(1.08); }
  .ctrl-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .ctrl-btn svg { width: 16px; height: 16px; }
  .page-indicator { font-family: 'Cormorant Garamond', serif; color: var(--cream); font-size: 16px; letter-spacing: 2px; min-width: 70px; text-align: center; font-weight: 400; }
  .page-indicator .current { color: var(--orange); font-size: 22px; font-weight: 600; }
  .page-indicator .sep { margin: 0 8px; opacity: 0.5; }
  .dots { display: flex; gap: 8px; margin-left: 4px; }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: all 0.25s ease; }
  .dot.active { background: var(--orange); width: 22px; border-radius: 4px; }
  .dot:hover:not(.active) { background: rgba(255,255,255,0.5); }
  .click-zone { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; z-index: 60; cursor: pointer; }
  .click-zone.left { left: 0; } .click-zone.right { right: 0; }
  .click-zone::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(1,70,90,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
  .click-zone:hover::before { opacity: 1; }
  .click-zone.left::after, .click-zone.right::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid var(--cream); border-left: 2px solid var(--cream); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
  .click-zone.left::after { transform: translate(-30%,-50%) rotate(-45deg); }
  .click-zone.right::after { transform: translate(-70%,-50%) rotate(135deg); }
  .click-zone:hover::after { opacity: 1; }
  .hint { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); color: rgba(250,246,241,0.6); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; letter-spacing: 1px; pointer-events: none; opacity: 0; animation: hintFade 4s ease-out 1s forwards; z-index: 50; }
  @keyframes hintFade { 0%{opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
  @media (max-width: 1200px) { :root { --page-w: 440px; --page-h: 620px; } .cover-title { font-size: 52px; } .page-title { font-size: 32px; } .commitment-title { font-size: 36px; } }
  @media (max-width: 960px) { :root { --page-w: 360px; --page-h: 500px; } .page-inner { padding: 32px 28px; } .cover-top { padding: 38px 32px 0; } .cover-mid, .cover-bottom { padding-left: 32px; padding-right: 32px; } .cover-title { font-size: 46px; } .page-title { font-size: 28px; } .commitment-title { font-size: 34px; } .commitment-logo { width: 130px; margin-bottom: 16px; } .cover-logo { width: 220px; } }

/* ===== Avatar image handling and background swirl overrides ===== */
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;z-index:1;}.av-img.is-ph{object-fit:contain;padding:18%;box-sizing:border-box;}.swirl-bg{position:absolute;pointer-events:none;z-index:0;}.cover-swirl{right:-80px;top:80px;width:340px;height:340px;opacity:0.35;filter:brightness(1.8) sepia(0.6) saturate(4) hue-rotate(340deg);}.cover-swirl-2{left:-100px;bottom:-80px;width:260px;height:260px;opacity:0.18;transform:rotate(180deg);filter:brightness(3) saturate(0.4);}.ed-swirl{right:-120px;bottom:-100px;width:420px;height:auto;opacity:0.18;}.back-cover{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 44px 130px;color:var(--cream);background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(255,133,0,0.06) 0%,transparent 60%),linear-gradient(180deg,#013444 0%,#01465A 100%);}.back-cover .bc-star{width:70px;height:70px;margin-bottom:22px;opacity:0.9;}.back-cover .thanks{font-family:'Cormorant Garamond',serif;font-size:42px;font-style:italic;font-weight:400;line-height:1.1;margin-bottom:14px;color:var(--orange);}.back-cover .closing{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:300;line-height:1.5;max-width:360px;color:rgba(250,246,241,0.85);margin-bottom:26px;}.back-cover .signature{font-family:'Cormorant Garamond',serif;font-size:13px;font-style:italic;color:var(--orange-light);letter-spacing:1px;}.back-cover-disclosure{position:absolute;bottom:20px;left:36px;right:36px;font-family:Arial,sans-serif;font-size:8px;line-height:1.45;color:rgba(250,246,241,0.40);text-align:left;padding-top:10px;border-top:1px solid rgba(250,246,241,0.15);z-index:2;}.bc-opcode{position:absolute;bottom:6px;left:36px;font-family:Arial,sans-serif;font-size:7px;color:rgba(250,246,241,0.35);letter-spacing:0.5px;z-index:2;}.book-wrap.zoomed{cursor:grab;}.book-wrap.zoomed.panning{cursor:grabbing;}body.mobile-mode .book-wrap{cursor:default;}

/* ===== Page 04 (team grid) specific overrides ===== */
#page-04 .team-lead{grid-template-columns:110px 1fr!important;gap:18px;align-items:center}#page-04 .page-title{font-size:34px}#page-04 .page-kicker{font-size:16px;margin-bottom:8px}#page-04 .member-info .name{font-size:21px!important}#page-04 .member-info .role{font-size:10px;letter-spacing:2.2px;margin:3px 0 5px}#page-04 .member-info .contact{font-size:11.5px;line-height:1.4}#page-04 .team-sub>.team-card{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center!important;gap:5px;padding:8px 10px 10px!important}#page-04 .team-sub>.team-card>.avatar{width:58px!important;height:58px!important;margin:0 auto}#page-04 .team-sub .name{font-size:16px!important;line-height:1.1}#page-04 .team-sub .role{font-size:9px;letter-spacing:1.6px;margin:3px 0 4px}#page-04 .team-sub .contact{font-size:10px!important;line-height:1.4;display:block!important;margin-top:0!important}