/* ================================================================
   HIGHBURY THAI MASSAGE — Shared Stylesheet
   Theme: Korakot's approved Claude design 2026-07-15
   Berry #8F2A53 · blush #FEF1F6/#FBE3EC · Cormorant Garamond + Jost
   ================================================================ */
:root{
  --berry:#8F2A53;
  --berry-dk:#5C1435;
  --berry-md:#A8386A;
  --rose:#C94F83;
  --pink:#F0A8C8;
  --blush:#FEF1F6;
  --blush-d:#FBE3EC;
  --blush-t:#FBD6E6;
  --ink:#33362C;
  --olive:#55564A;
  --muted:#6A6A5C;
  --line:rgba(166,50,96,.14);
  --nav-h:76px;
  --announce-h:41px;
  /* back-compat aliases for older inline styles */
  --porcelain:#FEF1F6;
  --gold:#C94F83;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{padding-top:calc(var(--nav-h) + var(--announce-h));font-family:'Jost',-apple-system,sans-serif;background:var(--blush);color:var(--ink);line-height:1.65;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1.1;}
a{color:var(--berry);text-decoration:none;}
ul{list-style:none;}
button{font-family:'Jost',sans-serif;cursor:pointer;}
strong{font-weight:500;}

/* ── ANNOUNCEMENT BAR ── */
.announce{position:fixed;top:0;left:0;right:0;z-index:210;background:var(--berry);color:var(--blush-t);display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;padding:10px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;min-height:var(--announce-h);}
.announce .a-label{color:var(--pink);}
.announce .a-dot{opacity:.4;}

/* ── NAV ── */
.nav{position:fixed;top:var(--announce-h);left:0;right:0;z-index:200;border-bottom:1px solid var(--line);}
/* Tint + blur sit on a pseudo-element: a backdrop-filter on .nav itself makes .nav the
   containing block for its position:fixed children, so the mobile menu below would add
   --announce-h a second time and drop ~70px too low, showing a strip of page between. */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(250,241,243,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.nav-inner{max-width:1240px;margin:0 auto;padding:0 32px;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-logo{display:flex;align-items:center;gap:13px;flex-shrink:0;}
.nav-logo img{height:46px;width:auto;}
.nav-logo span{display:flex;flex-direction:column;line-height:1;}
.nav-logo .wm-1{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:600;letter-spacing:.02em;color:var(--berry);}
.nav-logo .wm-2{font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:#8A8571;margin-top:3px;font-family:'Jost',sans-serif;}
.nav-links{display:flex;align-items:center;gap:8px;}
.nav-links a{color:#4A4C40;font-size:12.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;padding:8px 11px;transition:color .2s;white-space:nowrap;}
.nav-links a:hover{color:var(--berry);}
.nav-links a.active{color:var(--berry);}
.nav-book{background:var(--berry)!important;color:var(--blush)!important;padding:12px 24px!important;border-radius:3px;font-weight:400!important;letter-spacing:.16em!important;margin-left:10px;transition:background .2s!important;}
.nav-book:hover{background:var(--berry-md)!important;}
.nav-toggle{display:none;background:none;border:none;color:var(--berry);font-size:26px;line-height:1;padding:4px;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:3px;font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;border:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s;font-family:'Jost',sans-serif;text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-pink{background:var(--berry);color:var(--blush);}
.btn-pink:hover{background:var(--berry-md);}
.btn-outline{background:transparent;border:1px solid var(--berry);color:var(--berry);}
.btn-outline:hover{background:var(--berry);color:var(--blush);}
.btn-outline-light{background:transparent;border:1px solid rgba(254,241,246,.65);color:var(--blush);}
.btn-outline-light:hover{border-color:var(--blush);background:rgba(254,241,246,.1);}

/* ── SECTIONS ── */
.sec{padding:96px 32px;}
.sec-inner{max-width:1240px;margin:0 auto;}
.sec-dark{background:var(--berry);color:var(--blush-t);}
.sec-tint{background:var(--blush-d);}
.sec-kicker{display:block;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose);margin-bottom:18px;font-weight:400;}
.sec-title{font-size:clamp(32px,4.5vw,52px);color:var(--berry);margin-bottom:14px;line-height:1.05;}
.sec-title.light{color:var(--blush);}
.sec-sub{font-size:16px;color:var(--olive);max-width:580px;line-height:1.8;}
.gold-rule{width:46px;height:1px;background:var(--rose);margin:22px 0 28px;}

/* ── HERO (homepage, full-bleed) ── */
.hero{position:relative;min-height:calc(88vh - var(--nav-h) - var(--announce-h));display:flex;align-items:center;overflow:hidden;background:var(--berry-dk);}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.hero-ov{position:absolute;inset:0;background:linear-gradient(100deg,rgba(92,20,53,.86) 0%,rgba(143,42,83,.62) 52%,rgba(92,20,53,.3) 100%);}
.hero-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:90px 32px;width:100%;}
.hero-kicker{font-size:12px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--pink);margin-bottom:22px;}
.hero-inner h1{font-size:clamp(40px,5.4vw,68px);color:var(--blush);max-width:14ch;margin-bottom:24px;}
.hero-sub{font-size:16px;color:rgba(250,241,243,.85);max-width:46ch;margin-bottom:38px;line-height:1.8;font-weight:300;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero-btns .btn-blush{background:var(--blush-t);color:var(--berry);}
.hero-btns .btn-blush:hover{background:var(--pink);}
.hero-strip{background:var(--berry);color:var(--blush-t);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 32px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;}
.hero-strip .hs-inner{max-width:1240px;margin:0 auto;width:100%;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

/* ── PAGE HERO (inner pages) ── */
.page-hero{background:linear-gradient(115deg,var(--berry-dk) 0%,var(--berry) 70%,var(--berry-md) 100%);padding:84px 32px;position:relative;overflow:hidden;}
.page-hero-inner{max-width:1240px;margin:0 auto;position:relative;z-index:1;}
.page-hero h1{font-size:clamp(36px,5vw,58px);color:var(--blush);margin-bottom:14px;}
.page-hero p{font-size:16px;color:rgba(251,214,230,.8);max-width:580px;line-height:1.8;font-weight:300;}
.page-kicker{font-size:12px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--pink);display:block;margin-bottom:16px;}

/* ── TREATMENT CARDS ── */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;}
.tcard{background:var(--blush);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
.tcard:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(166,50,96,.4);}
.tcard-img{height:230px;overflow:hidden;}
.tcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.tcard:hover .tcard-img img{transform:scale(1.04);}
.tcard-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;}
.tcard-body h3{font-size:26px;font-weight:500;color:var(--berry);margin-bottom:10px;}
.tcard-body p{font-size:14px;color:var(--muted);line-height:1.7;flex:1;}
.tcard-price{margin-top:18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);}
.tcard-price span{color:var(--berry);font-weight:500;}

/* ── ROOM TILES (numbered photo cards) ── */
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px;}
.room-tile{position:relative;border-radius:3px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;}
.room-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.room-tile:hover img{transform:scale(1.04);}
.room-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(120,30,66,.85) 100%);}
.room-tile-body{position:relative;z-index:1;padding:38px;color:var(--blush);}
.room-tile-body .rt-kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;}
.room-tile-body h3{font-size:32px;font-weight:500;margin-bottom:10px;color:var(--blush);}
.room-tile-body p{font-size:15px;line-height:1.6;font-weight:300;color:rgba(250,241,243,.85);}

/* ── SERVICE ROWS (services page) ── */
.svc{display:grid;grid-template-columns:5fr 7fr;gap:0;background:var(--blush);border-radius:3px;overflow:hidden;margin-bottom:30px;box-shadow:0 14px 34px -24px rgba(166,50,96,.35);}
.svc:nth-child(even){grid-template-columns:7fr 5fr;}
.svc:nth-child(even) .svc-photo{order:2;}
.svc-photo{min-height:320px;overflow:hidden;}
.svc-photo img{width:100%;height:100%;object-fit:cover;}
.svc-body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;}
.svc-body h2{font-size:32px;font-weight:500;color:var(--berry);margin-bottom:14px;}
.svc-body>p{font-size:14.5px;color:var(--olive);line-height:1.75;margin-bottom:22px;font-weight:300;}
.price-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.price-pill{background:var(--blush-d);border:1px solid var(--line);border-radius:3px;padding:8px 15px;font-size:12.5px;letter-spacing:.06em;color:var(--ink);white-space:nowrap;}
.price-pill strong{color:var(--berry);font-weight:500;}
.svc-note{font-size:12.5px;color:var(--muted);font-style:italic;margin:-14px 0 22px;}

/* ── PROMO BAND ── */
.promo{background:var(--berry);color:var(--blush-t);text-align:center;padding:96px 32px;position:relative;overflow:hidden;}
.promo::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 15%,rgba(240,168,200,.18),transparent 55%);}
.promo-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.promo h2{font-size:clamp(30px,4.4vw,50px);color:var(--blush);margin-bottom:16px;}
.promo p{font-size:15px;color:rgba(251,214,230,.8);margin-bottom:10px;font-weight:300;}
.promo-deal{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,3vw,28px);color:var(--pink);margin:18px 0 30px;}
.promo-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0 38px;text-align:center;}
.promo-card{background:rgba(254,241,246,.06);border:1px solid rgba(240,168,200,.3);border-radius:3px;padding:30px 24px;}
.promo-card h3{font-size:24px;font-weight:500;color:var(--blush);margin-bottom:10px;}
.promo-card .promo-deal{margin:8px 0 10px;font-size:clamp(19px,2.4vw,24px);}
.promo-card .promo-small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,214,230,.65);margin:0;}
@media(max-width:768px){.promo-cards{grid-template-columns:1fr;}}
/* 2026-10-02 couple massage offer: a wide card across the top of the grid, old price struck through */
.promo-card--wide{grid-column:1/-1;border-color:rgba(232,196,120,.6);background:rgba(254,241,246,.1);}
.promo-card .promo-deal s{opacity:.78;font-size:.86em;margin-right:6px;text-decoration-thickness:1px;}
.promo-pop-week s{color:var(--muted);margin-right:2px;}

/* ── GALLERY GRID ── */
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px;}
.gtile{border-radius:3px;overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;background:var(--berry-dk);}
.gtile img{width:100%;height:100%;object-fit:cover;transition:transform .45s;}
.gtile:hover img{transform:scale(1.05);}
.gtile.wide{grid-column:span 2;}

/* ── LIGHTBOX ── */
.lb{position:fixed;inset:0;background:rgba(51,20,35,.94);z-index:400;display:none;align-items:center;justify-content:center;padding:30px;}
.lb.open{display:flex;}
.lb img{max-width:min(1100px,92vw);max-height:84vh;border-radius:3px;object-fit:contain;}
.lb-x{position:absolute;top:22px;right:28px;background:none;border:none;color:var(--blush);font-size:30px;}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(254,241,246,.12);border:none;color:var(--blush);font-size:34px;width:52px;height:52px;border-radius:50%;}
.lb-prev{left:20px;} .lb-next{right:20px;}
.lb-prev:hover,.lb-next:hover{background:rgba(254,241,246,.25);}

/* ── VISIT / INFO ── */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:44px;}
.visit-photo{border-radius:3px;overflow:hidden;min-height:400px;}
.visit-photo img{width:100%;height:100%;object-fit:cover;}
.vrow{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline;}
.vrow:last-child{border-bottom:none;}
.vrow-label{font-weight:400;color:var(--berry);min-width:100px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;}
.vrow-val{color:var(--olive);font-weight:300;}
.vrow-val a{color:var(--berry);font-weight:400;border-bottom:1px solid var(--rose);padding-bottom:1px;}

/* ── FORMS ── */
.flabel{display:block;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.finput,.fselect,.ftarea{width:100%;padding:13px 15px;border:1px solid rgba(166,50,96,.25);border-radius:3px;font-size:16px;font-family:'Jost',sans-serif;font-weight:300;color:var(--ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;}
.finput:focus,.fselect:focus,.ftarea:focus{border-color:var(--berry);box-shadow:0 0 0 3px rgba(143,42,83,.1);}
.ftarea{resize:vertical;min-height:120px;}
.fgroup{margin-bottom:18px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ── FOOTER ── */
.site-footer{background:var(--berry-dk);color:rgba(251,214,230,.7);padding:70px 32px 0;}
.footer-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(240,168,200,.18);}
.footer-brand img{height:60px;margin-bottom:16px;background:var(--blush);border-radius:3px;padding:6px;}
.footer-brand p{font-size:13.5px;line-height:1.75;max-width:280px;font-weight:300;}
.footer-col h4{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:var(--blush);margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:rgba(251,214,230,.7);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;transition:color .2s;}
.footer-col a:hover{color:var(--pink);}
.footer-col .hours-line{font-size:13.5px;padding:2px 0;font-weight:300;}
.footer-bottom{max-width:1240px;margin:0 auto;padding:22px 0 30px;display:flex;justify-content:space-between;gap:8px;font-size:11.5px;letter-spacing:.08em;color:rgba(251,214,230,.45);flex-wrap:wrap;}
.footer-bottom a{color:var(--pink);}

/* ── REVEAL ── */
.rev{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;}
.rev.in{opacity:1;transform:translateY(0);}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .tgrid{grid-template-columns:1fr 1fr;}
  .room-grid{grid-template-columns:1fr;}
  .room-tile{min-height:340px;}
  .svc,.svc:nth-child(even){grid-template-columns:1fr;}
  .svc:nth-child(even) .svc-photo{order:0;}
  .svc-photo{min-height:240px;max-height:300px;}
  .ggrid{grid-template-columns:1fr 1fr;}
  .visit-grid{grid-template-columns:1fr;gap:40px;}
}
@media(max-width:820px){
  .announce{font-size:10.5px;gap:12px;padding:9px 14px;}
}
@media(max-width:768px){
  :root{--nav-h:66px;}
  .nav-inner{padding:0 18px;}
  .nav-logo img{height:38px;}
  .nav-logo .wm-1{font-size:21px;}
  .nav-links{display:none;position:fixed;top:calc(var(--nav-h) + var(--announce-h));left:0;right:0;background:var(--blush);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);z-index:199;padding:6px 0 16px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:15px 24px;border-bottom:1px solid var(--line);font-size:13px;}
  .nav-links a:last-child{border-bottom:none;}
  .nav-book{margin:14px 20px 0!important;text-align:center;justify-content:center;display:flex;}
  .nav-toggle{display:block;}
  .sec{padding:60px 20px;}
  .page-hero{padding:56px 20px;}
  .promo{padding:68px 20px;}
  .tgrid{grid-template-columns:1fr;}
  .svc-body{padding:30px 24px;}
  .frow{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .hero-btns .btn{width:100%;}
  .hero-strip .hs-inner{justify-content:center;text-align:center;}
  .room-tile-body{padding:26px;}
}
@media(max-width:480px){
  .ggrid{grid-template-columns:1fr;}
  .gtile.wide{grid-column:span 1;}
  .price-row{gap:6px;}
  .price-pill{font-size:11.5px;padding:7px 12px;}
}

/* Highbury fix 2026-07-15 — show the burger on tablets + narrow windows too,
   not just phones. The original burger only triggered <768px, so iPad-portrait
   / narrowed-desktop widths (769–900px) showed a cramped full nav with no
   burger. This mirrors the <768px nav rules up to 900px. */
@media(max-width:900px){
  .nav-links{display:none;position:fixed;top:calc(var(--nav-h) + var(--announce-h));left:0;right:0;background:var(--blush);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);z-index:199;padding:6px 0 16px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:15px 24px;border-bottom:1px solid var(--line);font-size:13px;}
  .nav-links a:last-child{border-bottom:none;}
  .nav-book{margin:14px 20px 0!important;text-align:center;justify-content:center;display:flex;}
  .nav-toggle{display:block;}
}


/* Highbury fix 2026-07-15 (c) — offers bar on mobile: show BOTH weekly offers,
   each on its own full-width line (2 rows), so the whole promo is readable
   (the single-line version cut off Mon–Fri). --announce-h is sized for 2 rows
   so the fixed nav (logo + burger) still clears the bar below it. */
@media(max-width:900px){
  .announce{flex-wrap:wrap;white-space:normal;overflow-x:visible;justify-content:center;row-gap:3px;column-gap:0;padding:8px 12px;font-size:10px;letter-spacing:.05em;line-height:1.4;}
  .announce .a-label,.announce .a-dot{display:none;}   /* drop "This Week" + separators so it's exactly 2 offer lines */
  .announce > span{flex:0 0 100%;text-align:center;}
  :root{--announce-h:64px;}   /* 3 offer lines since 2026-10-02 (Thu foot massage) — measured 64px at 320–900px */
}

/* Highbury 2026-10-02 (Maya) — the third weekly offer made the one-line desktop bar ~1045px
   wide, so at 901–1100px it wrapped to 2 rows and covered the top half of the nav. In that
   range drop the "This Week" label and tighten gaps + type so it stays one row. Anything else
   that wraps it (browser zoom, longer offer text) is caught by the small script after the bar
   on each page, which raises --announce-h to the bar's real height. */
@media(min-width:901px){.announce{row-gap:4px;}}
@media(min-width:901px) and (max-width:1100px){
  .announce{column-gap:14px;font-size:11px;}
  .announce .a-label,.announce .a-label + .a-dot{display:none;}
}
/* old WordPress /promotion now lands on /#offers — stop below the fixed bar + nav */
#offers{scroll-margin-top:calc(var(--nav-h) + var(--announce-h));}