/* =============================================================
   Offsite Advisory — styles.css
   1. Tokens
   2. Reset & base
   3. Utilities
   4. Typography
   5. Buttons & form controls
   6. Header & navigation
   7. Splash loader
   8. Hero
   9. Stages strip
   10. Situations / services
   11. Process
   12. About
   13. Guide CTA
   14. FAQ
   15. CTA band
   16. Footer
   17. Quote dialog
   18. Scroll progress
   19. Effects (reveal, tilt, magnetic, split-text)
   20. Responsive
   21. Reduced motion (intrusive only)
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  color-scheme:light;
  /* Light palette (default) */
  --bg:        #F8F7F4;
  --bg-raise:  #FFFFFF;
  --surface:   #FFFFFF;
  --ink:       #1B2338;   /* headings — blue, used sparingly as decoration, mostly text */
  --body:      #4A5268;   /* body copy — blue-grey */
  --muted:     #6B7280;
  --accent:    #CF9670;   /* copper / ocre — accent ONLY */
  --accent-deep: #8C5A3C;
  --accent-soft: #E3A97D;
  --on-accent: #1B2338;
  --line:      #E3DFD8;
  --line-strong: rgba(27,35,56,0.22);
  --tint-c:    #F4EBE2;   /* warm accent tint, used sparingly for cards */
  --tint-n:    #EEF0F4;   /* cool neutral tint */
  --shadow-color: 27,35,56;
  --header-bg: rgba(248,247,244,.86);

  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --head-h: 76px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{
  -webkit-text-size-adjust:100%;
  tab-size:2;
  scroll-padding-top:100px;
  overflow-x:clip;
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overscroll-behavior-y:none;
  transition:background-color .4s var(--ease-out), color .4s var(--ease-out);
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,ol,ul{ margin:0; }
ol,ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
p{ text-wrap:pretty; }
h1,h2,h3{ font-weight:600; color:var(--ink); letter-spacing:-.02em; text-wrap:balance; line-height:1.06; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* =============================================================
   3. Utilities
   ============================================================= */
.skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:600; }
.skip:focus{ left:8px; }
.wrap{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:clamp(20px,5.5vw,80px); }
.section{ padding-block:clamp(64px,9vw,128px); }
[hidden]{ display:none !important; }

/* =============================================================
   4. Typography
   ============================================================= */
h2{ font-size:clamp(1.875rem,1.3rem + 2vw,3rem); }
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-deep); line-height:1.2; }
.eyebrow::before{ content:""; width:9px; height:9px; border-radius:2px; background:var(--accent); flex:none; }
.eyebrow.on-dark{ color:var(--accent-soft); }
.accent{ color:var(--accent-deep); }

/* =============================================================
   5. Buttons & form controls
   ============================================================= */
.btn{ display:inline-flex; align-items:stretch; gap:4px; text-decoration:none; border:0; padding:0; background:none; cursor:pointer; font:inherit; flex:none; }
.btn-label{ display:inline-flex; align-items:center; justify-content:center; height:56px; padding:0 26px; background:var(--ink); color:var(--bg); border-radius:12px; font-weight:600; font-size:1rem; line-height:1; white-space:nowrap;
  transition:background-color .4s var(--ease-out), transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft); }
.btn-arrow{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:var(--accent); color:var(--on-accent); border-radius:12px; transition:transform .35s var(--ease-out); }
.btn{ box-shadow:0 4px 14px rgba(var(--shadow-color),0.08); border-radius:12px; transition:transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 22px 44px rgba(var(--shadow-color),0.16), 0 8px 18px rgba(207,150,112,0.22); }
.btn:active{ transform:translateY(-1px); transition-duration:.12s; }
.btn:hover .btn-arrow{ transform:translateX(3px); }
.btn.sm .btn-label,.btn.sm .btn-arrow{ height:48px; } .btn.sm .btn-arrow{ width:48px; } .btn.sm .btn-label{ font-size:.9375rem; padding:0 22px; }
.btn.copper .btn-label{ background:var(--accent); color:var(--on-accent); }
.btn.copper .btn-arrow{ background:#fff; color:#1B2338; }
.btn.ghost .btn-label{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.btn.ghost .btn-arrow{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.btn.block{ display:flex; width:100%; } .btn.block .btn-label{ flex:1; }
.textlink{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--ink); text-underline-offset:6px; position:relative; }
.textlink.under::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:1.5px; background:currentColor; transform:scaleX(1); transform-origin:left; }
.textlink:hover{ color:var(--accent-deep); }
.textlink svg{ transition:transform .35s var(--ease-out); }
.textlink:hover svg{ transform:translateX(3px); }

label{ display:block; font-weight:600; font-size:.875rem; color:var(--ink); margin-bottom:8px; line-height:1.2; }
input,select,textarea{ width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--bg-raise); border:1.5px solid var(--line-strong); border-radius:10px; padding:0 16px; height:52px; transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
select{ padding:0 12px; }
textarea{ height:126px; padding:14px 16px; resize:vertical; line-height:1.5; }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(207,150,112,.22); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* =============================================================
   6. Header & navigation
   ============================================================= */
.site-header{ position:sticky; top:0; z-index:120; background:transparent; transition:background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), backdrop-filter .4s var(--ease-out); }
/* Transparent header sitting on the video: light logo/text until scrolled */
html:not(.menu-open) .site-header:not(.is-scrolled) .logo-on-light{ display:none; }
html:not(.menu-open) .site-header:not(.is-scrolled) .logo-on-dark{ display:block; }
html:not(.menu-open) .site-header:not(.is-scrolled) .nav-links a{ color:rgba(246,247,251,.88); }
html:not(.menu-open) .site-header:not(.is-scrolled) .nav-links a:hover{ color:#fff; }
html:not(.menu-open) .site-header:not(.is-scrolled) .nav-links a::after{ background:var(--accent-soft); }
html:not(.menu-open) .site-header:not(.is-scrolled) .icon-btn{ color:#F6F7FB; border-color:rgba(255,255,255,.45); }
html:not(.menu-open) .site-header:not(.is-scrolled) .btn-label{ background:#F6F7FB; color:#14204A; }
.menu-open .site-header{ background:var(--bg); }
.site-header.is-scrolled{ background:var(--header-bg); -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px); box-shadow:0 1px 0 rgba(var(--shadow-color),0.08); }
.header-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--head-h); }
.logo{ display:flex; align-items:center; flex:none; position:relative; }
.logo-img{ display:block; height:34px; width:auto; }
.logo-on-dark{ display:none; }
.nav-links{ display:none; }
.nav-links a{ position:relative; padding:.4rem 0; font-size:.9375rem; font-weight:500; color:var(--body); }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--accent-deep); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.header-cta{ display:none; }
.icon-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:none; border:1.5px solid var(--line-strong); border-radius:9px; color:var(--ink); cursor:pointer; transition:border-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-soft); }
.icon-btn:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }
.menu-btn svg{ transition:transform .3s var(--ease-out); }
.menu-open .menu-btn svg{ transform:rotate(45deg); }

.menu-panel{ display:none; position:fixed; left:0; right:0; top:var(--head-h); bottom:0; z-index:110; background:var(--bg); padding:24px clamp(20px,5.5vw,80px) 32px; overflow:auto; flex-direction:column; gap:24px; }
.menu-open .menu-panel{ display:flex; }
.menu-open body{ overflow:hidden; }
.menu-panel nav{ display:flex; flex-direction:column; }
.menu-panel nav a{ display:flex; align-items:center; min-height:58px; font-size:1.5rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }

@media (min-width:720px){ .header-cta{ display:inline-flex; } }
@media (min-width:960px){
  :root{ --head-h:92px; }
  .logo-img{ height:42px; }
  .nav-links{ display:flex; gap:8px; }
  .nav-links a{ padding:.5rem .9rem; }
  .menu-btn{ display:none; }
  .menu-panel{ display:none !important; }
}

/* =============================================================
   7. Splash loader
   ============================================================= */
.loader{ display:none; }
.js:not(.no-loader) .loader{ display:grid; position:fixed; inset:0; z-index:300; background:var(--bg); place-items:center; padding:72px 20px 96px; overflow:hidden;
  transition:opacity .6s var(--ease-out), visibility .6s var(--ease-out);
  animation:splashSafety .01s 4.6s forwards; }
.js.loader-done .loader{ opacity:0; visibility:hidden; }
.js:not(.no-loader):not(.loader-done) body{ overflow:hidden; }
.loader[hidden]{ display:none !important; }
@keyframes splashSafety{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.loader-mark{ width:76px; height:76px; opacity:0; transform:scale(.72); animation:markIn .7s var(--ease-bounce) .1s forwards; }
@keyframes markIn{ to{ opacity:1; transform:scale(1); } }
.loader-word{ font-size:clamp(1.5rem,1.1rem + 2vw,2.25rem); font-weight:600; letter-spacing:-.02em; color:var(--ink); opacity:0; transform:translateY(14px); animation:riseIn .7s var(--ease-out) .5s forwards; }
.loader-tag{ font-size:.9375rem; color:var(--muted); opacity:0; transform:translateY(10px); animation:riseIn .7s var(--ease-out) .8s forwards; }
@keyframes riseIn{ to{ opacity:1; transform:none; } }
.loader-progress{ position:absolute; left:50%; bottom:clamp(28px,6vh,64px); transform:translateX(-50%); width:200px; }
.loader-progress .track{ display:block; width:100%; height:2px; background:var(--line); overflow:hidden; border-radius:2px; }
.loader-progress i{ display:block; height:100%; background:var(--accent-deep); width:0; animation:fillBar 2400ms var(--ease-out) both; }
@keyframes fillBar{ to{ width:100%; } }
.skip-loader{ position:absolute; right:clamp(20px,3vw,48px); top:clamp(16px,2.6vw,32px); min-height:44px; padding:0 16px; background:none; border:1.5px solid var(--line-strong); border-radius:9px; color:var(--ink); font:inherit; font-size:.875rem; font-weight:500; cursor:pointer; }

/* =============================================================
   8. Hero
   ============================================================= */
.hero-full{
  position:relative; isolation:isolate; overflow:hidden; color:#F6F7FB;
  margin-top:calc(var(--head-h) * -1);
  min-height:max(640px, 100svh);
  display:flex; align-items:center;
  /* Scoped tokens: everything inside reads as light-on-navy */
  --ink:#F6F7FB; --body:rgba(246,247,251,.9); --bg:#14204A; --accent-deep:#E9B792; --line-strong:rgba(255,255,255,.45);
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; background:#0B1636; }
.hero-overlay{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(9,22,60,.94) 0%, rgba(11,28,74,.82) 42%, rgba(12,32,84,.52) 100%),
    linear-gradient(180deg, rgba(9,22,60,.55) 0%, rgba(9,22,60,0) 28%, rgba(9,22,60,0) 70%, rgba(9,22,60,.6) 100%);
}
.hero{ display:block; padding-block:calc(var(--head-h) + clamp(32px,6vw,72px)) clamp(56px,8vw,112px); }
.hero-text{ max-width:46rem; }
.hero h1{ font-size:clamp(2.35rem,1.35rem + 4vw,4.5rem); line-height:1.03; letter-spacing:-.03em; margin:18px 0 22px; text-shadow:0 2px 24px rgba(5,12,36,.35); }
.lead{ font-size:clamp(1rem,.94rem + .35vw,1.25rem); max-width:36rem; color:var(--body); }
.hero-actions{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:30px; }
.hero-actions .btn{ display:flex; } .hero-actions .btn-label{ flex:1; }
.hero-actions .textlink{ justify-content:center; }
@media (min-width:640px){
  .hero-actions{ flex-direction:row; align-items:center; gap:28px; }
  .hero-actions .btn{ display:inline-flex; } .hero-actions .btn-label{ flex:none; }
}
@media (max-width:719px){
  .hero-overlay{ background:linear-gradient(180deg, rgba(9,22,60,.62) 0%, rgba(11,28,74,.74) 100%); }
}

/* =============================================================
   9. Stages strip
   ============================================================= */
.stages{ border-block:1px solid var(--line); }
.stages ol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; padding-block:clamp(24px,3vw,36px); }
.stages li{ border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:6px; transition:border-color .3s var(--ease-out); }
.stages li:hover{ border-color:var(--accent-deep); }
.stages .n{ font-size:.8125rem; font-weight:600; color:var(--accent-deep); letter-spacing:.06em; }
.stages .t{ font-size:clamp(1.0625rem,.95rem + .4vw,1.25rem); font-weight:500; color:var(--ink); letter-spacing:-.01em; line-height:1.2; }
@media (min-width:640px){ .stages ol{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
@media (min-width:1280px){ .stages ol{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

/* =============================================================
   10. Situations / services
   ============================================================= */
.section-head{ display:grid; gap:16px; max-width:48rem; }
.section-head p:last-child{ max-width:38rem; font-size:clamp(1rem,.95rem + .2vw,1.125rem); }
.sits{ display:grid; gap:clamp(40px,6vw,64px); margin-top:clamp(40px,5vw,64px); }
.sit{ display:grid; gap:24px; align-items:center; }
.sit-visual{ position:relative; border-radius:22px; padding:clamp(28px,4vw,44px); display:flex; align-items:center; justify-content:center; min-height:220px; overflow:hidden; }
.sit-visual.c{ background:var(--tint-c); } .sit-visual.n{ background:var(--tint-n); }
.sit-visual.photo{ padding:0; min-height:0; aspect-ratio:4/3; background:var(--tint-n); }
.sit-visual.photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.sit-card:hover .sit-visual.photo img{ transform:scale(1.05); }
.sit-visual svg{ display:block; width:min(100%,220px); height:auto; }
.sit-text{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.chip{ display:inline-block; padding:7px 13px; border:1px solid rgba(140,90,60,.4); border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); line-height:1; }
.sit h3{ font-size:clamp(1.5rem,1.15rem + 1.3vw,2.125rem); line-height:1.1; }
.sit p{ font-size:clamp(1rem,.95rem + .2vw,1.125rem); max-width:36rem; }
.sit-card{ display:flex; flex-direction:column; gap:26px; border:1px solid var(--line); border-radius:22px; padding:clamp(24px,4vw,32px); transition:border-color .35s var(--ease-out), box-shadow .35s var(--ease-soft); }
.sit-card:hover{ border-color:var(--line-strong); box-shadow:0 30px 60px -30px rgba(var(--shadow-color),0.28); }

@media (min-width:960px){
  .sit-card{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; align-items:center; padding:clamp(32px,4vw,48px); }
  .sit-card:nth-child(even) .sit-visual{ order:2; }
}

/* =============================================================
   11. Process
   ============================================================= */
@property --spine{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.process{ background:var(--bg-raise); position:relative; }
.process-grid{ display:grid; gap:32px; }
.process-head{ display:grid; gap:16px; align-content:start; }
.process-head p:last-child{ max-width:26rem; font-size:clamp(1rem,.95rem + .2vw,1.125rem); }
.steps{ position:relative; border-bottom:1px solid var(--line); padding-left:22px; }
.steps::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line); }
.steps::after{ content:""; position:absolute; left:0; top:0; width:2px; height:var(--spine, 0%); background:var(--accent); transition:height .1s linear; }
.step{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 8px; padding:24px 0; border-top:1px solid var(--line); }
.step:first-child{ border-top:0; }
.step .num{ font-size:.875rem; font-weight:600; color:var(--accent-deep); letter-spacing:.06em; line-height:1.6; }
.step h3{ font-size:clamp(1.375rem,1.2rem + .5vw,1.625rem); line-height:1.15; letter-spacing:-.01em; }
.step p{ margin-top:8px; font-size:clamp(1rem,.96rem + .15vw,1.0625rem); }
@media (min-width:720px){ .step{ grid-template-columns:64px minmax(0,1fr); padding:28px 0; } }
@media (min-width:1280px){
  .process-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(48px,8vw,120px); align-items:start; }
  .process-head{ position:sticky; top:150px; }
}

/* =============================================================
   12. About
   ============================================================= */
.about-grid{ display:grid; gap:32px; align-items:center; }
.portrait{ aspect-ratio:4/3.6; width:100%; border-radius:22px; overflow:hidden; position:relative; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.about-text{ display:flex; flex-direction:column; gap:16px; }
.about-text .role{ font-weight:600; color:var(--accent-deep); }
.about-text p:not(.eyebrow):not(.role){ max-width:35rem; font-size:clamp(1rem,.95rem + .2vw,1.125rem); }
@media (min-width:960px){
  .about-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px; }
  .portrait{ aspect-ratio:440/520; max-width:440px; }
}

/* =============================================================
   13. Guide CTA
   ============================================================= */
.guide-wrap{ padding-bottom:clamp(64px,9vw,120px); }
.guide-card{ position:relative; background:#171F35; border-radius:28px; padding:clamp(28px,5vw,56px); display:grid; gap:36px; align-items:center; color:#F5F6FA; overflow:hidden; isolation:isolate; }
.guide-card::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(50% 60% at 85% 10%, rgba(207,150,112,.22), transparent 70%);
}
.guide-text{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.guide-card h2{ color:#fff; font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem); }
.guide-card p:not(.eyebrow){ color:rgba(255,255,255,.82); max-width:32rem; font-size:clamp(1rem,.95rem + .2vw,1.1875rem); }
.cover{ width:min(100%,260px); border-radius:14px; overflow:hidden; justify-self:center; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); transition:transform .5s var(--ease-soft); }
.cover:hover{ transform:translateY(-6px) rotate(-1deg); }
.cover img{ width:100%; display:block; }
@media (max-width:639px){ .guide-text .btn{ display:flex; width:100%; } .guide-text .btn-label{ flex:1; } }
@media (min-width:960px){ .guide-card{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px; } }

/* =============================================================
   14. FAQ
   ============================================================= */
.faq-grid{ display:grid; gap:32px; }
.faq-head{ display:grid; gap:16px; align-content:start; }
.faq-head p:last-child{ max-width:24rem; font-size:clamp(1rem,.95rem + .2vw,1.125rem); }
details.q{ border-top:1px solid var(--line); }
details.q:last-child{ border-bottom:1px solid var(--line); }
summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding:14px 0; cursor:pointer; font-size:clamp(1.1875rem,1.05rem + .5vw,1.5rem); font-weight:500; color:var(--ink); letter-spacing:-.01em; line-height:1.25; }
summary::-webkit-details-marker{ display:none; }
summary:hover{ color:var(--accent-deep); }
.ic{ flex:none; width:44px; height:44px; border:1.5px solid var(--line-strong); border-radius:9px; position:relative; transition:border-color .3s var(--ease-out), transform .3s var(--ease-soft); }
.ic::before,.ic::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:var(--ink); border-radius:1px; }
.ic::after{ transform:rotate(90deg); transition:transform .35s var(--ease-out); }
details[open] .ic::after{ transform:rotate(0); }
details[open] .ic{ border-color:var(--accent-deep); }
.q-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-soft); }
details[open] .q-body{ grid-template-rows:1fr; }
.q-body-inner{ overflow:hidden; }
.q .a{ padding:0 0 28px; max-width:40rem; }
.q .a p{ font-size:clamp(1rem,.96rem + .15vw,1.125rem); }
@media (min-width:1280px){ .faq-grid{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(48px,8vw,120px); } .faq-head{ position:sticky; top:150px; } }

/* =============================================================
   15. CTA banner (Book a call)
   ============================================================= */
.cta-banner{
  position:relative; isolation:isolate; overflow:hidden; color:#F6F7FB;
  --ink:#F6F7FB; --body:rgba(246,247,251,.9); --bg:#14204A; --accent-deep:#E9B792;
  padding-block:clamp(72px,10vw,136px);
}
.cta-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 58%; z-index:-2; }
.cta-banner-overlay{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(9,22,60,.94) 0%, rgba(11,28,74,.8) 50%, rgba(12,32,84,.5) 100%); }
.cta-banner-in{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.cta-banner-in h2{ font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem); line-height:1.05; max-width:16ch; }
.cta-banner-sub{ font-size:clamp(1rem,.95rem + .25vw,1.25rem); color:var(--body); max-width:32rem; }
.cta-banner-in .btn{ margin-top:8px; }
@media (max-width:639px){
  .cta-banner-overlay{ background:linear-gradient(180deg, rgba(9,22,60,.7), rgba(11,28,74,.86)); }
  .cta-banner-in .btn{ display:flex; width:100%; } .cta-banner-in .btn-label{ flex:1; }
}

/* =============================================================
   16. Footer
   ============================================================= */
.site-footer{ background:#171F35; color:rgba(246,247,251,.82); }
.foot{ display:grid; gap:32px; padding-block:clamp(48px,6vw,64px) 32px; }
.foot-brand{ display:flex; flex-direction:column; gap:16px; max-width:22rem; }
.foot-brand img{ display:block; height:36px; width:auto; align-self:flex-start; }
.foot-brand p{ font-size:.9375rem; }
.foot nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
.foot nav a{ display:flex; align-items:center; min-height:44px; color:inherit; text-decoration:none; font-size:.9375rem; font-weight:500; position:relative; }
.foot nav a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.foot-contact{ display:flex; flex-direction:column; gap:8px; font-size:.9375rem; }
.foot-contact .k{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-soft); }
.foot-contact a{ color:inherit; text-decoration:none; }
.foot-contact a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.legal{ border-top:1px solid rgba(246,247,251,.18); padding-block:20px 40px; font-size:.8125rem; }
@media (min-width:960px){ .foot{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:64px; } .foot nav{ grid-template-columns:1fr; } }

/* =============================================================
   17. Quote dialog
   ============================================================= */
dialog.quote{ border:0; padding:0; background:var(--bg-raise); color:var(--body); border-radius:24px; width:min(720px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
dialog.quote::backdrop{ background:rgba(14,18,32,.72); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
html:has(dialog[open]){ overflow:hidden; }
.quote-in{ padding:clamp(24px,4vw,48px); display:grid; gap:24px; }
.q-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.q-head>div{ display:grid; gap:10px; }
.q-head h2{ font-size:clamp(1.75rem,1.4rem + 1.2vw,2.25rem); line-height:1.05; }
.q-sub{ font-size:.9375rem; max-width:30rem; }
.fields{ display:grid; gap:16px; }
.q-actions{ display:grid; gap:12px; margin-top:24px; }
.form-note{ font-size:.8125rem; }
.form-error{ font-size:.875rem; color:#C0392B; font-weight:500; }
.success{ display:grid; gap:16px; justify-items:start; }
.success h3{ font-size:1.75rem; }
@media (min-width:640px){ .fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } .fields .full{ grid-column:1/-1; } }
@media (max-width:639px){ dialog.quote{ width:100%; max-width:100%; margin:auto 0 0; border-radius:24px 24px 0 0; max-height:94dvh; } }

/* =============================================================
   18. Scroll progress
   ============================================================= */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2.5px; z-index:200; background:transparent; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; background:linear-gradient(90deg, var(--accent-deep), var(--accent)); transform-origin:0 0; transform:scaleX(0); }

/* =============================================================
   19. Effects
   ============================================================= */
[data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
[data-reveal].is-revealed{ opacity:1; transform:none; }
[data-reveal-stagger] > *{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
[data-reveal-stagger].is-revealed > *{ opacity:1; transform:none; }
[data-reveal-stagger].is-revealed > *:nth-child(1){ transition-delay:.03s; }
[data-reveal-stagger].is-revealed > *:nth-child(2){ transition-delay:.11s; }
[data-reveal-stagger].is-revealed > *:nth-child(3){ transition-delay:.19s; }
[data-reveal-stagger].is-revealed > *:nth-child(4){ transition-delay:.27s; }
[data-reveal-stagger].is-revealed > *:nth-child(5){ transition-delay:.35s; }
[data-reveal-stagger].is-revealed > *:nth-child(6){ transition-delay:.43s; }
/* Defensive: never let a split-text host be invisible if reveal+split combine */
.reveal[data-split]{ opacity:1; transform:none; }

.split-word,.split-char{ display:inline-block; will-change:transform,opacity; }

.has-tilt{ --rx:0deg; --ry:0deg; transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .55s var(--ease-soft); }
.has-tilt:hover{ transition-duration:.15s; }

.has-magnetic{ display:inline-flex; position:relative; isolation:isolate; }
.magnetic-inner{ display:inline-flex; align-items:center; justify-content:center; gap:inherit; will-change:transform; transition:transform .8s var(--ease-soft); }

/* =============================================================
   20. Responsive helpers
   ============================================================= */
@media (min-width:540px){ .wrap{ padding-inline:clamp(24px,5.5vw,80px); } }

/* =============================================================
   21. Reduced motion — intrusive only
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .loader-mark,.loader-word,.loader-tag{ animation:none; opacity:1; transform:none; }
  .loader-progress i{ animation:none; width:100%; }
}