/* ==================================================================
   Immersive layer for careercalling.international (5 Sep 2026).
   Full bleed hero with photographs and loops, glide scrolling, parallax,
   scroll entrances, animated gradients, page transitions and the small
   interactions. Sits on top of cci.css / cq.css and uses their palette:
   navy #01216E, deep navy #041B4E, gold #E5C55B, blue #2E7CF6 to #7FA0EE.
   ================================================================== */
:root { --im-ease: cubic-bezier(.16, 1, .3, 1); --im-navy: #01216E; --im-deep: #041B4E; --im-gold: #E5C55B; --im-blue: #2E7CF6; --im-blue-2: #7FA0EE; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- cross document page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: im-out .28s ease both; }
::view-transition-new(root) { animation: im-in .45s var(--im-ease) both; }
@keyframes im-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes im-in { from { opacity: 0; transform: translateY(14px); } }
body.im-leaving { animation: im-out .26s ease both; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), body.im-leaving { animation: none; } }

/* ---------- the hero ---------- */
.cc-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: calc(100svh - var(--ccn-top, 166px)); display: grid; align-items: center; color: #fff; overflow: hidden; isolation: isolate; background: var(--im-deep); }
.cc-hero__stage { position: absolute; inset: 0; z-index: 0; }
.cc-hero__plate { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--im-ease); will-change: opacity; }
.cc-hero__plate img, .cc-hero__plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 9s linear; }
.cc-hero__plate.is-on { opacity: 1; z-index: 1; }
.cc-hero__plate.is-on img, .cc-hero__plate.is-on video { transform: scale(1); }
.cc-hero__veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, rgba(4, 27, 78, .88) 0%, rgba(4, 27, 78, .62) 40%, rgba(4, 27, 78, .28) 70%, rgba(4, 27, 78, .45) 100%), linear-gradient(0deg, rgba(4, 27, 78, .75), transparent 45%); }
.cc-hero__aurora { position: absolute; inset: -20%; z-index: 3; pointer-events: none; opacity: .55; mix-blend-mode: screen; filter: blur(60px);
  background: conic-gradient(from 180deg at 30% 60%, rgba(46, 124, 246, 0) 0deg, rgba(46, 124, 246, .55) 90deg, rgba(229, 197, 91, .35) 160deg, rgba(127, 160, 238, .45) 250deg, rgba(46, 124, 246, 0) 360deg);
  animation: im-aurora 26s linear infinite; }
@keyframes im-aurora { to { transform: rotate(360deg); } }
.cc-hero__grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 200px 200px; }
.cc-hero__in { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 88px; }
.cc-hero__copy { position: relative; display: grid; min-height: 340px; } /* slides share one grid cell: the block is as tall as the tallest slide, so a slide change moves nothing below it */
.cc-hero__slide { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; pointer-events: none; }
.cc-hero__slide.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.cc-hero__slide > * { opacity: 0; transform: translateY(22px); }
.cc-hero__slide.is-on > * { opacity: 1; transform: none; transition: opacity .8s var(--im-ease), transform .9s var(--im-ease); }
.cc-hero__slide.is-on > :nth-child(1) { transition-delay: .05s; }
.cc-hero__slide.is-on > :nth-child(2) { transition-delay: .15s; }
.cc-hero__slide.is-on > :nth-child(3) { transition-delay: .28s; }
.cc-hero__slide.is-on > :nth-child(4) { transition-delay: .4s; }
.cc-hero__slide.is-on > :nth-child(5) { transition-delay: .5s; }
.cc-hero .cq-eyebrow { display: inline-block; font-size: .8125rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: #C7D6F5; border: 1px solid rgba(199, 214, 245, .45); border-radius: 99px; padding: 7px 16px; margin-bottom: 20px; background: rgba(4, 27, 78, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cc-hero h2 { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; font-size: clamp(2.3rem, 5.4vw, 4.3rem); line-height: 1.04; letter-spacing: -.015em; color: #fff; margin: 0 0 18px; max-width: 13ch; font-weight: 600; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.cc-hero h2 em { font-style: italic; background: linear-gradient(100deg, #FFFFFF, #C7D6F5 40%, var(--im-gold)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: im-shine 6s ease-in-out infinite; }
@keyframes im-shine { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.cc-hero p { max-width: 520px; color: #DCE5F7; font-size: 1.08rem; line-height: 1.65; margin: 0 0 28px; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.cc-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cc-hero .cq-btn , .cc-rto .cq-btn  { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(100deg, var(--im-blue), var(--im-blue-2)); color: #fff; font-weight: 800; font-size: .9rem; padding: 15px 30px; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 32px rgba(46, 124, 246, .35); position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--im-ease), box-shadow .3s var(--im-ease); }
.cc-hero .cq-btn::after , .cc-rto .cq-btn::after  { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-130%); transition: transform .7s var(--im-ease); }
.cc-hero .cq-btn:hover , .cc-rto .cq-btn:hover  { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(46, 124, 246, .45); }
.cc-hero .cq-btn:hover::after , .cc-rto .cq-btn:hover::after  { transform: translateX(130%); }
.cc-hero .cq-btn svg , .cc-rto .cq-btn svg  { width: 16px; height: 16px; }
.cc-hero .cq-ghost , .cc-rto .cq-ghost  { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(255,255,255,.06); transition: border-color .3s, background .3s; }
.cc-hero .cq-ghost:hover , .cc-rto .cq-ghost:hover  { border-color: var(--im-gold); background: rgba(255,255,255,.12); }
.cc-hero .cq-kicker { display: block; margin-top: 30px; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); font-weight: 700; }

/* controls */
.cc-hero__ctrl { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.cc-hero__dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.cc-hero__dots button { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-width: 96px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(4, 27, 78, .35); color: rgba(255,255,255,.75); cursor: pointer; font: 700 .72rem/1 'Public Sans', 'Public Sans Fallback', sans-serif; letter-spacing: .14em; overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .3s, color .3s, background .3s; }
.cc-hero__dots button i { display: block; width: 36px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; position: relative; }
.cc-hero__dots button i::after { content: ""; position: absolute; inset: 0; background: var(--im-gold); transform: scaleX(0); transform-origin: 0 50%; }
.cc-hero__dots button.is-on { border-color: rgba(229, 197, 91, .7); color: #fff; background: rgba(4, 27, 78, .6); }
.cc-hero__dots button.is-on i::after { transform: scaleX(1); transition: transform var(--im-dur, 7s) linear; }
.cc-hero__dots button span { display: none; }
.cc-hero__dots button b { font-weight: 800; }
.cc-hero__pause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(4, 27, 78, .35); color: #fff; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cc-hero__pause svg { width: 14px; height: 14px; }
.cc-hero__pause .im-play { display: none; }
.cc-hero__pause[aria-pressed="true"] .im-play { display: block; }
.cc-hero__pause[aria-pressed="true"] .im-pause { display: none; }
.cc-hero .cq-pause { display: none; }

/* floating glass deck, three depth planes */
.cc-hero__deck { position: relative; height: 440px; perspective: 1200px; transform-style: preserve-3d; }
.cc-hero__glass { position: absolute; right: 0; width: min(300px, 100%); padding: 22px 24px; border-radius: 18px; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 60px rgba(2, 10, 40, .45), inset 0 1px 0 rgba(255,255,255,.25);
  transform-style: preserve-3d; will-change: transform; }
.cc-hero__glass b { display: block; font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 2.4rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.cc-hero__glass span { display: block; margin-top: 6px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); font-weight: 700; }
.cc-hero__glass i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-style: normal; font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.4; }
.cc-hero__glass:nth-child(1) { top: 0; right: 40px; }
.cc-hero__glass:nth-child(2) { top: 150px; right: 0; }
.cc-hero__glass:nth-child(3) { top: 300px; right: 70px; }
.cc-hero__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(300px 140px at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.18), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.cc-hero__glass:hover::after { opacity: 1; }
.cc-hero__scroll { position: absolute; left: 50%; bottom: 22px; z-index: 6; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: rgba(255,255,255,.65); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; font-weight: 700; }
.cc-hero__scroll i { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, var(--im-gold), transparent); animation: im-scroll 2.2s cubic-bezier(.65,.05,.36,1) infinite; transform-origin: 50% 0; }
@keyframes im-scroll { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 1000px) {
  .cc-hero__in { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 80px; }
  .cc-hero__deck { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; perspective: none; }
  .cc-hero__glass { position: static; width: auto; padding: 14px 14px; }
  .cc-hero__glass b { font-size: 1.6rem; }
  .cc-hero__glass i { display: none; }
  .cc-hero__glass span { font-size: .66rem; letter-spacing: .1em; }
}
@media (max-width: 640px) {
  .cc-hero { min-height: calc(100svh - var(--ccn-top, 152px)); }
  .cc-hero h2 { font-size: clamp(2rem, 9vw, 2.8rem); max-width: none; }
  .cc-hero__copy { min-height: 300px; }
  .cc-hero__dots button { min-width: 0; padding: 0 12px; }
  .cc-hero__dots button i { width: 22px; }
  .cc-hero__deck { grid-template-columns: repeat(3, 1fr); }
  .cc-hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-hero__plate img, .cc-hero__plate video { transition: none; transform: none; }
  .cc-hero__aurora, .cc-hero__scroll i, .cc-hero h2 em, .cc-hero__dots button.is-on i::after { animation: none; transition: none; }
  .cc-hero__slide > *, .cc-hero__slide.is-on > * { transition: none; }
}

/* ---------- inner page heroes: a plate behind the existing hero ---------- */
/* sizing on every inner page hero from first paint, so the plate the script adds shifts nothing */
.page-hero { min-height: 46vh; display: grid; align-items: end; padding-top: 90px; }
.page-hero .cc-plate { position: absolute; inset: -10% 0; z-index: 0; overflow: hidden; }
.page-hero .cc-plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); opacity: .55; }
.page-hero .cc-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 33, 110, .92) 0%, rgba(1, 33, 110, .72) 45%, rgba(1, 33, 110, .45) 100%), linear-gradient(0deg, rgba(1, 33, 110, .9), transparent 60%); }
.page-hero.has-plate::before { z-index: 1; }
.page-hero.has-plate .container { z-index: 2; }
.page-hero.has-plate h1, .page-hero.has-plate .lead, .page-hero.has-plate .eyebrow, .page-hero.has-plate .crumbs, .page-hero.has-plate .crumbs a, .page-hero.has-plate p, .page-hero.has-plate nav, .page-hero.has-plate nav a { color: #fff !important; }
.page-hero.has-plate h1 span, .page-hero.has-plate h1 em, .page-hero.has-plate h1 .hl { color: var(--im-gold) !important; -webkit-text-fill-color: var(--im-gold); }
.page-hero.has-plate .lead { border-left-color: var(--im-gold) !important; color: rgba(255,255,255,.88) !important; }
.page-hero.has-plate::after { display: none; }

/* ---------- ambient aurora behind soft sections ---------- */
.section.soft, .nd-soft, .cc-soft { position: relative; overflow: hidden; }
.section.soft::before, .nd-soft::before, .cc-soft::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -20vw; top: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(46, 124, 246, .10), transparent 70%); animation: im-drift 18s ease-in-out infinite alternate; z-index: 0; }
.section.soft::after, .nd-soft::after, .cc-soft::after { content: ""; position: absolute; width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; right: -18vw; bottom: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(229, 197, 91, .10), transparent 70%); animation: im-drift 22s ease-in-out infinite alternate-reverse; z-index: 0; }
.section.soft > *, .nd-soft > *, .cc-soft > * { position: relative; z-index: 1; }
@keyframes im-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }

/* ---------- entrances driven by the runtime ---------- */
[data-im-rise] { opacity: 0; transform: translateY(26px); }
[data-im-rise].is-in { opacity: 1; transform: none; transition: opacity .9s var(--im-ease), transform 1s var(--im-ease); }
[data-im-stagger] > * { opacity: 0; transform: translateY(22px); }
[data-im-stagger].is-in > * { opacity: 1; transform: none; transition: opacity .8s var(--im-ease), transform .9s var(--im-ease); }
[data-im-stagger].is-in > :nth-child(2) { transition-delay: .08s; } [data-im-stagger].is-in > :nth-child(3) { transition-delay: .16s; }
[data-im-stagger].is-in > :nth-child(4) { transition-delay: .24s; } [data-im-stagger].is-in > :nth-child(5) { transition-delay: .32s; } [data-im-stagger].is-in > :nth-child(6) { transition-delay: .4s; }
.im-line { display: block; overflow: hidden; }
.im-line > span { display: block; transform: translateY(110%); }
.is-in .im-line > span { transform: none; transition: transform 1s var(--im-ease); }
.is-in .im-line:nth-child(2) > span { transition-delay: .08s; } .is-in .im-line:nth-child(3) > span { transition-delay: .16s; }

/* ---------- tilt, glare and spotlight on cards ---------- */
.im-tilt { transform-style: preserve-3d; transition: transform .45s var(--im-ease), box-shadow .45s var(--im-ease); will-change: transform; }
.im-tilt.is-tilting { transition: transform .08s linear; }
.im-tilt .im-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px 260px at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 60%); }
.im-tilt:hover .im-glare { opacity: 1; }
.im-tilt:hover { box-shadow: 0 30px 60px rgba(18, 42, 76, .16); }
[data-im-spot] { position: relative; }
[data-im-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgba(46, 124, 246, .12), transparent 55%); }
[data-im-spot]:hover::after { opacity: 1; }

/* ---------- animated gradient border on dark bands and CTA cards ---------- */
.cine-artband, .cta-band, .awh { position: relative; }
.im-beam { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; z-index: 2;
  background: conic-gradient(from var(--im-angle, 0deg), transparent 0 70%, var(--im-gold) 82%, var(--im-blue-2) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: im-beam 8s linear infinite; }
@property --im-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes im-beam { to { --im-angle: 360deg; } }

/* section headings: the site draws its own underline; the class is only an entrance hook */
section h2.im-h { position: relative; }

/* ---------- cursor glow (fine pointers only) ---------- */
.im-cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(1, 33, 110, .55); pointer-events: none; z-index: 9999; transition: width .3s var(--im-ease), height .3s var(--im-ease), margin .3s var(--im-ease), background .3s, border-color .3s, opacity .3s; opacity: 0; }
.im-cursor.is-on { opacity: 1; }
.im-cursor.is-link { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(46, 124, 246, .12); border-color: transparent; }
.im-cursor.is-dark { border-color: rgba(229, 197, 91, .75); }
@media (hover: none), (max-width: 900px) { .im-cursor { display: none; } }

/* ---------- link and button micro interactions ---------- */
[data-magnetic] { will-change: transform; }
.section a:not(.btn):not(.cq-btn):not([class*="btn"]):not(.card):not(.work):not(.door) { text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-color .3s, color .3s; }
img.im-parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-im-rise], [data-im-stagger] > *, .im-line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .section.soft::before, .section.soft::after, .nd-soft::before, .nd-soft::after, .cc-soft::before, .cc-soft::after, .im-beam, section h2.im-h.is-in::after { animation: none !important; }
  .im-cursor { display: none; }
}

/* floating scroll arrows, now buttons */
.cqscroll button { width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; background: #0B1B3A; color: #fff; box-shadow: 0 10px 26px rgba(7, 18, 40, .4); display: grid; place-items: center; transition: .25s; opacity: .85; cursor: pointer; font: inherit; }
.cqscroll button:hover, .cqscroll button:focus-visible { background: linear-gradient(135deg, #2E7CF6, #7FA0EE); transform: translateY(-3px); opacity: 1; }

/* the three doors: a deeper scrim so the captions read over bright photographs */
.door::after { background: linear-gradient(180deg, rgba(12, 29, 54, .16) 0%, rgba(10, 23, 43, .52) 45%, rgba(10, 23, 43, .9) 100%) !important; }
.door h3, .door p, .door span, .door b { text-shadow: 0 1px 2px rgba(4, 12, 28, .55), 0 6px 22px rgba(4, 12, 28, .45); }

.door img { filter: brightness(.9); }
.door:hover img { filter: none; }

/* the hero's inner container must never exceed the viewport on phones */
.cc-hero__in { box-sizing: border-box; max-width: 100%; }
@media (max-width: 640px) {
  .cc-hero__in { width: 100%; padding-left: 20px; padding-right: 20px; }
  .cc-hero__ctrl { flex-wrap: wrap; gap: 10px; }
  .cc-hero__dots { flex-wrap: wrap; }
  .cc-hero__deck { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cc-hero__glass { padding: 12px 10px; }
  .cc-hero__glass b { font-size: 1.5rem; }
  .cc-hero__glass span { font-size: .58rem; letter-spacing: .08em; }
  .cqscroll { right: 10px; bottom: 12px; gap: 6px; }
  .cqscroll button { width: 34px; height: 34px; opacity: .7; }
}
/* inline label after the bullet, so "See the awards" reads as one phrase */
.cc-out { display: block !important; }
.cc-out::before { display: inline-block; vertical-align: middle; margin-right: 8px; margin-top: -2px; }

/* the stats wall under the hero: never wider than the phone */
@media (max-width: 760px) {
  .mast .container { max-width: 100%; box-sizing: border-box; width: auto; }
  .statwall { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px 10px !important; width: auto !important; min-width: 0 !important; }
  .statwall .stat { min-width: 0 !important; padding: 12px 8px !important; }
  .statwall .stat b, .statwall .stat i { font-size: 1.35rem !important; }
  .statwall .stat span { font-size: .6rem !important; letter-spacing: .1em !important; }
}
@media (max-width: 420px) { .statwall { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* recognition cards: two columns on phones, one on small phones */
@media (max-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .card-grid > * { min-width: 0; } }
@media (max-width: 480px) { .card-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* filmed loops over inner page plates and hero plates */
.page-hero .cc-plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); opacity: 0 !important; transition: opacity 1.2s ease; }
.page-hero .cc-plate video.is-ready { opacity: .55 !important; }
.cc-hero__plate video + img { position: absolute; inset: 0; z-index: -1; }

/* nationally recognised training panel */
.cc-rto { background: var(--im-deep, #041B4E); color: #fff; padding: 64px 0; }
.cc-rto__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: 40px; align-items: center; }
.cc-rto .nd-kicker { color: var(--im-gold, #E5C55B); }
.cc-rto h2 { color: #fff; font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; margin: 10px 0 14px; }
.cc-rto p { color: rgba(255,255,255,.82); max-width: 62ch; }
.cc-rto__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.cc-rto__card { border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 26px; background: rgba(255,255,255,.06); display: grid; gap: 6px; }
.cc-rto__code { font: 700 .72rem/1 'Public Sans', 'Public Sans Fallback', sans-serif; letter-spacing: .18em; color: var(--im-gold, #E5C55B); }
.cc-rto__card b { font-family: 'Source Serif 4', 'Source Serif 4 Fallback', serif; font-size: 1.7rem; }
.cc-rto__card i { font-style: normal; color: rgba(255,255,255,.8); }
.cc-rto__card small { color: rgba(255,255,255,.62); margin-top: 8px; line-height: 1.5; }
@media (max-width: 760px) { .cc-rto { padding: 44px 0; } .cc-rto__grid { grid-template-columns: 1fr; gap: 22px; } }
/* people cards open the person's own profile site */
a.nd-p { text-decoration: none; color: inherit; cursor: pointer; transition: transform .35s var(--im-ease, ease), box-shadow .35s; }
a.nd-p:hover, a.nd-p:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(1, 33, 110, .14); }
a.nd-p:hover b { color: var(--im-blue, #2E7CF6); }
.temp_our_team_person.has-profile, .team-card.has-profile, .cc-person.has-profile { cursor: pointer; }

/* filmed backdrop behind the nationally recognised training panel */
.cc-rto { position: relative; overflow: hidden; isolation: isolate; }
.cc-rto__bg { position: absolute; inset: 0; z-index: -1; background: var(--im-deep, #041B4E) url(../media/rto-workshop-poster.webp) center/cover no-repeat; }
.cc-rto__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.cc-rto__bg video.is-ready { opacity: 1; }
.cc-rto__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 27, 78, .94) 0%, rgba(4, 27, 78, .82) 55%, rgba(4, 27, 78, .6) 100%), linear-gradient(0deg, rgba(4, 27, 78, .85), rgba(4, 27, 78, .3)); }
.cc-rto .nd-wrap { position: relative; z-index: 1; }
.cc-rto__card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(4, 27, 78, .45); }
@media (max-width: 900px) { .cc-rto__bg video { display: none; } }