/* ==========================================================
   Hair Masters landing page
   Custom layer on top of Bootstrap 5.3. Mobile first.
   ========================================================== */

:root{
  --ink:#1A1210;
  --ink-2:#241A17;
  --paper:#F2EFEC;
  --brass:#C9A66B;
  --brass-hi:#E4C892;
  --wine:#5E2B38;
  --muted:#BCACA4;
  --bar:74px;
  --card-ratio:3/2;    /* one ratio for every card image on the page */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
  overflow-x:hidden;
  /* no blinking text cursor on headings and copy, even with the browser's
     caret browsing turned on. Form fields get it back below. */
  caret-color:transparent;
}
input,select,textarea,[contenteditable]{caret-color:var(--wine)}

h1,h2,h3{
  font-family:'Prata',Georgia,serif;font-weight:400;margin:0;
  line-height:1.15;letter-spacing:-.005em;
}
h1{font-size:2rem}
h2{font-size:1.65rem}
h3{font-size:1.12rem}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
svg{flex:none}

.container{max-width:1120px;padding-inline:20px}
section{padding-block:52px}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;background:var(--brass);
  color:#1A1210;padding:10px 16px;border-radius:0 0 4px 0;text-decoration:none
}
.skip:focus{left:0}

.eyebrow{
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin:0 0 14px
}
.eyebrow-dark{color:var(--wine)}
.eyebrow-hi{color:var(--brass-hi)}
.lede{font-size:1rem;color:var(--muted);margin-top:16px;max-width:52ch}

:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}

/* ---------- BUTTONS ---------- */
.call{
  display:flex;align-items:center;gap:13px;width:100%;
  background:var(--brass);color:#1A1210;text-decoration:none;
  border-radius:4px;padding:14px 20px;min-height:62px;
  box-shadow:0 12px 30px -16px rgba(201,166,107,.9);
  transition:background .2s ease;
}
.call .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.call b{font-weight:600;font-size:1.05rem;letter-spacing:.01em}
.call .txt span{font-size:.79rem;font-weight:400;opacity:.78;line-height:1.35}
.call:active{transform:translateY(1px)}
.ico{
  width:38px;height:38px;border-radius:50%;background:rgba(26,18,16,.12);
  display:flex;align-items:center;justify-content:center
}
.ghost{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:1px solid rgba(201,166,107,.5);color:var(--brass);
  border-radius:4px;padding:15px 20px;min-height:52px;
  text-decoration:none;font-size:.95rem;transition:background .2s ease;
}
.submit{
  width:100%;min-height:56px;border:0;border-radius:4px;
  background:var(--wine);color:#F6EFEA;
  font-family:'Jost',sans-serif;font-size:1.02rem;font-weight:500;
  letter-spacing:.02em;cursor:pointer
}
.submit:active{background:#71333F}
.submit:disabled{opacity:.7;cursor:default}

/* ---------- HEADER ----------
   Sits over the hero, transparent to start, solid once you scroll. */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:70;
  padding-block:10px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, padding .3s ease;
}
.site-head.stuck{
  background:rgba(20,14,12,.92);
  border-bottom-color:rgba(201,166,107,.22);
  backdrop-filter:blur(10px);
  padding-block:6px;
}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand-fallback{
  display:none;font-family:'Prata',Georgia,serif;font-size:1.1rem;
  color:var(--brass-hi);letter-spacing:.02em
}
.brand.brand-text .brand-fallback{display:block}
.brand img{
  width:clamp(96px, 24vw, 136px);height:auto;
  background:#fff;padding:3px 10px;border-radius:4px;
  transition:width .3s ease, padding .3s ease;
}
.site-head.stuck .brand img{width:clamp(84px, 20vw, 112px);padding:2px 8px}

.head-nav{display:none;gap:26px}
.head-nav a{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;opacity:.85;
  padding-block:6px;border-bottom:1px solid transparent;transition:all .2s ease
}
.head-nav a:hover{opacity:1;color:var(--brass-hi);border-bottom-color:var(--brass)}

.head-call{
  display:flex;align-items:center;gap:8px;flex:none;
  border:1px solid rgba(201,166,107,.5);border-radius:4px;
  padding:9px 14px;min-height:42px;
  color:var(--brass-hi);text-decoration:none;
  font-size:.86rem;font-weight:500;letter-spacing:.01em;
  transition:background .2s ease
}
.head-call:hover{background:rgba(201,166,107,.16)}
.head-call span{display:none}

/* ---------- HERO ---------- */
#hero{
  position:relative;overflow:hidden;
  padding-top:96px;padding-bottom:46px;background:var(--ink-2)
}
.slides{position:absolute;inset:0;z-index:0}
.slides div{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation:fadeZoom 24s infinite
}
.slides div:nth-child(1){animation-delay:0s}
.slides div:nth-child(2){animation-delay:8s}
.slides div:nth-child(3){animation-delay:16s}
@keyframes fadeZoom{
  0%{opacity:0;transform:scale(1.04)}
  6%{opacity:1}
  33%{opacity:1}
  40%{opacity:0}
  100%{opacity:0;transform:scale(1.16)}
}
.scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(26,18,16,.90) 0%, rgba(26,18,16,.80) 45%, rgba(26,18,16,.95) 100%),
    linear-gradient(90deg, rgba(94,43,56,.42) 0%, rgba(94,43,56,0) 70%)
}
#hero .container{position:relative;z-index:2}
#hero h1 em{font-style:normal;color:var(--brass-hi)}

/* FIX 1: every block in the hero column shares one left/right edge,
   so the call button lines up with the heading and the badges. */
.hero-copy{display:flex;flex-direction:column;align-items:stretch}
.hero-copy > *{width:100%}

.badges{margin:22px 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.badges li{display:flex;align-items:center;gap:12px;font-size:.9rem;color:#fff}
.bico{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(201,166,107,.55);background:rgba(201,166,107,.14);
  display:flex;align-items:center;justify-content:center;color:var(--brass-hi)
}

/* ---------- LEAD CARD / FORMS ---------- */
.card-lead{
  background:var(--paper);color:#221917;border-radius:5px;
  border-top:3px solid var(--wine);padding:24px 20px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.75)
}
.card-lead h3{color:#221917}
.card-lead .sub{font-size:.88rem;color:#6D5E57;margin-top:7px;margin-bottom:20px}
.field{margin-bottom:14px}
.field label{
  display:block;font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#7C6D65;margin-bottom:6px
}
.field input,.field select{
  width:100%;font-family:'Jost',sans-serif;font-size:16px;font-weight:400;color:#221917;
  background:#fff;border:1px solid #D3CAC2;border-radius:3px;padding:14px 13px;min-height:52px
}
.field input:focus,.field select:focus{
  border-color:var(--wine);box-shadow:0 0 0 3px rgba(94,43,56,.12);outline:none
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236D5E57' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center
}
.err{display:none;color:#8E2B2B;font-size:.8rem;margin-top:6px}
.note{font-size:.76rem;color:#7C6D65;margin-top:12px;line-height:1.5}
.done{
  display:none;background:#EEF3ED;border:1px solid #C2D2BE;border-radius:3px;
  padding:16px;color:#2F4429;font-size:.92rem
}

/* submit ke baad form ke NEECHE aane wale messages.
   Form gayab nahi hota, sirf message dikhta hai. */
.form-ok,.form-fail{
  display:none;margin:14px 0 0;padding:12px 14px;border-radius:4px;
  font-size:.88rem;line-height:1.5
}
.form-ok{background:#EAF5EC;border:1px solid #BFDFC7;color:#26663A}
.form-fail{background:#FBECEC;border:1px solid #E3BFBF;color:#96302F}
.orcall{
  margin-top:18px;padding-top:16px;border-top:1px solid #DCD4CC;
  font-size:.88rem;color:#6D5E57
}
.orcall a{color:var(--wine);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(94,43,56,.4)}

/* ---------- SHADE LADDER ---------- */
.ladder{display:flex;width:100%}
.ladder i{
  flex:1;height:38px;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:5px;font-size:.5rem;font-style:normal;letter-spacing:.05em;
  color:rgba(255,255,255,.55);transform-origin:bottom
}
.ladder i:nth-child(n+7){color:rgba(0,0,0,.6)}
.ladder.rv i{transform:scaleY(.2);opacity:0}
.ladder.in i{transform:scaleY(1);opacity:1;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .4s}
.ladder.in i:nth-child(2){transition-delay:.05s}
.ladder.in i:nth-child(3){transition-delay:.1s}
.ladder.in i:nth-child(4){transition-delay:.15s}
.ladder.in i:nth-child(5){transition-delay:.2s}
.ladder.in i:nth-child(6){transition-delay:.25s}
.ladder.in i:nth-child(7){transition-delay:.3s}
.ladder.in i:nth-child(8){transition-delay:.35s}
.ladder.in i:nth-child(9){transition-delay:.4s}

/* ---------- WHY US ----------
   FIX 2: one image ratio for every card, cards stretch to the tallest
   in the row, and the copy block flexes, so images, headings and text
   sit on the same lines across all three. */
.whycard{
  display:flex;flex-direction:column;height:100%;
  background:var(--ink-2);border:1px solid rgba(201,166,107,.2);
  border-radius:6px;overflow:hidden
}
.whycard .ph{
  position:relative;background:#120C0B;flex:none;
  aspect-ratio:var(--card-ratio)
}
.whycard .ph img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;opacity:.72
}
.whycard .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,18,16,.1),rgba(36,26,23,.95))
}
.whycard .bico{
  position:absolute;left:16px;bottom:-18px;z-index:2;width:44px;height:44px;
  background:var(--ink-2);border-color:var(--brass)
}
.whycard .body{padding:30px 18px 22px;display:flex;flex-direction:column;flex:1 1 auto}
.whycard h3{margin-bottom:9px}
.whycard p{font-size:.9rem;color:var(--muted)}

/* ---------- SERVICES ---------- */
#services{background:var(--ink-2);border-block:1px solid rgba(201,166,107,.18)}
.svc{
  display:flex;flex-direction:column;height:100%;
  background:var(--ink);border:1px solid rgba(201,166,107,.2);
  border-radius:6px;overflow:hidden
}
.svc .ph{
  position:relative;background:#120C0B;flex:none;
  aspect-ratio:var(--card-ratio)
}
.svc .ph img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85
}
.svc .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,18,16,0) 40%,rgba(26,18,16,.9) 100%)
}
.chip{
  position:absolute;left:14px;bottom:12px;z-index:2;display:flex;align-items:center;gap:9px;
  background:rgba(26,18,16,.72);border:1px solid rgba(242,239,236,.25);
  border-radius:999px;padding:6px 13px 6px 7px;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#fff
}
.chip b{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.4)}
.svc .body{padding:18px;display:flex;flex-direction:column;flex:1 1 auto}
.svc h3{font-size:1.18rem}
.svc p{font-size:.89rem;color:var(--muted);margin-top:7px}
.svc .dur{
  color:var(--brass);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;margin-top:9px;margin-bottom:16px
}
/* the CTA drops to the bottom of whichever card is tallest,
   so all four buttons sit on one line */
.svcta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:auto;
  border:1px solid var(--brass);color:var(--brass-hi);background:rgba(201,166,107,.08);
  border-radius:4px;min-height:52px;text-decoration:none;font-size:.95rem;font-weight:500;
  transition:background .2s ease
}
.svcta:active{background:rgba(201,166,107,.2)}

/* FIX 3: the pair of buttons is centred in the section, equal height */
.stack{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  gap:12px;margin-top:26px
}

/* ---------- GOOGLE REVIEWS ---------- */
#proof{position:relative;overflow:hidden;background:var(--wine)}
#proof .bg{position:absolute;inset:0;z-index:0}
#proof .bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
#proof .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(94,43,56,.9),rgba(52,23,31,.95))
}
#proof h2{color:#FBF6F3}

.reviews{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch
}
.reviews::-webkit-scrollbar{height:5px}
.reviews::-webkit-scrollbar-thumb{background:rgba(228,200,146,.5);border-radius:9px}
.rev{
  flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;
  background:rgba(0,0,0,.26);border:1px solid rgba(251,246,243,.18);
  border-radius:6px;padding:18px
}
.rev .rstars{color:var(--brass-hi);letter-spacing:.14em;font-size:.9rem}
.rev p{
  font-size:.92rem;color:#FBF6F3;margin-top:10px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;
  overflow:hidden;
}
.rev .rwho{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;
  font-size:.78rem;color:rgba(251,246,243,.75)
}
.rev .ravatar{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(228,200,146,.22);color:var(--brass-hi);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:500
}
.rev-status{font-size:.9rem;color:rgba(251,246,243,.75)}

.google{
  background:rgba(0,0,0,.28);border:1px solid rgba(251,246,243,.22);
  border-radius:6px;padding:22px;text-align:center
}
.stars{color:var(--brass-hi);letter-spacing:.16em;font-size:1.2rem}
.score{font-family:'Prata',Georgia,serif;font-size:2.3rem;line-height:1;margin:8px 0 4px}
.google p{font-size:.82rem;color:rgba(251,246,243,.78)}
.google .ghost{margin-top:16px;color:var(--brass-hi);border-color:rgba(228,200,146,.55)}

.offer{
  margin-top:26px;border:1px dashed rgba(228,200,146,.6);border-radius:6px;
  padding:22px 20px;background:rgba(0,0,0,.22)
}
.offer strong{
  display:block;font-family:'Prata',Georgia,serif;font-weight:400;
  font-size:1.25rem;margin-bottom:7px
}
.offer em{
  font-style:normal;display:block;font-size:.83rem;
  color:rgba(251,246,243,.78);margin-bottom:18px
}

/* ---------- BOOK / FOOTER ---------- */
#book{background:var(--paper);color:#221917}
#book h2{color:#221917}
#book .lede{color:#6D5E57}
.bigcall{
  display:inline-flex;align-items:center;gap:11px;margin-top:22px;
  text-decoration:none;color:#221917;font-family:'Prata',Georgia,serif;
  font-size:1.72rem;border-bottom:2px solid var(--brass);padding-bottom:3px
}
.detail{margin:26px 0 0;padding-top:22px;border-top:1px solid #DCD4CC}
.detail dt{
  display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#7C6D65;margin-bottom:7px
}
.detail dd{margin:0 0 20px;font-size:.95rem;color:#3E312D;line-height:1.55}
.detail > div:last-child dd{margin-bottom:0}
.detail a{color:var(--wine)}
footer{background:var(--ink);padding:26px 0;font-size:.78rem;color:var(--muted)}
footer a{color:var(--brass);text-decoration:none}
.flogo{width:120px;height:auto;margin-bottom:14px;opacity:.9}

/* ---------- MAP ---------- */
.map{
  margin-top:24px;border-radius:6px;overflow:hidden;
  border:1px solid #DCD4CC;background:#E8E3DE;
  box-shadow:0 18px 40px -30px rgba(0,0,0,.5);
}
.map iframe{
  display:block;width:100%;height:100%;border:0;
  aspect-ratio:16/11;
}

/* ---------- STICKY BAR ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 22px rgba(0,0,0,.5)
}
.bar a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--bar);text-decoration:none;font-weight:500
}
.bar .b-call{flex:1.6;background:var(--brass);color:#1A1210}
.bar .b-call small{
  display:block;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.72;font-weight:400
}
.bar .b-call strong{font-size:1.02rem;font-weight:600}
.bar .b-wa{flex:1;background:#1F7A4D;color:#fff;font-size:.95rem}

/* ---------- REVEAL ---------- */
.up{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.up.in{opacity:1;transform:none}

/* ---------- GALLERY ----------
   Mosaic grid on fixed row heights, so mixed photo shapes still line up.
   Tiles are buttons, tapping one opens the lightbox. */
#gallery{background:var(--ink-2);border-block:1px solid rgba(201,166,107,.18)}
.gal-head{max-width:44ch;margin-bottom:28px}

.gal{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.gal-item{
  position:relative;padding:0;margin:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(201,166,107,.2);border-radius:8px;
  background:#120C0B;aspect-ratio:1;
}
.gal-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  opacity:.9;
}
.gal-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,18,16,0) 55%,rgba(26,18,16,.55));
  opacity:0;transition:opacity .3s ease;
}
.gal-cta{display:flex;justify-content:center;margin-top:26px}
.gal-cta .ghost{width:auto;min-width:260px}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;background:rgba(12,8,7,.94);
  opacity:0;transition:opacity .25s ease;
}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lb-figure{margin:0;max-width:min(1000px,100%);display:flex;flex-direction:column;gap:10px}
.lb-figure img{
  max-width:100%;max-height:78vh;object-fit:contain;
  border-radius:8px;border:1px solid rgba(201,166,107,.25);
}
.lb-figure figcaption{
  text-align:center;font-size:.85rem;color:var(--muted);
  letter-spacing:.04em;
}
.lb-nav,.lb-close{
  flex:none;border-radius:50%;cursor:pointer;
  border:1px solid rgba(201,166,107,.4);background:rgba(201,166,107,.08);
  color:var(--brass-hi);display:grid;place-items:center;
  transition:background .2s ease,border-color .2s ease;
}
.lb-nav{width:46px;height:46px;font-size:1.6rem;line-height:1}
.lb-close{position:absolute;top:14px;right:14px;width:42px;height:42px;font-size:1.5rem}
.lb-nav:hover,.lb-close:hover{background:rgba(201,166,107,.2);border-color:var(--brass)}

/* ---------- CLIENT VIDEOS, COVERFLOW ---------- */
#videos{overflow:hidden}
#videos .lede{max-width:44ch}
.cf-stage{
  position:relative;width:100%;
  height:clamp(360px, 88vw, 620px);
  margin:clamp(22px,4vw,44px) 0 10px;
  perspective:1700px;
  touch-action:pan-y;
}
.cf-deck{position:absolute;inset:0;transform-style:preserve-3d;cursor:grab}
.cf-deck:active{cursor:grabbing}
.cf-slide{
  position:absolute;top:50%;left:50%;margin:0;
  width:clamp(196px, 58vw, 380px);
  height:clamp(300px, 86vw, 545px);
  border-radius:16px;overflow:hidden;background:#120C0B;
  border:1px solid rgba(201,166,107,.22);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.8);
  transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease, box-shadow .4s ease;
  will-change:transform,opacity;
  user-select:none;
}
.cf-slide video{
  width:100%;height:100%;object-fit:cover;display:block;background:#120C0B
}
.cf-slide.is-active{
  cursor:pointer;
  border-color:rgba(228,200,146,.55);
  box-shadow:0 40px 80px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(228,200,146,.3)
}
.cf-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  border:1px solid rgba(228,200,146,.7);background:rgba(26,18,16,.62);
  color:var(--brass-hi);display:none;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(2px);z-index:3;pointer-events:none
}
.cf-slide.is-active .cf-play{display:flex}
.cf-slide.is-playing .cf-play{display:none}
.cf-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 16px 14px;text-align:left;
  font-size:.88rem;color:#fff;
  background:linear-gradient(180deg,rgba(26,18,16,0),rgba(26,18,16,.92));
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease
}
.cf-slide.is-active figcaption{opacity:1;transform:translateY(0)}
.cf-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.cf-nav{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(201,166,107,.4);background:rgba(201,166,107,.06);
  color:var(--brass-hi);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .25s ease,border-color .25s ease
}
.cf-nav:hover{background:rgba(201,166,107,.18);border-color:var(--brass)}
.cf-nav:active{transform:scale(.94)}
.cf-dots{display:flex;gap:9px;align-items:center}
.cf-dot{
  width:8px;height:8px;border-radius:50%;padding:0;border:none;
  background:rgba(228,200,146,.28);cursor:pointer;
  transition:transform .3s ease,background .3s ease
}
.cf-dot.is-active{background:var(--brass);transform:scale(1.6)}

/* ---------- CARD POLISH ---------- */
/* Older browsers with no aspect-ratio support get the padding trick,
   so the image box keeps its shape everywhere. */
@supports not (aspect-ratio: 3 / 2){
  .whycard .ph,.svc .ph{height:0;padding-top:66.667%}
  .cf-slide video{height:100%}
}
.whycard,.svc{transition:border-color .25s ease, transform .25s ease}
@media (hover:hover) and (min-width:992px){
  .whycard:hover,.svc:hover{border-color:rgba(201,166,107,.45)}
}

/* ---------- TABLET ---------- */
@media (min-width:576px){
  .rev{flex-basis:58%}
}

/* ---------- DESKTOP ---------- */
@media (min-width:992px){
  body{font-size:17px;padding-bottom:0}
  .container{padding-inline:40px}
  h1{font-size:3.05rem}
  h2{font-size:2.3rem}
  h3{font-size:1.2rem}
  section{padding-block:84px}
  #hero{padding-top:132px;padding-bottom:76px}
  .badges{gap:14px}
  .card-lead{padding:32px}

  /* buttons centred as a pair, side by side, matched height */
  .stack{
    flex-direction:row;align-items:stretch;justify-content:center;
    gap:16px;margin-top:34px
  }
  .stack .call{width:auto;max-width:520px;flex:0 1 auto}
  .stack .ghost{width:auto;min-width:240px;flex:0 0 auto}

  .rev{flex-basis:calc(50% - 7px)}

  /* gallery becomes a four column mosaic */
  .gal{grid-template-columns:repeat(4,1fr);grid-auto-rows:186px;gap:14px}
  .gal-item{aspect-ratio:auto}
  .gal-item.tall{grid-row:span 2}
  .gal-item.wide{grid-column:span 2}
  .gal-item:hover img{transform:scale(1.06);opacity:1}
  .gal-item:hover::after{opacity:1}
  .lightbox{padding:40px;gap:18px}
  .lb-nav{width:54px;height:54px}
  .cf-slide.is-active:hover .cf-play{background:rgba(26,18,16,.85)}
  .bigcall{font-size:2.15rem}
  .detail{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  .map iframe{aspect-ratio:16/9}
  .ladder i{height:52px;font-size:.6rem}
  .bar{display:none}

  .call:hover{background:var(--brass-hi)}
  .ghost:hover,.svcta:hover{background:rgba(201,166,107,.16)}
  .head-nav{display:flex}
  .head-call span{display:inline}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .up{opacity:1;transform:none}
  .ladder.rv i{transform:none;opacity:1}
  .slides div:nth-child(1){opacity:1}
}