/**
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 */
/* =====================================================================
   Hearing Center Business Suite - public website
   Loaded after app.css, so it inherits the same colour tokens the panel
   uses. Everything here is prefixed .s- so it can never collide with the
   admin UI, which shares the stylesheet on pages like the login screen.
   ===================================================================== */

body.site{background:var(--surface);font-size:16px;line-height:1.7}
body.site.nav-open{overflow:hidden}

.s-wrap{max-width:1200px;margin:0 auto;padding:0 1.2rem;width:100%}
.s-wrap.narrow{max-width:840px}

.s-sec{padding:4.5rem 0}
.s-sec.tint{background:var(--surface-2)}
.s-sec-head{margin:0 auto 2.6rem;max-width:720px}
.s-sec-head.center{text-align:center}
.s-sec-head.left{margin-left:0;text-align:left}
.s-sec-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:.2rem 0 .5rem;letter-spacing:-.02em}
.s-eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  font-weight:700;color:var(--brand);background:var(--brand-light);
  padding:.28rem .7rem;border-radius:999px;
}
.s-eyebrow.sm{background:none;padding:0;font-size:.66rem;color:var(--muted)}
.s-sec-more{text-align:center;margin-top:2.2rem}
.s-muted{color:var(--muted)}

.btn-lg{padding:.8rem 1.5rem;font-size:1rem;border-radius:calc(var(--radius) - 2px)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}

/* ------------------------------------------------------------ top bar */
/* Positioned, and above the header.
   The header below is sticky with z-index 60, which makes it its own stacking
   context; an unpositioned strip painted underneath it, so the account menu
   dropped behind the menu bar and was cut off halfway down. */
.s-top{
  background:var(--sidebar);color:#c8d2e4;font-size:.82rem;
  position:relative;z-index:70;
}
.s-top a{color:#c8d2e4}
.s-top a:hover{color:#fff;text-decoration:none}

/* Three columns of the whole page, not three things sharing a row.
   1fr / auto / 1fr keeps the middle column in the middle of the page whatever
   is in the outer two. With flex and space-between it only landed in the
   middle when the left and right groups happened to be equally wide, which
   they never are — so "centre" drifted, and with an empty left group
   everything slid over to the left. */
.s-top-in{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:.4rem 1rem;min-height:38px;
}
.s-top-l{justify-content:flex-start}
.s-top-c{justify-content:center}
.s-top-r{justify-content:flex-end}

/* ------------------------------------------------------------- header */
.s-head{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;transition:box-shadow .2s;
}
.s-head.stuck{box-shadow:0 6px 24px rgba(15,23,42,.09)}
.s-head-in{display:flex;align-items:center;gap:1.4rem;min-height:74px}
.s-logo{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800;font-size:1.06rem}
.s-logo:hover{text-decoration:none}
.s-logo img{height:42px;width:auto}
.s-logo-mark{
  width:38px;height:38px;border-radius:11px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.2rem;
}
.s-logo-txt{white-space:nowrap}

.s-nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.s-nav-i{position:relative}
.s-nav-i>a{
  display:block;padding:.6rem .8rem;border-radius:9px;color:var(--text-2);
  font-weight:600;font-size:.92rem;white-space:nowrap;
}
.s-nav-i>a:hover{background:var(--surface-2);color:var(--brand);text-decoration:none}
.s-nav-i.on>a{color:var(--brand)}
.s-caret{font-style:normal;font-size:.6em;opacity:.7;margin-left:.15rem}
.s-drop{
  position:absolute;top:100%;left:0;min-width:210px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:.4rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.16s;z-index:70;
}
.s-nav-i.has-kids:hover .s-drop{opacity:1;visibility:visible;transform:none}
.s-drop a{display:block;padding:.5rem .7rem;border-radius:8px;color:var(--text-2);font-size:.9rem}
.s-drop a:hover{background:var(--surface-2);color:var(--brand);text-decoration:none}

.s-head-r{display:flex;align-items:center;gap:.8rem;margin-left:auto}

/* A module's badge in the header row — today the shop. Sized against the call
   block beside it rather than against the buttons in the strip above, because
   this is the row it has to look like it belongs to. */
.s-head-chip{
  display:inline-flex;align-items:center;gap:.45rem;position:relative;
  padding:.42rem .75rem;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface-2,#f1f5f9);
  color:var(--text);font-weight:600;font-size:.86rem;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s;
}
a.s-head-chip:hover{background:var(--brand);border-color:var(--brand);color:#fff;text-decoration:none}
.s-head-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.s-head-chip-i{font-style:normal;line-height:1;font-size:1.05rem}
.s-head-chip .s-top-n{
  position:absolute;top:-.35rem;right:-.35rem;
  min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:999px;
  background:var(--accent,#f59e0b);color:#111;
  font-size:.66rem;font-weight:800;font-style:normal;
  display:grid;place-items:center;line-height:1;
}
.s-nav+.s-head-r{margin-left:0}
.s-call{display:flex;align-items:center;gap:.5rem;color:var(--text)}
.s-call:hover{text-decoration:none}
.s-call-i{
  width:36px;height:36px;border-radius:50%;background:var(--brand-light);color:var(--brand);
  display:grid;place-items:center;font-size:1rem;
}
.s-call-t{display:flex;flex-direction:column;line-height:1.15}
.s-call-t small{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.s-call-t strong{font-size:.92rem}

.s-burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;width:38px}
.s-burger span{display:block;height:2px;background:var(--text);margin:5px 0;border-radius:2px;transition:.2s}
.s-nav-back{display:none}

/* WhatsApp float */
.s-wa{
  position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;
  background:#25d366;color:#053; display:grid;place-items:center;font-size:1.5rem;
  box-shadow:0 8px 24px rgba(37,211,102,.45);z-index:80;
}
.s-wa:hover{text-decoration:none;transform:scale(1.06)}

/* --------------------------------------------------------------- hero */
.s-hero{position:relative;overflow:hidden;background:var(--sidebar)}
.s-hero.h-sm .s-slide{min-height:46vh}
.s-hero.h-md .s-slide{min-height:60vh}
.s-hero.h-lg .s-slide{min-height:78vh}
.s-hero-track{position:relative}
.s-slide{
  display:none;position:relative;align-items:center;
  background-size:cover;background-position:center;
  background-image:linear-gradient(135deg,var(--sidebar) 0%,var(--brand-dark) 70%,var(--brand) 100%);
}
.s-slide.on{display:flex;animation:sFade .6s ease}
@keyframes sFade{from{opacity:0}to{opacity:1}}
.s-slide-veil{position:absolute;inset:0;background:linear-gradient(105deg,#050b18 10%,rgba(5,11,24,.35) 85%)}
.s-slide-in{position:relative;z-index:2;color:#fff;padding:5rem 1.2rem;max-width:1200px}
.s-slide.a-center .s-slide-in{text-align:center;margin-inline:auto}
.s-slide.a-right .s-slide-in{text-align:right}
.s-slide h1{font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.12;margin:0 0 1rem;max-width:18ch;letter-spacing:-.03em}
.s-slide.a-center h1{margin-inline:auto}
.s-slide p{font-size:clamp(1rem,1.7vw,1.2rem);opacity:.92;max-width:56ch;margin:0 0 1.8rem}
.s-slide.a-center p{margin-inline:auto}
.s-slide-btns{display:flex;gap:.7rem;flex-wrap:wrap}
.s-slide.a-center .s-slide-btns{justify-content:center}
.s-hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;cursor:pointer;backdrop-filter:blur(4px);
}
.s-hero-nav:hover{background:rgba(255,255,255,.25)}
.s-hero-nav.prev{left:18px} .s-hero-nav.next{right:18px}
.s-hero-dots{position:absolute;bottom:22px;left:0;right:0;display:flex;gap:.45rem;justify-content:center;z-index:5}
.s-hero-dots button{
  width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.45);transition:.2s;
}
.s-hero-dots button.on{background:#fff;width:26px;border-radius:5px}

/* quick strip under the hero */
.s-quick{background:var(--surface);position:relative;z-index:3}
.s-quick-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-top:-38px;box-shadow:var(--shadow);
}
.s-quick-in a{
  background:var(--surface);padding:1.25rem 1.1rem;display:flex;flex-direction:column;gap:.12rem;
  color:var(--text);transition:.16s;
}
.s-quick-in a:hover{background:var(--brand-light);text-decoration:none}
.s-quick-in span{font-size:1.5rem;line-height:1}
.s-quick-in strong{font-size:.98rem;margin-top:.3rem}
.s-quick-in small{color:var(--muted);font-size:.8rem}

/* -------------------------------------------------------------- grids */
.s-grid{display:grid;gap:1.4rem}
.s-grid.tight{gap:.7rem}
.s-grid.c-2{grid-template-columns:repeat(2,1fr)}
.s-grid.c-3{grid-template-columns:repeat(3,1fr)}
.s-grid.c-4{grid-template-columns:repeat(4,1fr)}
.s-grid.c-5{grid-template-columns:repeat(5,1fr)}
.s-grid>*{min-width:0}

.s-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;color:var(--text);transition:.18s;
}
.s-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand-light)}
.s-card-img{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.s-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.s-card-img.ph{display:grid;place-items:center;font-size:2.6rem;opacity:.35}
.s-card-b{padding:1.1rem 1.15rem 1.3rem;flex:1;display:flex;flex-direction:column;gap:.25rem}
.s-card-b h3{font-size:1.03rem;margin:0}
.s-card-b p{margin:0;font-size:.9rem;color:var(--text-2);line-height:1.6}

/* features */
.s-feature{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.4rem;transition:.18s;
}
.s-feature:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.s-feature-i{
  width:54px;height:54px;border-radius:15px;background:var(--brand-light);
  display:grid;place-items:center;font-size:1.6rem;margin-bottom:1rem;
}
.s-feature h3{font-size:1.05rem;margin:0 0 .35rem}
.s-feature p{margin:0;color:var(--text-2);font-size:.92rem}

/* split (about) */
.s-split{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center}
.s-split.rev .s-split-img{order:2}
.s-split-img img{width:100%;border-radius:var(--radius);display:block}
.s-split-txt .s-sec-head{margin-bottom:1.2rem}
.s-ticks{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.s-ticks li{position:relative;padding-left:1.7rem;font-size:.93rem;color:var(--text-2)}
.s-ticks li::before{
  content:'\2713';position:absolute;left:0;top:.05rem;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.7rem;display:grid;place-items:center;
}

/* services */
.s-service-i{
  font-size:2.2rem;padding:1.5rem 1.15rem .2rem;line-height:1;
}
.s-service-meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem;font-size:.8rem;color:var(--muted)}
.s-chip{background:var(--brand-light);color:var(--brand-dark);padding:.16rem .55rem;border-radius:999px;font-weight:700}
.s-price{font-weight:800;color:var(--brand);margin-top:.4rem}

/* brands */
.s-brand-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.s-brand{
  min-width:150px;height:86px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);display:grid;place-items:center;padding:1rem;
  filter:grayscale(1);opacity:.72;transition:.2s;
}
.s-brand:hover{filter:none;opacity:1;border-color:var(--brand-light)}
.s-brand img{max-height:48px;max-width:120px;object-fit:contain}
.s-brand span{font-weight:700;color:var(--text-2)}

/* stats */
.s-stats{background:linear-gradient(120deg,var(--brand-dark),var(--brand));color:#fff;padding:3.4rem 0}
.s-stats .s-sec-head h2{color:#fff}
.s-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.6rem;text-align:center}
.s-stat strong{display:block;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1;letter-spacing:-.03em}
.s-stat span{display:block;margin-top:.4rem;opacity:.85;font-size:.9rem}

/* team */
.s-member-photo{aspect-ratio:1/1;background:var(--surface-2);overflow:hidden}
.s-member-photo img{width:100%;height:100%;object-fit:cover;display:block}
.s-member-photo.ph{display:grid;place-items:center;font-size:3rem;font-weight:800;color:var(--brand);background:var(--brand-light)}
.s-member .s-card-b{text-align:center}
.s-qual{font-size:.8rem!important;color:var(--muted)!important}

/* testimonials */
.s-testi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.s-testi-card{
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;
}
.s-stars{color:var(--accent);letter-spacing:.12em}
.s-testi-card blockquote{margin:0;font-size:.96rem;color:var(--text-2);line-height:1.75;flex:1}
.s-testi-card figcaption{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--line-2);padding-top:.9rem}
.s-testi-card figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.s-testi-card figcaption span{display:flex;flex-direction:column;line-height:1.3}
.s-testi-card figcaption small{color:var(--muted);font-size:.8rem}

/* FAQ */
.s-acc details{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  margin-bottom:.7rem;overflow:hidden;
}
.s-acc summary{
  cursor:pointer;padding:1.05rem 1.2rem;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.s-acc summary::-webkit-details-marker{display:none}
.s-acc summary::after{content:'+';font-size:1.3rem;color:var(--brand);font-weight:400}
.s-acc details[open] summary::after{content:'\2013'}
.s-acc details[open] summary{border-bottom:1px solid var(--line-2)}
.s-acc .s-rich{padding:1rem 1.2rem 1.2rem;color:var(--text-2)}

/* gallery */
.s-shot{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.s-shot img{width:100%;height:100%;object-fit:cover;transition:.3s}
.s-shot:hover img{transform:scale(1.06)}
.s-shot span{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .6rem;color:#fff;font-size:.85rem;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
}

/* CTA band */
.s-cta{
  background:linear-gradient(120deg,var(--sidebar),var(--brand-dark));background-size:cover;
  background-position:center;color:#fff;padding:3.2rem 0;
}
.s-cta-in{display:flex;align-items:center;justify-content:space-between;gap:1.8rem;flex-wrap:wrap}
.s-cta h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .3rem}
.s-cta p{margin:0;opacity:.88}
.s-cta-btns{display:flex;gap:.7rem;flex-wrap:wrap}

/* contact */
.s-contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:2.6rem;align-items:start}
.s-ci{display:flex;gap:.9rem;margin-bottom:1.4rem}
.s-ci>span{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--brand-light);
  color:var(--brand);display:grid;place-items:center;font-size:1.05rem;
}
.s-ci strong{display:block;font-size:.9rem}
.s-ci p{margin:.1rem 0 0;color:var(--text-2);font-size:.92rem}
.s-map{margin-top:1.4rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.s-map iframe{width:100%;height:280px;border:0;display:block}

.s-form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow);
}
.s-form label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.9rem;color:var(--text-2)}
.s-form label span{color:var(--danger)}
.s-form input,.s-form textarea,.s-form select{
  width:100%;margin-top:.35rem;padding:.68rem .8rem;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:.94rem;background:var(--surface);color:var(--text);
}
.s-form input:focus,.s-form textarea:focus,.s-form select:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15);
}
.s-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.s-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* newsletter */
.s-news{background:var(--sidebar);color:#fff;padding:2.8rem 0}
.s-news-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.s-news h2{margin:0 0 .25rem;font-size:1.35rem}
.s-news p{margin:0;opacity:.8;font-size:.92rem}
.s-news-form{display:flex;gap:.5rem;flex:1;min-width:290px;max-width:460px}
.s-news-form input{
  flex:1;padding:.75rem .9rem;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:#fff;font:inherit;
}
.s-news-form input::placeholder{color:rgba(255,255,255,.6)}

/* video */
.s-video-frame{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000}
.s-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* rich text from the editor */
.s-rich{color:var(--text-2)}
.s-rich h2{font-size:1.5rem;margin:1.8rem 0 .7rem;color:var(--text)}
.s-rich h3{font-size:1.2rem;margin:1.5rem 0 .6rem;color:var(--text)}
.s-rich h4{font-size:1.03rem;margin:1.2rem 0 .5rem;color:var(--text)}
.s-rich p{margin:0 0 1rem}
.s-rich ul,.s-rich ol{margin:0 0 1.1rem;padding-left:1.3rem}
.s-rich li{margin-bottom:.4rem}
.s-rich img{border-radius:12px;height:auto}
.s-rich blockquote{
  margin:1.2rem 0;padding:.9rem 1.2rem;border-left:4px solid var(--brand);
  background:var(--surface-2);border-radius:0 10px 10px 0;
}
.s-rich table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem}
.s-rich th,.s-rich td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left}
.s-rich th{background:var(--surface-2)}
.s-rich a{text-decoration:underline}

/* inner-page banner */
.s-banner{
  background:linear-gradient(120deg,var(--sidebar),var(--brand-dark));
  background-size:cover;background-position:center;color:#fff;padding:3.6rem 0 3.2rem;text-align:center;
}
.s-banner h1{font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 .5rem}
.s-banner p{margin:0 auto;max-width:62ch;opacity:.86}
.s-crumb{margin-top:1.1rem;font-size:.85rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;opacity:.9}
.s-crumb a{color:#fff;opacity:.8}
.s-crumb a:hover{opacity:1}
.s-crumb strong{font-weight:600}

/* ------------------------------------------------------------- footer */
.s-foot{background:var(--sidebar);color:#aab6cb;padding-top:3.6rem;font-size:.92rem}
.s-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.4rem;padding-bottom:2.8rem}
.s-foot h4{color:#fff;font-size:.95rem;margin:0 0 1rem;letter-spacing:.02em}
.s-foot ul{list-style:none;margin:0;padding:0}
.s-foot li{margin-bottom:.55rem}
.s-foot a{color:#aab6cb}
.s-foot a:hover{color:#fff;text-decoration:none}
.s-logo-f{color:#fff;margin-bottom:1rem}
.s-logo-f .s-logo-mark{background:rgba(255,255,255,.14)}
.s-foot-about p{max-width:42ch;line-height:1.75}
.s-foot-social{display:flex;gap:.5rem;margin-top:1.1rem}
.s-foot-social a{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;
}
.s-foot-social a:hover{background:var(--brand)}
.s-foot-contact li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.55}
.s-foot-contact span{opacity:.6;flex:0 0 auto}
.s-foot-bar{border-top:1px solid rgba(255,255,255,.09);padding:1.1rem 0;font-size:.84rem}
/* The bottom line is laid out further down, in one place. */
.s-foot-credit a{color:#cbd5e1;text-decoration:underline}

/* --------------------------------------------------------- responsive */
@media (max-width:1080px){
  .s-nav-i>a{padding:.6rem .55rem;font-size:.88rem}
  .s-call-t{display:none}
  .s-grid.c-4{grid-template-columns:repeat(3,1fr)}
  .s-grid.c-5{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .s-head-in{min-height:64px}
  .s-burger{display:block}
  .s-book{display:none}
  .s-nav{
    position:fixed;top:0;right:-320px;width:300px;height:100vh;background:var(--surface);
    flex-direction:column;align-items:stretch;gap:0;padding:5rem 1rem 2rem;overflow-y:auto;
    box-shadow:var(--shadow-lg);transition:right .25s;z-index:90;margin:0;
  }
  body.nav-open .s-nav{right:0}
  body.nav-open .s-nav-back{
    display:block;position:fixed;inset:0;background:rgba(8,12,22,.55);z-index:85;
  }
  .s-nav-i>a{padding:.75rem .6rem;font-size:.98rem;border-bottom:1px solid var(--line-2);border-radius:0}
  .s-drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 .4rem .8rem}
  .s-quick-in{grid-template-columns:repeat(2,1fr);margin-top:-24px}
  .s-split{grid-template-columns:1fr;gap:2rem}
  .s-split.rev .s-split-img{order:0}
  .s-contact-grid{grid-template-columns:1fr;gap:2rem}
  .s-foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .s-grid.c-3,.s-grid.c-4,.s-grid.c-5{grid-template-columns:repeat(2,1fr)}
  .s-sec{padding:3.2rem 0}
  .s-hero.h-lg .s-slide{min-height:62vh}
}
@media (max-width:600px){
  body.site{font-size:15px}
  .s-grid.c-2,.s-grid.c-3,.s-grid.c-4,.s-grid.c-5{grid-template-columns:1fr}
  .s-grid.tight.c-3,.s-grid.tight.c-4,.s-grid.tight.c-5{grid-template-columns:repeat(2,1fr)}
  .s-quick-in{grid-template-columns:1fr;margin-top:0;border-radius:0;border-left:0;border-right:0}
  .s-ticks{grid-template-columns:1fr}
  .s-form-row{grid-template-columns:1fr;gap:0}
  .s-foot-grid{grid-template-columns:1fr}
  .s-cta-in{flex-direction:column;text-align:center}
  .s-cta-btns{justify-content:center}
  .s-hero-nav{display:none}
  .s-slide-in{padding:3.4rem 1.2rem}
  .s-wa{width:46px;height:46px;font-size:1.3rem;right:12px;bottom:12px}
}

/* ---------------------------------------------- filters, tabs, paging */
.s-filter{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:2rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;
}
.s-filter input,.s-filter select{
  padding:.55rem .75rem;border:1px solid var(--line);border-radius:9px;font:inherit;
  font-size:.92rem;background:var(--surface);color:var(--text);
}
.s-filter input[type=search]{flex:1;min-width:200px}

.s-tabs{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}
.s-tabs a{
  padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--text-2);font-size:.88rem;font-weight:600;
}
.s-tabs a:hover{text-decoration:none;border-color:var(--brand)}
.s-tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}

.s-pager{display:flex;gap:.35rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.s-pager a{
  min-width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-weight:600;font-size:.9rem;
}
.s-pager a:hover{text-decoration:none;border-color:var(--brand)}
.s-pager a.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* flashes on the public side */
body.site .flash{margin-bottom:1rem}

/* -------------------------------------------------------------- blog */
.s-post-meta{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin-bottom:1.4rem;font-size:.85rem;color:var(--muted)}
.s-post-hero{width:100%;border-radius:var(--radius);margin-bottom:1.6rem;display:block}
.s-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.6rem}
.s-share{display:flex;gap:.8rem;align-items:center;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.88rem}
.s-share span{color:var(--muted)}
.s-comments{display:flex;flex-direction:column;gap:.9rem}
.s-comment{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.s-comment-h{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem;font-size:.88rem}
.s-comment-h span{color:var(--muted)}
.s-comment p{margin:0;color:var(--text-2);line-height:1.75}
.s-comment-reply{margin-top:.9rem;padding:.8rem 1rem;background:var(--brand-light);border-radius:10px}
.s-comment-reply strong{display:block;font-size:.82rem;color:var(--brand-dark);margin-bottom:.2rem}

/* -------------------------------------------------------------- shop */
.s-shop-bar{display:flex;gap:.8rem;align-items:center;margin-bottom:2rem;flex-wrap:wrap}
.s-shop-card .s-card-b{gap:.4rem}
.s-shop-card h3 a{color:var(--text)}
.s-shop-card h3 a:hover{color:var(--brand);text-decoration:none}
.s-buy{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;margin-top:1rem}
.s-buy label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--text-2)}
.s-buy input{width:100px;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;font:inherit}
.s-checkout{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}
.s-cart{width:100%;border-collapse:collapse;font-size:.94rem}
.s-cart th,.s-cart td{padding:.7rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.s-cart th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.s-cart input{padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
.s-cart-drop{width:2.4rem;text-align:right}
.s-x{width:2rem;height:2rem;line-height:1;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:0}
.s-x:hover{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.s-sum{border-top:1px solid var(--line);padding-top:.9rem;margin-top:1rem;display:flex;flex-direction:column;gap:.4rem}
.s-sum>div{display:flex;justify-content:space-between;font-size:.92rem}
.s-sum span{color:var(--muted)}
.s-sum .grand{border-top:1px solid var(--line);padding-top:.6rem;font-size:1.05rem}
.s-sum .grand strong{color:var(--brand);font-size:1.2rem}
.s-sum .s-zone{display:block;font-size:.78rem;color:var(--muted);opacity:.85}
.s-prepay{margin:.8rem 0 0;padding:.7rem .85rem;border-radius:10px;background:var(--tint,#f1f5f9);border:1px solid var(--line);font-size:.86rem;line-height:1.5}
.s-pay{display:flex!important;gap:.7rem;align-items:flex-start;padding:.8rem;border:1px solid var(--line);
  border-radius:10px;margin-bottom:.6rem;cursor:pointer}
.s-pay input{width:auto!important;margin-top:.2rem}
.s-pay span{display:flex;flex-direction:column}
.s-pay small{color:var(--muted);font-weight:400}
.s-pay:has(input:checked){border-color:var(--brand);background:var(--brand-light)}

/* ------------------------------------------- paying for a web order
   The methods on one side, the instructions for the chosen one under
   them, and the form last. Every account number on screen at once is
   how somebody sends money to the wrong one, so only the selected
   method's details are shown. */
.s-pay-list{display:grid;gap:.6rem;margin-bottom:1rem}
.s-pay-how{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin-bottom:1.2rem;font-size:.93rem;
}
.s-pay-how p{margin:0 0 .6rem;line-height:1.7}
.s-pay-how p:last-child{margin-bottom:0}
.s-pay-acct{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0;font-size:.9rem}
.s-pay-acct dt{color:var(--muted)}
.s-pay-acct dd{margin:0;font-weight:600}
.s-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.s-form-grid .span2{grid-column:1 / -1}
.s-form-grid .field{display:flex;flex-direction:column;gap:.3rem}
.s-form-grid label{font-weight:600;font-size:.9rem}
.s-form-grid .hint{color:var(--muted);font-size:.8rem}
.s-form-grid .req{color:var(--danger,#dc2626)}
@media (max-width:620px){.s-form-grid{grid-template-columns:1fr}}
.s-pay-state{border-top:1px solid var(--line);padding-top:1.1rem}
.s-steps{display:flex;gap:.5rem;justify-content:space-between;flex-wrap:wrap}
.s-step{flex:1;min-width:90px;text-align:center;opacity:.4}
.s-step.on{opacity:1}
.s-step span{
  display:grid;place-items:center;width:34px;height:34px;margin:0 auto .35rem;border-radius:50%;
  background:var(--line);color:var(--text-2);font-weight:700;font-size:.85rem;
}
.s-step.on span{background:var(--brand);color:#fff}
.s-step small{font-size:.78rem;color:var(--text-2)}
@media (max-width:820px){ .s-checkout{grid-template-columns:1fr} }

/* ------------------------------------------------------- custom band */
.s-custom.pad-sm{padding:2.2rem 0}
.s-custom.pad-md{padding:4.5rem 0}
.s-custom.pad-lg{padding:6.5rem 0}
.s-wrap.full{max-width:none;padding:0}
.s-custom-in.a-center{text-align:center}
.s-custom-in.a-center .s-rich{margin-inline:auto;max-width:70ch}
.s-custom-in.a-center .btn-row{justify-content:center}

/* =====================================================================
   Phones.

   Three things went wrong on a 375px screen and none of them was the
   layout itself: the brand name ran under the burger, the closed menu
   drawer pushed the page sideways because it sat at right:-320px, and
   a long menu could not be scrolled past the notch. All three below.
   ===================================================================== */
@media (max-width:900px){
  /* The drawer slides with a transform instead of living off to the
     right. A fixed box at right:-320px is still 320px of page as far as
     the scroll width is concerned, and the whole site could be nudged
     sideways with a thumb. */
  .s-nav{
    right:0;width:min(300px,86vw);
    transform:translateX(105%);transition:transform .25s ease;
    padding-top:max(5rem,calc(3.5rem + env(safe-area-inset-top)));
    padding-bottom:max(2rem,env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }
  body.nav-open .s-nav{transform:translateX(0)}
  /* The burger sits over the open drawer, so it can close it again. */
  .s-burger{position:relative;z-index:95;flex:0 0 auto}

  .s-head-in{gap:.7rem}
  /* min-width:0 is what lets a flex child actually shrink. Without it the
     brand keeps its full width and pushes the burger off the screen. */
  .s-logo{min-width:0;flex:1 1 auto;overflow:hidden}
  .s-logo-txt{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:.98rem;
  }
  .s-logo img{height:34px}
  .s-logo-mark{flex:0 0 auto}
}
@media (max-width:600px){
  .s-head-in{min-height:56px}
  .s-logo-txt{font-size:.9rem}
  .s-sec{padding:2.4rem 0}
  .s-sec.pad-lg{padding:3rem 0}
  .s-sec.pad-sm{padding:1.6rem 0}
  /* A hero that is 62vh tall on a phone is a hero nobody scrolls past. */
  .s-hero.h-lg .s-slide,.s-hero .s-slide{min-height:auto}
  .s-slide-in{padding:2.6rem 1.1rem}
  .s-filter{padding:.75rem .8rem;gap:.45rem}
  .s-filter input[type=search]{min-width:0;width:100%}
  .s-tabs{gap:.35rem}
  .s-tabs a{padding:.4rem .8rem;font-size:.82rem}
}
/* Nothing on the public site may push the page sideways. */
body.site{overflow-x:hidden}

/* The drawer's own call-to-action block: invisible until the drawer exists. */
.s-nav-cta{display:none}
@media (max-width:900px){
  .s-nav-cta{display:grid;gap:.5rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
  .s-nav-cta .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------- the cart on a phone
   Five columns across 375px gives each cell about 65px, which is not
   enough for a product name. So below 640px each row becomes its own
   little block: the item on its own line, then label/value pairs read
   from the cell's data-label. The header row is no longer needed. */
@media (max-width:640px){
  .s-cart thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .s-cart,.s-cart tbody,.s-cart tr,.s-cart td{display:block;width:100%}
  .s-cart tr{
    border:1px solid var(--line);border-radius:12px;
    padding:.6rem .8rem;margin-bottom:.7rem;background:var(--surface);
  }
  .s-cart td{border:0;padding:.28rem 0;display:flex;justify-content:space-between;gap:1rem}
  .s-cart td:first-child{display:block;padding-bottom:.5rem;border-bottom:1px solid var(--line-2);margin-bottom:.3rem}
  .s-cart td[data-label]::before{
    content:attr(data-label);color:var(--muted);font-size:.82rem;
    font-weight:600;flex:0 0 auto;
  }
  .s-cart td:empty{display:none}
  .s-cart td.s-cart-drop{width:auto;justify-content:flex-end;padding-top:.5rem}
  .s-cart td.s-cart-drop::before{content:'Remove';font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  .s-cart input{width:100% !important;max-width:120px;text-align:right}
}

/* ------------------------------------------------- the top bar's own menu
   Entries added under Website -> Menus -> Top Bar. They are navigation, so
   unlike the opening hours beside them they stay on a phone. */
.s-top-info{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.s-top-nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;min-width:0}

/* One entry, whatever kind it is. They share a shape so a phone number and a
   link sitting next to each other look like one strip rather than two ideas. */
.s-top-i{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.1rem .5rem;border-radius:6px;opacity:.88;
  font-weight:600;white-space:nowrap;
}
a.s-top-i:hover{opacity:1;background:rgba(255,255,255,.12);text-decoration:none}
.s-top-ico{font-style:normal;line-height:1}
.s-top-txt{opacity:.8;font-weight:500}

/* A divider between plain entries, but never before or after a button — a
   line running into the side of a filled pill looks like a mistake. */
.s-top-i + .s-top-i:not(.s-top-btn):not(.s-top-login){
  border-left:1px solid rgba(255,255,255,.18);
}
.s-top-btn + .s-top-i,.s-top-login + .s-top-i{border-left:0}

.s-top-btn,.s-top-login{
  background:rgba(255,255,255,.14);border-radius:999px;
  padding:.15rem .8rem;opacity:1;
}
.s-top-btn:hover,.s-top-login:hover{background:rgba(255,255,255,.24)}

/* ------------------------------------------------ the right-hand corner
   Three things live here and they are always the same three: the account,
   the order tracker and the cart. They are chips rather than links — a badge
   with the words beside it — so the corner reads as one control panel and not
   as three more menu entries. On a narrow screen the words fall away and the
   badges stay, which is the part somebody is aiming at anyway. */
.s-top-chip{
  display:inline-flex;align-items:center;gap:.4rem;position:relative;
  padding:.2rem .6rem;border-radius:999px;white-space:nowrap;
  font-weight:600;font-size:.82rem;line-height:1.5;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  color:inherit;font-family:inherit;cursor:pointer;
  transition:background .15s,border-color .15s;
}
a.s-top-chip:hover,.s-top-chip:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.28);text-decoration:none}
.s-top-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.s-top-chip.on:hover{filter:brightness(1.08)}
.s-chip-ico{font-style:normal;line-height:1;font-size:1rem}
.s-chip-lbl{line-height:1}
.s-top-nav .s-top-chip + .s-top-chip,
.s-top-nav .s-top-chip + .s-acct,
.s-top-nav .s-acct + .s-top-chip{margin-left:.35rem}

/* The count on the cart. Sits on the badge, not after the words, so it stays
   attached to the icon when the words are hidden. */
.s-top-chip .s-top-n{
  position:absolute;top:-.35rem;right:-.35rem;
  min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:999px;
  background:var(--accent,#f59e0b);color:#111;
  font-size:.66rem;font-weight:800;font-style:normal;
  display:grid;place-items:center;line-height:1;
}

/* ---------------------------------------------------- the account chip */
.s-acct{position:relative;display:inline-block}
.s-acct-btn{padding-left:.3rem}
.s-avatar{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;object-fit:cover;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  font-size:.72rem;font-weight:800;line-height:1;text-transform:uppercase;
}
.s-acct .s-caret{font-style:normal;font-size:.62rem;opacity:.7;line-height:1}

.s-acct-menu{
  display:none;position:absolute;right:0;top:calc(100% + .45rem);z-index:100;
  min-width:210px;padding:.35rem;border-radius:12px;
  background:var(--surface,#fff);color:var(--text,#0f172a);
  border:1px solid var(--line,#e2e8f0);box-shadow:0 14px 40px rgba(0,0,0,.22);
  font-size:.86rem;text-align:left;
}
.s-acct-menu.open{display:block}
.s-acct-who{padding:.5rem .6rem .55rem;border-bottom:1px solid var(--line,#e2e8f0);margin-bottom:.3rem}
.s-acct-who strong{display:block;font-size:.9rem;line-height:1.3}
.s-acct-who small{color:var(--muted,#64748b);font-size:.76rem}
.s-acct-menu a,
.s-acct-menu button{
  display:flex;align-items:center;gap:.55rem;width:100%;
  padding:.48rem .6rem;border-radius:8px;border:0;background:none;
  color:var(--text,#0f172a);font:inherit;text-align:left;cursor:pointer;
}
.s-acct-menu a:hover,
.s-acct-menu button:hover{background:var(--surface-2,#f1f5f9);color:var(--brand);text-decoration:none}
.s-acct-menu span{width:1.1rem;text-align:center;font-style:normal;opacity:.85}
.s-acct-menu form{margin:0}
.s-acct-sep{height:1px;background:var(--line,#e2e8f0);margin:.3rem 0}

@media (max-width:820px){
  /* The three columns become three rows, each still centred on its own line.
     They used to be hidden outright below 600px, which meant a centre that
     had put its phone number up there lost it on the one device that can
     dial it. Wrapping keeps everything; it only costs a little height. */
  .s-top-in{grid-template-columns:1fr;justify-items:center;padding:.3rem 0}
  .s-top-l,.s-top-c,.s-top-r{justify-content:center}
  .s-top-nav:empty{display:none}
  .s-top-info{display:none}
  .s-top-i{font-size:.78rem;padding:.1rem .4rem}
  .s-top-i + .s-top-i{border-left:0}
}

/* On a phone the badges keep their place and lose their words: an icon you
   can hit with a thumb is worth more than a label you cannot read. */
@media (max-width:560px){
  .s-top-chip .s-chip-lbl{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .s-top-chip{padding:.28rem .5rem}
  .s-acct-btn{padding:.2rem .45rem}
  .s-acct .s-caret{display:none}
}

/* =====================================================================
   The mobile drawer's backdrop, and why its z-index is 55.

   The drawer lives inside .s-head, which is position:sticky with
   z-index:60 — so it creates a stacking context and everything inside
   it, drawer included, paints at 60 no matter what z-index the drawer
   itself claims. The backdrop is a child of <body> at 85, which put it
   ABOVE the whole header: the menu showed through a dark veil and every
   tap landed on the backdrop instead of the link, closing the menu.

   So the backdrop has to rank below the header, not below the drawer.
   Anything under 60 works; 55 leaves room.
   ===================================================================== */
@media (max-width:900px){
  body.nav-open .s-nav-back{z-index:55}
  /* And the drawer must beat the header's own children rather than the
     page: within .s-head it is the topmost thing. */
  body.nav-open .s-nav{z-index:5}
  /* A tap has to reach the link, so nothing may sit invisibly over it. */
  .s-nav a{position:relative;z-index:1}
}

/* =====================================================================
   Social marks.

   Real drawn glyphs now, inline SVG taking the surrounding text colour.
   The old ones were HTML entities chosen for roughly the right shape —
   an equals sign for Facebook, a sun for Instagram — which nobody
   recognised as anything.
   ===================================================================== */
.s-ico{display:block;width:1em;height:1em;flex:0 0 auto}
.s-ico-e{display:block;font-size:1em;line-height:1}

.s-foot-social{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.s-soc{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  display:grid;place-items:center;font-size:1.15rem;
  background:rgba(255,255,255,.09);color:#e2e8f2;
  transition:background .15s,color .15s,transform .15s;
}
.s-soc:hover{transform:translateY(-2px);text-decoration:none;color:#fff}
/* Each network's own colour on hover, so the row is recognisable without
   being a wall of brand colour at rest. */
.s-soc-facebook:hover {background:#1877f2}
.s-soc-youtube:hover  {background:#ff0000}
.s-soc-instagram:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.s-soc-linkedin:hover {background:#0a66c2}
.s-soc-twitter:hover  {background:#000}
.s-soc-tiktok:hover   {background:#000}
.s-soc-whatsapp:hover {background:#25d366}
.s-soc-telegram:hover {background:#229ed9}
.s-soc-google:hover   {background:#4285f4}
.s-soc-pinterest:hover{background:#bd081c}
.s-soc-threads:hover  {background:#000}
.s-soc-extra:hover,.s-soc-x-link:hover{background:var(--brand)}

/* The strip's layout is defined once, up with the rest of the top bar.

   There used to be a second set of rules down here that redefined .s-top-in
   as a flex row and hid the centre group below 760px and the right-hand one
   below 520px. Being later in the file, it won — so the grid above had no
   effect at all, "centre" landed wherever the outer two groups left room,
   and a phone number put in the strip vanished on a phone.

   Two rules for one strip is how that happens. There is now one. */

/* =====================================================================
   Reading an article: the read count, the like button, the share row,
   and the comment thread underneath.
   ===================================================================== */
.s-views{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.s-views b{font-weight:700}

.s-react{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:1.8rem 0 .5rem;padding-top:1.2rem;border-top:1px solid var(--line);
}

/* The like button. It says "Helpful" rather than "Like": a hearing centre's
   article is asking whether it answered the question, not for applause. */
.s-like{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--text-2);cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.s-like svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.s-like:hover{border-color:var(--brand);color:var(--brand)}
.s-like:active{transform:scale(.96)}
.s-like.on{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.s-like.on svg{fill:currentColor;stroke:currentColor}
.s-like[disabled]{opacity:.6;cursor:default}
.s-like.sm{padding:.28rem .6rem;font-size:.82rem;gap:.3rem}
.s-like.sm svg{width:15px;height:15px}

.s-share{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-left:auto}
.s-share-l{font-size:.85rem;color:var(--muted);font-weight:600;margin-right:.2rem}
.s-sh{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  transition:background .15s,color .15s,transform .15s,border-color .15s;
}
.s-sh:hover{transform:translateY(-2px);color:#fff;text-decoration:none}
.s-sh svg{width:17px;height:17px;fill:currentColor}
.s-sh.ok{background:var(--ok);border-color:var(--ok);color:#fff}

/* ------------------------------------------------------- the comments */
.s-comment-a{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.s-reply-b{
  background:none;border:0;padding:.28rem .2rem;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:600;color:var(--brand);
}
.s-reply-b:hover{text-decoration:underline}

/* A reply is indented once and never twice — see blog_comments(), which
   flattens anything deeper. Six levels of nesting on a phone is a column
   two words wide. */
.s-comment-kids{margin:.9rem 0 0 1.6rem;padding-left:1rem;border-left:2px solid var(--line)}
.s-comment-in{background:transparent;border:0;padding:0 0 .8rem}
.s-comment-kids .s-comment:last-child{padding-bottom:0}

.s-replying{
  display:flex;align-items:center;gap:.5rem;
  font-size:.86rem;color:var(--muted);margin:.6rem 0 0;
}
.s-replying b{color:var(--text)}
.s-replying button{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.86rem;color:var(--brand);text-decoration:underline;
}

@media (max-width:600px){
  .s-react{gap:.7rem}
  .s-share{margin-left:0;width:100%}
  .s-comment-kids{margin-left:.6rem;padding-left:.7rem}
}

/* =====================================================================
   Testimonials, in four shapes.

   The words are the same; only the arrangement changes. A centre with
   three testimonials and a centre with forty want different things and
   neither should have to edit a template.
   ===================================================================== */
.s-testi-wrap{position:relative}
.s-testi-row{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}

.s-testi-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;margin:0;display:flex;flex-direction:column;gap:.7rem;
  box-shadow:var(--shadow);
}
.s-testi-card blockquote{margin:0;font-size:.98rem;line-height:1.7;color:var(--text-2)}
.s-testi-card figcaption{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.5rem}
.s-testi-card figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.s-testi-card figcaption strong{display:block;font-size:.95rem}
.s-testi-card figcaption small{color:var(--muted);font-size:.82rem}
.s-stars{color:#f59e0b;letter-spacing:.08em}

/* A long testimonial is trimmed on the card and opened to read in full. */
.s-testi-card.is-long{cursor:pointer;transition:transform .15s,box-shadow .15s}
.s-testi-card.is-long:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.s-testi-card.is-long:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.s-testi-more{
  font-size:.84rem;font-weight:700;color:var(--brand);
  display:inline-flex;align-items:center;gap:.3rem;
}
.s-testi-more::after{content:'\2192'}

/* ------------------------------------------------------------ sliding */
.s-testi-slider .s-testi-row{
  /* proximity, not mandatory. A card row is a nicety, not a pager: a
     thumb flick should be tidied up, but a scroll the page itself asked
     for must never be pulled back. The one large quote below does use
     mandatory, because there each slide has to land squarely. */
  display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;
  /* scroll-behavior is deliberately NOT set here. In CSS it wins over the
     behavior the script asks for, so a reader who has asked their system
     for less motion still got the glide. The script decides per scroll. */
  padding:.3rem .2rem 1rem;
  /* The bar is hidden because the arrows and dots say the same thing more
     clearly; the row still scrolls by touch, wheel and keyboard. */
  scrollbar-width:none;
}
.s-testi-slider .s-testi-row::-webkit-scrollbar{display:none}
.s-testi-slider .s-testi-card{flex:0 0 min(360px,86%);scroll-snap-align:start}

.s-testi-single .s-testi-row{
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.s-testi-single .s-testi-row::-webkit-scrollbar{display:none}
.s-testi-single .s-testi-card{
  flex:0 0 100%;scroll-snap-align:center;text-align:center;
  align-items:center;border:0;box-shadow:none;background:transparent;padding:1rem;
}
.s-testi-single .s-testi-card blockquote{font-size:1.25rem;line-height:1.65;max-width:56ch}
.s-testi-single .s-testi-card figcaption{justify-content:center}

.s-testi-nav{
  position:absolute;top:44%;z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--text);cursor:pointer;
  display:grid;place-items:center;font-size:1rem;
  box-shadow:var(--shadow);transition:background .15s,color .15s,opacity .15s;
}
.s-testi-nav:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.s-testi-nav.prev{left:-14px}
.s-testi-nav.next{right:-14px}
.s-testi-nav[disabled]{opacity:.3;cursor:default}
.s-testi-nav[disabled]:hover{background:var(--surface);color:var(--text);border-color:var(--line)}

.s-testi-dots{display:flex;gap:.4rem;justify-content:center;margin-top:.4rem}
.s-testi-dots i{
  width:8px;height:8px;border-radius:50%;background:var(--line);
  transition:background .15s,width .15s;
}
.s-testi-dots i.on{background:var(--brand);width:22px;border-radius:4px}

/* ------------------------------------------------------------- shapes */
.s-testi-cards .s-testi-row{grid-template-columns:repeat(3,1fr)}
.s-testi-compact .s-testi-row{grid-template-columns:repeat(4,1fr);gap:.8rem}
.s-testi-compact .s-testi-card{padding:1rem;gap:.5rem}
.s-testi-compact .s-testi-card blockquote{font-size:.9rem;line-height:1.6}
.s-testi-compact .s-testi-card figcaption img{width:32px;height:32px;flex:0 0 32px}

/* ------------------------------------------------ the full-text dialog */
.s-testi-modal{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:1.2rem;
  background:rgba(8,12,22,.6);
}
.s-testi-modal-b{
  background:var(--surface);border-radius:16px;max-width:620px;width:100%;
  max-height:86vh;overflow-y:auto;padding:2rem;box-shadow:0 24px 60px rgba(8,12,22,.4);
}
.s-testi-modal-b blockquote{margin:.8rem 0 1.2rem;font-size:1.06rem;line-height:1.75;white-space:pre-wrap}
.s-testi-modal-b .who{display:flex;align-items:center;gap:.7rem;font-weight:700}
.s-testi-modal-b .who small{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
.s-testi-modal-x{
  float:right;background:none;border:0;font-size:1.5rem;line-height:1;
  cursor:pointer;color:var(--muted);padding:.2rem .4rem;
}

/* --------------------------------------------------------- the review ask */
.s-review-ask{
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line);text-align:center;
}
.s-review-ask p{max-width:56ch;margin:0 auto 1rem;color:var(--text-2)}
.s-review-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.s-review-b{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-weight:600;font-size:.92rem;
  transition:background .15s,color .15s,transform .15s,border-color .15s;
}
.s-review-b:hover{transform:translateY(-2px);color:#fff;text-decoration:none}
.s-review-b .s-ico{width:1.15em;height:1.15em}

@media (max-width:900px){
  .s-testi-row,.s-testi-cards .s-testi-row{grid-template-columns:repeat(2,1fr)}
  .s-testi-compact .s-testi-row{grid-template-columns:repeat(2,1fr)}
  .s-testi-nav.prev{left:-6px}
  .s-testi-nav.next{right:-6px}
}
@media (max-width:600px){
  .s-testi-row,.s-testi-cards .s-testi-row,.s-testi-compact .s-testi-row{grid-template-columns:1fr}
  .s-testi-slider .s-testi-card{flex:0 0 88%}
  .s-testi-single .s-testi-card blockquote{font-size:1.05rem}
  /* The arrows would sit over the cards on a phone; the row already
     scrolls with a thumb, and the dots show where you are. */
  .s-testi-nav{display:none}
  .s-testi-modal-b{padding:1.4rem}
}

/* ------------------------------------------------- the public price list */
.s-pl-note{
  background:var(--brand-light);border-radius:12px;padding:1rem 1.2rem;
  margin-bottom:1.4rem;color:var(--text-2);
}
.s-pl-cat th{
  background:var(--surface-2);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);
}
.s-pl-was{color:var(--muted);font-size:.86rem}
.s-pl-off{font-size:.76rem;color:var(--ok);font-weight:700}

/* A class that sets display beats the browser's own [hidden] rule, so an
   element told to hide stays on screen. That is how the comment form ended up
   permanently saying "Replying to" with nobody's name after it. One line here
   rather than one per component, because the next one would be found the same
   slow way. */
[hidden]{display:none !important}

/* ------------------------------------------------- the last line of all
   Three columns of the page, like the strip at the top: copyright on the
   left, who built it in the middle, the small print on the right. Each is
   written by the centre under Website Settings. */
.s-foot-bar-in{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:.4rem 1.2rem;
}
.s-foot-bar-l{justify-self:start}
.s-foot-bar-c{justify-self:center;text-align:center}
.s-foot-bar-r{justify-self:end}
.s-foot-bar-in p{margin:0}
.s-foot-bar-r a{margin-left:.9rem}
.s-foot-bar-r a:first-child{margin-left:0}

@media (max-width:820px){
  /* Stacked and centred rather than squeezed. The small print is the part
     somebody actually goes looking for, so it must stay readable. */
  .s-foot-bar-in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.5rem}
  .s-foot-bar-l,.s-foot-bar-c,.s-foot-bar-r{justify-self:center}
  .s-foot-bar-r a{margin:0 .45rem}
}
/* =====================================================================
   Something the page needs to say: a wrong sign-in, a saved change, a
   note about what happens next. Three tones, and they are colour *plus*
   a left bar and a weight change, so the difference survives a screen in
   sunlight and a reader who does not see red as red.
   ===================================================================== */
.s-note{
  padding:.85rem 1.1rem;margin:0 0 1.2rem;border-radius:10px;
  border:1px solid var(--line);border-left:4px solid var(--muted);
  background:var(--surface-2);font-size:.92rem;line-height:1.55;
}
.s-note strong{font-weight:700}
.s-note-ok{border-left-color:#15803d;background:rgba(21,128,61,.07);border-color:rgba(21,128,61,.25)}
.s-note-bad{border-left-color:var(--danger);background:rgba(185,28,28,.06);border-color:rgba(185,28,28,.25)}
.s-note a{font-weight:600}

/* =====================================================================
   The patient's own account: their details, and a panel from each module
   the centre has. Cards rather than one long page, because somebody
   opening this on a phone is looking for one thing — the time of their
   appointment, or whether the report is ready.
   ===================================================================== */
.s-acc-who{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding:1rem 1.2rem;margin-bottom:1.4rem;
  border:1px solid var(--line);border-radius:14px;background:var(--surface-2);
}
.s-acc-who h2{margin:0;font-size:1.15rem}
.s-acc-who .s-muted{font-size:.85rem}

.s-acc-cards{display:grid;gap:1.1rem}
.s-acc-card{
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:1.1rem 1.2rem;
}
.s-acc-card > h3{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .9rem;
  font-size:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
}
.s-acc-card > h3 .n{
  margin-left:auto;font-size:.72rem;font-weight:700;padding:.1rem .5rem;
  border-radius:999px;background:var(--brand-light);color:var(--brand);
}
.s-acc-card > h3 a{margin-left:auto;font-size:.8rem;font-weight:600}
.s-acc-card > h3 .n + a{margin-left:.5rem}

/* Label and value, side by side on a screen with room and stacked on one
   without — a definition list is what this is, so it is one. */
.s-dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.1rem;margin:0}
.s-dl dt{color:var(--muted);font-size:.84rem}
.s-dl dd{margin:0;font-size:.9rem}

.s-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.s-list > li{border-bottom:1px solid var(--line);padding-bottom:.5rem}
.s-list > li:last-child{border-bottom:0;padding-bottom:0}
.s-list a,.s-list .row{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  color:inherit;
}
.s-list a:hover{color:var(--brand);text-decoration:none}
.s-list span{color:var(--muted);font-size:.82rem;flex:0 0 auto}

/* The registration form. Narrow on purpose: a form the width of a desktop
   screen reads as a form somebody has to fill in, and this one is four
   boxes. */
.s-reg{max-width:32rem;margin:0 auto}
.s-reg small{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted);font-weight:400}
.s-reg .s-pid{
  font-family:var(--mono,ui-monospace,monospace);font-size:1.5rem;font-weight:700;
  letter-spacing:.04em;color:var(--brand);display:block;margin:.3rem 0 .6rem;
}

@media (max-width:560px){
  .s-dl{grid-template-columns:1fr;gap:.15rem}
  .s-dl dd{margin-bottom:.55rem}
  .s-list a,.s-list .row{flex-direction:column;gap:.15rem}
}
/* ===================================================================== 
   Lab reports: the patient's own door, their list, and one report.
   The report is styled to be printed as much as read — somebody takes it
   to another doctor, and it should look like a report rather than like a
   screenshot of a web page.
   ===================================================================== */
.lab-in{max-width:26rem;margin:0 auto}
.lab-in small{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted)}

.lab-who{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding:.9rem 1.1rem;margin-bottom:1.2rem;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
}
.lab-who strong{display:block}
.lab-who .s-muted{font-size:.84rem}

.lab-list{display:grid;gap:.7rem}
.lab-card{
  display:block;padding:1rem 1.1rem;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:inherit;text-decoration:none;
  transition:border-color .15s, transform .15s;
}
.lab-card:hover{border-color:var(--brand);transform:translateY(-1px);text-decoration:none}
.lab-card-h{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.lab-card-h time{font-size:.82rem;color:var(--muted);flex:0 0 auto}
.lab-card-m{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 .2rem}
.lab-card-go{font-size:.82rem;color:var(--brand);font-weight:600}

.lab-actions{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.lab-actions > div{display:flex;gap:.4rem}

/* The report itself. */
.lab-paper{
  background:#fff;color:#111;border:1px solid var(--line);border-radius:12px;
  padding:2rem 2.2rem;
}
.lab-paper h1{font-size:1.4rem;margin:0 0 1.2rem}
.lab-paper-h{
  font-size:.86rem;color:#555;padding-bottom:.8rem;margin-bottom:1.2rem;
  border-bottom:2px solid #111;font-weight:600;
}
.lab-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.5rem 1.4rem;margin:0 0 1.6rem;padding-bottom:1.2rem;
  border-bottom:1px solid #e5e7eb;
}
.lab-meta dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#666}
.lab-meta dd{margin:.1rem 0 0;font-weight:600;overflow-wrap:anywhere}
.lab-body{line-height:1.75}
.lab-body p{margin:0 0 .7rem}
.lab-shot{margin:1.4rem 0 0}
.lab-shot img{width:100%;height:auto;border:1px solid #e5e7eb;border-radius:8px}
.lab-sign{margin-top:2.6rem;text-align:right}
.lab-sign span{display:block;width:12rem;margin-left:auto;border-top:1px solid #111;margin-bottom:.3rem}
.lab-paper-f{
  margin:2rem 0 0;padding-top:1rem;border-top:1px solid #e5e7eb;
  font-size:.8rem;color:#555;
}

@media (max-width:620px){
  .lab-paper{padding:1.3rem 1.1rem}
  .lab-actions{flex-direction:column}
  .lab-actions > div{width:100%}
  .lab-actions .btn{flex:1}
}

@media print{
  /* Everything but the report itself goes. A patient printing this wants the
     report, not the site's menu and footer around it. */
  .s-top,.s-head,.s-foot,.s-foot-bar,.no-print,.hcs-chat,.hcs-chat-btn{display:none !important}
  .lab-paper{border:0;padding:0}
  .s-sec{padding:0}
  body.site{background:#fff}
}

/* ------------------------------------------- module buttons in the header
   The shop's cart, its tracking link, and a way back to the panel for staff.
   Quiet by default — they sit beside the phone number and the booking button,
   and the booking button is what the header is for. */
.s-head-b{
  display:inline-flex;align-items:center;gap:.35rem;position:relative;
  padding:.45rem .7rem;border-radius:9px;color:var(--text-2);
  font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap;
}
.s-head-b:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.s-head-b-i{font-size:1rem;line-height:1}
.s-head-b-on{color:var(--brand)}
.s-head-b i{
  font-style:normal;font-size:.68rem;font-weight:700;line-height:1;
  min-width:1.05rem;padding:.15rem .25rem;border-radius:999px;
  background:var(--brand);color:#fff;text-align:center;
}

@media (max-width:1080px){
  /* The words go before the icons do: a cart is understood from its picture,
     and the header runs out of room long before the page does. */
  .s-head-b-t{display:none}
  .s-head-b{padding:.45rem .5rem}
}
@media (max-width:520px){
  /* On a phone the burger and the call button are what matter. The cart is
     one tap away inside the menu. */
  .s-head-dash{display:none}
}

/* The cart's count, and the label beside a top-strip icon. Small because the
   strip is a strip — the moment these grow the three columns stop fitting. */
.s-top-n{
  font-style:normal;font-size:.66rem;font-weight:700;line-height:1;
  min-width:1rem;padding:.12rem .22rem;border-radius:999px;
  background:var(--brand);color:#fff;text-align:center;margin-left:.15rem;
}
.s-top-lbl{white-space:nowrap}

@media (max-width:1040px){
  /* The words go before the icons do: a cart is understood from its picture,
     and the strip runs out of room long before the page does. Sign in and
     Sign up keep their words — an unlabelled key icon means nothing. */
  .s-top-i:not(.s-top-login):not(.s-top-btn) .s-top-lbl{display:none}
}

/* =====================================================================
   The newer bands

   Six of them, all editable from Website -> Home page like everything
   else. They share the page's existing type scale, spacing and colours
   deliberately: a band that arrives with its own idea of a heading is a
   band that makes the site look like two sites.
   ===================================================================== */

/* ------------------------------------------------- how it works, in steps */
.s-steps-list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.s-process:not(.is-timeline) .s-steps-list{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.s-steps-list > li{display:flex;gap:.9rem;align-items:flex-start;position:relative}
.s-step-n{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-weight:800;font-size:1rem;line-height:1;
}
.s-steps-list h3{margin:.35rem 0 .3rem;font-size:1.03rem}
.s-step-i{font-style:normal;margin-right:.15rem}
.s-steps-list p{margin:0;color:var(--text-2);font-size:.92rem;line-height:1.7}

/* Down the page, with a line joining the numbers. The line is drawn on the
   list item rather than between them, so the last step does not trail one. */
.s-process.is-timeline .s-steps-list{max-width:760px;margin:0 auto;gap:0}
.s-process.is-timeline .s-steps-list > li{padding-bottom:1.8rem}
.s-process.is-timeline .s-steps-list > li:last-child{padding-bottom:0}
.s-process.is-timeline .s-steps-list > li::before{
  content:'';position:absolute;left:18px;top:38px;bottom:0;width:2px;background:var(--line);
}
.s-process.is-timeline .s-steps-list > li:last-child::before{display:none}
.s-sec-cta{text-align:center;margin-top:1.8rem}

/* ------------------------------------------------------ pricing cards */
.s-price-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:1.6rem 1.4rem;display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(15,23,42,.05);
}
.s-price-card.featured{border-color:var(--brand);box-shadow:0 10px 30px rgba(15,23,42,.1)}
.s-price-card h3{margin:0 0 .5rem;font-size:1.06rem}
.s-price{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;color:var(--brand);line-height:1.1}
.s-price-unit{color:var(--muted);font-size:.84rem;margin-top:.2rem}
.s-price-card .s-ticks{grid-template-columns:1fr;margin:1.1rem 0 1.3rem;flex:1}
.s-ribbon{
  position:absolute;top:-.7rem;right:1.1rem;background:var(--accent,#f59e0b);color:#111;
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.25rem .7rem;border-radius:999px;
}
.s-fineprint{text-align:center;color:var(--muted);font-size:.83rem;margin:1.4rem 0 0}

/* -------------------------------------------------------- trust strip */
.s-trust.tint{background:var(--surface-2)}
.s-trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem}
.s-trust-i{display:flex;gap:.8rem;align-items:flex-start}
.s-trust-ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-light);font-size:1.2rem;line-height:1;
}
.s-trust-i strong{display:block;font-size:.98rem;line-height:1.35}
.s-trust-i small{color:var(--muted);font-size:.84rem;line-height:1.6;display:block;margin-top:.15rem}

/* ------------------------------------------------------- booking band */
.s-booking.dark{background:var(--sidebar);color:#dbe4f0}
.s-booking.dark h2,.s-booking.dark .s-rich{color:#fff}
.s-booking.dark .s-ticks li{color:rgba(255,255,255,.86)}
.s-booking-in{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
.s-booking.flip .s-booking-say{order:2}
.s-booking .s-ticks{grid-template-columns:1fr}
.s-booking-img{width:100%;border-radius:14px;margin-top:1.2rem;display:block}
.s-booking-form{
  background:var(--surface);border-radius:16px;padding:1.5rem;color:var(--text);
  box-shadow:0 18px 45px rgba(15,23,42,.16);
}
@media (max-width:900px){
  .s-booking-in{grid-template-columns:1fr;gap:1.6rem}
  .s-booking.flip .s-booking-say{order:0}
}

/* --------------------------------------------------- comparison table */
/* Its own scroller: a table with five columns is wider than a phone, and a
   page that scrolls sideways because of one table is a broken page. */
.s-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.s-compare-t{width:100%;border-collapse:collapse;min-width:520px;font-size:.93rem}
.s-compare-t th,.s-compare-t td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--line)}
.s-compare-t thead th{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--line);
}
.s-compare-t tbody th{text-align:left;font-weight:600;color:var(--text)}
.s-compare-t tbody tr:nth-child(odd){background:var(--surface-2)}
.s-yes{color:var(--ok,#16a34a);font-style:normal;font-weight:800;font-size:1.1rem}
.s-no{color:var(--muted);font-style:normal}

/* ---------------------------------------------------------- highlight */
.s-highlight-in{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.s-highlight.flip .s-highlight-say{order:2}
.s-highlight .s-ticks{grid-template-columns:1fr;margin-bottom:1.2rem}
.s-highlight-pic img{width:100%;border-radius:18px;display:block;box-shadow:0 18px 45px rgba(15,23,42,.14)}
.s-highlight-blank{
  aspect-ratio:4 / 3;border-radius:18px;background:var(--surface-2);
  display:grid;place-items:center;font-size:2.4rem;color:var(--muted);
}
.s-hl-stats{display:flex;gap:2rem;flex-wrap:wrap;margin:0 0 1.4rem}
.s-hl-stats strong{display:block;font-size:1.7rem;font-weight:800;color:var(--brand);letter-spacing:-.02em}
.s-hl-stats small{color:var(--muted);font-size:.83rem}
@media (max-width:900px){
  .s-highlight-in{grid-template-columns:1fr;gap:1.6rem}
  .s-highlight.flip .s-highlight-say{order:0}
}

/* ---------------------------------------------- the strip, on real screens */
/* A text-only entry in the strip — an address, an opening-hours line — was
   written once at one size and then shown at that size on a 1440px monitor
   and on a 360px phone alike, where it wrapped the row into three. It now
   steps down with the screen and truncates rather than wrapping, so the strip
   stays one line high wherever it is read. */
.s-top-txt{
  max-width:min(46ch, 34vw);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:1100px){
  .s-top{font-size:.79rem}
  .s-top-txt{max-width:min(34ch, 40vw)}
}
@media (max-width:820px){
  .s-top-txt{max-width:min(40ch, 86vw)}
  .s-head-chip-t{display:none}
  .s-head-chip{padding:.42rem .55rem}
}
@media (max-width:560px){
  .s-top{font-size:.75rem}
  .s-top-txt{max-width:88vw}
  .s-acct-menu{
    right:auto;left:50%;transform:translateX(-50%);
    min-width:min(15rem, 92vw);max-width:92vw;
  }
}
/* The header row has no space for it on a phone; the drawer carries it there
   instead, which is where the call and booking buttons already go. */
@media (max-width:900px){
  .s-head-r .s-head-chip{display:none}
}

/* ---------------------------------------------- one invoice, read publicly
   Reached by scanning the QR on a printed invoice. Laid out as the document
   it is rather than as a web page, because the person reading it is holding
   the paper version and comparing the two. */
.s-inv{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;background:var(--card,#fff);
}
.s-inv-head{
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:2px solid var(--ink,#0f172a);
}
.s-inv-head h3{margin:.3rem 0 .2rem;font-size:1.1rem}
.s-inv-head p{margin:0}
.s-inv-who{text-align:right;min-width:12rem}
.s-inv-who strong{display:block;font-size:1.02rem}
.s-inv-t{font-size:.92rem}
.s-inv .s-sum{max-width:20rem;margin-left:auto}

@media (max-width:560px){
  .s-inv-head{flex-direction:column}
  .s-inv-who{text-align:left}
}
@media print{
  .s-top,.s-head,.s-foot,.btn-row,.s-wa,.hcs-chat,.hcs-chat-btn,.hcs-hello{display:none !important}
  .s-inv{border:0;padding:0}
  .s-sec{padding:0}
}

/* ------------------------------------------------- product verification
   The public page is one card in the middle of the screen with one box on
   it, because that is the whole job. The answer below it has to be
   readable at a glance and at arm's length, on a phone, by somebody who is
   already worried. */
.vp-sec{padding:2.4rem 0}
.vp-card{
  max-width:560px;margin:0 auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:2rem 1.6rem;box-shadow:var(--shadow);
}
.vp-ico{font-size:2.6rem;line-height:1}
.vp-card h1{font-size:1.5rem;margin:.5rem 0 .5rem}
.vp-form{display:flex;gap:.5rem;margin:1.2rem 0 .4rem;flex-wrap:wrap}
.vp-input{
  flex:1;min-width:200px;padding:.75rem .9rem;border:1px solid var(--line);
  border-radius:12px;font:inherit;font-size:1.02rem;letter-spacing:.06em;
  text-align:center;text-transform:uppercase;background:var(--surface);color:var(--text);
}
.vp-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)}
.vp-result{
  display:flex;gap:.9rem;align-items:flex-start;text-align:left;
  margin:1.2rem 0 .4rem;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line);
}
.vp-result.ok{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.07)}
.vp-result.bad{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.06)}
.vp-mark{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:1.3rem;font-weight:800;color:#fff;background:var(--muted);
}
.vp-result.ok .vp-mark{background:var(--ok)}
.vp-result.bad .vp-mark{background:var(--danger)}
.vp-result strong{display:block;font-size:1.05rem}
.vp-name{font-size:.95rem;font-weight:600;margin-top:.15rem}
.vp-lines{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;margin:.6rem 0 0;font-size:.85rem}
.vp-lines dt{color:var(--muted)}
.vp-lines dd{margin:0;font-weight:600}
.vp-q{margin-top:.6rem;font-size:.78rem;color:var(--muted)}
.vp-q code{overflow-wrap:anywhere}
.vp-help{font-size:.8rem;color:var(--muted);margin:1.2rem 0 1rem;line-height:1.7}
@media (max-width:520px){
  .vp-card{padding:1.5rem 1.1rem}
  .vp-lines{grid-template-columns:1fr}
  .vp-lines dt{margin-top:.35rem}
}