/* ============================================================================
 *  base.css — shadcn/ui design system (light, professional)
 *  Colour tokens are injected by theme.js as "R G B" triplets so we can do
 *  rgb(var(--token) / <alpha>). Defaults below keep the page sane pre-theme.
 * ========================================================================== */

:root{
  --background:255 255 255;
  --foreground:9 9 11;
  --card:255 255 255;
  --card-foreground:9 9 11;
  --card-opacity:1;
  --card-border:228 228 231;        /* card outline colour (Theme Builder) */
  --card-border-w:1px;              /* 0px when Card Border toggle is off  */
  --muted:244 244 245;
  --muted-foreground:113 113 122;
  --accent:245 245 246;
  --accent-foreground:24 24 27;
  --border:228 228 231;
  --input:228 228 231;
  --ring:24 24 27;
  --primary:24 24 27;
  --primary-hover:39 39 42;
  --primary-foreground:250 250 250;
  --radius:0.65rem;
  --btn-radius:0.65rem;             /* button corner (Theme Builder)       */
  --btn-border-w:0px;               /* 1px when Button Border toggle is on */
  --modal-radius:0.9rem;
  --modal-border-w:1px;

  /* Header bar — driven by Theme Builder header_color (theme.js), else
     falls back to the page background for the clean shadcn look. */
  --header-bg:255 255 255;
  --header-fg:9 9 11;
  --header-border:228 228 231;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Apple Color Emoji", sans-serif;
  --container: 1180px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --shadow: 0 1px 3px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .12);
  --shadow-lg: 0 10px 40px -12px rgb(0 0 0 / .18);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:rgb(var(--background));
  color:rgb(var(--foreground));
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
:focus-visible{ outline:2px solid rgb(var(--ring)); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4{ line-height:1.18; font-weight:680; letter-spacing:-0.02em; color:rgb(var(--foreground)); }
h1{ font-size:clamp(2rem,5vw,3.4rem); }
h2{ font-size:clamp(1.6rem,3.5vw,2.4rem); }
h3{ font-size:1.2rem; }
p{ color:rgb(var(--foreground)); }
.muted{ color:rgb(var(--muted-foreground)); }

/* ---- layout ---------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.section{ padding-block:clamp(3.5rem,7vw,6rem); }
.section--tint{ background:rgb(var(--muted)); }
.section__head{ max-width:640px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.section__eyebrow{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:rgb(var(--primary)); margin-bottom:.6rem;
}
.section__sub{ margin-top:.7rem; color:rgb(var(--muted-foreground)); font-size:1.02rem; }
.grid{ display:grid; gap:1.25rem; }
@media(min-width:640px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:768px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }

/* ---- primitives (shadcn) -------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.65rem; padding-inline:1.25rem;
  /* Corner radius from the Theme Builder Button Border Radius control. */
  border-radius:var(--btn-radius);
  font-size:.93rem; font-weight:550; white-space:nowrap;
  border:var(--btn-border-w) solid transparent;
  transition:background .15s, color .15s, box-shadow .15s, transform .04s;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:rgb(var(--primary)); color:rgb(var(--primary-foreground)); box-shadow:var(--shadow-sm);
  /* Theme Builder "Button Border" toggle — outline in a darker primary. */
  border-color:rgb(var(--primary-hover)); }
.btn--outline{ border:1px solid rgb(var(--border)); background:rgb(var(--card)); }
.btn--outline:hover{ background:rgb(var(--muted)); }
.btn--ghost:hover{ background:rgb(var(--muted)); }
.btn--lg{ height:3rem; padding-inline:1.6rem; font-size:1rem; }

.card{
  /* Card background, border colour, border on/off and radius all come
     from the Theme Builder (theme.js sets the tokens). */
  background:rgb(var(--card) / var(--card-opacity));
  color:rgb(var(--card-foreground));
  border:var(--card-border-w) solid rgb(var(--card-border));
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.card--hover{ transition:box-shadow .18s, transform .18s, border-color .18s; }
.card--hover:hover{ box-shadow:var(--shadow); transform:translateY(-3px);
  border-color:rgb(var(--primary)/.35); }

.badge{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600;
  padding:.28rem .6rem; border-radius:999px; background:rgb(var(--accent));
  color:rgb(var(--accent-foreground)); border:1px solid rgb(var(--border));
}
.badge--primary{ background:rgb(var(--primary)); color:rgb(var(--primary-foreground)); border-color:transparent; }

.chip{
  display:inline-flex; align-items:center; height:2.2rem; padding-inline:1rem;
  border-radius:999px; font-size:.88rem; font-weight:500; border:1px solid rgb(var(--border));
  background:rgb(var(--card)); color:rgb(var(--muted-foreground)); transition:all .15s;
}
.chip[aria-selected="true"], .chip:hover{
  background:rgb(var(--primary)); color:rgb(var(--primary-foreground)); border-color:transparent;
}

/* ---- boot loader & fatal error -------------------------------------- */
.skip-link{ position:absolute; left:-999px; }
.skip-link:focus{ left:1rem; top:1rem; z-index:200; background:rgb(var(--card));
  padding:.6rem 1rem; border-radius:8px; box-shadow:var(--shadow); }

.boot{ position:fixed; inset:0; display:grid; place-content:center; gap:1rem;
  background:rgb(var(--background)); z-index:100; justify-items:center; }
.boot__spinner{ width:38px; height:38px; border-radius:50%;
  border:3px solid rgb(var(--border)); border-top-color:rgb(var(--primary));
  animation:spin .8s linear infinite; }
.boot__text{ color:rgb(var(--muted-foreground)); font-size:.9rem; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* Once the site is built, the loader fully leaves the page (fade then
   removed). `visibility:hidden` + `pointer-events:none` guarantee it can
   never sit on top of the content even mid-transition. */
body.ready .boot{ opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s, visibility 0s linear .35s; }

.fatal{ position:fixed; inset:0; display:grid; place-content:center;
  background:rgb(var(--background)); z-index:110; padding:1.5rem; }
/* CRITICAL: the `hidden` attribute must win over `.fatal{display:grid}`.
   Without this, the error panel paints on top of a perfectly-loaded site
   (the "Something went wrong over a working page" bug). */
.fatal[hidden]{ display:none !important; }
.boot[hidden]{ display:none !important; }
.fatal__box{ max-width:420px; text-align:center; }
.fatal__title{ font-size:1.5rem; margin-bottom:.5rem; }
.fatal__msg{ color:rgb(var(--muted-foreground)); margin-bottom:1.5rem; }

/* ---- reveal-on-scroll ----------------------------------------------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s, transform .6s; }
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================================
 *  UI/UX UPGRADE LAYER  —  premium polish, desktop + mobile optimised
 * ========================================================================== */

/* Tighter, more confident typography */
h1{ letter-spacing:-.035em; }
h2{ letter-spacing:-.03em; }
body{ letter-spacing:-.005em; }

/* Roomier wide screens, denser phones (mobile-first comfort) */
@media(min-width:1280px){ :root{ --container:1240px; } }
@media(max-width:520px){
  h1{ font-size:clamp(1.8rem,8vw,2.4rem); }
  .section{ padding-block:3rem; }
  .section__head{ margin-bottom:1.75rem; }
  .btn,.btn--lg{ width:100%; }                 /* full-width tap targets */
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
}

/* ---- Mobile hero comfort -------------------------------------------
   The hero packs eyebrow + heading + sub + actions + meta chips; on a
   phone these need a clear vertical rhythm so nothing feels cramped. */
@media(max-width:767px){
  .hero__inner{ padding-block:1.5rem; }
  .hero__eyebrow{ margin-bottom:.85rem; }
  .hero__sub{ margin-top:.85rem; }
  .hero__actions{ margin-top:1.5rem; gap:.65rem; }
  .hero__meta{ margin-top:1.35rem; gap:.5rem; }
}

/* ---- Mobile zoom / overflow safeguards ------------------------------
   1. A text field below 16px makes iOS Safari auto-zoom on focus — the
      classic "page zooms in when I tap search" glitch. Force >=16px on
      every typeable control (buttons are excluded — they never zoom).
   2. Hard-stop horizontal scrolling so a stray wide element can never
      make the whole page pinch-zoom out to fit.
   3. Long words / URLs wrap instead of forcing the layout wider. */
input, select, textarea,
input[type="search"], input[type="text"], input[type="email"]{
  font-size:max(16px, 1em);
}
html, body{ max-width:100%; overflow-x:hidden; }
body{ overflow-wrap:break-word; }
img, iframe, video{ max-width:100%; }

/* Larger touch targets + no accidental text-select on controls (mobile) */
@media(hover:none){
  .btn,.chip,.nav-toggle,.hero__dots button{ -webkit-tap-highlight-color:transparent; }
  .chip{ height:2.4rem; }
  .nav a{ padding:.7rem .9rem; }
}

/* Premium card & button feel.
   The radius bump is ONLY for legacy/fallback tenants; when the Theme
   Builder is active its card_border_radius is honoured exactly as set. */
:root[data-themed="fallback"] .card{ border-radius:calc(var(--radius) + .15rem); }
.card--hover{ will-change:transform; }
.card--hover:hover{ box-shadow:var(--shadow-lg);
  border-color:rgb(var(--primary) / .4); }
.btn--primary{ box-shadow:0 1px 2px rgb(0 0 0 / .08),
  0 6px 16px -8px rgb(var(--primary) / .55); }
.btn--primary:hover{ box-shadow:0 2px 4px rgb(0 0 0 / .1),
  0 10px 22px -8px rgb(var(--primary) / .6); transform:translateY(-1px); }

/* Hero: stronger cinematic depth + subtle zoom on the active media */
.hero__scrim{ background:
  linear-gradient(180deg, rgb(0 0 0 / .25) 0%, rgb(0 0 0 / .35) 45%,
                          rgb(0 0 0 / .68) 100%); }
.hero__slide.is-active .hero__bg{ animation:heroZoom 14s ease-out both; }
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero__inner h1{ text-shadow:0 2px 24px rgb(0 0 0 / .25); }

/* Section heads: refined eyebrow with leading rule */
.section__eyebrow{ position:relative; }
.section__head h2{ margin-top:.1rem; }
.section__sub{ max-width:46ch; margin-inline:auto; }

/* Hairline dividers between alternating bands for rhythm */
.section + .section:not(.section--tint){
  border-top:1px solid rgb(var(--border) / .6); }

/* Price emphasis + clean focus rings on inputs */
.search input:focus-visible{ outline:none; border-color:rgb(var(--primary));
  box-shadow:0 0 0 3px rgb(var(--primary) / .15); }

/* Smooth, GPU-friendly entrances for grids */
.grid.in > *{ animation:rise .55s cubic-bezier(.22,1,.36,1) both; }
.grid.in > *:nth-child(2){ animation-delay:.05s; }
.grid.in > *:nth-child(3){ animation-delay:.1s; }
.grid.in > *:nth-child(4){ animation-delay:.15s; }
.grid.in > *:nth-child(n+5){ animation-delay:.2s; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){
  .grid.in > *, .hero__slide.is-active .hero__bg{ animation:none!important; }
}

/* Print: clean, no fixed overlays */
@media print{
  .site-header,.sticky-order,.cta-band,.hero__dots{ display:none!important; }
  .reveal{ opacity:1!important; transform:none!important; }
}

/* ============================================================================
 *  NEXT-LEVEL POLISH  —  the finishing layer
 * ========================================================================== */

/* Crisper, more premium type rhythm */
:root{ --shadow-lg:0 24px 60px -20px rgb(0 0 0 / .22),
                    0 8px 20px -12px rgb(0 0 0 / .14); }
h1{ line-height:1.08; font-weight:760; }
h2{ font-weight:720; }
.section__sub{ font-size:1.05rem; line-height:1.7; }

/* Eyebrow gets a refined leading accent line */
.section__head .section__eyebrow::before{
  content:""; display:inline-block; width:1.4rem; height:2px; vertical-align:middle;
  margin-right:.55rem; background:rgb(var(--primary)); border-radius:2px;
  opacity:.7; }

/* Header: true glass + crisp hairline + tighter scale on scroll.
   Colour comes from the --header-* tokens (Theme Builder); see the
   .site-header rules in sections.css for the scrolled-state background. */
.site-header{ transition:background .3s, box-shadow .3s, height .3s; }
.brand{ transition:opacity .2s; }
.brand:hover{ opacity:.75; }

/* Hero: refined eyebrow pill, balanced text, gradient CTA sheen */
.hero__eyebrow{ font-weight:650; backdrop-filter:blur(6px); }
.hero__inner h1{ text-wrap:balance; }
.hero__sub{ text-wrap:pretty; opacity:.95; }
.hero--media .hero__sub{ color:rgb(255 255 255 / .9); }
.btn--primary{ position:relative; overflow:hidden; }
.btn--primary::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 40%,rgb(255 255 255 / .18) 50%,transparent 60%);
  transform:translateX(-120%); transition:transform .6s; }
.btn--primary:hover::after{ transform:translateX(120%); }

/* Cards: layered depth, smoother lift, image zoom on hover */
.pcard{ transition:box-shadow .25s, transform .25s, border-color .25s; }
.pcard .pcard__img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.pcard.card--hover:hover .pcard__img{ transform:scale(1.05); }
.pcard__name{ letter-spacing:-.01em; }
.item{ transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .22s ease, border-color .22s ease; }
.item:hover{ background:rgb(var(--accent) / .5);
  border-color:rgb(var(--primary) / .3); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.badge--primary{ box-shadow:0 4px 12px -4px rgb(var(--primary) / .5); }

/* Section tint gets a faint brand wash instead of flat grey */
.section--tint{ background:
  linear-gradient(180deg, rgb(var(--accent)), rgb(var(--muted) / .6)); }

/* Chips/tabs: scroller fade + arrows handled in sections.css (.cat-nav).
   No mask here — it would clip the pills' shadow/lift. */
.cat-tabs{ -webkit-overflow-scrolling:touch; }
.chip{ transition:background .15s, color .15s, border-color .15s, transform .1s; }
.chip:active{ transform:scale(.97); }
.cat-tabs .chip:active{ transform:translateY(0) scale(.97); }

/* Smoother, classier scroll reveal */
.reveal{ transform:translateY(22px); }
.reveal.in{ transition:opacity .7s cubic-bezier(.22,1,.36,1),
                       transform .7s cubic-bezier(.22,1,.36,1); }

/* Selection + scrollbar branded */
::selection{ background:rgb(var(--primary) / .15); }
@media(min-width:900px){
  *{ scrollbar-width:thin;
     scrollbar-color:rgb(var(--border)) transparent; }
}

/* Tap feedback + comfortable mobile spacing */
@media(max-width:640px){
  .container{ padding-inline:1.1rem; }
  .grid{ gap:1rem; }
  .section__head{ text-align:center; }
  .hero__slide{ min-height:clamp(440px,76vh,640px); }
}

@media(prefers-reduced-motion:reduce){
  .btn--primary::after,.pcard__img{ transition:none!important; }
}