/* ============================================================
   SOUTH PERTH DENTAL SURGERY — REDESIGN CONCEPT
   Shoutout Digital. Single-file build for Cloudflare Pages.
   ============================================================ */

:root{
  --navy-900:#10161F;
  --navy-850:#151D29;
  --navy-800:#1B2433;
  --navy-700:#232E41;
  --navy-600:#2E3B52;
  --line:rgba(226,199,133,.18);

  --gold-deep:#A8812C;
  --gold:#C9A14A;
  --gold-soft:#E2C785;
  --gold-bright:#F3E3B8;

  --cream:#FAF8F3;
  --cream-2:#F2EDE3;
  --ink:#121923;
  --body:#4A5565;
  --body-dark:rgba(255,255,255,.74);

  --display:'Apollo','Marcellus',Georgia,serif;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --gutter:clamp(20px,5vw,80px);
  --max:1320px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-weight:200;           /* Poppins ExtraLight, per brand */
  font-size:16.5px;
  line-height:1.85;          /* extralight needs more air to stay readable */
  letter-spacing:.004em;
  color:var(--body);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

h1,h2,h3,h4,.display{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:.005em;color:var(--ink)}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem)}
h2{font-size:clamp(2rem,3.5vw,3.1rem)}
h3{font-size:clamp(1.35rem,2vw,1.85rem)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:clamp(72px,9vw,140px) 0;position:relative}

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-deep);display:inline-flex;align-items:center;gap:14px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.on-dark .eyebrow{color:var(--gold-soft)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:40px;height:1px;background:linear-gradient(270deg,transparent,var(--gold))}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 34px;font-size:.78rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--radius);overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn-gold{
  color:#fff;
  background:linear-gradient(102deg,#9C7726 0%,#C9A14A 38%,#E2C785 62%,#B08C32 100%);
  background-size:220% 100%;background-position:0% 50%;
  box-shadow:0 10px 30px -12px rgba(168,129,44,.7);
  transition:background-position .7s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.btn-gold:hover{background-position:100% 50%;transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(168,129,44,.85)}
.btn-ghost{color:var(--ink);border:1px solid rgba(18,25,35,.22)}
.btn-ghost::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.btn-ghost:hover{color:#fff;border-color:var(--ink)}
.btn-ghost:hover::after{transform:scaleX(1)}
.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.on-dark .btn-ghost::after{background:#fff}
.on-dark .btn-ghost:hover{color:var(--navy-900);border-color:#fff}

.btn-phone{
  display:inline-flex;align-items:center;gap:12px;font-size:.95rem;font-weight:500;letter-spacing:.06em;
  color:var(--ink);transition:color .35s
}
.on-dark .btn-phone{color:#fff}
.btn-phone .ring{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);background:rgba(201,161,74,.1);transition:.45s var(--ease)
}
.btn-phone:hover .ring{background:var(--gold);border-color:var(--gold);transform:scale(1.08)}
.btn-phone .ring svg{width:16px;height:16px;stroke:var(--gold);transition:stroke .4s}
.btn-phone:hover .ring svg{stroke:#fff}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.78rem;font-weight:300;letter-spacing:.04em;color:rgba(255,255,255,.62);
  position:relative;z-index:60;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:46px}
.topbar a{transition:color .35s}
.topbar a:hover{color:var(--gold-soft)}
.topbar .tb-item{display:inline-flex;align-items:center;gap:9px}
.topbar svg{width:14px;height:14px;stroke:var(--gold);flex:none}
.topbar .socials{display:flex;gap:18px}
.tb-emerg{
  display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:40px;
  background:rgba(201,161,74,.12);border:1px solid rgba(226,199,133,.3);
  color:var(--gold-soft)!important;font-weight:400;letter-spacing:.06em;transition:.45s var(--ease)
}
.tb-emerg:hover{background:var(--gold);border-color:var(--gold);color:#fff!important}
.tb-emerg:hover .dot{background:#fff}
.tb-emerg .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold-soft);flex:none;position:relative
}
.tb-emerg .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;
  opacity:.6;animation:pulse 2.2s var(--ease-soft) infinite
}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
.topbar .socials svg{width:15px;height:15px;stroke:none;fill:rgba(255,255,255,.6);transition:fill .35s}
.topbar .socials a:hover svg{fill:var(--gold-soft)}

.header{
  position:sticky;top:0;z-index:50;
  background:rgba(16,22,31,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .5s var(--ease-soft),box-shadow .5s var(--ease-soft);
}
.header.scrolled{background:rgba(16,22,31,.96);box-shadow:0 14px 44px -24px rgba(0,0,0,.9)}
.header .wrap{display:flex;align-items:center;gap:clamp(18px,3vw,48px);min-height:90px;transition:min-height .45s var(--ease-soft)}
.header.scrolled .wrap{min-height:74px}
.logo{flex:none;display:block}
.logo img{height:clamp(42px,4vw,60px);width:auto;max-width:min(300px,30vw);object-fit:contain;transition:height .45s var(--ease-soft)}
.header.scrolled .logo img{height:46px}

.nav{display:flex;align-items:center;gap:clamp(4px,1.4vw,10px);margin-left:auto}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:7px;padding:12px 14px;white-space:nowrap;
  font-family:var(--display);font-size:1rem;letter-spacing:.02em;color:rgba(255,255,255,.88);
  position:relative;transition:color .35s
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)
}
.nav-item:hover .nav-link{color:var(--gold-soft)}
.nav-item:hover .nav-link::after{transform:scaleX(1);transform-origin:left}
.nav-link .chev{width:9px;height:9px;transition:transform .4s var(--ease);opacity:.65}
.nav-item:hover .chev{transform:rotate(180deg)}

/* Dropdowns */
.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  min-width:252px;padding:12px;
  background:rgba(21,29,41,.97);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:6px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.nav-item:hover > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.dropdown a{
  display:block;padding:11px 16px;border-radius:4px;font-size:.88rem;
  color:rgba(255,255,255,.76);transition:.35s var(--ease)
}
.dropdown a:hover{background:rgba(201,161,74,.12);color:var(--gold-soft);padding-left:22px}

/* Mega menu */
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  width:min(1120px,92vw);padding:34px;
  background:rgba(21,29,41,.98);backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:8px;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.95);
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
.nav-item:hover > .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-col{padding:6px 0}
.mega-head{
  display:flex;align-items:center;gap:11px;padding-bottom:12px;margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--display);font-size:1.02rem;color:#fff;transition:color .35s
}
.mega-head:hover{color:var(--gold-soft)}
.mega-head .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(201,161,74,.14);flex:none}
.mega-head .ic svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.5}
.mega-col a.sub{
  display:block;padding:6px 0 6px 41px;font-size:.84rem;color:rgba(255,255,255,.66);
  position:relative;transition:.35s var(--ease)
}
.mega-col a.sub::before{
  content:"";position:absolute;left:30px;top:50%;width:0;height:1px;background:var(--gold);
  transition:width .4s var(--ease);translate:0 -50%
}
.mega-col a.sub:hover{color:var(--gold-soft);padding-left:50px}
.mega-col a.sub:hover::before{width:12px}

.header-cta{display:flex;align-items:center;gap:14px;margin-left:6px}
.hdr-emerg{
  display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:var(--radius);
  border:1px solid rgba(226,199,133,.34);color:var(--gold-soft);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:.5s var(--ease)
}
.hdr-emerg svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none}
.hdr-emerg:hover{background:rgba(201,161,74,.16);border-color:var(--gold);transform:translateY(-2px)}
.burger{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.18);border-radius:4px;place-items:center;flex:none}
.burger span{display:block;width:20px;height:1.5px;background:#fff;margin:4px 0;transition:.4s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:70;background:var(--navy-900);
  padding:100px var(--gutter) 60px;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .75s var(--ease);
}
.drawer.open{clip-path:circle(150% at calc(100% - 46px) 46px)}
.drawer .d-close{position:absolute;top:28px;right:var(--gutter);width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:4px}
.drawer .d-close svg{width:18px;height:18px;stroke:#fff}
.acc{border-bottom:1px solid rgba(255,255,255,.08)}
.acc > button,.acc > a{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:19px 0;font-family:var(--display);font-size:1.2rem;color:#fff;text-align:left
}
.acc .plus{width:12px;height:12px;position:relative;flex:none}
.acc .plus::before,.acc .plus::after{content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:var(--gold);transition:.4s var(--ease)}
.acc .plus::after{transform:rotate(90deg)}
.acc.open .plus::after{transform:rotate(0)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.acc-body a{display:block;padding:10px 0 10px 18px;font-size:.92rem;color:rgba(255,255,255,.62);border-left:1px solid rgba(255,255,255,.1)}
.acc-body .grp{padding:14px 0 6px 18px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.drawer .btn{width:100%;margin-top:30px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:clamp(620px,92vh,980px);display:flex;align-items:center;overflow:hidden;background:var(--navy-900)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  animation:kenburns 22s var(--ease-soft) infinite alternate;opacity:.52}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,var(--navy-900) 6%,rgba(16,22,31,.9) 36%,rgba(16,22,31,.42) 66%,rgba(16,22,31,.72) 100%),
    linear-gradient(180deg,rgba(16,22,31,.85) 0%,transparent 28%,rgba(16,22,31,.9) 100%);
}
.hero-arc{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5}
.hero-arc path{fill:none;stroke:url(#goldline);stroke-width:1.2;
  stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 3.4s 1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-glow{
  position:absolute;width:760px;height:760px;right:-220px;top:-180px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(201,161,74,.17) 0%,transparent 66%);
  animation:float 13s var(--ease-soft) infinite alternate;
}
@keyframes float{to{transform:translate3d(-50px,60px,0) scale(1.1)}}

.hero-inner{position:relative;z-index:3;width:100%;padding-block:clamp(90px,12vh,150px)}
.hero h1{color:#fff;max-width:17ch;margin-bottom:28px}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w > span{display:inline-block;transform:translateY(110%);animation:rise .95s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}
.hero h1 em{font-style:normal;color:var(--gold-soft)}
/* the headline animation splits this into per-word spans, so the gradient has
   to live on whatever actually renders the glyphs — parent or span. */
.hero h1 em,.hero h1 em .w > span{
  background-image:linear-gradient(94deg,var(--gold-soft),var(--gold-bright),var(--gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em,.hero h1 em .w > span{color:var(--gold-soft);-webkit-text-fill-color:currentColor}
}
.hero p.lede{
  max-width:56ch;font-size:clamp(1rem,1.2vw,1.1rem);color:var(--body-dark);line-height:1.85;
  margin-bottom:40px;opacity:0;animation:fadeUp .9s 1.1s var(--ease) forwards
}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;opacity:0;animation:fadeUp .9s 1.3s var(--ease) forwards}
.hero-badges{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,3.4vw,46px);
  margin-top:clamp(46px,6vh,74px);padding-top:34px;border-top:1px solid rgba(255,255,255,.1);
  opacity:0;animation:fadeUp .9s 1.5s var(--ease) forwards
}
.hero-badges img{height:clamp(30px,3.4vw,42px);width:auto;opacity:.92;filter:brightness(1.05);transition:.5s var(--ease)}
.hero-badges a:hover img,.hero-badges img:hover{opacity:1;transform:translateY(-3px)}
.hero-badges .bx{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.scroll-cue{
  position:absolute;bottom:34px;left:50%;translate:-50% 0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);
  opacity:0;animation:fadeUp 1s 1.9s var(--ease) forwards
}
.scroll-cue .bar{width:1px;height:52px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--gold-bright);animation:cue 2.4s var(--ease-soft) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   QUICK ACTIONS (hours / emergency / cover)
   ============================================================ */
.quick{position:relative;z-index:10;background:var(--navy-900);padding-bottom:clamp(40px,5vw,64px)}
.quick .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(-70px,-5vw,-40px)}
.qcard{
  position:relative;overflow:hidden;
  padding:clamp(26px,2.6vw,36px);border-radius:6px;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;
  transition:transform .6s var(--ease),border-color .6s var(--ease),background .6s var(--ease)
}
.qcard:hover{transform:translateY(-7px);border-color:rgba(226,199,133,.5)}
.qcard::after{
  content:"";position:absolute;inset:auto 0 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .7s var(--ease)
}
.qcard:hover::after{transform:scaleX(1)}
.qcard .qhead{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.qcard .qic{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(201,161,74,.16);border:1px solid rgba(226,199,133,.26)
}
.qcard .qic svg{width:20px;height:20px;stroke:var(--gold-soft);fill:none;stroke-width:1.5}
.qcard h3{font-size:1.2rem;color:#fff}
.qcard p{font-size:.9rem;color:var(--body-dark);line-height:1.8;margin-bottom:20px}
.qcard .qlink{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);
  padding-bottom:4px;border-bottom:1px solid rgba(226,199,133,.3);transition:.45s var(--ease)
}
.qcard .qlink svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .45s var(--ease)}
.qcard .qlink:hover{color:#fff;border-color:#fff}
.qcard .qlink:hover svg{transform:translateX(5px)}

/* Opening hours table */
.hours{margin-bottom:20px}
.hours li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 12px;padding:7px 0;font-size:.88rem;color:var(--body-dark);
  border-bottom:1px dashed rgba(255,255,255,.08)
}
.hours .d{display:inline-flex;align-items:baseline;gap:8px;min-width:0}
.hours .t{margin-left:auto}
.hours li:last-child{border-bottom:0}
.hours li.today{color:#fff}
.hours li.today .d::after{
  content:"Today";flex:none;
  font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid rgba(226,199,133,.35);border-radius:30px;padding:2px 7px;
  position:relative;top:-2px
}
.hours .t{font-weight:300;white-space:nowrap;text-align:right}
.placeholder{
  display:inline-block;margin-top:6px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:#E3B7B7;background:rgba(190,80,80,.16);border:1px dashed rgba(220,140,140,.45);
  padding:5px 11px;border-radius:4px
}
/* In the 3-up band the card gets too narrow for the word "Today" plus a
   time range, so the chip becomes a dot and the row stays on one line. */
@media(min-width:1025px) and (max-width:1300px){
  .hours li.today .d::after{
    content:"";width:6px;height:6px;border-radius:50%;padding:0;top:-3px;
    background:var(--gold-soft);border:0
  }
  .hours li{font-size:.84rem}
}

.qcard.emergency{background:linear-gradient(150deg,rgba(201,161,74,.18),rgba(201,161,74,.04));border-color:rgba(226,199,133,.34)}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(201,161,74,.1),transparent 62%),
    var(--navy-850);
}
.stats::before,.stats::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,199,133,.42),transparent)
}
.stats::before{top:0}.stats::after{bottom:0}
.stats .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-block:clamp(44px,5vw,68px)
}
.stat{
  padding:clamp(6px,1vw,14px) clamp(14px,2vw,30px);
  text-align:center;position:relative;
  transition:transform .6s var(--ease)
}
/* hairline dividers between cells, never at the outer edges */
.stat + .stat::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)
}
.stat:hover{transform:translateY(-5px)}
.stat .sic{
  width:40px;height:40px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(201,161,74,.12);border:1px solid rgba(226,199,133,.26);
  transition:.55s var(--ease)
}
.stat .sic svg{width:18px;height:18px;stroke:var(--gold-soft);fill:none;stroke-width:1.4}
.stat:hover .sic{background:rgba(201,161,74,.26);border-color:var(--gold);transform:scale(1.08)}
.stat .num{
  font-family:var(--display);font-size:clamp(2.1rem,3.4vw,3.1rem);
  line-height:1;margin-bottom:14px;
  background:linear-gradient(170deg,var(--gold-bright) 0%,var(--gold-soft) 45%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.stat .lbl{
  font-size:.68rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);line-height:1.8
}
.stat .sub{
  display:block;margin-top:12px;font-size:.78rem;letter-spacing:normal;text-transform:none;
  color:rgba(255,255,255,.34);font-weight:200;line-height:1.6
}

/* ============================================================
   REVEAL UTILITY
   ============================================================ */
.rv{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-48px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv-r{opacity:0;transform:translateX(48px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
.rv-mask{position:relative;overflow:hidden}
.rv-mask::after{content:"";position:absolute;inset:0;background:var(--navy-900);transform-origin:right;transition:transform 1.1s var(--ease)}
.rv-mask.in::after{transform:scaleX(0)}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--cream)}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,88px);align-items:center}
.about-visual{position:relative}
.about-visual .frame{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/4.6}
.about-visual .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.about-visual:hover .frame img{transform:scale(1.06)}
.about-visual .edge{position:absolute;inset:26px -26px -26px 26px;border:1px solid var(--gold);border-radius:6px;z-index:-1}
.about-visual .chip{
  position:absolute;left:-10px;bottom:34px;z-index:4;
  background:var(--navy-900);color:#fff;padding:22px 30px;border-radius:5px;
  border-left:2px solid var(--gold);box-shadow:0 30px 60px -28px rgba(0,0,0,.6)
}
.about-visual .chip .big{font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--gold-soft)}
.about-visual .chip .sm{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:7px}
.about-copy h2{margin-bottom:26px;max-width:18ch}
.about-copy p{margin-bottom:20px;max-width:62ch}
.about-copy a.inline{color:var(--gold-deep);border-bottom:1px solid rgba(168,129,44,.35);transition:.35s}
.about-copy a.inline:hover{border-color:var(--gold-deep)}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:34px}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why{background:var(--navy-900);color:var(--body-dark);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;width:620px;height:620px;left:-240px;bottom:-200px;
  background:radial-gradient(circle,rgba(201,161,74,.12),transparent 68%)}
.why-head{text-align:center;max-width:720px;margin:0 auto clamp(54px,7vw,88px)}
.why-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,84px);align-items:center;margin-bottom:clamp(60px,8vw,118px)}
.why-row:last-child{margin-bottom:0}
.why-row:nth-child(even) .why-visual{order:2}
.why-visual{position:relative;border-radius:6px;overflow:hidden}
.why-visual img{width:100%;aspect-ratio:16/12;object-fit:cover;transition:transform 1.5s var(--ease)}
.why-row:hover .why-visual img{transform:scale(1.05)}
.why-visual::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:6px;pointer-events:none}
.why-visual .idx{
  position:absolute;top:22px;left:22px;z-index:3;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(16,22,31,.72);backdrop-filter:blur(8px);border:1px solid var(--line);
  font-family:var(--display);font-size:1.15rem;color:var(--gold-soft)
}
.why-copy h3{margin-bottom:20px;max-width:24ch}
.why-copy p{margin-bottom:18px;max-width:58ch}
.why-copy a.inline{color:var(--gold-soft);border-bottom:1px solid rgba(226,199,133,.3)}
.why-copy .btn{margin-top:16px}

/* ============================================================
   OFFERS
   ============================================================ */
.offers{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%)}
.offers-head{text-align:center;max-width:760px;margin:0 auto 20px}
.offers-head h2{margin-bottom:22px}
.offers-note{
  max-width:860px;margin:0 auto clamp(46px,6vw,70px);text-align:center;
  font-size:.82rem;line-height:1.85;color:#7A8595;font-style:italic;
  padding:18px 26px;border-top:1px solid rgba(18,25,35,.1);border-bottom:1px solid rgba(18,25,35,.1)
}
.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.offer{
  background:#fff;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(18,25,35,.07);
  box-shadow:0 2px 10px -4px rgba(18,25,35,.08);
  transition:transform .65s var(--ease),box-shadow .65s var(--ease),border-color .65s var(--ease)
}
.offer:hover{transform:translateY(-10px);box-shadow:0 36px 64px -32px rgba(18,25,35,.34);border-color:rgba(201,161,74,.5)}
.offer-img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--navy-800)}
.offer-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.offer:hover .offer-img img{transform:scale(1.08)}
.offer-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(16,22,31,.5));opacity:0;transition:opacity .6s}
.offer:hover .offer-img::after{opacity:1}
.offer-body{padding:clamp(26px,2.4vw,34px);display:flex;flex-direction:column;flex:1}
.offer .tag{font-size:.64rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:13px}
.offer h3{font-size:clamp(1.25rem,1.5vw,1.55rem);margin-bottom:14px;line-height:1.24}
.offer p{font-size:.92rem;line-height:1.8;margin-bottom:26px}
.offer .price{font-family:var(--display);font-size:1.05rem;color:var(--ink);margin-bottom:14px}
.offer .price s{color:#9AA3B0;font-size:.9rem;margin-left:8px}
.offer .btn{margin-top:auto;align-self:flex-start}

/* ============================================================
   SERVICES TABS
   ============================================================ */
.services{background:var(--navy-900);color:var(--body-dark);overflow:hidden}
.services-head{max-width:720px;margin-bottom:clamp(44px,5vw,66px)}
.tabs{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,4vw,64px);align-items:start}
.tab-list{display:flex;flex-direction:column;gap:4px;position:sticky;top:120px}
.tab-btn{
  position:relative;display:flex;align-items:center;gap:16px;width:100%;
  padding:19px 22px;text-align:left;border-radius:5px;
  font-family:var(--display);font-size:1.05rem;color:rgba(255,255,255,.62);
  border:1px solid transparent;transition:.5s var(--ease)
}
.tab-btn .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.05);transition:.5s var(--ease)}
.tab-btn .ic svg{width:17px;height:17px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.4;transition:.5s var(--ease)}
.tab-btn::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--gold);transform:scaleY(0);transition:transform .55s var(--ease)}
.tab-btn:hover{color:#fff;background:rgba(255,255,255,.035)}
.tab-btn.active{
  color:#fff;background:linear-gradient(100deg,rgba(201,161,74,.16),rgba(201,161,74,.02));
  border-color:var(--line)
}
.tab-btn.active::before{transform:scaleY(1)}
.tab-btn.active .ic{background:rgba(201,161,74,.22)}
.tab-btn.active .ic svg{stroke:var(--gold-soft)}

.tab-panels{position:relative;min-height:420px}
.panel{
  display:none;
  padding:clamp(30px,3.4vw,52px);
  background:linear-gradient(140deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:6px;
}
.panel.active{display:block;animation:panelIn .75s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(22px) scale(.995)}to{opacity:1;transform:none}}
.panel h3{margin-bottom:22px}
.panel p{margin-bottom:18px;max-width:72ch}
.panel .btn{margin-top:14px}

/* ============================================================
   CTA BANDS
   ============================================================ */
.band{position:relative;overflow:hidden;background:var(--navy-850);text-align:center}
.band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 18% 120%,rgba(201,161,74,.2),transparent 56%),
    radial-gradient(ellipse at 84% -20%,rgba(201,161,74,.14),transparent 56%);
}
.band .wrap{position:relative;z-index:2;max-width:860px}
.band h2{margin-bottom:26px}
.band p{color:var(--body-dark);margin-bottom:12px}
.band .band-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 32px;margin-top:38px}
.band-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.band-line.t{top:0}.band-line.b{bottom:0}

/* ============================================================
   FIRST VISIT (split)
   ============================================================ */
.firstvisit{background:var(--cream);overflow:hidden}
.fv-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,86px);align-items:center}
.fv-visual{position:relative;border-radius:6px;overflow:hidden}
.fv-visual img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform 1.5s var(--ease)}
.fv-visual:hover img{transform:scale(1.05)}
.fv-visual .badge{
  position:absolute;right:-1px;bottom:-1px;background:var(--cream);padding:22px 28px 0 28px;border-radius:6px 0 0 0
}
.fv-visual .badge img{width:96px;aspect-ratio:auto}
.fv-copy h2{margin-bottom:26px;max-width:19ch}
.fv-copy p{margin-bottom:20px;max-width:60ch}
.fv-list{margin:30px 0 34px;display:grid;gap:14px}
.fv-list li{display:flex;align-items:flex-start;gap:14px;font-size:.95rem}
.fv-list .tick{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(201,161,74,.16);margin-top:3px}
.fv-list .tick svg{width:11px;height:11px;stroke:var(--gold-deep);stroke-width:2.4;fill:none}

/* ============================================================
   TEAM
   ============================================================ */
.team{background:var(--navy-900);color:var(--body-dark)}
.team-head{text-align:center;max-width:720px;margin:0 auto clamp(50px,6vw,78px)}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,1.8vw,26px)}
.member{position:relative;border-radius:6px;overflow:hidden;background:var(--navy-800);display:block}
.member .ph{position:relative;aspect-ratio:3/3.8;overflow:hidden;background:linear-gradient(160deg,var(--navy-700),var(--navy-850))}
.member .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.3s var(--ease),filter 1s var(--ease);filter:saturate(.92)}
.member:hover .ph img{transform:scale(1.07);filter:saturate(1.05)}
.member .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(16,22,31,.93) 94%);
}
.member .info{position:absolute;inset:auto 0 0;z-index:2;padding:22px;transform:translateY(8px);transition:transform .6s var(--ease)}
.member:hover .info{transform:translateY(0)}
.member .nm{font-family:var(--display);font-size:1.08rem;color:#fff;line-height:1.3}
.member .rl{font-size:.68rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-top:7px}
.member .reg{font-size:.64rem;letter-spacing:.1em;color:rgba(255,255,255,.42);margin-top:5px;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s var(--ease)}
.member:hover .reg{max-height:30px;opacity:1}
.member::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:6px;transition:border-color .6s var(--ease);pointer-events:none}
.member:hover::after{border-color:rgba(201,161,74,.55)}

/* ============================================================
   PAYMENTS
   ============================================================ */
.payments{background:var(--cream)}
.pay-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5.5vw,80px);align-items:center}
.pay-copy h2{margin-bottom:24px;max-width:14ch}
.pay-copy p{margin-bottom:18px;max-width:52ch}
.pay-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pay-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;
  background:#fff;border:1px solid rgba(18,25,35,.09);border-radius:6px;
  padding:26px 18px 20px;min-height:160px;
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease)
}
.pay-tile .pt-logo{
  flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:72px
}
.pay-tile img{
  max-height:72px;max-width:100%;width:auto;object-fit:contain;
  transition:transform .55s var(--ease)
}
.pay-tile .pt-label{
  font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-align:center;line-height:1.5;opacity:.72;
  transition:opacity .45s var(--ease),color .45s var(--ease)
}
.pay-tile:hover{
  transform:translateY(-6px);border-color:rgba(201,161,74,.6);
  box-shadow:0 24px 44px -26px rgba(18,25,35,.3)
}
.pay-tile:hover img{transform:scale(1.07)}
.pay-tile:hover .pt-label{opacity:1;color:var(--gold-deep)}

.marquee{margin-top:clamp(50px,6vw,78px);position:relative;overflow:hidden;padding:30px 0;border-block:1px solid rgba(18,25,35,.09)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--cream),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--cream),transparent)}
.mq-track{display:flex;gap:clamp(40px,5vw,72px);width:max-content;animation:scroll 52s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.mq-track img{height:36px;width:auto;object-fit:contain;opacity:.52;filter:grayscale(1);transition:.5s var(--ease)}
.mq-track img:hover{opacity:1;filter:grayscale(0);transform:scale(1.08)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy-900);color:rgba(255,255,255,.6);font-size:.88rem;position:relative}
.footer::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.f-top{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(34px,4vw,64px);padding:clamp(60px,7vw,92px) 0 clamp(40px,4vw,56px)}
.f-logo img{height:68px;width:auto;margin-bottom:26px}
.f-title{font-family:var(--display);font-size:1.1rem;color:#fff;margin-bottom:20px}
.f-sub{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.f-areas{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.f-areas a{padding:7px 15px;border:1px solid rgba(255,255,255,.14);border-radius:40px;font-size:.78rem;transition:.45s var(--ease)}
.f-areas a:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,161,74,.1)}
.f-accred{height:86px;width:auto;opacity:.9}
.f-contact li{display:flex;gap:13px;margin-bottom:15px;line-height:1.7}
.f-contact svg{width:15px;height:15px;stroke:var(--gold);flex:none;margin-top:5px}
.f-contact a:hover{color:var(--gold-soft)}
.f-map{margin-top:22px;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.1);filter:grayscale(1) invert(.92) contrast(.86);transition:filter .7s var(--ease)}
.f-map:hover{filter:none}
.f-map iframe{display:block;width:100%;height:210px;border:0}
.f-social{display:flex;gap:12px;margin-top:24px}
.f-social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:grid;place-items:center;transition:.45s var(--ease)}
.f-social svg{width:16px;height:16px;fill:rgba(255,255,255,.65);transition:fill .4s}
.f-social a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.f-social a:hover svg{fill:#fff}

.f-links{border-top:1px solid rgba(255,255,255,.08);padding:clamp(44px,5vw,64px) 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,46px)}
.f-links h4{font-family:var(--display);font-size:.98rem;color:#fff;margin-bottom:16px}
.f-links h4 a:hover{color:var(--gold-soft)}
.f-links li{margin-bottom:9px}
.f-links li a{font-size:.83rem;color:rgba(255,255,255,.55);transition:.4s var(--ease);display:inline-block}
.f-links li a:hover{color:var(--gold-soft);transform:translateX(5px)}

.f-disclaimer{border-top:1px solid rgba(255,255,255,.08);padding:28px 0;font-size:.76rem;font-style:italic;color:rgba(255,255,255,.4);line-height:1.8;text-align:center}
.f-base{border-top:1px solid rgba(255,255,255,.08);padding:26px 0 34px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 26px;font-size:.78rem}
.f-base nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.f-base a:hover{color:var(--gold-soft)}
.f-base .by{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.4)}
.f-base .by img{height:30px;width:auto;opacity:.8;transition:opacity .4s}
.f-base .by:hover img{opacity:1}

/* Sticky mobile bar */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  grid-template-columns:1fr 1fr 1.2fr;background:var(--navy-900);border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .5s var(--ease)
}
.mobile-bar.show{transform:none}
.mobile-bar a{padding:16px 10px;text-align:center;font-size:.72rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px}
.mobile-bar a{border-right:1px solid rgba(255,255,255,.1)}
.mobile-bar a:last-child{border-right:0}
.mobile-bar a.emerg{color:var(--gold-soft)}
@media(max-width:380px){.mobile-bar a{font-size:.64rem;gap:6px;padding:15px 6px}}
.mobile-bar a.book{background:linear-gradient(102deg,#9C7726,#D4B05A)}
.mobile-bar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ============================================================
   PHOTO MODE — add ?photos=1 to the URL to swap images by clicking
   ============================================================ */
.photo-slot{position:relative;outline:2px dashed rgba(226,199,133,.55);outline-offset:-2px;cursor:pointer}
.photo-slot::after{
  content:attr(data-label);
  position:absolute;left:8px;top:8px;z-index:20;
  background:rgba(16,22,31,.92);color:var(--gold-soft);
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:3px;border:1px solid rgba(226,199,133,.4);
  pointer-events:none;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis
}
.photo-slot:hover{outline-color:var(--gold-bright);outline-width:3px}
.photo-slot.swapped{outline-color:#6FCF8E}
.photo-slot.swapped::after{color:#9FE3B4;border-color:rgba(111,207,142,.5)}
.photo-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:14px clamp(16px,3vw,32px);
  background:rgba(16,22,31,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.8rem;color:rgba(255,255,255,.75)
}
.photo-bar b{color:var(--gold-soft);font-weight:500}
.photo-bar .pb-btn{
  padding:9px 16px;border:1px solid rgba(226,199,133,.4);border-radius:4px;
  color:var(--gold-soft);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:.4s var(--ease)
}
.photo-bar .pb-btn:hover{background:rgba(201,161,74,.18);border-color:var(--gold)}
.photo-bar .pb-close{margin-left:auto}
body.photo-mode{padding-bottom:70px}
body.photo-mode .mobile-bar{display:none!important}

/* Failed-image fallback — a branded block, never a broken-image icon */
img.img-failed{
  background:linear-gradient(145deg,var(--navy-700),var(--navy-850));
  border:1px dashed rgba(226,199,133,.28);border-radius:4px;
  min-height:120px;min-width:110px;
  color:transparent;font-size:0;
  position:relative
}
.offer-img img.img-failed,.why-visual img.img-failed,.fv-visual img.img-failed,
.about-visual img.img-failed,.member .ph img.img-failed{width:100%;height:100%;min-height:180px}
.hero-media img.img-failed{opacity:0;border:0}
.pay-tile img.img-failed,.mq-track img.img-failed,.hero-badges img.img-failed{min-height:34px;min-width:84px}

/* --- Top bar on small screens: one tidy row, nothing wrapping --- */
.tb-emerg .tb-txt{white-space:nowrap}
.tb-phone{padding:4px}
@media(max-width:860px){
  .topbar .wrap{min-height:52px;gap:10px;justify-content:center}
  .topbar .wrap > div{gap:6px!important;width:100%;justify-content:space-between}
  .tb-emerg{flex:1;justify-content:center;padding:8px 12px;font-size:.74rem;min-width:0}
  .tb-emerg .tb-long{display:none}
  .tb-num{display:none}
  .tb-phone{
    width:38px;height:38px;flex:none;border-radius:50%;justify-content:center;
    border:1px solid rgba(226,199,133,.28);background:rgba(201,161,74,.1)
  }
  .tb-phone svg{width:16px;height:16px}
  .topbar .socials{gap:14px;flex:none}
  .topbar .socials svg{width:17px;height:17px}
}
@media(max-width:430px){
  .topbar .socials{display:none}
  .tb-emerg{font-size:.72rem}
}

/* Progress bar */
.progress{position:fixed;top:0;left:0;height:2px;z-index:80;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));width:0;transition:width .12s linear}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1340px){
  .nav-link{font-size:.95rem;padding:12px 9px}
  .nav{gap:2px}
  .header-cta .btn{padding:15px 22px;font-size:.73rem}
  .hdr-emerg{padding:12px 15px;font-size:.68rem}
  .hdr-emerg span{display:none}
  .hdr-emerg{padding:12px;gap:0}
}
@media(max-width:1180px){
  .nav,.header-cta .btn,.hdr-emerg{display:none}
  .burger{display:grid}
  .header-cta{margin-left:auto}
}
@media(max-width:1200px){
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .offers-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .tabs{grid-template-columns:1fr}
  .tab-list{position:static;flex-direction:row;overflow-x:auto;padding-bottom:8px;gap:8px;scrollbar-width:none}
  .tab-list::-webkit-scrollbar{display:none}
  .tab-btn{white-space:nowrap;padding:14px 18px;font-size:.95rem}
  .tab-btn .ic{display:none}
  .quick .wrap{grid-template-columns:1fr;margin-top:40px}
  .quick{padding-top:0}
  .about-grid,.fv-grid,.pay-grid{grid-template-columns:1fr}
  .about-visual{max-width:480px}
  .about-visual .frame{aspect-ratio:4/3.4}
  .why-row{grid-template-columns:1fr;gap:30px}
  .why-row:nth-child(even) .why-visual{order:0}
  .f-top{grid-template-columns:1fr 1fr}
  .f-links{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .topbar .tb-item.addr{display:none}
  .stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:clamp(34px,5vw,48px)}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(3),.stat:nth-child(4){padding-top:clamp(34px,5vw,48px)}
  .stat:nth-child(3)::after,.stat:nth-child(4)::after{
    content:"";position:absolute;left:8%;right:8%;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .pay-tiles{grid-template-columns:repeat(2,1fr)}
  .mobile-bar{display:grid}
  body{padding-bottom:62px}   /* clear the sticky bar so the footer base stays visible */
}
@media(max-width:640px){
  .offers-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero h1{font-size:clamp(2.1rem,8.4vw,3rem)}
  .btn{width:100%;padding:16px 24px}
  .hero-actions,.band-actions,.about-actions{flex-direction:column;align-items:stretch}
  .btn-phone{justify-content:center}
  .f-top,.f-links{grid-template-columns:1fr}
  .f-base{flex-direction:column;text-align:center;gap:22px;padding-bottom:30px}
  .f-base nav{justify-content:center;gap:10px 18px;max-width:320px;margin-inline:auto}
  .f-base nav a{font-size:.76rem}
  .f-base .by{justify-content:center;width:100%}
  .about-visual .chip{left:12px;padding:18px 22px}
  .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.rv-l,.rv-r{opacity:1;transform:none}
  .hero h1 .w > span{transform:none}
  .hero p.lede,.hero-actions,.hero-badges{opacity:1}
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{
  position:relative;overflow:hidden;background:var(--navy-900);
  padding:clamp(52px,7vw,90px) 0 clamp(60px,8vw,104px)
}
.page-hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,199,133,.4),transparent)}
.ph-glow{position:absolute;width:680px;height:680px;right:-200px;top:-280px;pointer-events:none;
  background:radial-gradient(circle,rgba(201,161,74,.16),transparent 66%)}
.page-hero .wrap{position:relative;z-index:2;max-width:980px}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.2vw,3.5rem);margin-bottom:22px;max-width:20ch}
.page-hero .lede{max-width:62ch;color:var(--body-dark);font-size:clamp(.98rem,1.1vw,1.08rem);line-height:1.85}
.ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:38px}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:26px;
  font-size:.74rem;letter-spacing:.08em;color:rgba(255,255,255,.42)}
.crumbs a{transition:color .35s}
.crumbs a:hover{color:var(--gold-soft)}
.crumbs span{opacity:.45}
.crumbs .cur{color:var(--gold-soft);opacity:1}

/* Readable long-form body */
.prose{max-width:72ch}
.prose h2{margin:clamp(40px,4vw,62px) 0 20px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:clamp(30px,3vw,44px) 0 16px}
.prose p{margin-bottom:20px}
.prose ul{margin:0 0 24px}
.prose ul li{position:relative;padding-left:30px;margin-bottom:12px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;
  border:1px solid var(--gold);border-radius:50%}
.prose a{color:var(--gold-deep);border-bottom:1px solid rgba(168,129,44,.35);transition:border-color .35s}
.prose a:hover{border-color:var(--gold-deep)}
.on-dark .prose a{color:var(--gold-soft);border-color:rgba(226,199,133,.3)}

/* Two-column layout with a sticky side rail */
.split{display:grid;grid-template-columns:1fr 340px;gap:clamp(36px,5vw,76px);align-items:start}
.rail{position:sticky;top:120px;display:grid;gap:18px}
.rail-card{
  padding:clamp(24px,2.4vw,32px);border-radius:6px;
  background:var(--navy-900);border:1px solid var(--line);color:var(--body-dark)
}
.rail-card h3{color:#fff;font-size:1.15rem;margin-bottom:16px}
.rail-card p{font-size:.88rem;margin-bottom:18px}
.rail-card .btn{width:100%}
.rail-links li{border-bottom:1px solid rgba(255,255,255,.08)}
.rail-links li:last-child{border-bottom:0}
.rail-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;font-size:.89rem;color:rgba(255,255,255,.72);transition:.4s var(--ease)}
.rail-links a svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:1.8;
  opacity:0;transform:translateX(-6px);transition:.4s var(--ease)}
.rail-links a:hover{color:var(--gold-soft);padding-left:7px}
.rail-links a:hover svg{opacity:1;transform:none}
.rail-links a.current{color:var(--gold-soft)}

@media(max-width:1024px){
  .split{grid-template-columns:1fr}
  .rail{position:static;grid-template-columns:repeat(2,1fr);display:grid}
}
@media(max-width:680px){ .rail{grid-template-columns:1fr} }

/* ============================================================
   TEXT SELECTION — brand gold instead of the OS accent colour
   ============================================================ */
::selection{background:rgba(201,161,74,.3);color:var(--ink);text-shadow:none}
::-moz-selection{background:rgba(201,161,74,.3);color:var(--ink);text-shadow:none}
.on-dark ::selection,.footer ::selection,.header ::selection,.topbar ::selection,
.page-hero ::selection,.hero ::selection{background:rgba(226,199,133,.32);color:#fff}
.on-dark ::-moz-selection,.footer ::-moz-selection,.header ::-moz-selection,
.topbar ::-moz-selection,.page-hero ::-moz-selection,.hero ::-moz-selection{
  background:rgba(226,199,133,.32);color:#fff}

/* tidy the focus ring to match, for keyboard users */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ============================================================
   HORIZONTAL OVERFLOW GUARDS
   Grid and flex children default to min-width:auto, so wide
   content can push a track past the viewport. These stop the
   page scrolling sideways at in-between widths.
   ============================================================ */
.about-grid > *,.pay-grid > *,.fv-grid > *,.why-row > *,.split > *,
.offers-grid > *,.team-grid > *,.tabs > *,.quick .wrap > *,.stats .wrap > *{min-width:0}
.pay-tiles{min-width:0}
.pay-tile img{max-width:100%}

/* the About chip sits slightly outside its frame by design — keep it inside
   the viewport once there's no room for the overhang */
@media(max-width:1180px){ .about-visual .chip{left:0} }

html,body{overflow-x:clip}
@supports not (overflow:clip){ html,body{overflow-x:hidden} }