/* Alpha Group - professional layer (navy #001334 / gold #d48a00). Loaded after tailwind.css */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.pw{max-width:80rem;margin:0 auto;padding:0 1rem}@media(min-width:640px){.pw{padding:0 1.5rem}}@media(min-width:1024px){.pw{padding:0 2rem}}
.ps{padding:4.5rem 0}.ps.alt{background:#f8fafc;border-top:1px solid rgba(226,232,240,.7)}.ps.dark{background:#001334;color:#fff}
.ph{text-align:center;max-width:44rem;margin:0 auto 3rem}
.pe{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#a66c00;margin-bottom:.6rem}.dark .pe{color:#ffb833}
.pt{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:#001334;line-height:1.15;letter-spacing:-.01em}.dark .pt{color:#fff}
.pt em{font-style:normal;background:linear-gradient(90deg,#d48a00,#a66c00);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp{margin-top:.8rem;color:#64748b;font-weight:500;line-height:1.7}.dark .pp{color:#cbd5e1}
.badge{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;padding:.4rem .9rem;border:1px solid rgba(212,138,0,.4);background:rgba(212,138,0,.08);border-radius:999px;font-size:.65rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a66c00}
.badge i{width:.45rem;height:.45rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.hcta{display:inline-flex;align-items:center;padding:.65rem 1.1rem;border-radius:.7rem;background:#d48a00;color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transition:.3s}.hcta:hover{background:#a66c00}
.g3,.g4{display:grid;gap:1.25rem;grid-template-columns:1fr}@media(min-width:640px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.svc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(226,232,240,.9);border-radius:1.25rem;padding:1.75rem;box-shadow:0 4px 18px -8px rgba(0,19,52,.1);transition:.4s cubic-bezier(.34,1.56,.64,1)}
.svc:hover{transform:translateY(-8px);border-color:rgba(212,138,0,.5);box-shadow:0 22px 40px -12px rgba(0,19,52,.18)}
.svc .ico{width:3.25rem;height:3.25rem;border-radius:.9rem;background:#001334;color:#d48a00;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.1rem}
.svc h3{font-size:1rem;font-weight:900;color:#001334;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.svc p{font-size:.85rem;line-height:1.65;color:#64748b;font-weight:500}
.svc ul{margin:.9rem 0 1.1rem;padding:0;list-style:none;font-size:.78rem;color:#334155;font-weight:600}.svc li{padding:.22rem 0 .22rem 1.1rem;position:relative}.svc li:before{content:"";position:absolute;left:0;top:.7rem;width:.4rem;height:.4rem;border-radius:50%;background:#d48a00}
.svc a.more{margin-top:auto;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a66c00}.svc a.more:hover{color:#001334}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}.chips span{padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);font-size:.8rem;font-weight:700;color:#e2e8f0;transition:.3s}.chips span:hover{border-color:#d48a00;color:#ffb833}
.tg{display:grid;gap:1.5rem;grid-template-columns:1fr}@media(min-width:768px){.tg{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.tg{grid-template-columns:repeat(4,1fr)}}
.tg h3{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#ffb833;margin-bottom:.9rem;text-align:center}
.ind{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(min-width:768px){.ind{grid-template-columns:repeat(5,1fr)}}
.ind div{text-align:center;padding:1.3rem .8rem;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;font-weight:800;color:#001334;font-size:.85rem;transition:.3s}.ind div:hover{border-color:#d48a00;transform:translateY(-4px)}.ind small{display:block;margin-top:.3rem;font-weight:500;color:#64748b;font-size:.72rem}
.aud{display:grid;gap:1.5rem;grid-template-columns:1fr}@media(min-width:900px){.aud{grid-template-columns:1fr 1fr}}
.aud>div{border-radius:1.5rem;padding:2rem;border:1px solid #e2e8f0;background:#fff}.aud>div.nv{background:#001334;border-color:#00225c;color:#fff}
.aud h3{font-size:1.25rem;font-weight:900;color:#001334;margin-bottom:.6rem}.nv h3{color:#ffb833}.aud p{font-size:.9rem;line-height:1.7;color:#64748b}.nv p{color:#cbd5e1}
.aud ul{list-style:none;padding:0;margin:1rem 0 1.5rem;font-size:.85rem;font-weight:600}.aud li{padding:.3rem 0 .3rem 1.4rem;position:relative}.aud li:before{content:"\2713";position:absolute;left:0;color:#d48a00;font-weight:900}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:.8rem;background:#d48a00;color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;transition:.3s}.pbtn:hover{background:#a66c00}.pbtn.navy{background:#001334}.pbtn.navy:hover{background:#00225c}
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem}@media(min-width:768px){.nums{grid-template-columns:repeat(4,1fr)}}
.nums b{display:block;font-size:2.2rem;font-weight:900;color:#ffb833}.nums span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#cbd5e1;font-weight:700}.nums div{text-align:center}
.qg{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}@media(min-width:900px){.qg{grid-template-columns:5fr 7fr}}
.qf{background:#fff;color:#334155;border-radius:1.5rem;padding:1.75rem;display:grid;gap:1rem;grid-template-columns:1fr}@media(min-width:640px){.qf{grid-template-columns:1fr 1fr}.qf .full{grid-column:1/-1}}
.qf label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#001334;margin-bottom:.35rem}
.qf input,.qf select,.qf textarea{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.75rem 1rem;font:inherit;font-size:.9rem;background:#fff}.qf input:focus,.qf select:focus,.qf textarea:focus{outline:0;border-color:#d48a00;box-shadow:0 0 0 3px rgba(212,138,0,.25)}
.cl{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.9rem;font-size:.9rem;color:#e2e8f0}.cl b{display:block;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:#ffb833}.cl a:hover{color:#ffb833}
.faq{max-width:52rem;margin:0 auto;display:grid;gap:.8rem}
.faq details{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:0 1.25rem;transition:.3s}.faq details[open]{border-color:rgba(212,138,0,.55);box-shadow:0 10px 24px -14px rgba(0,19,52,.25)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:800;color:#001334;display:flex;justify-content:space-between;gap:1rem;align-items:center}.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:1.4rem;color:#d48a00;font-weight:400;line-height:1}.faq details[open] summary:after{content:"\2212"}
.faq details p{padding:0 0 1.2rem;font-size:.9rem;line-height:1.7;color:#64748b;font-weight:500}
.pf{background:#08142b;color:#fff;border-top:1px solid #16274d;padding:3.5rem 0 2rem}
.pfg{display:grid;gap:2rem;grid-template-columns:1fr}@media(min-width:640px){.pfg{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.pfg{grid-template-columns:1.6fr 1fr 1fr 1.4fr}}
.pf h4{color:#d48a00;font-weight:800;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}.pf ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:.85rem;color:#94a3b8;font-weight:500}.pf a:hover{color:#d48a00}.pf p{font-size:.85rem;line-height:1.7;color:#94a3b8}
.pfb{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(100,116,139,.3);font-size:.72rem;color:#64748b;text-align:center;font-weight:500}
@media(max-width:1023px){.hide-m{display:none}}

/* ===== Theme toggle ===== */
.tbtn{width:2.5rem;height:2.5rem;border-radius:.7rem;border:1px solid #e2e8f0;background:transparent;color:#001334;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;flex-shrink:0}
.tbtn:hover{border-color:#d48a00;color:#d48a00}.tbtn svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbtn .sun{display:none}html.dark .tbtn .sun{display:block}html.dark .tbtn .moon{display:none}
/* ===== Dark theme ===== */
html.dark{color-scheme:dark}
html.dark body,html.dark .bg-\[\#FAFAFC\]{background:#050d1f!important;color:#cbd5e1}
html.dark .bg-white,html.dark .bg-slate-50,html.dark .bg-slate-100{background-color:#0b1b3a!important}
html.dark .bg-white\/95{background-color:rgba(5,13,31,.95)!important}
html.dark section.bg-white,html.dark section.bg-slate-50,html.dark section.bg-slate-100{background-color:#050d1f!important}
html.dark .text-navy{color:#f1f5f9!important}
html.dark .text-slate-400,html.dark .text-slate-500,html.dark .text-slate-600,html.dark .text-slate-700,html.dark .text-slate-800{color:#aebbd0!important}
html.dark .border-slate-100,html.dark .border-slate-200,html.dark .border-slate-200\/60,html.dark .border-slate-300{border-color:#1b2c52!important}
html.dark .bg-slate-200,html.dark .divide-slate-700\/50>*{background-color:#1b2c52}
html.dark .bg-navy{border:1px solid #1b3a78}
html.dark #contact .bg-slate-50{background:#f8fafc!important}
html.dark .tbtn{border-color:#1b2c52;color:#ffb833}
html.dark .ps{background:#050d1f}html.dark .ps.alt{background:#071328;border-color:#13244a}html.dark .ps.dark{background:#001334}
html.dark .pt{color:#f1f5f9}html.dark .pp,html.dark .svc p,html.dark .aud p{color:#aebbd0}
html.dark .svc,html.dark .ind div,html.dark .aud>div,html.dark .faq details{background:#0b1b3a;border-color:#1b2c52}
html.dark .aud>div.nv{background:#001334;border-color:#1b3a78}
html.dark .svc h3,html.dark .aud h3,html.dark .ind div,html.dark .faq summary{color:#f1f5f9}
html.dark .nv h3{color:#ffb833}html.dark .svc ul,html.dark .aud ul,html.dark .ind small,html.dark .faq details p{color:#aebbd0}
html.dark .pbtn.navy{background:#d48a00}html.dark .pbtn.navy:hover{background:#a66c00}
html.dark .badge{color:#ffb833}html.dark .svc a.more{color:#ffb833}html.dark .pe{color:#ffb833}
html.dark ::-webkit-scrollbar-track{background:#050d1f}
/* Logo mark: lift the navy parts on dark backgrounds */
html.dark header svg path[fill="#001334"],html.dark footer svg path[fill="#001334"]{fill:#f1f5f9}
html.dark header svg path[fill="#ffffff"]{fill:#001334}

/* ===== Alignment polish ===== */
@media(max-width:767px){.ind div:last-child{grid-column:1/-1}}
@media(min-width:768px) and (max-width:1023px){
  #offer .grid{grid-template-columns:repeat(6,1fr)}
  #offer .grid>div{grid-column:span 2}
  #offer .grid>div:nth-child(4){grid-column:2/4}
  #offer .grid>div:nth-child(5){grid-column:4/6}
}
/* Smooth, premium feel */
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.pbtn,.hcta,.chips span,.svc,.ind div{will-change:transform}
.pbtn:active,.hcta:active{transform:scale(.97)}
/* Card Hover Lift & Shadow Transitions */
.hover-lift{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,border-color .4s ease;will-change:transform}
.hover-lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px -10px rgba(0,19,52,.12);border-color:rgba(212,138,0,.4)}
/* Scroll Reveal Animation Classes */
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal.active{opacity:1;transform:translateY(0)}
.delay-100{transition-delay:100ms}.delay-200{transition-delay:200ms}.delay-300{transition-delay:300ms}
/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ===== Consistency pass: match original section rhythm & heading style ===== */
.ps{padding:4rem 0}@media(min-width:640px){.ps{padding:6rem 0}}
.ph{margin-bottom:3rem}@media(min-width:640px){.ph{margin-bottom:4rem}}
.ph .pe{display:none}
.ph .pt{font-size:1.5rem;text-transform:uppercase;line-height:1.2;letter-spacing:0;text-wrap:balance}
@media(min-width:640px){.ph .pt{font-size:2.25rem}}
.ph .pt::before,.ph .pt::after{content:"";display:inline-block;width:1.5rem;height:2px;background:#d48a00;vertical-align:middle;margin:0 .6rem;transform:translateY(-.08em)}
@media(min-width:640px){.ph .pt::before,.ph .pt::after{width:4rem;margin:0 1rem}}
.ph .pp{font-size:.75rem}@media(min-width:640px){.ph .pp{font-size:1rem}}
.ph{max-width:48rem}
/* Quote: light section so three dark bands don't stack (quote -> values -> footer) */
#quote.ps.dark{background:#fff;color:#334155;border-top:1px solid #e2e8f0}
#quote .pt{color:#001334}#quote .pp{color:#64748b}#quote .pe{color:#a66c00}
#quote .cl{color:#334155}#quote .cl b{color:#a66c00}#quote .cl a:hover{color:#a66c00}
#quote .qf{border:1px solid #e2e8f0;box-shadow:0 24px 48px -20px rgba(0,19,52,.25)}
#quote .qg .pt::before,#quote .qg .pt::after{display:none}
html.dark #quote.ps.dark{background:#050d1f;color:#cbd5e1;border-color:#13244a}
html.dark #quote .pt{color:#f1f5f9}html.dark #quote .pp,html.dark #quote .cl{color:#aebbd0}html.dark #quote .pe,html.dark #quote .cl b{color:#ffb833}
html.dark .qf{background:#0b1b3a;border-color:#1b2c52;color:#cbd5e1}html.dark .qf label{color:#f1f5f9}
html.dark .qf input,html.dark .qf select,html.dark .qf textarea{background:#050d1f;border-color:#1b2c52;color:#f1f5f9}
/* Headings: gold lines flank the whole centered text (like the original sections) */
.ph .pt{display:flex;align-items:center;justify-content:center;gap:.75rem}
.ph .pt::before,.ph .pt::after{margin:0;flex:0 0 auto;transform:none}
.ph .pt span{text-align:center;min-width:0}
@media(min-width:640px){.ph .pt{gap:1rem}}
.ph{max-width:64rem}.ph .pp{max-width:44rem;margin-left:auto;margin-right:auto}
.ph .pt span{flex:0 1 auto}

/* ===== Alignment fixes (v3) ===== */
/* Hero cards flush with the container's right edge on desktop */
@media(min-width:1024px){.grid>.lg\:col-span-5.max-w-md{margin-left:auto;margin-right:0;max-width:30rem}}
/* Match card shadow weight across sections */
#how-it-works .shadow-lg{box-shadow:0 4px 18px -8px rgba(0,19,52,.14)}
/* Header CTA */
.hcta{white-space:nowrap;flex-shrink:0}
/* Hero: guaranteed breathing room below the fixed header on short desktop screens */
@media(min-width:1024px){header+section.relative.lg\:py-0{padding-top:4rem;padding-bottom:3.5rem}}

/* ===== Hero: one complete first screen on every device (v5) ===== */
.hero{min-height:calc(100vh - 5rem);min-height:calc(100svh - 5rem);padding:clamp(.75rem,2.5vh,2.5rem) 0}
.hero>.relative{display:flex;flex-direction:column;justify-content:center}
.hero-strip{display:block;padding:2rem 0 3rem;border-top:1px solid rgba(226,232,240,.6)}
html.dark .hero-strip{background:#050d1f!important;border-color:#13244a}
.hero-strip .hover-lift{width:100%}

/* Cards: show inside the hero only when the whole screen can hold them, otherwise right after the hero */
.hero-cards{display:none}
@media(min-width:1024px),(min-width:640px) and (min-height:1000px){
  .hero-cards{display:flex}
  .hero-strip{display:none}
}

/* Phones & small tablets: compact, balanced layout that fits the screen */
@media(max-width:1023px){
  .hero h1{font-size:clamp(2.1rem,6.4vh,3.4rem)}
  .hero .badge{margin-bottom:.8rem}
  .hero p.text-sm{font-size:clamp(.78rem,1.75vh,1rem);line-height:1.55}
  .hero .reveal.lg\:col-span-5{margin-top:.5rem}
  .hero .reveal.lg\:col-span-5>div:last-child{margin-top:.25rem}
  .hero-stats{margin-top:clamp(.9rem,3vh,2rem);padding-top:clamp(.9rem,2.5vh,2rem);gap:clamp(.6rem,2vh,1.5rem) .75rem}
  .hero-stats .text-2xl{display:none}
  .hero-stats .text-3xl{font-size:clamp(1.35rem,3.4vh,2.25rem)}
}
@media(max-width:1023px) and (min-height:900px){.hero-stats .text-2xl{display:block}}

/* Desktop / laptop: scale type and spacing with screen height so nothing is cut off */
@media(min-width:1024px){
  .hero h1{font-size:clamp(2.6rem,8.4vh,4.5rem)}
  .hero p.text-sm{font-size:clamp(.9rem,2.1vh,1.125rem);line-height:1.6}
  .hero .badge{margin-bottom:clamp(.6rem,1.8vh,1.1rem)}
  .hero-stats{margin-top:clamp(1rem,4vh,3rem);padding-top:clamp(.9rem,3vh,2rem)}
  .hero-stats .text-3xl{font-size:clamp(1.6rem,4.4vh,2.25rem)}
  .hero-cards>div{padding:clamp(1rem,2.6vh,2rem)}
}
@media(min-width:1024px) and (max-height:760px){
  .hero-stats .text-2xl{display:none}
  .hero .mt-6.lg\:mt-8{margin-top:1rem}
}

/* Phones: buttons side by side, one-line badge, room above the floating contact button */
@media(max-width:1023px){
  .hero{padding-bottom:clamp(3.6rem,8.5vh,4.6rem)}
  .hero .reveal.lg\:col-span-5{margin-top:0!important;gap:0}
  .hero .reveal.lg\:col-span-5>div:last-child{display:grid!important;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.9rem!important;width:100%}
  .hero .reveal.lg\:col-span-5>div:last-child a{padding:.85rem .4rem!important;font-size:.7rem!important;letter-spacing:.08em!important;width:100%!important;white-space:nowrap;border-radius:.8rem}
  .hero .reveal.lg\:col-span-5>div:last-child svg{display:none}
}
@media(max-width:480px){
  .hero .badge{font-size:.5rem;letter-spacing:.07em;padding:.35rem .65rem;gap:.4rem;max-width:100%}
  .hero-stats .text-3xl{line-height:1.1}
  .hero-stats .text-\[10px\]{font-size:.58rem}
}

/* Desktop polish: breathing room above buttons, keep stats clear of the floating button */
@media(min-width:1024px){
  .hero{padding-bottom:clamp(1rem,6.5vh,3.5rem)}
  .hero .mt-6.lg\:mt-8{margin-top:clamp(1rem,3vh,2rem)}
}

/* ===== Values strip: icons and text aligned identically in every column ===== */
.vs{align-items:stretch}
.vi{display:flex;align-items:center;justify-content:flex-start;gap:1rem;padding:.25rem 1.25rem;text-align:left}
.vic{width:3.5rem;height:3.5rem;flex:0 0 3.5rem;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#001334;box-shadow:0 0 15px rgba(255,255,255,.1)}
.vic .ic{width:1.5rem;height:1.5rem;display:block;margin:0}
.vi h4{line-height:1.25}.vi p{line-height:1.4}
@media(max-width:767px){
  .vs{gap:0!important}
  .vi{width:100%;max-width:21rem;margin:0 auto;padding:1rem 0}
}
@media(min-width:768px){.vi{padding-left:clamp(.75rem,3vw,3rem);padding-right:1rem}}

/* ===== Contact: WhatsApp badge centred on the bottom edge of the QR frame ===== */
.qr-badge{position:absolute;left:50%;bottom:-1.5rem;width:3rem;height:3rem;margin-left:-1.5rem}
.qr-badge .ic{width:1.5rem;height:1.5rem;display:block;margin:0}
@media(min-width:640px){.qr-badge{width:3.5rem;height:3.5rem;margin-left:-1.75rem;bottom:-1.75rem}.qr-badge .ic{width:1.75rem;height:1.75rem}}
/* keep the chat text below the badge */
#contact .group.cursor-pointer{margin-bottom:2.75rem}
/* WhatsApp icon + label: always centred on one line */
#contact a.bg-green-500 .ic{width:1.35rem;height:1.35rem;flex:0 0 auto}

/* ================= Shared base (all pages) ================= */
.font-cinzel{font-family:'Cinzel',serif}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#f8fafc}
::-webkit-scrollbar-thumb{background:#d48a00;border-radius:10px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
.ic{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em;flex-shrink:0}
a:focus-visible,button:focus-visible{outline:2px solid #d48a00;outline-offset:2px}
.delay-100{transition-delay:100ms}.delay-200{transition-delay:200ms}.delay-300{transition-delay:300ms}
#mobile-menu{transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;max-height:0;opacity:0;overflow:hidden}
#mobile-menu.open{max-height:560px;opacity:1}
.bg-grid{background-size:40px 40px;background-image:linear-gradient(to right,rgba(15,35,71,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(15,35,71,.03) 1px,transparent 1px)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Footer brand bits (were inline styles) */
.pf-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.pf-name{font-weight:900;letter-spacing:.2em;font-size:1.05rem}
.pf .pf-name span{font-weight:400;color:#d48a00}
.pf .pf-motto{margin-top:.8rem;color:#d48a00;font-weight:800;letter-spacing:.16em;font-size:.7rem}
.pf .pf-mail{word-break:break-all}
/* Header: logo left, nav centred, CTA right */
#header .hcta{padding:.7rem 1.2rem;font-size:.7rem}
/* pro.css loads after Tailwind, so .hcta's display would beat "hidden": hide the header CTA below the desktop nav breakpoint here */
@media(max-width:1279px){#header .hcta{display:none}}
/* Home hero: breathing room under the fixed header, like the other pages */
header+section.hero{padding-top:2.5rem;padding-bottom:2.5rem}
@media(min-width:1024px){header+section.hero{padding-top:3.5rem;padding-bottom:3rem}}
/* Track page: align with the site container instead of floating mid-page */
body .track-wrap{max-width:80rem;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){body .track-wrap{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){body .track-wrap{padding-left:2rem;padding-right:2rem}}
body .track-wrap>*{max-width:680px}

/* ===== v13: consistent colours across pages + no gap under the footer ===== */
/* Footer is the last thing on the page: no body padding (it showed as a light strip under the dark footer).
   On phones the footer carries its own bottom space so the floating WhatsApp button never covers the copyright line. */
@media(max-width:1023px){.pf{padding-bottom:5rem}}
html,body{background-color:#fafafc}
html.dark,html.dark body{background-color:#050d1f}

/* Inner-page hero: same look as the home hero (light in light mode, navy in dark mode) */
.phero{background:#fff;color:#001334;position:relative;overflow:hidden}
.phero:before{content:"";position:absolute;top:0;right:0;width:min(600px,80vw);height:min(600px,80vw);border-radius:50%;background:radial-gradient(circle,#001334 0%,transparent 70%);opacity:.04;pointer-events:none}
.phero>.pw{position:relative}
html:not(.dark) .phero h1.text-white,
html:not(.dark) .phero .hero-stats .text-white{color:#001334}
html:not(.dark) .phero .text-slate-300{color:#475569}
html:not(.dark) .phero .text-slate-400,
html:not(.dark) .phero .text-slate-500{color:#64748b}
html:not(.dark) .phero .hero-stats{border-color:rgba(226,232,240,.9)}
html:not(.dark) .phero .pbtn.navy{border-color:transparent}
/* cards inside the hero keep their own colours */
html:not(.dark) .phero .bg-navy,
html:not(.dark) .phero .bg-navy .text-white{color:#fff}
html:not(.dark) .phero .bg-navy .text-slate-300{color:#cbd5e1}
html:not(.dark) .phero .bg-navy .text-slate-400{color:#94a3b8}
html:not(.dark) .phero .bg-navy .text-gold{color:#d48a00}
html.dark .phero{background:radial-gradient(circle at top right,#00225c 0%,#001334 70%);color:#fff}
html.dark .phero:before{display:none}
html.dark .phero h1.text-white{color:#fff!important}
html.dark .phero .hero-stats .text-white{color:#fff!important}

/* ===== v14: inner-page hero = home hero (dark colour + spacing) ===== */
html.dark .phero{background:#050d1f}
/* smaller gap between the fixed header and the first content, same rhythm as the home hero */
.ps.phero{padding:2rem 0 3rem}
@media(min-width:640px){.ps.phero{padding:2.5rem 0 3.5rem}}
@media(min-width:1024px){.ps.phero{padding:3.5rem 0 3.5rem}}
.phero nav[aria-label="Breadcrumb"]{margin-bottom:1.25rem}
.vf-hero{padding-top:2.25rem!important}
html.dark .phero .pbtn.navy{background:#0b1b3a;border:1px solid #1b3a78;color:#fff}
html.dark .phero .pbtn.navy:hover{background:#13274f}

/* ===== v15 ===== */
/* Tech chips: readable on light backgrounds (service pages); keep the glassy look on dark sections */
.chips span{border-color:#cbd5e1;background:#fff;color:#001334}
.chips span:hover{border-color:#d48a00;color:#a66c00}
.ps.dark .chips span,html.dark .chips span{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#e2e8f0}
.ps.dark .chips span:hover,html.dark .chips span:hover{color:#ffb833}
/* Compact footer on phones: Services + Company side by side, tighter spacing */
@media(max-width:639px){
  .pf{padding:2.25rem 0 4rem}
  .pfg{grid-template-columns:1fr 1fr;gap:1.5rem 1rem}
  .pfg>div:first-child,.pfg>div:last-child{grid-column:1/-1}
  .pf h4{margin-bottom:.65rem}
  .pf ul{gap:.45rem;font-size:.8rem}
  .pfb{margin-top:1.5rem;padding-top:1rem}
}

/* FutureWell image: fixed-shape frame, any image shape fits without cropping or stretching */
.fwimg{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1200/630;flex-shrink:0;border-radius:.9rem;overflow:hidden;background:#f1f5f9;border:1px solid #e2e8f0;box-shadow:0 8px 20px -12px rgba(0,19,52,.35)}
.fwimg img{width:100%;height:100%;object-fit:contain;display:block}
@media(min-width:640px){.fwimg{width:18rem}}
html.dark .fwimg{background:#0b1b3a;border-color:#1b2c52}

/* Menu link "Contact": land below the fixed header so the section heading stays visible */
#contact{scroll-margin-top:2rem}

/* ===== About section ===== */
.abt{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.abt{grid-template-columns:1.15fr 1fr;gap:3rem}}
.abt-text h3{font-size:1.4rem;font-weight:900;color:#001334;line-height:1.25;margin-bottom:1rem}
.abt-text p{color:#475569;line-height:1.8;margin-bottom:1rem;font-size:.95rem}
.abt-text .abt-motto{font-size:.7rem;font-weight:800;letter-spacing:.25em;color:#a66c00;margin-top:1.25rem}
.abt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:1.5rem}
.abt-link{font-size:.85rem;font-weight:800;color:#a66c00}.abt-link:hover{text-decoration:underline}
.abt-cards{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px) and (max-width:899px){.abt-cards{grid-template-columns:1fr 1fr}}
.abt-cards>div{background:#fff;border:1px solid #e2e8f0;border-left:4px solid #d48a00;border-radius:1rem;padding:1.25rem 1.4rem;box-shadow:0 8px 24px -12px rgba(0,19,52,.12)}
.abt-cards b{display:block;font-size:.95rem;font-weight:900;color:#001334;margin-bottom:.3rem}
.abt-cards span{font-size:.85rem;line-height:1.65;color:#64748b}
html.dark .abt-text h3,html.dark .abt-cards b{color:#f1f5f9}
html.dark .abt-text p,html.dark .abt-cards span{color:#aebbd0}
html.dark .abt-cards>div{background:#0b1b3a;border-color:#1b2c52;border-left-color:#d48a00}
html.dark .abt-text .abt-motto,html.dark .abt-link{color:#ffb833}
#about{scroll-margin-top:0}

/* ===== Service pages: desktop spacing / alignment fix ===== */
.ps.how{background:#fff;border-top:1px solid rgba(226,232,240,.7)}
html.dark .ps.how{background:#071228;border-color:#13244a}
.chips{max-width:46rem;margin-left:auto;margin-right:auto}
@media(min-width:1024px){
  main>.ps{padding:4.25rem 0}
  main>.ps.phero{padding:2.25rem 0 2.75rem}
  main>.ps .ph{margin-bottom:2.5rem}
  .phero .grid.lg\:grid-cols-12{align-items:stretch}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-7{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-5{justify-content:center}
  .phero .hero-stats{margin-top:2rem;padding-top:1.5rem}
  main>.ps .mt-12{margin-top:2.25rem}
  .ps .aud>div{display:flex;flex-direction:column;justify-content:center}
}

/* ===== Service hero: remove top gap, balance both columns (desktop) ===== */
@media(min-width:1024px){
  .phero nav[aria-label="Breadcrumb"]{margin-bottom:1.5rem}
  .phero .grid.lg\:grid-cols-12{align-items:stretch;gap:2rem 3rem}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-7{justify-content:flex-start;align-items:flex-start;padding:0}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-7 h1{font-size:3.5rem;line-height:1.08;margin-bottom:1.25rem}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-7 h1+p{font-size:1.2rem;max-width:36rem;margin-bottom:2rem}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-7 .badge{margin-bottom:1.5rem}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-5{justify-content:flex-start;gap:1.25rem}
}

/* ===== Anchor jumps: fixed header (5rem) must not cover section headings ===== */
html{scroll-padding-top:5rem}
section[id],[id].ps{scroll-margin-top:0}

/* ===== Service pages: hero fills the first screen, like index.html ===== */
.ps.phero{min-height:calc(100vh - 5rem);min-height:calc(100svh - 5rem);display:flex;flex-direction:column;justify-content:center}
.ps.phero>.pw{width:100%}
@media(min-width:1024px){
  main>.ps.phero{padding:2rem 0}
  .phero nav[aria-label="Breadcrumb"]{margin-bottom:clamp(1rem,3vh,2rem)}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-7 h1{font-size:clamp(2.6rem,6.2vh,3.75rem)}
  .phero .grid.lg\:grid-cols-12>.lg\:col-span-7 h1+p{font-size:clamp(1.05rem,2.2vh,1.3rem)}
  .phero .hero-stats{margin-top:clamp(1.5rem,6vh,3.5rem);padding-top:clamp(1.25rem,3.5vh,2.25rem)}
}