/* ==========================================================================
   BRIDGE CPA LLC — VERSION 4
   Layout and content structure modelled on the client's reference site,
   rebuilt in Bridge CPA's brand (purple + gold) with Bridge's own copy.

   Sections, in order
     header (floating pill) · hero with circular video · trust strip
     · compare panel · industries · services diagram · services detail
     · stats band · testimonials · stress CTA · footer

   Things the firm still has to supply are written in [SQUARE BRACKETS]
   and highlighted, so they cannot ship by accident. Photos and the hero
   video fall back to designed placeholders until the files are added to
   /img — see UPLOAD-INSTRUCTIONS.txt.
   ========================================================================== */

:root{
  --p-950:#1B1236;
  --p-900:#231746;   /* footer */
  --p-800:#2E1F5E;   /* headings, stats band */
  --p-700:#3E2674;   /* brand deep (logo swoosh) */
  --p-600:#51409B;   /* brand purple (logo bars) */
  --p-500:#6A58B8;
  --p-300:#A094DD;   /* the light first word of the hero */
  --p-100:#ECEAF5;
  --p-50: #F4F3F9;

  --gold:#C39320;
  --gold-soft:#E3B84F;
  --red:#B3261E;

  --hero-bg:#EFEEF5;
  --panel:#ECEBF3;
  --ink:#2E1F5E;
  --body:#433B63;
  --muted:#6E678A;
  --line:#DCD8EA;

  --shell:1210px;
  --gut:clamp(20px,4.5vw,48px);
  --r-xl:48px;
  --r-lg:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* hidden always wins over component display rules */
html{ scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%; overflow-x:clip; }
main,footer{ overflow-x:clip; }
body{
  margin:0; background:#fff; color:var(--body);
  font-family:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

h1,h2,h3,h4{
  font-family:"Outfit",ui-sans-serif,system-ui,sans-serif;
  font-weight:400; color:var(--ink);
  line-height:1.12; letter-spacing:-0.01em; margin:0;
}
.gold{ color:var(--gold); }

.shell{ width:min(var(--shell),100% - var(--gut)*2); margin-inline:auto; }

:focus-visible{ outline:2.5px solid var(--gold); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--p-700); color:#fff; padding:12px 18px; }
.skip:focus{ left:0; }

/* placeholders: impossible to miss */
.ph{
  color:#8A5A00; background:rgba(227,184,79,.22);
  border-bottom:1.5px dashed rgba(195,147,32,.8);
  padding:0 .3em; border-radius:3px; font-weight:600; font-size:.94em;
}
.on-dark .ph{ color:#F6D78A; background:rgba(227,184,79,.16); }

/* kicker above section headings — matches the reference's small caps labels */
.kicker{
  display:block; font-family:"Outfit",sans-serif; font-weight:400;
  font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); margin-bottom:10px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:"Figtree",sans-serif; font-weight:600; font-size:13.5px;
  letter-spacing:.05em; text-transform:uppercase; line-height:1;
  padding:15px 30px; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{ width:26px; height:12px; flex:none; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{ background:var(--p-700); color:#fff; }
.btn-primary:hover{ background:var(--p-800); box-shadow:0 12px 26px -12px rgba(46,31,94,.7); }
.btn-outline-light{ border-color:#fff; color:#fff; background:transparent; }
.btn-outline-light:hover{ background:#fff; color:var(--p-800); }
.btn-white{ background:#fff; color:var(--p-800); }
.btn-white:hover{ background:var(--p-50); }

/* ---------- reveal on scroll ---------- */
/* reveal animations only hide content once the script is known to be running */
.js .aos{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:calc(var(--d,0) * 110ms); }
.js .aos.in{ opacity:1; transform:none; }
.js .aos-left{ transform:translateX(-36px); }
.js .aos-right{ transform:translateX(36px); }
.js .aos-zoom{ transform:scale(.94); }

/* ==========================================================================
   HEADER — floating white pill
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:18px var(--gut) 0;
  transition:padding .35s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.pill{
  pointer-events:auto;
  max-width:1310px; margin-inline:auto;
  background:#fff; border-radius:var(--r-xl);
  display:flex; align-items:center; gap:24px;
  padding:12px 14px 12px 28px;
  box-shadow:0 10px 30px -18px rgba(35,23,70,.35);
  transition:box-shadow .35s var(--ease), padding .35s var(--ease);
}
.site-header.scrolled{ padding-top:10px; }
.site-header.scrolled .pill{ box-shadow:0 14px 40px -16px rgba(35,23,70,.45); padding-block:8px; }
.logo img{ height:50px; width:auto; transition:height .35s var(--ease); }
.site-header.scrolled .logo img{ height:42px; }

.menu{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.menu > li{ position:relative; }
.menu > li > a, .menu > li > button{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer;
  font-family:"Figtree",sans-serif; font-size:14.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink); padding:12px 12px;
  border-radius:100px;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.menu > li > a:hover, .menu > li > button:hover{ color:var(--p-600); }
.chev{ width:10px; height:10px; transition:transform .25s var(--ease); }
.has-drop:hover .chev, .has-drop:focus-within .chev{ transform:rotate(180deg); }
.drop{
  position:absolute; top:calc(100% + 6px); left:50%;
  min-width:250px; transform:translate(-50%,8px);
  background:#fff; border-radius:22px;
  box-shadow:0 24px 50px -20px rgba(35,23,70,.4), 0 0 0 1px rgba(35,23,70,.05);
  padding:12px; opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.drop::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.has-drop:hover .drop, .has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.drop a{
  display:block; padding:10px 16px; border-radius:12px;
  font-size:15px; color:var(--body); font-weight:500;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.drop a:hover{ background:var(--p-50); color:var(--p-700); }
.drop .all{ margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 12px 12px; color:var(--p-600); font-weight:600; }

.header-cta{ margin-left:10px; }
.header-cta .btn{ padding:16px 28px; font-size:14px; }

.burger{
  display:none; margin-left:auto; width:48px; height:48px; border-radius:50%;
  background:var(--p-50); border:0; cursor:pointer; align-items:center; justify-content:center;
}
.burger span, .burger span::before, .burger span::after{
  display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  position:relative; transition:transform .3s var(--ease), background-color .2s;
}
.burger span::before, .burger span::after{ content:""; position:absolute; left:0; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  pointer-events:auto;
  display:none; max-width:1310px; margin:10px auto 0;
  background:#fff; border-radius:28px; padding:14px 22px 22px;
  box-shadow:0 20px 50px -20px rgba(35,23,70,.45);
  max-height:calc(100vh - 110px); overflow:auto;
}
.mobile-nav.open{ display:block; }
.mobile-nav h5{ margin:14px 0 4px; font-family:"Outfit",sans-serif; font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.mobile-nav a{ display:block; padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink); font-weight:500; }
.mobile-nav .btn{ margin-top:18px; width:100%; border-bottom:0; color:#fff; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--hero-bg);
  min-height:clamp(620px, 50vw, 760px);
  display:flex; align-items:center;
  padding-top:120px; padding-bottom:70px;
}
/* big faint brand mark behind the headline, like the reference's tree */
.hero-watermark{
  position:absolute; left:4%; top:50%;
  width:clamp(380px,40vw,620px); aspect-ratio:568/900;
  transform:translateY(-44%);
  background:url("../img/bridge-mark-white.png") center/contain no-repeat;
  opacity:.6; pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; width:min(var(--shell),100% - var(--gut)*2); margin-inline:auto; }
.hero-copy{ max-width:520px; }
.hero h1{
  font-size:clamp(46px,5.4vw,78px); font-weight:400;
  line-height:1.03; letter-spacing:-0.015em;
  color:var(--p-800); margin-bottom:32px;
}
.hero h1 .lt{ display:block; color:var(--p-300); }
.hero p{ font-size:17px; line-height:1.65; color:var(--body); max-width:470px; margin-bottom:30px; }
.hero .btn{ min-width:min(100%,400px); }

/* the circular video, bleeding off the right edge */
.hero-circle{
  position:absolute; z-index:1;
  left:51%; top:50%;
  width:clamp(640px,68vw,1040px); aspect-ratio:1;
  transform:translateY(-50%);
  border-radius:50%; overflow:hidden;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(160,148,221,.55), transparent 70%),
    radial-gradient(70% 70% at 70% 80%, rgba(195,147,32,.35), transparent 70%),
    linear-gradient(140deg, var(--p-700), var(--p-900));
  box-shadow:0 40px 80px -40px rgba(35,23,70,.55);
}
.hero-circle::before{
  /* placeholder mark, only seen until the video plays */
  content:""; position:absolute; left:18%; top:50%;
  width:22%; aspect-ratio:568/900; transform:translateY(-50%);
  background:url("../img/bridge-mark-white.png") center/contain no-repeat;
  opacity:.16;
}
.hero-circle .shine{
  position:absolute; inset:0;
  background:conic-gradient(from 0deg at 40% 50%, transparent 0 70%, rgba(255,255,255,.10) 80%, transparent 90%);
  animation:spin 14s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-circle video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1s var(--ease);
}
.hero-circle.playing video{ opacity:1; }
.hero-circle.playing .shine, .hero-circle.playing .vid-note{ display:none; }
.vid-note{
  position:absolute; left:14%; bottom:24%;
  color:rgba(255,255,255,.75); font-size:13px; font-weight:600; letter-spacing:.02em;
}

/* ==========================================================================
   TRUST STRIP (marquee)
   ========================================================================== */
.strip{ padding:34px 0; background:#fff; overflow:hidden; border-bottom:1px solid var(--p-50); }
.strip-track{ display:flex; gap:64px; width:max-content; animation:marq 40s linear infinite; align-items:center; }
.strip:hover .strip-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.mark-item{
  display:flex; align-items:center; gap:12px; white-space:nowrap;
  font-family:"Outfit",sans-serif; font-size:21px; font-weight:500;
  color:#8B85A3; letter-spacing:-.01em;
  filter:grayscale(1); opacity:.9;
  transition:color .25s, filter .25s;
}
.mark-item:hover{ color:var(--p-600); filter:none; }
.mark-item .ico{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--p-50); color:var(--p-600);
}
.mark-item .ico svg{ width:20px; height:20px; }

/* ==========================================================================
   COMPARE — "done right"
   ========================================================================== */
.compare-wrap{ padding:90px 0 70px; }
.compare{
  background:var(--panel); border-radius:var(--r-xl);
  padding:clamp(40px,5vw,64px) clamp(20px,5vw,64px) clamp(44px,5vw,64px);
  text-align:center;
}
.compare .icon{ width:52px; margin:0 auto 18px; }
.compare h2{ font-size:clamp(32px,3.6vw,48px); margin-bottom:42px; }
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:1000px; margin:0 auto 44px; }
.ccard{
  border-radius:var(--r-lg); padding:34px 44px 38px; text-align:left;
  box-shadow:0 26px 48px -26px rgba(35,23,70,.32);
}
.ccard.bad{ background:#F7F7FA; }
.ccard.good{ background:#fff; }
.ccard h3{ font-size:clamp(24px,2.3vw,30px); text-align:center; margin-bottom:22px; }
.ccard.bad h3{ color:var(--red); }
.ccard li{ display:flex; align-items:flex-start; gap:14px; padding:9px 0; font-size:16px; color:var(--ink); }
.ccard li svg{ width:22px; height:22px; flex:none; margin-top:1px; }
.ccard.bad li svg{ color:var(--red); }
.ccard.good li svg{ color:var(--p-600); }

/* ==========================================================================
   INDUSTRIES
   ========================================================================== */
.industries{ position:relative; padding:60px 0 110px; overflow:hidden; }
.industries .map{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  width:min(1250px,110vw); opacity:.55; pointer-events:none;
}
.pin{
  position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 6px rgba(195,147,32,.25);
}
.pin::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(195,147,32,.55);
  animation:ping 2.4s var(--ease-out) infinite;
}
@keyframes ping{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(2.6); opacity:0; } }
.pin-label{
  position:absolute; transform:translate(14px,-50%);
  font-size:12px; font-weight:700; color:var(--p-700); white-space:nowrap;
  background:#fff; padding:3px 10px; border-radius:100px;
  box-shadow:0 6px 16px -8px rgba(35,23,70,.4);
}

.ind-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.circles{ position:relative; height:clamp(460px,44vw,600px); }
.circ{
  position:absolute; border-radius:50%; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(35,23,70,.5);
}
.circ.big{ width:clamp(300px,33vw,460px); aspect-ratio:1; left:12%; top:0; }
.circ.small{ width:clamp(200px,21vw,290px); aspect-ratio:1; left:0; bottom:0; }
.tag{
  position:absolute; z-index:3;
  background:#fff; color:var(--ink);
  font-size:15px; font-weight:500;
  padding:8px 18px; border-radius:100px;
  box-shadow:0 10px 24px -12px rgba(35,23,70,.45);
  white-space:nowrap;
}
.tag.t1{ left:8%; top:13%; }
.tag.t2{ left:clamp(150px,17vw,230px); bottom:15%; }

.ind-copy h2{ font-size:clamp(32px,3.4vw,46px); margin-bottom:36px; }
.bullets{ display:grid; grid-template-columns:1fr 1fr; gap:4px 34px; margin-bottom:40px; max-width:520px; }
.bullets li{ position:relative; padding-left:24px; font-size:16px; color:var(--ink); line-height:1.9; }
.bullets li::before{ content:""; position:absolute; left:4px; top:.8em; width:6px; height:6px; background:var(--p-700); border-radius:1px; }

/* ==========================================================================
   PHOTO SLOTS — designed fallbacks until real photos are dropped into /img
   ========================================================================== */
.photo{
  position:absolute; inset:0;
  background:
    radial-gradient(65% 65% at 30% 25%, rgba(160,148,221,.6), transparent 70%),
    radial-gradient(60% 60% at 80% 85%, rgba(195,147,32,.35), transparent 70%),
    linear-gradient(150deg, var(--p-600), var(--p-800));
  background-size:cover; background-position:center;
  display:grid; place-items:center; text-align:center;
}
.photo .ph-note{
  color:rgba(255,255,255,.85); font-size:13px; font-weight:600; line-height:1.4;
  max-width:70%; padding:8px 12px; border:1.5px dashed rgba(255,255,255,.45); border-radius:12px;
}
.photo.loaded .ph-note{ display:none; }

/* ==========================================================================
   SERVICES — petal diagram
   ========================================================================== */
.services{ padding:100px 0 110px; background:linear-gradient(180deg,#fff, var(--p-50) 60%, #fff); }
.svc-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.svc-copy h2{ font-size:clamp(32px,3.4vw,46px); margin-bottom:38px; max-width:560px; }

.diagram{ display:grid; grid-template-columns:1fr minmax(210px,260px) 1fr; align-items:center; gap:0; margin-bottom:42px; }
.callouts{ display:flex; flex-direction:column; gap:30px; }
.callout{ position:relative; font-size:13px; line-height:1.4; }
.callout strong{ display:block; font-family:"Outfit",sans-serif; font-weight:500; font-size:15px; color:var(--ink); margin-bottom:5px; }
.callout span{ display:block; color:var(--muted); padding-left:10px; border-left:2px solid var(--gold-soft); }
.callouts.left{ text-align:left; padding-right:14px; }
.callouts.right{ text-align:left; padding-left:14px; }
.callout::after{
  content:""; position:absolute; top:9px; width:28px; height:1.5px; background:var(--p-300);
}
.callouts.left .callout::after{ right:-14px; }
.callouts.right .callout::after{ left:-42px; }
.callout::before{
  content:""; position:absolute; top:6px; width:8px; height:8px; border-radius:50%;
  background:var(--p-600);
}
.callouts.left .callout::before{ right:10px; }
.callouts.right .callout::before{ left:-46px; }
.callouts.left .callout::before, .callouts.right .callout::before{ display:none; }

.petals{ width:100%; aspect-ratio:1; }
.petals svg{ width:100%; height:100%; overflow:visible; }
[data-ring]{ transform-box:fill-box; transform-origin:center; transition:transform .2s linear; }

.svc-photo{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1.02; box-shadow:0 30px 60px -30px rgba(35,23,70,.45); }

/* service detail cards */
.svc-detail{ padding:0 0 110px; }
.svc-detail .head{ text-align:center; max-width:720px; margin:0 auto 46px; }
.svc-detail h2{ font-size:clamp(30px,3.2vw,42px); margin-bottom:14px; }
.svc-detail .head p{ color:var(--muted); font-size:17px; }
.svc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 30px 30px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.svc-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--p-600),var(--gold-soft));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease);
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(35,23,70,.4); border-color:transparent; }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-card .num{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--p-50); color:var(--p-600); margin-bottom:20px;
}
.svc-card .num svg{ width:24px; height:24px; }
.svc-card h3{ font-size:22px; font-weight:500; margin-bottom:8px; }
.svc-card .lead{ color:var(--p-600); font-weight:600; font-size:15px; margin-bottom:12px; }
.svc-card p{ font-size:15px; color:var(--body); margin-bottom:16px; }
.svc-card li{ position:relative; padding-left:20px; font-size:14px; color:var(--muted); margin-bottom:6px; }
.svc-card li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--gold); border-radius:2px; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats{ background:var(--p-800); color:#fff; padding:56px 0 60px; position:relative; overflow:hidden; }
.stats::before{
  content:""; position:absolute; right:-80px; top:-60px; width:340px; aspect-ratio:568/900;
  background:url("../img/bridge-mark-white.png") center/contain no-repeat; opacity:.05;
}
.stat-grid{ display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; gap:30px; }
.stat .n{
  font-family:"Outfit",sans-serif; font-weight:300;
  font-size:clamp(44px,5vw,72px); line-height:1; letter-spacing:-.02em;
  padding-bottom:14px; border-bottom:1.5px solid rgba(255,255,255,.55);
  margin-bottom:14px; display:inline-block; min-width:140px;
  font-variant-numeric:tabular-nums;
}
.stat .l{ font-size:16px; color:#D9D4EE; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi{ padding:100px 0 110px; text-align:center; }
.testi h2{ font-size:clamp(32px,3.6vw,48px); margin-bottom:56px; }
.carousel{ position:relative; padding:0 64px; }
.track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*24px)/3);
  gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding:6px 2px 10px;
}
.track::-webkit-scrollbar{ display:none; }
.quote{
  margin:0; scroll-snap-align:start; text-align:left;
  border:1.5px solid var(--gold-soft); border-radius:var(--r-lg);
  padding:36px 32px 30px; display:flex; flex-direction:column; justify-content:space-between;
  background:#fff; min-height:380px;
}
.quote blockquote{ margin:0 0 30px; font-size:15.5px; line-height:1.75; color:var(--ink); }
.who{ display:flex; align-items:center; gap:16px; }
.avatar{
  width:62px; height:62px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--p-50); color:var(--p-600); font-family:"Outfit",sans-serif; font-weight:500; font-size:18px;
  border:1.5px dashed var(--p-300);
}
.who b{ display:block; font-family:"Outfit",sans-serif; font-weight:400; font-size:17px; color:var(--ink); }
.who small{ font-size:13px; color:var(--muted); line-height:1.45; display:block; }
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border:0; background:none; cursor:pointer; color:var(--ink);
  display:grid; place-items:center; border-radius:50%;
  transition:background-color .2s, color .2s, opacity .2s;
}
.arrow:hover{ background:var(--p-50); color:var(--p-600); }
.arrow[disabled]{ opacity:.25; cursor:default; background:none; }
.arrow svg{ width:34px; height:16px; }
.arrow.prev{ left:0; } .arrow.next{ right:0; }
.testi-note{ margin-top:26px; font-size:13.5px; color:var(--muted); }

/* ==========================================================================
   STRESS CTA — faux tax form behind a purple wash
   ========================================================================== */
.stress{ position:relative; overflow:hidden; color:#fff; text-align:center; padding:96px 0 104px; background:#E9E8EE; }
.form-bg{
  position:absolute; inset:-12%; transform:rotate(-4deg) scale(1.08);
  font-family:"Times New Roman",Georgia,serif; color:#333;
  filter:blur(1.4px); pointer-events:none; user-select:none;
  background:
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(0,0,0,.35) 58px 59.5px),
    #F4F4F2;
  will-change:transform;
}
.form-bg .fb-in{ position:absolute; left:6%; top:14%; width:120%; }
.fb-row{ display:flex; gap:40px; align-items:flex-end; margin-bottom:18px; white-space:nowrap; }
.fb-big{ font-size:120px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.fb-title{ font-size:56px; font-weight:700; }
.fb-small{ font-size:26px; }
.fb-box{ display:inline-block; border:2px solid #333; padding:6px 20px; font-size:28px; font-weight:700; }
.stress::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(35,23,70,.78), rgba(35,23,70,.86));
}
.stress .shell{ position:relative; z-index:2; }
.headshot{
  width:130px; height:130px; margin:0 auto 26px; position:relative;
  border-radius:50%; overflow:hidden; border:4px solid rgba(255,255,255,.9);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
}
.headshot .photo .ph-note{ font-size:10.5px; max-width:84%; padding:4px 6px; }
.stress h2{ color:#fff; font-size:clamp(32px,3.8vw,50px); margin-bottom:22px; }
.stress p{ max-width:760px; margin:0 auto 34px; font-size:15.5px; line-height:1.75; color:#EEEAF9; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--p-900); color:#D6D1EA; padding:72px 0 0; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; }
.foot .flogo{ height:62px; width:auto; margin-bottom:22px; }
.foot p{ font-size:14.5px; line-height:1.7; }
.foot h5{ margin:6px 0 20px; font-family:"Outfit",sans-serif; font-weight:400; font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.foot li{ margin-bottom:9px; }
.foot li a{ font-size:15px; transition:color .2s; }
.foot li a:hover{ color:var(--gold-soft); }
.contact-list{ margin-top:22px; }
.contact-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; margin-bottom:12px; }
.contact-list svg{ width:18px; height:18px; flex:none; margin-top:3px; color:#fff; }
.loc h6{ margin:22px 0 8px; font-family:"Outfit",sans-serif; font-weight:500; font-size:17px; color:#fff; }

.news p{ margin-bottom:18px; }
.news input{
  width:100%; background:transparent; border:0; border-bottom:1.5px solid rgba(255,255,255,.5);
  padding:12px 2px; font:inherit; font-size:15.5px; color:#fff; margin-bottom:22px;
}
.news input::placeholder{ color:#B6AFD2; }
.news input:focus{ outline:none; border-bottom-color:var(--gold-soft); }
.news .btn{ width:100%; margin-bottom:16px; }
.news small{ display:block; font-size:12.5px; line-height:1.6; color:#B6AFD2; }
.news-msg{ margin-top:10px; font-size:13px; color:var(--gold-soft); min-height:1em; }

.foot-base{
  margin-top:60px; padding:24px 0 28px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
  font-size:13.5px; color:#B6AFD2;
}
.socials{ display:flex; gap:16px; }
.socials a{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; transition:background-color .2s; }
.socials a:hover{ background:rgba(255,255,255,.1); }
.socials svg{ width:18px; height:18px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .menu > li > a, .menu > li > button{ padding:12px 8px; font-size:13.5px; }
  .header-cta .btn{ padding:14px 20px; font-size:13px; }
}
@media (max-width:1040px){
  .menu, .header-cta{ display:none; }
  .burger{ display:flex; }
  .pill{ padding:10px 10px 10px 22px; }

  .hero{ flex-direction:column; align-items:stretch; padding-top:120px; padding-bottom:0; min-height:0; }
  .hero-copy{ max-width:620px; }
  .hero-circle{
    position:relative; left:auto; top:auto; transform:none;
    width:min(640px,112vw); margin:54px auto -26%; align-self:center;
  }
  .ind-grid, .svc-grid{ grid-template-columns:1fr; gap:40px; }
  .circles{ max-width:560px; }
  .svc-cards{ grid-template-columns:1fr 1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; gap:40px 30px; }
  .track{ grid-auto-columns:calc((100% - 24px)/2); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .compare-wrap{ padding:60px 0 40px; }
  .cards2{ grid-template-columns:1fr; }
  .ccard{ padding:30px 26px; }
  .diagram{ grid-template-columns:1fr; gap:26px; }
  .petals{ max-width:260px; margin:0 auto; order:-1; }
  .callouts{ gap:18px; padding:0 !important; }
  .callout::after{ display:none; }
  .svc-cards{ grid-template-columns:1fr; }
  .bullets{ grid-template-columns:1fr; }
  .carousel{ padding:0; }
  .arrow{ display:none; }
  .track{ grid-auto-columns:88%; }
  .foot-grid{ grid-template-columns:1fr; gap:36px; }
  .btn{ white-space:normal; text-align:center; }
  .hero .btn{ width:100%; }
  .tag.t2{ left:120px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
  .aos{ opacity:1 !important; transform:none !important; }
}

/* active page in the menu */
.menu > li > a.current, .menu > li > button.current{ color:var(--p-600); }

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */
.page-hero{
  position:relative; overflow:hidden; background:var(--hero-bg);
  padding:150px 0 110px; min-height:clamp(560px,46vw,700px);
}
.page-hero .hero-copy{ position:relative; z-index:2; max-width:500px; }
.page-hero h1{ font-size:clamp(46px,5.2vw,76px); font-weight:400; line-height:1.03; color:var(--p-800); margin-bottom:30px; }
.page-hero h1 .lt{ display:block; color:var(--p-300); }
.page-hero p{ font-size:17px; max-width:470px; margin-bottom:30px; }

/* three photo circles on the right, like the reference */
.cluster{ position:absolute; inset:0; pointer-events:none; }
.cluster .circ{ position:absolute; border-radius:50%; overflow:hidden; box-shadow:0 30px 60px -30px rgba(35,23,70,.5); }
.cluster .c1{ width:clamp(300px,31vw,450px); aspect-ratio:1; left:50%; top:50%; margin-top:calc(clamp(300px,31vw,450px) * -.5 + 30px); }
.cluster .c2{ width:clamp(170px,17vw,250px); aspect-ratio:1; right:-3%; top:110px; }
.cluster .c3{ width:clamp(190px,19vw,280px); aspect-ratio:1; right:-6%; bottom:-40px; }

/* large diagram */
.diagram-lg{ padding:90px 0 40px; }
.diagram-lg svg{ width:100%; height:auto; display:block; max-width:1060px; margin:0 auto; overflow:visible; }
.diagram-lg .t{ font-family:"Outfit",sans-serif; font-size:22px; font-weight:500; fill:var(--ink); }
.diagram-lg .s{ font-family:"Figtree",sans-serif; font-size:15.5px; fill:var(--body); }
.diagram-lg .callouts-m{ display:none; }

.eyebrow-center{ text-align:center; margin:40px 0 56px; }

.feature{ padding:30px 0 90px; }
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.feature-row + .feature-row{ margin-top:90px; }
.feature-row.flip .feature-img{ order:2; }
.feature-img{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1.38; box-shadow:0 30px 60px -32px rgba(35,23,70,.45); }
.feature-copy h2{ font-size:clamp(34px,3.6vw,50px); margin-bottom:24px; }
.feature-copy p{ margin-bottom:16px; font-size:15.5px; max-width:540px; }
.feature-copy .btn{ margin-top:14px; }

.included{ background:var(--p-800); color:#E6E1F5; padding:100px 0; }
.inc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.inc-img{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1.3; margin-bottom:30px; }
.included h3{ color:#fff; font-size:clamp(28px,2.6vw,36px); margin-bottom:18px; }
.included h3 .gold{ color:var(--gold-soft); }
.included p{ font-size:15.5px; line-height:1.75; margin-bottom:28px; }
.btn-outline-gold{ width:100%; border-color:var(--gold-soft); color:#fff; background:transparent; }
.btn-outline-gold:hover{ background:var(--gold-soft); color:var(--p-900); }

.ind-icons{ padding:100px 0 60px; text-align:center; }
.ind-icons h2{ font-size:clamp(34px,3.6vw,48px); max-width:640px; margin:0 auto 24px; }
.ind-icons .intro{ max-width:780px; margin:0 auto 14px; font-size:15.5px; }
.ind-icons .intro + .intro{ margin-bottom:60px; }
.icon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px 24px; max-width:1060px; margin:0 auto; }
.icon-cell svg{ width:40px; height:40px; color:var(--p-600); margin:0 auto 12px; display:block; transition:transform .35s var(--ease), color .25s; }
.icon-cell:hover svg{ transform:translateY(-4px); color:var(--gold); }
.icon-cell span{ font-family:"Outfit",sans-serif; font-size:19px; color:var(--ink); }

.svc-detail{ padding-top:40px; }

/* ==========================================================================
   SCHEDULE PAGE
   ========================================================================== */
.sched-hero{ position:relative; overflow:hidden; background:var(--hero-bg); padding:160px 0 110px; }
.sched-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr minmax(0,560px); gap:60px; align-items:center; }
.sched-hero h1{ font-size:clamp(44px,5vw,72px); font-weight:400; line-height:1.05; color:var(--p-800); margin-bottom:42px; }
.sched-hero h1 .lt{ color:var(--p-500); }
.meta{ margin-bottom:40px; }
.meta li{ display:flex; gap:14px; align-items:flex-start; font-size:16.5px; color:var(--ink); margin-bottom:16px; max-width:360px; }
.meta svg{ width:22px; height:22px; flex:none; color:var(--p-600); margin-top:2px; }

.cal-card{ background:#fff; border-radius:var(--r-lg); padding:34px 34px 30px; box-shadow:0 34px 70px -34px rgba(35,23,70,.45); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cal-head h2{ font-size:26px; }
.cal-nav{ display:flex; gap:6px; }
.cal-nav button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink); display:grid; place-items:center; transition:background-color .2s, border-color .2s; }
.cal-nav button:hover:not([disabled]){ background:var(--p-50); border-color:var(--p-300); }
.cal-nav button[disabled]{ opacity:.3; cursor:default; }
.cal-nav svg{ width:16px; height:16px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.cal-grid .dow{ font-size:12.5px; font-weight:600; color:var(--muted); padding:8px 0 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.cal-day{ aspect-ratio:1; border:0; background:none; border-radius:50%; font:inherit; font-size:15px; color:#B9B4CC; cursor:default; }
.cal-day.open{ color:var(--p-700); font-weight:600; background:var(--p-50); cursor:pointer; transition:background-color .2s, color .2s; }
.cal-day.open:hover{ background:var(--p-100); }
.cal-day.sel{ background:var(--p-700); color:#fff; }
.cal-day.today{ box-shadow:inset 0 0 0 1.5px var(--gold-soft); }
.slots{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.slots h3{ font-size:17px; font-weight:500; margin-bottom:12px; }
.slot-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.slot{ border:1.5px solid var(--p-300); background:#fff; color:var(--p-700); border-radius:100px; padding:9px 0; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.slot:hover{ border-color:var(--p-600); }
.slot.sel{ background:var(--p-700); border-color:var(--p-700); color:#fff; }
.cal-confirm{ margin-top:18px; width:100%; }
.cal-msg{ margin-top:14px; font-size:14px; color:var(--p-700); min-height:1.2em; }
.cal-hint{ font-size:14px; color:var(--muted); margin-top:18px; text-align:center; }
.cal-note{ margin-top:12px; font-size:12.5px; text-align:center; }
#bookingEmbed{ min-height:690px; }
#bookingEmbed iframe{ width:100%; height:690px; border:0; border-radius:18px; }

@media (max-width:1040px){
  .page-hero{ padding-bottom:0; }
  .cluster{ position:relative; height:clamp(360px,80vw,520px); margin-top:40px; }
  .cluster .c1{ left:4%; top:auto; bottom:30px; margin-top:0; width:min(62vw,420px); }
  .cluster .c2{ right:4%; top:0; width:min(34vw,230px); }
  .cluster .c3{ right:10%; bottom:0; width:min(30vw,210px); }
  .feature-row{ grid-template-columns:1fr; gap:34px; }
  .feature-row.flip .feature-img{ order:0; }
  .inc-grid{ grid-template-columns:1fr; gap:60px; }
  .icon-grid{ grid-template-columns:repeat(3,1fr); }
  .sched-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .diagram-lg svg .callout-g{ display:none; }
  .diagram-lg svg{ max-width:320px; }
  .diagram-lg .callouts-m{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; margin-top:34px; }
  .icon-grid{ grid-template-columns:repeat(2,1fr); gap:34px 12px; }
  .cal-card{ padding:24px 18px; }
  .slot-list{ grid-template-columns:repeat(3,1fr); }
  .sched-hero{ padding-top:130px; }
}
@media (prefers-reduced-motion:reduce){
  .icon-cell:hover svg{ transform:none; }
}

/* ==========================================================================
   WHATSAPP — floating chat button (all pages) + footer link
   ========================================================================== */
.contact-list a{ transition:color .2s; }
.contact-list a:hover{ color:var(--gold-soft); }
.contact-list li svg[viewBox="0 0 24 24"][fill="currentColor"]{ flex:none; }

.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 14px 30px -10px rgba(18,140,74,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:wa-in .6s var(--ease-out) 1.2s both;
}
.wa-float svg{ width:32px; height:32px; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:wa-ring 2.8s var(--ease-out) 2s infinite;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 36px -10px rgba(18,140,74,.8); }
.wa-tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translate(6px,-50%);
  background:#fff; color:var(--ink); white-space:nowrap;
  font-size:14px; font-weight:600; padding:8px 14px; border-radius:100px;
  box-shadow:0 10px 26px -12px rgba(35,23,70,.45);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip{ opacity:1; transform:translate(0,-50%); }
@keyframes wa-in{ from{ opacity:0; transform:translateY(16px) scale(.85); } to{ opacity:1; transform:none; } }
@keyframes wa-ring{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.55); opacity:0; } }
@media (max-width:700px){
  .wa-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .wa-float svg{ width:29px; height:29px; }
  .wa-tip{ display:none; }
}
@media print{ .wa-float{ display:none; } }

/* the CTA banner shows the Bridge mark instead of a headshot */
.headshot.brand-badge{ background:#fff; display:grid; place-items:center; }
.headshot.brand-badge img{ width:34%; height:auto; }

/* booking requests (used until a Calendly link is added) */
.cal-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.cal-actions .btn{ padding:15px 12px; font-size:12.5px; white-space:normal; }
.cal-actions .btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover:not([disabled]){ background:#1EBE5B; box-shadow:0 12px 26px -12px rgba(18,140,74,.7); }
.cal-note{ color:var(--muted); }
@media (max-width:700px){ .cal-actions{ grid-template-columns:1fr; } }

/* ==========================================================================
   PRIVACY POLICY
   ========================================================================== */
.legal-hero{ background:var(--hero-bg); padding:150px 0 56px; position:relative; overflow:hidden; }
.legal-hero h1{ font-size:clamp(40px,4.6vw,64px); font-weight:400; color:var(--p-800); margin-bottom:12px; position:relative; z-index:2; }
.legal-hero p{ color:var(--muted); position:relative; z-index:2; }
.legal{ padding:64px 0 96px; }
.legal .shell{ max-width:780px; }
.legal h2{ font-size:26px; font-weight:500; margin:44px 0 14px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:18px; font-weight:500; margin:22px 0 8px; }
.legal p{ margin-bottom:14px; font-size:16px; line-height:1.75; }
.legal ul{ margin:0 0 16px; }
.legal li{ position:relative; padding-left:22px; margin-bottom:8px; line-height:1.7; }
.legal li::before{ content:""; position:absolute; left:4px; top:.75em; width:7px; height:2px; background:var(--gold); border-radius:2px; }
.legal a{ color:var(--p-600); text-decoration:underline; text-underline-offset:3px; }
.legal address{ font-style:normal; line-height:1.8; }