/* ===========================================================
   MS Rethish P & Associates — Brand Motion & Presentation
   Logo-colour theme: blue #0057A5 · red #CB1416 · deep navy #00305C
   Everything here degrades gracefully: with no JS, content is
   simply visible; with prefers-reduced-motion, motion is removed.
   =========================================================== */

:root{
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.77, 0, .18, 1);
  --navy-deep: #001A35;
  --intro-wait: 0s;
}
/* First visit in a session plays the logo intro, so page motion waits for it */
html:not(.no-intro){ --intro-wait: 2.35s; }

@keyframes fadeUp   { from{ opacity:0; transform: translate3d(0,26px,0); } }
@keyframes fadeDown { from{ opacity:0; transform: translate3d(0,-14px,0); } }
@keyframes fadeIn   { from{ opacity:0; } }
@keyframes floaty   { 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(0,-7px,0); } }

/* ---------------------------------------------------------------
   1. Logo intro (first visit per session) — R and P assemble, then
      a two-layer wipe (red edge, then blue) reveals the site.
   --------------------------------------------------------------- */
.intro, .intro-red{ position:fixed; inset:0; }
.intro-red{ z-index:2999; background: var(--red); animation: introOut .95s var(--ease-io) 2.18s forwards; }
.intro{
  z-index:3000; display:grid; place-items:center; color:#fff;
  background: radial-gradient(90% 90% at 15% 0%, #0a6fc4 0%, #0057A5 32%, #00305C 72%, #001a35 100%);
  animation: introOut .95s var(--ease-io) 2.0s forwards;
}
.no-intro .intro, .no-intro .intro-red{ display:none; }
@keyframes introOut{
  from{ clip-path: inset(0 0 0 0); }
  to  { clip-path: inset(0 0 100% 0); visibility:hidden; }
}
.intro-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.85rem; padding:1.5rem; }
.intro-mark{ position:relative; width:138px; aspect-ratio: 500/445; animation: introPulse 1.1s ease-in-out 1.35s 1; }
.intro-mark img{ position:absolute; inset:0; width:100%; height:100%; }
.intro .im-r{ filter: brightness(0) invert(1); animation: imR 1.05s var(--ease-out) .25s backwards; }
.intro .im-p{ animation: imP 1.05s var(--ease-out) .45s backwards; }
@keyframes imR{ from{ opacity:0; transform: translate3d(-80px,12px,0) rotate(-12deg) scale(.9); } }
@keyframes imP{ from{ opacity:0; transform: translate3d(80px,-12px,0) rotate(14deg) scale(.7); } }
@keyframes introPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.intro-name{ font: 800 1.08rem/1.2 var(--sans); letter-spacing:.16em; animation: fadeUp .8s var(--ease-out) 1.05s backwards; }
.intro-sub{ font: 700 .68rem/1 var(--sans); letter-spacing:.34em; color:#ffb3b5; animation: fadeUp .8s var(--ease-out) 1.25s backwards; }
.intro-bar{ width:200px; height:3px; border-radius:3px; background: rgba(255,255,255,.2); overflow:hidden; margin-top:.7rem; animation: fadeIn .4s ease .5s backwards; }
.intro-bar i{ display:block; height:100%; background: linear-gradient(90deg,#fff,#CB1416); transform-origin:left; animation: barGrow 1.5s var(--ease-io) .45s backwards; }
@keyframes barGrow{ from{ transform: scaleX(0); } }

/* ---------------------------------------------------------------
   2. Header logo — R and P slide together, gently part on hover
   --------------------------------------------------------------- */
.brand .logo-mark{ position:relative; display:block; height:42px; width:auto; aspect-ratio:500/445; flex:none; }
.brand .logo-mark img{ position:absolute; inset:0; width:100%; height:100%; transition: transform .6s var(--ease-out); }
.brand .lm-r{ animation: lmR .9s var(--ease-out) calc(var(--intro-wait) + .1s) backwards; }
.brand .lm-p{ animation: lmP .9s var(--ease-out) calc(var(--intro-wait) + .28s) backwards; }
@keyframes lmR{ from{ opacity:0; transform: translateX(-16px) rotate(-8deg); } }
@keyframes lmP{ from{ opacity:0; transform: translateX(16px) rotate(10deg) scale(.85); } }
.brand:hover .lm-r{ transform: translateX(-2px) rotate(-3deg); }
.brand:hover .lm-p{ transform: translate(3px,-2px) rotate(5deg) scale(1.05); }
.brand .brand-text{ animation: fadeUp .8s var(--ease-out) calc(var(--intro-wait) + .4s) backwards; }
.nav-links > li{ animation: fadeDown .6s var(--ease-out) backwards; animation-delay: calc(var(--intro-wait) + .3s + var(--i,0) * .06s); }
.nav-links > li:nth-child(1){ --i:0; } .nav-links > li:nth-child(2){ --i:1; } .nav-links > li:nth-child(3){ --i:2; }
.nav-links > li:nth-child(4){ --i:3; } .nav-links > li:nth-child(5){ --i:4; } .nav-links > li:nth-child(6){ --i:5; }
.nav-links > li:nth-child(7){ --i:6; }
.nav-cta{ animation: fadeIn .8s ease calc(var(--intro-wait) + .7s) backwards; }

.site-header{ transition: box-shadow .35s ease, background .35s ease; }
.navbar{ transition: padding .35s var(--ease-out); }
.site-header.is-scrolled{ box-shadow: 0 10px 30px rgba(0,48,92,.12); }
.site-header.is-scrolled .navbar{ padding-block:.45rem; }

/* scroll progress (brand gradient) */
.scroll-progress{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:2500; transform-origin:left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue), var(--red)); pointer-events:none; }

/* page-to-page transition */
body{ animation: fadeIn .55s ease backwards; }
main, .page-main{ transition: opacity .28s ease, transform .28s ease; }
body.page-leaving main{ opacity:0; transform: translateY(-10px); }

/* ---------------------------------------------------------------
   3. Hero: entrance choreography + slow brand orbs
   --------------------------------------------------------------- */
.hero, .page-hero{ position:relative; overflow:hidden; }
.hero > .container, .page-hero > .container{ position:relative; z-index:1; }
.hero::before, .page-hero::before, .hero::after, .page-hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter: blur(6px);
}
.hero::before, .page-hero::before{ width:560px; height:560px; left:-190px; top:-230px;
  background: radial-gradient(circle, rgba(0,87,165,.16), transparent 66%); animation: orbA 15s ease-in-out infinite alternate; }
.hero::after, .page-hero::after{ width:460px; height:460px; right:-140px; bottom:-220px;
  background: radial-gradient(circle, rgba(203,20,22,.13), transparent 66%); animation: orbB 17s ease-in-out infinite alternate; }
@keyframes orbA{ to{ transform: translate3d(70px,50px,0) scale(1.12); } }
@keyframes orbB{ to{ transform: translate3d(-60px,-40px,0) scale(1.1); } }

.hero-copy > *{ animation: fadeUp .95s var(--ease-out) backwards; animation-delay: calc(var(--intro-wait) + .05s + var(--i,0) * .12s); }
.hero-copy > :nth-child(1){ --i:0; } .hero-copy > :nth-child(2){ --i:1; } .hero-copy > :nth-child(3){ --i:2; }
.hero-copy > :nth-child(4){ --i:3; } .hero-copy > :nth-child(5){ --i:4; } .hero-copy > :nth-child(6){ --i:5; }
.hero-visual{ animation: heroVisual 1.25s var(--ease-out) calc(var(--intro-wait) + .2s) backwards; }
@keyframes heroVisual{ from{ opacity:0; transform: translate3d(70px,0,0) scale(.96); } }
.hero-visual .frame-blue{ animation: frameBlue 1.2s var(--ease-out) calc(var(--intro-wait) + .5s) backwards; }
.hero-visual .frame-red { animation: frameRed  1.2s var(--ease-out) calc(var(--intro-wait) + .65s) backwards; }
@keyframes frameBlue{ from{ opacity:0; transform: translate(-34px,-34px); } }
@keyframes frameRed { from{ opacity:0; transform: translate(44px,44px) scale(.92); } }

/* home hero gets a bigger slider */
.hero-grid--slider{ grid-template-columns: 1fr 1fr; }
.hero-grid--slider .hero-copy h1{ font-size: clamp(2rem, 3.4vw, 2.85rem); }
.hero-grid--slider .frame-photo{ aspect-ratio: 4 / 3.15; }
@media (max-width: 900px){ .hero-grid--slider{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------
   4. Scroll reveal  (hidden only when JS is running)
   --------------------------------------------------------------- */
.js [data-reveal]{
  opacity:0; transform: translate3d(0,30px,0);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="left"]  { transform: translate3d(-46px,0,0); }
.js [data-reveal="right"] { transform: translate3d(46px,0,0); }
.js [data-reveal="zoom"]  { transform: scale(.93); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------------------------------------------------------------
   5. Sliders (shared)
   --------------------------------------------------------------- */
.slider{ position:absolute; inset:0; background: var(--navy-deep); }
.slider .slide{ position:absolute; inset:0; margin:0; opacity:0; z-index:1; transition: opacity 1.15s var(--ease-io); }
.slider .slide.is-active{ opacity:1; z-index:2; }
.slider .slide img{ width:100%; height:100%; object-fit:cover; transform: scale(1.14); }
.slider .slide.is-active img{ animation: kenburns 8s ease-out forwards; }
.slider .slide.is-leaving img{ animation:none; transform: scale(1); }
.slider .slide:nth-child(even).is-active img{ animation-name: kenburnsB; }
@keyframes kenburns { from{ transform: scale(1.16) translate3d(2%,1.2%,0); } to{ transform: scale(1) translate3d(0,0,0); } }
@keyframes kenburnsB{ from{ transform: scale(1.16) translate3d(-2%,1%,0); } to{ transform: scale(1) translate3d(0,0,0); } }
.slider .slide::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,26,53,0) 52%, rgba(0,26,53,.78) 100%); }

.slide-cap{ position:absolute; left:1.15rem; bottom:1.15rem; z-index:3; display:flex; flex-direction:column; gap:.4rem; color:#fff; max-width:80%; }
.slide-cap .cap-chip{ align-self:flex-start; background: var(--red); font: 700 .68rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.4rem .7rem; border-radius:999px; }
.slide-cap b{ font: 800 clamp(1.05rem,1.8vw,1.45rem)/1.15 var(--serif); text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.slider .slide.is-active .slide-cap > *{ animation: fadeUp .8s var(--ease-out) .45s backwards; }
.slider .slide.is-active .slide-cap > *:last-child{ animation-delay:.6s; }

.slider-badge{ position:absolute; right:1rem; top:1rem; z-index:5; width:58px; height:58px; padding:.65rem; border-radius:16px;
  background: rgba(255,255,255,.94); box-shadow: 0 14px 30px -10px rgba(0,26,53,.55); animation: floaty 6s ease-in-out infinite; }
.slider-badge img{ width:100%; height:100%; object-fit:contain; }

.slider-arrow{ position:absolute; top:50%; z-index:5; width:44px; height:44px; margin-top:-22px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--blue-dark); background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px -8px rgba(0,26,53,.55); opacity:0; transition: opacity .3s ease, transform .3s var(--ease-out), background .2s, color .2s; }
.slider-arrow.prev{ left:1.4rem; transform: translateX(-10px); }
.slider-arrow.next{ right:1.1rem; transform: translateX(10px); }
.slider:hover .slider-arrow, .slider:focus-within .slider-arrow{ opacity:1; transform:none; }
.slider-arrow:hover{ background: var(--red); color:#fff; }
.slider-arrow svg{ width:18px; height:18px; }
@media (hover:none){ .slider-arrow{ opacity:.9; transform:none; } }
@media (max-width:560px){
  .slide-cap{ left:.9rem; bottom:2.3rem; max-width:88%; }
  .slider-dots{ left:.9rem; right:auto; bottom:.9rem; }
  .slider-badge{ width:46px; height:46px; padding:.5rem; border-radius:13px; }
}

.slider-dots{ position:absolute; right:1.1rem; bottom:1.2rem; z-index:5; display:flex; gap:.4rem; align-items:center; }
.slider-dots button{ position:relative; width:9px; height:9px; padding:0; border:0; border-radius:99px; cursor:pointer; background: rgba(255,255,255,.55);
  overflow:hidden; transition: width .5s var(--ease-out), background .3s; }
.slider-dots button.is-active{ width:34px; background: rgba(255,255,255,.35); }
.slider-dots button.is-active::after{ content:""; position:absolute; inset:0; background:#fff; transform-origin:left; animation: dotFill var(--dur,5200ms) linear forwards; }
@keyframes dotFill{ from{ transform: scaleX(0); } }
.slider.is-paused .slider-dots button.is-active::after{ animation-play-state: paused; }

/* ---------------------------------------------------------------
   6. "Inside our office" big slider
   --------------------------------------------------------------- */
.showcase{ position:relative; overflow:hidden; color:#fff;
  background: radial-gradient(70% 60% at 85% 0%, rgba(203,20,22,.28), transparent 60%),
              linear-gradient(180deg, #00305C 0%, #001f3d 100%); }
.showcase::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: radial-gradient(circle at 2rem 2rem, rgba(255,255,255,.07) 0 2px, transparent 2.6px) 0 0 / 22px 22px; }
.showcase .container{ position:relative; z-index:1; }
.showcase .eyebrow{ color:#ff9c9e; } .showcase .eyebrow::before{ background:#ff9c9e; }
.showcase .section-head h2{ color:#fff; } .showcase .section-head p{ color: rgba(255,255,255,.78); }
.showcase .section-head{ margin-bottom:2.2rem; }

.bigslider{ position:relative; }
.bs-stage{ position:relative; aspect-ratio: 16 / 8.2; border-radius:28px; overflow:hidden; background: var(--navy-deep);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); isolation:isolate; }
.bs-slide{ position:absolute; inset:0; margin:0; overflow:hidden; visibility:hidden; transform: translate3d(100%,0,0);
  transition: transform 1.05s var(--ease-io); }
.bs-slide.is-active{ visibility:visible; transform:none; }
.bs-slide img{ width:100%; height:100%; object-fit:cover; transform: scale(1.14); }
.bs-slide.is-active img{ animation: bsZoom 9s ease-out forwards; }
@keyframes bsZoom{ from{ transform: scale(1.16); } to{ transform: scale(1); } }
.bs-shade{ position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,26,53,0) 35%, rgba(0,26,53,.9) 100%), linear-gradient(90deg, rgba(0,48,92,.55), transparent 55%); }
.bs-cap{ position:absolute; z-index:3; left:clamp(1.2rem,3vw,2.6rem); bottom:clamp(1.5rem,3.2vw,2.8rem); max-width:min(580px,78%); }
.bs-cap .chip{ display:inline-flex; align-items:center; gap:.5rem; background: var(--red); color:#fff; font: 700 .7rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.45rem .8rem; border-radius:999px; }
.bs-cap .chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; }
.bs-cap h3{ color:#fff; font-size: clamp(1.5rem,3.2vw,2.6rem); margin-top:.75rem; text-shadow: 0 3px 22px rgba(0,0,0,.4); }
.bs-cap p{ color: rgba(255,255,255,.88); margin-top:.55rem; max-width:48ch; font-size:.98rem; }
.bs-slide.is-active .bs-cap > *{ animation: fadeUp .9s var(--ease-out) .55s backwards; }
.bs-slide.is-active .bs-cap > :nth-child(2){ animation-delay:.68s; }
.bs-slide.is-active .bs-cap > :nth-child(3){ animation-delay:.8s; }

.bs-ui{ position:absolute; z-index:5; right:clamp(1rem,2.4vw,2rem); bottom:clamp(1.3rem,3vw,2.5rem); display:flex; align-items:center; gap:1.1rem; }
.bs-count{ font: 800 1.5rem/1 var(--serif); letter-spacing:.02em; } .bs-count span{ opacity:.6; font-size:1rem; }
.bs-arrows{ display:flex; gap:.5rem; }
.bs-arrows button{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color:#fff; cursor:pointer;
  display:grid; place-items:center; backdrop-filter: blur(8px); transition: background .25s, transform .25s var(--ease-out), border-color .25s; }
.bs-arrows button:hover{ background: var(--red); border-color: var(--red); transform: scale(1.08); }
.bs-arrows svg{ width:18px; height:18px; }
.bs-progress{ position:absolute; z-index:6; left:0; right:0; bottom:0; height:4px; background: rgba(255,255,255,.2); }
.bs-progress i{ display:block; height:100%; background: linear-gradient(90deg,#fff,#CB1416); transform-origin:left; animation: bsProg var(--dur,6500ms) linear forwards; }
@keyframes bsProg{ from{ transform: scaleX(0); } }
.bigslider.is-paused .bs-progress i, .bigslider.is-paused .bs-thumbs button.is-active::after{ animation-play-state: paused; }
.bs-logo{ position:absolute; z-index:5; left:clamp(1rem,2.4vw,2rem); top:clamp(1rem,2.4vw,1.8rem); width:54px; opacity:.95; animation: floaty 7s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }

.bs-thumbs{ display:grid; grid-auto-flow:column; grid-auto-columns: minmax(168px,1fr); gap:.75rem; margin-top:1rem; overflow-x:auto; padding:.3rem .2rem .7rem; scroll-snap-type:x proximity; scrollbar-width:thin; }
.bs-thumbs button{ position:relative; scroll-snap-align:start; display:flex; align-items:center; gap:.65rem; text-align:left; cursor:pointer; overflow:hidden;
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color:#fff; border-radius:14px; padding:.45rem .7rem .45rem .45rem;
  opacity:.72; transition: opacity .3s, transform .35s var(--ease-out), background .3s, border-color .3s; }
.bs-thumbs button:hover{ opacity:1; transform: translateY(-3px); }
.bs-thumbs button img{ width:66px; height:46px; object-fit:cover; border-radius:9px; flex:none; }
.bs-thumbs button span{ font: 700 .78rem/1.25 var(--sans); }
.bs-thumbs button.is-active{ opacity:1; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.bs-thumbs button.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: var(--red); transform-origin:left; animation: bsProg var(--dur,6500ms) linear forwards; }
@media (max-width:700px){ .bs-shade{ background: linear-gradient(180deg, rgba(0,26,53,.05) 12%, rgba(0,26,53,.93) 78%); }
  .bs-cap h3{ font-size:1.45rem; } .bs-cap p{ display:none; }
  .bs-stage{ aspect-ratio: 4/4.6; border-radius:20px; } .bs-cap{ max-width:92%; bottom:4.6rem; } .bs-ui{ left:1rem; right:1rem; justify-content:space-between; bottom:1rem; } }

/* ---------------------------------------------------------------
   7. Creative photo collage (About) — curtain reveal + parallax
   --------------------------------------------------------------- */
.mosaic-wrap{ background: linear-gradient(180deg, #fff 0%, var(--paper-soft) 100%); }
.mosaic{ display:grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 64px; gap:14px; }
.tile{ position:relative; margin:0; overflow:hidden; border-radius:20px; cursor:zoom-in; background: var(--navy-deep); isolation:isolate;
  box-shadow: 0 18px 40px -22px rgba(0,48,92,.5); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.tile:hover{ transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 60px -24px rgba(0,48,92,.6); z-index:3; }
.tile .pimg{ position:absolute; inset:-6% 0; transform: translate3d(0,var(--py,0px),0); }
.tile img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-out); }
.tile:hover img{ transform: scale(1.09); }
.tile::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, transparent 45%, rgba(0,26,53,.82) 100%); opacity:.85; transition: opacity .4s; }
.tile figcaption{ position:absolute; z-index:3; left:1rem; right:1rem; bottom:.95rem; color:#fff; transform: translateY(6px); transition: transform .5s var(--ease-out); }
.tile:hover figcaption{ transform:none; }
.tile figcaption span{ display:inline-block; background: var(--red); font: 700 .62rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.32rem .6rem; border-radius:99px; }
.tile figcaption b{ display:block; margin-top:.4rem; font: 800 1.05rem/1.2 var(--serif); text-shadow: 0 2px 12px rgba(0,0,0,.4); }
/* curtain reveal: a brand-colour panel wipes off the photo */
.js .tile[data-reveal]{ opacity:1; transform:none; }
.js .tile[data-reveal]::after{ content:""; position:absolute; inset:0; z-index:4; background: var(--blue); transform-origin:right; transition: transform 1.15s var(--ease-io); transition-delay: var(--d,0s); }
.js .tile.alt[data-reveal]::after{ background: var(--red); }
.js .tile[data-reveal].is-in::after{ transform: scaleX(0); }
.js .tile[data-reveal] .pimg{ transform: translate3d(0,var(--py,0px),0) scale(1.25); transition: transform 1.6s var(--ease-out); transition-delay: var(--d,0s); }
.js .tile[data-reveal].is-in .pimg{ transform: translate3d(0,var(--py,0px),0) scale(1); }
/* layout */
.t-a{ grid-column: 1 / span 4;  grid-row: 1 / span 7; }
.t-b{ grid-column: 5 / span 8;  grid-row: 1 / span 4; }
.t-c{ grid-column: 5 / span 4;  grid-row: 5 / span 3; }
.t-d{ grid-column: 9 / span 4;  grid-row: 5 / span 3; }
.t-e{ grid-column: 1 / span 6;  grid-row: 8 / span 4; }
.t-f{ grid-column: 7 / span 6;  grid-row: 8 / span 4; }
.t-g{ grid-column: 1 / span 4;  grid-row: 12 / span 3; }
.t-h{ grid-column: 5 / span 4;  grid-row: 12 / span 3; }
.t-i{ grid-column: 9 / span 4;  grid-row: 12 / span 3; }
@media (max-width: 800px){
  .mosaic{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 120px; gap:10px; }
  .t-a{ grid-column:1/span 1; grid-row:span 3; } .t-b{ grid-column:2/span 1; grid-row:span 3; }
  .t-c,.t-d,.t-e,.t-f,.t-g,.t-h,.t-i{ grid-column:auto; grid-row:span 2; }
  .t-e,.t-f{ grid-column:1/span 2; grid-row:span 2; }
}

/* ---------------------------------------------------------------
   8. Lightbox
   --------------------------------------------------------------- */
.lb{ position:fixed; inset:0; z-index:4000; display:grid; place-items:center; padding:1.2rem; background: rgba(0,18,38,.94);
  backdrop-filter: blur(10px); opacity:0; visibility:hidden; transition: opacity .35s ease, visibility .35s; }
.lb.open{ opacity:1; visibility:visible; }
.lb figure{ margin:0; max-width:min(1180px,92vw); transform: scale(.94); transition: transform .5s var(--ease-out); }
.lb.open figure{ transform:none; }
.lb img{ max-height:76vh; width:auto; max-width:100%; border-radius:18px; box-shadow: 0 40px 90px -20px rgba(0,0,0,.8); margin-inline:auto; }
.lb figcaption{ color:#fff; text-align:center; margin-top:1rem; }
.lb figcaption span{ display:inline-block; background: var(--red); font: 700 .68rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.4rem .7rem; border-radius:99px; }
.lb figcaption b{ display:block; font: 800 1.3rem/1.2 var(--serif); margin-top:.5rem; }
.lb button{ position:absolute; border:0; cursor:pointer; color:#fff; background: rgba(255,255,255,.14); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; transition: background .2s, transform .25s var(--ease-out); }
.lb button:hover{ background: var(--red); transform: scale(1.08); }
.lb .lb-close{ top:1.1rem; right:1.1rem; } .lb .lb-prev{ left:1.1rem; top:50%; margin-top:-24px; } .lb .lb-next{ right:1.1rem; top:50%; margin-top:-24px; }
.lb svg{ width:20px; height:20px; }

/* ---------------------------------------------------------------
   9. Team — pyramid of tiers with portrait cards
   --------------------------------------------------------------- */
.tier{ position:relative; }
.tier-link{ width:2px; height:56px; margin:0 auto; background: linear-gradient(180deg, var(--blue), var(--red)); border-radius:2px; position:relative; transform-origin:top; }
.tier-link::after{ content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background: var(--red); box-shadow: 0 0 0 4px rgba(203,20,22,.16); }
.js .tier-link[data-reveal]{ transform: scaleY(0); opacity:1; transition: transform .9s var(--ease-out); }
.js .tier-link[data-reveal].is-in{ transform: scaleY(1); }

.tier-badge-container{ text-align:center; margin: 0 auto 1.6rem; border-bottom:0; padding-bottom:0; }
.tier-title-custom{ justify-content:center; flex-wrap:wrap; }

.tgrid{ display:grid; gap:1.5rem; justify-content:center; margin-inline:auto; }
.tgrid.g-lead { grid-template-columns: repeat(2, minmax(0, 330px)); }
.tgrid.g-three{ grid-template-columns: repeat(3, minmax(0, 285px)); }
.tgrid.g-four { grid-template-columns: repeat(4, minmax(0, 245px)); }
.tgrid.g-two  { grid-template-columns: repeat(2, minmax(0, 285px)); }
@media (max-width: 1000px){ .tgrid.g-four{ grid-template-columns: repeat(3, minmax(0,245px)); } }
@media (max-width: 760px){ .tgrid.g-three, .tgrid.g-four, .tgrid.g-lead, .tgrid.g-two{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; } }
@media (max-width: 350px){ .tgrid.g-three, .tgrid.g-four, .tgrid.g-lead, .tgrid.g-two{ grid-template-columns: 1fr; } }
@media (max-width: 560px){ .tcard .info{ padding:.8rem .7rem 1rem; } .tcard .name{ font-size:.9rem; } .tcard .desc{ font-size:.76rem; } .tcard .role{ font-size:.62rem; } .tier-title-custom{ font-size:1.2rem; } }

.tcard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; }
.tcard:hover{ transform: translateY(-9px); box-shadow: 0 30px 60px -28px rgba(0,48,92,.55); border-color: rgba(0,87,165,.35); }
.tcard .ph{ position:relative; aspect-ratio: 4/5; overflow:hidden; background: linear-gradient(160deg, #E6F0FA, #fff); }
.tcard .ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; transition: transform 1.1s var(--ease-out); }
.tcard:hover .ph img{ transform: scale(1.07); }
.tcard .ph::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background: linear-gradient(90deg, var(--blue), var(--red)); transform: scaleX(0); transform-origin:left; transition: transform .6s var(--ease-out); }
.tcard:hover .ph::after{ transform: scaleX(1); }
.tcard .info{ padding: 1.05rem 1.1rem 1.3rem; text-align:center; }
.tcard .name{ font-weight:800; color: var(--blue-dark); font-size:1.02rem; line-height:1.3; }
.tcard .role{ margin-top:.35rem; font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--red); }
.tcard .desc{ margin-top:.55rem; font-size:.82rem; line-height:1.5; color: var(--ink-soft); }
.tcard .cred{ display:inline-block; margin-top:.65rem; font-size:.7rem; font-weight:700; color: var(--blue); background: var(--blue-tint); padding:.25rem .65rem; border-radius:999px; }
.tcard.lg .name{ font-size:1.18rem; } .tcard.lg .role{ font-size:.76rem; } .tcard.lg .desc{ font-size:.86rem; }
.tcard.lg::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; z-index:2; background: linear-gradient(90deg, var(--blue), var(--red)); }

/* ---------------------------------------------------------------
   10. Reduced motion — keep everything, drop the movement
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .intro, .intro-red{ display:none !important; }
  *, *::before, *::after{ animation: none !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
  .js [data-reveal], .js .tile[data-reveal], .js .tier-link[data-reveal]{ opacity:1 !important; transform:none !important; }
  .js .tile[data-reveal]::after{ display:none; }
  .slider .slide img, .bs-slide img{ transform:none; }
}

/* ===========================================================
   11. Logo-colour headings · Get-in-Touch button · CTA bands
   =========================================================== */
h1, h2, h3, h4{ color: var(--blue); }
h1 .accent, .hero-copy h1 .accent, .team-hero .hero-copy h1 .accent{ color: var(--red); }
.hl{ color: var(--red); }
.svc-card h3, .icon-tile h4, .resource-card h3, .mv-card h3, .office-card h3, .contact-office h3{ color: var(--blue); }
.tier-title-custom{ color: var(--blue); }
.tcard .name{ color: var(--blue); }
.showcase .hl, .why-copy .hl, .cta-band .hl{ color: #ff9294; }

.nav-cta.btn-red, .mobile-nav .btn-red{
  background: linear-gradient(90deg, var(--blue), var(--red), var(--blue)); background-size: 200% 100%; background-position: 0 0;
  transition: background-position .7s var(--ease-out), transform .15s ease, box-shadow .15s ease; }
.nav-cta.btn-red:hover, .mobile-nav .btn-red:hover{
  background: linear-gradient(90deg, var(--blue), var(--red), var(--blue)); background-size: 200% 100%; background-position: 100% 0;
  box-shadow: 0 10px 26px -8px rgba(0,87,165,.55); }
.cta-band{ background: linear-gradient(110deg, var(--blue-dark) 0%, var(--blue) 46%, var(--red) 100%); }
.cta-band p{ color: rgba(255,255,255,.86); }
.tgrid.g-one{ grid-template-columns: minmax(0, 285px); }

/* ===========================================================
   12. Brand film — floating player on every page + home section
   =========================================================== */
html:not(.js) .film-fab{ display:none; }
.film-fab{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:1900; display:flex; align-items:center; gap:.75rem; cursor:pointer;
  padding:.4rem 1.05rem .4rem .4rem; border-radius:999px; border:1px solid var(--line); background:#fff; font-family: var(--sans);
  box-shadow: 0 18px 40px -14px rgba(0,48,92,.5), 0 0 0 1px rgba(0,87,165,.06);
  animation: fadeUp .8s var(--ease-out) calc(var(--intro-wait) + 1.3s) backwards;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), opacity .3s; }
.film-fab:hover{ transform: translateY(-4px); box-shadow: 0 26px 50px -14px rgba(0,48,92,.6); }
.film-fab-thumb{ position:relative; width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.film-fab-thumb img{ width:100%; height:100%; object-fit:cover; }
.film-play{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; background: rgba(203,20,22,.86); transition: background .3s; }
.film-play svg{ width:20px; height:20px; margin-left:2px; }
.film-fab:hover .film-play{ background: rgba(0,87,165,.9); }
.film-fab::before{ content:""; position:absolute; left:.4rem; top:.4rem; width:52px; height:52px; border-radius:50%; z-index:-1; border:2px solid var(--red); animation: filmRing 2.6s ease-out infinite; }
@keyframes filmRing{ from{ transform: scale(1); opacity:.7; } to{ transform: scale(1.75); opacity:0; } }
.film-fab-text{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.film-fab-text b{ font-size:.86rem; font-weight:800; color: var(--blue); }
.film-fab-text small{ font-size:.7rem; color: var(--ink-faint); font-weight:600; }
.film-eq{ display:flex; align-items:flex-end; gap:2px; height:16px; }
.film-eq i{ width:3px; border-radius:2px; background: linear-gradient(180deg, var(--red), var(--blue)); animation: eq 1.05s ease-in-out infinite; }
.film-eq i:nth-child(1){ height:40%; animation-delay:-.2s; } .film-eq i:nth-child(2){ height:90%; animation-delay:-.5s; }
.film-eq i:nth-child(3){ height:60%; animation-delay:-.8s; } .film-eq i:nth-child(4){ height:75%; animation-delay:-.35s; }
@keyframes eq{ 0%,100%{ transform: scaleY(.35); } 50%{ transform: scaleY(1); } }
.film-eq i{ transform-origin: bottom; }
body.film-open .film-fab{ opacity:0; pointer-events:none; }
@media (max-width:560px){ .film-fab{ padding:.3rem; right:.8rem; bottom:.8rem; } .film-fab-text, .film-eq{ display:none; } .film-fab::before{ left:.3rem; top:.3rem; } }

.film-modal{ position:fixed; inset:0; z-index:4100; display:grid; place-items:center; padding:1.2rem; background: rgba(0,18,38,.94);
  backdrop-filter: blur(10px); opacity:0; transition: opacity .35s ease; }
.film-modal[hidden]{ display:none; }
.film-modal.open{ opacity:1; }
.film-box{ position:relative; width:min(1100px, 94vw); aspect-ratio:16/9; max-height:86vh; background:#000; border-radius:20px; overflow:hidden;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); transform: scale(.94); transition: transform .5s var(--ease-out); }
.film-modal.open .film-box{ transform:none; }
.film-box::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:3; background: linear-gradient(90deg, var(--blue), var(--red)); }
.film-box video{ width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.film-close{ position:absolute; top:.8rem; right:.8rem; z-index:4; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer; color:#fff;
  background: rgba(0,18,38,.6); display:grid; place-items:center; transition: background .2s, transform .25s var(--ease-out); }
.film-close:hover{ background: var(--red); transform: scale(1.08); }
.film-close svg{ width:20px; height:20px; }

.film-section{ background: linear-gradient(180deg, #fff, var(--paper-soft)); }
.film-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.film-copy p{ margin-top:1rem; color: var(--ink-soft); max-width:42ch; }
.film-copy .btn{ margin-top:1.6rem; }
.film-poster{ position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer; border-radius:26px; overflow:hidden; aspect-ratio:16/9; background: var(--navy-deep);
  box-shadow: 0 34px 70px -30px rgba(0,48,92,.65), 14px 14px 0 -2px var(--red); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.film-poster:hover{ transform: translateY(-6px); box-shadow: 0 44px 80px -30px rgba(0,48,92,.7), 18px 18px 0 -2px var(--red); }
.film-poster img{ width:100%; height:100%; object-fit:cover; transition: transform 1.4s var(--ease-out); }
.film-poster:hover img{ transform: scale(1.06); }
.film-poster::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,26,53,.05), rgba(0,26,53,.55)); }
.film-poster-play{ position:absolute; z-index:2; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color: var(--red); box-shadow: 0 16px 40px -8px rgba(0,0,0,.5); transition: transform .4s var(--ease-out), background .3s, color .3s; }
.film-poster-play::before{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #fff; animation: filmRing 2.4s ease-out infinite; }
.film-poster-play svg{ width:34px; height:34px; margin-left:4px; }
.film-poster:hover .film-poster-play{ transform: scale(1.1); background: var(--red); color:#fff; }
.film-poster-tag{ position:absolute; z-index:2; left:1.1rem; bottom:1rem; background: var(--blue); color:#fff; font: 700 .72rem/1 var(--sans); letter-spacing:.06em; padding:.5rem .8rem; border-radius:999px; }
@media (max-width:860px){ .film-grid{ grid-template-columns:1fr; } .film-poster{ box-shadow: 0 30px 60px -30px rgba(0,48,92,.65), 10px 10px 0 -2px var(--red); } }
@media (prefers-reduced-motion: reduce){ .film-fab::before, .film-poster-play::before, .film-eq i{ animation:none !important; } }

/* Show the whole photo (no cropping) in a slider that needs it, e.g. the team group photo */
.slider--contain .slide img{ object-fit: contain; background: var(--navy-deep); }
.slider--contain .slide.is-active img{ animation: none; transform: none; }