/* Layout: full-screen navy hero with the logo, then sections alternating white and navy. One deliberate light look, matched to the brand navy of the logo. */
/* Essential Sans (Jen Wagner Co, licensed): the body font across the site. Files in fonts/. */
@font-face{font-family:"Essential Sans";src:url(../fonts/essential-sans-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Essential Sans";src:url(../fonts/essential-sans-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Essential Sans";src:url(../fonts/essential-sans-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Essential Sans";src:url(../fonts/essential-sans-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Essential Sans";src:url(../fonts/essential-sans-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --white:#FDFDFC; --mist:#F1F3F5; --ink:#1C2228; --soft:#59616A; --rule:#DDE1E5;
  --navy:#243B53; --navy-deep:#1B2E42; --on-navy:#F4F6F8; --on-navy-soft:#BCC7D2; --navy-rule:#3A5068;
  --display:"EB Garamond",Garamond,"Times New Roman",serif;
  --body:"Essential Sans","Helvetica Neue",Arial,sans-serif;
  --max:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--white);color:var(--ink);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.15;text-wrap:balance}
em{font-style:italic}
p{margin:0}
img{display:block;max-width:100%}
.caps{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}

/* Section colours */
.light{background:var(--white);color:var(--ink)}
.dark{background:var(--navy);color:var(--on-navy)}
.light .soft{color:var(--soft)}
.dark .soft{color:var(--on-navy-soft)}
section{padding-block:clamp(84px,11vw,150px)}

/* Buttons */
.btn{display:inline-block;font:500 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:17px 30px;border:1px solid currentColor;background:transparent;cursor:pointer;white-space:nowrap;transition:background .35s cubic-bezier(.16,1,.3,1),color .35s,border-color .35s,transform .15s}
.btn:active{transform:scale(.98)}
.light .btn{color:var(--navy);border-color:var(--navy)}
.light .btn:hover{background:var(--navy);color:var(--on-navy)}
.light .btn.solid{background:var(--navy);color:var(--on-navy)}
.light .btn.solid:hover{background:var(--navy-deep)}
.dark .btn{color:var(--on-navy);border-color:var(--on-navy)}
.dark .btn:hover{background:var(--on-navy);color:var(--navy)}
.dark .btn.solid{background:var(--on-navy);color:var(--navy)}
.dark .btn.solid:hover{background:transparent;color:var(--on-navy)}

/* Nav: centred, sits over the hero, turns white once you scroll past it */
.nav{position:fixed;left:0;right:0;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);color:var(--on-navy);transition:background .4s,color .4s,box-shadow .4s}
.nav ul{list-style:none;margin:0 auto;padding:22px 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(18px,3.4vw,44px)}
.nav a{text-decoration:none;opacity:.85;transition:opacity .25s}
.nav a:hover{opacity:1}
.nav a.enq{opacity:1;border:1px solid currentColor;padding:9px 16px;margin-top:-10px}
.nav.solid{background:color-mix(in srgb,var(--white) 96%,transparent);color:var(--navy);box-shadow:0 1px 0 var(--rule);backdrop-filter:blur(8px)}
@media (max-width:560px){.nav ul{padding:16px 12px;gap:8px 16px}.nav .caps{font-size:11px;letter-spacing:.14em}.nav a.enq{padding:7px 12px;margin-top:-7px}}

/* Hero: full screen, logo centred. Replace .hero-bg with a looping video or Vimeo background embed. */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--navy);color:var(--on-navy);text-align:center;padding:120px 16px 88px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 40%,#34506C 0%,transparent 70%),linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%)}
.hero-inner{position:relative;display:grid;justify-items:center;gap:clamp(36px,5vw,56px)}
/* Logo intro, all on the one image (no extra wrappers):
   1) logo-zoom: quick pop from nothing to full size with a strong ease-out (uses `transform`)
   2) logo-drift: a slow, steady zoom running the whole time (uses the separate `scale` property, so the two add together
      without fighting), plus the fade in at the start and the fade out after 4 seconds */
.hero-logo{width:min(320px,60vw,40vh);height:auto;transform-origin:50% 50%;
  animation:logo-zoom 1.2s cubic-bezier(.16,1,.3,1) .25s both, logo-drift 8s linear .25s both}
@keyframes logo-zoom{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes logo-drift{0%{opacity:0;scale:1}5%{opacity:1}87%{opacity:1}100%{opacity:0;scale:1.26}}
@media (prefers-reduced-motion:reduce){.hero-logo{animation:none}}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* Intro */
.intro{text-align:center}
.intro h2{font-size:clamp(34px,4.4vw,58px);max-width:22ch;margin:0 auto}
.intro p{max-width:56ch;margin:28px auto 0}
/* Clip under the intro heading: wide cinematic frame, then the longer description */
/* Intro section, centred: a wide heading (one sentence per line), then a smaller clip, then one centred paragraph
   spread to the same width as the clip. */
.intro-grid{max-width:calc(1120px + 2 * clamp(16px,4vw,48px));text-align:center}
.intro .intro-head h2{margin:0 auto;max-width:none;font-size:clamp(30px,4vw,54px);line-height:1.15;padding-bottom:.05em;text-wrap:balance}
.intro .intro-head h2 span{display:inline-block}
.intro .intro-head .intro-kicker{justify-content:center;margin:0 0 22px}
.intro-clip,.intro-copy{max-width:760px;margin-inline:auto}
.intro-clip{margin-top:clamp(40px,5vw,64px);margin-bottom:0}
.intro-clip video{display:block;width:100%;height:auto;aspect-ratio:1600/752;object-fit:cover;background:var(--navy-deep)}
.intro .intro-copy{max-width:760px;margin-top:clamp(28px,3.5vw,40px);margin-bottom:0;text-align:center;font-size:16px;line-height:1.6;color:#2A323B}

/* About */
.about .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.about figure{grid-column:1/7;margin:0}
.about img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.about-copy{grid-column:8/13;display:grid;gap:20px;min-width:0;max-width:56ch}
.about h2{font-size:clamp(42px,5vw,68px)}
.about .btn{justify-self:start;margin-top:10px}
@media (max-width:820px){.about figure,.about-copy{grid-column:1/-1}.about figure{max-width:560px}}

/* Films */
.center-head{text-align:center;margin-bottom:clamp(44px,6vw,72px);display:grid;gap:16px;justify-items:center}
.center-head h2{font-size:clamp(38px,4.6vw,60px)}
.films{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(48px,6vw,80px) 24px}
.film{text-decoration:none;display:grid;gap:14px;align-content:start;min-width:0}
.frame{position:relative;overflow:hidden;background:var(--mist)}
.frame::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 60% 35%,#FFFFFF,transparent 70%),linear-gradient(180deg,#E3E7EB,#CDD4DB);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.film:hover .frame::before{transform:scale(1.03)}
.frame .slot{position:absolute;left:16px;bottom:12px;font-size:12px;color:var(--soft)}
.w{aspect-ratio:2.39/1}.h{aspect-ratio:16/9}.p{aspect-ratio:4/5}
.film h3{font-size:clamp(26px,2.6vw,34px)}
.film-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px}
.link{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px;justify-self:start;color:var(--navy)}
.f1{grid-column:1/-1}.f2{grid-column:1/8}.f3{grid-column:9/13}
@media (max-width:767px){.films>*{grid-column:1/-1!important}}

/* Reviews */
.reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,6vw,80px) clamp(32px,5vw,72px)}
.review{display:grid;gap:22px;align-content:start;padding-top:28px;border-top:1px solid var(--navy-rule)}
.review blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(22px,2.2vw,28px);line-height:1.4}
.review cite{font-style:normal;color:var(--on-navy-soft)}
@media (max-width:767px){.reviews-grid{grid-template-columns:1fr}}

/* Collections */
.group-label{display:flex;align-items:center;gap:18px;margin-bottom:28px;color:var(--soft)}
.group-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.film-pkgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:clamp(56px,7vw,88px)}
.pkg{border:1px solid var(--rule);padding:clamp(28px,3.4vw,44px);display:grid;gap:18px;align-content:start}
.pkg h3{font-size:clamp(32px,3vw,40px)}
.price{font-family:var(--display);font-size:clamp(30px,3vw,38px);color:var(--navy);line-height:1}
.pkg .tagline{font-family:var(--display);font-style:italic;font-size:20px;color:var(--soft)}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.incl li{padding-left:20px;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:currentColor}
.pkg .note{font-size:14px;color:var(--soft)}
.pkg .btn{justify-self:start;margin-top:8px}
@media (max-width:820px){.film-pkgs{grid-template-columns:1fr}}

.combo{background:var(--navy);color:var(--on-navy);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);padding:clamp(36px,5.5vw,80px);position:relative}
.badge{position:absolute;top:0;right:clamp(24px,4vw,56px);transform:translateY(-50%);background:var(--on-navy);color:var(--navy);padding:10px 18px;border:1px solid var(--navy)}
.combo-left{display:grid;gap:20px;align-content:start}
.combo h3{font-size:clamp(44px,5.4vw,76px);line-height:1.05}
.combo .price{color:var(--on-navy);font-size:clamp(44px,5vw,64px)}
.combo .soft{color:var(--on-navy-soft)}
.combo .incl{font-size:16px;gap:14px}
.combo-right{display:grid;gap:26px;align-content:start}
.addons{border-top:1px solid var(--navy-rule);padding-top:22px;display:grid;gap:8px}
.addons p{font-size:15px}
.combo .btn{color:var(--navy);background:var(--on-navy);border-color:var(--on-navy);justify-self:start}
.combo .btn:hover{background:transparent;color:var(--on-navy)}
@media (max-width:860px){.combo{grid-template-columns:1fr}}

/* Destination band */
.dest{text-align:center}
.dest .wrap{display:grid;justify-items:center;gap:22px}
.dest h2{font-size:clamp(38px,5vw,68px);max-width:18ch}
.dest p{max-width:52ch}

/* Questions + enquiry */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.faq{grid-column:1/6;min-width:0}
.enquire{grid-column:7/13;min-width:0}
.faq h2,.enquire h2{font-size:clamp(36px,4vw,52px);margin-bottom:24px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;font-family:var(--display);font-size:22px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-size:20px;color:var(--navy);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:22px;color:var(--soft);max-width:56ch}
@media (max-width:900px){.faq,.enquire{grid-column:1/-1}.enquire{margin-top:48px}}
.direct{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:32px;color:var(--soft);font-size:15px}
.direct strong{font-weight:500;color:var(--ink);user-select:all}
.copy{font:500 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid var(--rule);color:var(--navy);padding:8px 12px;cursor:pointer}
.copy:hover{border-color:var(--navy)}

form{display:grid;gap:26px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.field{display:grid;gap:8px;min-width:0}
.field label{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
input,select,textarea{font:400 16px/1.5 var(--body);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--soft);padding:8px 0;border-radius:0;width:100%;min-width:0}
input::placeholder,textarea::placeholder{color:var(--soft);opacity:1}
input:focus,select:focus,textarea:focus{outline:none;border-bottom:2px solid var(--navy);padding-bottom:7px}
textarea{resize:vertical;min-height:110px}
.help{font-size:13px;color:var(--soft)}
.err{font-size:13px;color:var(--navy);font-weight:600}
.notice{border:1px solid var(--navy);padding:18px 20px;display:grid;gap:4px;font-size:15px}
.notice strong{font-family:var(--display);font-weight:500;font-size:22px}

/* Footer */
.site-footer{padding-block:64px 28px}
.foot-top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px 48px;padding-bottom:44px;border-bottom:1px solid var(--navy-rule)}
.foot-logo img{width:150px;height:auto}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 30px}
.foot-nav a,.foot-contact a,.foot-legal a{text-decoration:none;color:var(--on-navy)}
.foot-nav a:hover,.foot-contact a:hover,.foot-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-contact{display:grid;gap:4px;justify-items:end;font-size:14px;color:var(--on-navy-soft)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-top:22px;font-size:13px;color:var(--on-navy-soft)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-legal a{color:var(--on-navy-soft)}
.foot-bottom small{font-size:13px}
@media (max-width:820px){.foot-top{grid-template-columns:1fr;justify-items:center;text-align:center}.foot-contact{justify-items:center}.foot-bottom{justify-content:center;text-align:center}.foot-legal{justify-content:center}}

/* Legal pages */
.legal-page{padding-block:clamp(130px,14vw,170px) clamp(72px,9vw,120px)}
.legal{max-width:72ch;margin:0 auto}
.legal h1{font-size:clamp(40px,5vw,62px);margin-bottom:10px}
.legal .updated{color:var(--soft);font-size:14px;margin-bottom:40px}
.legal h2{font-size:clamp(26px,2.6vw,32px);margin:44px 0 12px}
.legal p,.legal li{color:var(--ink);font-size:16px}
.legal p+p{margin-top:14px}
.legal ul{margin:12px 0 0;padding-left:22px;display:grid;gap:8px}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.legal .note{margin-top:48px;padding:18px 20px;border:1px solid var(--rule);font-size:14px;color:var(--soft)}

/* Scroll reveal: fades up as each block enters. Only hidden once the script confirms it can reveal them. */
.has-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity 1.3s cubic-bezier(.25,.46,.45,.94),transform 1.5s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.has-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.has-reveal .reveal{opacity:1;transform:none;transition:none}}

/* Hero showreel */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero-video.ready{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,46,66,.55) 0%,rgba(27,46,66,.35) 45%,rgba(27,46,66,.7) 100%)}
.play::before{content:"";display:inline-block;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-right:12px;vertical-align:-1px}

/* Film cards: cover image or first frame of the film, plays a silent preview on hover */
.frame .poster,.frame .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.film:hover .poster,.film:hover .thumb{transform:scale(1.03)}
.frame.has-media .slot{display:none}
.play-icon{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(255,255,255,.85);background:rgba(27,46,66,.35);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.play-icon::after{content:"";position:absolute;left:26px;top:22px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.frame.has-media .play-icon{opacity:.9}
.film:hover .play-icon{opacity:1}

/* Pop-up player */
.lightbox{border:0;padding:0;margin:auto;width:min(1200px,94vw);max-height:92vh;background:transparent;color:var(--on-navy);overflow:visible}
.lightbox::backdrop{background:rgba(15,25,36,.92)}
.lb-stage{position:relative;width:100%;aspect-ratio:16/9;background:#0E1823}
.lb-stage video,.lb-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0E1823}
.lb-missing{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-size:15px;color:var(--on-navy-soft)}
.lb-missing strong{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:var(--on-navy);margin-bottom:6px}
.lb-title{margin-top:16px;color:var(--on-navy-soft)}
.lb-close{position:absolute;top:-44px;right:0;background:none;border:0;color:var(--on-navy);font:500 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:10px 0}

.faq details p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.faq details p a:hover{text-decoration-thickness:2px}

/* Featured photos (home) */
.photos-feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.photos-feature a{display:block;overflow:hidden;position:relative;background:var(--navy-deep)}
.photos-feature img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.photos-feature a:hover img{transform:scale(1.03)}
.pf1{grid-column:1/9;grid-row:span 2;aspect-ratio:3/2}
.pf2,.pf3{grid-column:9/13}
.pf4,.pf5,.pf6{grid-column:span 4;aspect-ratio:3/2}
.see-more{text-align:center;margin-top:clamp(44px,5vw,64px)}
@media (max-width:767px){.pf1,.pf2,.pf3{grid-column:1/-1;grid-row:auto;aspect-ratio:3/2}.pf4,.pf5,.pf6{grid-column:span 6}.pf6{grid-column:1/-1}}

/* Light reviews variant */
.mist{background:var(--mist);color:var(--ink)}
.mist .soft{color:var(--soft)}
.mist .review{border-top-color:var(--rule)}
.mist .review cite{color:var(--soft)}

/* Photos page */
.team-hero{padding-block:clamp(130px,14vw,170px) clamp(84px,10vw,130px)}
.team-hero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.duo{grid-column:1/7;margin:0}
.duo img,.duo .duo-slot{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.duo-slot{display:grid;place-items:center;text-align:center;padding:24px;border:1px dashed var(--navy-rule);color:var(--on-navy-soft);font-size:14px}
.duo-copy{grid-column:8/13;display:grid;gap:18px;min-width:0;max-width:56ch}
.duo-copy h1{font-size:clamp(40px,4.8vw,64px);line-height:1.1}
.duo-copy .lead{font-family:var(--display);font-style:italic;font-size:clamp(21px,2vw,25px);line-height:1.4;color:var(--on-navy)}
.duo-copy a:not(.btn){color:var(--on-navy);text-underline-offset:3px}
.duo-copy .btn{justify-self:start;margin-top:8px}
@media (max-width:860px){.duo,.duo-copy{grid-column:1/-1}}
.collage{columns:3 280px;column-gap:16px}
.collage a{display:block;margin-bottom:16px;break-inside:avoid;overflow:hidden;background:var(--mist)}
.collage img{width:100%;height:auto;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.collage a:hover img{transform:scale(1.03)}

/* Photo viewer */
.lightbox.photo-mode .lb-stage{aspect-ratio:auto;background:transparent;display:grid;place-items:center;min-height:40vh}
.lightbox.photo-mode .lb-stage img{max-width:100%;max-height:80vh;width:auto;height:auto;display:block}
.lb-prev,.lb-next{display:none;position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.6);background:rgba(15,25,36,.5);color:#fff;font:400 22px/1 var(--body);cursor:pointer}
.lightbox.photo-mode .lb-prev,.lightbox.photo-mode .lb-next{display:block}
.lb-prev{left:-64px}.lb-next{right:-64px}
@media (max-width:1100px){.lb-prev{left:8px}.lb-next{right:8px}}

/* Venues rolling banner */
.venues{padding-block:56px 60px;border-bottom:1px solid var(--rule);overflow:hidden}
.venues-title{text-align:center;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,36px);line-height:1.2;color:var(--ink);margin:0 0 30px;letter-spacing:0;text-transform:none}
.venues-title em{font-style:italic}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;list-style:none;margin:0;padding:0;animation:marquee 70s linear infinite}
.venue{flex:none;display:flex;align-items:center;height:80px;padding-inline:clamp(26px,3.2vw,48px)}
.venue img{width:auto;max-width:none;object-fit:contain;opacity:.9}
.venue span{font-family:var(--display);font-size:24px;color:var(--navy);white-space:nowrap;opacity:.85}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:20px}.marquee-track li[aria-hidden]{display:none}.marquee{mask-image:none;-webkit-mask-image:none}}


.mist .btn{color:var(--navy);border-color:var(--navy)}
.mist .btn:hover{background:var(--navy);color:var(--on-navy)}

/* How it works: vertical story. A line fills as you scroll, each stage's icon lights up and its photo wipes in. */
.flow{padding-block:clamp(84px,10vw,140px);--p:0}
.flow-steps{position:relative;list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;gap:clamp(56px,7vw,96px)}
.flow-line{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--navy-rule)}
.flow-fill{position:absolute;inset:0;background:var(--on-navy);transform-origin:top;transform:scaleY(var(--p))}
.step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(56px,8vw,112px);align-items:center}
.step-node{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;background:var(--navy);border:1px solid var(--navy-rule);color:var(--on-navy-soft);font-size:24px;z-index:1;transition:background .5s,color .5s,border-color .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.step.on .step-node{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy);transform:scale(1.08)}
.step-img{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--navy-deep);clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.65,0,.35,1)}
.step-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2s cubic-bezier(.22,.61,.36,1)}
.step.on .step-img{clip-path:inset(0 0 0 0)}
.step.on .step-img img{transform:scale(1)}
.step-copy{opacity:0;transform:translateY(20px);transition:opacity 1.2s .25s cubic-bezier(.25,.46,.45,.94),transform 1.4s .25s cubic-bezier(.22,.61,.36,1)}
.step.on .step-copy{opacity:1;transform:none}
.step-copy h3{font-size:clamp(28px,2.8vw,38px);margin-bottom:12px}
.step-copy p{color:var(--on-navy-soft);max-width:40ch}
.step-right .step-img{order:2}
.step-right .step-copy{order:1;text-align:right;justify-self:end}
.step-right .step-copy p{margin-left:auto}
/* Post-production: the photo starts flat and ungraded, then the grade comes in */
.step-post-production .step-img img{filter:grayscale(.85) contrast(.75) brightness(1.08);transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 2.2s .6s ease}
.step.on.step-post-production .step-img img{filter:none}
/* Premiere: play button over the film */
.step-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:var(--navy);background:rgba(244,246,248,.92);opacity:0;transform:scale(.6);transition:opacity .6s 1s,transform .6s 1s cubic-bezier(.34,1.56,.64,1)}
.step.on .step-play{opacity:1;transform:none}
@media (max-width:760px){
  .flow-line{left:27px}
  .step{grid-template-columns:1fr;gap:18px;padding-left:76px}
  .step-node{left:0;top:0;margin:0}
  .step-right .step-img{order:0}
  .step-right .step-copy{order:1;text-align:left;justify-self:start}
  .step-right .step-copy p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.step-img{clip-path:none}.step-img img{transform:none;filter:none!important}.step-copy,.step-play{opacity:1;transform:none}.flow-fill{transform:none}}

.combo{margin-bottom:clamp(56px,7vw,88px)}
.photo-pkgs{margin-bottom:0}

/* Films page */
.film-list{display:grid;gap:clamp(64px,8vw,110px)}
.film-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.film-row-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.film-row-flip .yt{order:2}
.film-row-flip .film-row-copy{justify-self:end}
.film-row-copy{display:grid;gap:14px;max-width:44ch}
.film-row-copy h2{font-size:clamp(34px,3.6vw,48px)}
.film-row-copy .caps{font-size:11px}
.film-row-copy .text-link{justify-self:start;margin-top:6px}
.yt{position:relative;aspect-ratio:16/9;background:var(--navy-deep);overflow:hidden}
.yt-btn{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:none}
.yt-btn img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.yt-btn:hover img{transform:scale(1.03)}
.yt-btn .play-icon{opacity:.95}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:860px){.film-row,.film-row-flip{grid-template-columns:1fr}.film-row-flip .yt{order:0}.film-row-flip .film-row-copy{justify-self:start}}

.duo-portrait{grid-column:2/6;justify-self:center;width:100%;max-width:400px}
.duo-portrait img,.duo-portrait .duo-slot{aspect-ratio:2/3}
@media (max-width:860px){.duo-portrait{grid-column:1/-1;max-width:340px}}
.film-row+.film-row{border-top:1px solid var(--rule);padding-top:clamp(64px,8vw,110px)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.6;cursor:default}

/* Hero showreel from YouTube: sized to cover the hero like a background, no controls, fades in once playing */
.hero-yt{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 2s ease}
.hero-yt.ready{opacity:1}
.hero-yt iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78svh);height:max(100%,56.25vw);transform:translate(-50%,-50%) scale(1.18);border:0}

.foot-social{display:flex;gap:14px;margin-top:6px}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--navy-rule);border-radius:50%;color:var(--on-navy);font-size:19px;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.foot-social a:hover{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy);text-decoration:none}
@media (max-width:820px){.foot-nav{justify-content:center}.foot-social{justify-content:center}}

.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}

/* DV mark, top left of the header: white over the hero, navy once the header fills (follows the nav text colour) */
.nav-mark{position:absolute;left:clamp(16px,3vw,40px);top:calc(env(safe-area-inset-top,0px) + 13px);width:28px;height:34px;background:currentColor;-webkit-mask:url(../images/dv-mark.png) center/contain no-repeat;mask:url(../images/dv-mark.png) center/contain no-repeat;opacity:.95;transition:opacity .25s}
.nav-mark:hover{opacity:1}
@media (max-width:760px){.nav ul{padding-left:60px;padding-right:12px}.nav-mark{width:24px;height:30px;top:calc(env(safe-area-inset-top,0px) + 11px)}}

/* Instagram, top right of the header: same colour behaviour as the DV mark */
.nav-ig{position:absolute;right:clamp(16px,3vw,40px);top:calc(env(safe-area-inset-top,0px) + 13px);width:34px;height:34px;display:grid;place-items:center;font-size:24px;color:inherit;text-decoration:none;opacity:.9;transition:opacity .25s,transform .25s}
.nav-ig:hover{opacity:1;transform:scale(1.08)}
@media (max-width:760px){.nav ul{padding-right:60px}.nav-ig{width:30px;height:30px;font-size:21px;top:calc(env(safe-area-inset-top,0px) + 11px)}}

/* Photos page: two prints taped up side by side */
.snaps{grid-column:1/7;margin:0;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;padding:28px 10px 40px}
.snap{position:relative;background:#FBFAF6;padding:12px 12px 52px;box-shadow:0 22px 44px rgba(8,16,26,.45),0 2px 6px rgba(8,16,26,.25);transition:transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .7s}
.snap img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.snap figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:"Caveat","Bradley Hand","Segoe Print",cursive;font-size:clamp(22px,2.2vw,28px);line-height:1;color:#2A3440}
.snap-tony{grid-column:1/7;grid-row:1;margin-right:-8%;transform:rotate(-5deg);z-index:1}
.snap-lucas{grid-column:7/13;grid-row:1;margin-left:-8%;margin-top:clamp(56px,8vw,110px);transform:rotate(4deg);z-index:2}
.snap:hover{transform:rotate(0deg) scale(1.03);z-index:3;box-shadow:0 30px 60px rgba(8,16,26,.5),0 2px 6px rgba(8,16,26,.25)}
/* strips of masking tape */
.snap::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:30px;margin-left:-48px;background:rgba(236,228,206,.78);box-shadow:0 1px 3px rgba(0,0,0,.15);clip-path:polygon(2% 8%,10% 0,20% 6%,30% 0,40% 7%,50% 1%,60% 6%,70% 0,80% 7%,90% 1%,98% 6%,100% 94%,90% 100%,80% 93%,70% 100%,60% 94%,50% 100%,40% 93%,30% 100%,20% 94%,10% 100%,0 92%);z-index:2}
.snap-tony::before{top:6px;left:-26px;margin-left:0;transform:rotate(-42deg)}
.snap-lucas::before{top:6px;left:auto;right:-26px;margin-left:0;transform:rotate(42deg)}
@media (max-width:860px){.snaps{grid-column:1/-1;max-width:520px;margin-inline:auto;padding-bottom:20px}}
@media (prefers-reduced-motion:reduce){.snap,.snap:hover{transition:none}}
.team-hero{overflow-x:clip}

/* Google rating under the reviews */
.rating{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(48px,6vw,72px);text-align:center}
.stars{display:flex;gap:6px;font-size:22px;color:#F5B301}
.rating-text{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

/* ================= Education page ================= */
.edu-hero{padding-block:clamp(130px,14vw,170px) clamp(80px,10vw,130px);overflow:hidden}
.edu-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,90px);align-items:center}
.edu-hero-copy{display:grid;gap:22px;max-width:52ch}
.edu-hero h1{font-size:clamp(42px,5vw,70px);line-height:1.08}
.edu-hero .lead{font-size:17px}
.edu-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.pill{justify-self:start;display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--navy-rule);border-radius:999px;color:var(--on-navy)}
.pill-dot{width:7px;height:7px;border-radius:50%;background:#F5B301;box-shadow:0 0 0 0 rgba(245,179,1,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(245,179,1,0)}100%{box-shadow:0 0 0 0 rgba(245,179,1,0)}}
@media (max-width:900px){.edu-hero-grid{grid-template-columns:1fr}}

/* hero viewfinder */
.edu-hero-art{position:relative;padding:28px}
.vf{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-deep);box-shadow:0 30px 70px rgba(5,12,20,.55)}
.vf img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:vf-push 14s ease-in-out infinite alternate}
@keyframes vf-push{to{transform:scale(1.18) translate(-2%,-1%)}}
.vf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,28,.35),transparent 30%,transparent 70%,rgba(10,18,28,.45))}
.vf-c{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.9);z-index:2}
.vf-c.tl{top:14px;left:14px;border-right:0;border-bottom:0}.vf-c.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.vf-c.bl{bottom:14px;left:14px;border-right:0;border-top:0}.vf-c.br{bottom:14px;right:14px;border-left:0;border-top:0}
.vf-thirds{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.18) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) 66.66%,transparent calc(66.66% + .5px)),linear-gradient(0deg,transparent calc(33.33% - .5px),rgba(255,255,255,.18) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) 66.66%,transparent calc(66.66% + .5px))}
.vf-focus{position:absolute;z-index:2;left:46%;top:40%;width:64px;height:48px;border:1.5px solid #F5B301;animation:focus-hunt 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes focus-hunt{0%,18%{left:46%;top:40%;transform:scale(1)}22%{transform:scale(.8)}26%,48%{left:38%;top:32%;transform:scale(1)}52%{transform:scale(.8)}56%,80%{left:52%;top:44%;transform:scale(1)}84%{transform:scale(.8)}100%{left:46%;top:40%;transform:scale(1)}}
.vf-top,.vf-bot{position:absolute;z-index:2;left:48px;right:48px;font-size:11px;letter-spacing:.12em;color:#fff;display:flex;justify-content:space-between;align-items:center;font-variant-numeric:tabular-nums}
.vf-top{top:18px}.vf-bot{bottom:18px}
.vf-meter{display:inline-flex;gap:3px;align-items:flex-end;height:14px;margin-left:10px}
.vf-meter i{width:4px;height:100%;background:#7BD88F;transform-origin:bottom;animation:meter .5s ease-in-out infinite alternate}
.vf-meter i+i{animation-delay:.2s}
@keyframes meter{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--white);color:var(--navy);font-size:12px;font-weight:600;letter-spacing:.06em;box-shadow:0 14px 30px rgba(5,12,20,.35);animation:float 6s ease-in-out infinite}
.float-chip i{font-size:18px}
.chip-1{top:4px;right:0}.chip-2{bottom:10px;left:0;animation-delay:-2s}.chip-3{bottom:-6px;right:12%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-10px)}}

/* journey chapters */
.edu-journey .chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:center;padding-block:clamp(48px,6vw,80px)}
.edu-journey .chapter+.chapter{border-top:1px solid var(--rule)}
.chapter-flip .chapter-art{order:-1}
.chapter-copy{display:grid;gap:14px;max-width:48ch}
.chapter-copy h3{font-size:clamp(34px,3.6vw,48px)}
.ch-num{color:var(--navy);font-size:11px}
.ch-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.ch-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.ch-list i{font-size:20px;color:var(--navy);flex:none;margin-top:1px}
.chapter-art{background:var(--navy);padding:clamp(22px,3vw,36px);color:var(--on-navy);box-shadow:0 24px 50px rgba(20,34,50,.18)}
@media (max-width:900px){.edu-journey .chapter{grid-template-columns:1fr}.chapter-flip .chapter-art{order:0}}

/* part 1: plan */
.g-plan{display:grid;gap:10px}
.g-plan-title{font-family:var(--display);font-size:24px;margin-bottom:6px}
.g-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:rgba(255,255,255,.06);font-size:14px;opacity:.25;transform:translateX(-12px);transition:opacity .6s,transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i) * .35s)}
.g-time{font-variant-numeric:tabular-nums;color:var(--on-navy-soft);width:44px}
.g-check{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--on-navy-soft);position:relative;flex:none;transition:background .4s,border-color .4s;transition-delay:calc(var(--i) * .35s + .3s)}
.g-check::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s;transition-delay:calc(var(--i) * .35s + .4s)}
.on .g-row{opacity:1;transform:none}
.on .g-check{background:#F5B301;border-color:#F5B301}
.on .g-check::after{transform:rotate(45deg) scale(1)}
.g-kit{display:flex;gap:10px;margin-top:10px}
.g-kit span{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--navy-rule);font-size:20px;opacity:0;transform:translateY(10px) scale(.8);transition:opacity .5s,transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(1.9s + var(--i) * .12s)}
.on .g-kit span{opacity:1;transform:none}

/* part 2: audio + dials */
.g-audio{display:grid;gap:22px}
.g-audio-head{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-soft)}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#E5484D;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.g-wave{display:flex;align-items:center;gap:4px;height:90px}
.g-wave span{flex:1;height:100%;background:linear-gradient(180deg,#7BD88F,#F5B301);border-radius:2px;transform:scaleY(.12);transform-origin:center}
.on .g-wave span,.tile-sound.on .g-wave span{animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s)}
@keyframes wave{0%{transform:scaleY(.12)}40%{transform:scaleY(.75)}70%{transform:scaleY(.35)}100%{transform:scaleY(.95)}}
.g-dials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dial{position:relative;aspect-ratio:1;display:grid;place-items:center;align-content:center;text-align:center;gap:2px;--r:.8}
.dial b{font-weight:500;font-size:clamp(16px,1.6vw,20px);font-variant-numeric:tabular-nums}
.dial small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-soft)}
.dial-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#F5B301 calc(var(--dial,0) * 1turn),rgba(255,255,255,.1) 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%)}
.on .dial-ring{animation:dial-fill 1.8s cubic-bezier(.22,.61,.36,1) .3s forwards}
@property --dial{syntax:"<number>";inherits:false;initial-value:0}
@keyframes dial-fill{to{--dial:var(--r)}}

/* part 3: edit */
.g-edit{display:grid;gap:22px}
.g-wheels{display:flex;gap:16px;justify-content:center}
.wheel{width:clamp(64px,7vw,86px);aspect-ratio:1;border-radius:50%;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);position:relative;opacity:.9}
.wheel::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
.wheel::before{content:"";position:absolute;z-index:1;width:10px;height:10px;border-radius:50%;border:2px solid var(--navy);background:#fff;left:50%;top:50%;margin:-5px 0 0 -5px;animation:puck 5s ease-in-out infinite}
.wheel:nth-child(2)::before{animation-delay:-1.6s}.wheel:nth-child(3)::before{animation-delay:-3.2s}
@keyframes puck{0%,100%{transform:translate(0,0)}25%{transform:translate(9px,-6px)}50%{transform:translate(-4px,8px)}75%{transform:translate(-8px,-4px)}}
.g-tracks{position:relative;display:grid;gap:6px}
.trk{position:relative;height:28px;background:rgba(255,255,255,.05);padding-left:34px}
.trk em{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--on-navy-soft)}
.clip{position:absolute;top:3px;bottom:3px;left:calc(34px + (100% - 34px) * var(--x) / 100%);width:calc((100% - 34px) * var(--w) / 100%);border-radius:2px;opacity:0;transform:translateX(30px);transition:opacity .5s,transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i) * .18s)}
.clip{left:calc(34px + var(--x) * .92);width:calc(var(--w) * .92)}
.c-v{background:#6C8CB0}.c-a{background:#9FB7D2}.c-s{background:#7BD88F;opacity:0}.c-m{background:#F5B301}
.on .clip{opacity:.9;transform:none}
.g-playhead{position:absolute;top:-6px;bottom:-6px;left:34px;width:2px;background:#E5484D;opacity:0}
.on .g-playhead{opacity:1;animation:playhead 6s linear 1.6s infinite}
@keyframes playhead{from{left:34px}to{left:100%}}

/* assets bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.tile{background:var(--navy-deep);border:1px solid var(--navy-rule);display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.tile-copy{padding:22px 24px 26px;display:grid;gap:8px;align-content:start}
.tile-copy h3{font-size:26px;display:flex;align-items:center;gap:10px}
.tile-copy h3 i{font-size:22px;color:#F5B301}
.bento{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:stretch}
.tile-lut,.tile-sound,.tile-more{grid-column:auto}
.tile-sound{grid-template-rows:1fr auto}.tile-sound .sound-view{display:grid;align-items:center}
.tile-more{grid-template-rows:1fr;align-items:center;text-align:center}
.tile-more .tile-copy h3{justify-content:center}
.lut-view,.leak-view{position:relative;aspect-ratio:16/9;overflow:hidden}
.tile-leak .leak-view{aspect-ratio:4/3.3}
.lut-view img,.leak-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lut-flat{}
.lut-graded{clip-path:inset(0 0 0 var(--pos));animation:lut-wipe 7s ease-in-out infinite}
.lut-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.4);animation:lut-line 7s ease-in-out infinite;pointer-events:none}
@keyframes lut-wipe{0%,100%{clip-path:inset(0 0 0 72%)}50%{clip-path:inset(0 0 0 22%)}}
@keyframes lut-line{0%,100%{left:72%}50%{left:22%}}
.lut-tag{position:absolute;top:12px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:rgba(10,18,28,.6);color:#fff;padding:5px 8px}
.lut-tag.l{left:12px}.lut-tag.r{right:12px}
.leak{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(30px);opacity:.75}
.l1{width:70%;height:90%;left:-20%;top:-20%;background:radial-gradient(circle,#FF7A2F,transparent 65%);animation:leak1 7s ease-in-out infinite alternate}
.l2{width:60%;height:80%;right:-15%;bottom:-25%;background:radial-gradient(circle,#FF3E6C,transparent 65%);animation:leak2 9s ease-in-out infinite alternate}
.l3{width:50%;height:60%;left:30%;top:10%;background:radial-gradient(circle,#FFD36B,transparent 65%);animation:leak3 6s ease-in-out infinite alternate}
@keyframes leak1{to{transform:translate(40%,20%) scale(1.2);opacity:.45}}
@keyframes leak2{to{transform:translate(-35%,-15%) scale(1.15);opacity:.9}}
@keyframes leak3{to{transform:translate(-30%,25%) scale(.8);opacity:.35}}
.sound-view{padding:34px 24px 6px}
.g-wave-lg{height:110px}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.tile-lut{grid-column:1/-1}.tile-leak,.tile-sound,.tile-more{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.tile-leak,.tile-sound,.tile-more{grid-column:1/-1}}

/* level */
.level{max-width:720px;margin:0 auto;text-align:center;display:grid;gap:16px}
.level h2{font-size:clamp(36px,4vw,52px)}
.level-bar{position:relative;height:10px;background:var(--mist);border-radius:999px;overflow:hidden;margin-top:14px}
.level-fill{position:absolute;inset:0;background:linear-gradient(90deg,#9FB7D2,var(--navy));transform-origin:left;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.22,.61,.36,1) .3s}
.level.on .level-fill{transform:scaleX(1)}
.level-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--soft)}

/* waitlist */
.wl{max-width:760px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center}
.wl h2{font-size:clamp(40px,5vw,64px)}
.wl-form{width:100%;display:grid;gap:18px;margin-top:10px;text-align:left}
.wl-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.wl-form label{color:var(--on-navy)}
.wl-form input,.wl-form select{color:var(--on-navy);border-bottom-color:var(--on-navy-soft)}
.wl-form input::placeholder{color:var(--on-navy-soft)}
.wl-form select option{color:var(--ink)}
.wl-form input:focus,.wl-form select:focus{border-bottom-color:#F5B301}
.wl-form .btn{justify-self:center}
.wl-form .err{color:#F5B301;text-align:center}
.wl-form .notice{border-color:var(--on-navy-soft);text-align:center}
@media (max-width:760px){.wl-fields{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .vf img,.vf-focus,.vf-meter i,.float-chip,.pill-dot,.rec-dot,.wheel::before,.lut-graded,.lut-line,.leak,.g-playhead,.on .g-wave span{animation:none!important}
  .g-row,.g-kit span,.clip,.level-fill{transition:none;opacity:1;transform:none}
}
.lut-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.lut-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.lut-view.manual .lut-graded,.lut-view.manual .lut-line{animation:none}
.lut-range:focus-visible+.lut-line,.lut-view:has(.lut-range:focus-visible) .lut-knob{outline:2px solid #F5B301;outline-offset:2px}
@media (max-width:1000px){.bento{grid-template-columns:1fr 1fr}.tile-lut{grid-column:1/-1;order:-1}.tile-sound,.tile-more{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.tile-sound,.tile-more{grid-column:1/-1}}

/* Hero: small "swipe / scroll to see more" cue at the bottom centre */
.scroll-cue{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.88);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:cue-in 1s ease 1.6s forwards}
.scroll-cue:hover{color:#fff}
.cue-scroll{display:none}
@media (hover:hover) and (pointer:fine){.cue-swipe{display:none}.cue-scroll{display:inline}}
.cue-text{opacity:clamp(0,calc(1 - var(--cue,0) * 1.6),1);transform:translateY(calc(var(--cue,0) * -6px))}
.cue-arrow{transform-origin:top center;scale:1 clamp(0,calc(1 - var(--cue,0) * 1.25),1);opacity:clamp(0,calc(1 - var(--cue,0)),1);position:relative;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,0),currentColor);animation:cue-bob 2.2s ease-in-out 2.6s infinite}
.cue-arrow::after{content:"";position:absolute;left:50%;bottom:0;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translate(-50%,1px) rotate(45deg)}
@keyframes cue-in{to{opacity:1}}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none;opacity:1}.cue-arrow{animation:none}}
.scroll-cue.gone{pointer-events:none}

/* Phone menu: a standard menu button that opens the links full screen */
.nav-toggle{display:none}
@media (max-width:760px){
  .nav{min-height:calc(56px + env(safe-area-inset-top,0px))}
  .nav ul{padding:0!important}
  .nav-toggle{display:block;position:absolute;right:12px;top:calc(env(safe-area-inset-top,0px) + 8px);width:40px;height:40px;background:none;border:0;padding:0;color:inherit;cursor:pointer;z-index:32}
  .nav-toggle span{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .45s cubic-bezier(.65,0,.35,1),top .45s cubic-bezier(.65,0,.35,1)}
  .nav-toggle span:first-child{top:15px}
  .nav-toggle span:last-child{top:24px}
  .nav-ig{right:58px!important;top:calc(env(safe-area-inset-top,0px) + 11px)!important}
  .nav-mark{top:calc(env(safe-area-inset-top,0px) + 13px)!important}
  /* the links become a full-screen panel */
  .nav ul#nav-links{position:fixed;inset:0;z-index:31;margin:0;background:var(--navy);color:var(--on-navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:0!important;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
  .nav ul#nav-links li{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.22,.61,.36,1)}
  .nav ul#nav-links a{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.22em;text-transform:uppercase;opacity:1;color:var(--on-navy)}
  .nav ul#nav-links a.enq{font-family:var(--body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:14px 26px;margin-top:0;border-color:var(--on-navy)}
  .nav ul#nav-links li:last-child{margin-top:22px}
  body.menu-open{overflow:hidden}
  body.menu-open .nav ul#nav-links{opacity:1;visibility:visible;transition:opacity .45s ease}
  body.menu-open .nav ul#nav-links li{opacity:1;transform:none}
  body.menu-open .nav ul#nav-links li:nth-child(1){transition-delay:.08s}
  body.menu-open .nav ul#nav-links li:nth-child(2){transition-delay:.14s}
  body.menu-open .nav ul#nav-links li:nth-child(3){transition-delay:.2s}
  body.menu-open .nav ul#nav-links li:nth-child(4){transition-delay:.26s}
  body.menu-open .nav ul#nav-links li:nth-child(5){transition-delay:.32s}
  body.menu-open .nav ul#nav-links li:nth-child(6){transition-delay:.38s}
  /* when open, the button, DV mark and Instagram sit white on top of the panel */
  body.menu-open .nav{color:var(--on-navy)!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body.menu-open .nav-toggle span:first-child{top:19.5px;transform:rotate(45deg)}
  body.menu-open .nav-toggle span:last-child{top:19.5px;transform:rotate(-45deg)}
  body.menu-open .nav-mark,body.menu-open .nav-ig{z-index:32}
}

/* ===== Course: log in button, buy card, login / welcome pages, members area ===== */
.nav-login{position:absolute;right:calc(clamp(16px,3vw,40px) + 50px);top:calc(env(safe-area-inset-top,0px) + 16px);font:500 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:inherit;border:1px solid currentColor;padding:9px 14px;opacity:1!important;transition:background .3s,color .3s}
.nav.solid .nav-login:hover{background:var(--navy);color:var(--on-navy)}
@media (max-width:1080px) and (min-width:761px){.edu .nav ul{padding-right:190px}}
@media (max-width:760px){.nav-login{right:98px;top:calc(env(safe-area-inset-top,0px) + 14px);padding:8px 11px;font-size:10px;letter-spacing:.14em}body.menu-open .nav-login{visibility:hidden}}

.buy{max-width:560px;margin:clamp(56px,7vw,90px) auto 0;border:1px solid var(--rule);padding:clamp(28px,4vw,48px);text-align:center;display:grid;gap:14px;justify-items:center;background:var(--white);box-shadow:0 30px 60px -40px rgba(36,59,83,.35)}
.buy-kicker{color:var(--soft)}
.buy-price{font-family:var(--display);font-size:clamp(56px,7vw,76px);line-height:1;color:var(--navy)}
.buy-list{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:10px;text-align:left}
.buy-list li{position:relative;padding-left:28px}
.buy-list li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(-45deg)}
.buy-btn{width:100%;max-width:340px}
.buy-btn[disabled]{opacity:.6;cursor:wait}
.buy-small{font-size:13px;color:var(--soft)}
.buy-small a{color:var(--navy)}

.auth{min-height:100svh;display:grid;place-items:center;padding:clamp(120px,14vw,160px) 16px clamp(60px,8vw,100px);background:var(--mist)}
.auth-card{width:100%;max-width:460px;background:var(--white);border:1px solid var(--rule);padding:clamp(28px,5vw,48px);display:grid;gap:18px;box-shadow:0 30px 60px -40px rgba(36,59,83,.35)}
.auth-card h1{font-size:clamp(38px,5vw,50px)}
.auth-card form{gap:22px}
.auth-card .btn{width:100%}
.auth-card .btn[disabled]{opacity:.6;cursor:wait}
.auth-foot{font-size:14px;color:var(--soft);display:grid;gap:6px}
.auth-foot a{color:var(--navy)}
.auth .pill{color:var(--navy);border-color:var(--rule)}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed var(--navy);padding:16px 18px}
.code-box strong{font-family:var(--display);font-weight:500;font-size:clamp(22px,6vw,30px);letter-spacing:.04em;white-space:nowrap;color:var(--navy);user-select:all}
.spinner{width:28px;height:28px;border:2px solid var(--rule);border-top-color:var(--navy);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.members-head{padding-block:clamp(120px,13vw,160px) clamp(48px,6vw,70px)}
.members-head h1{font-size:clamp(38px,5vw,62px);margin-top:10px}
.mprog{margin-top:26px;max-width:520px;display:grid;gap:10px}
.mprog-bar{height:8px;background:var(--navy-rule);border-radius:999px;overflow:hidden}
.mprog-bar span{display:block;height:100%;width:0;background:#F5B301;border-radius:999px;transition:width .8s cubic-bezier(.22,.61,.36,1)}
.mprog small{font-size:13px;color:var(--on-navy-soft)}
.members-main{padding-block:clamp(48px,6vw,80px)}
.player-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.player-grid{grid-template-columns:1fr}}
.player{position:relative;aspect-ratio:16/9;background:var(--navy-deep);color:var(--on-navy);display:grid;place-items:center;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-soon{display:grid;gap:12px;justify-items:center;text-align:center;padding:20px}
.player-soon .play-ring{width:64px;height:64px;border:1px solid var(--on-navy-soft);border-radius:50%;display:grid;place-items:center}
.player-soon .play-ring::after{content:"";margin-left:5px;border-left:16px solid var(--on-navy);border-top:10px solid transparent;border-bottom:10px solid transparent}
.player-soon small{color:var(--on-navy-soft);font-size:13px}
.lesson-info{margin-top:24px;display:grid;gap:12px}
.lesson-info h2{font-size:clamp(28px,3.4vw,40px)}
.lesson-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.lesson-actions .btn{padding:14px 20px}
.btn.done{background:var(--navy);color:var(--on-navy)}
.lessons{border:1px solid var(--rule);background:var(--white)}
.lessons h3{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);padding:18px 20px 8px}
.lessons ol{list-style:none;margin:0;padding:0 0 8px}
.lessons button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;width:100%;padding:11px 20px;font-size:15px;line-height:1.45}
.lessons button:hover{background:var(--mist)}
.lessons button:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.lessons button[aria-current="true"]{background:var(--mist);font-weight:500}
.tick{width:22px;height:22px;border:1px solid var(--soft);border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--soft);margin-top:1px}
.is-done .tick{background:var(--navy);border-color:var(--navy);color:transparent;position:relative}
.is-done .tick::after{content:"";position:absolute;width:9px;height:5px;border-left:1.5px solid var(--on-navy);border-bottom:1.5px solid var(--on-navy);transform:translateY(-1px) rotate(-45deg)}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
@media (max-width:820px){.dl-grid{grid-template-columns:1fr}}
.dl{border:1px solid var(--navy-rule);padding:26px;display:grid;gap:10px;align-content:start}
.dl h3{font-size:26px}
.dl .caps{font-size:10px;color:#F5B301}
.edu-cta:has([data-course-cta]) a[href="#waitlist"]:not([data-course-cta]){display:none}
.auth .btn{color:var(--navy);border-color:var(--navy)}
.auth .btn:hover{background:var(--navy);color:var(--on-navy)}
.auth .btn.solid{background:var(--navy);color:var(--on-navy)}
.auth .btn.solid:hover{background:var(--navy-deep)}
#downloads h2{font-size:clamp(36px,4.4vw,56px)}
/* Course: profile */
.auth-skip{justify-self:center;font-size:14px;color:var(--soft)}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--navy-rule) center/cover no-repeat;color:var(--on-navy);font-family:var(--display);font-size:20px;line-height:1;overflow:hidden}
.avatar-lg{width:112px;height:112px;font-size:46px;background-color:var(--navy)}
.m-who{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.m-who .caps{display:block;font-size:11px}
.m-hello{display:block;font-family:var(--display);font-size:22px;line-height:1.2;margin-top:2px}
.m-who:hover .m-hello{text-decoration:underline;text-underline-offset:4px}
.p-photo{display:flex;align-items:center;gap:22px}
.p-photo-actions{display:grid;gap:8px;justify-items:start}
.p-photo-actions .btn{width:auto;padding:12px 18px;cursor:pointer}
.p-remove{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--soft);text-decoration:underline;cursor:pointer}
.ig-wrap{display:flex;align-items:baseline;gap:4px;border-bottom:1px solid var(--soft)}
.ig-wrap span{color:var(--soft)}
.ig-wrap input{border-bottom:0!important;padding-bottom:8px!important}
.ig-wrap:focus-within{border-bottom:2px solid var(--navy)}
@media (max-width:420px){.p-photo{gap:16px}.avatar-lg{width:88px;height:88px;font-size:36px}}
.intro .intro-kicker{color:var(--soft);margin:0 auto 22px;max-width:none;display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px}
.intro-kicker span{white-space:nowrap}
.intro-kicker span+span::before{content:"\00B7";margin-right:14px}
@media (max-width:520px){.intro-kicker span+span::before{content:none}}
/* Course: written lesson under the video */
.lesson-read{margin-top:clamp(36px,5vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--rule);display:grid;gap:18px}
.lesson-read>.caps{color:var(--soft);font-size:11px}
.lesson-text{max-width:66ch;display:grid;gap:14px;font-size:16.5px}
.lesson-text h3{font-size:clamp(24px,2.6vw,30px);margin-top:18px;color:var(--navy)}
.lesson-text h3:first-child{margin-top:0}
.lesson-text ul{margin:0;padding-left:1.1em;display:grid;gap:8px}
.lesson-text li::marker{color:var(--navy)}
.lesson-text strong{font-weight:600;color:var(--ink)}
/* Kit page */
.kit-hero{padding-block:clamp(130px,14vw,170px) clamp(64px,8vw,100px)}
.kit-hero .wrap{display:grid;gap:18px;max-width:900px;margin-inline:auto;text-align:center;justify-items:center}
.kit-hero h1{font-size:clamp(40px,5.4vw,72px);line-height:1.08}
.kit-hero .lead{max-width:60ch;font-size:17px}
.kit-disclose{font-size:13px;opacity:.8;max-width:60ch}
.lesson-text .kit-disclose{margin-top:10px;padding-top:14px;border-top:1px solid var(--rule);color:var(--soft)}
.lesson-text a[data-kit]{color:var(--navy);text-underline-offset:3px}
.kit-list{padding-top:clamp(56px,7vw,90px)}
.kit-group+.kit-group{margin-top:clamp(56px,7vw,84px)}
.kit-group h2{font-size:clamp(30px,3.6vw,44px);padding-bottom:16px;border-bottom:1px solid var(--rule)}
.kit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
@media (max-width:900px){.kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kit-grid{grid-template-columns:1fr}}
.kit-card{border:1px solid var(--rule);padding:24px;display:grid;gap:10px;align-content:start;background:var(--white)}
.kit-card h3{font-size:24px}
.kit-card .btn{justify-self:start;margin-top:8px;padding:13px 18px}
.kit-card small{font-size:11px;color:var(--soft);letter-spacing:.06em}
/* ===== Education sales page ===== */
.edu-stats{list-style:none;margin:10px 0 0;padding:22px 0 0;border-top:1px solid var(--navy-rule);display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:12px clamp(20px,3vw,40px)}
.edu-stats li{display:grid;gap:2px}
.edu-stats b{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1;color:var(--on-navy)}
.edu-stats span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-soft)}
@media (max-width:480px){.edu-stats{grid-template-columns:repeat(2,auto)}}
.edu-cta-center{justify-content:center;margin-top:clamp(40px,5vw,60px)}

.search{max-width:760px;margin:0 auto;display:grid;gap:18px}
.search-bar{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--rule);border-radius:999px;padding:18px 26px;box-shadow:0 30px 60px -38px rgba(36,59,83,.45);transition:border-color .4s,box-shadow .4s}
.search.typing .search-bar{border-color:var(--navy);box-shadow:0 30px 60px -32px rgba(36,59,83,.55)}
.search-glass{flex:none;position:relative;width:18px;height:18px;border:1.5px solid var(--navy);border-radius:50%}
.search-glass::after{content:"";position:absolute;width:8px;height:1.5px;background:var(--navy);right:-7px;bottom:-3px;transform:rotate(45deg)}
.search-text{font-size:clamp(16px,2.2vw,20px);color:var(--ink);min-height:1.5em;display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden}
.search-caret{display:inline-block;width:1.5px;height:1.2em;background:var(--navy);margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.search-answer{padding-left:26px;font-size:15px;color:var(--navy);opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s;min-height:1.6em}
.search-answer.show{opacity:1;transform:none}
.search-answer .caps{font-size:10px;color:#C98F00;margin-right:6px}
.search-answer [data-answer]{font-family:var(--display);font-size:20px}
.search-history{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--rule)}
.search-history li{position:relative;padding:14px 26px 14px 60px;border-bottom:1px solid var(--rule);color:var(--soft);font-size:16px;cursor:pointer;transition:color .3s,background .3s}
.search-history li::before{content:"";position:absolute;left:28px;top:50%;width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;transform:translateY(-60%);opacity:.6}
.search-history li::after{content:"";position:absolute;left:37px;top:calc(50% + 3px);width:5px;height:1.5px;background:currentColor;transform:rotate(45deg);opacity:.6}
.search-history li:hover{color:var(--ink);background:var(--mist)}
.search-history li.active{color:var(--navy);font-weight:500;background:var(--mist)}
@media (max-width:560px){.search-bar{padding:14px 18px;gap:12px}.search-answer{padding-left:18px}.search-history li{padding:12px 16px 12px 48px}.search-history li::before{left:18px}.search-history li::after{left:27px}}

.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;max-width:980px;margin:0 auto}
@media (max-width:760px){.ba{grid-template-columns:1fr}.ba-arrow{transform:rotate(90deg);justify-self:center}}
.ba-col{border:1px solid var(--navy-rule);padding:clamp(24px,3vw,36px);display:grid;gap:14px}
.ba-col .caps{font-size:11px;color:var(--on-navy-soft)}
.ba-after{border-color:#F5B301;background:rgba(245,179,1,.05)}
.ba-after .caps{color:#F5B301}
.ba ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ba li{position:relative;font-size:16px;line-height:1.5;padding-left:28px}
.ba-before li{color:var(--on-navy-soft)}
.ba-before li::before{content:"";position:absolute;left:4px;top:.75em;width:12px;height:1.5px;background:currentColor}
.ba-before li::after{content:"";position:absolute;left:28px;right:0;top:.78em;height:1px;background:var(--on-navy-soft);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.65,0,.35,1) calc(.4s + var(--i) * .25s)}
.ba.on .ba-before li::after{transform:scaleX(1)}
.ba-after li::before{content:"";position:absolute;left:2px;top:.4em;width:12px;height:7px;border-left:1.5px solid #F5B301;border-bottom:1.5px solid #F5B301;transform:rotate(-45deg) scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(1.6s + var(--i) * .2s)}
.ba.on .ba-after li::before{transform:rotate(-45deg) scale(1)}
.ba-after li{opacity:.35;transition:opacity .5s calc(1.6s + var(--i) * .2s)}
.ba.on .ba-after li{opacity:1}
.ba-arrow{width:56px;height:1px;background:var(--on-navy-soft);position:relative;transform-origin:left;scale:0 1;transition:scale .7s cubic-bezier(.65,0,.35,1) 1.2s}
.ba-arrow::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-right:1px solid var(--on-navy-soft);border-top:1px solid var(--on-navy-soft);transform:rotate(45deg)}
.ba.on .ba-arrow{scale:1 1}
@media (prefers-reduced-motion:reduce){.ba *,.ba *::before,.ba *::after{transition:none!important}}

.curr{max-width:820px;margin:0 auto;border-top:1px solid var(--rule)}
.curr details{border-bottom:1px solid var(--rule)}
.curr summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto 20px;align-items:baseline;gap:18px;padding:24px 0}
.curr summary::-webkit-details-marker{display:none}
.curr summary::after{content:"+";font-size:20px;color:var(--navy);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.curr details[open] summary::after{transform:rotate(45deg)}
.curr summary .caps{color:var(--soft);font-size:11px}
.curr-t{font-family:var(--display);font-size:clamp(26px,3vw,34px);line-height:1.1}
.curr-n{font-size:13px;color:var(--soft)}
.curr ol{margin:0 0 26px;padding-left:1.4em;display:grid;gap:10px;columns:1}
.curr ol li::marker{color:var(--navy);font-weight:500}
.curr details[open] ol{animation:curr-in .5s cubic-bezier(.16,1,.3,1)}
@keyframes curr-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:560px){.curr summary{grid-template-columns:1fr 20px;gap:4px 12px}.curr summary .caps{grid-column:1}.curr-t{grid-column:1}.curr-n{grid-column:1}.curr summary::after{grid-column:2;grid-row:1/4;align-self:center}}

.teacher-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:center}
@media (max-width:860px){.teacher-grid{grid-template-columns:1fr}}
.teacher-img{margin:0;aspect-ratio:4/5;overflow:hidden}
.teacher-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.teacher-img:hover img{transform:scale(1.04)}
.teacher-copy{display:grid;gap:18px;justify-items:start}
.teacher-copy h2{font-size:clamp(40px,5vw,64px)}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:clamp(48px,6vw,72px) auto 0}
@media (max-width:700px){.fit{grid-template-columns:1fr}}
.fit-col{border:1px solid var(--rule);padding:clamp(24px,3vw,34px);display:grid;gap:14px;align-content:start}
.fit-col h3{font-size:26px}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fit-col li{position:relative;padding-left:28px}
.fit-yes li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(-45deg)}
.fit-no li::before,.fit-no li::after{content:"";position:absolute;left:2px;top:.8em;width:13px;height:1.5px;background:var(--soft);transform:rotate(45deg)}
.fit-no li::after{transform:rotate(-45deg)}
.fit-no li{color:var(--soft)}

.incl-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,80px);align-items:center}
@media (max-width:860px){.incl-grid{grid-template-columns:1fr}}
.incl-copy{display:grid;gap:24px}
.incl-copy h2{font-size:clamp(38px,4.6vw,60px)}
.incl-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.incl-list li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--rule)}
.incl-list li::before{content:"";position:absolute;left:4px;top:1.25em;width:12px;height:7px;border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(-45deg)}
.incl-list b{font-weight:600;color:var(--navy)}
.incl-side:has(.buy) [data-cta-live]{display:none}
.incl-cta{background:var(--white);border:1px solid var(--rule);padding:clamp(28px,4vw,44px);display:grid;gap:14px;justify-items:center;text-align:center;box-shadow:0 30px 60px -40px rgba(36,59,83,.35)}
.incl-cta h3{font-size:clamp(30px,3.4vw,40px)}
.incl-cta .pill{color:var(--navy);border-color:var(--rule);justify-self:center}
.incl-cta .btn{width:100%;max-width:320px}
.edu-included .buy{max-width:none}

.edu-faq-list{grid-column:auto;max-width:820px;margin:0 auto}
.mist .btn.solid{background:var(--navy);color:var(--on-navy)}
.mist .btn.solid:hover{background:var(--navy-deep)}
.wl .pill{justify-self:center}
@media (max-width:760px){.ba-arrow{display:none}}
.curr ol{list-style:none;padding-left:0}
.curr ol li{display:grid;grid-template-columns:2.4em 1fr}
.curr ol li::before{content:attr(data-n);color:var(--navy);font-weight:500;font-size:13px;line-height:1.75}
.curr summary{grid-template-columns:auto 1fr 20px}
.edu-stats{grid-template-columns:repeat(3,auto)}
@media (max-width:480px){.edu-stats{grid-template-columns:repeat(3,auto)}}

/* Homepage intro: typewriter. A line types out, corrects its last word, then the cursor stretches to full height
   and splits into two lines that slide apart like doors onto the hero. Timings are in js/main.js.
   Only shown when <html> has .intro-on (set in index.html). */
.intro-film{display:none}
.intro-hold{overflow:hidden}
.intro-hold .hero-logo{animation-play-state:paused}
.intro-on .intro-film{display:grid;place-items:center;position:fixed;inset:0;z-index:100;cursor:pointer;color:var(--on-navy);padding:0 24px;--x:50vw}
.if-panel{position:absolute;inset:0;background:#131F2C;transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
.if-left{clip-path:inset(0 calc(100% - var(--x) - 1px) 0 0)}
.if-right{clip-path:inset(0 0 0 var(--x))}
.intro-film.open .if-left{clip-path:inset(0 100% 0 0)}
.intro-film.open .if-right{clip-path:inset(0 0 0 100%)}
.if-type{position:relative;margin:0;font-family:var(--display);font-size:clamp(30px,4.6vw,60px);line-height:1.2;text-align:left;white-space:pre-wrap;transition:opacity .25s}
.if-txt em{font-style:italic;color:#fff}
.if-caret{visibility:hidden;display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.12em;background:#F5B301;animation:if-blink .9s steps(1) infinite}
.intro-film.typing .if-caret{animation:none}
.intro-film.started .if-caret{visibility:visible}
@keyframes if-blink{50%{opacity:0}}
.intro-film.stretch .if-txt{opacity:0;transition:opacity .25s}
.intro-film.stretch .if-caret{animation:none;opacity:0}
.intro-film.open .if-type{opacity:0}
/* the two lines that become the door edges */
.if-edge{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#F5B301;transform:scaleY(0);transform-origin:50% var(--y,50%);opacity:0}
.intro-film.stretch .if-edge{opacity:1;transform:scaleY(1);transition:transform .4s cubic-bezier(.65,0,.35,1)}
.intro-film.open .if-edge{transition:translate .9s cubic-bezier(.76,0,.24,1),opacity .4s ease .6s;opacity:0}
.intro-film.open .if-edge-l{translate:calc(var(--x) * -1 - 2px) 0}
.intro-film.open .if-edge-r{translate:calc(100vw - var(--x) + 2px) 0}
.if-skip{position:absolute;z-index:1;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));background:none;border:0;color:var(--on-navy-soft);cursor:pointer;padding:8px;font-family:var(--body);transition:color .3s,opacity .3s}
.if-skip:hover{color:var(--on-navy)}
.intro-film.stretch .if-skip{opacity:0}
.intro-film.out{opacity:0;transition:opacity .4s ease}
@media (prefers-reduced-motion:reduce){.intro-on .intro-film{display:none}.intro-hold{overflow:auto}}
/* Live site: "not available yet" popup on the Buy button */
.soon{max-width:min(460px,calc(100vw - 32px));width:100%;border:0;padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);background:var(--navy);color:var(--on-navy);text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.soon[open]{display:grid;gap:16px;justify-items:center;animation:soon-in .35s cubic-bezier(.22,.61,.36,1)}
.soon::backdrop{background:rgba(20,32,46,.6);backdrop-filter:blur(3px)}
.soon h2{font-size:clamp(34px,5vw,46px);color:var(--on-navy)}
.soon .soft{color:var(--on-navy-soft)}
.soon .btn{width:100%;max-width:300px}
.soon-x{position:absolute;top:10px;right:12px;width:44px;height:44px;border:0;background:none;color:var(--on-navy);font-size:28px;line-height:1;cursor:pointer}
.soon-x:focus-visible{outline:2px solid #F5B301;outline-offset:2px}
@keyframes soon-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.soon[open]{animation:none}}
.soon .pill{justify-self:center}
.buy-price-tba{font-size:clamp(34px,4.4vw,46px);line-height:1.1}