/* Talentbank site.css: shared styles for every page. Edit here, not in page \3c style> blocks.
   Loaded before each page's own \3c style>, so page rules still win. */

/* Self-hosted fonts (from Google Fonts, SIL Open Font Licence), latin + latin-ext. Replaces the render-blocking fonts.googleapis.com stylesheet. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* IBM Plex Sans: the body face decided on 26 Sep 2026 (design system, Finalise item 0), with Outfit headlines at 400. Variable, 400 to 600. Not yet applied to public pages. */
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Alex Brush';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/alex-brush-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Alex Brush';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/alex-brush-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* =====================================================================
   DESIGN TOKENS. The single source for colour, type, space and motion.
   Pages no longer repeat these blocks; a page may override a token only
   where it genuinely differs (e.g. its own hero overlay), with a comment.
   Guide: /ds-guide/ (internal, noindex).
   ===================================================================== */
:root {
  --paper: #F8F4EC; --paper-deep: #E8E0CE; --cream: #FAF7F0;
  --champagne: #B89253; --champagne-deep: #9A7942; --champagne-soft: #E8D9B8; --gold-line: #C9A66B;
  --gold-ink: #80633A;      /* small gold text on light surfaces: 5.1:1 on paper (agreed 26 Sep 2026) */
  --navy-900: #0A1F44; --navy-800: #122a55; --navy-700: #1e3a6f;
  --warm-grey: #6B6358; --warm-grey-light: #A39A8C;
  --red-accent: #D6231F; --red-deep: #B01813;
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ===== THEME: PREMIUM (dark, default) ===== */
:root[data-theme="dark"] {
  --page-bg: var(--paper);
  --page-text: var(--navy-900);
  --body-text: var(--warm-grey);
  --light-bg: var(--paper);        /* light sections */
  --light-bg-alt: var(--cream);
  --light-border: var(--paper-deep);
  --dark-bg: var(--navy-900);       /* dark sections stay navy */
  --dark-bg-alt: var(--navy-800);
  --dark-text: var(--paper);
  --dark-text-soft: rgba(248,244,236,0.82);
  --dark-text-mut: rgba(248,244,236,0.66);
  --dark-border: rgba(201,166,107,0.2);
  --accent-on-light: var(--champagne-deep);
  --accent-on-dark: var(--champagne);
  --ring: rgba(201,166,107,0.13);
  --hero-bg: var(--navy-900);
  --hero-text: var(--paper);
  --hero-accent: var(--champagne);
  --nav-over-hero-text: var(--paper);
  --hero-ov-bottom: rgba(10,31,68,0.95); --hero-ov-mid: rgba(10,31,68,0.55); --hero-ov-top: rgba(10,31,68,0.7); --hero-ov-left: rgba(10,31,68,0.85); /* pages may override the hero overlay */
}
/* ===== THEME: LIGHT ===== */
:root[data-theme="light"] {
  --page-bg: #ffffff;
  --page-text: var(--navy-900);
  --body-text: var(--warm-grey);
  --light-bg: #ffffff;
  --light-bg-alt: var(--cream);
  --light-border: var(--paper-deep);
  --dark-bg: var(--cream);          /* dark sections become light */
  --dark-bg-alt: #ffffff;
  --dark-text: var(--navy-900);     /* text flips to navy */
  --dark-text-soft: var(--warm-grey);
  --dark-text-mut: var(--warm-grey-light);
  --dark-border: var(--paper-deep);
  --accent-on-light: var(--champagne-deep);
  --accent-on-dark: var(--champagne-deep);  /* gold accent kept */
  --ring: rgba(201,166,107,0.18);
  --hero-bg: #ffffff;
  --hero-text: var(--navy-900);
  --hero-accent: var(--champagne-deep);
  --nav-over-hero-text: var(--navy-900);
  --hero-ov-bottom: rgba(255,255,255,0.92); --hero-ov-mid: rgba(255,255,255,0.4); --hero-ov-top: rgba(255,255,255,0.55); --hero-ov-left: rgba(255,255,255,0.8);
}

:root {
  /* Type families and weights. Named --ff-/--fw- because many pages call
     var(--font-display) etc. without defining them and rely on inheriting
     Outfit; defining those names globally would change their fonts. */
  --ff-display: 'Outfit', sans-serif;
  --ff-headline: 'Outfit', sans-serif;        /* decided 26 Sep 2026; was Fraunces */
  --ff-body: 'IBM Plex Sans', sans-serif;     /* decided 26 Sep 2026: reading text */
  --ff-mark: 'Montserrat', sans-serif;
  --fw-display: 700;
  --fw-headline: 400;
  --fw-lede: 300;

  /* Type scale */
  --fs-eyebrow: 11px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h3: 21px;
  --fs-h2: clamp(30px, 4.1vw, 52px);          /* 52px on laptop, decided 26 Sep 2026 */
  --fs-h1: clamp(40px, 6vw, 76px);
  --lh-body: 1.7;
  --lh-head: 1.12;
  --ls-eyebrow: 0.22em;

  /* Space scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(72px, 9vw, 120px);

  /* Shape and depth. 8px is the house radius (TB-RADIUS rule on every page). */
  --radius-0: 0;
  --radius-1: 3px;
  --radius-2: 8px;
  --shadow-1: 0 4px 30px rgba(10,31,68,0.06);
  --shadow-2: 0 16px 40px rgba(10,31,68,0.13);

  /* Layout. Breakpoints are fixed in media queries (CSS variables cannot
     be used there): desktop > 1024px, tablet 601px to 1024px, mobile <= 600px. */
  --container: 1360px;
  --gutter: 64px;
  --measure: 65%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

.container { max-width: 1360px; margin: 0 auto; padding: 0 64px; }

::selection { background: var(--champagne); color: var(--navy-900); }

/* TOP UTILITY */
.v6-top { background: var(--navy-900); border-bottom: 1px solid rgba(201,166,107,0.15); height: 38px; position: relative; z-index: 60; }

.v6-top .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }

.v6-top-left { display: flex; gap: 14px; color: rgba(248,244,236,0.65); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; font-size: 10px; align-items: center; flex-shrink: 0; white-space: nowrap; }

.v6-top-left .est::before { content: '◆ '; color: var(--champagne); font-size: 7px; }

.v6-top-left .sep { width: 1px; height: 11px; background: rgba(248,244,236,0.25); }

.v6-top-right { display: flex; gap: 20px; color: rgba(248,244,236,0.65); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; font-size: 10px; align-items: center; flex-shrink: 0; white-space: nowrap; position: relative; z-index: 2; background: var(--navy-900); padding-left: 18px; }

.v6-top-right a { color: rgba(248,244,236,0.65); text-decoration: none; transition: color 0.25s; }

.v6-top-right a:hover { color: var(--champagne); }

.v6-top-right .pif { color: #e89a94; }

/* One line at a time rather than a continuous crawl: a scrolling strip of
     fifteen messages is hard to read and hard to stop on. Each line fades in,
     holds, and fades out. Honours prefers-reduced-motion by simply showing
     the line with no transition. */
/* Top bar ticker: one message at a time, no edge fade (the homepage standard) */
.v6-ticker { flex: 1; min-width: 0; overflow: hidden; height: 38px; max-height: 38px; display: flex; align-items: center; margin: 0 40px; position: relative; }

.v6-ticker-track { display: block; white-space: nowrap; position: relative; width: 100%; }

/* Each message rises a few pixels as it fades in, with a bright label and a gold diamond, so the eye catches the change without it shouting. */
.v6-ticker .tk { position: absolute; left: 0; top: 50%; transform: translateY(calc(-50% + 6px)); opacity: 0; transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); pointer-events: none; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(248,244,236,0.72); display: inline-flex; align-items: center; }

.v6-ticker .tk b { color: rgba(248,244,236,0.95); font-weight: 700; }

/* only the diamond is gold: the first screen already carries enough gold (Ben, 26 Sep 2026) */
.v6-ticker .tk b::first-letter { color: var(--champagne); }

.v6-ticker .tk.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

@media (prefers-reduced-motion: reduce) { .v6-ticker .tk { transition: none; } }

/* NAV */
.v6-main { position: absolute; top: 38px; left: 0; right: 0; z-index: 55; transition: all 0.4s var(--ease-quart); }

.v6-main.scrolled { background: var(--paper); border-bottom: 1px solid var(--paper-deep); position: fixed; top: 0; box-shadow: 0 4px 30px rgba(10,31,68,0.06); }

.v6-main-row { display: flex; align-items: center; height: 84px; gap: 16px; }

.v6-logo { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; text-decoration: none; }

.v6-logo-mark::after { content: ''; position: absolute; bottom: -3px; right: -3px; width: 7px; height: 7px; background: var(--red-accent); border-radius: 50%; }

.v6-logo-name .accent { color: inherit; position: relative; }

.scrolled .v6-logo-name { color: var(--red-accent); }

.scrolled .v6-logo-name .accent { color: var(--red-accent); }

.v6-link:hover::after { transform: scaleX(1); }

/* MEGA MENU · option F. Every item carries one line saying what it is,
     because a stranger on a corporate site does not know what Bespoke
     Engagements or the Good Employer Index means. Hover is gated behind
     @media (hover:hover) so a tap on a touch device follows the link instead
     of opening a panel it cannot close; focus-within keeps it keyboard
     reachable. */
.v6-has-mega { position: relative; }

.v6-mega { position: absolute; left: 4px; top: calc(100% - 4px); width: 620px; max-width: calc(100vw - 48px); background: var(--paper); border: 1px solid var(--paper-deep); border-radius: 3px; box-shadow: 0 16px 40px rgba(10,31,68,0.13); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s var(--ease-quart), transform .2s var(--ease-quart), visibility .2s; z-index: 70; }

/* The later menus sit far enough right that a 620px panel anchored left
     runs off the screen at 1142px. Those two anchor to their right edge. */
.v6-mega.v6-mega-r { left: auto; right: 4px; }

.v6-mega-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 12px 0 14px; align-items: stretch; }

/* Dividers: a hairline between the two columns and a rule under each group
     heading, so the groups read as groups instead of one long list. The
     border clears itself at the start of each row via nth-child, since the
     adjacent-sibling rule alone can't tell a wrapped row from a new column. */
.v6-mega-group { display: flex; flex-direction: column; padding: 0 18px; }

.v6-mega-group + .v6-mega-group { border-left: 1px solid var(--paper-deep); }

.v6-mega-group:nth-child(2n+1) { border-left: none; }

/* Employers and Universities carry enough groups to spread wider on a
     desktop screen, so their panel goes to three columns once there is room;
     narrower desktop widths keep the two-column layout every menu uses. */
.v6-mega-wide { width: 900px; }

@media (min-width: 1280px) {
    .v6-mega-wide .v6-mega-in { grid-template-columns: repeat(3, 1fr); }
    .v6-mega-wide .v6-mega-group:nth-child(2n+1) { border-left: 1px solid var(--paper-deep); }
    .v6-mega-wide .v6-mega-group:nth-child(3n+1) { border-left: none; }
  }

@media (max-width: 1279px) { .v6-mega-wide { width: 620px; } }

.v6-mega-h { font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); padding: 10px 11px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--paper-deep); }

.v6-mega-group .v6-mega-h + .v6-mega-item { margin-top: 2px; }

.v6-mega-group .v6-mega-item + .v6-mega-h { margin-top: 12px; }

.v6-mega-item { display: block; text-decoration: none; padding: 7px 11px; border-radius: 2px; transition: background .16s; }

.v6-mega-item:hover { background: var(--cream); }

/* 13.5px over 12px, and the description takes --warm-grey rather than
     --warm-grey-light: that lighter tone measured about 2.1:1 on paper, well
     under the 4.5:1 needed, which is why it read as hard to see. */
.v6-mega-item b { display: block; font-size: 13.5px; font-weight: 500; color: var(--navy-900); line-height: 1.3; margin-bottom: 2px; }

.v6-mega-item i { display: block; font-style: normal; font-size: 12px; color: var(--warm-grey); line-height: 1.4; }

.v6-mega-item:hover b { color: var(--champagne-deep); }

@media (hover: hover) {
    .v6-has-mega:hover .v6-mega { opacity: 1; visibility: visible; transform: translateY(0); }
  }

.v6-has-mega:focus-within .v6-mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* Anchored to the menu list rather than to each item, so a panel opening
     from a link on the right cannot run off the side of the window. */
.v6-links { position: relative; }

.v6-has-mega { position: static; }

.v6-mega { left: 0; right: auto; }

/* Sits a little lower than the bar. The gap would break the hover on the
     way down, so an invisible bridge covers it. */
.v6-mega { top: calc(100% + 9px); }

.v6-has-mega > .v6-link::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }

.v6-has-mega > .v6-link { position: relative; }

@media (max-width: 1024px) { .v6-mega { display: none; } }

.scrolled .v6-link { color: var(--warm-grey); }

.scrolled .v6-link:hover { color: var(--red-accent); }

.scrolled .v6-link:hover::after { background: var(--red-accent); }

.v6-link-hof { color: var(--champagne); text-transform: none; letter-spacing: -0.005em; font-weight: 500; }

.v6-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; margin-left: auto; }

.v6-events-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; padding: 11px 15px; background: var(--champagne); color: var(--navy-900); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid var(--champagne); white-space: nowrap; text-decoration: none; transition: box-shadow 0.35s var(--ease-quart), background 0.35s var(--ease-quart), border-color 0.35s var(--ease-quart); animation: v6EventsBreathe 1.8s ease-in-out infinite; }

.v6-events-cta::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); transform: skewX(-20deg); animation: v6EventsSheen 3s ease-in-out infinite; pointer-events: none; }

@keyframes v6EventsSheen { 0% { left: -75%; } 40%, 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) { .v6-events-cta::before { animation: none; display: none; } }

/* Breathes to say the calendar keeps moving, without a caption to read. */
@keyframes v6EventsBreathe { 0%,100% { box-shadow: 0 0 0 0 rgba(184,146,83,0.7); transform: scale(1); } 50% { box-shadow: 0 0 0 11px rgba(184,146,83,0); transform: scale(1.045); } }

@media (prefers-reduced-motion: reduce) { .v6-events-cta { animation: none; } }

.v6-events-cta:hover { background: var(--gold-line); border-color: var(--gold-line); color: var(--navy-900); animation-play-state: paused; }

@media (max-width: 1024px) { .v6-events-cta { display: none; } }

.v6-cta { display: inline-flex; align-items: center; gap: 7px; padding: 12px 22px; background: var(--paper); color: var(--navy-900); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid var(--paper); white-space: nowrap; text-decoration: none; transition: all 0.35s var(--ease-quart); }

.v6-handbook { display: inline-flex; align-items: center; gap: 7px; padding: 12px 22px; background: transparent; color: var(--paper); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid rgba(248,244,236,0.4); white-space: nowrap; text-decoration: none; transition: all 0.35s var(--ease-quart); }

.v6-handbook:hover { border-color: var(--champagne); color: var(--champagne); }

.v6-careeros { display: inline-flex; align-items: center; gap: 7px; padding: 12px 22px; background: var(--champagne); color: var(--navy-900); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid var(--champagne); white-space: nowrap; text-decoration: none; transition: all 0.35s var(--ease-quart); }

.v6-careeros:hover { background: transparent; color: var(--champagne); }

.scrolled .v6-careeros:hover { color: var(--champagne-deep); border-color: var(--champagne-deep); }

.scrolled .v6-handbook { background: transparent; color: var(--navy-900); border-color: rgba(10,31,68,0.3); }

.scrolled .v6-handbook:hover { border-color: var(--navy-900); color: var(--navy-900); }

.v6-cta:hover { background: transparent; color: var(--paper); border-color: var(--paper); }

.hero-bg { position: absolute; inset: 0; z-index: 1; }

.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); animation: heroZoom 2.6s var(--ease-expo) forwards; filter: saturate(0.85) contrast(1.05); }

@keyframes heroZoom { to { opacity: 1; transform: scale(1); } }

.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--hero-ov-top) 0%, var(--hero-ov-mid) 35%, var(--hero-ov-bottom) 100%); }

.hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--hero-ov-left) 0%, transparent 62%); }

.hero-grain { position: absolute; inset: 0; z-index: 3; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }

.hero-title .line:nth-child(1) span { animation-delay: 0.5s; }

.hero-title .line:nth-child(2) span { animation-delay: 0.66s; }

.hero-title .line:nth-child(3) span { animation-delay: 0.82s; }

@keyframes lineUp { to { transform: translateY(0); } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 18px 36px; background: var(--red-accent); color: var(--paper); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid var(--red-accent); text-decoration: none; transition: all 0.35s var(--ease-quart); }

.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn-gold { display: inline-flex; align-items: center; gap: 9px; padding: 18px 36px; background: var(--champagne); color: var(--navy-900); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; border: 1px solid var(--champagne); transition: all 0.4s var(--ease-quart); }

.btn-gold:hover { background: transparent; color: var(--champagne); }

.btn-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 18px 36px; background: transparent; color: var(--paper); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; border: 1px solid rgba(248,244,236,0.35); transition: all 0.4s var(--ease-quart); }

.btn-ghost:hover { border-color: var(--paper); background: rgba(248,244,236,0.08); }

.aud-head h2 .italic { font-style: italic; color: var(--champagne-deep); }

.aud-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo); filter: saturate(0.9); }

.aud-card:hover img { transform: scale(1.06); }

.aud-card .go { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--champagne); transition: gap 0.35s var(--ease-quart); }

.aud-card:hover .go { gap: 14px; }

.hof-head h2 .italic { font-style: italic; color: var(--accent-on-dark); }

.hof-card-stat-label { font-size: 10px; color: var(--dark-text-mut); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 6px; }

.hbf-book-title .accent { font-style: italic; color: var(--champagne); }

.hbf-content h2 .italic { font-style: italic; color: var(--champagne-deep); }

/* FOOTER */
.footer { background: #081730; color: var(--paper); padding: 88px 0 0; }

.footer-colstack { display: flex; flex-direction: column; gap: 30px; }

.footer-brand-logo { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 20px; text-decoration: none; }

:root[data-theme="light"] .footer-statement { color: var(--navy-900); }

.footer-brand-meta { font-size: 12.5px; color: rgba(248,244,236,0.5); line-height: 1.85; }

/* TB-FOOTER-INTEGRITY: standing commitment under the brand column. Plain
     block, not a badge, so it reads as a statement rather than a marketing
     seal. Links to the real policy so the claim is checkable. */
.footer-integrity { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(201,166,107,0.24); display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; text-align: center; }

.footer-integrity-h { font-family: Fraunces, serif; font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--champagne, #C9A66B); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 9px; }

.footer-integrity-icon { flex: none; color: var(--champagne, #C9A66B); opacity: 0.85; }

.footer-integrity-p-short { display: none; }

@media (max-width: 600px) { .footer-integrity-p-full { display: none; } .footer-integrity-p-short { display: inline; } }

.footer-integrity-text { flex: 1; min-width: 240px; }

.footer-integrity-p a:hover { border-bottom-color: var(--champagne, #C9A66B); }

.footer-col .footer-soon { font-size: 13px; color: rgba(248,244,236,0.42); cursor: default; }

/* Planned page, not built yet: faint blue and deliberately not a link, so it
     reads as a signpost rather than something broken. */
.footer-col .footer-planned { font-size: 13px; color: #7d9bc9; cursor: default; }

.footer-col .footer-planned::after { content: ' \00b7 soon'; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }

.footer-bottom { display: block; padding: 30px 0 74px; }

.footer-bottom-left { display: flex; gap: 22px; }

.footer-social { display: flex; gap: 12px; }

.footer-version{text-align:center;margin-top:6px;font-size:9.5px;color:rgba(248,244,236,0.55);letter-spacing:0.05em;}

.js .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); }

.js .reveal.in { opacity: 1; transform: translateY(0); }

/* BURGER + MOBILE PANEL */
.burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(248,244,236,0.3); cursor: pointer; transition: border-color 0.3s; }

.burger span { display: block; width: 18px; height: 1.5px; background: var(--paper); transition: all 0.3s var(--ease-quart); }

.scrolled .burger { border-color: var(--paper-deep); }

.scrolled .burger span { background: var(--navy-900); }

.burger:hover { border-color: var(--champagne); }

.mpanel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 86vw; background: var(--navy-900); z-index: 120; transform: translateX(100%); transition: transform 0.5s var(--ease-expo); display: flex; flex-direction: column; padding: 28px 34px 34px; overflow-y: auto; }

.mpanel.open { transform: translateX(0); }

.mpanel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }

.v6-logo { gap: 10px; }

.mpanel-close { background: transparent; border: none; color: var(--paper); font-size: 32px; line-height: 1; cursor: pointer; transition: color 0.3s; }

.mpanel-close:hover { color: var(--champagne); }

.mpanel-second { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(248,244,236,0.7); text-decoration: none; transition: color 0.3s; }

.mpanel-second:hover { color: var(--champagne); }

.mpanel-overlay { position: fixed; inset: 0; background: rgba(10,31,68,0.5); backdrop-filter: blur(3px); z-index: 110; opacity: 0; visibility: hidden; transition: all 0.4s var(--ease-quart); }

.mpanel-overlay.open { opacity: 1; visibility: visible; }

.clients-grid-wrap { position: relative; height: 380px; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }

.clients-grid-wrap:hover .clients-grid { animation-play-state: paused; }

@keyframes clientsScroll { to { transform: translateY(-50%); } }

.ins-card { background: var(--paper); border: 1px solid var(--paper-deep); text-decoration: none; display: flex; flex-direction: column; transition: all 0.4s var(--ease-quart); overflow: hidden; }

.ins-card:hover { transform: translateY(-4px); border-color: var(--champagne); box-shadow: 0 20px 44px rgba(10,31,68,0.1); }

.ins-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--navy-900); }

.ins-card:hover .ins-card-img img { transform: scale(1.05); }

.ins-card-body { padding: 28px 26px 30px; flex: 1; display: flex; flex-direction: column; }

.ins-card .ins-meta { font-size: 12.5px; color: var(--warm-grey-light); margin-top: 18px; }

.tw-card { width: 360px; flex-shrink: 0; background: var(--paper); border: 1px solid var(--paper-deep); padding: 26px 28px; display: flex; flex-direction: column; }

.tw-card .tw-q { font-size: 14.5px; color: var(--navy-900); line-height: 1.6; flex: 1; }

@keyframes twScroll { to { transform: translateX(-50%); } }

@media (max-width: 600px) { .tw-card { width: 280px; } }

html { transition: background 0.5s ease; }

.scrolled .theme-toggle:hover { border-color: var(--champagne-deep); color: var(--champagne-deep); }

/* mobile panel toggle */
.mp-theme { display: none; }

/* light theme nav-over-hero adjustments */
:root[data-theme="light"] .v6-main:not(.scrolled) .v6-handbook { color: var(--navy-900); border-color: rgba(10,31,68,0.3); }

:root[data-theme="light"] .v6-link:hover { color: var(--champagne-deep); }

:root[data-theme="light"] .v6-logo-name, :root[data-theme="light"] .v6-logo-name .accent { color: var(--red-accent); }

/* floating corner controls */
.float-controls { position: fixed; left: 22px; bottom: 86px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }

.float-btn:hover { border-color: var(--accent-on-dark); transform: translateY(-2px); }

#goTopBtn { opacity: 0; visibility: hidden; transform: translateY(8px); }

.v6-caret { font-size: 8px; opacity: 0.65; margin-left: 1px; display: inline-block; transition: transform .3s var(--ease-quart); }

.v6-has-dd:hover .v6-caret { transform: rotate(180deg); }

.v6-dd { position: absolute; top: 100%; left: 0; display: grid; grid-template-columns: repeat(4, max-content); gap: 6px 40px; padding: 28px 36px 30px; background: var(--navy-900); border: 1px solid rgba(201,166,107,0.22); box-shadow: 0 24px 60px rgba(10,31,68,0.30); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .28s var(--ease-quart), transform .28s var(--ease-quart), visibility .28s; z-index: 60; white-space: nowrap; }

.v6-has-dd:hover .v6-dd, .v6-has-dd:focus-within .v6-dd { opacity: 1; visibility: visible; transform: translateY(0); }

.v6-dd-group a::after { display: none; }

.v6-hof-btn:hover { background: transparent; color: var(--champagne); }

.scrolled .v6-hof-btn:hover { color: var(--champagne-deep); border-color: var(--champagne-deep); }

.v6-careeros { background: var(--red-accent); border-color: var(--red-accent); color: var(--paper); }

.v6-careeros:hover { background: transparent; color: var(--red-accent); border-color: var(--red-accent); }

.scrolled .v6-careeros:hover { color: var(--red-deep); border-color: var(--red-deep); }

.footer-legal a:not(:last-child)::after { content:'\00b7'; margin:0 10px; color:rgba(248,244,236,0.28); font-weight:400; }

.float-btn:hover { background: var(--navy-900); color: var(--champagne-soft); border-color: var(--champagne); }

.footer-cta-text { max-width:560px; }

.footer-cta-eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--champagne); margin-bottom:12px; }

.footer-cta-title .accent { color:var(--champagne); font-style:italic; }

.footer-cta-sub { font-size:14px; line-height:1.6; color:rgba(248,244,236,0.6); margin:0; }

.footer-cta-actions { display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }

@keyframes tb-dot-breathe{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.35;transform:scale(0.7);}}

.footer-cta-soon span{animation:tb-dot-breathe 1.8s ease-in-out infinite;}

.btn,.btn-primary,.btn-ghost,.btn-gold,.btn-red,.btn-dark,.btn-light{padding:15px 34px;font-size:13px;}

.mpanel-foot { display:flex; flex-direction:column; gap:10px; }

.mp-foot-link { color:rgba(248,244,236,0.82); text-decoration:none; transition:color 0.25s var(--ease-quart); }

.mp-foot-link:hover { color:var(--champagne); }

.mp-foot-addr { color:rgba(248,244,236,0.5); }

.wat-mark{font-size:13px;line-height:1;}

.mpanel.mpv2{background:var(--cream);padding:26px 32px 30px;}

.mpv2 .mpanel-close{color:var(--navy-900);}

@keyframes mpEventsPulse{0%,100%{opacity:0.4;transform:scale(0.85);}50%{opacity:1;transform:scale(1);}}

.mpv2 .mp-acc.open .mp-chev{transform:rotate(45deg);}

.mpv2 .mp-acc.open .mp-sub{max-height:560px;opacity:1;padding:6px 0 20px 18px;margin:2px 0 8px 2px;}

.mpv2 .mp-sub a + a{border-top:1px solid rgba(201,166,107,0.14);}

.mpv2 .mp-sub a .sl{display:block;font-size:16px;font-weight:600;color:var(--navy-900);}

.mpv2 .mp-sub a .sd{display:block;font-size:15px;color:var(--warm-grey);margin-top:3px;line-height:1.4;}

.mpv2 .mp-sub a:hover .sl{color:var(--champagne-deep);}

.mpv2 .mp-mini.hl{color:var(--champagne-deep);}

.mpv2 .mp-mini:hover{color:var(--champagne-deep);padding-left:5px;}

.mpv2 .mp-foot-link{color:var(--gold-ink);}

/* The Graduate Employability Index is an award carried by universities
     nationwide, so it keeps its full name and is allowed the two lines that
     name needs. Gold and a rule mark it out from the list around it. */
.footer-col li .footer-flag { display: inline-block; color: var(--champagne); font-weight: 600; letter-spacing: 0.01em; border-bottom: 1px solid rgba(201,166,107,0.45); padding-bottom: 2px; }

.footer-col li .footer-flag:hover { color: #D4AC66; border-bottom-color: #D4AC66; }

.footer-col li .footer-planned::after { content: ' soon'; font-size: 8.5px; letter-spacing: 0.06em; }

.footer-gei-eyebrow { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 7px; }

.footer-gei-title { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2.2vw, 25px); color: #fff; line-height: 1.15; letter-spacing: -0.015em; }

.footer-gei-sub { display: block; font-size: 15px; color: rgba(248,244,236,0.62); margin-top: 7px; max-width: 52ch; }

.footer-gei-go { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-900); background: var(--champagne); padding: 13px 22px; transition: transform .3s var(--ease-quart); }

.footer-gei:hover .footer-gei-go { transform: translateX(4px); }

:root[data-theme="light"] .v6-main:not(.scrolled) .v6-cp-cta { color: #fff; border-color: var(--red-accent); }

.footer-book .fb-t { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; color: var(--champagne); text-decoration: none; line-height: 1.2; transition: color .25s; }

.footer-book .fb-t:hover { color: var(--champagne-soft); }

.footer-book .fb-mark { font-size: 16px; line-height: 1; }

.vmb-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.vmb-e { font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-grey-light); }

.vmb-t { font-family: var(--font-display); font-size: 15px; color: var(--navy-900); line-height: 1.2; margin-top: 2px; }

.vmb-by { font-family: var(--font-display); font-style: italic; font-size: 11.5px; color: var(--warm-grey); margin-top: 1px; }

.v6-mega-book .vmb-cover { width: 28px; height: 38px; }

.v6-mega-book .vmb-t { font-size: 13.5px; }

.v6-mega-book .vmb-by { font-size: 11px; }

.v6-mega-book .vmb-txt { gap: 0; }

.v6-mega-feature .vmb-e { color: var(--champagne); }

.v6-mega-feature .vmb-t { font-size: 17px; color: #fff; }

#tbA11yBtn{position:fixed;left:22px;bottom:22px;z-index:9997;width:52px;height:52px;border-radius:50%;background:var(--navy-900,#0A1F44);color:#fff;border:2px solid rgba(201,166,107,0.5);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(10,31,68,0.32);transition:transform .25s;}

#tbA11yBtn:hover{transform:scale(1.06);}

#tbA11yBtn svg{width:26px;height:26px;}

#tbA11yPanel{position:fixed;left:22px;bottom:84px;z-index:9998;width:300px;max-width:calc(100vw - 32px);background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(10,31,68,0.32);padding:18px;font-family:'Outfit',system-ui,sans-serif;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;}

#tbA11yPanel.open{opacity:1;transform:none;pointer-events:auto;}

#tbA11yPanel h2{font-size:14px;font-weight:700;color:#0A1F44;margin:0 0 14px;}

.tba-label{font-size:13px;color:#1B2226;font-weight:500;}

.tba-fontctrl{display:flex;align-items:center;gap:6px;}

.tba-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,0.3);}

.tba-toggle.on::after{left:18px;}

.tba-reset:hover{background:#E4DBC8;}

.skip-link:focus{top:12px;}

/* High contrast mode */
html.tba-contrast, html.tba-contrast body{background:#000 !important;}

html.tba-contrast a{color:#7FDBFF !important;}

html.tba-contrast img,html.tba-contrast svg{opacity:0.9 !important;filter:grayscale(1) contrast(1.3);}

/* Underline links */
html.tba-underline a{text-decoration:underline !important;text-underline-offset:2px;}

@media(max-width:480px){#tbA11yPanel{left:12px;bottom:78px;}#tbA11yBtn{left:12px;bottom:12px;}}

/* WCAG 1.4.12 Text Spacing: letter, word and line spacing a reader can
     widen without breaking the layout. The usual dyslexia aid. */
html.tba-spacing body, html.tba-spacing p, html.tba-spacing li, html.tba-spacing h1,
  html.tba-spacing h2, html.tba-spacing h3, html.tba-spacing h4, html.tba-spacing a,
  html.tba-spacing span, html.tba-spacing div{letter-spacing:0.075em !important;word-spacing:0.16em !important;}

/* =====================================================================
   COMPONENTS. Shared building blocks for new sections and for pages as
   they migrate off their own prefixes (ab-, ev-, gca-...). Buttons live
   above (.btn-primary, .btn-gold, .btn-ghost). See /ds-guide/.
   ===================================================================== */

/* Section: vertical rhythm plus the three surfaces */
.tb-section { padding: var(--section-y) 0; background: var(--light-bg); color: var(--page-text); }
.tb-section--alt { background: var(--light-bg-alt); }
.tb-section--dark { background: var(--dark-bg); color: var(--dark-text); }

/* Eyebrow: small caps label with a hairline. --center adds the right rule. */
.tb-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--accent-on-light); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); margin-bottom: 18px; }
.tb-eyebrow::before, .tb-eyebrow--center::after { content: ''; width: 28px; height: 1px; background: currentColor; }
.tb-section--dark .tb-eyebrow { color: var(--accent-on-dark); }

/* Section head: eyebrow, serif h2, optional lead. Centred by default. */
.tb-sec-head { text-align: center; margin: 0 auto var(--sp-7); }
.tb-sec-head--left { text-align: left; margin-left: 0; }
.tb-sec-head h2, .tb-h2 { font-family: var(--ff-headline); font-weight: var(--fw-headline); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: -0.025em; color: inherit; }
.tb-sec-head h2 .italic, .tb-h2 .italic { font-style: normal; color: var(--accent-on-light); }
.tb-section--dark .tb-sec-head h2 .italic, .tb-section--dark .tb-h2 .italic { color: var(--accent-on-dark); }

/* Lead / text block: 65% of the container on laptop and tablet, full on mobile */
.tb-lead { width: var(--measure); font-family: var(--ff-body); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--body-text); margin-top: var(--sp-4); }
.tb-sec-head .tb-lead { margin-left: auto; margin-right: auto; }
.tb-sec-head--left .tb-lead { margin-left: 0; }
.tb-section--dark .tb-lead { color: var(--dark-text-soft); }
@media (max-width: 600px) { .tb-lead { width: 100%; } }

/* Hero intro: one size and measure on every page. 65% of the container on laptop and tablet, full
   on mobile. Inner hero pages use .hero-sub; dark text-only heroes add .tb-hero-lead to the intro. */
.hero-sub, .tb-hero-lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; width: var(--measure); max-width: 100%; }
@media (max-width: 600px) { .hero-sub, .tb-hero-lead { width: 100%; } }

/* Grid: 4 / 2 / 1. Four is the maximum, not a quota: use --3 or --2 when a
   section has fewer items so laptop keeps the natural count. */
.tb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.tb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .tb-grid, .tb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tb-grid, .tb-grid--3, .tb-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* Card: hairline border, 8px corners (from the site-wide TB-RADIUS rule), based on the event-highlights card */
.tb-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--light-bg); border: 1px solid var(--light-border); padding: var(--sp-7) 38px; color: var(--page-text); text-decoration: none; transition: border-color .3s var(--ease-quart), background .3s var(--ease-quart); }
.tb-section--alt .tb-card { background: var(--light-bg); }
.tb-section:not(.tb-section--alt):not(.tb-section--dark) .tb-card { background: var(--light-bg-alt); }
a.tb-card:hover { border-color: var(--champagne); }
.tb-card-num { font-family: var(--ff-headline); font-style: normal; font-size: 15px; color: var(--accent-on-light); }
.tb-card-title { font-family: var(--ff-headline); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }
.tb-card-body { font-family: var(--ff-body); font-size: 15px; line-height: var(--lh-body); color: var(--body-text); }
.tb-card-link { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-light); }
.tb-section--dark .tb-card { background: var(--dark-bg-alt); border-color: var(--dark-border); color: var(--dark-text); }
.tb-section--dark .tb-card-body { color: var(--dark-text-soft); }
.tb-section--dark .tb-card-num, .tb-section--dark .tb-card-link { color: var(--accent-on-dark); }
@media (max-width: 600px) { .tb-card { padding: var(--sp-6) var(--sp-5); } }

/* Image card: photo on top, content below. The default card when a real
   photo exists; the text-only card above is for when none does. */
.tb-card--media { padding: 0; gap: 0; overflow: hidden; }
/* Beats the page-level TB-RADIUS rule ([class*="card"]:not(...), 0-2-0). */
.tb-card.tb-card--media .tb-card-img { border-radius: 0; }
.tb-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
.tb-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-quart); }
a.tb-card--media:hover .tb-card-img img { transform: scale(1.04); }
.tb-card-content { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) 30px 34px; }
@media (max-width: 600px) { .tb-card--media { padding: 0; } .tb-card-content { padding: var(--sp-5); } }
@media (prefers-reduced-motion: reduce) { .tb-card-img img { transition: none; } }

/* FAQ accordion: <div class="tb-faq"> of <details class="tb-faq-q">.
   Five shown, the rest behind a toggle (page script adds .tb-faq-more).
   Identical copies still sit inline on the pages that use it. */
.tb-faq { display: grid; gap: 0; max-width: 820px; margin: 0 auto; border-top: 1px solid var(--light-border, #E8E0CE); }
.tb-faq-q { border-bottom: 1px solid var(--light-border, #E8E0CE); }
.tb-faq-q.is-hidden { display: none; }
.tb-faq-q > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 16px; padding: 22px 4px; font-family: 'Fraunces', serif; font-weight: 400; font-size: 19px; line-height: 1.35; color: var(--navy-900, #0A1F44); transition: color .2s ease; }
.tb-faq-q > summary::-webkit-details-marker { display: none; }
.tb-faq-q > summary::after { content: '+'; margin-left: auto; flex: none; font-family: var(--font-body); font-size: 22px; font-weight: 300; line-height: 1; color: var(--champagne-deep, #9A7942); transition: transform .25s var(--ease-quart); }
.tb-faq-q[open] > summary::after { transform: rotate(45deg); }
.tb-faq-q > summary:hover { color: var(--champagne-deep, #9A7942); }
.tb-faq-q > p, .tb-faq-q > div { font-size: 15.5px; line-height: 1.7; color: var(--body-text, #6B6358); margin: 0 40px 24px 0; padding: 0 4px; }
.tb-faq-more { display: flex; justify-content: center; margin-top: 26px; }
.tb-faq-morebtn { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne-deep, #9A7942); background: transparent; border: 1px solid var(--light-border, #E8E0CE); border-radius: 8px; padding: 14px 26px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.tb-faq-morebtn:hover { border-color: var(--champagne, #B89253); color: var(--navy-900, #0A1F44); }

/* Pattern: brand texture drawn as a mask, so its colour comes from a token
   and follows the theme. Three motifs: contour (the talent map), grid (the
   index) and diamond (the top-bar mark). Add to any section or hero. */
.tb-pattern { position: relative; isolation: isolate; }
.tb-pattern::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--pattern-ink, var(--navy-900)); opacity: var(--pattern-opacity, 0.07); -webkit-mask-image: var(--pattern); mask-image: var(--pattern); -webkit-mask-size: var(--pattern-size); mask-size: var(--pattern-size); }
.tb-section--dark.tb-pattern, .tb-hero--dark.tb-pattern { --pattern-ink: var(--champagne); --pattern-opacity: 0.16; }
.tb-pattern--contour { --pattern-size: 480px 64px; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 16C120 0 360 32 480 16'/%3E%3Cpath d='M0 48C120 32 360 64 480 48'/%3E%3C/g%3E%3C/svg%3E"); }
.tb-pattern--grid { --pattern-size: 192px 192px; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cpath d='M0 .5H192M0 48.5H192M0 96.5H192M0 144.5H192M.5 0V192M48.5 0V192M96.5 0V192M144.5 0V192' stroke='%23000' stroke-width='1' fill='none'/%3E%3Cpath d='M96.5 90l6 6-6 6-6-6z' fill='%23000'/%3E%3C/svg%3E"); }
.tb-pattern--diamond { --pattern-size: 36px 36px; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M9 6.5l2.5 2.5L9 11.5 6.5 9zM27 24.5l2.5 2.5-2.5 2.5-2.5-2.5z' fill='%23000'/%3E%3C/svg%3E"); }

/* Editorial hero: type-led, optional photo alongside. The alternative to a
   stock photo under a navy wash. */
.tb-hero { padding: calc(122px + var(--sp-9)) 0 var(--sp-9); background: var(--light-bg); color: var(--page-text); }
.tb-hero--dark { background: var(--dark-bg); color: var(--dark-text); }
.tb-hero .tb-hero-grid h1 { font-size: clamp(40px, 4.6vw, 64px); }
.tb-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--sp-8); align-items: end; }
.tb-hero h1 { font-family: var(--ff-headline); font-weight: var(--fw-headline); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.03em; }
.tb-hero h1 .italic { font-style: normal; color: var(--accent-on-light); }
.tb-hero--dark h1 .italic { color: var(--accent-on-dark); }
.tb-hero .tb-lead { width: auto; max-width: 560px; }
.tb-hero--dark .tb-lead { color: var(--dark-text-soft); }
.tb-hero--dark .tb-eyebrow { color: var(--accent-on-dark); }
.tb-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.tb-hero-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--light-border); font-size: 13px; color: var(--body-text); }
.tb-hero--dark .tb-hero-facts { border-top-color: var(--dark-border); color: var(--dark-text-mut); }
.tb-hero-facts b { color: var(--page-text); font-weight: 600; }
.tb-hero--dark .tb-hero-facts b { color: var(--dark-text); }
@media (max-width: 1024px) { .tb-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); } }
@media (max-width: 600px) { .tb-hero { padding: calc(64px + var(--sp-8)) 0 var(--sp-8); } }

/* Split: text beside a photo. --reverse puts the photo first. */
.tb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.tb-split--reverse > :first-child { order: 2; }
.tb-split h2 { font-family: var(--ff-headline); font-weight: var(--fw-headline); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: -0.025em; }
.tb-split h2 .italic { font-style: normal; color: var(--accent-on-light); }
.tb-section--dark .tb-split h2 .italic { color: var(--accent-on-dark); }
.tb-split p { font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body-text); margin-top: var(--sp-4); max-width: 54ch; }
.tb-section--dark .tb-split p { color: var(--dark-text-soft); }
@media (max-width: 600px) { .tb-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .tb-split--reverse > :first-child { order: 0; } }

/* Figure: a real photo with a caption saying what, where and when. */
.tb-figure { margin: 0; }
.tb-figure-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.tb-figure-img--wide { aspect-ratio: 16 / 9; }
.tb-figure-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-figure figcaption { display: flex; font-family: var(--ff-body); gap: 10px; margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--body-text); }
.tb-figure figcaption::before { content: ''; flex: none; width: 18px; height: 1px; margin-top: .7em; background: var(--champagne); }
.tb-section--dark .tb-figure figcaption { color: var(--dark-text-mut); }

/* Photo slot: design-time stand-in for a real photo not yet supplied.
   Never ship one, and never swap it for stock. */
.tb-photo-slot { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; min-height: 220px; padding: var(--sp-5); background: var(--light-bg-alt); border: 1px dashed var(--champagne); color: var(--accent-on-light); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tb-photo-slot::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--champagne); opacity: 0.2; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0 16C120 0 360 32 480 16'/%3E%3Cpath d='M0 48C120 32 360 64 480 48'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 480px 64px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0 16C120 0 360 32 480 16'/%3E%3Cpath d='M0 48C120 32 360 64 480 48'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 480px 64px; }
.tb-photo-slot small { display: block; font-family: var(--ff-body); margin-top: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--body-text); }
.tb-section--dark .tb-photo-slot, .tb-hero--dark .tb-photo-slot { background: var(--dark-bg-alt); color: var(--accent-on-dark); }
.tb-section--dark .tb-photo-slot small, .tb-hero--dark .tb-photo-slot small { color: var(--dark-text-mut); }

/* Stats: big numbers, small labels. A non-card row, so it auto-fits rather
   than following the 4/2/1 card grid. Verified, published numbers only. */
.tb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-6); }
.tb-stat { padding-top: var(--sp-4); border-top: 1px solid var(--light-border); }
.tb-section--dark .tb-stat { border-top-color: var(--dark-border); }
.tb-stat-num { display: block; font-family: var(--ff-headline); font-weight: var(--fw-headline); font-size: clamp(44px, 5.5vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.tb-stat-label { display: block; font-family: var(--ff-body); margin-top: var(--sp-3); font-size: 13px; line-height: 1.5; color: var(--body-text); max-width: 26ch; }
.tb-section--dark .tb-stat-label { color: var(--dark-text-soft); }

/* Pull quote (inline, inside any section; the full-width band is .tb-quote on pages): one voice, named, with permission. No unattributed testimonials. */
.tb-pullquote { max-width: 900px; margin: 0; }
.tb-pullquote p { font-family: var(--ff-headline); font-weight: var(--fw-headline); font-size: clamp(24px, 3vw, 38px); line-height: 1.3; letter-spacing: -0.015em; }
.tb-pullquote p::before { content: '\201C'; display: block; font-size: 1.9em; line-height: .6; color: var(--accent-on-light); margin-bottom: var(--sp-3); }
.tb-section--dark .tb-pullquote p::before { color: var(--accent-on-dark); }
.tb-pullquote footer { margin-top: var(--sp-5); font-size: 13px; color: var(--body-text); }
.tb-pullquote footer b { display: block; font-size: 14px; color: var(--page-text); font-weight: 600; }
.tb-section--dark .tb-pullquote footer { color: var(--dark-text-mut); }
.tb-section--dark .tb-pullquote footer b { color: var(--dark-text); }

/* Nav over a light hero: add class="tb-nav-light" to <body> on pages that
   open with a light .tb-hero, so the unscrolled nav reads navy, not white. */
.tb-nav-light { --nav-over-hero-text: var(--navy-900); }
.tb-nav-light .v6-main:not(.scrolled) .v6-logo-name, .tb-nav-light .v6-main:not(.scrolled) .v6-logo-name .accent { color: var(--red-accent); }
.tb-nav-light .v6-main:not(.scrolled) .v6-logo-mark { border-color: var(--navy-900); color: var(--navy-900); }
.tb-nav-light .v6-main:not(.scrolled) .v6-handbook { color: var(--navy-900); border-color: rgba(10,31,68,0.3); }
.tb-nav-light .v6-main:not(.scrolled) .burger { border-color: rgba(10,31,68,0.3); }
.tb-nav-light .v6-main:not(.scrolled) .burger span { background: var(--navy-900); }


/* =====================================================================
   SHARED PAGE RULES, batch 2. Rules every page carried verbatim, moved
   here once computed-style checks showed no page changes.
   ===================================================================== */
@media (max-width: 900px) { .v6-ticker { display: none; } }

.hero-title .line > span { display: block; transform: translateY(110%); animation: lineUp 1.15s var(--ease-expo) forwards; }

.hero-title .italic { font-style: italic; color: var(--hero-accent); }

.hero-title .hero-dot { color: var(--champagne); font-style: normal; display: inline; }

.hof-card h3 .accent { font-style: italic; color: var(--accent-on-dark); }

.cta h2 .italic { font-style: italic; color: var(--accent-on-dark); }

.footer-chat-link:hover { color: var(--champagne-soft); border-bottom-color: var(--champagne); }

.footer-col h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--champagne); margin-bottom: 20px; font-weight: 700; }

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 12px; }

.footer-col a { font-size: 15px; color: rgba(248,244,236,0.68); text-decoration: none; transition: all 0.25s; }

.footer-col a:hover { color: var(--champagne); padding-left: 4px; }

.footer-bottom-left a { font-size: 12px; color: rgba(248,244,236,0.55); text-decoration: none; }

.footer-bottom-left a:hover { color: var(--champagne); }

.footer-social a { width: 34px; height: 34px; border: 1px solid rgba(201,166,107,0.3); display: inline-flex; align-items: center; justify-content: center; transition: all 0.35s; }

.footer-social a:hover { border-color: var(--champagne); background: rgba(201,166,107,0.12); transform: translateY(-2px); }

.footer-social svg { width: 15px; height: 15px; fill: var(--champagne-soft); }

.footer-copy { text-align: center; margin-top: 12px; padding: 0; border-top: none; font-size: 11.5px; line-height: 1.7; color: rgba(248,244,236,0.6); letter-spacing: 0.05em; }

.mpanel-logo-name span { color: #ffffff; }

.clients-head h2 .italic { font-style: italic; color: var(--champagne-deep); }

.ins-head h2 .italic { font-style: italic; color: var(--champagne-deep); }

.ins-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-expo); }

.bespoke h2 .italic { font-style: italic; color: var(--accent-on-dark); }

.bespoke-cta .btn-gold { font-size: 12px; padding: 18px 38px; }

.unis-head h2 .italic { font-style: italic; color: var(--accent-on-dark); }

.tw-head h2 .italic { font-style: italic; color: var(--champagne-deep); }

.scrolled .theme-toggle { border-color: rgba(10,31,68,0.3); color: var(--navy-900); }

.v6-dd-group a:hover { color: var(--champagne); padding-left: 5px; }

.v6-hof-btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 20px; background: var(--champagne); color: var(--navy-900); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid var(--champagne); white-space: nowrap; text-decoration: none; transition: all .35s var(--ease-quart); }

.footer-bottom-row { display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; text-align:center; }

.footer-legal { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }

.footer-legal a { display:inline-block; padding:6px 0; font-size:12.5px; font-weight:600; color:rgba(248,244,236,0.62); text-decoration:none; transition:color .2s var(--ease-quart); }

.footer-legal a:hover { color:var(--champagne); }

@media (max-width:600px){ .footer-bottom-row { flex-direction:column; gap:18px; text-align:center; } .footer-legal { justify-content:center; } }

.footer-cta { display:flex; justify-content:space-between; align-items:center; gap:36px; flex-wrap:wrap; padding:0 0 46px; margin-bottom:46px; border-bottom:1px solid rgba(201,166,107,0.18); }

.footer-cta-btn.primary { background:var(--red-accent); color:#fff; }

.footer-cta-btn.primary:hover { background:var(--red-deep); transform:translateY(-1px); }

.footer-cta-btn.gold { background:transparent; color:var(--champagne); border:1px solid var(--champagne); }

.footer-cta-btn.gold:hover { background:var(--champagne); color:var(--navy-900); }

.footer-substack + .footer-substack { margin-top:30px; }

@media (max-width:760px){ .footer-cta { flex-direction:column; align-items:flex-start; gap:22px; } .footer-cta-btn { flex:1; justify-content:center; } }

.footer-brand { grid-column: auto; }

@media (prefers-reduced-motion:reduce) {
  .tbai-soon::before,.footer-cta-soon span{animation:none;}
}

.mpv2 .mpanel-head{margin-bottom:10px;}

.mpanel-cta2{display:flex;flex-direction:column;gap:10px;margin-top:22px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid rgba(201,166,107,0.28);}

.mp-events-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--navy-900);margin-right:2px;animation:mpEventsPulse 2s ease-in-out infinite;}

@media(prefers-reduced-motion:reduce){.mp-events-dot{animation:none;}}

.mpanel-cta2-primary{background:var(--champagne);color:var(--navy-900);border:1px solid var(--champagne);}

.mpanel-cta2-primary:hover{background:var(--champagne-deep);border-color:var(--champagne-deep);}

.mpanel-cta2-secondary{background:transparent;color:var(--navy-900);border:1px solid rgba(10,31,68,0.25);}

.mpanel-cta2-secondary:hover{border-color:var(--navy-900);}

.mpv2 .mpanel-logo-name,.mpv2 .mpanel-logo-name span{color:var(--red-accent);}

.mpv2 .mp-grp{font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 10px;}

.mpv2 .mp-grpsep{margin-top:10px;padding-top:16px;}

.mpv2 .mp-acc{border-bottom:1px solid rgba(201,166,107,0.32);}

.mpv2 .mp-acc-last{border-bottom:none;}

.mpv2 .mp-acchead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;}

.mpv2 .mp-chev{width:11px;height:11px;border-right:2px solid var(--champagne-deep);border-bottom:2px solid var(--champagne-deep);transform:rotate(-45deg);transition:transform .3s var(--ease-quart);flex-shrink:0;}

.mpv2 .mp-sub{display:block;max-height:0;opacity:0;overflow:hidden;padding:0 0 0 18px;border-left:2px solid var(--gold-line);margin:0 0 0 2px;transition:max-height .42s var(--ease-quart),opacity .3s ease,padding .42s var(--ease-quart),margin .42s var(--ease-quart);}

.mpv2 .mp-sub a{display:block;text-decoration:none;padding:10px 0;border:none;transition:all .2s var(--ease-quart);}

.mpv2 .mp-sub a:hover{padding-left:5px;}

.mpv2 .mp-mini{display:block;font-size:15px;font-weight:500;color:var(--navy-900);text-decoration:none;padding:9px 0;border-bottom:1px solid rgba(201,166,107,0.14);transition:all .2s var(--ease-quart);}

.mpv2 .mp-mini:last-child{border-bottom:none;}

.mpv2 .mpanel-foot{margin-top:auto;padding-top:30px;color:var(--warm-grey);}

.mpv2 .mp-foot-addr{color:var(--warm-grey);margin-top:4px;}

.footer-gei { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin: 34px 0 0; padding: 22px 26px; border: 1px solid rgba(201,166,107,0.38); background: linear-gradient(180deg, rgba(201,166,107,0.09), rgba(201,166,107,0.03)); text-decoration: none; transition: border-color .35s var(--ease-quart), background .35s var(--ease-quart); }

.footer-gei:hover { border-color: var(--champagne); background: linear-gradient(180deg, rgba(201,166,107,0.16), rgba(201,166,107,0.06)); }

.footer-book { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201,166,107,0.22); display: flex; flex-direction: column; align-items: flex-start; }

.footer-book .fb-e { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(248,244,236,0.45); margin-bottom: 7px; }

.footer-book .fb-by { font-family: var(--font-display); font-style: italic; font-size: 12.5px; color: rgba(248,244,236,0.55); margin-top: 4px; }

.footer-book .fb-cta { margin-top: 13px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-900); background: var(--champagne); padding: 10px 16px; text-decoration: none; transition: all .3s var(--ease-quart); }

.footer-book .fb-cta:hover { background: transparent; color: var(--champagne); box-shadow: inset 0 0 0 1px var(--champagne); }

.v6-mega-book { display: flex; align-items: flex-start; gap: 11px; margin: 14px 11px 2px; padding: 12px 12px 13px; background: var(--cream); border: 1px solid var(--paper-deep); text-decoration: none; transition: border-color .2s, background .2s; }

.v6-mega-book:hover { border-color: var(--champagne); background: #fff; }

.vmb-cover { flex: none; width: 34px; height: 46px; background: linear-gradient(150deg, #1a3663, var(--navy-900)); border-left: 3px solid var(--champagne); box-shadow: 0 3px 9px rgba(10,31,68,0.22); }

.v6-mega-book:hover .vmb-go { background: var(--champagne-deep); color: #fff; }

.v6-mega-book .vmb-go { align-self: flex-start; margin-top: 7px; padding: 7px 10px; font-size: 8.5px; }

@media (max-width:600px){
    p,
    div[style*="font-size:12.5px"][style*="line-height"],
    div[style*="font-size:13px"][style*="line-height"],
    div[style*="font-size:13.5px"][style*="line-height"],
    div[style*="font-size:14px"][style*="line-height"],
    div[style*="font-size:14.5px"][style*="line-height"],
    div[style*="font-size:15px"][style*="line-height"],
    div[style*="font-size:15.5px"][style*="line-height"],
    div[style*="font-size:16px"][style*="line-height"],
    div[style*="font-size:16.5px"][style*="line-height"],
    div[style*="font-size:17px"][style*="line-height"],
    span[style*="font-size:12.5px"][style*="line-height"],
    span[style*="font-size:13px"][style*="line-height"],
    span[style*="font-size:13.5px"][style*="line-height"],
    span[style*="font-size:14px"][style*="line-height"],
    span[style*="font-size:14.5px"][style*="line-height"],
    span[style*="font-size:15px"][style*="line-height"],
    span[style*="font-size:15.5px"][style*="line-height"],
    span[style*="font-size:16px"][style*="line-height"],
    span[style*="font-size:16.5px"][style*="line-height"],
    span[style*="font-size:17px"][style*="line-height"],
    li[style*="font-size:12.5px"][style*="line-height"],
    li[style*="font-size:13px"][style*="line-height"],
    li[style*="font-size:13.5px"][style*="line-height"],
    li[style*="font-size:14px"][style*="line-height"],
    li[style*="font-size:14.5px"][style*="line-height"],
    li[style*="font-size:15px"][style*="line-height"],
    li[style*="font-size:15.5px"][style*="line-height"],
    li[style*="font-size:16px"][style*="line-height"],
    li[style*="font-size:16.5px"][style*="line-height"],
    li[style*="font-size:17px"][style*="line-height"]
    {font-size:18px !important;line-height:1.65 !important;}
  }

.tba-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #E4DBC8;}

.tba-row:first-of-type{border-top:none;}

.tba-fontctrl button{width:28px;height:28px;border-radius:6px;border:1px solid #D8DDE1;background:#F4F6F7;color:#0A1F44;font-weight:700;cursor:pointer;font-size:13px;}

.tba-fontctrl button:hover{background:#E4DBC8;}

.tba-fontctrl span{font-size:11px;color:#5B6670;width:34px;text-align:center;}

.tba-toggle{position:relative;width:38px;height:22px;border-radius:99px;background:#D8DDE1;border:none;cursor:pointer;flex:none;}

.tba-toggle.on{background:#9A7942;}

.tba-reset{width:100%;margin-top:14px;padding:10px;border:1px solid #D8DDE1;border-radius:8px;background:#F4F6F7;color:#0A1F44;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;}

.skip-link{position:absolute;left:12px;top:-60px;background:#0A1F44;color:#fff;padding:12px 20px;border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;z-index:99999;transition:top .2s;}

/* Hero clearance on tablets and phones. The hero content also carries
   .container, whose <=1024px padding reset its top padding to 0, so on short
   (landscape) screens the vertically centred content rode up under the
   header (which ends at 122px). Only short screens (600px tall or less)
   need it; taller portrait screens are left exactly as they were. Equal top and bottom padding keeps centred
   heroes exactly where they were whenever they fit, and pushes content
   below the header when they don't. Bottom-aligned heroes override the
   bottom value in their own page styles. */
@media (max-width: 1024px) and (max-height: 600px) {
  .hero > .hero-content.container { padding-top: 136px; padding-bottom: 136px; }
}

/* Amira arrives smoothly. The chat frame stays invisible until its page has
   loaded and painted, then fades and rises in. The embed sets its own
   width/height transition inline, so it is repeated here with the fade.
   The loader adds .tb-amira-in (and always does within 6 s). */
iframe[src^="https://chat.talentbank.io/"] {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), width .34s cubic-bezier(.16,1,.3,1), height .34s cubic-bezier(.16,1,.3,1) !important;
}
iframe[src^="https://chat.talentbank.io/"].tb-amira-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  iframe[src^="https://chat.talentbank.io/"] { transform: none !important; transition: opacity .2s linear !important; }
}

.scrolled .v6-cta { background: var(--navy-900); color: var(--paper); border-color: var(--navy-900); }

.scrolled .v6-cta:hover { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.hero-proof-next:hover { background: var(--champagne); color: var(--navy-900); border-color: var(--champagne); transform: translateX(3px); }

.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }

.hts-line { display: block; }

.numbers-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.num-cell { padding: 58px 40px; border-right: 1px solid rgba(201,166,107,0.14); transition: background 0.4s var(--ease-quart); }

.num-cell:last-child { border-right: none; }

.num-cell:hover { background: var(--navy-800); }

.num-val .plus { color: var(--red-accent); font-style: italic; }

.aud-head { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: 80px; align-items: end; margin-bottom: 70px; }

.aud-label { font-size: 11px; font-weight: 600; color: var(--red-accent); text-transform: uppercase; letter-spacing: 0.22em; padding-top: 14px; position: relative; }

.aud-label::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 2px; background: var(--red-accent); }

/* TB-WWS-UNIFORM: all 5 cards same height + same pattern + always show description */
.aud-grid-3 { grid-template-columns: repeat(3, 1fr); }

.aud-card-body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 30px 26px; }

/* HALL OF FAME */
.hof { background: var(--dark-bg); color: var(--dark-text); padding: 130px 0; position: relative; overflow: hidden; }

.hof::before { content: ''; position: absolute; top: -180px; left: -160px; width: 560px; height: 560px; border: 1px solid rgba(201,166,107,0.1); border-radius: 50%; }

.hof-inner { position: relative; z-index: 1; }

.hof-head { text-align: center; max-width: 760px; margin: 0 auto 70px; }

.hof-head .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; color: var(--accent-on-dark); text-transform: uppercase; letter-spacing: 0.26em; margin-bottom: 26px; justify-content: center; }

.hof-banner { display: grid; grid-template-columns: 0.9fr 1.4fr auto; gap: 40px; align-items: center; background: var(--navy-900); border: 1px solid rgba(201,166,107,0.18); border-top: none; padding: 36px 40px; text-decoration: none; transition: background 0.45s var(--ease-quart); }

.hof-banner:hover { background: var(--dark-bg-alt); }

.hof-banner .hof-card-num { margin-bottom: 14px; }

.hof-banner .hof-card-toprow { margin-bottom: 12px; }

.hof-banner-right { white-space: nowrap; }

.hof-banner:hover .hof-card-stat-link { letter-spacing: 0.2em; }

@media (max-width: 760px) { .hof-banner { grid-template-columns: 1fr; gap: 20px; } }

/* Pending awards: faded until launch */
.hof-card-pending { opacity: 0.62; cursor: default; }

.hof-card-dir { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--dark-text-mut); }

.hof-card-stat { border-top: 1px solid rgba(201,166,107,0.2); padding-top: 16px; margin-top: auto; }

.hof-soon-tag { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-on-dark); border: 1px solid rgba(201,166,107,0.4); padding: 3px 9px; }

.hof-card:hover .hof-card-stat-link { letter-spacing: 0.2em; }

.hof-foot { text-align: center; margin-top: 56px; }

.hof-card-btn { display: inline-block; margin-top: 18px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--navy-900); background: var(--champagne); padding: 11px 20px; align-self: flex-start; transition: all 0.35s var(--ease-quart); }

.hof-card:hover .hof-card-btn { background: var(--paper); }

:root[data-theme="light"] .hof-card-btn { background: var(--champagne-deep); color: var(--paper); }

:root[data-theme="light"] .hof-card:hover .hof-card-btn { background: var(--navy-900); }

/* HANDBOOK FEATURE */
.hbf { padding: 130px 0; overflow: hidden; }

.hbf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.hbf-visual { position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }

.hbf-book { position: relative; width: 78%; aspect-ratio: 3/4; }

.hbf-book-pages { position: absolute; inset: 6px -8px 6px 30px; background: repeating-linear-gradient(90deg, #EFE9DC 0px, #EFE9DC 1px, #F8F4EC 1px, #F8F4EC 3px); box-shadow: 0 24px 60px rgba(20,15,5,0.18); transform: perspective(1400px) rotateY(-14deg); transform-origin: left center; border-radius: 0 4px 4px 0; }

.hbf-book-cover { position: absolute; inset: 0 0 0 22px; background: linear-gradient(155deg, var(--navy-900), var(--navy-700)); box-shadow: 0 40px 90px rgba(10,31,68,0.4); transform: perspective(1400px) rotateY(-14deg); transform-origin: left center; transition: transform 0.7s var(--ease-expo); border-radius: 2px 5px 5px 2px; overflow: hidden; }

.hbf-book:hover .hbf-book-cover { transform: perspective(1400px) rotateY(-5deg); }

.hbf-book-cover::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 16px; background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.05)); }

.hbf-book-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 72% 22%, rgba(201,166,107,0.28), transparent 56%); }

.hbf-book-inner { position: relative; z-index: 2; height: 100%; padding: 44px 32px 32px 44px; display: flex; flex-direction: column; justify-content: space-between; }

.hbf-book-tag { align-self: flex-start; background: var(--champagne); color: var(--navy-900); padding: 4px 12px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; }

.hbf-book-mini { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--champagne-soft); margin: 16px 0 10px; }

.hbf-content .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; color: var(--red-accent); text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 24px; }

.hbf-stats { display: flex; gap: 40px; margin: 28px 0 32px; }

.hbf-stat-num .plus { color: var(--red-accent); font-style: italic; }

.hbf-stat-label { font-size: 11px; color: var(--warm-grey); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; }

/* TESTIMONIAL */
.quote-sec { background: var(--cream); padding: 120px 0; border-top: 1px solid var(--paper-deep); }

.quote-inner { max-width: 900px; margin: 0 auto; text-align: center; }

.quote-author { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--red-accent); margin-top: 36px; }

.mpanel-nav { display: flex; flex-direction: column; }

.mpanel-nav .mp-hof { color: var(--champagne); font-style: italic; }

.mpanel-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }

.mpanel-cta { display: flex; flex-direction: column; gap: 12px; }

.mp-btn-red { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; background: var(--red-accent); color: var(--paper); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; border: 1px solid var(--red-accent); transition: all 0.3s var(--ease-quart); }

.mp-btn-red:active { background: var(--red-deep); }

.mp-btn-white { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; background: var(--paper); color: var(--navy-900); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; border: 1px solid var(--paper); transition: all 0.3s var(--ease-quart); }

.mp-btn-white:active { background: transparent; color: var(--paper); }

.mp-btn-gold { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; background: transparent; color: var(--champagne); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; border: 1.5px solid var(--champagne); transition: all 0.3s var(--ease-quart); }

.mp-btn-gold:active { background: var(--champagne); color: var(--navy-900); }

.clients-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }

.clients-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; color: var(--champagne-deep); text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 20px; justify-content: center; }

.ins-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; flex-wrap: wrap; gap: 20px; }

.ins-all { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--red-accent); text-decoration: none; white-space: nowrap; }

.ins-all:hover { color: var(--red-deep); }

.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.ins-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--champagne-deep); margin-bottom: 14px; }

.bespoke-in { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }

.bespoke-examples { margin: 44px auto 8px; max-width: 820px; }

.bx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }

.bx-item { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: rgba(201,166,107,0.06); border: 1px solid rgba(201,166,107,0.18); padding: 26px 26px; transition: border-color 0.3s var(--ease-quart); }

.bx-item:hover { border-color: rgba(201,166,107,0.45); }

.bx-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-on-dark); align-self: flex-start; }

@media (max-width: 700px) { .bx-grid { grid-template-columns: 1fr; } }

.bespoke-meta-item + .bespoke-meta-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: rgba(201,166,107,0.28); }

.bespoke-meta-item .di { color: var(--accent-on-dark); font-size: 9px; }

.bespoke-meta-item .bm-txt { font-size: 12.5px; color: var(--dark-text-soft); letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; }

.bespoke-cta { margin-top: 40px; }

.bespoke-note { font-size: 15px; color: var(--accent-on-dark); margin-top: 20px; letter-spacing: 0.06em; }

.bespoke-redirect { font-size: 14px; color: var(--dark-text-mut); margin-top: 18px; line-height: 1.6; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ===== University credibility ===== */
.unis { padding: 110px 0; background: var(--dark-bg); color: var(--dark-text); position: relative; overflow: hidden; }

.unis::before { content: ''; position: absolute; bottom: -180px; right: -150px; width: 520px; height: 520px; border: 1px solid rgba(201,166,107,0.1); border-radius: 50%; }

.unis-in { position: relative; z-index: 2; }

.unis-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }

.unis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 44px; }

.uni-pill { display: flex; align-items: center; gap: 14px; background: var(--navy-800); border: 1px solid rgba(201,166,107,0.2); padding: 20px 22px; transition: all 0.4s var(--ease-quart); }

.uni-pill:hover { border-color: var(--champagne); transform: translateY(-3px); }

.unis-cta { text-align: center; }

@media (max-width: 1024px) { .unis-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 600px) { .unis-grid { grid-template-columns: 1fr; } }

/* ===== Testimonial wall ===== */
.tw { padding: 100px 0 90px; background: var(--light-bg-alt); border-top: 1px solid var(--paper-deep); overflow: hidden; }

.tw-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }

.tw-row { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); margin-bottom: 16px; }

.tw-track { display: flex; flex-shrink: 0; gap: 16px; padding-right: 16px; animation: twScroll 64s linear infinite; }

.tw-track.rev { animation-direction: reverse; animation-duration: 76s; }

.tw-row:hover .tw-track { animation-play-state: paused; }

.tw-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--paper-deep); display: flex; justify-content: space-between; align-items: center; }

.tw-who { font-size: 12.5px; }

.tw-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 9px; border-radius: 100px; white-space: nowrap; }

.tw-tag.Employer { color: var(--red-deep); background: rgba(200,54,45,0.08); }

.tw-tag.University { color: var(--champagne-deep); background: rgba(184,146,83,0.12); }

.tw-tag.Graduate { color: var(--navy-700); background: rgba(30,58,111,0.08); }

/* handbook section extras */
.hbf-list { list-style: none; margin: 24px 0 18px; display: flex; flex-direction: column; gap: 11px; }

.hbf-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--navy-900); line-height: 1.5; }

.hbf-list .hbf-tick { color: var(--champagne-deep); font-size: 9px; margin-top: 6px; flex-shrink: 0; }

.hbf-more { font-size: 14px; color: var(--warm-grey); margin-bottom: 24px; }

.hbf-cta { margin-top: 8px; }

.hbf-buy { font-size: 13px; color: var(--warm-grey); margin-top: 16px; line-height: 1.6; max-width: 440px; }

.theme-toggle .tic { font-size: 12px; }

/* Talentbank Career Passport wordmark: OS set apart with bold + italic (inherits colour, works on any background) */
.os { font-weight: 700; font-style: italic; }

/* TB-NAV-DD v5 */
.v6-has-dd { position: relative; }

/* TB-MP-ACCORDION */
.mpanel-nav .mp-parent{display:flex;align-items:center;border-bottom:1px solid rgba(201,166,107,0.15);}

.mp-btn-soon { opacity:0.5; cursor:default; pointer-events:none; }

.cta-bg { position: absolute; inset: 0; z-index: 1; }

.cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,68,0.9), rgba(10,31,68,0.78)); }

.cta-inner { position: relative; z-index: 2; }

.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.mpanel-nav .mp-grp:first-child{margin-top:2px;}

.mpanel-nav .mp-heart{color:var(--champagne);}

.v6-logo-mark { width: 36px; height: 36px; border: 1.5px solid var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; color: var(--paper); position: relative; transition: all 0.4s var(--ease-quart); }

.v6-logo-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; font-size: 23px; color: #ffffff; letter-spacing: 0.05em; line-height: 1; transition: color 0.4s var(--ease-quart); text-transform: uppercase; }

.v6-links { display: flex; flex: 1; margin: 0 14px; list-style: none; }

.v6-link { font-size: 10.5px; font-weight: 600; color: var(--nav-over-hero-text); padding: 14px 13px; text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; text-decoration: none; transition: color 0.25s; position: relative; }

.v6-link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 8px; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-quart); }

.hero-content { position: relative; z-index: 4; padding: 120px 64px; width: 100%; max-width: 1360px; margin: 0 auto; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; color: var(--hero-accent); text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 32px; opacity: 0; animation: fadeUp 0.9s var(--ease-expo) 0.4s forwards; }

.hero-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(36px, 4.8vw, 76px); line-height: 1.02; letter-spacing: -0.028em; color: var(--hero-text); }

.hero-content .hero-proof.hero-proof-lead-line { font-size: clamp(38px, 5.4vw, 82px); line-height: 1.18; letter-spacing: -0.025em; display: block; margin-top: 0; margin-bottom: 4px; animation: fadeUp 0.9s var(--ease-expo) 0.5s forwards; position: relative; padding-bottom: 60px; min-height: 0; }

.hpl-row { display: block; }

.hero-proof-lead-line .hero-proof-lead, .hero-proof-lead-line .hero-proof-mid { font-family: 'Fraunces', serif; font-weight: 300; font-style: normal; color: var(--hero-text); }

.hero-proof-lead-line .hero-proof-co { font-family: 'Fraunces', serif; font-weight: 500; transition: opacity 0.45s var(--ease-quart); padding: 0.04em 0.3em; border-radius: 0.1em; box-shadow: 0 3px 16px rgba(0,0,0,0.22); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

:root[data-theme="light"] .hero-proof-lead-line .hero-proof-co { box-shadow: 0 4px 18px rgba(10,31,68,0.16); }

.hero-proof-lead-line .hero-proof-reason { font-size: 1em; }

.hero-proof-next { position: absolute; left: 0; bottom: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(201,166,107,0.5); background: transparent; color: var(--hero-accent); font-family: 'Outfit', sans-serif; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease-quart); }

.hero-title-sub { font-size: clamp(17px, 1.5vw, 23px); line-height: 1.2; margin-top: 26px; opacity: 0; animation: fadeUp 0.9s var(--ease-expo) 0.75s forwards; }

.hero-proof-lead, .hero-proof-mid { color: rgba(248,244,236,0.6); font-weight: 400; }

:root[data-theme="light"] .hero-proof-lead, :root[data-theme="light"] .hero-proof-mid { color: var(--warm-grey); }

.hero-proof-co { color: var(--red-accent); font-weight: 700; transition: opacity 0.5s var(--ease-quart); }

.hero-proof-reason { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--hero-accent); transition: opacity 0.5s var(--ease-quart); }

.hero-proof.swap .hero-proof-co, .hero-proof.swap .hero-proof-reason { opacity: 0; }

.hero-proof-lead-line.swap .hero-proof-mid { opacity: 0; }

.hero-proof-lead-line .hero-proof-mid { transition: opacity 0.45s var(--ease-quart); }

.hero-cta { margin-top: 42px; display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.9s var(--ease-expo) 1.2s forwards; }

.hero-scroll { position: absolute; bottom: 110px; left: 40px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; animation: fadeUp 0.9s var(--ease-expo) 1.5s forwards; }

.hero-scroll-line { width: 1px; height: 56px; background: rgba(201,166,107,0.4); position: relative; overflow: hidden; }

.hero-scroll-line::after { content: ''; position: absolute; top: -56px; left: 0; width: 1px; height: 56px; background: var(--paper); animation: scrollPulse 2s ease-in-out infinite; }

@keyframes scrollPulse { to { top: 56px; } }

.num-val { font-family: 'Fraunces', serif; font-weight: 300; font-size: 62px; color: var(--champagne); line-height: 1; letter-spacing: -0.03em; }

.num-label { font-size: 11px; color: var(--dark-text-mut); text-transform: uppercase; letter-spacing: 0.16em; margin-top: 16px; line-height: 1.5; }

/* AUDIENCES */
.aud { padding: 130px 0; }

.aud-grid { display: grid; gap: 22px; }

.aud-grid-2 { grid-template-columns: repeat(2, 1fr); width: 100%; margin: 22px auto 0; }

.aud-grid-2 .aud-card { aspect-ratio: 16/9; }

@media (max-width: 1100px) { .aud-grid-3, .aud-grid-2 { grid-template-columns: repeat(2, 1fr); } .aud-grid-2 { width: 100%; } }

.aud-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,68,0.1) 0%, rgba(10,31,68,0.85) 100%); }

.aud-card-num { font-family: 'Fraunces', serif; font-style: italic; font-size: 12px; color: var(--champagne); margin-bottom: 10px; }

/* Good Employer Index: prestige highlight */
.gei-feature { display: block; margin-top: 18px; text-decoration: none; background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); border: 1px solid rgba(201,166,107,0.3); position: relative; overflow: hidden; }

:root[data-theme="light"] .gei-feature { background: var(--cream); border-color: var(--gold-line); }

.gei-feature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,166,107,0.16), transparent 62%); pointer-events: none; }

.gei-frame { position: relative; z-index: 1; text-align: center; padding: 56px 40px 50px; max-width: 760px; margin: 0 auto; }

.gei-emblem { display: inline-flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 22px; }

.gei-emblem-core { font-family: 'Fraunces', serif; font-weight: 500; font-style: italic; font-size: 24px; letter-spacing: 0.04em; color: var(--accent-on-dark); border: 1.5px solid var(--accent-on-dark); border-radius: 50%; width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center; }

.gei-emblem-laurel { font-size: 26px; color: var(--accent-on-dark); opacity: 0.8; }

.gei-laurel-l { transform: scaleX(-1); }

.gei-soon { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-on-dark); border: 1px solid rgba(201,166,107,0.45); padding: 5px 14px; margin-bottom: 20px; }

.gei-lead { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(15px, 1.4vw, 19px); color: var(--dark-text-soft); line-height: 1.6; max-width: 620px; margin: 0 auto 26px; }

.gei-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--dark-text-mut); margin-bottom: 30px; }

.gei-meta .gei-dot { color: var(--accent-on-dark); font-size: 7px; }

.gei-cta { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--navy-900); background: var(--champagne); padding: 14px 30px; transition: all 0.35s var(--ease-quart); }

.gei-feature:hover .gei-cta { background: transparent; color: var(--accent-on-dark); box-shadow: inset 0 0 0 1px var(--accent-on-dark); }

.hof-card { background: var(--navy-900); padding: 40px 30px; transition: background 0.45s var(--ease-quart); position: relative; text-decoration: none; display: flex; flex-direction: column; }

.hof-card:hover { background: var(--dark-bg-alt); }

.hof-card-num { font-family: 'Fraunces', serif; font-style: italic; font-size: 13px; color: var(--accent-on-dark); margin-bottom: 18px; }

.hof-card-stat-num { font-family: 'Fraunces', serif; font-size: 26px; color: var(--accent-on-dark); line-height: 1; }

.hof-card-stat-link { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-on-dark); transition: letter-spacing 0.35s var(--ease-quart); }

.hbf-book-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 26px; color: var(--paper); line-height: 1.08; letter-spacing: -0.018em; }

.hbf-book-year { font-family: 'Fraunces', serif; font-size: 92px; line-height: 0.82; color: var(--champagne); letter-spacing: -0.04em; align-self: flex-end; }

.hbf-stat-num { font-family: 'Fraunces', serif; font-size: 34px; color: var(--navy-900); line-height: 1; }

.quote-mark { font-family: 'Fraunces', serif; font-size: 80px; color: var(--champagne); line-height: 0.4; margin-bottom: 10px; }

.quote-text { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: clamp(26px, 3.4vw, 42px); color: var(--navy-900); line-height: 1.32; letter-spacing: -0.015em; }

.quote-org { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: var(--warm-grey); margin-top: 6px; }

/* CTA */
.cta { position: relative; padding: 150px 0; text-align: center; overflow: hidden; background: var(--dark-bg); }

.footer-brand-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; font-size: 22px; color: #ffffff; }

.footer-brand-tag { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: rgba(248,244,236,0.6); margin-bottom: 22px; max-width: 290px; line-height: 1.6; }

.footer-statement { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: 17px; color: rgba(248,244,236,0.82); margin: 18px 0 20px; max-width: 340px; line-height: 1.55; }

.mpanel-logo-mark { width: 32px; height: 32px; border: 1.5px solid var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 16px; color: var(--paper); }

.mpanel-logo-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.05em; font-size: 20px; color: #ffffff; }

.mpanel-nav .mp-num { font-size: 11px; color: var(--champagne); font-style: italic; font-family: 'Fraunces', serif; }

.mpanel-foot { margin-top: auto; padding-top: 32px; font-size: 12.5px; color: rgba(248,244,236,0.5); line-height: 1.9; }

.how-head { max-width: 680px; margin-bottom: 60px; position: relative; z-index: 1; }

.how-step:hover { background: var(--dark-bg-alt); }

.how-step-n { font-family: 'Fraunces', serif; font-style: italic; font-size: 26px; color: var(--accent-on-dark); margin-bottom: 18px; }

.how-cta { margin-top: 48px; position: relative; z-index: 1; }

.how-selfserve { margin-top: 22px; font-size: 14px; color: var(--dark-text-mut); position: relative; z-index: 1; }

.bx-label { font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; color: var(--champagne); margin-bottom: 24px; letter-spacing: -0.01em; }

.bx-pain { font-family: 'Fraunces', serif; font-size: 17px; color: var(--dark-text); line-height: 1.5; margin: 0; letter-spacing: -0.01em; }

.uni-pill-badge { width: 42px; height: 42px; border-radius: 50%; background: rgba(201,166,107,0.16); color: var(--champagne); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 14px; flex-shrink: 0; }

.uni-pill-name { font-family: 'Fraunces', serif; font-size: 15px; color: var(--paper); line-height: 1.25; }

.tw-card .tw-q::before { content: '\201C'; font-family: 'Fraunces', serif; color: var(--champagne); font-size: 20px; margin-right: 2px; }

/* theme toggle button */
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: none; border: 1px solid rgba(248,244,236,0.4); border-radius: 100px; padding: 9px 14px; color: var(--paper); font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.4s ease; margin-right: 10px; }

/* TB-FOOTER-SPAN */
.footer-bottom { grid-column: 1 / -1; }

.mp-toggle{background:none;border:none;color:var(--champagne);font-size:26px;line-height:1;cursor:pointer;padding:0 2px 0 16px;font-family:'Fraunces',serif;}

.footer-wat:hover{color:var(--champagne-soft);}

.footer-play{display:flex;width:fit-content;align-items:center;gap:11px;padding:7px 0;margin:0;font-family:Outfit,sans-serif;font-size:15px;font-weight:700;letter-spacing:0.03em;text-decoration:none;color:var(--champagne);transition:color .25s var(--ease-quart),transform .25s var(--ease-quart);}

.footer-play:hover{color:var(--champagne-soft);}

.tb-duo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(10,31,68,0.82), rgba(154,121,66,0.42)); mix-blend-mode: multiply; pointer-events: none; }

.tb-duo::before { content: ''; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 1px rgba(201,166,107,0.22); pointer-events: none; }

.tb-imgband { padding: 110px 0; }

.tb-imgband .container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

.tb-imgband.tb-reverse .tb-imgband-media { order: -1; }

.tb-imgband-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.24em; margin-bottom: 20px; }

.tb-imgband-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--champagne-deep); }

@media (max-width: 900px) { .tb-imgband .container { grid-template-columns: 1fr; gap: 36px; } .tb-imgband.tb-reverse .tb-imgband-media { order: 0; } .tb-imgband { padding: 80px 0; } }

/* Fine dot-grid pattern */
.tb-dots { position: relative; }

.tb-dots > .container { position: relative; z-index: 1; }

/* Hairline gold rule with centre diamond */
.tb-rule { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0; margin: 0; }

.tb-rule span:last-child { background: linear-gradient(90deg, var(--champagne), transparent); }

.tb-rule .d { color: var(--champagne); font-size: 10px; }

/* Large watermark monogram */
.tb-watermark { position: absolute; font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; color: rgba(201,166,107,0.06); font-size: clamp(180px, 30vw, 420px); line-height: 0.8; pointer-events: none; user-select: none; z-index: 0; }

/* Thin top accent line on sections */
.tb-topaccent { position: relative; }

.tb-topaccent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,166,107,0.4) 30%, rgba(201,166,107,0.4) 70%, transparent); }

.tb-quote-mark { font-family: 'Fraunces', serif; font-size: 80px; line-height: 0.5; color: var(--accent-on-dark); opacity: 0.5; display: block; margin-bottom: 10px; }

.tb-quote-cite { margin-top: 26px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--dark-text-mut); }

/* Image strip: three duotone tiles */
.tb-strip { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.tb-strip .tb-duo { aspect-ratio: 1/1; }

/* Framed duotone image: gold corner brackets */
.tb-duo.tb-framed { padding: 0; }

.tb-frame-wrap { position: relative; padding: 14px; }

.tb-frame-wrap::before, .tb-frame-wrap::after { content: ''; position: absolute; width: 46px; height: 46px; pointer-events: none; z-index: 3; }

.tb-frame-wrap::before { top: 0; left: 0; border-top: 1px solid var(--champagne); border-left: 1px solid var(--champagne); }

.tb-frame-wrap::after { bottom: 0; right: 0; border-bottom: 1px solid var(--champagne); border-right: 1px solid var(--champagne); }

/* Gold divider flourish with centre diamond */
.tb-flourish { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto; padding: 56px 0; }

/* Vertical gold tick row */
.tb-ticks { display: flex; gap: 6px; }

.tb-ticks i:nth-child(2) { height: 32px; opacity: 0.8; }

.tb-ticks i:nth-child(3) { height: 22px; }

/* Section gold edge (top + bottom hairline) */
.tb-edged { position: relative; }

.tb-edged::before, .tb-edged::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,166,107,0.45) 30%, rgba(201,166,107,0.45) 70%, transparent); }

.tb-edged::before { top: 0; }

.tb-edged::after { bottom: 0; }

.tb-imgmeta .lbl { font-family: 'Fraunces', serif; font-style: italic; font-size: 13px; color: var(--gold-ink); }

.tb-imgmeta .no { font-size: 10px; letter-spacing: 0.2em; color: var(--gold-ink); text-transform: uppercase; }

/* Two-up duotone pair */
.tb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.tb-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(10,31,68,0.84), rgba(154,121,66,0.4)); mix-blend-mode: multiply; }

.tb-feature-inner .ttl .italic { font-style: italic; color: var(--champagne-soft); }

.footer-pif{display:flex;width:fit-content;align-items:center;gap:11px;padding:7px 0;margin:0;font-family:Outfit,sans-serif;font-size:15px;font-weight:700;letter-spacing:0.03em;text-decoration:none;color:#E89A94;transition:color .25s var(--ease-quart),transform .25s var(--ease-quart);}

.footer-pif .pif-heart,.footer-wat .wat-mark,.footer-play .play-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:15px;line-height:1;flex:none;transition:transform .3s var(--ease-quart);}

.footer-pif:hover { color: #f2b6b1; }

.mpv2 .mp-acchead .l{font-family:'Fraunces',serif;font-weight:400;font-size:25px;letter-spacing:-0.02em;color:var(--navy-900);line-height:1.12;}

.mpv2 .mp-acchead .d{display:block;font-family:'Outfit',sans-serif;font-size:15px;color:var(--warm-grey);margin-top:4px;}

.footer-pif::after, .footer-wat::after, .footer-play::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: currentColor; opacity: .5; transition: right .35s var(--ease-quart); }

.footer-pif:hover::after, .footer-wat:hover::after, .footer-play:hover::after { right: 0; }

.footer-pif:hover, .footer-wat:hover, .footer-play:hover { transform: translateX(3px); }

.footer-wat:hover { color: #96C9A0; }

.footer-pif .pif-heart, .footer-wat .wat-mark { display: inline-flex; transition: transform .3s var(--ease-quart); }

.footer-pif:hover .pif-heart { transform: scale(1.18); }

.footer-wat:hover .wat-mark { transform: rotate(-8deg) scale(1.12); }

.float-wa svg { display: block; }

.tb-dots::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(154,121,66,0.22) 1.4px, transparent 1.4px); background-size: 26px 26px; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 75%); }

.eh-outcomes { padding: 120px 0; background: var(--light-bg); }

.ab-sec-head { max-width: 700px; margin: 0 auto 64px; text-align: center; }

.ab-eyebrow2 { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; color: var(--accent-on-light); text-transform: uppercase; letter-spacing: 0.24em; margin-bottom: 22px; }

.eh-card-label { font-family: 'Fraunces', serif; font-style: italic; font-size: 14px; color: var(--gold-ink); margin-bottom: 18px; }

.eh-card-lead { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; color: var(--champagne-deep); margin-bottom: 18px; line-height: 1.4; }

.eh-card-link { margin-top: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-ink); text-decoration: none; transition: letter-spacing 0.35s var(--ease-quart); }

.eh-card:hover .eh-card-link { letter-spacing: 0.18em; }

.eh-how { background: var(--dark-bg); color: var(--dark-text); }

.eh-moat-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: start; }

.eh-sol-group { margin-bottom: 56px; }

.eh-sol-cat { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: var(--gold-ink); flex-shrink: 0; }

.eh-sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.eh-sol-link { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-on-light); transition: letter-spacing 0.35s var(--ease-quart); }

.eh-sol-card:hover .eh-sol-link { letter-spacing: 0.18em; }

.eh-careeros::before { content: ''; position: absolute; top: -160px; right: -140px; width: 480px; height: 480px; border: 1px solid rgba(201,166,107,0.12); border-radius: 50%; }

.eh-careeros-in { position: relative; z-index: 1; max-width: 720px; }

.eh-careeros-eyebrow { color: var(--accent-on-dark); }

/* Section colour swaps for the approved key-page layouts (Ben, 27 Sep 2026). Sections built dark read the
   --dark-* and --accent-on-dark tokens, so tb-on-paper turns one light by swapping them; tb-on-navy does
   the reverse for a section built light. Small gold text on paper uses gold ink, to stay readable. */
.tb-on-paper { --dark-bg: var(--paper); --dark-bg-alt: var(--cream); --dark-text: var(--navy-900); --dark-text-soft: var(--body-text); --dark-text-mut: var(--warm-grey); --accent-on-dark: var(--gold-ink); --dark-border: var(--light-border); background-color: var(--paper); color: var(--navy-900); border-top: 1px solid var(--paper-deep); }
/* the active sub-menu pill: gold on beige measured 3.1:1, so white with the darker gold (5.9:1) */
.tb-fnav .tb-fnav-links a.active { color: var(--gold-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--paper-deep); }
/* step cards are navy on a navy band; on paper they become white cards */
.tb-on-paper .how-step { background: #fff; border-color: var(--light-border); }
.tb-on-paper .how-step:hover { background: var(--cream); border-color: var(--champagne); }
section.tb-on-navy { background: var(--navy-900); color: var(--paper); border-top: 0; }
section.tb-on-navy h2, section.tb-on-navy h3 { color: var(--paper); }
section.tb-on-navy h2 .italic, section.tb-on-navy h3 .italic { color: var(--champagne); }
section.tb-on-navy p { color: rgba(248, 244, 236, 0.82); }