/* Sites by Leo starter kit: the plumbing, not the look.
   It sets tokens, type basics, buttons, header, hours, form, footer and the phone bar.
   It has NO section layouts (no cards, steps, galleries, review boxes, hero) on purpose: those come from the shop,
   written fresh for each site in its own CSS below these rules. See standards/design.md, "Clean, not generated". */
:root{
  /* A.Siam: from BRIEF.md. White salon, espresso brunette, the gold ring logo and mirror frames, the jade roof tiles. */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#241A16;
  --muted:#6B5E57;
  --line:#E9E2DA;
  --accent:#C9A253;
  --on-accent:#241A16;
  --gold:#C9A253;
  --gold-soft:#E4CF9E;
  --jade:#1F4537;
  --display:"Marcellus",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --display-weight:400;
  --radius:0px;
  --radius-btn:2px;
  /* Fixed scale: don't change per client */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
@media (min-width:900px){.wrap{padding-inline:40px}}

/* Type: three sizes do almost everything (h1, h2, body). Big contrast between them, few weights. */
h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,9vw,96px)}
h2{font-size:clamp(30px,5vw,56px)}
h3{font-size:clamp(19px,2vw,22px);line-height:1.25;letter-spacing:0}
p{margin:0;max-width:34em;text-wrap:pretty}
.small{font-size:14px;color:var(--muted)}
section{padding-block:var(--s8)}
@media (min-width:900px){section{padding-block:var(--s9)}}

/* Buttons: one filled main button per screen. Anything else is a plain text link, not a second pill. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:var(--radius-btn);font:inherit;font-weight:600;font-size:16px;text-decoration:none;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn-main{background:var(--accent);color:var(--on-accent)}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

/* Header: brand left, two links max. */
.site-head{position:sticky;top:0;z-index:30;background:var(--bg)}
.site-head.scrolled{box-shadow:0 1px 0 var(--line)}
.site-head .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--display);font-weight:var(--display-weight);font-size:22px;text-decoration:none;white-space:nowrap}
.brand img{height:36px;width:auto}
.site-head nav{display:flex;gap:24px;align-items:center;font-size:15px}
.site-head nav a:not(.btn){text-decoration:none}
.site-head nav a:not(.btn):hover{text-decoration:underline}
@media (max-width:720px){.site-head .hide-sm{display:none}}

/* Open now: a plain line of text, not a pill or a pulsing dot. */
.open-now{font-size:15px;font-weight:600}
.open-now.closed{color:var(--muted)}

/* Hours */
.hours{width:100%;max-width:420px;border-collapse:collapse;font-size:15px;margin-top:var(--s4)}
.hours td{padding:8px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.today td{font-weight:700}
address{font-style:normal}

/* Form: no box around it unless the design calls for one. */
.form{display:grid;gap:var(--s4);max-width:560px;margin-top:var(--s5)}
.form label{display:grid;gap:6px;font-size:15px;font-weight:600}
.form label small{font-weight:400;color:var(--muted)}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--surface);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start}
.form .btn:disabled{opacity:.6}
.form-status{margin:0;font-size:15px}
.form-status.err{color:#B3261E}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* Language toggle */
.lang{display:inline-flex;gap:2px;font-size:13px;font-weight:600}
.lang button{border:0;background:transparent;padding:6px 8px;cursor:pointer;font:inherit;color:var(--muted)}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}

/* Footer */
.site-foot{padding-block:var(--s7);font-size:14px;color:var(--muted)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Phone bar: appears once the first screen's main button has scrolled away (kit.js). */
.mbar{display:none}
@media (max-width:720px){
  .mbar:not([hidden]){display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
  body{padding-bottom:76px}
}

/* ===== A.Siam Hair Salon ===== */
h1,h2{letter-spacing:0}
.lede{font-size:19px;color:var(--muted)}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.act span{font-size:16px;color:var(--muted)}
.act span a{color:var(--ink);font-weight:600}

/* Header: the gold ring from their logo, the sign's lettering */
.brand{display:flex;align-items:center;gap:10px}
.brand .ring{width:38px;height:38px;color:var(--gold);flex:none}
.brand .word{display:grid;line-height:1;font-size:23px;letter-spacing:.06em}
.brand .word small{font-family:var(--body);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;margin-top:5px;color:var(--muted)}

/* The standout: a thin gold frame, like the mirrors at every station */
.mirror{margin:0;padding:6px;background:linear-gradient(135deg,#B8903F,#E4CF9E 45%,#B8903F)}
.mirror img{width:100%;height:100%;object-fit:cover}

/* 1. The mirror (hero) */
.hero{padding-block:8px 48px}
.hero .wrap{display:grid;gap:32px}
.hero-photo img{aspect-ratio:4/5}
@media (max-width:719px){.hero .wrap{padding-inline:12px}.hero-text{padding-inline:8px}}
.hero h1{font-size:clamp(42px,10.5vw,76px);line-height:1.02}
.hero .lede{margin-top:16px}
@media (min-width:900px){
  .hero{padding-block:32px 112px}
  .hero .wrap{grid-template-columns:1.2fr 1fr;align-items:center;gap:72px}
  .hero-text{order:-1}
  .hero-photo{max-width:600px;justify-self:end;width:100%}
}

/* 2. Colour work, on espresso so the colours pop */
.colour{background:var(--ink);color:#F6F0E8}
.colour h2{color:#fff}
.colour .wrap > p{margin-top:16px;color:#D9CCBF}
.swipe{list-style:none;margin:32px 0 0;padding:0 20px 8px;display:grid;grid-auto-flow:column;grid-auto-columns:68%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe li{scroll-snap-align:start}
.swipe .mirror{padding:4px}
.swipe img{aspect-ratio:3/4}
.swipe p{font-size:15px;margin-top:12px;color:#E9DFD3}
@media (min-width:900px){
  .swipe{max-width:var(--max);margin:48px auto 0;padding:0 40px;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;gap:32px 24px}
}
.colour .more{margin-top:32px;font-size:16px}
.colour .more a{color:var(--gold-soft);font-weight:600}

/* 3. The wig and ponytail wall */
.ext .wrap{display:grid;gap:32px}
.ext-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ext-photos img{aspect-ratio:3/4}
.ext-photos .mirror{padding:4px}
.ext-text{display:grid;gap:16px;align-content:center}
@media (min-width:900px){.ext .wrap{grid-template-columns:1.1fr 1fr;gap:72px}}

/* 4. The family, on the jade of the roof tiles */
.family{background:var(--jade);color:#EFE9DD}
.family h2{color:#fff}
.family .wrap > p{margin-top:16px;color:#D3DDD5}
.family blockquote{margin:48px 0 0;padding-top:32px;border-top:1px solid var(--gold);max-width:40em}
.family blockquote p{font-family:var(--display);font-size:clamp(24px,4vw,36px);line-height:1.3;color:#fff;max-width:none}
.family blockquote footer{margin-top:16px;font-size:15px;color:var(--gold-soft)}

/* 5. The door */
.visit{padding-bottom:0}
.visit .wrap{display:grid;gap:32px}
.visit .front{width:100%;aspect-ratio:4/3;object-fit:cover}
.visit-text{display:grid;gap:8px;align-content:start}
.visit-text h2{margin-bottom:8px}
.visit .links{font-size:16px;margin-top:8px}
.visit .links a{font-weight:600;white-space:nowrap}
.visit .open-now{margin-top:8px}
@media (min-width:900px){.visit .wrap{grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}}
.map{display:block;width:100%;height:340px;border:0;margin-top:72px;filter:grayscale(.2)}

.site-head .btn{min-height:44px;padding:10px 20px}
.mbar .btn-main{font-size:15px}

/* ===== Booking page ===== */
.bk{max-width:760px}
.bk-band{background:var(--ink);color:#F6F0E8}
.bk-band .bk{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;padding-block:32px}
.bk-band h1{font-size:clamp(36px,9vw,64px);color:#fff}
.bk-band p{color:#D9CCBF;margin-top:12px;font-size:16px}
.bk-band p a{color:var(--gold-soft);font-weight:600;white-space:nowrap}
.bk-photo{padding:3px}
.bk-photo img{aspect-ratio:3/4}
@media (min-width:720px){.bk-band .bk{grid-template-columns:160px 1fr;gap:40px;padding-block:48px}}
.bk-head{padding-block:8px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0 0;padding:0;list-style:none;font-size:14px;font-weight:600;color:var(--muted)}
.steps li{display:grid;gap:8px}
.steps li::before{content:"";height:4px;background:var(--line)}
.steps li.done::before{background:var(--ink)}
.steps li.on::before{background:var(--gold)}
.steps li.on,.steps li.done{color:var(--ink)}
.panel{padding:32px 0 160px}
.panel h2{font-size:clamp(30px,7vw,44px);margin-bottom:24px}
.group-t{font-family:var(--display);font-weight:400;font-size:22px;margin:32px 0 0;padding-bottom:8px;border-bottom:1px solid var(--gold)}
.group-t:first-of-type{margin-top:0}
.svc{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;min-height:56px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 12px;color:var(--ink);font:inherit;cursor:pointer}
.svc:hover{background:#FAF6EF}
.svc b{font-weight:600}
.svc .dur{color:var(--muted);font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.svc[aria-pressed="true"]{background:#F6EEDD;box-shadow:inset 4px 0 0 var(--gold)}
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:thin}
.day{flex:none;width:68px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--radius-btn);padding:10px 4px;text-align:center;font:inherit;cursor:pointer;display:grid;gap:2px}
.day small{font-size:12px;font-weight:600;color:var(--muted)}
.day b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1}
.day i{font-style:normal;font-size:12px;color:var(--muted)}
.day:hover:not(:disabled){border-color:var(--gold)}
.day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.day[aria-pressed="true"] small,.day[aria-pressed="true"] i{color:var(--gold-soft)}
.day:disabled{opacity:.4;cursor:default}
.when{font-family:var(--display);font-size:22px;margin-top:24px}
.part{font-size:14px;font-weight:600;color:var(--muted);margin:16px 0 8px}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.time{min-height:48px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--radius-btn);font:inherit;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.time:hover{border-color:var(--gold)}
.time[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.none{color:var(--muted);padding:24px 0}
.legend{color:var(--muted);font-size:14px;margin-top:16px}
.recap{margin:0 0 32px;padding:24px;background:var(--ink);color:#F6F0E8;display:grid;gap:8px;border-top:4px solid var(--gold)}
.recap div{display:flex;justify-content:space-between;gap:16px;font-size:16px}
.recap dt{color:#CDBFB2}
.recap dd{margin:0;text-align:right;font-weight:600}
.err{color:#A3221B;font-weight:600;font-size:15px;min-height:1em}
.booked{padding-bottom:72px}
.booked h2{font-size:clamp(42px,10vw,64px)}
.booked .demo{color:var(--muted);margin:16px 0 32px}
.booked .links a{font-weight:600}
.next-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);box-shadow:0 -1px 0 var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
.next-bar[hidden]{display:none}
.next-bar .in{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.next-bar .sum{min-width:0;font-size:14px;color:var(--muted);line-height:1.35}
.next-bar .sum b{display:block;color:var(--ink);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-bar .acts{display:flex;align-items:center;gap:16px;flex:none}
.next-bar .back{background:none;border:0;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:44px}
.next-bar .back[hidden]{display:none}
.next-bar .btn:disabled{opacity:.45;cursor:default}
.bk-foot{padding-bottom:120px}
.hours tr.every td{font-weight:600}

/* Specials banner: the owner sets it in my.sitesbyleo.com.au; hidden until they do (Leo, 14 Oct 2026). */
.special{background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;line-height:1.4;padding:10px 0;text-align:center}
.special[hidden]{display:none}.special .wrap{max-width:1120px;margin:0 auto;padding-inline:20px}.special p{margin:0;max-width:none}