/* ============================================================ tokens === */
:root{
  --navy:#14283c; --navy-d:#0d1c2b; --navy-s:#1e3853; --navy-l:#2c4c6d;
  --gold:#b9893c; --gold-b:#c9a24a; --gold-l:#e0c691; --gold-t:#f6efe1;
  --cream:#faf7f2; --paper:#fff; --tint:#f5f2ec;
  --ink:#15212c; --body:#4c5d6c; --muted:#7d8b99; --line:#e8e3da; --line-s:#f0ece5;
  --ok:#2f7d5b; --err:#b4442f; --line-green:#06c755;

  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,40,60,.05),0 2px 8px rgba(20,40,60,.05);
  --sh-2:0 2px 6px rgba(20,40,60,.06),0 12px 28px rgba(20,40,60,.08);
  --sh-3:0 4px 12px rgba(20,40,60,.08),0 24px 56px rgba(20,40,60,.12);

  --wrap:1200px; --gut:clamp(18px,4vw,32px);
  --sec-y:clamp(56px,7vw,104px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --f:"IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-d:"Cormorant Garamond",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--f); font-weight:400; font-size:clamp(15.5px,.55vw + 14.4px,17px);
  line-height:1.75; color:var(--body); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--ink);line-height:1.28;font-weight:600;letter-spacing:-.011em;text-wrap:balance}
h1{font-size:clamp(31px,4.4vw,54px);letter-spacing:-.02em}
h2{font-size:clamp(25px,3vw,38px);letter-spacing:-.016em}
h3{font-size:clamp(18px,1.3vw,21px)}
p{text-wrap:pretty}
::selection{background:var(--gold-l);color:var(--navy-d)}
:focus-visible{outline:2.5px solid var(--gold-b);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.muted{color:var(--muted);font-style:normal}

/* ============================================================= icons === */
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================ images === */
.pic{position:relative;overflow:hidden;border-radius:inherit;background-size:cover;background-position:center;width:100%}
.pic>img{width:100%;height:100%;display:block}
.pic--whole{background:var(--tint)}
.pic--whole>img{object-fit:contain}
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:
    repeating-linear-gradient(135deg,rgba(20,40,60,.028) 0 2px,transparent 2px 11px),
    linear-gradient(150deg,#f6f3ed,#eae4d9);
  color:#9aa6b1;border-radius:inherit;border:1px solid var(--line);text-align:center;padding:20px}
.ph svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ph span{font-size:13px;line-height:1.4;max-width:22ch}
.framed{border-radius:var(--r-lg);box-shadow:var(--sh-2)}

/* =========================================================== buttons === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-weight:600;font-size:15px;line-height:1.35;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,color .18s,border-color .18s;
}
.btn .ic{width:17px;height:17px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:15px 30px;font-size:16px}
.btn--gold{background:linear-gradient(135deg,var(--gold-b),var(--gold));color:#fff;box-shadow:0 4px 14px rgba(185,137,60,.32)}
.btn--gold:hover{box-shadow:0 8px 24px rgba(185,137,60,.42)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(20,40,60,.22)}
.btn--navy:hover{background:var(--navy-s);box-shadow:0 8px 24px rgba(20,40,60,.3)}
.btn--outline{border-color:var(--line);color:var(--ink);background:var(--paper)}
.btn--outline:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.btn--outline-w{border-color:rgba(255,255,255,.4);color:#fff}
.btn--outline-w:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--ghost{color:var(--ink);padding-inline:14px}
.btn--ghost:hover{color:var(--gold)}
.btn--line{background:var(--line-green);color:#fff;box-shadow:0 4px 14px rgba(6,199,85,.28)}
.btn--line:hover{background:#05b34c;box-shadow:0 8px 22px rgba(6,199,85,.36)}

/* ====================================================== announcement === */
.ann{background:var(--navy-d);color:#e5ddcd;font-size:13.5px;text-align:center}
.ann a,.ann>span{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 16px;min-height:38px}
.ann .ic{width:15px;height:15px;color:var(--gold-l)}
.ann a:hover{color:#fff}
.ann a .ic:last-child{transition:transform .2s var(--ease)}
.ann a:hover .ic:last-child{transform:translateX(3px)}

/* =========================================================== header === */
.hd{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line-s);transition:box-shadow .25s}
.hd.is-stuck{box-shadow:var(--sh-1)}
.hd__in{display:flex;align-items:center;gap:clamp(12px,2.5vw,34px);min-height:clamp(70px,7vw,86px)}
.hd__logo img{height:clamp(40px,4.4vw,56px);width:auto}
.hd__nav{display:none;gap:clamp(14px,1.9vw,28px);margin-inline:auto;font-size:15px;font-weight:500}
.hd__nav a{position:relative;color:var(--ink);padding:6px 0;transition:color .18s}
.hd__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold-b);
  border-radius:2px;transition:right .25s var(--ease)}
.hd__nav a:hover,.hd__nav a[aria-current]{color:var(--gold)}
.hd__nav a:hover::after,.hd__nav a[aria-current]::after{right:0}
.hd__act{display:flex;align-items:center;gap:8px;margin-left:auto}
.hd__tel{display:none}
.hd__burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);
  background:var(--paper);border-radius:var(--r-sm);cursor:pointer;color:var(--ink)}
.hd__burger .ic{width:21px;height:21px;grid-area:1/1;transition:opacity .2s,transform .2s}
.hd__burger .ic:last-child{opacity:0;transform:rotate(-45deg)}
.hd__burger[aria-expanded=true] .ic:first-child{opacity:0;transform:rotate(45deg)}
.hd__burger[aria-expanded=true] .ic:last-child{opacity:1;transform:none}

.mnav{position:fixed;inset:auto 0 0 0;top:0;z-index:88;background:var(--paper);padding:110px var(--gut) 32px;
  overflow-y:auto;animation:mnavIn .3s var(--ease)}
.mnav[hidden]{display:none}
@keyframes mnavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav nav{display:flex;flex-direction:column}
.mnav nav a{display:flex;align-items:center;justify-content:space-between;padding:17px 4px;
  border-bottom:1px solid var(--line-s);font-size:18px;font-weight:500;color:var(--ink)}
.mnav nav a .ic{width:17px;height:17px;color:var(--gold-b)}
.mnav__act{display:grid;gap:10px;margin-top:26px}

/* ========================================================= sections === */
.sec{padding-block:var(--sec-y)}
.sec--tight{padding-block:clamp(38px,5vw,64px)}
.sec--top{padding-top:clamp(28px,3.5vw,48px)}
.sec--tint{background:var(--cream)}
.sec--navy{background:var(--navy);color:#c3d0dc}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec__more{display:flex;justify-content:center;margin-top:clamp(30px,4vw,48px)}

.eyebrow{font-family:var(--f-d);font-size:15px;font-style:italic;letter-spacing:.08em;
  color:var(--gold);text-transform:none;margin-bottom:10px;font-weight:500}
.sec--navy .eyebrow,.shead--w .eyebrow{color:var(--gold-l)}
.shead{max-width:62ch;margin-bottom:clamp(30px,4vw,50px)}
.shead--c{margin-inline:auto;text-align:center}
.shead--w h2{color:#fff}
.shead--w .shead__p{color:#a9bccb}
.shead__p{margin-top:14px;font-size:clamp(15.5px,.6vw + 14px,17.5px);color:var(--body)}

.grid-3{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}

/* ============================================================= hero === */
.hero{position:relative;background:#f2f0ec;overflow:hidden}
.hero__track{display:grid;grid-template-columns:minmax(0,1fr)}
.hero__s{grid-area:1/1;position:relative;min-width:0;opacity:0;visibility:hidden;pointer-events:none;
  display:flex;flex-direction:column;transition:opacity .7s var(--ease),visibility .7s}
.hero__s.is-on{opacity:1;visibility:visible;pointer-events:auto;z-index:2}

.hero__img{position:relative;width:100%}
.hero__pic{border-radius:0;width:100%;aspect-ratio:16/10}
.hero__pic>img{width:100%;height:100%}

/* readable panel over the image — neutral, never a solid block of colour */
.hero__scrim{display:none}

.hero__txt{position:relative;background:var(--paper);padding:clamp(28px,5vw,44px) 0 clamp(32px,6vw,48px)}
.hero__txtin{max-width:640px}
.hero__s.is-on .hero__txtin>*{animation:heroUp .7s var(--ease) both}
.hero__s.is-on .hero__txtin>*:nth-child(2){animation-delay:.07s}
.hero__s.is-on .hero__txtin>*:nth-child(3){animation-delay:.14s}
.hero__s.is-on .hero__txtin>*:nth-child(4){animation-delay:.21s}
@keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero__h{color:var(--ink);font-size:clamp(27px,3.4vw,45px);line-height:1.26;letter-spacing:-.02em}
.hero__txtin p{color:var(--body);margin-top:14px;font-size:clamp(15.5px,.6vw + 14px,18px);max-width:54ch}
.hero__b{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(22px,3vw,32px)}
.btn--hero2{border-color:var(--line);color:var(--ink);background:var(--paper)}
.btn--hero2:hover{border-color:var(--navy);background:var(--navy);color:#fff}

/* dark photos: flip the copy to white and use a neutral (not blue) veil */
.hero__s[data-tone=dark] .hero__txt{background:#171c21}
.hero__s[data-tone=dark] .hero__h{color:#fff}
.hero__s[data-tone=dark] .hero__txtin p{color:#c8ced4}
.hero__s[data-tone=dark] .eyebrow{color:var(--gold-l)}
.hero__s[data-tone=dark] .btn--hero2{background:transparent;border-color:rgba(255,255,255,.36);color:#fff}
.hero__s[data-tone=dark] .btn--hero2:hover{background:#fff;color:#171c21;border-color:#fff}

.hero__nav{position:absolute;bottom:16px;z-index:5;width:44px;height:44px;
  display:none;place-items:center;border-radius:var(--r-pill);border:1px solid rgba(21,33,44,.14);
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;
  box-shadow:var(--sh-1);transition:background .2s,border-color .2s,color .2s}
.hero__nav:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.hero__nav .ic{width:19px;height:19px}
.hero__nav--p{right:74px}
.hero__nav--n{right:22px}
.hero__dots{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:5;display:flex;gap:8px}
.hero__dots button{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;display:grid;align-items:center}
.hero__dots i{display:block;height:3px;border-radius:2px;background:rgba(21,33,44,.22);transition:background .25s,transform .25s}
.hero__dots button[aria-selected=true] i{background:var(--gold);transform:scaleY(1.7)}

/* ============================================================ trust === */
.trust{background:var(--paper);border-bottom:1px solid var(--line-s)}
.trust__in{display:grid;gap:clamp(14px,2vw,26px);padding-block:clamp(26px,3.4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.trust__i{display:flex;gap:13px;align-items:flex-start}
.trust__i>span{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--r-sm);
  background:var(--gold-t);color:var(--gold)}
.trust__i .ic{width:21px;height:21px}
.trust__i h3{font-size:16px;font-weight:600;margin-bottom:1px}
.trust__i p{font-size:14px;color:var(--muted);line-height:1.55}

/* ==================================================== category card === */
.ccard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.ccard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent}
.ccard__img{overflow:hidden}
.ccard__img .pic>img,.ccard__img .ph{transition:transform .55s var(--ease)}
.ccard:hover .ccard__img .pic>img{transform:scale(1.05)}
.ccard__b{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:8px;flex:1;position:relative}
.ccard__ic{position:absolute;top:-27px;right:22px;width:54px;height:54px;display:grid;place-items:center;
  border-radius:var(--r);background:var(--navy);color:var(--gold-l);box-shadow:var(--sh-2)}
.ccard__ic .ic{width:24px;height:24px}
.ccard__b p{font-size:14.5px;color:var(--muted);line-height:1.6}
.ccard__go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--gold)}
.ccard__go .ic{width:15px;height:15px;transition:transform .2s var(--ease)}
.ccard:hover .ccard__go .ic{transform:translateX(4px)}

/* ===================================================== product card === */
.pcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--gold-l)}
.pcard__img{overflow:hidden;background:var(--tint)}
.pcard__img .pic>img{transition:transform .55s var(--ease)}
.pcard:hover .pcard__img .pic>img{transform:scale(1.055)}
.pcard__b{padding:16px 17px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__b h3{font-size:16.5px;line-height:1.4}
.pcard__b p{font-size:13.8px;color:var(--muted);line-height:1.58;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__f{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pcard__go{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.pcard__go .ic{width:14px;height:14px;transition:transform .2s var(--ease)}
.pcard:hover .pcard__go{color:var(--gold)}
.pcard:hover .pcard__go .ic{transform:translateX(3px)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:5px 11px;border-radius:var(--r-pill);font-weight:500}
.chip b{font-size:15.5px;font-weight:700}
.chip--price{background:var(--gold-t);color:var(--gold)}
.chip--ask{background:var(--tint);color:var(--body)}

/* ========================================================== pricing === */
.price__wrap{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
.incl{display:grid;gap:11px;margin:22px 0}
.incl--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px 26px}
.incl li,.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--body)}
.incl .ic,.ticks .ic{width:19px;height:19px;flex:none;margin-top:4px;color:var(--gold);stroke-width:2.1}
.ticks{display:grid;gap:11px;margin:20px 0}
.ticks--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.price__moq{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--navy);margin-bottom:22px}
.price__moq .ic{width:20px;height:20px;color:var(--gold)}
.ptiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ptile{display:flex;flex-direction:column;gap:9px;padding:20px 20px 18px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.ptile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--gold-l)}
.ptile__s{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.ptile__s .ic{width:17px;height:17px;color:var(--gold)}
.ptile__p{font-size:15px;color:var(--body)}
.ptile__p b{font-family:var(--f);font-size:31px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.ptiles__n{margin-top:14px;font-size:13.5px;color:var(--muted)}

.ptable{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ptable caption{caption-side:top;text-align:left;padding:0 0 14px;font-weight:600;color:var(--navy)}
.ptable th,.ptable td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line-s);font-weight:400}
.ptable thead th{background:var(--navy);color:#fff;font-weight:600;font-size:14.5px;border:0}
.ptable tbody th{font-weight:500;color:var(--ink)}
.ptable__s{display:flex;align-items:center;gap:10px}
.ptable__s .ic{width:18px;height:18px;color:var(--gold);flex:none}
.ptable__a{width:1%}
.ptable td b{font-size:23px;font-weight:700;color:var(--navy)}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover{background:var(--cream)}
.ptable__a a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--gold)}
.ptable__a .ic{width:14px;height:14px;transition:transform .2s}
.ptable__a a:hover .ic{transform:translateX(3px)}
.ptable__n{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:var(--muted)}
.ptable__n .ic{width:16px;height:16px;color:var(--gold)}
.incl__box{margin-top:clamp(36px,4.5vw,60px);padding:clamp(24px,3.5vw,40px);background:var(--cream);
  border-radius:var(--r-lg);border:1px solid var(--line)}
.incl__box h2{font-size:clamp(20px,1.8vw,25px);margin-bottom:6px}
.pricefig{margin-top:clamp(36px,4.5vw,60px);max-width:720px;margin-inline:auto}
.pricefig .pic{border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.pricefig figcaption{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}

/* price table collapses into cards on narrow screens */
@media (max-width:660px){
  .ptable,.ptable caption,.ptable tbody,.ptable tr,.ptable th,.ptable td{display:block;width:auto}
  .ptable caption{text-align:left}
  .ptable{border:0;background:none;border-radius:0}
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ptable tbody tr{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
    margin-bottom:11px;padding:16px 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
  .ptable tbody tr:hover{background:var(--paper);border-color:var(--gold-l)}
  .ptable tbody th,.ptable tbody td{padding:0;border:0}
  .ptable tbody th{flex:1 1 100%}
  .ptable__a{margin-left:auto}
  .ptable td b{font-size:26px}
}

/* =========================================================== split === */
.split{display:grid;gap:clamp(28px,4vw,60px);align-items:center}
.split--form{align-items:start}
.split__t .shead{margin-bottom:0}
.lead{font-size:clamp(16px,.7vw + 14.5px,18.5px);color:var(--body);margin-top:16px}
.split__i,.split__f{min-width:0}

/* ========================================================= gallery === */
.pgal{columns:1;column-gap:clamp(14px,1.8vw,22px)}
.pgal__i{break-inside:avoid;margin-bottom:clamp(14px,1.8vw,22px);border-radius:var(--r);overflow:hidden;
  background:var(--paper);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pgal__i:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.pgal__i .pic{border-radius:0}
.pgal__i figcaption{padding:13px 16px;display:flex;flex-direction:column;gap:2px}
.pgal__i figcaption b{font-size:15px;font-weight:600;color:var(--ink)}
.pgal__i figcaption span{font-size:13px;color:var(--gold)}

/* =========================================================== steps === */
.steps{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
  list-style:none;padding:0;counter-reset:s}
.steps li{position:relative;padding:26px 24px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.steps__n{font-family:var(--f-d);font-size:38px;font-weight:600;color:var(--gold-b);line-height:1;display:block;margin-bottom:12px}
.steps li h3{font-size:17.5px;margin-bottom:7px}
.steps li p{font-size:14.5px;color:#a5b8c8;line-height:1.62}

/* ========================================================== promos === */
.promos{display:grid;gap:clamp(18px,2.4vw,28px)}
.promo{display:grid;gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper);box-shadow:var(--sh-1)}
.promo__b{padding:clamp(24px,3.4vw,42px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center}
.promo__b h3{font-size:clamp(20px,2vw,27px)}
.promo__b p{color:var(--body)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--gold-t);color:var(--gold);font-size:13px;font-weight:600}
.badge .ic{width:14px;height:14px}
.promo__u{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted)}
.promo__u .ic{width:16px;height:16px}

/* ============================================================= faq === */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:10px}
.faq__i{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq__i[open]{border-color:var(--gold-l);box-shadow:var(--sh-1)}
.faq__i summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  cursor:pointer;font-weight:600;color:var(--ink);font-size:16.5px;list-style:none}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary .ic{width:19px;height:19px;color:var(--gold);flex:none;transition:transform .25s var(--ease)}
.faq__i[open] summary .ic{transform:rotate(180deg)}
.faq__a{padding:0 22px 20px;color:var(--body);font-size:15.5px}
.faq__a p+p{margin-top:10px}

/* =========================================================== video === */
.vidwrap{max-width:900px;margin-inline:auto}
.vid{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--navy-d);box-shadow:var(--sh-2)}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}

/* ============================================================= cta === */
.cta{background:linear-gradient(135deg,var(--navy-d),var(--navy) 55%,var(--navy-s));color:#c3d0dc;
  padding-block:clamp(44px,5.5vw,74px);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 130% at 88% 15%,rgba(201,162,74,.17),transparent 60%)}
.cta__in{position:relative;display:grid;gap:26px;align-items:center}
.cta h2{color:#fff}
.cta p{margin-top:10px;color:#a9bccb;max-width:52ch}
.cta__b{display:flex;flex-wrap:wrap;gap:11px}

/* ============================================================ form === */
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);box-shadow:var(--sh-2)}
.fcard h2,.fcard h3{font-size:clamp(19px,1.6vw,23px);margin-bottom:18px}
.cform__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld--full{grid-column:1/-1}
.fld>span{font-size:13.5px;font-weight:500;color:var(--ink)}
.fld>span b{color:var(--err);font-weight:600}
.fld input,.fld select,.fld textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);font-size:15.5px;transition:border-color .18s,box-shadow .18s;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#a9b4bf}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--gold-b);box-shadow:0 0 0 3.5px rgba(201,162,74,.16)}
.fld input[aria-invalid=true],.fld textarea[aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 3.5px rgba(180,68,47,.12)}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8b99' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.cform__foot{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.cform__note{font-size:13px;color:var(--muted)}
.cform__msg{margin-top:14px;font-size:15px;padding:0;border-radius:var(--r-sm)}
.cform__msg.is-ok{padding:13px 16px;background:#eaf5ef;color:var(--ok);border:1px solid #c6e3d3}
.cform__msg.is-err{padding:13px 16px;background:#fbeeeb;color:var(--err);border:1px solid #f0cfc8}
.btn[aria-busy=true]{opacity:.65;pointer-events:none}

.cpanels{list-style:none;padding:0;display:grid;gap:14px;margin-top:26px}
.cpanels li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r)}
.cpanels__ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:var(--r-sm);
  background:var(--navy);color:var(--gold-l)}
.cpanels__ic .ic{width:20px;height:20px}
.cpanels__l{font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:2px}
.cpanels a,.cpanels p:not(.cpanels__l){display:inline-block;font-size:16px;color:var(--ink);font-weight:500;line-height:1.7;min-height:30px;word-break:break-word}
.cpanels a:hover{color:var(--gold)}
.map{margin-top:18px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ========================================================== crumbs === */
.crumb{border-bottom:1px solid var(--line-s);background:var(--cream)}
.crumb ol{list-style:none;padding:12px 0;margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--muted)}
.crumb li+li::before{content:"/";margin-right:6px;color:#c4ccd4}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold)}
.crumb [aria-current]{color:var(--ink)}

/* ======================================================= page head === */
.phead{padding-block:clamp(34px,4.5vw,64px) clamp(24px,3vw,40px);background:var(--cream);border-bottom:1px solid var(--line-s)}
.phead h1{margin-bottom:0}
.phead>.wrap>p{margin-top:14px;font-size:clamp(15.5px,.6vw + 14px,18px);max-width:66ch;color:var(--body)}
.phead--cat{padding-block:clamp(30px,4vw,60px)}
.phead__in{display:grid;gap:clamp(26px,3.5vw,50px);align-items:center}
.phead__in>div>p{margin-top:14px;max-width:56ch}
.phead__in .btn{margin-top:22px}
.phead__i{min-width:0}

/* ============================================================= pdp === */
.pdp{padding-block:clamp(28px,3.5vw,52px)}
.pdp__in{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
.pdp__g{position:sticky;top:96px}
.pdp__thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pdp__t{flex:none;width:82px;padding:0;border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden;
  background:none;cursor:pointer;transition:border-color .2s,opacity .2s;opacity:.62}
.pdp__t.is-on{border-color:var(--gold-b);opacity:1}
.pdp__t:hover{opacity:1}
.pdp__info h1{font-size:clamp(25px,2.7vw,37px);line-height:1.3}
.pdp__cat{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--gold);
  padding:6px 13px;background:var(--gold-t);border-radius:var(--r-pill);margin-bottom:14px}
.pdp__cat .ic{width:15px;height:15px}
.pdp__sum{margin-top:12px;font-size:clamp(15.5px,.6vw + 14px,17.5px)}
.pdp__price{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:22px 0;padding:18px 20px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r)}
.pdp__pv{font-size:15px;color:var(--body)}
.pdp__pv b{font-size:clamp(30px,3vw,40px);font-weight:700;color:var(--navy);letter-spacing:-.024em;margin:0 4px}
.pdp__pv small{font-size:15px;color:var(--muted)}
.pdp__pv--ask{font-size:22px;font-weight:600;color:var(--navy)}
.pdp__moq{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted)}
.pdp__moq .ic{width:17px;height:17px;color:var(--gold)}
.pdp__cta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.specs{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.specs caption{caption-side:top;text-align:left;font-weight:600;color:var(--ink);padding-bottom:12px;font-size:17px}
.specs th,.specs td{padding:12px 4px;border-bottom:1px solid var(--line-s);text-align:left;vertical-align:top}
.specs th{font-weight:500;color:var(--muted);width:40%}
.specs td{color:var(--ink)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

.prose{max-width:74ch}
.prose--c{margin-inline:auto}
.prose h2{margin-bottom:16px}
.prose p+p{margin-top:14px}

/* =========================================================== stats === */
.stats{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.stats__i{padding:24px 22px;border-radius:var(--r);background:var(--cream);border:1px solid var(--line);text-align:center}
.stats__i b{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.15}
.stats__i em{font-style:normal;font-size:15px;color:var(--gold);font-weight:600}
.stats__i span{display:block;margin-top:7px;font-size:13.5px;color:var(--muted)}
.vcard{padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.vcard__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r);
  background:var(--navy);color:var(--gold-l);margin-bottom:16px}
.vcard__ic .ic{width:23px;height:23px}
.vcard h3{margin-bottom:8px}
.vcard p{font-size:15px;color:var(--muted)}

.empty{padding:44px 24px;text-align:center;color:var(--muted);background:var(--cream);
  border:1px dashed var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;gap:10px}
.e404{text-align:center;padding-block:clamp(40px,7vw,100px);max-width:56ch;margin-inline:auto}
.e404 p{margin-top:14px}
.e404__b{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:28px}

/* ========================================================== footer === */
.ft{background:var(--navy-d);color:#94a8ba;padding-top:clamp(46px,5.5vw,74px);font-size:14.8px}
.ft__in{display:grid;gap:clamp(28px,3.5vw,46px)}
.ft__brand img{height:78px;width:auto;margin-bottom:16px;opacity:.95}
.ft__brand p{max-width:40ch;line-height:1.72}
.ft__soc{display:flex;gap:9px;margin-top:20px}
.ft__soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);color:#c3d0dc;transition:background .2s,border-color .2s,color .2s,transform .2s}
.ft__soc a:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.ft__soc .ic{width:19px;height:19px}
.ft h3{color:#fff;font-size:15.5px;font-weight:600;margin-bottom:15px}
.ft ul{list-style:none;padding:0;display:grid;gap:10px}
.ft a:hover{color:var(--gold-l)}
.ft__contact li{display:flex;gap:11px;align-items:flex-start}
.ft__contact .ic{width:17px;height:17px;flex:none;margin-top:5px;color:var(--gold-b)}
.ft__base{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;
  margin-top:clamp(34px,4vw,52px);padding-block:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px}

/* ============================================================= fab === */
.fab{position:fixed;right:14px;bottom:14px;z-index:80;display:flex;flex-direction:column;gap:9px}
.fab__i{display:flex;align-items:center;gap:9px;padding:12px 16px;border-radius:var(--r-pill);
  color:#fff;font-weight:600;font-size:14.5px;box-shadow:var(--sh-3);transition:transform .2s var(--ease)}
.fab__i:hover{transform:translateY(-3px)}
.fab__i .ic{width:19px;height:19px}
.fab__line{background:var(--line-green)}
.fab__tel{background:var(--navy)}
.fab__i span{display:none}

/* ====================================================== breakpoints === */
@media (min-width:640px){
  .pgal{columns:2}
  .fab__i span{display:inline}
  .promo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
@media (min-width:900px){
  .hero__s{display:block;position:relative;width:100%;aspect-ratio:21/9;
    min-height:min(60vh,500px);max-height:min(78vh,760px)}
  /* the photo is taken out of flow so the slide height comes only from the ratio above */
  .hero__img{position:absolute;inset:0;overflow:hidden}
  .hero__pic{width:100%;height:100%;aspect-ratio:auto}
  .hero__scrim{display:block;position:absolute;inset:0;z-index:1;
    background:linear-gradient(100deg,rgba(255,255,255,.97) 0 22%,rgba(255,255,255,.9) 36%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 64%)}
  .hero__txt{position:relative;z-index:2;height:100%;background:none;display:flex;align-items:center;padding-block:40px}
  .hero__s[data-tone=dark] .hero__txt{background:none}
  .hero__s[data-tone=dark] .hero__scrim{
    background:linear-gradient(100deg,rgba(20,25,30,.9) 0 24%,rgba(20,25,30,.7) 40%,rgba(20,25,30,.25) 54%,rgba(20,25,30,0) 68%)}
  .hero__nav{display:grid}
  .hero__dots{left:auto;right:22px;bottom:74px;transform:none}
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--form{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .phead__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .pdp__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .price__wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .cta__in{grid-template-columns:minmax(0,1fr) auto}
  .ft__in{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.8fr)) minmax(0,1.2fr)}
  .fab{display:none}
}
@media (min-width:1024px){
  .hd__nav{display:flex}
  .hd__burger{display:none}
  .hd__tel{display:inline-flex}
  .pgal{columns:3}
  .pgal--home{columns:4}
}
@media (max-width:560px){
  .hero__b{display:grid;grid-template-columns:1fr;gap:10px}
  .hero__b .btn,.e404__b .btn,.cta__b .btn{width:100%}
  .cta__b{display:grid;grid-template-columns:1fr;gap:10px}
  .pdp__cta{display:grid;grid-template-columns:1fr;gap:10px}
  .pdp__cta .btn{width:100%}
  .cform__foot .btn{width:100%}
}
@media (max-width:899px){
  .hero__pic{aspect-ratio:16/10}
  .hero__pic>img{height:100%}
  .pdp__g{position:static}
}
@media (max-width:1023px){ .pgal--home{columns:2} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .hd,.mnav,.ann,.fab,.cta,.hero__nav,.hero__dots,.ft__soc{display:none!important}
  body{color:#000}
}