/* SOL EVENTS — event effects & accessories site
   Structure + real palette/type/radius/shadow/motion values extracted from
   bloom3d.studio (Webflow build), re-themed with a champagne-gold accent for
   this category — see build report for what came from the reference vs. what
   was added. */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800;900&family=Assistant:wght@400;500;600;700&display=swap');

:root{
  --font-display:'Heebo','Assistant',sans-serif;
  --font-body:'Assistant','Heebo',sans-serif;

  --bg-dark:#121212;
  --bg-dark-2:#1a1a1a;
  --bg-dark-3:#2a2a2a;
  --bg-light:#f7f7f7;
  --white:#ffffff;
  --text-dim:#d9d9d9;
  --text-mute:#9a9a9a;
  --line-dark:#2e2e2e;
  --line-light:#e2e2e2;

  --gold:#c9a24b;
  --gold-soft:#e7cf94;
  --gold-deep:#8a6a26;

  --ease:cubic-bezier(.23,1,.32,1);
  --shadow-float:0 1rem 2rem -0.5rem rgba(0,0,0,.5), .25rem .5rem 4rem rgba(0,0,0,.35);
  --shadow-soft:0 .5rem 1.5rem -.25rem rgba(0,0,0,.3);
}

*{box-sizing:border-box;}
/* scroll-behavior stays auto: Lenis (and the reduced-motion fallback in
   script.js) drive scroll easing explicitly. Native CSS smooth-scroll would
   re-smooth every one of Lenis's per-frame scrollTo calls on top of its own
   lerp, stacking two layers of easing and reading as input lag. */
html{scroll-behavior:auto;}
html,body{overflow-x:clip;}
body{
  margin:0;
  background:var(--bg-dark);
  color:var(--white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:800;}
p{margin:0;}
ul{margin:0;padding:0;}

.section_inner{
  width:100%;
  max-width:78rem;
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* ---------- reveal on scroll ----------
   No CSS here by design: initial hidden state + the reveal tween are both
   set from JS (gsap.set / ScrollTrigger.batch in script.js) so the page is
   fully visible if JS fails to load. The .reveal class is kept only as a
   GSAP selector hook. */

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.05rem 1.75rem;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  cursor:pointer;flex:none;
}
.btn_face{
  position:relative;z-index:2;transition:transform .35s cubic-bezier(.25,.46,.45,.94);
}
.btn_face-back{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(100%);
}
@media (hover:hover){
  .btn:hover .btn_face-front{transform:translateY(-100%);}
  .btn:hover .btn_face-back{transform:translateY(0);}
}

.btn-glass{
  color:var(--white);
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);
  border:1px solid rgba(255,255,255,.22);
}
.btn-glass .btn_face-back{background:var(--white);color:var(--bg-dark);}

.btn-white{
  color:var(--bg-dark);
  background:var(--white);
}
.btn-white .btn_face-back{background:var(--gold);color:var(--bg-dark);}

.btn-primary{
  color:var(--bg-dark);
  background:var(--gold-soft);
}
.btn-primary .btn_face-back{background:var(--white);color:var(--bg-dark);}

.link-underline{
  position:relative;display:inline-block;padding-bottom:.2rem;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
}
.link-underline::after{
  content:'';position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;
  background:var(--gold-soft);transition:width .5s var(--ease);
}
.carousel_card:hover .link-underline::after{width:100%;}

/* ---------- navbar ---------- */
.navbar{
  position:fixed;inset-block-start:1rem;inset-inline:1.25rem;
  z-index:500;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.navbar_inner{
  display:flex;align-items:center;justify-content:flex-start;gap:2.5rem;
  padding:.7rem .9rem .7rem 1.4rem;
  border-radius:0;
}
.navbar.on{
  background:rgba(18,18,18,.72);
  -webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);
  box-shadow:var(--shadow-soft);
}
.navbar_inner{border-bottom:1px solid transparent;}
.navbar.on .navbar_inner{border-bottom-color:rgba(255,255,255,.08);}
.navbar_logo{display:flex;align-items:center;}
.navbar_logo_img{height:40px;width:auto;display:block;}
.navbar_nav{display:flex;align-items:center;gap:1.9rem;}
.navbar_link{font-size:.92rem;font-weight:500;position:relative;padding-block:.3rem;}
.navbar_link::after{
  content:'';position:absolute;inset-inline-start:0;bottom:0;height:1px;width:0;
  background:var(--gold-soft);transition:width .4s var(--ease);
}
.navbar_link:hover::after,
.navbar_link.active::after{width:100%;}
.navbar_link.active{color:var(--gold-soft);}

.navbar_menu_btn{
  display:none;flex-direction:column;justify-content:center;gap:.32rem;
  width:2.2rem;height:2.2rem;padding:.4rem;position:relative;z-index:960;
}
.navbar_menu_btn span{
  width:1.4rem;height:2px;background:var(--white);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
/* hamburger -> X when the drawer is open, so the same button also serves
   as the close control (no separate X element needed). */
.navbar.menu-open .navbar_menu_btn span:first-child{transform:translateY(5px) rotate(45deg);}
.navbar.menu-open .navbar_menu_btn span:last-child{transform:translateY(-5px) rotate(-45deg);}

.navbar_backdrop{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.navbar_backdrop.open{opacity:1;pointer-events:auto;}

/* ---------- hero ----------
   Sticky, not fixed: stays pinned as a backdrop while the sections below
   scroll up and cover it (curtain effect). Every section painted above it
   needs z-index > 0 and an opaque background or hero content bleeds through. */
.hero{
  position:sticky;top:0;z-index:0;isolation:isolate;
  height:100svh;
  overflow:clip;
  background:radial-gradient(ellipse at 50% 20%, #241a0d 0%, var(--bg-dark) 62%);
}
.hero_video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  background:var(--bg-dark-2);
}

/* ---------- lead capture (straddles hero/next section) ---------- */
.lead{position:relative;z-index:5;margin-block-start:-4.5rem;padding-inline:1.5rem;}
.lead_form{
  max-width:74rem;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem;justify-content:space-between;
  background:var(--bg-dark-2);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-float);
  padding:2rem 2.25rem;
}
.lead_kicker{color:var(--gold-soft);font-family:var(--font-display);font-weight:700;font-size:.85rem;margin-bottom:.5rem;}
.lead_title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;max-width:20rem;line-height:1.4;}
.lead_fields{display:flex;flex-wrap:wrap;gap:.75rem;flex:1;justify-content:flex-end;}
.lead_fields input:not([type="checkbox"]),.lead_fields select{
  background:var(--bg-dark-3);border:1px solid rgba(255,255,255,.12);
  color:var(--white);padding:.9rem 1rem;font-family:var(--font-body);font-size:.9rem;
  min-width:9.5rem;
}
.lead_fields input::placeholder{color:var(--text-mute);}
.lead_submit{padding:.9rem 1.5rem;font-size:.88rem;}
.lead_consent{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.5rem;
  width:100%;flex-basis:100%; /* own full-width row in the wrapping flex layout */
  min-height:2.75rem;padding-block:.4rem; /* ~44px tap target; visual checkbox stays small */
  color:var(--text-dim);font-size:.85rem;line-height:1.5;
  text-align:right;cursor:pointer;
}
/* appearance:none + hand-drawn check: native checkboxes render with
   inconsistent invisible padding across browsers/OSes, which can make the
   visible square sit off-center from its own CSS box and throw off the gap
   to the label text next to it. Taking over the paint removes that class
   of bug entirely instead of fighting each browser's native widget. */
.lead_consent input{
  appearance:none;-webkit-appearance:none;
  margin:0;padding:0;
  width:1.1rem;height:1.1rem;flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:.2rem;
  background:var(--bg-dark-3);
  position:relative;
  cursor:pointer;
}
.lead_consent input:checked{background:var(--gold);border-color:var(--gold);}
.lead_consent input:checked::after{
  content:'';position:absolute;
  inset-inline-start:.28rem;top:.12rem;
  width:.32rem;height:.58rem;
  border:solid var(--bg-dark);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.lead_consent input:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}
.lead_consent span{flex:1 1 auto;}
.lead_consent a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:.15em;}
.lead_consent a:hover,.lead_consent a:focus-visible{color:var(--gold);}
.lead_consent a:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}

/* ---------- services intro heading ---------- */
.services_intro{background:var(--bg-dark);padding-block:7rem 1rem;position:relative;z-index:2;}
.services_heading{font-size:clamp(1.6rem,3vw,2.3rem);text-align:center;max-width:38rem;margin-inline:auto;line-height:1.35;}

/* ---------- services scroll-scrub panels ---------- */
.services_scroll{position:relative;z-index:2;background:var(--bg-dark);}
.service_panel{
  position:relative;z-index:2;height:100svh;overflow:hidden;
  background:var(--bg-dark);
}
.service_panel_media{position:absolute;inset:0;z-index:0;}
.service_panel_video,.service_panel_poster{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.service_panel_video{z-index:0;background:var(--bg-dark-2);}
.service_panel_poster{z-index:1;pointer-events:none;}
.service_panel_scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(18,18,18,.92) 0%, rgba(18,18,18,.4) 42%, rgba(18,18,18,.12) 68%, rgba(18,18,18,.05) 100%);
}
.service_panel_content{
  position:relative;z-index:2;height:100%;width:100%;
  max-width:78rem;margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:3rem 1.5rem 3.5rem;
}
.service_panel_num{
  display:inline-block;font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--gold-soft);letter-spacing:.05em;margin-bottom:.75rem;
}
.service_panel_title{font-size:clamp(1.9rem,3.6vw,3.1rem);margin-bottom:.6rem;max-width:36rem;}
.service_panel_desc_lead{
  display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:var(--gold-soft);margin-bottom:.4rem;
}
.service_panel_desc{color:var(--text-dim);font-size:.95rem;line-height:1.6;max-width:33rem;margin-bottom:1.4rem;}

/* ---------- mobile: no pin, stacked play-on-enter ---------- */
@media (max-width:767.98px){
  .service_panel{height:auto;display:flex;flex-direction:column;}
  .service_panel_media{position:relative;height:60vh;order:1;}
  .service_panel_scrim{display:none;}
  .service_panel_content{
    position:relative;order:2;height:auto;
    padding:2.25rem 1.5rem 2.75rem;
    background:var(--bg-dark);
  }
}

/* ---------- bundles (pricing cards) ---------- */
.bundles{background:var(--bg-dark);padding-block:7rem 8rem;position:relative;z-index:2;}
.bundles_heading{font-size:clamp(1.7rem,3.2vw,2.4rem);text-align:center;max-width:36rem;margin-inline:auto;margin-bottom:3.5rem;line-height:1.35;}
.bundles_grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;
  align-items:stretch;
}
.bundle_card{
  position:relative;
  background:var(--bg-dark-2);
  padding:2.5rem 2rem 2.25rem;
  display:flex;flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.bundle_border{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.bundle_border rect{
  fill:none;
  stroke:var(--gold);
  stroke-opacity:.35;
  stroke-width:1;
}

/* card 4 — Show Pack: not part of the nested ladder, the elevated/accent card */
.bundle_card--special{
  background:
    radial-gradient(circle at 18% 12%, rgba(231,207,148,.12), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(201,162,75,.14), transparent 50%),
    radial-gradient(circle at 80% 15%, rgba(201,162,75,.08), transparent 40%),
    var(--bg-dark-2);
  transform:translateY(-.75rem);
  box-shadow:0 0 3rem -0.5rem rgba(201,162,75,.4);
  animation:bundlePulse 3.8s ease-in-out infinite;
}
.bundle_card--special .bundle_border rect{
  stroke:url(#bundleShowGrad);
  stroke-opacity:.95;
  stroke-width:1.8;
}
.bundle_badge{
  position:absolute;top:-.9rem;left:50%;transform:translateX(-50%);
  background:linear-gradient(120deg, var(--gold-deep), var(--gold-soft));
  color:var(--bg-dark);
  font-family:var(--font-display);font-weight:800;font-size:.78rem;
  padding:.5rem 1.1rem;letter-spacing:.02em;white-space:nowrap;z-index:3;
}
@keyframes bundlePulse{
  0%,100%{box-shadow:0 0 3rem -0.5rem rgba(201,162,75,.4);}
  50%{box-shadow:0 0 3.5rem -0.25rem rgba(201,162,75,.6);}
}
.bundle_inner{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;}
.bundle_name{font-size:1.5rem;margin-bottom:.5rem;}
/* English pack names: dir="ltr" fixes the Latin character order, but it
   also flips the element's own `direction`, which would otherwise resolve
   text-align:start to the left. Force a physical right align so the title
   still lines up with the rest of the (rtl) card. */
.bundle_name--ltr{text-align:right;}
.bundle_tagline{color:var(--text-mute);font-size:.92rem;margin-bottom:1.75rem;}
.bundle_feats{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin-bottom:2rem;flex:1;}
.feat{
  position:relative;padding-inline-start:1.6rem;
  font-size:.95rem;line-height:1.55;
  color:var(--text-mute);font-weight:500;
}
.feat::before{
  content:'✓';position:absolute;inset-inline-start:0;top:0;
  color:var(--text-mute);font-weight:700;
}
.feat--muted{color:var(--text-mute);}
.feat--muted::before{color:var(--text-mute);}
.feat--new{color:var(--white);font-weight:700;}
.feat--new::before{color:var(--gold-soft);}
.bundle_cta{
  width:100%;
  font-size:.85rem;
  line-height:1.4;
  padding:1rem 1.25rem;
  min-height:3.75rem; /* keeps all four buttons the same height whether their text wraps to 1 or 2 lines */
  text-align:center;
  white-space:normal;
}

@media (hover:hover){
  .bundle_card:hover{transform:translateY(-6px);box-shadow:0 0 2.5rem -0.5rem rgba(201,162,75,.3);}
  .bundle_card--special:hover{transform:translateY(calc(-.75rem - 6px));}
}

@media (max-width:1100px){
  .bundles_grid{grid-template-columns:repeat(2,1fr);max-width:44rem;margin-inline:auto;}
}

@media (max-width:640px){
  .bundles_grid{grid-template-columns:1fr;max-width:26rem;margin-inline:auto;}
  .bundle_card--special{transform:none;}
  @media (hover:hover){
    .bundle_card--special:hover{transform:translateY(-6px);}
  }
}

@media (prefers-reduced-motion:reduce){
  .bundle_card--special{animation:none;}
}

/* ---------- why us ---------- */
.why_us{background:var(--bg-dark);padding-block:7rem;position:relative;z-index:2;}
.why_us_heading{font-size:clamp(1.7rem,3.2vw,2.4rem);text-align:center;max-width:36rem;margin-inline:auto;margin-bottom:3.5rem;line-height:1.35;}

/* layout: flex row so DOM order maps straight to reading/visual order under
   dir="rtl" — first child (accordion) sits on the right, second (visual) on
   the left — without fighting grid's rtl column-numbering quirks. */
.why_us_layout{display:flex;gap:3rem;align-items:flex-start;}
.why_us_accordion{flex:1 1 48%;display:flex;flex-direction:column;gap:.75rem;}
.why_us_visual{flex:1 1 48%;}

/* ---------- accordion ---------- */
.why_us_item{
  position:relative;
  background:var(--bg-dark-2);
  border:1px solid rgba(201,162,75,.28);
  padding:1.3rem 1.5rem;
  overflow:hidden;
}
.why_us_item_btn{
  width:100%;text-align:start;
  display:flex;align-items:center;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:var(--white);
  transition:color .3s ease;
}
.why_us_item:not(.active) .why_us_item_btn{color:var(--text-mute);}
@media (hover:hover){
  .why_us_item:not(.active) .why_us_item_btn:hover{color:var(--gold-soft);}
}
.why_us_item_body{overflow:hidden;}
.why_us_item.active .why_us_item_body{height:auto;}
.why_us_item_desc{color:var(--text-dim);font-size:.92rem;line-height:1.7;padding-top:.75rem;max-width:34rem;}
.why_us_item_progress{
  position:absolute;inset-inline:0;bottom:0;height:2px;
  background:rgba(255,255,255,.08);
}
.why_us_item:not(.active) .why_us_item_progress{display:none;}
.why_us_item_progress_fill{
  display:block;width:100%;height:100%;
  background:var(--gold-soft);
  transform:scaleX(0);transform-origin:100% 50%; /* fills start-to-end in RTL */
}

/* ---------- visual panel ---------- */
.why_us_visual_frame{position:relative;width:100%;aspect-ratio:4/3;}
.why_us_visual_frame_border{
  position:absolute;inset:0;background:var(--gold);opacity:.5;
  clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px);
}
.why_us_panels{
  position:absolute;inset:1px;background:var(--bg-dark-2);overflow:hidden;
  clip-path:polygon(23px 0,calc(100% - 23px) 0,100% 23px,100% calc(100% - 23px),calc(100% - 23px) 100%,23px 100%,0 calc(100% - 23px),0 23px);
}
.why_us_panel{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:2rem;opacity:0;pointer-events:none;
}
.why_us_panel.active{opacity:1;pointer-events:auto;}

/* photo bleeds to the panel edges (unlike the code-built visuals, which
   sit inside the shared 2rem padding) — the ancestor .why_us_panels clip-path
   still gives it the same hexagon-corner framing as everything else. */
.why_us_panel--equipment{padding:0;}
.why_us_equipment_img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}

.why_us_timeline{display:flex;align-items:center;width:100%;}
.why_us_timeline_step{display:flex;flex-direction:column;align-items:center;gap:.6rem;flex:none;width:5.5rem;}
.why_us_timeline_dot{
  width:2rem;height:2rem;border-radius:50%;flex:none;
  border:1.5px solid var(--gold-soft);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-soft);background:var(--bg-dark);
}
.why_us_timeline_check{opacity:0;transform:scale(0);}
.why_us_timeline_label{font-size:.72rem;color:var(--text-dim);text-align:center;line-height:1.4;}
.why_us_timeline_line{flex:1 1 auto;height:1.5px;background:var(--gold);opacity:.5;transform:scaleX(0);}

.why_us_price_card{width:100%;max-width:22rem;}
.why_us_price_row{
  position:relative;
  display:flex;justify-content:space-between;gap:1rem;
  padding-block:.65rem;
  color:var(--text-dim);font-size:.9rem;
  opacity:0;
}
.why_us_price_hairline{
  position:absolute;inset-inline:0;top:0;height:1px;
  background:rgba(201,162,75,.4);
  transform:scaleX(0);transform-origin:right; /* hairline draws start-to-end in rtl */
}
.why_us_price_row:first-child .why_us_price_hairline{display:none;}
.why_us_price_val{color:var(--gold-soft);font-family:var(--font-display);}
.why_us_price_total{
  display:flex;justify-content:space-between;gap:1rem;
  padding-top:.85rem;margin-top:.35rem;border-top:1.5px solid var(--gold);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  opacity:0;
}
.why_us_price_total .why_us_price_val{color:var(--gold-soft);}

.why_us_map_svg{width:auto;height:100%;max-height:100%;}
.why_us_map_outline{stroke:var(--gold-soft);stroke-width:1.5;fill:rgba(201,162,75,.05);}
.why_us_map_glow{fill:var(--gold);opacity:.35;filter:blur(6px);}
.why_us_map_point{fill:var(--gold-soft);}

.why_us_chat{width:100%;max-width:22rem;display:flex;flex-direction:column;gap:.6rem;}
.why_us_chat_bubble{
  position:relative;max-width:82%;
  background:var(--bg-dark-3);border:1px solid rgba(255,255,255,.08);
  border-radius:.85rem;padding:.7rem .9rem;
  opacity:0;
}
.why_us_chat_bubble p{color:var(--text-dim);font-size:.82rem;line-height:1.55;}
.why_us_chat_bubble--in{align-self:flex-start;border-start-start-radius:.2rem;}
.why_us_chat_bubble--out{align-self:flex-end;border-start-end-radius:.2rem;background:var(--bg-dark-2);}
.why_us_chat_typing{
  align-self:flex-end;display:flex;gap:.3rem;
  background:var(--bg-dark-2);border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;padding:.55rem .8rem;width:fit-content;opacity:0;
}
.why_us_chat_typing span{width:.4rem;height:.4rem;border-radius:50%;background:var(--gold-soft);opacity:.5;}

@media (max-width:767.98px){
  .why_us_layout{flex-direction:column;gap:1.75rem;}
  .why_us_accordion{order:2;flex:none;width:100%;}
  .why_us_visual{order:1;flex:none;width:100%;position:static;}
  .why_us_visual_frame{height:min(40vh,320px);width:auto;max-width:100%;aspect-ratio:4/3;margin-inline:auto;}
  .why_us_item{padding:1.1rem 1.15rem;}

  /* process timeline: horizontal -> vertical so the 4th step stops
     overflowing the fixed-size panel; rail (dot+connector) stays flush to
     the right, label runs to its left, each row reading right-to-left. */
  .why_us_panel--timeline{padding-inline:1rem;}
  .why_us_timeline{flex-direction:column;align-items:flex-start;width:auto;gap:0;}
  .why_us_timeline_step{flex-direction:row;align-items:center;gap:.55rem;width:auto;}
  .why_us_timeline_dot{width:1.65rem;height:1.65rem;flex:none;}
  .why_us_timeline_dot svg{width:10px;height:10px;}
  .why_us_timeline_label{font-size:.68rem;white-space:nowrap;text-align:start;}
  .why_us_timeline_line{
    flex:none;align-self:flex-start;
    width:1.5px;height:.6rem;margin-right:.82rem;
    transform:scaleY(0);
  }
}

@media (prefers-reduced-motion:reduce){
  .why_us_item_progress{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .navbar_nav,.navbar_backdrop,.navbar_menu_btn span{transition-duration:0s;}
}

/* ---------- process ---------- */
.process{background:var(--bg-light);color:var(--bg-dark);padding-block:7rem;position:relative;z-index:2;}
.process_heading{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:3.5rem;}
.process_list{border-top:1px solid var(--line-light);}
.process_row{
  display:grid;grid-template-columns:3.5rem 18rem 1fr;gap:2rem;align-items:baseline;
  padding-block:1.9rem;border-bottom:1px solid var(--line-light);
}
.process_row_num{font-family:var(--font-display);font-weight:800;color:var(--gold-deep);}
.process_row_title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;}
.process_row_text{color:#555;line-height:1.6;}

/* ---------- reviews (WhatsApp-bubble testimonials) — currently showing
   placeholder client messages, see the warning comment above the section
   in index.html. ---------- */
.reviews{background:var(--bg-dark);padding-block:7rem;position:relative;z-index:2;}
.reviews_inner{max-width:44rem;}
.reviews_heading{font-size:clamp(1.7rem,3.2vw,2.4rem);text-align:center;margin-bottom:3rem;line-height:1.35;}
.reviews_list{display:flex;flex-direction:column;gap:1.25rem;}
.review_bubble{
  position:relative;max-width:80%;
  background:var(--bg-dark-2);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
  padding:1.25rem 1.4rem;
  border-radius:1rem;
}
.review_bubble--start{align-self:flex-start;border-start-start-radius:.25rem;}
.review_bubble--end{align-self:flex-end;border-start-end-radius:.25rem;}
.review_msg{color:var(--text-dim);font-size:.95rem;line-height:1.65;margin-bottom:.85rem;}
.review_meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.review_author{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--gold-soft);}
.review_check{color:#25d366;font-size:.8rem;letter-spacing:-.05em;}

@media (max-width:640px){
  .review_bubble{max-width:92%;}
}

/* ---------- faq ---------- */
.faq{background:var(--bg-dark);padding-block:7rem;position:relative;z-index:2;}
.faq_inner{max-width:52rem;}
.faq_heading{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:2.5rem;text-align:center;}
.faq_item{border-bottom:1px solid var(--line-dark);}
.faq_q{
  width:100%;text-align:start;padding-block:1.5rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
}
.faq_q::after{
  content:'+';font-size:1.4rem;color:var(--gold-soft);flex:none;
  transition:transform .4s var(--ease);
}
.faq_item.open .faq_q::after{transform:rotate(45deg);}
.faq_a{overflow:hidden;} /* height animated by GSAP in script.js */
.faq_a p{color:var(--text-dim);line-height:1.75;padding-bottom:1.5rem;max-width:42rem;}

/* ---------- cta ---------- */
.cta{
  padding-block:8rem;text-align:center;position:relative;z-index:2;overflow:hidden;
  /* dark base — visible before the video loads (preload="none", lazy-loaded
     below) and the fallback if it fails or autoplay is blocked. */
  background:radial-gradient(ellipse at 50% 100%, #241a0d, var(--bg-dark) 65%);
}
/* background video: absolutely positioned and sized off the section's own
   box (driven purely by cta_inner's in-flow content), so it can never cause
   layout shift regardless of when/whether it finishes loading. */
.cta_media{position:absolute;inset:0;z-index:0;}
.cta_media_video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg-dark-2);}
/* scrim — dark center keeps the CTA text and button clearly readable; the
   gold cracks live mostly at the frame's edges/corners in this clip, so
   letting the edges stay a bit lighter shows them off as a subtle accent
   without ever competing with the text. */
.cta_scrim{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.4) 100%);
}
.cta_inner{position:relative;z-index:2;max-width:40rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:1.4rem;}
.cta_title{font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.25;}
.cta_text{color:var(--text-dim);line-height:1.7;}
.cta_btn{margin-top:1rem;}

/* ---------- footer ---------- */
.footer{background:var(--bg-dark-2);padding-block:3.5rem 2rem;border-block-start:1px solid var(--line-dark);}
.footer_grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;}
.footer_col{display:flex;flex-direction:column;}
.footer_col_title{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--white);margin-bottom:.5rem;}
.footer_col a{
  color:var(--text-dim);font-size:.9rem;
  display:flex;align-items:center;min-height:2.75rem; /* 44px min tap target */
}
.footer_col a:hover,.footer_col a:focus-visible{color:var(--gold-soft);}
.footer_col--legal a{color:var(--text-mute);font-size:.82rem;}
.footer_col--legal a[aria-current="page"]{color:var(--gold-soft);font-weight:600;}
.footer_brand_link{display:inline-block;margin-bottom:1rem;}
.footer_brand_img{height:52px;width:auto;display:block;}
.footer_tagline{color:var(--text-mute);font-size:.85rem;line-height:1.6;max-width:22rem;margin-bottom:1rem;}
.footer_contact{display:flex;flex-wrap:wrap;gap:1.25rem;}
.footer_contact_link{
  color:var(--text-dim);font-size:.9rem;
  display:flex;align-items:center;min-height:2.75rem;
}
.footer_contact_link:hover,.footer_contact_link:focus-visible{color:var(--gold-soft);}
.footer_bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);text-align:center;}
.footer_copy{color:var(--text-mute);font-size:.78rem;line-height:1.6;}

/* builder credit — visually subordinate to footer_copy: smaller, dimmer,
   sits just below it. The 44px min-height pads the tap target without
   inflating the visible text+logo, which stay small. */
.footer_credit{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:2.75rem;padding:.5rem;margin-top:.25rem;
  color:var(--text-mute);font-size:.72rem;opacity:.7;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.footer_credit_logo{height:40px;width:auto;display:block;}
@media (hover:hover){
  .footer_credit:hover{opacity:1;transform:translateY(-1px);}
}
.footer_credit:focus-visible{opacity:1;outline:2px solid var(--gold-soft);outline-offset:2px;}

.footer_col a:focus-visible,
.footer_contact_link:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}

@media (max-width:700px){
  .footer_grid{grid-template-columns:1fr;gap:1.5rem;}
}

/* ---------- floating whatsapp ---------- */
.floating_wa{
  position:fixed;inset-inline-start:1.4rem;inset-block-end:1.4rem;z-index:400;
  width:3.4rem;height:3.4rem;border-radius:50%;
  background:#25d366;color:#0d1a12;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-float);
  transition:transform .35s var(--ease);
}
.floating_wa:hover{transform:scale(1.08);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .navbar_inner{justify-content:space-between;}
  .navbar_menu_btn{display:flex;}

  /* mobile nav becomes a right-anchored drawer; kept in the DOM (not
     display:none) so the slide transition can run, but visibility:hidden
     while closed both hides it visually and removes it from tab order —
     no per-link tabindex juggling needed in JS. */
  .navbar_nav{
    position:fixed;inset-block:0;right:0;
    width:min(78vw,20rem);
    flex-direction:column;align-items:flex-start;
    gap:.25rem;
    padding:6rem 1.75rem 2rem;
    background:rgba(18,18,18,.98);
    -webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);
    box-shadow:var(--shadow-float);
    z-index:950;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .4s var(--ease), visibility 0s linear .4s;
  }
  .navbar_nav.open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .4s var(--ease), visibility 0s linear 0s;
  }
  .navbar_link{font-size:1.05rem;padding-block:.65rem;width:100%;}

  .lead_form{flex-direction:column;align-items:stretch;}
  .lead_fields{justify-content:flex-start;}
  .process_row{grid-template-columns:2.5rem 1fr;}
  .process_row_text{grid-column:1/-1;}
}
@media (max-width:560px){
  .navbar{inset-inline:.6rem;}
  .navbar_inner{padding-inline:1rem;}
  .navbar_logo_img{height:32px;}
  .lead_fields input:not([type="checkbox"]),.lead_fields select{min-width:100%;}
}

/* ---------- legal pages (accessibility / privacy / terms / cancellation) ----------
   Static, no scroll animation by design — these are read-first compliance
   documents, not marketing sections, so there's nothing to gate behind
   prefers-reduced-motion here. ---------- */
.legal_header{background:var(--bg-dark-2);border-bottom:1px solid var(--line-dark);padding-block:1.1rem;}
.legal_header_inner{display:flex;align-items:center;justify-content:space-between;}
.legal_header_logo_img{height:36px;width:auto;display:block;}
.legal_header_back{
  font-size:.9rem;color:var(--text-dim);
  display:flex;align-items:center;gap:.4rem;min-height:2.75rem;
}
.legal_header_back:hover,.legal_header_back:focus-visible{color:var(--gold-soft);}

.legal_main{background:var(--bg-dark);padding-block:4rem 6rem;}
.legal_content{max-width:46rem;}
.legal_title{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.3;margin-bottom:.5rem;}
.legal_updated{color:var(--text-mute);font-size:.85rem;margin-bottom:2.5rem;}
.legal_content h2{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--gold-soft);margin:2.5rem 0 .9rem;}
.legal_content h2:first-of-type{margin-top:0;}
.legal_content h3{font-family:var(--font-display);font-weight:700;font-size:1.02rem;margin:1.5rem 0 .6rem;}
.legal_content p{color:var(--text-dim);line-height:1.8;margin-bottom:1rem;}
.legal_content ul{margin:0 0 1.25rem;padding-inline-start:1.4rem;color:var(--text-dim);line-height:1.8;}
.legal_content li{margin-bottom:.45rem;}
.legal_content a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:.15em;}
.legal_content a:hover,.legal_content a:focus-visible{color:var(--gold);}
.legal_content a:focus-visible,
.legal_header_back:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}

@media (max-width:560px){
  .legal_main{padding-block:3rem 4rem;}
}