/* =========================================================
   Cordoba Training Center — redesign concept
   Design system + motion library (video-editor style effects)
   ========================================================= */
@property --b{syntax:'<percentage>';inherits:false;initial-value:0%}

:root{
  --gold-500:#d6a443; --gold-400:#f0c46b; --gold-300:#f8dc9a;
  --ms:#2b9cf2; --cisco:#19b3a6; --comptia:#e0475a; --biz:#e5a93a;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --f-head:'Outfit',system-ui,sans-serif; --f-serif:'Instrument Serif',Georgia,serif; --f-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --r:22px;
}
/* theme tokens — dark default; .force-dark keeps photographic/cinematic blocks dark in both themes */
:root,:root[data-theme=light] .force-dark{
  --fg:255,255,255; --sh:5,11,26;
  --bg0:#050b1a; --bg1:#0a1630; --bg2:#0e1d3f; --tx:#fff; --tx2:rgba(255,255,255,.74); --tx3:rgba(255,255,255,.5);
  --acc:#f8dc9a; --acc2:#f0c46b; --gt1:#f8dc9a; --gt2:#d6a443; --gt3:#f0c46b;
  --card:#0f1c3d; --chip:rgba(255,255,255,.07); --inv:#f0c46b; --inv-tx:#050b1a;
  --app:#0b1733; --appbar:#081128; --kc:#12224a; --toast-bg:#fff; --toast-tx:#050b1a;
  --gl1:rgba(255,255,255,.09); --gl2:rgba(255,255,255,.03); --blob:rgba(27,51,104,.6); --shadow:rgba(0,0,0,.8);
  --line:rgba(var(--fg),.11); --muted:rgba(var(--fg),.66); --muted-2:rgba(var(--fg),.45);
  color:var(--tx);
}
:root[data-theme=light]{
  --fg:11,20,38; --sh:247,245,239;
  --bg0:#f7f5ef; --bg1:#eef0f5; --bg2:#e6e9f1; --tx:#0b1426; --tx2:#3b4660; --tx3:#6b7590;
  --acc:#8a5d0e; --acc2:#c18a22; --gt1:#b9822a; --gt2:#7d520a; --gt3:#c9952f;
  --card:#fff; --chip:#f1ede2; --inv:#0b1426; --inv-tx:#fff;
  --app:#fff; --appbar:#f1f3f8; --kc:#fff; --toast-bg:#0b1426; --toast-tx:#fff;
  --gl1:rgba(255,255,255,.82); --gl2:rgba(255,255,255,.6); --blob:rgba(240,196,107,.22); --shadow:rgba(11,20,38,.25);
  --line:rgba(11,20,38,.11); --muted:rgba(11,20,38,.68); --muted-2:rgba(11,20,38,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--f-body);background:var(--bg0);color:var(--tx);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
html[dir=rtl] body{font-family:'IBM Plex Sans Arabic',var(--f-body)}
html[dir=rtl] :is(h1,h2,h3,h4){font-family:'IBM Plex Sans Arabic',var(--f-head)}
img,video,svg{display:block;max-width:100%}
img,video{object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.02;letter-spacing:-.03em;font-weight:600}
em.s,.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.wrap-wide{width:min(1520px,100% - clamp(32px,6vw,120px));margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.eyebrow::before{content:"";width:30px;height:1.5px;background:currentColor}
.eyebrow.c::after{content:"";width:30px;height:1.5px;background:currentColor}
.display{font-size:clamp(46px,8.2vw,136px);letter-spacing:-.045em;line-height:.94}
/* Section headings come down with the hero, in the same proportion, so
   the page keeps its hierarchy rather than flattening. */
.h2{font-size:clamp(28px,4vw,56px);letter-spacing:-.03em;line-height:1.02}
.h3{font-size:clamp(26px,3vw,40px)}
.lead{font-size:clamp(15px,1.2vw,17.5px);color:var(--muted);max-width:60ch}
.sec{padding:clamp(90px,12vw,160px) 0;position:relative}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.sec-head .lead{margin-top:18px}
@media(max-width:800px){.sec-head{grid-template-columns:1fr}}
.gold-text{background:linear-gradient(100deg,var(--gt1),var(--gt2) 55%,var(--gt3));-webkit-background-clip:text;background-clip:text;color:transparent}
.num{font-family:var(--f-head);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold-400);color:#050b1a}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s;white-space:nowrap;overflow:hidden;isolation:isolate}
.btn svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
html[dir=rtl] .btn svg{transform:scaleX(-1)}
.btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));color:#050b1a;box-shadow:0 14px 34px -14px rgba(240,196,107,.7)}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-ghost{border:1px solid rgba(var(--fg),.24);background:rgba(var(--fg),.04);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--tx);color:var(--bg0);border-color:var(--tx)}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;position:relative;padding-bottom:4px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(.25);transform-origin:left;transition:transform .5s var(--ease)}
html[dir=rtl] .link::after{transform-origin:right}
.link:hover::after{transform:scaleX(1)}
.link svg{width:16px;height:16px}
html[dir=rtl] .link svg{transform:scaleX(-1)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--tx2);transition:.3s var(--ease)}
.chip.on,.chip:hover{border-color:var(--acc2);color:var(--acc)}
.chip.on{background:rgba(240,196,107,.12)}
.glass{background:linear-gradient(160deg,var(--gl1),var(--gl2));border:1px solid rgba(var(--fg),.13);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}

/* ---------- film grain + light leak (editor overlays) ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
[data-theme=light] .grain{opacity:.045}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,1%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.leak{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;background:radial-gradient(40% 70% at 0% 40%,rgba(255,170,80,.85),transparent 70%),radial-gradient(30% 50% at 10% 80%,rgba(255,90,60,.5),transparent 70%)}
.leak.go{animation:leak 1.6s var(--ease)}
@keyframes leak{0%{opacity:0;transform:translateX(-30%)}35%{opacity:.85}100%{opacity:0;transform:translateX(90%)}}

/* ---------- curtain page transition ---------- */
#curtain{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid}
#curtain i{position:absolute;left:0;right:0;height:50.5%;background:#050b1a;transform-origin:top;transition:transform .8s var(--ease-io)}
#curtain i:nth-child(1){top:0;transform-origin:top}
#curtain i:nth-child(2){bottom:0;transform-origin:bottom;background:#0a1630}
#curtain .gl{position:absolute;inset:0;margin:auto;width:2px;height:0;background:var(--gold-400);transition:height .6s var(--ease-io)}
#curtain .mk{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:18px;transition:opacity .4s}
#curtain .mk svg{width:70px;height:70px}
#curtain .mk path{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1.1s var(--ease) forwards}
#curtain .mk path:nth-child(2){animation-delay:.15s}#curtain .mk path:nth-child(3){animation-delay:.3s}
#curtain .pct{font-family:var(--f-head);font-size:12px;letter-spacing:.4em;color:rgba(255,255,255,.6);text-align:center}
@keyframes draw{to{stroke-dashoffset:0}}
#curtain.open i:nth-child(1){transform:scaleY(0)}
#curtain.open i:nth-child(2){transform:scaleY(0)}
#curtain.open .mk{opacity:0}
#curtain.closing i{transform:scaleY(1)!important}
#curtain.closing .gl{height:100%}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:150;pointer-events:none;mix-blend-mode:difference}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff}
.cur-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.cur-ring span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#050b1a;opacity:0;transition:opacity .2s}
.cur-ring.big{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff}
.cur-ring.big span{opacity:1}
.cur-ring.hov{width:64px;height:64px;margin:-32px 0 0 -32px}
@media (hover:none){.cur{display:none}}

/* ---------- progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transform:scaleX(0);transform-origin:left}
html[dir=rtl] .progress{transform-origin:right}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;transition:background .4s,padding .4s,border-color .4s,transform .5s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(var(--sh),.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-color:var(--line);padding:11px 0}
.nav.hide{transform:translateY(-110%)}
.nav .wrap-wide{display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-head);font-weight:700}
.brand svg{width:42px;height:42px;flex:none}
.brand b{display:block;font-size:18px;line-height:1.05;letter-spacing:-.01em}
.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--acc)}
.nav-links{display:flex;gap:2px;margin-inline-start:auto;padding:5px;border-radius:999px;border:1px solid var(--line);background:rgba(var(--fg),.03)}
.nav-links a{position:relative;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:color .25s}
.nav-links a:hover,.nav-links a.cur-page{color:var(--tx)}
.nav-links a.cur-page{background:rgba(var(--fg),.08)}
.nav-actions{display:flex;align-items:center;gap:8px}
.lang{display:flex;padding:3px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:700}
.lang button{padding:7px 11px;border-radius:999px;color:var(--muted)}
.lang button.on{background:rgba(240,196,107,.16);color:var(--acc)}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--tx);transition:transform .5s var(--ease),background .3s}
.icon-btn:hover{background:rgba(var(--fg),.07)}
.icon-btn svg{width:18px;height:18px}
.theme-btn .sun{display:none}[data-theme=light] .theme-btn .sun{display:block}[data-theme=light] .theme-btn .moon{display:none}
.theme-btn:active{transform:rotate(180deg)}
.nav .btn{padding:12px 22px;font-size:14px}
.menu-btn{display:none}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--tx);box-shadow:0 6px 0 var(--tx),0 -6px 0 var(--tx)}
@media(max-width:1080px){.nav-links{display:none}.menu-btn{display:grid}.nav .btn-signin{display:none}}
@media(max-width:600px){.lang{display:none}.brand small{letter-spacing:.14em;font-size:9px}.brand b{font-size:16px}}

/* full-screen overlay menu */
.menu{position:fixed;inset:0;z-index:110;background:#050b1a;color:#fff;display:grid;grid-template-columns:1.2fr 1fr;clip-path:circle(0% at calc(100% - 48px) 40px);transition:clip-path .9s var(--ease-io);visibility:hidden}
html[dir=rtl] .menu{clip-path:circle(0% at 48px 40px)}
.menu.open{clip-path:circle(150% at calc(100% - 48px) 40px);visibility:visible}
html[dir=rtl] .menu.open{clip-path:circle(150% at 48px 40px)}
.menu nav{display:flex;flex-direction:column;justify-content:center;padding:100px 6vw 40px;gap:4px}
.menu nav a{font-family:var(--f-head);font-size:clamp(40px,7vw,88px);font-weight:600;letter-spacing:-.04em;line-height:1.05;display:flex;align-items:baseline;gap:18px;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .8s var(--ease),color .3s}
.menu nav a small{font-size:14px;font-family:var(--f-body);color:var(--gold-400);letter-spacing:.1em}
.menu nav a:hover{color:var(--gold-300)}
.menu.open nav a{opacity:1;transform:none}
.menu.open nav a:nth-child(2){transition-delay:.06s}.menu.open nav a:nth-child(3){transition-delay:.12s}.menu.open nav a:nth-child(4){transition-delay:.18s}.menu.open nav a:nth-child(5){transition-delay:.24s}
.menu .mpic{position:relative;overflow:hidden}
.menu .mpic img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.15);transition:opacity .6s,transform 1.2s var(--ease)}
.menu .mpic img.on{opacity:.85;transform:none}
.menu .close{position:absolute;top:22px;inset-inline-end:22px;z-index:2;color:#fff;border-color:rgba(255,255,255,.2)}
.menu .mfoot{position:absolute;bottom:30px;inset-inline-start:6vw;display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.6)}
@media(max-width:800px){.menu{grid-template-columns:1fr}.menu .mpic{display:none}}

/* ---------- motion system (only hidden when JS motion is active) ---------- */
.js-anim [data-reveal]{opacity:0;transform:translateY(50px)}
.js-anim [data-reveal=fade]{transform:none}
.js-anim [data-reveal=left]{transform:translateX(-60px)}
.js-anim [data-reveal=right]{transform:translateX(60px)}
.js-anim [data-reveal=scale]{transform:scale(.9)}
/* Room above as well as below (18 Oct 2026). The mask is overflow:hidden
   with .08em of padding under the line, which is enough for a descender
   and nothing for an ascender - at .98 line-height the tops of tall
   letters were shaved off, visible on "Empowering careers through". Same
   trick at both ends, cancelled by the negative margins so the heading
   still sits where it did. */
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;padding-top:.14em;margin-top:-.14em}
.split-c{display:inline-block;will-change:transform}
.mask{position:relative;overflow:hidden;border-radius:var(--r)}
.mask img,.mask video{width:100%;height:100%}
.js-anim [data-mask]{clip-path:inset(100% 0 0 0 round var(--r))}
.js-anim [data-mask=left]{clip-path:inset(0 100% 0 0 round var(--r))}
.js-anim [data-mask=iris]{clip-path:circle(0% at 50% 50%)}
.kb{animation:kb 18s ease-in-out infinite alternate}
.kb.r{animation-name:kbr}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.16) translate(-2%,-2%)}}
@keyframes kbr{from{transform:scale(1.16) translate(2%,1%)}to{transform:scale(1.02) translate(0,0)}}

/* glitch (RGB-split) */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:#ff3d6e;transform:translate(-2px,0)}
.glitch::after{color:#2be3ff;transform:translate(2px,0)}
.glitch:hover::before,.glitch.go::before{opacity:.8;animation:gl1 .45s steps(2) 2 forwards}
.glitch:hover::after,.glitch.go::after{opacity:.8;animation:gl2 .45s steps(2) 2 forwards}
@keyframes gl1{0%{clip-path:inset(10% 0 70% 0);transform:translate(-4px,-1px)}25%{clip-path:inset(60% 0 10% 0);transform:translate(3px,1px)}50%{clip-path:inset(30% 0 40% 0);transform:translate(-3px,0)}75%{clip-path:inset(80% 0 5% 0);transform:translate(4px,-1px)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes gl2{0%{clip-path:inset(70% 0 5% 0);transform:translate(4px,1px)}25%{clip-path:inset(5% 0 75% 0);transform:translate(-3px,-1px)}50%{clip-path:inset(45% 0 30% 0);transform:translate(3px,0)}75%{clip-path:inset(15% 0 60% 0);transform:translate(-4px,1px)}100%{clip-path:inset(100% 0 0 0)}}

/* rotating seal */
.seal{position:relative;width:150px;height:150px;flex:none}
.seal svg.ring{width:100%;height:100%;animation:spin 22s linear infinite}
.seal text{font-family:var(--f-body);font-size:10.6px;font-weight:700;letter-spacing:.32em;fill:var(--acc)}
.seal .core{position:absolute;inset:0;margin:auto;width:58%;height:58%;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--gold-400),var(--gold-500));color:#050b1a}
.seal .core svg{width:42%;height:42%}
@keyframes spin{to{transform:rotate(360deg)}}

/* marquee */
.marquee{overflow:hidden;padding:clamp(24px,3vw,40px) 0;border-block:1px solid var(--line);white-space:nowrap}
.mq{display:inline-flex;align-items:center;gap:clamp(30px,4vw,70px);animation:mq 38s linear infinite;padding-inline-end:clamp(30px,4vw,70px)}
.marquee.rev .mq{animation-direction:reverse}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq span{font-family:var(--f-head);font-size:clamp(40px,7vw,104px);font-weight:700;letter-spacing:-.04em;line-height:1;color:rgba(var(--fg),.16);transition:color .4s}
.mq span:hover{color:var(--tx)}
.mq span.f{color:var(--tx)}
.mq i{width:clamp(14px,1.6vw,24px);aspect-ratio:1;flex:none;background:var(--gold-400);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.mq em{font-family:var(--f-serif);font-size:clamp(40px,7vw,104px);font-weight:400;color:var(--acc)}

/* page hero (inner pages) */
.phero{position:relative;min-height:78svh;display:flex;align-items:flex-end;padding:150px 0 70px;overflow:hidden;isolation:isolate;color:#fff}
.phero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero .bg img{width:100%;height:115%;object-position:center}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,11,26,.95) 0%,rgba(5,11,26,.55) 45%,rgba(5,11,26,.35) 100%)}
.phero .crumbs{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:24px}
.phero .crumbs a:hover{color:#fff}
.phero .crumbs i{width:4px;height:4px;border-radius:50%;background:var(--gold-400)}
.phero h1{font-size:clamp(48px,9vw,150px);letter-spacing:-.05em;line-height:.9}
.phero .ph-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:34px}
.phero .ph-row p{max-width:520px;color:rgba(255,255,255,.75);font-size:17px}
.phero .ph-stats{display:flex;gap:40px}
.phero .ph-stats b{display:block;font-family:var(--f-head);font-size:40px;line-height:1;font-weight:600}
.phero .ph-stats span{font-size:12.5px;color:rgba(255,255,255,.55);font-weight:600;letter-spacing:.06em}
.scroll-cue{position:absolute;bottom:30px;inset-inline-end:max(16px,calc((100vw - 1520px)/2));display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);writing-mode:vertical-rl}
.scroll-cue i{width:1px;height:60px;background:linear-gradient(var(--gold-400),transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- shared cards ---------- */
.card{border-radius:var(--r);border:1px solid var(--line);background:var(--card);padding:28px;position:relative;overflow:hidden}
.ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(240,196,107,.13);color:var(--acc);flex:none}
.ic svg{width:24px;height:24px}
.tag.on-img{background:rgba(5,11,26,.6);color:#f8dc9a;backdrop-filter:blur(8px)}
.tag{display:inline-flex;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(240,196,107,.14);color:var(--acc)}

/* login card */
.login{position:relative;border-radius:28px;padding:32px;box-shadow:0 40px 90px -30px var(--shadow)}
.login::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(240,196,107,.75),transparent 35%,transparent 65%,rgba(43,156,242,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.login h3{font-size:26px;margin-bottom:6px}
.login .sub{font-size:14px;color:var(--muted);margin-bottom:22px}
.field{position:relative;margin-bottom:14px}
.field input,.field select,.field textarea{width:100%;padding:24px 16px 9px;border-radius:14px;border:1px solid rgba(var(--fg),.15);background:rgba(var(--sh),.45);color:var(--tx);font-size:15px;transition:border-color .25s,background .25s,box-shadow .25s;appearance:none}
.field textarea{min-height:120px;resize:vertical}
.field select{cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(240,196,107,.15)}
.field label{position:absolute;inset-inline-start:16px;top:16px;font-size:14px;color:var(--muted-2);pointer-events:none;transition:.2s var(--ease)}
.field :is(input,textarea):focus+label,.field :is(input,textarea):not(:placeholder-shown)+label,.field select+label{top:7px;font-size:11px;color:var(--acc);font-weight:700;letter-spacing:.04em}
.field.err input{border-color:var(--bad)}
.login .btn{width:100%;justify-content:center;margin-top:6px}
.role-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.role-row span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(var(--fg),.06);color:var(--muted);border:1px solid var(--line)}
.login .note{display:flex;gap:8px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted-2)}
.login .note svg{width:16px;height:16px;color:var(--acc);flex:none}
.login-status{height:0;overflow:hidden;font-size:13px;color:var(--acc);transition:height .3s}
.login-status.on{height:24px}

/* ---------- portal mock (shared by home teaser + hub) ---------- */
.device{border-radius:24px;overflow:hidden;border:1px solid rgba(var(--fg),.14);background:var(--app);box-shadow:0 60px 120px -40px var(--shadow),0 0 0 8px rgba(var(--fg),.025)}
.dev-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--appbar);border-bottom:1px solid var(--line)}
.dev-bar .dots{display:flex;gap:7px}.dev-bar .dots i{width:11px;height:11px;border-radius:50%}
.dev-bar .dots i:nth-child(1){background:#ef6b6b}.dev-bar .dots i:nth-child(2){background:#f2c14e}.dev-bar .dots i:nth-child(3){background:#4ed49a}
.dev-url{flex:1;max-width:420px;margin-inline:auto;padding:6px 14px;border-radius:9px;background:rgba(var(--fg),.05);font-size:12.5px;color:var(--muted-2);text-align:center;font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sample{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);padding:4px 9px;border:1px solid rgba(240,196,107,.35);border-radius:999px;white-space:nowrap}
.app{display:grid;grid-template-columns:210px 1fr;min-height:560px}
.side{padding:18px 12px;border-inline-end:1px solid var(--line);background:rgba(var(--sh),.25);display:flex;flex-direction:column;gap:4px}
.side .who{display:flex;gap:11px;align-items:center;padding:8px 8px 18px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#050b1a;flex:none}
.side .who b{display:block;font-size:14px}.side .who small{font-size:11.5px;color:var(--muted-2)}
.side a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.25s}
.side a svg{width:17px;height:17px;opacity:.85}
.side a:hover{background:rgba(var(--fg),.05);color:var(--tx)}
.side a.on{background:rgba(240,196,107,.13);color:var(--acc)}
.main{padding:24px;min-width:0;position:relative}
.view{animation:viewIn .6s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.vh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:20px}
.vh h3{font-size:26px}.vh p{font-size:13.5px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.pc{grid-column:span 4;border-radius:18px;padding:18px;background:rgba(var(--fg),.04);border:1px solid var(--line);min-width:0}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-3{grid-column:span 3}
.pc h5{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;font-family:var(--f-body)}
.kpi b{font-family:var(--f-head);font-size:34px;font-weight:600;display:block;line-height:1.1}
.kpi small{font-size:12.5px;color:var(--ok);font-weight:600}
.next{background:linear-gradient(135deg,rgba(240,196,107,.2),rgba(43,156,242,.08));border-color:rgba(240,196,107,.3)}
.next .t{font-family:var(--f-head);font-size:22px;font-weight:600;margin-bottom:6px}
.next .m{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted);margin-bottom:16px}
.mini-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:700;background:var(--gold-400);color:#050b1a;transition:.25s;cursor:pointer}
.mini-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mini-btn.ghost{background:rgba(var(--fg),.08);color:var(--tx)}
.ring{display:flex;align-items:center;gap:18px}
.ring svg{width:96px;height:96px;transform:rotate(-90deg);flex:none}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:rgba(var(--fg),.08)}
.ring .fg{stroke:url(#gg);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.6s var(--ease)}
.ring .lbl b{font-family:var(--f-head);font-size:30px;display:block;line-height:1}
.ring .lbl small{font-size:12.5px;color:var(--muted)}
.list{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:rgba(var(--fg),.035);font-size:13.5px;min-width:0}
.row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.p-ok{background:rgba(52,211,153,.14);color:#6ee7b7}.p-warn{background:rgba(251,191,36,.14);color:#fcd34d}.p-bad{background:rgba(248,113,113,.14);color:#fca5a5}.p-info{background:rgba(43,156,242,.15);color:#93cdfd}
[data-theme=light] .portal-scope .p-ok{color:#047857}[data-theme=light] .portal-scope .p-warn{color:#a16207}[data-theme=light] .portal-scope .p-bad{color:#b91c1c}[data-theme=light] .portal-scope .p-info{color:#1d6fb8}
[data-theme=light] .portal-scope .kpi small,[data-theme=light] .portal-scope .signed{color:#047857}
.streak{display:flex;gap:6px;flex-wrap:wrap}
.streak i{width:22px;height:22px;border-radius:6px;background:rgba(52,211,153,.75)}
.streak i.l{background:rgba(251,191,36,.75)}.streak i.a{background:rgba(var(--fg),.1)}
.att-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;background:rgba(var(--fg),.035)}
.att-row .av{width:34px;height:34px;border-radius:10px;font-size:12px}
.att-row b{font-size:13.5px;font-weight:600;display:block}
.att-row small{font-size:11.5px;color:var(--muted-2)}
.seg{display:flex;padding:3px;border-radius:10px;background:rgba(var(--fg),.07);gap:2px}
.seg button{padding:6px 10px;border-radius:8px;font-size:11.5px;font-weight:700;color:var(--muted-2);transition:.2s}
.seg button.on[data-v=P]{background:rgba(52,211,153,.2);color:#10b981}
.seg button.on[data-v=L]{background:rgba(251,191,36,.22);color:#d97706}
.seg button.on[data-v=A]{background:rgba(248,113,113,.2);color:#ef4444}
.signed{display:none;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(52,211,153,.1);border:1px dashed rgba(52,211,153,.45);font-size:13px;color:#a7f3d0}
.signed.on{display:flex;animation:viewIn .5s var(--ease)}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:0 10px 10px}
.table td{padding:12px 10px;border-top:1px solid var(--line)}
.bar{height:6px;border-radius:6px;background:rgba(var(--fg),.08);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.bundle-prog{height:8px;border-radius:8px;background:rgba(var(--fg),.08);overflow:hidden;margin:14px 0 10px}
.bundle-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),#a7f3d0);transition:width .25s linear}
.audit .ev{display:grid;grid-template-columns:14px 1fr;gap:14px;padding-bottom:16px;position:relative}
.audit .ev::before{content:"";position:absolute;inset-inline-start:6px;top:14px;bottom:-2px;width:2px;background:var(--line)}
.audit .ev:last-child::before{display:none}
.audit .ev i{width:14px;height:14px;border-radius:50%;border:3px solid var(--app);background:var(--gold-400);margin-top:3px;position:relative;z-index:1}
.audit .ev b{font-size:13.5px;font-weight:600}
.audit .ev small{display:block;font-size:11.5px;color:var(--muted-2);font-family:'JetBrains Mono',ui-monospace,Consolas,monospace}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.col{border-radius:16px;padding:12px;background:rgba(var(--fg),.03);border:1px solid var(--line);min-height:300px}
.col h6{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:2px 4px 12px;display:flex;justify-content:space-between}
.kc{padding:12px;border-radius:12px;background:var(--kc);border:1px solid var(--line);margin-bottom:8px;font-size:13px;transition:transform .25s,box-shadow .25s}
.kc:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px var(--shadow)}
.kc b{display:block;font-weight:600}.kc small{color:var(--muted-2);font-size:11.5px}
.kc .mv{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--acc);cursor:pointer}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{flex-direction:row;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--line);padding:10px}.side .who{display:none}.side a{white-space:nowrap}.cards>.pc{grid-column:span 12!important}.kanban{grid-template-columns:1fr}.main{padding:16px}}

/* toast */
.toast{position:fixed;inset-inline-end:24px;bottom:24px;z-index:160;padding:13px 18px;border-radius:14px;background:var(--toast-bg);color:var(--toast-tx);font-size:13.5px;font-weight:600;box-shadow:0 20px 40px -10px rgba(0,0,0,.5);transform:translateY(20px);opacity:0;transition:.4s var(--ease);pointer-events:none;max-width:calc(100vw - 48px)}
.toast.on{transform:none;opacity:1}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-family:var(--f-head);font-size:clamp(18px,1.7vw,23px);font-weight:500;cursor:pointer;transition:color .3s}
.faq summary:hover{color:var(--acc)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;transition:.4s var(--ease)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--inv);color:var(--inv-tx);border-color:var(--inv)}
.faq .ans{padding:0 0 26px;color:var(--tx2);max-width:68ch}

/* ---------- CTA + footer ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;padding:clamp(130px,16vw,220px) 0 clamp(90px,10vw,140px);color:#fff}
.cta .bg{position:absolute;inset:-12% 0;z-index:-2}
.cta .bg img{width:100%;height:100%}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,11,26,.9),rgba(5,11,26,.35) 40%,rgba(5,11,26,.9))}
.cta h2{font-size:clamp(30px,4.4vw,62px);letter-spacing:-.03em;line-height:1;max-width:14ch}
.cta-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:44px}
.cta-row .facts{display:flex;gap:34px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.7)}
.cta-row .facts b{display:block;color:#fff;font-size:15px}
footer{background:var(--bg0);border-top:1px solid var(--line);padding:80px 0 30px;overflow:hidden}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.ft h6{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;font-family:var(--f-body)}
.ft a{display:block;font-size:15px;color:var(--muted);padding:5px 0;transition:color .2s,transform .3s var(--ease)}
.ft a:hover{color:var(--acc);transform:translateX(4px)}
/* Opening hours sit in the links column but are not links. Same type and
   rhythm as the anchors beside them so the column reads as one list, with
   no hover and no pointer - nothing here goes anywhere. */
.ft .ftline{display:block;font-size:15px;color:var(--muted);padding:5px 0}
.ft p{color:var(--muted);font-size:15px;margin-top:18px;max-width:36ch}
.newsl{display:flex;margin-top:22px;border:1px solid var(--line);border-radius:999px;padding:5px;max-width:380px}
.newsl input{flex:1;min-width:0;background:none;border:0;padding:0 14px;outline:none;color:var(--tx)}
.newsl button{padding:10px 18px;border-radius:999px;background:var(--inv);color:var(--inv-tx);font-weight:700;font-size:13.5px}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;padding:0}
.socials a:hover{transform:translateY(-3px);border-color:var(--acc2)}
.socials svg{width:18px;height:18px}
.wordmark{font-family:var(--f-head);font-weight:700;font-size:clamp(70px,19vw,330px);letter-spacing:-.06em;line-height:.8;margin-top:70px;color:transparent;white-space:nowrap;user-select:none;background-image:linear-gradient(90deg,var(--gt1),var(--gt2)),linear-gradient(rgba(var(--fg),.07),rgba(var(--fg),.07));-webkit-background-clip:text;background-clip:text;background-size:0% 100%,100% 100%;background-repeat:no-repeat;transition:background-size 1.6s var(--ease)}
.wordmark:hover,.wordmark.in{background-size:100% 100%,100% 100%}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted-2)}
@media(max-width:860px){.ft{grid-template-columns:1fr 1fr}.ft>div:first-child{grid-column:1/-1}}

/* ---------- film modal ---------- */
.film{position:fixed;inset:0;z-index:180;background:rgba(2,6,15,.94);backdrop-filter:blur(10px);display:grid;place-items:center;padding:16px;opacity:0;visibility:hidden;transition:.5s var(--ease)}
.film.open{opacity:1;visibility:visible}
.screen{position:relative;width:min(1180px,100%);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 60px 140px -40px rgba(0,0,0,.9);transform:scale(.94);transition:transform .6s var(--ease)}
.film.open .screen{transform:none}
.scene{position:absolute;inset:0;opacity:0;overflow:hidden}
.scene>video,.scene>img{width:100%;height:100%;object-fit:cover}
.scene.on{opacity:1;z-index:2}
.scene.prev{opacity:1;z-index:1}
.scene.on>img{animation:kb 7s linear forwards}
.scene.fx-fade{animation:fxFade 1.2s ease both}
.scene.fx-blinds{-webkit-mask-image:linear-gradient(90deg,#000 var(--b),transparent var(--b));mask-image:linear-gradient(90deg,#000 var(--b),transparent var(--b));-webkit-mask-size:10% 100%;mask-size:10% 100%;animation:fxBlinds 1.1s var(--ease) both}
.scene.fx-iris{animation:fxIris 1.2s var(--ease-io) both}
.scene.fx-wipe{animation:fxWipe 1s var(--ease-io) both}
.scene.fx-zoom{animation:fxZoom 1.1s var(--ease) both}
.scene.fx-whip{animation:fxWhip .7s var(--ease-io) both}
.scene.fx-glitch{animation:fxGlitch .6s steps(1) both}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxBlinds{from{--b:0%}to{--b:100%}}
@keyframes fxIris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes fxWipe{from{clip-path:polygon(0 0,0 0,-25% 100%,-25% 100%)}to{clip-path:polygon(0 0,125% 0,100% 100%,-25% 100%)}}
@keyframes fxZoom{from{opacity:0;transform:scale(1.5);filter:blur(18px)}to{opacity:1;transform:none;filter:none}}
@keyframes fxWhip{from{transform:translateX(100%);filter:blur(30px)}60%{filter:blur(12px)}to{transform:none;filter:none}}
@keyframes fxGlitch{0%{opacity:1;clip-path:inset(20% 0 50% 0);transform:translate(-20px)}15%{clip-path:inset(60% 0 10% 0);transform:translate(15px)}30%{clip-path:inset(0 0 70% 0);transform:translate(-8px);filter:hue-rotate(90deg)}45%{clip-path:inset(40% 0 30% 0);transform:translate(10px)}60%{clip-path:inset(0);transform:none;filter:none}100%{clip-path:inset(0);opacity:1}}
.screen .vign{position:absolute;inset:0;z-index:5;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.6)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%);pointer-events:none}
.screen .leak{z-index:6}
.screen .sgrain{position:absolute;inset:-50%;z-index:6;pointer-events:none;opacity:.12;background:inherit}
.cap{position:absolute;z-index:7;inset-inline:6%;bottom:15%;pointer-events:none}
.cap .k{font-size:clamp(10px,1.2vw,13px);font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-400)}
.cap .h{font-family:var(--f-head);font-weight:600;font-size:clamp(28px,5.6vw,72px);letter-spacing:-.035em;line-height:1;margin-top:12px;color:#fff}
.cap .h em{font-family:var(--f-serif);font-weight:400;color:var(--gold-300)}
.cap span.w{display:inline-block;opacity:0;transform:translateY(70%) rotate(4deg);filter:blur(10px)}
.cap.show span.w{animation:capIn .9s var(--ease) forwards}
@keyframes capIn{to{opacity:1;transform:none;filter:none}}
.cap .k span.w{transform:translateY(100%)}
.endcard{position:absolute;inset:0;z-index:8;display:grid;place-items:center;text-align:center;opacity:0;transition:opacity 1s;pointer-events:none;color:#fff;background:radial-gradient(circle at 50% 50%,rgba(5,11,26,.4),rgba(5,11,26,.85))}
.endcard.on{opacity:1;pointer-events:auto}
.endcard svg{width:clamp(56px,8vw,90px);height:auto;margin:0 auto 18px}
.endcard h3{font-size:clamp(26px,4.4vw,54px)}
.endcard p{color:var(--gold-300);letter-spacing:.3em;text-transform:uppercase;font-size:clamp(10px,1.2vw,13px);font-weight:700;margin-top:12px}
.scr-ui{position:absolute;z-index:9;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);color:#fff}
.scr-ui button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);flex:none}
.scr-ui button svg{width:16px;height:16px}
.scr-prog{flex:1;display:flex;gap:4px}
.scr-prog i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;position:relative}
.scr-prog i b{position:absolute;inset:0;background:var(--gold-400);transform:scaleX(0);transform-origin:left}
.scr-ui .sound{width:auto;padding:0 14px;border-radius:999px;font-size:12px;font-weight:700}
.scr-ui .fxn{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6);min-width:90px;text-align:end}
.film .x{position:absolute;top:18px;inset-inline-end:18px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:24px;color:#fff}
.letterbox::before,.letterbox::after{content:"";position:absolute;left:0;right:0;height:0;background:#000;z-index:8;transition:height 1s var(--ease)}
.letterbox::before{top:0}.letterbox::after{bottom:0}
.film.open .letterbox::before,.film.open .letterbox::after{height:6.5%}

.concept{position:fixed;inset-inline-start:16px;bottom:16px;z-index:95;font-size:11.5px;font-weight:700;padding:8px 12px;border-radius:999px;background:rgba(var(--sh),.8);border:1px solid rgba(240,196,107,.35);color:var(--acc);backdrop-filter:blur(10px)}
@media(max-width:600px){.concept{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{display:none}
}

/* grid children may shrink below content width (prevents mobile overflow) */
:is(.hubt,.splitg,.path-grid,.vq,.bento,.story,.cgrid2,.intro,.bil,.faq-grid,.reel-main,.app,.cards,.sec-head,.trip,.help,.tband)>*{min-width:0}
.hhero .wrap-wide>*{min-width:0}
@media(max-width:600px){.btn{white-space:normal}}

/* ---------- video backgrounds (v3: video instead of photos) ---------- */
.phero .bg video,.cta .bg video,.hhero .bg video{width:100%;height:100%;display:block}
.phero .bg video{height:115%}
.hhero .bg video{opacity:.6}

/* --- the centre's own mark ------------------------------------------------
   The demo shipped with a generic gold arch and the words "Cordoba / Training
   Center" set beside it in type. Both are replaced by the client's actual
   artwork, which already contains the wordmark - so the type goes with the
   arch rather than being printed twice (client, 14 Oct 2026).

   The white cut, because this page is dark: the logo's two blues are close
   enough to the navy ground to disappear into it.

   Sized by height with width auto. The .brand svg rule above is a 42px
   square, which is right for a monogram and would squash a wordmark that is
   four times wider than it is tall. --------------------------------------- */
/* 34px, and staying there (client, 14 Oct 2026). The size it shipped at:
   34 first, then 24, then 96 at his word, back to 56, to 48, and now home
   to 34 - asked for as "like previous version and keep it", so treat this
   as settled and do not resize it again without being asked.

   No .nav padding override goes with it. The bar is 20px of padding over
   the mark and 11px once scrolled; those are the stylesheet's own values at
   line 130 and they fit a 34px logo without touching them. The overrides
   that used to sit here existed only because a 96px logo was taller than
   the bar it sat in, and they shrank the header for every size that
   followed. Reverted with the logo.

   The responsive steps go too: at 34px the mark is no longer the widest
   thing in the header, so it does not need to shrink to let the nav links
   keep their row. */
.brand .brand-mark {
  height: 34px;
  width: auto;
  flex: none;
  display: block;
}

/* --- the Hub's sign-in card ----------------------------------------------
   What replaced the demo's login form (client, 14 Oct 2026). That form asked
   for a CPR and a password and did nothing with either - it read the last
   digit, picked a role and opened a pretend portal. On a live site somebody
   types their real credentials into a box like that.

   One honest button to /portal/login instead, in the same place and at the
   same weight, so the column still has something to balance the headline. */
.hub-cta {
  position: relative;
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 0 40px 90px -30px var(--shadow);
  text-align: left;
}
.hub-cta h3 {
  font-size: 26px;
  margin-bottom: 8px;
}
.hub-cta .sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.55;
}
.hub-cta .btn {
  width: 100%;
  justify-content: center;
}
.hub-cta .role-row {
  margin-top: 22px;
}
@media (max-width: 640px) {
  .hub-cta {
    border-radius: 20px;
    padding: 26px 22px;
  }
}

/* --- what learners say, and the questions -------------------------------
   The two sections carried over from cordobatraining.com (client, 18 Oct
   2026). They use the page's own tokens rather than colours of their own,
   so they follow the light and dark themes with everything else.
   ----------------------------------------------------------------------- */
.says{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.say{margin:0;padding:26px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.say blockquote{margin:0;font-size:15px;line-height:1.7;color:var(--tx2)}
.say blockquote::before{content:"“";display:block;font-family:var(--f-serif);font-size:46px;line-height:.6;color:var(--acc);margin-bottom:10px}
.say figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:var(--tx)}

.faq{display:grid;gap:12px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;transition:border-color .25s}
.faq details[open]{border-color:rgba(240,196,107,.4)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-size:15px;font-weight:700;color:var(--tx);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--acc);flex:none;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0;padding:0 22px 20px;font-size:14px;line-height:1.75;color:var(--muted)}

/* the about block: heading on one side, the centre's own paragraph on the
   other, collapsing to one column on a phone */
.abt{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.abt{grid-template-columns:1fr 1.15fr;gap:60px}}

/* --- fields of study, and the partner row -------------------------------
   The last two blocks carried over from cordobatraining.com (18 Oct 2026).
   ----------------------------------------------------------------------- */
.fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:block;padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);transition:border-color .3s,transform .4s var(--ease)}
.field:hover{border-color:rgba(240,196,107,.45);transform:translateY(-4px)}
.field b{display:block;font-size:17px;font-weight:700;color:var(--tx);margin-bottom:10px}
.field span{display:block;font-size:13.5px;line-height:1.7;color:var(--muted)}

.partners{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.pt{display:flex;align-items:center;gap:14px;padding:22px 24px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.pt i{font-style:normal;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--acc)}
.pt b{font-size:16px;font-weight:700;color:var(--tx)}

/* Spacing where plain sections meet, 18 Oct 2026.

   .sec pads up to 160px top AND bottom, which is right when sections
   alternate with full-bleed blocks - the original page did. The five
   brought over from cordobatraining.com sit back to back, so every join
   carried 320px and the page read as a column of islands.

   A section that follows another plain one drops its top padding to about
   half; the first after a full-bleed block keeps its air. The last gives
   up its bottom, because the footer brings 80px of its own. */
main > .sec + .sec{padding-top:clamp(50px,6vw,80px)}
main > .sec:last-of-type{padding-bottom:clamp(40px,5vw,70px)}

/* --- "Five steps to certified" ------------------------------------------
   Copied from about.css so the homepage can carry the section too (client,
   18 Oct 2026: "that 5 stages how we teach... that was nice bro"). The
   About page keeps its own copy - he asked for it added, "not removing the
   existing items" - and these rules are identical, so whichever stylesheet
   loads first wins and both pages look the same.
   ----------------------------------------------------------------------- */
.appr{position:relative}
.appr svg.line{position:absolute;left:0;top:44px;width:100%;height:4px;overflow:visible}
.appr svg.line path{stroke:var(--gold-400);stroke-width:2;fill:none}
.appr svg.line path.bgp{stroke:var(--line)}
.asteps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.astep .dot{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:var(--bg0);border:1px solid var(--line);position:relative;z-index:1;margin-bottom:24px;transition:.5s var(--ease)}
.astep .dot svg{width:30px;height:30px;color:var(--acc)}
.astep:hover .dot{background:var(--gold-400);border-color:var(--gold-400)}
.astep:hover .dot svg{color:#050b1a}
.astep b{font-family:var(--f-head);font-size:13px;letter-spacing:.2em;color:var(--acc)}
.astep h4{font-size:24px;margin:8px 0}
.astep p{font-size:14.5px;color:var(--muted)}
@media(max-width:900px){.asteps{grid-template-columns:1fr}.appr svg.line{display:none}.astep{display:grid;grid-template-columns:auto 1fr;gap:0 20px}.astep .dot{grid-row:span 3;width:64px;height:64px}}

/* --- the BQA rating badge ------------------------------------------------
   "need to place here.. that good silver rating for us" (client, 19 Oct
   2026), pointing at the decorative seal in the Tamkeen section.

   That seal was a drawn ring with the centre's own name round it - a
   graphic, saying nothing. This is the Education & Training Quality
   Authority's own mark: an external rating of GOOD for 2024/2025, which is
   the single most persuasive thing on the page to a funder. It links to
   the authority so the claim can be checked.

   Lifted out of the scroll reveal: he asked that it "should be showing
   from upside.. when we scroll, it should go down as well", so it is
   visible as soon as the section is, rather than waiting to be scrolled to.
   ----------------------------------------------------------------------- */
.bqa{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none;text-decoration:none;opacity:1!important;transform:none!important}
/* The ring of type turns; the badge inside does not. The seal this
   replaced had exactly this - "that rounded moving test is missing", and
   he gave the words: GOOD RATED TRAINING PROVIDER (client, 19 Oct 2026).
   Rotating the authority's own mark would be wrong, so only the ring
   moves. */
.bqa-ring{position:relative;display:block;width:170px;height:170px}
.bqa-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
/* textLength on the path makes the browser lay the glyphs across the
   whole circumference, so the ring closes exactly - "make sure bro.. that
   round is completed, no gap pls" (client, 19 Oct 2026). Measuring the
   text and guessing a letter-spacing to match got it to 99%, which still
   showed. letter-spacing is left off deliberately: set alongside
   textLength it is applied twice and the result is squeezed. */
.bqa-ring text{font-family:var(--f-body);font-size:9.4px;font-weight:700;fill:var(--acc)}
.bqa img{position:absolute;inset:0;margin:auto;width:122px;height:122px;display:block;transition:transform .5s var(--ease)}
@media(prefers-reduced-motion:reduce){.bqa-ring svg{animation:none}}
.bqa:hover img{transform:scale(1.05)}
.bqa-cap{display:block;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);line-height:1.6}
.bqa-cap b{display:block;font-size:12px;letter-spacing:.06em;text-transform:none;color:var(--acc)}
@media(max-width:700px){.bqa-ring{width:140px;height:140px}.bqa img{width:100px;height:100px}}

/* --- the rating, pinned ---------------------------------------------------
   "if we can attach with header so that.. page scorlls don, but it will
   there only always" (client, 19 Oct 2026).

   It lived inside the Tamkeen section and scrolled away with it. Fixed to
   the viewport under the header now, so it stays while the page moves -
   which is the point: the BQA rating is the thing he wants a funder to keep
   seeing, not something they pass once.

   Below the header's z-index, so the nav and its menu still cover it.
   Hidden under 1100px, where it would sit on top of the content rather
   than beside it.
   ------------------------------------------------------------------------- */
.bqa-pinned{position:fixed;top:88px;right:clamp(14px,2.5vw,34px);z-index:90;gap:6px;pointer-events:auto}
.bqa-pinned .bqa-ring{width:126px;height:126px}
.bqa-pinned .bqa-ring text{font-size:8.2px}
.bqa-pinned img{width:90px;height:90px}
.bqa-pinned .bqa-cap{font-size:8.5px;letter-spacing:.1em;text-shadow:0 1px 6px rgba(5,11,26,.8)}
.bqa-pinned .bqa-cap b{font-size:10px}
/* 820, not 1100: he could not see it at all, and a laptop window is
   commonly narrower than 1100 - the threshold was hiding it on the very
   screens it was meant for. Below 820 the content needs the width more
   than the badge does (19 Oct 2026). */
@media(max-width:820px){.bqa-pinned{display:none}}

/* Hero heading size — client, 20 Oct 2026
   -------------------------------------------------------------------------
   "bro.. texsts are so big... can we little reduce the size".

   The headline grew from 38 characters to 63 when the centre's name went
   into it, and at the old size it ran to five lines and pushed the
   standfirst off the first screen.

   Stated here at the end of the file, scoped to the hero section, because
   the size it had been taking was not coming from any h1 rule in this
   stylesheet - .phero h1 is the inner-page header, and the landing hero was
   picking its size up from the cascade. An explicit rule is decisive
   whatever it was inheriting.
   ------------------------------------------------------------------------- */
.hhero h1 {
  font-size: clamp(32px, 5.4vw, 84px);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.hhero .lead {
  font-size: clamp(14.5px, 1.15vw, 17px);
}