/* ============================================
   1. TOKENS
   ============================================ */
:root{--color-bg:#ffffff;--color-bg-alt:#f6f5f2;--color-surface-raised:#ffffff;--color-text:#1c1b19;--color-text-muted:#55524c;--color-border:#e3e0da;--color-border-strong:#bdb8ae;--color-field-border:#7d786f;--color-primary:#87c03e;--color-secondary:#48158f;--color-on-primary:#111111;--color-link:#567b28;--footer-bg:#1c1b19;--footer-fg:#f6f5f2;--footer-muted:#b3aea5;--footer-border:#3d3a36;--shadow-raised:0 10px 30px rgba(0,0,0,.14);}@media (prefers-color-scheme:dark){:root{--color-bg:#121212;--color-bg-alt:#1d1d1c;--color-surface-raised:#262624;--color-text:#f2f0ec;--color-text-muted:#b9b5ad;--color-border:#33312e;--color-border-strong:#55524c;--color-field-border:#7a766e;--color-primary:#87c03e;--color-secondary:#48158f;--color-on-primary:#111111;--color-link:#87c03e;--footer-bg:#0a0a0a;--footer-fg:#e8e5df;--footer-muted:#a3a3a3;--footer-border:#333333;--shadow-raised:0 10px 30px rgba(0,0,0,.5);}}
:root{--font-body:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,"Noto Sans Thai",sans-serif;--radius:10px;--container:72rem;--header-height:4rem;
--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;
--text-sm:0.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.563rem;--text-2xl:1.953rem;--text-display:2.441rem;--leading-body:1.5;--leading-heading:1.2;--measure:65ch;}
/* The focus ring and the portal widgets' names follow the colours above (on a dark copy too). */
:root,.theme-dark{--color-focus:var(--color-text);--accent:var(--color-primary);--accent-ink:var(--color-on-primary);--violet:var(--color-primary);--surface:var(--color-bg);--surface-2:var(--color-bg-alt);--bg:var(--color-bg);--text:var(--color-text);--text-muted:var(--color-text-muted);--text-soft:var(--color-text-muted);--line:var(--color-border);--line-strong:var(--color-border-strong);--font:var(--font-body);--sans:var(--font-body);--vcm-accent:var(--color-primary);--vcm-ink:var(--color-on-primary);}
.theme-dark{--color-bg:#121212;--color-bg-alt:#1d1d1c;--color-surface-raised:#262624;--color-text:#f2f0ec;--color-text-muted:#b9b5ad;--color-border:#33312e;--color-border-strong:#55524c;--color-field-border:#7a766e;--color-primary:#87c03e;--color-secondary:#48158f;--color-on-primary:#111111;--color-link:#87c03e;--footer-bg:#0a0a0a;--footer-fg:#e8e5df;--footer-muted:#a3a3a3;--footer-border:#333333;--shadow-raised:0 10px 30px rgba(0,0,0,.5);background:var(--color-bg);color:var(--color-text)}

/* ============================================
   2. RESET / BASE
   ============================================ */
*,*::before,*::after{box-sizing:border-box}
:root{color-scheme:light dark}
html{-webkit-text-size-adjust:100%}
html.has-sticky{scroll-padding-top:calc(var(--header-height) + var(--space-4))}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body)}
:lang(th){line-height:1.7}
:is(img,video){max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 var(--space-3);line-height:var(--leading-heading);text-wrap:balance}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-lg)}
h4{font-size:var(--text-base)}
p,ul,ol{margin:0 0 var(--space-4)}
p,li,dd,blockquote{max-width:var(--measure)}
a{color:var(--color-link)}
/* One focus ring for everything, in the text colour: never removed without a replacement. */
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .btn,.nav-toggle,.cards li{border:1px solid CanvasText}
}
button,input,select,textarea{font:inherit}
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{padding:0}
/* hidden always wins, and the call and chat buttons wait for the widget to show them (website-build-standards §9). */
[hidden]{display:none!important}
[data-voice-call][hidden], [data-voice-chat][hidden] { display: none !important; }

/* ============================================
   3. LAYOUT
   ============================================ */
.wrap{width:min(100% - 2 * var(--space-4),var(--container));margin-inline:auto}
main section{padding-block:var(--space-7)}
main section:nth-of-type(even){background:var(--color-bg-alt)}

/* ============================================
   4. COMPONENTS
   ============================================ */
.site-head{position:relative;border-bottom:1px solid var(--color-border);background:var(--color-bg);z-index:10}
.site-head .wrap{display:flex;align-items:center;gap:var(--space-2) var(--space-4);min-height:var(--header-height);flex-wrap:wrap}
.brand{font-weight:700;font-size:var(--text-lg);color:var(--color-text);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2);margin-inline-end:auto}
.brand-logo{display:block;max-inline-size:40vw;object-fit:contain}
.site-head.is-sticky{position:sticky;top:0}
.site-head.is-accent{background:var(--color-primary);border-color:transparent;color:var(--color-on-primary);--color-focus:var(--color-on-primary)}
.site-head.is-dark{background:var(--footer-bg);border-color:transparent;color:var(--footer-fg);--color-focus:var(--footer-fg)}
.site-head.is-accent .brand,.site-head.is-accent .nav a{color:var(--color-on-primary)}
.site-head.is-dark .brand,.site-head.is-dark .nav a{color:var(--footer-fg)}
.site-head.is-accent .nav a[aria-current=page],.site-head.is-dark .nav a[aria-current=page]{text-decoration:underline;text-underline-offset:.3em}
.site-head.is-accent .nav-toggle,.site-head.is-dark .nav-toggle{background:transparent;color:inherit;border-color:currentColor}
.site-head.is-accent .nav-cta .btn{background:var(--color-on-primary);color:var(--color-primary)}
.nav-cta .btn{min-height:44px;padding:var(--space-2) var(--space-4)}
.nav-toggle{display:none;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg-alt);color:var(--color-text);font:inherit}
.js .nav-toggle{display:inline-flex;align-items:center}
.nav ul{list-style:none;margin:0;padding:var(--space-2) 0;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4)}
.nav a{display:inline-block;padding:var(--space-2) 0;color:var(--color-text);text-decoration:none;min-height:44px}
.nav a[aria-current=page]{color:var(--color-link);font-weight:700}
/* A floating panel: a raised surface, a border all round and a shadow, together. */
.float,.js .nav{background:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-radius:var(--radius);box-shadow:var(--shadow-raised)}
/* Below the breakpoint the open menu is a panel under the header: the whole row
   on a phone, capped and at the end from 30rem, scrolling inside itself. */
.js .nav{display:none;position:absolute;top:100%;inset-inline:var(--space-2);z-index:20;max-height:calc(100dvh - var(--header-height) - var(--space-4));overflow-y:auto;padding:var(--space-1) var(--space-4);--color-focus:var(--color-text)}
.js .nav.nav--open{display:block}
.js .nav ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0}
.js .site-head .nav a,.js .site-head.is-accent .nav a,.js .site-head.is-dark .nav a{display:block;color:var(--color-text)}
.js .site-head .nav a[aria-current=page]{color:var(--color-text);text-decoration:underline;text-underline-offset:.3em}
.langs{display:flex;gap:var(--space-3);font-size:var(--text-sm)}
.langs a{min-height:44px;display:inline-flex;align-items:center}
.site-head.is-accent .langs a,.site-head.is-dark .langs a{color:inherit}
.muted{color:var(--color-text-muted)}
.hero .wrap{display:grid;gap:var(--space-5);align-items:center}
.hero h1{font-size:var(--text-display)}
.hero :is(img,video){border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.hero.is-bg{position:relative;isolation:isolate;overflow:hidden;color:var(--footer-fg);--color-link:var(--footer-fg);--color-text-muted:var(--footer-muted);--color-focus:var(--footer-fg);display:grid;align-items:center;min-height:min(80vh,40rem)}
.hero.is-bg .hero-bg{position:absolute;inset:0;z-index:-1}
.hero.is-bg .hero-bg::after{content:"";position:absolute;inset:0;background:var(--footer-bg);opacity:.62}
.hero.is-bg .hero-bg :is(img,video){width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover}
.hero.is-bg .wrap{grid-template-columns:minmax(0,46rem)}      /* beats the wide screen's two columns: more specific */
/* A moving hero picture (MOTIONS, 2026-11-13): CSS only. The tone sets how far and how fast; --mo-r is the reveal's length.
   Drift goes round an ellipse at an even pace (linear): eased between three points it stopped at each (2026-11-15).
   Reduced motion: still, and no pause button. A paused one (site.js, .is-still) holds where it is. */
.has-mo{--mo-d:18s;--mo-s:1.1;--mo-x:3%;--mo-r:1.1s}
.has-mo.tone-calm{--mo-d:30s;--mo-s:1.05;--mo-x:1.5%;--mo-r:1.8s}
.has-mo.tone-lively{--mo-d:9s;--mo-s:1.18;--mo-x:5%;--mo-r:.6s}
.hero-pic{position:relative;overflow:hidden;border-radius:var(--radius)}
.hero-pic :is(img,video){display:block;border-radius:0}
.has-mo .hero-pic :is(img,video),.has-mo .hero-bg :is(img,video){transform-origin:50% 50%;backface-visibility:hidden;will-change:transform}
.mo-zoom :is(.hero-pic,.hero-bg) :is(img,video){animation:mo-zoom var(--mo-d) ease-in-out infinite alternate}
.mo-pan :is(.hero-pic,.hero-bg) :is(img,video){animation:mo-pan var(--mo-d) ease-in-out infinite alternate}
.mo-drift :is(.hero-pic,.hero-bg) :is(img,video){animation:mo-drift calc(var(--mo-d) * 1.5) linear infinite}
.mo-reveal :is(.hero-pic,.hero-bg) :is(img,video){animation:mo-reveal var(--mo-r) cubic-bezier(.2,.7,.2,1) both}
.mo-reveal .wrap>div:not(.hero-pic){animation:mo-rise var(--mo-r) cubic-bezier(.2,.7,.2,1) both}
.mo-parallax :is(.hero-pic,.hero-bg) :is(img,video){transform:scale(var(--mo-s))}
.mo-glow :is(.hero-pic,.hero-bg)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--color-surface-raised) 45%,transparent) 50%,transparent 70%);background-size:300% 100%;mix-blend-mode:soft-light;animation:mo-glow var(--mo-d) ease-in-out infinite}
.has-mo.is-still :is(.hero-pic,.hero-bg) :is(img,video),.has-mo.is-still :is(.hero-pic,.hero-bg)::before{animation-play-state:paused}
@supports (animation-timeline:view()){
  .mo-parallax :is(.hero-pic,.hero-bg) :is(img,video){animation:mo-parallax linear both;animation-timeline:view()}
}
@keyframes mo-zoom{from{transform:scale(1)}to{transform:scale(var(--mo-s))}}
@keyframes mo-pan{from{transform:scale(var(--mo-s)) translateX(calc(var(--mo-x) * -1))}to{transform:scale(var(--mo-s)) translateX(var(--mo-x))}}
@keyframes mo-drift{0%,100%{transform:scale(var(--mo-s)) translate(calc(var(--mo-x) * 1),0)}12.5%{transform:scale(var(--mo-s)) translate(calc(var(--mo-x) * 0.71),calc(var(--mo-x) * -0.42))}25%{transform:scale(var(--mo-s)) translate(0,calc(var(--mo-x) * -0.6))}37.5%{transform:scale(var(--mo-s)) translate(calc(var(--mo-x) * -0.71),calc(var(--mo-x) * -0.42))}50%{transform:scale(var(--mo-s)) translate(calc(var(--mo-x) * -1),0)}62.5%{transform:scale(var(--mo-s)) translate(calc(var(--mo-x) * -0.71),calc(var(--mo-x) * 0.42))}75%{transform:scale(var(--mo-s)) translate(0,calc(var(--mo-x) * 0.6))}87.5%{transform:scale(var(--mo-s)) translate(calc(var(--mo-x) * 0.71),calc(var(--mo-x) * 0.42))}}
@keyframes mo-reveal{from{opacity:.15;transform:scale(var(--mo-s))}to{opacity:1;transform:scale(1)}}
@keyframes mo-rise{from{opacity:0;transform:translateY(var(--space-5))}to{opacity:1;transform:none}}
@keyframes mo-glow{0%{background-position:100% 0}60%,100%{background-position:0 0}}
@keyframes mo-parallax{from{transform:scale(var(--mo-s)) translateY(calc(var(--mo-x) * -1))}to{transform:scale(var(--mo-s)) translateY(var(--mo-x))}}
.mo-pause{position:absolute;inset-inline-end:var(--space-3);inset-block-end:var(--space-3);z-index:2;display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;border:1px solid var(--color-border-strong);background:var(--color-surface-raised);color:var(--color-text);cursor:pointer}
.mo-ico{width:.875rem;height:.875rem;border-inline:.3rem solid currentColor;box-sizing:border-box}
/* A photo's video (2026-11-13): drawn where the photo is (every :is(img,video) rule covers it), cropped to its box like a photo; on a page with
   one, a pause button of its own in the corner of the screen. */
video{object-fit:cover}
.mo-pause.is-page{position:fixed;inset-inline-start:var(--space-3);inset-block-end:var(--space-3);z-index:40}
.mo-pause[aria-pressed="true"] .mo-ico{width:0;height:0;border-style:solid;border-width:.45rem 0 .45rem .75rem;border-color:transparent transparent transparent currentColor}
@media (prefers-reduced-motion:reduce){
  .has-mo :is(.hero-pic,.hero-bg) :is(img,video),.has-mo :is(.hero-pic,.hero-bg)::before,.mo-reveal .wrap>div{animation:none!important}.mo-glow :is(.hero-pic,.hero-bg)::before,.mo-pause{display:none!important}
}
/* The brand guide (/style/, 2026-11-13). The swatches are SVG, so these are tokens only. */
.brand-guide h2{margin-top:var(--space-7)}
.brand-guide h3{margin-top:var(--space-5)}
.bg-lead{font-size:var(--text-lg)}
.bg-tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.bg-tile{display:grid;place-items:center;min-height:8rem;padding:var(--space-5);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text)}
.bg-tile.is-dark{background:var(--footer-bg);color:var(--footer-fg);border-color:var(--footer-border)}
.bg-tile.is-main{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary)}
.bg-tile :is(img,video){max-height:5rem;width:auto;max-width:100%;height:auto}
.bg-word{font-size:var(--text-xl);font-weight:700;text-align:center}
.bg-cap{font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-2) 0 0}
.bg-icon{display:flex;align-items:center;gap:var(--space-4)}
.bg-icon :is(img,video){border-radius:var(--radius);border:1px solid var(--color-border)}
.bg-colors-wrap{overflow-x:auto}
.bg-colors{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.bg-colors th,.bg-colors td{text-align:start;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:middle}
.bg-sw{display:block}
.bg-stack{overflow-wrap:anywhere}
.bg-type{display:grid;gap:var(--space-4)}
.bg-type p{margin:0}
.bg-t-display{font-size:var(--text-display);font-weight:700;line-height:var(--leading-heading)}
.bg-t-2xl{font-size:var(--text-2xl);font-weight:700;line-height:var(--leading-heading)}
.bg-t-xl{font-size:var(--text-xl);font-weight:700;line-height:var(--leading-heading)}
.bg-t-sm{font-size:var(--text-sm)}
.bg-share{margin-top:var(--space-7)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--space-3) var(--space-5);border-radius:var(--radius);background:var(--color-primary);color:var(--color-on-primary);text-decoration:none;border:2px solid var(--color-primary);font:inherit;font-weight:700;cursor:pointer}
.btn-2{background:transparent;color:var(--color-link);border-color:var(--color-link)}
.reach{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.cards li{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-5)}
.eyebrow{margin:0 0 var(--space-2);font-size:var(--text-sm);font-weight:700;letter-spacing:.04em;color:var(--color-text-muted)}
.quotes{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.quotes li{border-inline-start:3px solid var(--color-primary);padding-inline-start:var(--space-4)}
.quotes blockquote{margin:0;font-size:var(--text-lg)}
.quotes .who{margin:var(--space-2) 0 0;color:var(--color-text-muted);font-weight:600}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}
.items .price{font-weight:700;white-space:nowrap}
.items p{margin:var(--space-1) 0 0;color:var(--color-text-muted)}
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:var(--space-3)}
.gallery li{max-width:none}
.gallery :is(img,video){border-radius:var(--radius);aspect-ratio:1;object-fit:cover;width:100%}
.steps{margin:0;padding-inline-start:var(--space-5)}
/* An item's photo, tag and button (2026-11-11). The tag is the accent's own pair, so it reads on any theme and any section style.
   Only a photo of the item's own gets .item-pic: a photo a version saved before had by position keeps drawing as it did. */
:is(img,video).item-pic{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%;max-width:24rem;margin-bottom:var(--space-3)}
.cards :is(img,video).item-pic,.carousel :is(img,video).item-pic{max-width:none}
.tag{display:inline-block;margin:0 0 var(--space-2);padding:2px var(--space-2);border-radius:999px;background:var(--color-primary);color:var(--color-on-primary);font-size:var(--text-sm);font-weight:700;line-height:1.4}
.btn-sm{min-height:44px;padding:var(--space-2) var(--space-4)}
.item-act{margin:var(--space-3) 0 0}
.items li .thumb{flex:0 0 6rem}
.items li .thumb :is(img,video).item-pic{aspect-ratio:1;margin:0;max-width:none}
.items li .thumb+div{flex:1;min-width:0}
.quotes .who-row{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2)}
.quotes .who-row p{margin:0}
.quotes :is(img,video).avatar{width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover;flex:none}
/* Section styles: a background, a picture beside the words, columns, a carousel, the words' alignment. The dark and accent
   backgrounds swap the section's own colour tokens for pairs the sign-off already checks (footer on footer, on-primary on primary),
   so every word in them keeps its contrast in both themes. Tinted is a light wash of the main colour, not the grey every second
   section already has, or on those it looked the same as Usual (builder batches checklist, Found 2). */
:root,.theme-dark{--sec-a:var(--color-primary);--sec-ao:var(--color-on-primary)}
main section.sec-plain{background:var(--color-bg)}
main section.sec-tint{background:var(--color-bg-alt);background:color-mix(in srgb,var(--color-primary) 9%,var(--color-bg))}
main section.sec-dark,main section.sec-photo{background:var(--footer-bg);color:var(--footer-fg);--color-bg:var(--footer-bg);--color-bg-alt:var(--footer-bg);--color-text:var(--footer-fg);--color-text-muted:var(--footer-muted);--color-border:var(--footer-border);--color-link:var(--footer-fg);--color-focus:var(--footer-fg);--color-field-border:var(--footer-muted);--color-primary:var(--footer-fg);--color-on-primary:var(--footer-bg)}
main section.sec-accent{background:var(--sec-a);color:var(--sec-ao);--color-bg:var(--sec-a);--color-bg-alt:var(--sec-a);--color-text:var(--sec-ao);--color-text-muted:var(--sec-ao);--color-border:var(--sec-ao);--color-link:var(--sec-ao);--color-focus:var(--sec-ao);--color-field-border:var(--sec-ao);--color-primary:var(--sec-ao);--color-on-primary:var(--sec-a)}
main section.sec-photo{position:relative;isolation:isolate;overflow:hidden}
.sec-bg{position:absolute;inset:0;z-index:-1}
.sec-bg::after{content:"";position:absolute;inset:0;background:var(--footer-bg);opacity:.7}
.sec-bg :is(img,video){width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover}
.al-center{text-align:center}
.al-center p,.al-center .contact-list,.al-center form.enquiry{margin-inline:auto}
.al-center .reach,.al-center .who-row{justify-content:center}
.split{display:grid;gap:var(--space-5);align-items:center}
.split :is(img,video){border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.carousel{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:var(--space-3);scrollbar-width:thin}
.carousel>ul{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(85%,20rem);gap:var(--space-4);margin:0}
.carousel>ul>li{scroll-snap-align:start;min-width:0}
.items.is-grid{display:grid;gap:var(--space-4)}
.items.is-grid li{flex-direction:column;justify-content:flex-start;border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4)}
.items.is-grid li .thumb{flex:none}
.items.is-grid li .thumb :is(img,video).item-pic{aspect-ratio:4/3}
.items.is-grid .price{margin-top:auto}
/* Batch 2 (2026-11-11): products, a menu with groups, pricing plans. Every colour is a token, so each reads in both themes and inside
   the dark / accent / photo sections (which redefine the tokens). Phone first: one column, no tables. */
.products li{display:flex;flex-direction:column}
/* The comparison table (2026-11-12): a real table, scrolled sideways inside its own box on a narrow screen (the page never is), the
   first column the row names. A tick or a cross always has its words for a screen reader. Tokens only. */
.cmp-wrap{overflow-x:auto;margin-top:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg)}
.cmp-wrap:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.compare{width:100%;min-width:28rem;border-collapse:collapse}
.compare th,.compare td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);text-align:center;vertical-align:middle}
.compare tbody tr:last-child>*{border-bottom:0}
.compare thead th{font-weight:700;vertical-align:bottom}
.compare th[scope=row]{text-align:start;font-weight:600}
.compare .cmp-note,.compare .cmp-sub{display:block;font-weight:400;font-size:var(--text-sm);color:var(--color-text-muted)}
.compare .is-hl{background:var(--color-bg-alt)}
.compare thead th.is-hl{box-shadow:inset 0 3px 0 var(--color-primary)}
.cmp-yes,.cmp-no{font-size:var(--text-lg);line-height:1}
.cmp-yes{font-weight:700}
.cmp-no,.cmp-none{color:var(--color-text-muted)}
.products .price{margin:0 0 var(--space-2);font-weight:700;font-size:var(--text-lg)}
.products .item-act{margin-top:auto;padding-top:var(--space-3)}
.opts{margin:var(--space-3) 0 0}
.opts>div{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--color-border)}
.opts dt{font-weight:700}
.opts dd{margin:0}
.choices{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.opts .choices li{display:block;background:none;border:1px solid var(--color-field-border);border-radius:999px;padding:2px var(--space-3);font-size:var(--text-sm)}
.menu .tag,.products .tag,.plan .tag{display:block;width:fit-content}
.ch-price{font-weight:700}
.menu-group+.menu-group{margin-top:var(--space-6)}
.menu-group h3{margin:0 0 var(--space-1)}
.group-note{margin:0 0 var(--space-2);color:var(--color-text-muted)}
.marks{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2)}
.items .marks{color:var(--color-text)}
.marks .mark{display:block;padding:0 var(--space-2);border:1px solid var(--color-field-border);border-radius:var(--radius);font-size:var(--text-sm);font-weight:600;line-height:1.5}
.plans{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.plan{display:flex;flex-direction:column;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-5)}
.plan h3{margin:0 0 var(--space-2)}
.plan.is-hl{border:3px solid var(--color-primary);padding:calc(var(--space-5) - 2px)}
.plan-price{margin:0 0 var(--space-3);color:var(--color-text-muted)}
.plan-price .price{font-size:var(--text-2xl);font-weight:700;color:var(--color-text);line-height:1.2}
.plan-feats{list-style:none;margin:var(--space-3) 0 0;padding:0}
.plan-feats li{display:flex;gap:var(--space-2);padding:var(--space-1) 0}
.plan-feats li::before{content:"\2713";content:"\2713" / "";font-weight:700;flex:none}
.plan .item-act{margin-top:auto;padding-top:var(--space-4)}
/* Batch 3 (2026-11-11): stars, a team, a logo strip, figures, a video, a map, the announcement bar. Tokens only, so each follows both themes
   and the dark / accent / photo sections; the stars use the text colour (never a colour that can fail on a section's ground). */
.stars{margin:0 0 var(--space-2);font-size:var(--text-lg);letter-spacing:.1em;line-height:1}
.team .person{display:block;width:100%;max-width:14rem;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);margin:0 0 var(--space-3)}
.team.is-round .person{border-radius:50%}
.team h3{margin:0}
.team .role{margin:var(--space-1) 0 var(--space-2);color:var(--color-text-muted);font-weight:600}
.team .item-act{margin-top:var(--space-3)}
.logo-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5) var(--space-6)}
.logo-row.cols-2,.logo-row.cols-3,.logo-row.cols-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.logo-row li{display:flex;align-items:center;justify-content:center;min-width:0}
.logo-row a{display:inline-flex;align-items:center;min-height:44px}
.logo-row :is(img,video).logo-pic{width:auto;max-width:9rem;max-height:3.5rem;object-fit:contain;aspect-ratio:auto;border-radius:0;margin:0}
.carousel>.logo-row{display:grid}
.logo-row.is-grey :is(img,video){filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.logo-row.is-grey a:hover :is(img,video),.logo-row.is-grey a:focus-visible :is(img,video),.logo-row.is-grey li:hover :is(img,video){filter:none;opacity:1}
.figures{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));text-align:center}
.figures .fig{display:block;font-size:var(--text-display);font-weight:700;line-height:1.1;color:var(--color-text)}
.figures .flabel{display:block;margin-top:var(--space-1);color:var(--color-text-muted)}
.video-box{position:relative;aspect-ratio:16/9;max-width:56rem;margin:var(--space-4) auto 0;border-radius:var(--radius);overflow:hidden;background:var(--footer-bg)}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.video-play :is(img,video){width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;display:block}
.video-cta{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);padding:var(--space-3) var(--space-5);border-radius:var(--radius);background:var(--footer-bg);color:var(--footer-fg);font-weight:700;border:2px solid var(--footer-fg)}
[dir=rtl] .video-cta{transform:translate(50%,-50%)}
.video-link{margin:var(--space-2) auto 0;max-width:56rem;text-align:end}
.al-center .video-link{text-align:center}
.map-frame{aspect-ratio:16/9;max-height:26rem;width:100%;margin:var(--space-4) 0 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
.map-link{margin:var(--space-3) 0 0}
/* Batch 4 (2026-11-11). The portal preview's stand-in for a map or a video (the real embed can't run in its sandbox), a portfolio with
   no-script filters and before / after pairs, a timetable, downloads. Tokens only, so every one follows both themes. */
.embed-stand{display:flex;align-items:center;gap:var(--space-4);max-width:56rem;margin:var(--space-4) auto 0;padding:var(--space-5);border:2px dashed var(--color-border-strong);border-radius:var(--radius);background:var(--color-bg-alt);color:var(--color-text)}
.stand-mark{flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:999px;background:var(--color-primary);color:var(--color-on-primary);font-size:var(--text-lg)}
.stand-text{min-width:0}
.stand-text strong{display:block;overflow-wrap:anywhere}
.stand-text span{display:block;color:var(--color-text-muted)}
.pf-r{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pf>label{display:inline-flex;align-items:center;min-height:44px;margin:0 var(--space-2) var(--space-3) 0;padding:0 var(--space-4);border:1px solid var(--color-field-border);border-radius:999px;background:var(--color-bg);color:var(--color-text);font-weight:600;cursor:pointer}
.pf-r:checked+label{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.pf-r:focus-visible+label{outline:2px solid var(--color-focus);outline-offset:2px}
.pf-r[data-g="0"]:checked~* li[data-g]:not([data-g="0"]),.pf-r[data-g="1"]:checked~* li[data-g]:not([data-g="1"]),.pf-r[data-g="2"]:checked~* li[data-g]:not([data-g="2"]),.pf-r[data-g="3"]:checked~* li[data-g]:not([data-g="3"]),.pf-r[data-g="4"]:checked~* li[data-g]:not([data-g="4"]),.pf-r[data-g="5"]:checked~* li[data-g]:not([data-g="5"]),.pf-r[data-g="6"]:checked~* li[data-g]:not([data-g="6"]),.pf-r[data-g="7"]:checked~* li[data-g]:not([data-g="7"]){display:none}
.portfolio figure{margin:0}
.portfolio :is(img,video){display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.portfolio h3{margin:var(--space-3) 0 var(--space-1)}
.ba{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.ba figcaption{margin-top:var(--space-1);font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted)}
.tt-block+.tt-block{margin-top:var(--space-6)}
.tt-block h3{margin:0 0 var(--space-2)}
.tt{list-style:none;margin:0;padding:0}
.tt>li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2) var(--space-4);align-items:start;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}
.tt-when{font-weight:700}
.tt-when time,.tt-when .tt-time{display:block}
.tt-what strong{display:block}
.tt-place{display:block;color:var(--color-text-muted);font-size:var(--text-sm)}
.tt-side .price{display:block;font-weight:700}
.tt-side .item-act{margin:var(--space-2) 0 0}
.tt>li.is-past{opacity:.65}
.tt-past{display:inline-block;margin-top:var(--space-1);padding:0 var(--space-2);border:1px dashed var(--color-border-strong);border-radius:999px;font-size:var(--text-sm)}
.timetable [hidden]{display:none!important}
@media (min-width:40rem){.tt>li{grid-template-columns:minmax(6rem,10rem) minmax(0,1fr) auto}.tt-side{text-align:end}}
.files{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.files li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-4);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius)}
.file-badge{flex:none;display:grid;place-items:center;min-width:3.25rem;height:3.25rem;padding:0 var(--space-2);border-radius:var(--radius);background:var(--color-primary);color:var(--color-on-primary);font-size:var(--text-sm);font-weight:700}
.file-what{flex:1 1 12rem;min-width:0}
.file-what strong{display:block;overflow-wrap:anywhere}
.file-meta{margin:0;color:var(--color-text-muted);font-size:var(--text-sm)}
.files .item-act{margin:0}
/* The "Later" batch (2026-11-11): posts and their pages, a product's page, a booking calendar, a countdown, a timeline. Tokens only. */
.posts .post-date{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--color-text-muted)}
.posts h3{margin:var(--space-1) 0 var(--space-2)}
.posts h3 a{color:inherit;text-decoration:none}
.posts h3 a:hover,.posts h3 a:focus-visible,a.more{text-decoration:underline;text-underline-offset:.2em}
a.more{font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.products h3 a{color:inherit;text-decoration:none}
.products h3 a:hover,.products h3 a:focus-visible{text-decoration:underline}
.detail .wrap.narrow{max-width:48rem}
.detail .back{margin:0 0 var(--space-4)}
.detail .back a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.detail h1{margin:0 0 var(--space-2)}
.detail .post-meta{margin:0 0 var(--space-4);color:var(--color-text-muted)}
.detail .post-meta .price{font-weight:700;font-size:var(--text-lg);color:var(--color-text)}
.detail :is(img,video).detail-pic{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:0 0 var(--space-5)}
.detail-body{max-width:var(--measure)}
.detail .opts{margin-top:var(--space-4)}
.book-box{max-width:56rem;margin:var(--space-4) auto 0}
.book-box iframe{display:block;width:100%;min-height:42rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg)}
.book-link{margin:var(--space-3) auto 0;max-width:56rem}
.al-center .book-link{text-align:center}
.countdown .count-box{text-align:center;padding:var(--space-5) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg)}
.countdown .count{margin:0;font-size:var(--text-display);font-weight:700;line-height:1.1}
.countdown .count-live{margin:var(--space-2) 0 0;font-size:var(--text-xl);font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.countdown .count-to{margin:var(--space-3) 0 0;color:var(--color-text-muted)}
.countdown .count-box+.btn{margin-top:var(--space-4)}
.timeline{list-style:none;margin:0;padding:0;position:relative;padding-inline-start:var(--space-6)}
.timeline::before{content:"";position:absolute;inset-block:var(--space-2);inset-inline-start:var(--space-2);width:2px;background:var(--color-border-strong)}
.timeline>li{position:relative;padding:0 0 var(--space-5)}
.timeline>li::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--space-6) + 2px);top:.45rem;width:.9rem;height:.9rem;border-radius:999px;background:var(--color-primary);border:2px solid var(--color-bg)}
.timeline .tl-year{margin:0 0 var(--space-1);font-size:var(--text-xl);color:var(--color-text)}
.timeline .tl-body p{margin:0 0 var(--space-2)}
.timeline .tl-body :is(img,video){display:block;width:100%;max-width:24rem;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);margin:var(--space-2) 0}
.announce{background:var(--color-primary);color:var(--color-on-primary);font-weight:600;text-align:center;--color-focus:var(--color-on-primary)}
.announce p{margin:0;max-width:none;padding:var(--space-2) 0}
.announce a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.faq details{border-bottom:1px solid var(--color-border);padding:var(--space-3) 0}
.faq summary{font-weight:700;cursor:pointer;min-height:44px}
.contact-list{list-style:none;margin:0 0 var(--space-4);padding:0}
.contact-list li{padding:var(--space-2) 0}
form.enquiry{display:grid;gap:var(--space-3);max-width:32rem}
/* Our own fields only (direct children): the mailing widget's tick box brings its own label, on one line. */
form.enquiry>label{display:grid;gap:var(--space-1);font-weight:600}
form.enquiry>label>input,form.enquiry>label>textarea,form.enquiry>label>select{font-size:var(--text-base);padding:var(--space-3);border:1px solid var(--color-field-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text)}
.hp{position:absolute;left:-9999px}
.status{min-height:1.5rem}
.signup{padding-block:var(--space-7);background:var(--color-bg-alt);border-top:1px solid var(--color-border)}
.signup.is-plain{background:var(--color-bg)}
.legal h2{font-size:var(--text-lg);margin-top:var(--space-6)}
.legal dl{display:grid;gap:var(--space-1) var(--space-4);margin:0 0 var(--space-4)}
.legal dt{font-weight:700}
.legal dd{margin:0 0 var(--space-2)}
/* The footer: a dark band in both themes, from its own tokens; the focus ring follows it. */
.site-foot{--color-focus:var(--footer-fg);background:var(--footer-bg);color:var(--footer-fg);border-top:1px solid var(--footer-border);padding-block:var(--space-7) var(--space-5);font-size:var(--text-sm)}
.site-foot a{color:inherit;text-decoration:none}
.site-foot a:hover,.site-foot a:focus-visible{text-decoration:underline}
.site-foot .cols{display:grid;gap:var(--space-5)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{padding:var(--space-1) 0}
.foot-h{margin:0 0 var(--space-2);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--footer-muted)}
.foot-bottom{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--footer-border);font-size:.8125rem;color:var(--footer-muted)}
.foot-bottom p{margin:0;max-width:none}

/* ============================================
   5. UTILITIES
   ============================================ */
.skip-link{position:absolute;left:-999px;top:0;padding:var(--space-3) var(--space-4);background:var(--color-primary);color:var(--color-on-primary);z-index:30}
.skip-link:focus{left:var(--space-4);top:var(--space-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mobile first: min-width queries only. */
@media (min-width:30rem){
  .js .nav{inset-inline-start:auto;inset-inline-end:var(--space-4);width:min(20rem,calc(100% - 2 * var(--space-4)))}
}
@media (min-width:48rem){
  .hero .wrap{grid-template-columns:1.1fr 1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
  .plans{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .site-foot .cols{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
  .legal dl{grid-template-columns:max-content 1fr}
  .hero.img-left .wrap{grid-template-columns:1fr 1.1fr}
  .hero.img-left .wrap>:is(img,video),.hero.img-left .wrap>.hero-pic{order:-1}
  .split{grid-template-columns:1fr 1fr}
  .split.is-left>:is(img,video){order:-1}
  .cards.cols-2,.quotes.cols-2,.gallery.cols-2,.items.cols-2,.cards.cols-3,.quotes.cols-3,.gallery.cols-3,.items.cols-3,
  .cards.cols-4,.quotes.cols-4,.gallery.cols-4,.items.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carousel>ul.cols-2{grid-template-columns:none;grid-auto-columns:calc((100% - var(--space-4)) / 2)}
  .carousel>ul.cols-3{grid-template-columns:none;grid-auto-columns:calc((100% - 2 * var(--space-4)) / 3)}
  .carousel>ul.cols-4{grid-template-columns:none;grid-auto-columns:calc((100% - 2 * var(--space-4)) / 2)}
}
@media (min-width:64rem){
  .cards.cols-3,.quotes.cols-3,.gallery.cols-3,.items.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards.cols-4,.quotes.cols-4,.gallery.cols-4,.items.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .carousel>ul.cols-4{grid-template-columns:none;grid-auto-columns:calc((100% - 3 * var(--space-4)) / 4)}
}
/* The menu bar's breakpoint, from this site's own labels (data-nav-bp on the header says the same to site.js). */
@media (min-width:62rem){
  .js .nav-toggle{display:none}
  .js .nav{display:block;position:static;width:auto;max-height:none;overflow:visible;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .js .nav ul{flex-direction:row;flex-wrap:nowrap;gap:var(--space-1) var(--space-5)}
  .js .site-head .nav a{display:inline-block;color:var(--color-text)}
  .js .site-head .nav a[aria-current=page]{color:var(--color-link);text-decoration:none}
  .js .site-head.is-accent .nav a{color:var(--color-on-primary)}
  .js .site-head.is-dark .nav a{color:var(--footer-fg)}
  .js .site-head.is-accent .nav a[aria-current=page],.js .site-head.is-dark .nav a[aria-current=page]{text-decoration:underline}
}