/* ===========================================================
   ร้านนวด ศรีชา เก้ากิโล — Sricha Massage
   วางตามภาพต้นแบบ 1440 × 4183 px
   ทุกขนาดคิดจากหน่วย --u = 1px ของแบบ 1440 จึงย่อ/ขยายได้ตรงสัดส่วน
   =========================================================== */

:root{
  --cream:#f5f2eb;
  --ivory:#faf8f3;
  --brown:#332c23;
  --muted:#77746d;
  --gold:#b39a70;
  --pale:#eee5d4;
  --price:#d46959;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--brown);background:var(--cream);font-family:Noto,'Noto Sans Thai',Arial,sans-serif}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a37d43;outline-offset:4px}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
i[data-icon]{display:inline-flex;flex-shrink:0;width:1.3em;height:1.3em;vertical-align:middle;font-style:normal}
i svg{width:100%;height:100%}
[hidden]{display:none!important}

.site{
  width:100%;max-width:1600px;margin:auto;
  container-type:inline-size;
  --u:calc(100cqw / 1440);
  font-size:calc(22 * var(--u));
  overflow:clip;
}
.skip{position:fixed;left:10px;top:-100px;padding:12px;background:#fff;z-index:100}
.skip:focus{top:10px}

/* ---------- utility bar ---------- */
.utility{height:calc(36 * var(--u));padding:0 calc(75 * var(--u));background:#322b22;color:#f3eee4;font-size:calc(17 * var(--u));display:flex;align-items:center;justify-content:space-between}
.utility b{margin:0 calc(9 * var(--u))}
.utility i{width:1em;height:1em}
.language{display:inline-flex;align-items:center;color:#a2988a;font-size:calc(15 * var(--u));letter-spacing:.4px}
.language button{padding:0 calc(2 * var(--u));color:inherit;line-height:1;transition:color .18s}
.language button:hover{color:#f3eee4}
.language button.is-on{color:#f3eee4;font-weight:600}
.language i{font-style:normal;padding:0 calc(9 * var(--u));color:#6d6356}

/* ---------- header ---------- */
.header{height:calc(90 * var(--u));padding:0 calc(64 * var(--u));display:flex;align-items:center;gap:calc(24 * var(--u));background:linear-gradient(180deg,#fcf4e3 0%,#f2e5cc 100%);border-bottom:1px solid #e6d7ba}
.brand{display:flex;gap:calc(14 * var(--u));align-items:center;flex-shrink:0}
.brand-mark{width:calc(60 * var(--u));height:calc(60 * var(--u));border-radius:calc(8 * var(--u));background:var(--brown);display:grid;place-items:center}
.brand-mark img{width:92%;height:92%;object-fit:contain}
.brand strong{font-size:calc(29 * var(--u));font-weight:700;line-height:1.25;display:block}
.brand small{display:block;font-size:calc(21 * var(--u));color:var(--muted);line-height:1.15}
.header nav{margin-left:auto;display:flex;align-items:center;gap:calc(36 * var(--u));white-space:nowrap;font-size:calc(17 * var(--u));font-weight:600}
.header nav a{padding:calc(15 * var(--u)) 0}
.header nav .active{color:#8e724a;position:relative}
.header nav .active:after{content:'';position:absolute;bottom:calc(8 * var(--u));height:2px;background:var(--gold);left:0;right:0}
.search{display:flex;align-items:center;width:calc(211 * var(--u));height:calc(44 * var(--u));border:1px solid #e3d5b9;background:#fffdf7;border-radius:99px;flex-shrink:0;gap:calc(5 * var(--u));padding:0 calc(12 * var(--u))}
.search button{padding:0;display:grid;place-items:center;color:var(--muted);font-size:calc(21 * var(--u))}
.search input{min-width:0;width:100%;border:0;background:none;font-size:calc(17 * var(--u));outline:none}
.search input::placeholder{color:#9d9890}
.cart-button{position:relative;padding:calc(5 * var(--u));font-size:calc(29 * var(--u));color:#7c7262}
.cart-count{position:absolute;right:calc(-12 * var(--u));top:0;border-radius:99px;background:var(--gold);font-size:calc(15 * var(--u));min-width:calc(28 * var(--u));height:calc(28 * var(--u));color:#fff;display:grid;place-items:center}
.header-book{height:calc(54 * var(--u));font-size:calc(18 * var(--u));min-width:calc(110 * var(--u));padding:0 calc(18 * var(--u));margin-left:calc(3 * var(--u))}
.menu-button{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(16 * var(--u));padding:0 calc(27 * var(--u));height:calc(68 * var(--u));border-radius:calc(7 * var(--u));font-size:calc(24 * var(--u));font-weight:500;white-space:nowrap;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 18px #3726191c}
.btn.dark{background:var(--brown);color:#f8f1e6}
.btn.gold{background:#baa071;color:#fff;border:1px solid #c9b486}
.btn.pale{background:var(--pale);color:#675641}
.btn.outline{border:calc(2 * var(--u)) solid #b9ac98;color:#f7f3e9;background:#211d181a}
.line-green{background:#09bf40;color:#fff}
.line-green svg text{fill:#09bf40}

/* ---------- hero ---------- */
.hero{height:calc(548 * var(--u));position:relative;background:#514130;color:#f5efe4}
.hero-photo{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,23,16,.8) 0%,rgba(31,27,21,.52) 33%,transparent 66%);pointer-events:none}
.hero-content{position:relative;z-index:1;padding:calc(71 * var(--u)) 0 0 calc(81 * var(--u))}
.hero h1{font-size:calc(70 * var(--u));line-height:1.08;letter-spacing:calc(-1.2 * var(--u));font-weight:600;color:#e5d6b8}
.hero h1 strong{font-size:calc(86 * var(--u));font-weight:600;color:#d5b884}
.hero h2{font-size:calc(36 * var(--u));font-weight:400;margin-top:calc(13 * var(--u));line-height:1.3}
.hero-content>p{font-size:calc(24 * var(--u));margin-top:calc(11 * var(--u));color:#e5dfd4}
.hero-actions{display:flex;gap:calc(24 * var(--u));margin-top:calc(22 * var(--u))}
.hero-actions .gold{min-width:calc(267 * var(--u))}
.hero-actions .outline{min-width:calc(225 * var(--u))}
.hours{display:flex;align-items:center;gap:calc(15 * var(--u));font-size:calc(21 * var(--u));margin-top:calc(24 * var(--u));color:#e4ddcf}
.hours i{font-size:calc(26 * var(--u))}
.hero-note{position:absolute;right:calc(87 * var(--u));top:calc(70 * var(--u));font-size:calc(19 * var(--u));line-height:1.55;letter-spacing:1px;color:#f1e2c7;z-index:1}
.hero-note span{display:block;width:calc(60 * var(--u));border-bottom:1px solid #e6d3b3;margin-top:calc(14 * var(--u))}

/* ---------- categories ---------- */
.categories{height:calc(142 * var(--u));display:grid;grid-template-columns:repeat(4,1fr);padding:calc(31 * var(--u)) calc(68 * var(--u));background:var(--ivory)}
.categories a{display:flex;align-items:center;gap:calc(26 * var(--u));border-right:1px solid #d5cbbb;padding:0 calc(35 * var(--u));min-width:0}
.categories a:first-child{padding-left:calc(38 * var(--u))}
.categories a:last-child{border:0;padding-right:0}
.categories i:first-child{font-size:calc(44 * var(--u));color:#705c43}
.categories i:last-child{margin-left:auto;font-size:calc(20 * var(--u));color:#888279}
.categories strong{font-size:calc(25 * var(--u));line-height:1.4;display:block;white-space:nowrap}
.categories small{font-size:calc(17 * var(--u));color:var(--muted);display:block;white-space:nowrap}

/* ---------- section shell ---------- */
.section{padding:calc(28 * var(--u)) calc(68 * var(--u));position:relative;background:radial-gradient(ellipse at 50% 40%,#faf8f3,#f4f1e9)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(19 * var(--u))}
.section h2{font-size:calc(48 * var(--u));font-weight:600;line-height:1.22;letter-spacing:calc(-.7 * var(--u))}
.section-head p{font-size:calc(25 * var(--u));line-height:1.4;color:var(--muted)}
.text-link{display:flex;align-items:center;gap:calc(13 * var(--u));border-bottom:1px solid #baaa8e;padding:calc(5 * var(--u)) 0;color:#a68d66;font-size:calc(21 * var(--u));font-weight:600;white-space:nowrap}

/* ---------- services ---------- */
.services{height:calc(700 * var(--u));padding-top:calc(31 * var(--u))}
.service-layout{display:grid;grid-template-columns:600fr 684fr;gap:calc(26 * var(--u));height:calc(536 * var(--u))}
.service-layout>*{min-height:0}
.featured{position:relative;border-radius:calc(7 * var(--u));overflow:hidden;color:#fff}
.featured>img{height:100%;width:100%;object-fit:cover;min-height:0}
.featured:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(0deg,#211810dd,transparent)}
.featured-content{position:absolute;left:calc(35 * var(--u));right:calc(31 * var(--u));bottom:calc(35 * var(--u));z-index:1}
.featured h3{font-size:calc(42 * var(--u));font-weight:500;line-height:1.3}
.featured p{font-size:calc(25 * var(--u));margin-bottom:calc(25 * var(--u))}
.featured-content>div{display:flex;justify-content:space-between;align-items:center;gap:calc(10 * var(--u));font-size:calc(21 * var(--u))}
.featured b{color:#ddc18a;font-size:calc(28 * var(--u));font-weight:600}
.featured .btn{height:calc(48 * var(--u));font-size:calc(18 * var(--u));padding:0 calc(25 * var(--u));gap:calc(13 * var(--u))}
.service-list{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:calc(10 * var(--u));min-width:0}
.service-row{display:grid;grid-template-columns:calc(166 * var(--u)) minmax(0,1fr) auto;align-items:center;gap:calc(22 * var(--u));background:#fcfaf6;border-radius:calc(6 * var(--u));overflow:hidden;padding-right:calc(15 * var(--u));transition:box-shadow .2s;min-height:0}
.service-row:hover{box-shadow:0 4px 16px #57452e10}
.service-row>img{width:100%;height:100%;object-fit:cover;min-height:0}
.service-row>div{min-width:0}
.service-row h3{font-size:calc(21 * var(--u));font-weight:700;margin-bottom:calc(9 * var(--u))}
.service-row p{font-size:calc(16 * var(--u));color:var(--muted);white-space:nowrap}
.service-row p span{margin-right:calc(8 * var(--u))}
.service-row b{font-size:calc(25 * var(--u));color:var(--price);font-weight:600}
.service-row .btn{height:calc(51 * var(--u));font-size:calc(17 * var(--u));padding:0 calc(28 * var(--u))}
.search-empty{text-align:center;padding:24px}
.search-empty button{text-decoration:underline}

/* ---------- amenities ---------- */
.amenities{height:calc(420 * var(--u));display:grid;grid-template-columns:615fr 540fr 285fr;background:#faf8f3;position:relative}
.amenity-photo{height:100%;width:100%;object-fit:cover;object-position:75%}
.amenity-content{padding:calc(35 * var(--u)) calc(45 * var(--u));padding-right:calc(24 * var(--u))}
.amenity-content h2{font-size:calc(33 * var(--u));font-weight:600;line-height:1.3}
.amenity-content>p{font-size:calc(24 * var(--u));color:var(--muted);white-space:nowrap}
.amenity-note{font-size:calc(18 * var(--u))!important;color:#93835f;margin-top:calc(6 * var(--u));white-space:normal!important}
.amenity-grid{margin-top:calc(20 * var(--u));display:grid;grid-template-columns:repeat(4,1fr);gap:calc(18 * var(--u)) calc(10 * var(--u));text-align:center;border-right:1px solid #e4dccf;padding-right:calc(22 * var(--u));color:#747774}
.amenity-grid>div{display:flex;flex-direction:column;align-items:center;gap:calc(12 * var(--u))}
.amenity-grid i{font-size:calc(34 * var(--u));height:1.2em}
.amenity-grid span{font-size:calc(16 * var(--u));line-height:1.35}
.travel{align-self:center;width:calc(210 * var(--u));height:calc(322 * var(--u));background:#f1ede3;border-radius:calc(4 * var(--u));padding:calc(23 * var(--u)) 0;display:flex;flex-direction:column;align-items:center}
.travel>i{font-size:calc(49 * var(--u));color:#715b3d;margin-bottom:calc(12 * var(--u))}
.travel strong{font-size:calc(24 * var(--u));line-height:1.5;font-weight:600}
.travel span{font-size:calc(18 * var(--u));line-height:1.45;color:#847969;border-top:1px solid #e1d6c4;margin-top:calc(14 * var(--u));padding-top:calc(13 * var(--u))}
.travel>b{font-size:calc(33 * var(--u));font-weight:600;line-height:1.4}

/* ---------- pricing ---------- */
.pricing{height:calc(393 * var(--u));background:#faf8f3;padding-top:calc(33 * var(--u))}
.pricing .section-head{margin-bottom:calc(18 * var(--u))}
.pricing h2{font-size:calc(46 * var(--u))}
.price-note{font-size:calc(19 * var(--u));color:#8b877f}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(20 * var(--u))}
.price-grid article{border:1px solid #eee7dc;border-radius:calc(6 * var(--u));overflow:hidden;height:calc(264 * var(--u));background:#fbf9f5}
.price-grid h3{height:calc(62 * var(--u));display:grid;place-items:center;font-size:calc(30 * var(--u));font-weight:600;background:#f1ede4}
.price-grid article>div{padding:calc(11 * var(--u)) calc(28 * var(--u));display:flex;flex-direction:column;justify-content:center;height:calc(202 * var(--u))}
.price-grid .price-row{padding:calc(8 * var(--u)) 0;display:flex;align-items:center;gap:calc(13 * var(--u));width:100%;font-size:calc(21 * var(--u));border-bottom:1px solid #f0ece5;white-space:nowrap}
.price-grid .price-row:last-child{border:0}
.price-grid .price-row:hover{background:#f4eddf}
.price-grid .price-row>strong{font-size:calc(21 * var(--u));font-weight:600}
.price-grid .price-row>span{font-size:calc(18 * var(--u));color:var(--muted);margin-left:auto}
.price-grid .price-row>small{font-size:calc(17 * var(--u));color:var(--muted)}
.price-grid .price-row>b{font-size:calc(25 * var(--u));font-weight:600;color:var(--price)}

/* ---------- team ---------- */
.team{height:calc(848 * var(--u));padding-top:calc(34 * var(--u))}
.team h2{font-size:calc(51 * var(--u))}
.team .section-head{margin-bottom:calc(22 * var(--u))}
.team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(14 * var(--u)) calc(18 * var(--u))}
.team-card{display:block;text-align:center;padding:0;min-width:0;background:#fcfaf5;border-radius:calc(8 * var(--u));overflow:hidden;transition:transform .25s,box-shadow .25s}
.team-card:hover{transform:translateY(-4px);box-shadow:0 7px 24px #4b392021}
.portrait{display:block;width:100%;height:calc(204 * var(--u));object-fit:cover}
.team-name{height:calc(68 * var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.team-name strong{font-size:calc(21 * var(--u));font-weight:600}
.team-name small{font-size:calc(18 * var(--u));color:#817c71;margin-top:calc(5 * var(--u))}
.team-bottom{position:relative;height:calc(126 * var(--u));display:flex;justify-content:center;align-items:flex-start;padding-top:calc(32 * var(--u))}
.team-bottom .btn{min-width:calc(399 * var(--u));font-size:calc(20 * var(--u))}
.team-bottom blockquote{position:absolute;right:calc(5 * var(--u));top:calc(20 * var(--u));color:#94826b;font-size:calc(24 * var(--u));font-style:italic;text-align:center;margin:0;line-height:1.5;transform:rotate(-5deg)}
.team-bottom blockquote span{display:block;width:calc(42 * var(--u));border-bottom:2px solid #aa9676;margin-left:auto;margin-top:calc(10 * var(--u))}

/* ---------- booking steps ---------- */
.booking-steps{height:calc(184 * var(--u));padding-top:calc(19 * var(--u));background:#fcfaf6}
.booking-steps h2{font-size:calc(29 * var(--u));margin-bottom:calc(19 * var(--u))}
.steps{height:calc(90 * var(--u));border:1px solid #e2d9ca;border-radius:calc(50 * var(--u));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 calc(25 * var(--u))}
.steps>*{display:flex;align-items:center;gap:calc(14 * var(--u));text-align:left;position:relative;min-width:0;padding:0 calc(8 * var(--u))}
.steps>*>i:first-child{font-size:calc(37 * var(--u))}
.steps>*>b{border-radius:50%;font-size:calc(16 * var(--u));background:#ad9367;color:#fff;min-width:calc(27 * var(--u));height:calc(27 * var(--u));display:grid;place-items:center;align-self:flex-start;margin-top:calc(12 * var(--u))}
.steps span{display:block}
.steps strong{font-size:calc(18 * var(--u));display:block;font-weight:600}
.steps small{font-size:calc(16 * var(--u));color:#888279;display:block;white-space:nowrap}
.steps>*>i:last-child:not(:first-child){margin-left:auto;color:#cbb68e;font-size:calc(24 * var(--u))}

/* ---------- articles ---------- */
.articles{height:calc(354 * var(--u));padding-top:calc(12 * var(--u));padding-bottom:calc(27 * var(--u))}
.articles .section-head{margin-bottom:calc(15 * var(--u))}
.articles h2{font-size:calc(32 * var(--u))}
.articles .section-head p{font-size:calc(22 * var(--u))}
.pill-link{display:flex;align-items:center;gap:calc(14 * var(--u));font-size:calc(17 * var(--u));border:1px solid #c3b193;border-radius:99px;padding:calc(9 * var(--u)) calc(23 * var(--u));color:#967e59;font-weight:500}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(18 * var(--u))}
.article{display:block;background:#fafafa;border-radius:calc(6 * var(--u));overflow:hidden;text-align:left;padding:0;transition:box-shadow .2s}
.article:hover{box-shadow:0 6px 20px #4a38251c}
.article img{width:100%;height:calc(139 * var(--u));object-fit:cover}
.article:nth-child(1) img{object-position:center 45%}
.article>div{padding:calc(13 * var(--u)) calc(25 * var(--u)) calc(9 * var(--u));height:calc(98 * var(--u));position:relative}
.article h3{font-size:calc(23 * var(--u));font-weight:600;line-height:1.3}
.article span{position:absolute;right:calc(17 * var(--u));bottom:calc(8 * var(--u));font-size:calc(15 * var(--u));color:#777b80}
.article span i{margin-left:calc(8 * var(--u))}

/* ---------- contact ---------- */
.contact{height:calc(330 * var(--u));display:grid;grid-template-columns:625fr 420fr 395fr;background:#332b21;color:#eee8dc}
.contact-info{padding:calc(26 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)) calc(68 * var(--u));background:linear-gradient(115deg,#3c3328,#2c251c)}
.contact-info h2{font-size:calc(34 * var(--u));font-weight:500;margin-bottom:calc(12 * var(--u))}
.contact-info p{font-size:calc(20 * var(--u));margin:calc(12 * var(--u)) 0;display:flex;gap:calc(14 * var(--u));align-items:center;color:#dbd4c8}
.contact-info p i{font-size:calc(23 * var(--u))}
.contact-buttons{display:flex;gap:calc(12 * var(--u));margin-top:calc(16 * var(--u))}
.contact-buttons .btn{height:calc(67 * var(--u));font-size:calc(17 * var(--u));line-height:1.15;padding:0 calc(12 * var(--u));gap:calc(10 * var(--u));flex:1;border-width:1px;text-align:left}
.contact-buttons i{font-size:calc(25 * var(--u))}
.map{display:block;position:relative;overflow:hidden;color:#817261;background:#e8e5dd}
.map>svg{width:100%;height:100%;display:block}
.map>span{position:absolute;bottom:calc(7 * var(--u));left:calc(12 * var(--u));font-size:calc(12 * var(--u));background:#faf8f3b3;padding:3px 5px;border-radius:3px}
.storefront{position:relative;overflow:hidden}
.storefront img{height:100%;width:100%;object-fit:cover}
.storefront:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(0deg,#12160ccd,transparent)}
.storefront p{position:absolute;bottom:calc(31 * var(--u));left:0;right:0;text-align:center;font-size:calc(24 * var(--u));line-height:1.5;z-index:1;color:#ece4d5;font-style:italic;transform:rotate(-6deg)}

/* ---------- footer ---------- */
footer{height:calc(231 * var(--u));padding:0 calc(68 * var(--u));background:linear-gradient(110deg,#2b251e,#231d16);color:#ece6da}
.footer-top{height:calc(123 * var(--u));border-bottom:1px solid #4c4032;display:flex;align-items:center;gap:calc(24 * var(--u))}
.footer-top .brand{gap:calc(11 * var(--u))}
.footer-top .brand-mark{background:none;width:calc(67 * var(--u));height:calc(67 * var(--u))}
.footer-top .brand strong{font-size:calc(25 * var(--u));font-weight:500}
.footer-top .brand small{font-size:calc(18 * var(--u));color:#d0c7b7}
.footer-top nav{display:flex;align-items:center;margin-left:auto}
.footer-top nav a,.footer-top nav button{padding:calc(6 * var(--u)) calc(26 * var(--u));font-size:calc(16 * var(--u));border-right:1px solid #514538;white-space:nowrap}
.footer-top nav a:first-child{border-left:1px solid #514538}
.footer-top>div{font-size:calc(16 * var(--u));white-space:nowrap;margin-left:calc(25 * var(--u));color:#d3cabb}
.footer-top>div p{margin-bottom:calc(13 * var(--u))}
.footer-top>div i{margin-right:calc(12 * var(--u));font-size:calc(19 * var(--u))}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;height:calc(108 * var(--u));color:#c3b9a9;font-size:calc(15 * var(--u))}
.footer-bottom>span{font-family:Caveat,cursive;font-size:calc(26 * var(--u));line-height:1;transform:rotate(-8deg);padding-right:calc(20 * var(--u));color:#9b8d79}

/* ---------- botanical decoration ---------- */
.services:before,.team:before,.amenities:before{content:'';position:absolute;background:url('assets/botanical.png') center/contain no-repeat;pointer-events:none;opacity:.28}
.services:before{left:calc(-70 * var(--u));top:calc(165 * var(--u));width:calc(145 * var(--u));height:calc(440 * var(--u))}
.team:before{left:calc(-40 * var(--u));bottom:calc(-70 * var(--u));width:calc(165 * var(--u));height:calc(260 * var(--u));transform:rotate(44deg);opacity:.2}
.amenities:before{right:calc(-45 * var(--u));bottom:calc(5 * var(--u));width:calc(118 * var(--u));height:calc(330 * var(--u));transform:scaleX(-1)}
.section-head,.service-layout,.team-grid,.team-bottom{position:relative;z-index:1}

/* ---------- ปรับเฉพาะตอนใช้ภาษาอังกฤษ ---------- */
.lang-en .steps small{white-space:normal;line-height:1.3;font-size:calc(14 * var(--u))}
.lang-en .steps strong{font-size:calc(17 * var(--u))}
.lang-en .steps>*{gap:calc(10 * var(--u))}
.lang-en .team-bottom .btn{min-width:0;font-size:calc(19 * var(--u))}
.lang-en .article h3{font-size:calc(21 * var(--u));line-height:1.35}
.lang-en .amenity-grid span{font-size:calc(15 * var(--u))}
.lang-en .amenity-content>p{white-space:normal}
.lang-en .travel strong{font-size:calc(21 * var(--u));line-height:1.35}
.lang-en .categories strong,.lang-en .categories small{white-space:normal}
.lang-en .service-row p{white-space:normal}
@media(max-width:700px){
  .lang-en .steps small{font-size:10px}
  .lang-en .steps strong{font-size:13px}
  .lang-en .article h3{font-size:15px}
  .lang-en .team-bottom .btn{font-size:15px}
}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#332c23;color:#fff9ee;padding:12px 24px;border-radius:10px;font-size:16px;opacity:0;pointer-events:none;transition:.25s;z-index:30;max-width:90vw;text-align:center}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- dialogs ---------- */
dialog{--u:1px;width:min(660px,calc(100% - 28px));max-height:calc(100dvh - 32px);border:1px solid #d8cbb5;border-radius:18px;background:#faf8f3;color:var(--brown);padding:28px;font-size:16px;box-shadow:0 24px 90px #20160b40}
dialog::backdrop{background:#211b14aa;backdrop-filter:blur(5px)}
body:has(dialog[open]){overflow:hidden}
.dialog-head{display:flex;gap:15px;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.dialog-head h2{font-size:25px;font-weight:600;line-height:1.35}
.dialog-head button{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#eee6d8;display:grid;place-items:center}
dialog .btn{font-size:16px;height:46px;padding:0 18px;gap:10px;--u:1px}
dialog .btn.outline{color:var(--brown);border:1px solid #b8a488}
.booking-intro{display:flex;gap:16px;align-items:center;padding-bottom:18px}
.booking-intro img{width:100px;height:78px;object-fit:cover;border-radius:8px}
.booking-intro p{font-size:20px;color:var(--price)}
.booking-intro small{display:block;color:#7c7468;font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:500;min-width:0}
.form-grid input,.form-grid select{background:#fff;border:1px solid #d8cdbb;border-radius:7px;padding:11px;width:100%;min-width:0;color:var(--brown);font-size:16px}
.full{grid-column:1/-1}
.notice{background:#efe8da;padding:12px 15px;border-radius:8px;font-size:14px;line-height:1.7;color:#7a684f;margin:16px 0}
.form-error{color:#b34536;font-size:14px;margin:12px 0}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.booking-form>.btn{width:100%;margin-top:18px}
.empty-cart{padding:35px 0;text-align:center;color:#8b7e6b}
.cart-item{position:relative;padding:18px 34px 18px 0;border-bottom:1px solid #e3dbce}
.cart-item h3{font-size:18px;font-weight:600}
.cart-item p{color:#7e756a;font-size:14px;line-height:1.7;margin-top:5px}
.cart-item>button{position:absolute;right:0;top:18px;color:#a07c58}
.cart-item b{color:var(--price);font-weight:500}
.summary-text{width:100%;min-height:180px;padding:14px;border:1px solid #d8cbb5;border-radius:8px;background:#fff;color:#53483a;font:14px/1.7 Noto,Arial;resize:vertical}
.info-body{line-height:1.8}
.info-body>img{width:100%;height:220px;object-fit:cover;border-radius:10px;margin-bottom:18px}
.info-body p{margin:10px 0}
.info-body .contact-number{font-size:28px;font-weight:600}
.info-body .article-links{display:grid;gap:10px;margin-top:14px}
.article-links button{text-align:left;padding:13px;background:#eee6d8;border-radius:7px}
.team-modal-portrait{width:160px;height:160px;border-radius:12px;object-fit:cover;margin-bottom:16px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* ===========================================================
   มือถือ — ไม่ย่อตามสัดส่วนแบบ 1440 แต่จัดใหม่ให้อ่านง่าย
   =========================================================== */
@media(max-width:700px){
  .site{--u:1px;container-type:normal;font-size:16px}
  .utility{height:28px;padding:0 16px;font-size:10px}
  .utility b{margin:0 3px}
  .language{font-size:10px}
  .language i{padding:0 4px}
  .header{height:76px;padding:10px 18px;gap:15px;position:relative;z-index:5}
  .brand{gap:8px}
  .brand-mark{width:43px;height:43px;border-radius:6px}
  .brand strong{font-size:21px}
  .brand small{font-size:14px}
  .header nav{position:absolute;top:76px;left:0;right:0;background:linear-gradient(180deg,#fcf4e3,#f2e5cc);border-bottom:1px solid #e6d7ba;display:none;padding:15px 24px;box-shadow:0 9px 20px #332c2320;font-size:16px;gap:0;margin:0}
  .header nav.open{display:grid}
  .header nav a{padding:12px 0}
  .header .search,.header-book{display:none}
  .cart-button{margin-left:auto;font-size:24px;padding:0}
  .cart-count{font-size:11px;width:20px;min-width:20px;height:20px;right:-9px;top:-6px}
  .menu-button{display:grid;place-items:center;font-size:22px;padding:0 0 0 6px}
  .hero{height:540px}
  .hero-photo{object-position:64%}
  .hero:after{background:linear-gradient(90deg,#211d17e0,#211d1780 65%,#211d1733)}
  .hero-content{padding:44px 24px 0}
  .hero h1{font-size:33px;line-height:1.18;letter-spacing:-.5px}
  .hero h1 strong{font-size:49px}
  .hero h2{font-size:22px;max-width:310px;line-height:1.6;margin-top:18px}
  .hero-content>p{font-size:16px;max-width:285px;line-height:1.75;margin-top:10px}
  .hero-actions{flex-wrap:wrap;gap:10px;margin-top:24px;max-width:320px}
  .hero-actions .btn{font-size:16px;height:48px;padding:0 15px;gap:10px}
  .hero-actions .gold{min-width:175px}
  .hero-actions .outline{min-width:110px}
  .hours{font-size:14px;margin-top:24px;gap:10px}
  .hours i{font-size:21px}
  .hero-note{right:24px;top:auto;bottom:22px;font-size:10px;line-height:1.4;letter-spacing:1px}
  .hero-note span{width:35px;margin-top:8px}
  .categories{height:auto;padding:10px 18px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .categories a,.categories a:first-child,.categories a:last-child{padding:16px 8px;gap:10px;border:0}
  .categories a:nth-child(odd){border-right:1px solid #e6dece}
  .categories a:nth-child(-n+2){border-bottom:1px solid #e6dece}
  .categories i:first-child{font-size:27px}
  .categories i:last-child{display:none}
  .categories strong{font-size:16px}
  .categories small{font-size:10px}
  .section{padding:30px 20px;height:auto}
  .section h2{font-size:28px;line-height:1.35;letter-spacing:-.6px}
  .section-head{align-items:flex-start;margin-bottom:20px;gap:15px}
  .section-head p{font-size:15px;line-height:1.7}
  .text-link{font-size:12px;gap:5px;margin-top:8px;padding:0 0 4px}
  .service-layout{height:auto;grid-template-columns:1fr;gap:16px}
  .featured{height:330px;border-radius:7px}
  .featured-content{left:20px;right:20px;bottom:22px}
  .featured h3{font-size:29px}
  .featured p{font-size:17px;margin-bottom:18px}
  .featured-content>div{font-size:13px;gap:8px}
  .featured b{font-size:18px}
  .featured .btn{font-size:13px;height:39px;padding:0 12px;gap:7px}
  .service-list{gap:8px;grid-template-rows:none}
  .service-row{grid-template-columns:86px minmax(0,1fr);gap:12px;padding:0 9px 0 0;min-height:102px;position:relative}
  .service-row>img{grid-row:1/3;min-height:102px}
  .service-row>div{padding-top:10px;align-self:start}
  .service-row h3{font-size:16px;line-height:1.35;margin-bottom:4px}
  .service-row p{font-size:11px;white-space:normal;line-height:1.5}
  .service-row p span{margin-right:5px}
  .service-row b{font-size:17px;white-space:nowrap}
  .service-row .btn{grid-column:2;justify-self:start;height:28px;font-size:12px;padding:0 12px;align-self:start;margin:-6px 0 9px}
  .amenities{height:auto;display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:0}
  .amenity-photo{grid-column:1/-1;height:235px;object-position:center 63%}
  .amenity-content{padding:23px 12px 25px 20px}
  .amenity-content h2{font-size:23px;line-height:1.3}
  .amenity-content>p{font-size:13px;white-space:normal;line-height:1.5;margin-top:6px}
  .amenity-note{font-size:11px!important;margin-top:5px}
  .amenity-grid{grid-template-columns:repeat(3,1fr);gap:14px 6px;padding-right:10px;margin-top:18px}
  .amenity-grid>div{gap:5px}
  .amenity-grid i{font-size:26px}
  .amenity-grid span{font-size:9px;line-height:1.3;white-space:normal}
  .travel{width:103px;height:auto;min-height:200px;align-self:center;padding:14px 5px}
  .travel>i{font-size:30px;margin-bottom:10px}
  .travel strong{font-size:14px}
  .travel span{font-size:10px;margin-top:10px;padding-top:10px}
  .travel>b{font-size:23px}
  .pricing .section-head{display:block}
  .pricing h2{font-size:26px}
  .price-note{display:block;font-size:12px;margin-top:7px}
  .price-grid{grid-template-columns:1fr;gap:12px}
  .price-grid article{height:auto}
  .price-grid h3{height:44px;font-size:21px}
  .price-grid article>div{padding:12px 18px;height:auto}
  .price-grid .price-row{font-size:15px;gap:8px;padding:11px 0}
  .price-grid .price-row>strong{font-size:15px}
  .price-grid .price-row>span{font-size:13px}
  .price-grid .price-row>small{font-size:12px}
  .price-grid .price-row>b{font-size:18px}
  .team h2{font-size:28px}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .portrait{height:auto;aspect-ratio:1.1}
  .team-name{height:55px}
  .team-name strong{font-size:15px}
  .team-name small{font-size:12px;margin-top:4px}
  .team-bottom{height:auto;flex-direction:column;align-items:center;padding-top:24px;gap:20px}
  .team-bottom .btn{min-width:0;width:100%;font-size:16px;height:50px}
  .team-bottom blockquote{position:static;font-size:18px;transform:rotate(-3deg)}
  .team-bottom blockquote span{width:30px;margin-top:6px}
  .booking-steps{padding:24px 20px}
  .booking-steps h2{font-size:22px;margin-bottom:16px}
  .steps{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:15px;padding:10px}
  .steps>*{padding:12px 5px;gap:7px;flex-wrap:wrap}
  .steps>*>i:first-child{font-size:26px}
  .steps>*>b{font-size:11px;min-width:18px;width:18px;height:18px;margin-top:0;align-self:center}
  .steps>*>span{width:100%;padding-left:2px}
  .steps strong{font-size:13px}
  .steps small{font-size:10px;white-space:normal}
  .steps>*>i:last-child:not(:first-child){display:none}
  .articles h2{font-size:27px}
  .articles .section-head p{font-size:13px;max-width:240px}
  .pill-link{font-size:10px;padding:7px 10px;gap:5px;white-space:nowrap}
  .article-grid{grid-template-columns:1fr;gap:14px}
  .article{display:grid;grid-template-columns:130px minmax(0,1fr);min-width:0}
  .article img{height:135px}
  .article>div{height:135px;padding:15px 12px;min-width:0}
  .article h3{font-size:16px;line-height:1.5}
  .article span{font-size:11px;right:12px;bottom:10px}
  .contact{height:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-info{grid-column:1/-1;padding:28px 20px}
  .contact-info h2{font-size:27px;margin-bottom:13px}
  .contact-info p{font-size:14px;gap:10px;margin:10px 0}
  .contact-info p i{font-size:20px}
  .contact-buttons{gap:8px;margin-top:20px}
  .contact-buttons .btn{height:52px;font-size:11px;padding:0 6px;gap:6px;min-width:0;white-space:normal}
  .contact-buttons i{font-size:21px}
  .map,.storefront{height:210px}
  .map>svg{width:100%;height:100%;transform:scale(1.15)}
  .map>span{font-size:8px;left:4px;bottom:5px}
  .storefront p{font-size:15px;bottom:15px}
  .storefront img{object-position:60%}
  .footer-top{height:auto;flex-wrap:wrap;gap:20px;padding:24px 0}
  .footer-top .brand-mark{width:48px;height:48px}
  .footer-top .brand strong{font-size:23px}
  .footer-top .brand small{font-size:15px}
  .footer-top nav{order:3;flex-wrap:wrap;margin:0;row-gap:12px}
  .footer-top nav a,.footer-top nav button{font-size:12px;padding:0 12px}
  .footer-top nav a:first-child{padding-left:0;border-left:0}
  .footer-top>div{font-size:12px;margin:0}
  .footer-top>div p{margin-bottom:7px}
  .footer-top>div i{font-size:16px;margin-right:7px}
  footer{height:auto;padding:0 20px}
  .footer-bottom{height:auto;gap:20px;padding:20px 0;font-size:9px}
  .footer-bottom p{max-width:230px}
  .footer-bottom>span{font-size:17px;padding:0;flex-shrink:0}
  .form-grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  dialog{padding:22px;max-height:calc(100dvh - 20px)}
  .dialog-head h2{font-size:22px}
  .booking-intro{gap:12px}
  .booking-intro img{width:80px;height:72px}
  .booking-intro p{font-size:18px}
  .dialog-actions .btn{flex:1;min-width:120px}
  .info-body>img{height:180px}
}