/* ============================================================
   Adoria website v3
   All colour lives in the :root token block below. Retint = edit tokens only.
   Layout + interaction refreshed. New: dual-path chooser,
   booking mode toggle, At Home service, sticky mobile action bar.
   ============================================================ */
:root{
  color-scheme:dark;
  /* ---- ADORIA v3 dark theme. Sampled from the logo. Retint = edit only these. ---- */
  /* elevation ladder, page base darkest -> raised lightest */
  --bg:#071A14;
  --deep0:#04100C;
  --deep:#0B241D;
  --deep2:#163A2E;
  --deep3:#22523F;
  --surface-4:#193F32;
  --card:#0E2A21;
  --card2:#153A2D;
  --champ:#123529;
  /* gold ramp, sampled from the logo lettering */
  --goldlt2:#F6D691; --goldlt:#EBC57B;
  --gold:#C9A463;
  --goldd:#9C7B3A; --goldd2:#8B6832;
  /* text on dark */
  --text:#EDE7D8;
  --onlight:#F4EEE0;
  --ondeep:#CFC9B6;
  --ink:#EDE7D8; --ink2:#BDB8A6; --ink3:#ACA795;
  --stone:#9E9884; --stone2:#8C8672;
  /* hairlines */
  --line:#1E4034; --line2:#27503F;
  /* rgb triplets for alpha use */
  --gold-rgb:201,164,99;
  --deep-rgb:11,36,29;
  --deep0-rgb:4,16,12;
  --goldd-rgb:156,123,58;
  --shadow:0 22px 48px -24px rgba(0,0,0,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px;scrollbar-color:var(--deep3) var(--bg);scrollbar-width:thin}
body{font-family:'Jost',sans-serif;font-weight:400;color:var(--text);background:var(--bg);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.container-sm{max-width:940px;margin:0 auto;padding:0 28px}
section{padding:clamp(56px,8vw,100px) 0}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.12;text-wrap:balance}
h2{font-size:clamp(29px,4.6vw,49px);letter-spacing:.4px}
h2 em,h1 em,.lead em{font-style:italic;color:var(--goldlt)}
p{text-wrap:pretty}
.center{text-align:center}
.script{font-family:'Yellowtail',cursive;color:var(--gold)}
.rg-text{background:linear-gradient(120deg,var(--goldlt),var(--gold),var(--goldd2));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{position:relative;font-size:12.5px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);font-weight:500;display:inline-block}
.center .eyebrow::before,.center .eyebrow::after{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);vertical-align:middle;margin:0 12px 3px;opacity:.7}
.lead{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2.2vw,24px);color:var(--ink3);max-width:720px;line-height:1.5;font-weight:400}
.flourish{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0;color:var(--gold)}
.flourish span{height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.85}
.flourish span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

/* SVG line icons inherit brand accent */
.ic{color:var(--gold)}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;justify-content:center;font-weight:400;letter-spacing:2px;text-transform:uppercase;font-size:12px;line-height:1;height:52px;padding:0 30px;border-radius:2px;transition:transform .2s,background .2s,color .2s,box-shadow .2s;cursor:pointer;border:none;vertical-align:top}
.btn:hover{transform:translateY(-2px)}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:140%}
.btn-gold{background:linear-gradient(180deg,var(--goldlt2),var(--goldd));color:var(--deep0);box-shadow:0 8px 20px -10px rgba(var(--goldd-rgb),.7)}
.btn-gold:hover{background:linear-gradient(180deg,var(--gold),var(--goldd));color:var(--deep0)}
.btn-ghost{border:1px solid var(--gold);color:var(--goldlt)}
.btn-ghost:hover{background:var(--gold);color:var(--deep0)}
.btn-dark{border:1px solid rgba(var(--gold-rgb),.5);color:var(--goldlt)}
.btn-dark:hover{background:var(--gold);color:var(--deep0)}
.btn svg{width:16px;height:16px;flex-shrink:0}

/* nav */
nav{position:sticky;top:0;z-index:90;background:rgba(var(--deep0-rgb),.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(var(--gold-rgb),.14)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.navlogo{display:flex;align-items:center;gap:10px}
.navlogo img.mark{height:40px;width:auto}
.navlogo img.word{height:19px;width:auto}
footer .navlogo{gap:12px;margin-bottom:14px}
footer .navlogo img.mark{height:46px}
footer .navlogo img.word{height:22px}
.navlinks{display:flex;gap:28px;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--onlight);align-items:center}
.navlinks a{position:relative;padding:4px 0;transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--gold)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
.navcta{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);padding:9px 16px;border-radius:2px;transition:.2s}
.navcta:hover{background:linear-gradient(180deg,var(--goldlt2),var(--goldd));color:var(--deep0)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--gold);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:74px 0 0;background:var(--deep);z-index:80;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-transform:uppercase;letter-spacing:2px;color:var(--onlight);font-size:16px}
.mobile-menu.show{display:flex}
.mobile-menu a:hover{color:var(--gold)}

/* hero */
.hero{background:var(--deep);color:var(--text);text-align:center;position:relative;overflow:hidden;padding:clamp(66px,11vw,112px) 0 clamp(40px,7vw,64px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 24%,rgba(var(--gold-rgb),.24),transparent 62%)}
.hero .container{position:relative;z-index:2}
.hero-logo{width:min(430px,74vw);margin:0 auto;filter:drop-shadow(0 10px 34px rgba(var(--gold-rgb),.22))}
.hero-logo img{width:100%;height:auto}
.hero-tag{font-family:'Cormorant Garamond',serif;letter-spacing:9px;text-transform:uppercase;font-size:clamp(13px,2.4vw,20px);color:var(--gold);margin-top:6px;font-weight:500}
.hero-rule{width:56px;height:1px;background:var(--gold);margin:20px auto 0;opacity:.8}
.hero p.sub{max-width:580px;margin:22px auto 0;color:var(--ondeep);font-size:clamp(16px,2.2vw,18px)}

/* DUAL-PATH CHOOSER (the new UX centrepiece) */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:38px auto 0}
.path{position:relative;overflow:hidden;border:1px solid rgba(var(--gold-rgb),.32);border-radius:16px;padding:30px 26px 26px;text-align:left;background:linear-gradient(160deg,rgba(var(--deep-rgb),.6),rgba(var(--deep0-rgb),.4));transition:transform .3s,border-color .3s,box-shadow .3s}
.path:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 24px 50px -28px rgba(var(--gold-rgb),.6)}
.path .pi{width:46px;height:46px;color:var(--gold);margin-bottom:14px}
.path .plabel{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--goldlt);display:block;margin-bottom:6px}
.path h3{font-size:26px;color:var(--text);line-height:1.1}
.path p{font-size:14px;color:var(--ondeep);margin:8px 0 18px}
.path .go{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.path .go svg{width:15px;height:15px;transition:transform .3s}
.path:hover .go svg{transform:translateX(5px)}
.path.at::after{content:"New";position:absolute;top:16px;right:16px;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;background:var(--gold);color:var(--deep0);padding:3px 9px;border-radius:20px}

/* trust bar */
.trustbar{background:var(--deep);color:var(--text);border-bottom:1px solid var(--deep3);border-top:1px solid rgba(var(--gold-rgb),.2)}
.trustbar .container{display:flex;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap;padding:26px 28px;text-align:center}
.trustbar .t b{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);display:block;font-weight:600}
.trustbar .t span{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ondeep)}

/* page hero */
.page-hero{background:var(--deep);color:var(--text);text-align:center;padding:clamp(74px,10vw,110px) 0 clamp(54px,8vw,78px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(var(--gold-rgb),.18),transparent 60%)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font-size:clamp(37px,6vw,64px)}
.page-hero p{color:var(--ondeep);max-width:580px;margin:16px auto 0}

/* three pillars */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
.pill{text-align:center}
.pill .ic{width:62px;height:62px;margin:0 auto 16px;padding:14px;border:1px solid rgba(var(--gold-rgb),.35);border-radius:50%;transition:transform .3s,border-color .3s}
.pill:hover .ic{transform:translateY(-4px) rotate(-4deg);border-color:var(--gold)}
.pill h3{font-size:23px;margin-bottom:6px}
.pill p{font-size:15px;color:var(--ink2)}

/* featured image strip */
.featstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.frame{border-radius:14px;overflow:hidden;aspect-ratio:3/4;position:relative;background:linear-gradient(150deg,var(--deep2),var(--deep))}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .6s}
.frame:hover img{transform:scale(1.06)}
.frame .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;color:#fff;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* tiers */
.tierwrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:42px;text-align:left}
.tier{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:36px 32px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tier .k{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.tier h3{font-size:27px}
.tier p{font-size:15px;color:var(--ink2);margin-top:8px}
.tier ul{margin:14px 0 22px;padding-left:18px;font-size:15.5px;color:var(--ink2)}
.tier li{margin-bottom:5px}

/* process steps */
.dark{background:radial-gradient(circle at 50% 0%,rgba(var(--gold-rgb),.08),transparent 55%),var(--deep);color:var(--text)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px;text-align:left}
.step{position:relative;padding-top:14px}
.step::before{content:"";position:absolute;top:0;left:0;width:30px;height:2px;background:var(--gold)}
.step .n{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:42px;color:var(--gold);line-height:1}
.step h3{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;margin:8px 0 6px}
.step p{font-size:14px;color:var(--ondeep)}
section:not(.dark) .step p{color:var(--ink2)}
section:not(.dark) .step h3{color:var(--text)}

/* feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev .txt{order:2}
.featimg{aspect-ratio:4/5;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(150deg,var(--deep2),var(--deep))}
.featimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.txt ul{margin:16px 0 22px;padding-left:18px;color:var(--ink2)}
.txt li{margin-bottom:6px}
.txt p{color:var(--ink2);font-size:16px}

/* about / portrait */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.portrait{aspect-ratio:4/5;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(150deg,var(--deep2),var(--deep))}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.portrait .ph{position:absolute;inset:0;display:flex;align-items:flex-end;color:var(--goldlt);font-family:'Cormorant Garamond',serif;font-style:italic;padding:18px;z-index:0}
.sig{font-family:'Yellowtail',cursive;color:var(--gold);font-size:40px;margin-top:18px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.shot{border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:linear-gradient(150deg,var(--deep2),var(--deep));position:relative;display:flex;align-items:flex-end}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform .55s}
.shot:hover img{transform:scale(1.06)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.55));z-index:1}
.shot span{padding:16px;color:#fff;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;width:100%;position:relative;z-index:2}
.shot small{position:absolute;top:14px;left:16px;color:#fff;background:rgba(var(--deep0-rgb),.55);padding:3px 9px;border-radius:20px;font-size:10px;letter-spacing:2px;text-transform:uppercase;z-index:2}

/* quote */
.quote{max-width:780px;margin:0 auto;text-align:center;position:relative}
.quote .mark{font-family:'Cormorant Garamond',serif;font-size:90px;color:var(--gold);line-height:.4;opacity:.5}
.quote p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(21px,3.2vw,30px);color:var(--ink);line-height:1.45}
.quote .who{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:18px}

/* ============================================================
   AT HOME service components
   ============================================================ */
.athero{background:radial-gradient(circle at 50% -10%,rgba(var(--gold-rgb),.1),transparent 60%),var(--deep);color:var(--text);position:relative;overflow:hidden;padding-bottom:clamp(36px,4vw,52px)}
.athero .split{padding:clamp(56px,8vw,86px) 0;align-items:center}
.athero .txt p{color:var(--ondeep)}
.athero .featimg{aspect-ratio:auto;height:clamp(360px,42vw,470px)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(var(--gold-rgb),.4);border-radius:20px;padding:6px 14px;margin-bottom:16px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

.athow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px;text-align:left;counter-reset:s}
.athow .step2{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 22px;transition:transform .3s,box-shadow .3s}
.athow .step2:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.athow .step2 .ic{width:40px;height:40px;color:var(--gold);margin-bottom:12px}
.athow .step2 h3{font-family:'Cormorant Garamond',serif;font-size:21px;margin-bottom:6px}
.athow .step2 p{font-size:14px;color:var(--ink2)}

.incl{display:grid;grid-template-columns:1fr 1fr;gap:14px 36px;max-width:820px;margin:34px auto 0;text-align:left}
.incl li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink2)}
.incl li svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:3px}

.coverage{background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--line2);border-radius:16px;padding:30px 34px;max-width:760px;margin:36px auto 0;text-align:center}
.coverage h4{font-family:'Cormorant Garamond',serif;font-size:24px;margin-bottom:8px}
.coverage .chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
.coverage .chips span{font-size:12px;letter-spacing:1px;background:var(--surface-4);border:1px solid var(--line);color:var(--ink);padding:6px 14px;border-radius:20px}
.coverage small{display:block;margin-top:16px;color:var(--stone);font-size:12.5px}

/* ============================================================
   BOOKING with mode toggle
   ============================================================ */
.enq{background:radial-gradient(circle at 50% -8%,rgba(var(--gold-rgb),.12),transparent 55%),var(--deep);color:var(--text)}
.toggle{display:inline-flex;background:var(--deep2);border:1px solid var(--deep3);border-radius:40px;padding:5px;margin:26px auto 0;position:relative}
.toggle button{border:none;background:transparent;color:var(--ondeep);font-family:'Jost';font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 24px;border-radius:40px;cursor:pointer;transition:color .25s;position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px}
.toggle button svg{width:16px;height:16px}
.toggle button.on{color:var(--deep0)}
.toggle .slider{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--gold);border-radius:40px;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1}
.toggle.home .slider{transform:translateX(100%)}
.mode-note{margin:18px auto 0;max-width:560px;color:var(--ondeep);font-size:14px;min-height:20px}

.form{max-width:660px;margin:30px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.form .full{grid-column:1/-1}
.form label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;background:var(--deep2);border:1px solid var(--deep3);color:var(--text);padding:12px 14px;border-radius:3px;font-family:'Jost';font-size:15px;transition:border .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form input[type=date]{color-scheme:dark}
.form .home-only{display:none}
.form.show-home .home-only{display:block}
.wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#146640;color:#fff;height:52px;line-height:1;padding:0 26px;border-radius:2px;letter-spacing:2px;text-transform:uppercase;font-size:12px;margin:0;vertical-align:top;transition:transform .2s,background .2s}
.wa:hover{transform:translateY(-2px);background:#0F5233}
.wa svg{flex-shrink:0}

/* keep paired CTA buttons vertically aligned and equal height */
.btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}

/* info cards */
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.infocard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px;text-align:center;transition:transform .3s,box-shadow .3s}
.infocard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.infocard .ic{width:46px;height:46px;margin:0 auto 14px;color:var(--gold)}
.infocard h3{font-family:'Cormorant Garamond',serif;font-size:22px;margin-bottom:6px}
.infocard p,.infocard a{font-size:14.5px;color:var(--ink2)}
.infocard a{color:var(--gold)}

/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;text-align:left}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;transition:transform .3s,box-shadow .3s;position:relative}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tcard .stars{color:var(--gold);letter-spacing:3px;font-size:13px;margin-bottom:12px}
.tcard blockquote{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.5;color:var(--ink);font-style:italic;margin-bottom:18px}
.tcard .by{display:flex;align-items:center;gap:12px}
.tcard .mono{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--goldlt),var(--goldd));color:var(--deep0);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;flex-shrink:0}
.tcard .who b{font-family:'Jost';font-weight:500;font-size:14px;letter-spacing:.3px;display:block;color:var(--text)}
.tcard .who span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--stone)}
.tcard.wide{grid-column:span 3;text-align:center;background:linear-gradient(135deg,var(--card2),var(--card));border-color:rgba(var(--gold-rgb),.4)}
.tcard.wide blockquote{font-size:clamp(21px,3vw,28px);max-width:760px;margin:0 auto 18px}
.tcard.wide .by{justify-content:center}

/* footer */
footer{background:var(--deep0);color:var(--stone);padding:56px 0 96px;border-top:2px solid rgba(var(--gold-rgb),.32);padding-bottom:30px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.foot .navlogo{font-size:40px;margin-bottom:10px;color:var(--gold)}
.foot h3{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.foot a,.foot p{display:block;font-size:14px;margin-bottom:7px;color:var(--ondeep)}
.foot a:hover{color:var(--gold)}
.copy{border-top:1px solid var(--deep);margin-top:36px;padding-top:20px;font-size:13.5px;text-align:center;letter-spacing:1px;color:var(--stone2)}

/* STICKY MOBILE ACTION BAR (new UX) */
.actionbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(var(--deep0-rgb),.96);backdrop-filter:blur(10px);border-top:1px solid rgba(var(--gold-rgb),.24);padding:9px 12px;gap:9px}
.actionbar a{flex:1;text-align:center;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 6px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--onlight)}
.actionbar a svg{width:19px;height:19px}
.actionbar a.call{color:var(--goldlt)}
.actionbar a.wa{background:#146640;color:#fff;margin-top:0;height:auto;padding:12px 6px;letter-spacing:1.5px;font-size:11px}

/* nav dropdown */
.has-drop{position:relative;display:flex;align-items:center}
.has-drop>a{display:inline-flex;align-items:center;gap:5px}
.has-drop .caret{width:12px;height:12px;transition:transform .25s;opacity:.8}
.has-drop:hover .caret{transform:rotate(180deg)}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(var(--deep0-rgb),.98);backdrop-filter:blur(10px);border:1px solid rgba(var(--gold-rgb),.22);border-radius:10px;padding:8px;min-width:190px;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);z-index:95}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:12px}
.drop a{display:block;padding:10px 14px;border-radius:6px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--onlight);transition:background .2s,color .2s}
.drop a:hover{background:rgba(var(--gold-rgb),.14);color:var(--gold)}
.mobile-menu a.sub{font-size:13px;letter-spacing:2px;color:var(--goldlt);opacity:.85;margin-top:-8px}

/* revamped scroll cue */
.scrolldown{margin:36px auto 0;width:34px;height:34px;border:1px solid rgba(var(--gold-rgb),.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);cursor:pointer;transition:border-color .3s,background .3s;animation:bob 2s ease-in-out infinite}
.scrolldown:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}
.scrolldown svg{width:16px;height:16px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* product gallery (collection pages) */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:44px}
.pcard{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--deep2),var(--deep));display:block}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .6s}
.pcard:hover img{transform:scale(1.07)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(0,0,0,.68));z-index:1}
.pcard .ptag{position:absolute;top:12px;left:12px;z-index:3;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:rgba(var(--deep0-rgb),.55);border:1px solid rgba(255,255,255,.18);padding:4px 9px;border-radius:20px}
.pcard .pname{position:absolute;left:14px;right:14px;bottom:36px;z-index:3;color:#fff;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;line-height:1.25;transition:bottom .3s}
.pcard .penq{position:absolute;left:14px;bottom:14px;z-index:3;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--goldlt);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;display:inline-flex;align-items:center;gap:6px}
.pcard:hover .pname{bottom:44px}
.pcard:hover .penq{opacity:1;transform:none}
.pcount{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--stone);margin-top:10px;border-top:1px solid rgba(var(--gold-rgb),.3);border-bottom:1px solid rgba(var(--gold-rgb),.3);display:inline-block;padding:8px 22px;border-radius:2px}

/* overview hub cards */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;text-align:left}
.hubcard{position:relative;border-radius:18px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;background:linear-gradient(150deg,var(--deep2),var(--deep))}
.hubcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform .7s}
.hubcard:hover img{transform:scale(1.05)}
.hubcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.82));z-index:1}
.hubcard .hc{position:relative;z-index:2;padding:34px 32px;color:#fff}
.hubcard .hc .k{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--goldlt);display:block;margin-bottom:8px}
.hubcard .hc h3{font-size:32px;line-height:1.05;color:#fff}
.hubcard .hc p{font-size:14.5px;color:var(--onlight);margin:8px 0 18px;max-width:400px}
@media(max-width:860px){.hub{grid-template-columns:1fr}.hubcard{min-height:360px}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* responsive */
@media(max-width:960px){
  .featstrip{grid-template-columns:1fr 1fr}
  .athow{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .three{grid-template-columns:1fr;gap:34px}
  .tierwrap,.paths{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:30px}
  .about,.split,.athero .split{grid-template-columns:1fr;gap:26px}
  .split.rev .txt{order:0}
  .info,.incl{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:1fr 1fr}
  .tcard.wide{grid-column:span 2}
}
/* nav swaps to the burger at 860px, not 680px: the dropdown is hover-only and
   touch tablets (iPad portrait = 768) could never open it */
@media(max-width:860px){
  .navlinks,.navcta{display:none}
  .burger{display:flex}
  .mobile-menu{z-index:120}
  nav{z-index:130}
}
@media(max-width:680px){
  .actionbar{display:flex}
  .gallery,.featstrip,.athow{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
  .tcard.wide{grid-column:span 1}
  .incl{grid-template-columns:1fr}
}

/* ---- component refinements ---- */

/* gold buttons need dark text for contrast */

.actionbar a.bookb{background:var(--gold);color:var(--deep0)}

/* warmer card placeholder while images load */
.pcard,.frame,.shot,.featimg,.portrait,.hubcard{background:linear-gradient(150deg,var(--deep2),var(--deep0))}
/* thin gold hairline accents echoing the flyer */

/* flyer ribbon strip */
.ribbon{background:linear-gradient(90deg,var(--deep0),var(--deep2),var(--deep0));color:var(--goldlt);text-align:center;letter-spacing:6px;text-transform:uppercase;font-size:15px;padding:14px 20px;border-top:1px solid rgba(var(--gold-rgb),.28);border-bottom:1px solid rgba(var(--gold-rgb),.28);font-family:'Cormorant Garamond',serif;font-style:italic}
.ribbon b{color:var(--onlight);font-weight:400;font-style:normal}
.ribbon .hs{color:var(--gold);margin:0 12px}
/* service cards (At Home flyer services) */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;text-align:left}
.svc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold),var(--goldd))}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.svc .ic{width:46px;height:46px;color:var(--gold);margin-bottom:14px}
.svc h3{font-size:22px;margin-bottom:6px}
.svc p{font-size:14.5px;color:var(--ink2)}
@media(max-width:860px){.svcs{grid-template-columns:1fr}}

/* warm cream base with the faintest vertical gradient */

/* richer antique-gold buttons (gradient + soft shadow) */

.hubcard .btn-gold{box-shadow:none}

/* framed, medallioned CTA panels: turns flat maroon blocks into elegant boxes */

.enq .container,.enq .container-sm{position:relative;max-width:880px;border:1px solid rgba(var(--gold-rgb),.38);border-radius:16px;padding:clamp(46px,6vw,72px) 30px;background:linear-gradient(160deg,rgba(var(--gold-rgb),.07),rgba(var(--gold-rgb),0))}
.enq .container::before,.enq .container-sm::before{content:"\2756";position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--deep0);border:1px solid rgba(var(--gold-rgb),.6);border-radius:50%;color:var(--gold);font-size:14px}
.enq .container::after,.enq .container-sm::after{content:"";position:absolute;left:24px;right:24px;bottom:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.35),transparent)}

/* subtle gold vignette on the dark storytelling sections */

/* premium gold hairline on cards */
.tier,.infocard,.svc,.tcard,.step2{border-color:rgba(var(--gold-rgb),.3)}

/* refined flourish + eyebrow */

/* elegant framed lookbook count */

/* ribbon: refine to a slim gilt band */

/* footer gets a thin gold top rule */

/* section headings on cream get a touch more presence */

/* page hero: gilt frame accent under title */

.svc,.step2,.infocard,.tier{box-shadow:0 12px 30px -22px rgba(var(--deep-rgb),.4)}

/* secondary buttons use the gold family (not white/wine) so pairs feel consistent */

/* footer: remove desktop dead gap (the 96px was only for the mobile action bar) */

@media(max-width:680px){footer{padding-bottom:92px}}

.hero p.sub,.path p,.lead{font-weight:400}
.pill p,.svc p,.step p,.step2 p,.tier p,.txt p,.infocard p,.tcard .who span,.mode-note,.foot a,.foot p,.copy{font-weight:400;font-size:16px}

/* ---- dark theme polish ---- */
::selection{background:rgba(var(--gold-rgb),.28);color:var(--onlight)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--deep3);border-radius:20px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--goldd)}

.form input::placeholder,.form textarea::placeholder{color:var(--ink3);opacity:1}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
/* photos glare on a near-black page: settle them slightly, restore on hover */
.pcard img,.frame img,.shot img,.featimg img,.hubcard img{filter:brightness(.9) saturate(.97)}
.pcard:hover img,.frame:hover img,.shot:hover img,.hubcard:hover img{filter:brightness(1) saturate(1)}
/* raised cards need a lit top edge on dark, borders alone read flat */
.tier,.athow .step2,.infocard,.tcard,.svc,.coverage{box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),.09),0 14px 30px -22px rgba(0,0,0,.9)}
.tier:hover,.athow .step2:hover,.infocard:hover,.tcard:hover,.svc:hover{box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),.16),var(--shadow)}

/* ---- v3 review fixes: a11y, responsive, new elements ---- */
/* hero h1 (document was opening at h3) */
.hero-h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(19px,2.6vw,26px);letter-spacing:.4px;color:var(--goldlt);max-width:640px;margin:18px auto 0;line-height:1.35}
.hero-browse{margin:22px auto 0}
.hero-browse a{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ondeep);border-bottom:1px solid rgba(var(--gold-rgb),.45);padding-bottom:3px;transition:color .2s,border-color .2s}
.hero-browse a:hover{color:var(--goldlt);border-color:var(--goldlt)}
/* dual-path card titles: were <h3> and broke the heading order */
.path-t{display:block;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;color:var(--text);line-height:1.1}
/* keyboard access to the Collections dropdown (was hover-only) */
.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
/* booking: piece carried from a collection tile, and the WhatsApp result state */
.piece-note{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--goldlt);border:1px solid rgba(var(--gold-rgb),.35);border-radius:3px;padding:10px 14px;text-align:left}
.sendresult{font-size:14px;line-height:1.6;padding:14px 16px;border-radius:4px;text-align:left}
.sendresult.ok{background:rgba(var(--gold-rgb),.10);border:1px solid rgba(var(--gold-rgb),.4);color:var(--text)}
.sendresult.warn{background:rgba(198,90,40,.14);border:1px solid rgba(230,140,80,.5);color:#FFD9BE}
.sendresult a{color:var(--goldlt);border-bottom:1px solid var(--goldlt)}
/* tile that failed to load: visible, not silently removed */
.pcard.img-missing{display:flex;align-items:center;justify-content:center;background:var(--card);border:1px dashed rgba(var(--gold-rgb),.35)}
.pcard.img-missing::after{content:"Image unavailable";font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--stone)}
.pcard.img-missing img,.pcard.img-missing .pname,.pcard.img-missing .ptag,.pcard.img-missing .pgo{display:none}

@media(max-width:680px){
  /* 4-step grid stayed 2-up at 360px, leaving ~121px of content per card */
  .athow{grid-template-columns:1fr}
  /* the sticky action bar was rendering over the open mobile menu */
  .actionbar{z-index:70;padding-bottom:calc(9px + env(safe-area-inset-bottom))}
  .mobile-menu{z-index:120}
  nav{z-index:130}
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--deep0);padding:12px 20px;font-size:13px;letter-spacing:2px;text-transform:uppercase;border-radius:0 0 3px 0}
.skip-link:focus{left:0}


/* ---- touch: tap targets (were 22-27px; WCAG 2.5.8 floor is 24, comfortable is 44) ---- */
@media(max-width:860px){
  .mobile-menu a{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;padding:0 16px}
  .mobile-menu{gap:6px}
  .foot a{min-height:44px;display:flex;align-items:center;margin-bottom:0}
  .foot h3{margin-top:18px}
  .drop a{min-height:44px;display:flex;align-items:center}
}

/* ---- Studio vs At Home: two cards (replaces the compare table) ---- */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;text-align:left}
.way{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),.09),0 14px 30px -22px rgba(0,0,0,.9)}
.way-home{border-color:rgba(var(--gold-rgb),.42);background:var(--card2)}
.way-k{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.way h3{font-family:'Cormorant Garamond',serif;font-size:29px;font-weight:600;margin:8px 0 6px;color:var(--text)}
.way-lead{font-size:16px;color:var(--ink2);margin-bottom:6px}
.way dl{margin:14px 0 26px}
.way dl>div{padding:14px 0;border-bottom:1px solid var(--line)}
.way dl>div:last-child{border-bottom:none}
.way dt{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.way dd{margin:0;font-size:16px;line-height:1.55;color:var(--text)}
.way dd b{color:var(--goldlt);font-weight:500}
.way .btn{margin-top:auto;width:100%}
@media(max-width:860px){.ways{grid-template-columns:1fr;gap:18px}}

/* ---- readability pass: body copy was 15px and captions 11px on a 390px screen ---- */

.foot a{font-size:15px}

.way-lead,.way dd{font-size:16px}
@media(max-width:680px){
  body{line-height:1.75}
  .pill p,.svc p,.step p,.step2 p,.tier p,.txt p,.infocard p{font-size:16.5px}
  .eyebrow{font-size:12px;letter-spacing:3.5px}
  /* the ribbon wrapped mid-phrase with 6px tracking at 15px */
  .ribbon{font-size:13px;letter-spacing:1.5px;padding:12px 14px;line-height:1.7;white-space:nowrap}
  /* gold and green CTAs rendered at different widths when stacked */
  .btns{flex-direction:column;align-items:stretch;gap:12px}
  .btns .btn,.btns .wa{width:100%;padding:0 18px}
  .trustbar .container{gap:22px 18px;padding:24px 20px}
  .trustbar .t{min-width:132px}
}


/* ============================================================
   MOBILE-ONLY REFINEMENTS
   Everything below is inside a media query. Desktop is untouched.
   ============================================================ */

/* testimonials become a horizontal snap rail (was 7 stacked cards = 2.6 screens) */
.swipe-hint{display:none}
@media(max-width:860px){
  .swipe-hint{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--stone);margin-top:26px}
  .tgrid{display:flex;overflow-x:auto;gap:14px;margin:14px -28px 0;padding:0 28px 16px;
    scroll-snap-type:x mandatory;scroll-padding-left:28px;overscroll-behavior-x:contain}
  .tgrid>.tcard{flex:0 0 84%;scroll-snap-align:start;margin:0}
  .tcard.wide{grid-column:auto;text-align:left}
  .tgrid::-webkit-scrollbar{height:4px}
  .tgrid::-webkit-scrollbar-track{background:rgba(var(--gold-rgb),.10);border-radius:4px}
  .tgrid::-webkit-scrollbar-thumb{background:rgba(var(--gold-rgb),.45);border-radius:4px}
  .tgrid:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
  /* 96 product tiles are expensive to paint on a phone */
  .pcard{content-visibility:auto;contain-intrinsic-size:auto 300px}
}

@media(max-width:680px){
  /* footer was 980px (1.16 screens). Nav and the action bar already cover these
     destinations, so compact it to two columns and drop the duplicated blurb.
     Links are kept, not hidden, so mobile-first indexing still sees them. */
  .foot{grid-template-columns:1fr 1fr;gap:2px 18px}
  .foot>div:first-child{grid-column:1/-1;margin-bottom:6px}
  .foot>div:first-child p:not(.script){display:none}
  .foot h3{margin-top:12px;margin-bottom:6px}
  footer{padding-top:40px}
  .copy{margin-top:20px;padding-top:16px}
  /* hero ran to 1232px before a single word of content */
  .hero{padding:44px 0 36px}
  .hero-logo{width:min(300px,64vw)}
  .hero-h1{margin-top:14px}
  .paths{margin-top:24px;gap:12px}
  .path{padding:22px 20px 20px}
  .hero-browse{margin-top:18px}
  /* tighten vertical rhythm so the page is less of a marathon */
  section{padding:46px 0}
  h2{font-size:clamp(27px,7vw,34px)}
  .trustbar .container{padding:20px}
}