/* ==========================================================================
   Reservoir Hills Pharmacy — stylesheet
   Design system: see /design-system/MASTER.md
   Style: Flat Design + Accessible & Ethical  |  Type: Lexend + Source Sans 3
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* palette — red + charcoal, taken from the shop logo and cleaned into
     accessible steps. See design-system/MASTER.md before changing these. */
  --red-800:#8E0D16; --red-700:#A80F1C; --red-600:#C1121F; --red-500:#DC2230;
  --red-100:#FBDDE0; --red-50:#FDF3F4;
  --ink-900:#191616; --ink-800:#241F1F; --ink-700:#332C2C; --ink-600:#5A5050;
  --ink-300:#C9BFBF; --ink-200:#E7E0E0; --ink-100:#F2EDED; --ink-50:#FAF7F7;
  --white:#FFFFFF;
  --teal-800:#115E56; --teal-700:#0F766E; --teal-50:#EFFAF8;
  --ok-700:#15803D;  --ok-100:#DCFCE7;   /* semantic only: "open now" */
  --alert-700:#B3261E; --alert-50:#FDF3F3;

  /* semantic — light */
  --bg:var(--white);
  --bg-alt:var(--ink-50);
  --surface:var(--white);
  --surface-2:var(--ink-100);
  --text:var(--ink-700);
  --text-muted:var(--ink-600);
  --heading:var(--ink-800);
  --brand:var(--red-600);
  --brand-hover:var(--red-700);
  --brand-strong:var(--red-800);
  --brand-soft:var(--red-50);
  --on-brand:var(--white);
  --link:var(--red-700);
  --link-hover:var(--red-800);
  --cta:var(--teal-700);
  --cta-hover:var(--teal-800);
  --on-cta:var(--white);
  --accent:var(--ink-800);
  --accent-soft:var(--ink-100);
  --band:var(--ink-900);
  --on-band:#F0EBEB;
  --border:var(--ink-200);
  --border-brand:var(--red-100);
  --focus:#1A56DB;
  --danger:var(--alert-700);
  --danger-soft:var(--alert-50);
  --scrim:rgba(25,22,22,.55);
  --ok:var(--ok-700);
  --ok-soft:var(--ok-100);

  /* scale */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 6px 20px -6px rgba(15,23,42,.16);
  --shadow-lg:0 18px 44px -14px rgba(15,23,42,.22);
  --tap:48px;
  --container:1180px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --section-y:clamp(3.5rem, 8vw, 6rem);
  --t-fast:150ms ease;
  --t-base:220ms ease;

  /* z-scale */
  --z-float:20; --z-nav:40; --z-skip:60;

  color-scheme: light dark;
}

/* dark palette — declared twice so the toggle wins in both directions */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#141010;
    --bg-alt:#1A1515;
    --surface:#1F1919;
    --surface-2:#1A1515;
    --text:#EDE7E6;
    --text-muted:#B7A9A8;
    --heading:#F6F0EF;
    --brand:#FF6B72;
    --brand-hover:#FF9099;
    --brand-strong:#FFC2C6;
    --brand-soft:#3A1417;
    --on-brand:#2B0206;
    --link:#FF8A91;
    --link-hover:#FFB3B8;
    --cta:#5EDDCC;
    --cta-hover:#93EDE1;
    --on-cta:#04231F;
    --accent:#EDE7E6;
    --accent-soft:#2A2222;
    --band:#0D0A0A;
    --on-band:#E8E1E0;
    --border:#3A302F;
    --border-brand:#5A2429;
    --focus:#93B4FF;
    --danger:#FF9B95;
    --danger-soft:#3B1615;
    --scrim:rgba(0,0,0,.66);
    --ok:#5CD98B;
    --ok-soft:#10301D;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 6px 20px -6px rgba(0,0,0,.6);
    --shadow-lg:0 18px 44px -14px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --bg:#141010;
  --bg-alt:#1A1515;
  --surface:#1F1919;
  --surface-2:#1A1515;
  --text:#EDE7E6;
  --text-muted:#B7A9A8;
  --heading:#F6F0EF;
  --brand:#FF6B72;
  --brand-hover:#FF9099;
  --brand-strong:#FFC2C6;
  --brand-soft:#3A1417;
  --on-brand:#2B0206;
  --link:#FF8A91;
  --link-hover:#FFB3B8;
  --cta:#5EDDCC;
  --cta-hover:#93EDE1;
  --on-cta:#04231F;
  --accent:#EDE7E6;
  --accent-soft:#2A2222;
  --band:#0D0A0A;
  --on-band:#E8E1E0;
  --border:#3A302F;
  --border-brand:#5A2429;
  --focus:#93B4FF;
  --danger:#FF9B95;
  --danger-soft:#3B1615;
  --scrim:rgba(0,0,0,.66);
  --ok:#5CD98B;
  --ok-soft:#10301D;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px -6px rgba(0,0,0,.6);
  --shadow-lg:0 18px 44px -14px rgba(0,0,0,.7);
}

/* ---------- 2. Reset + base --------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--bg);
  color:var(--text);
  font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4 {
  font-family:Lexend,"Segoe UI",system-ui,sans-serif;
  color:var(--heading);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1 { font-size:clamp(2.05rem,1.4rem + 3vw,3.4rem); font-weight:700; }
h2 { font-size:clamp(1.6rem,1.2rem + 1.9vw,2.4rem); }
h3 { font-size:clamp(1.13rem,1.05rem + .45vw,1.35rem); }
h4 { font-size:1.05rem; }

p { text-wrap:pretty; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
[hidden] { display:none !important; }
a { color:var(--link); text-underline-offset:3px; }
a:hover { color:var(--link-hover); }
ul,ol { padding-left:1.25rem; }
strong { font-weight:600; color:var(--heading); }
abbr[title] { text-decoration-style:dotted; cursor:help; }

:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm); }
::selection { background:var(--brand-soft); color:var(--brand-strong); }

/* ---------- 3. Layout helpers ------------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:var(--section-y); }
.section--tint { background:var(--bg-alt); }
.section--edge { border-top:1px solid var(--border); }
.measure { max-width:68ch; }
.center { text-align:center; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.section-head { max-width:64ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head.center { text-align:center; margin-inline:auto; }
.section-head p { color:var(--text-muted); font-size:1.075rem; margin-top:.75rem; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:Lexend,system-ui,sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  padding:.4rem .8rem; border-radius:var(--r-full); margin-bottom:1rem;
}
.eyebrow svg { width:15px; height:15px; }

/* Grid items default to min-width:auto, so one wide child (a <select>, a long
   email address, a table) can push a track past the viewport. Let them shrink. */
.grid > *, .split > *, .hero__grid > *, .footer__grid > *, .stats > * { min-width:0; }
a[href^="mailto:"], .info-list a { overflow-wrap:anywhere; }

.grid { display:grid; gap:clamp(1rem,2.2vw,1.5rem); }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr)); }

/* ---------- 4. Skip link ------------------------------------------------ */
.skip-link {
  position:absolute; left:1rem; top:-120px; z-index:var(--z-skip);
  background:var(--brand); color:var(--on-brand);
  padding:.85rem 1.25rem; border-radius:var(--r-md); font-weight:600;
  text-decoration:none; transition:top var(--t-fast);
}
.skip-link:focus { top:1rem; color:var(--on-brand); }

/* ---------- 5. Buttons -------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:var(--tap); padding:.75rem 1.4rem;
  font-family:Lexend,system-ui,sans-serif; font-size:1rem; font-weight:600;
  border:2px solid transparent; border-radius:var(--r-md);
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn svg { width:20px; height:20px; flex:none; }
.btn--primary { background:var(--brand); color:var(--on-brand); }
.btn--primary:hover { background:var(--brand-hover); color:var(--on-brand); box-shadow:var(--shadow-md); }
.btn--cta { background:var(--cta); color:var(--on-cta); }
.btn--cta:hover { background:var(--cta-hover); color:var(--on-cta); box-shadow:var(--shadow-md); }
.btn--outline { background:var(--surface); color:var(--heading); border-color:var(--border); }
.btn--outline:hover { border-color:var(--brand); color:var(--brand); background:var(--surface); }
.btn--onbrand { background:var(--white); color:var(--ink-900); }
.btn--onbrand:hover { background:var(--ink-50); color:var(--ink-900); }
.btn--onbrand-outline { background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn--onbrand-outline:hover { background:rgba(255,255,255,.12); color:var(--white); border-color:var(--white); }
.btn--wide { width:100%; }
.btn--sm { min-height:44px; padding:.55rem 1rem; font-size:.95rem; }
.btn[disabled],.btn[aria-disabled="true"] { opacity:.6; cursor:not-allowed; }
.btn-row { display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-row--center { justify-content:center; }

/* ---------- 6. Header / nav --------------------------------------------- */
.utility-bar { background:var(--band); color:var(--on-band); font-size:.9rem; }
:root[data-theme="dark"] .utility-bar { background:#08170F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .utility-bar { background:#08170F; }
}
.utility-bar__inner {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.35rem 1.25rem; padding-block:.5rem; min-height:40px;
}
.utility-bar a { color:#FFFFFF; text-decoration:none; font-weight:600; }
.utility-bar a:hover { color:#FFFFFF; text-decoration:underline; }
/* On touch-sized screens the utility links are standalone targets, not inline
   links in a sentence, so give them the full 44px. */
@media (max-width: 960px) {
  .utility-bar a { display:inline-flex; align-items:center; min-height:44px; }
}
.utility-bar__list { display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; align-items:center; list-style:none; margin:0; padding:0; }
.utility-bar__item { display:inline-flex; align-items:center; gap:.45rem; }
.utility-bar__item svg { width:16px; height:16px; flex:none; opacity:.85; }

.site-header {
  position:sticky; top:0; z-index:var(--z-nav);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:76px; }

.brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__mark { width:44px; height:44px; flex:none; }
/* The shop logo, cropped tight from the original artwork (Logo.jpg). It already
   contains the full name, so no separate text sits beside it; the alt text
   carries the name for screen readers. */
.brand__logo { display:block; height:54px; width:auto; flex:none; border-radius:var(--r-sm); }
.footer__brand .brand__logo { height:64px; }
@media (max-width: 480px) { .brand__logo { height:48px; } }
.brand__text { display:flex; flex-direction:column; line-height:1.15; }
.brand__name {
  font-family:Lexend,system-ui,sans-serif; font-weight:700;
  font-size:1.05rem; color:var(--heading); letter-spacing:-.02em;
}
.brand__tag { font-size:.74rem; color:var(--text-muted); letter-spacing:.02em; }

/* margin-left:auto pushes the page links right, next to the actions. */
.nav__links { display:flex; align-items:center; gap:.2rem; list-style:none; margin:0 .75rem 0 auto; padding:0; }
.nav__link {
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem .85rem;
  font-family:Lexend,system-ui,sans-serif; font-weight:500; font-size:.98rem;
  color:var(--text); text-decoration:none; border-radius:var(--r-md);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.nav__link:hover { background:var(--brand-soft); color:var(--brand-strong); }
.nav__link[aria-current="page"] { color:var(--brand); font-weight:600; background:var(--brand-soft); }

.nav__actions { display:flex; align-items:center; gap:.5rem; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); flex:none;
  background:transparent; color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-md);
  cursor:pointer; transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background:var(--brand-soft); color:var(--brand-strong); border-color:var(--border-brand); }
.icon-btn svg { width:22px; height:22px; }

.theme-toggle .icon-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display:none; }
}

.nav__call { display:none; }

@media (max-width: 960px) {
  /* On phones and small tablets the page links move to the bottom tab bar. */
  .nav__links, .nav__cta-desktop { display:none; }
  .nav__call { display:inline-flex; }
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(58rem 30rem at 84% -14%, var(--brand-soft) 0%, transparent 62%),
    var(--bg);
  padding-block:clamp(3rem,7vw,5.25rem);
}
/* Every page (<main class="home">): sections alternate between the two logo
   colours. Cards stay white, so they lift off the dark background. */
/* The two logo colours: --home-wash is the logo charcoal (#383733), --home-red
   the brand red of the medical aid band. Sections alternate between them. */
.home { --home-wash:#383733; --home-red:#C1121F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home { --home-wash:#2E2D2B; --home-red:#7A0B14; } }
:root[data-theme="dark"] .home { --home-wash:#2E2D2B; --home-red:#7A0B14; }
.home > .section:not(.logos-band) { background:var(--home-wash); color:#FFFFFF; }
/* Red sections use the same red as the medical aid band at the bottom
   (#C1121F, dark #7A0B14); the others are the logo charcoal. Both are dark, so
   anything sitting directly on them turns white. Cards, panels, forms, tables,
   FAQ items, notes, status pills and photos keep their own light backgrounds and
   normal colours. White on #C1121F is 5.9:1, on #383733 11.9:1. */
.home > .section.section--tint:not(.logos-band) { background:var(--home-red); color:#FFFFFF; }
.home > :is(.hero,.page-head,.section):not(.logos-band) :is(h1,h2,h3,h4,strong,legend):not(:is(.card,.media-panel,.findus,.table-wrap,.stat,.photo,.gallery,form,.faq,.form-note,.hours-card,.status) *) { color:#FFFFFF; }
.home > :is(.hero,.page-head,.section):not(.logos-band) :is(p,li,span.desc):not(:is(.card,.media-panel,.findus,.table-wrap,.stat,.photo,.gallery,form,.faq,.form-note,.hours-card,.status) *):not(.form-note, .status) {
  color:rgba(255,255,255,.92);
  --text-muted:rgba(255,255,255,.92); /* for paragraphs that set color inline via this token */
}
.home > :is(.hero,.page-head,.section):not(.logos-band) a:not(.btn):not(:is(.card,.media-panel,.findus,.table-wrap,.stat,.photo,.gallery,form,.faq,.form-note,.hours-card,.status) *) { color:#FFFFFF; text-decoration:underline; }
/* The white boxes would otherwise inherit the section's white text. */
.home > :is(.hero,.page-head,.section):not(.logos-band) :is(.card,.media-panel,.findus,.table-wrap,.stat,.faq,.hours-card,form) { color:var(--text); }
.home > :is(.hero,.page-head,.section):not(.logos-band) .eyebrow { background:rgba(255,255,255,.16); color:#FFFFFF; }
.home > :is(.hero,.page-head,.section):not(.logos-band) :is(.check-list, .trust-strip) svg:not(.trust-strip__star):not(:is(.card,.media-panel,.findus,.table-wrap,.stat,.photo,.gallery,form,.faq,.hours-card) *) { color:#FFFFFF; }
.home > :is(.hero,.page-head,.section):not(.logos-band) .trust-strip { border-top-color:rgba(255,255,255,.22); }
.home > :is(.hero,.page-head,.section):not(.logos-band) .breadcrumbs li + li::before { color:rgba(255,255,255,.6); }
.home > :is(.hero,.page-head,.section):not(.logos-band) .steps li::before { background:#FFFFFF; color:var(--home-red); }
.home > :is(.hero,.page-head,.section):not(.logos-band) .steps li::after { background:rgba(255,255,255,.4); }
.home > .section--tint .btn--primary:not(:is(.card,.media-panel,.findus,form) *) { background:#FFFFFF; color:var(--home-red); }
.home > .section--tint .btn--primary:not(:is(.card,.media-panel,.findus,form) *):hover { background:#FDE8EA; color:var(--home-red); }
.home > :is(.hero,.page-head,.section):not(.logos-band) :focus-visible:not(:is(.card,.media-panel,.findus,.table-wrap,.stat,form,.faq) *) { outline-color:#FFFFFF; }
.home > .hero { background:var(--home-wash); color:#FFFFFF; }
/* About and Services use the same wash (their <main> also has class="home");
   the page banner takes the hero's treatment. */
.home > .page-head { background:var(--home-wash); color:#FFFFFF; border-bottom-color:transparent; }

.hero__grid { display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:1000px) { .hero__grid { grid-template-columns:1.08fr .92fr; } }
.hero__lede { font-size:clamp(1.05rem,1rem + .35vw,1.19rem); color:var(--text-muted); margin-top:1.15rem; max-width:56ch; }
.hero h1 { margin-top:.35rem; }
.hero .btn-row { margin-top:1.85rem; }

.trust-strip {
  display:flex; flex-wrap:wrap; gap:.65rem 1.35rem;
  margin-top:2.1rem; padding-top:1.6rem; border-top:1px solid var(--border);
  list-style:none; padding-left:0;
}
.trust-strip li { display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:600; color:var(--text-muted); }
.trust-strip svg { width:18px; height:18px; color:var(--cta); flex:none; }

/* hours card */
.hours-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:clamp(1.35rem,3vw,1.8rem);
}
.hours-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.hours-card__title { font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:1.14rem; color:var(--heading); }
.hours-card__sub { font-size:.9rem; color:var(--text-muted); margin-top:.2rem; }

.status {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .75rem; border-radius:var(--r-full);
  font-size:.85rem; font-weight:700; white-space:nowrap;
  border:1px solid transparent;
}
.status svg { width:15px; height:15px; flex:none; }
.status--open { background:var(--ok-soft); color:var(--ok); border-color:var(--ok); }
.status--closed { background:var(--surface-2); color:var(--text-muted); border-color:var(--border); }

/* On narrow screens the "Closed — opens Monday 08:00" pill is wider than the
   space beside the title, so stack it instead of letting it push the card out. */
@media (max-width: 480px) {
  .hours-card__top { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .status { white-space:normal; }
  .brand__tag { display:none; }
}

.hours-list { list-style:none; padding:0; margin:0; }
.hours-list li {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:.6rem; border-bottom:1px dashed var(--border); font-size:.98rem;
}
.hours-list li:last-child { border-bottom:0; }
.hours-list li[data-today="true"] { color:var(--brand-strong); font-weight:700; }
.hours-list .time { font-variant-numeric:tabular-nums; color:var(--text-muted); font-weight:600; }
.hours-list li[data-today="true"] .time { color:var(--brand-strong); }
.hours-card__foot { margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--border); }

/* ---------- 8. Cards ----------------------------------------------------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:clamp(1.25rem,2.4vw,1.6rem);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  height:100%;
}
a.card, .card--link { text-decoration:none; color:inherit; display:block; cursor:pointer; }
.card:hover, a.card:hover { border-color:var(--brand); box-shadow:var(--shadow-md); }
.card h3 { margin-bottom:.5rem; }
.card p { color:var(--text-muted); font-size:.98rem; }

.icon-plate {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--r-md);
  background:var(--brand-soft); color:var(--brand); margin-bottom:1.05rem;
}
.icon-plate svg { width:26px; height:26px; }
.icon-plate--cta { background:var(--teal-50); color:var(--cta); }
:root[data-theme="dark"] .icon-plate--cta { background:#0C2233; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-plate--cta { background:#0C2233; }
}
.icon-plate--accent { background:var(--accent-soft); color:var(--accent); }

.card__link {
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1rem; font-family:Lexend,system-ui,sans-serif;
  font-weight:600; font-size:.95rem; color:var(--link); text-decoration:none;
}
.card__link svg { width:17px; height:17px; transition:transform var(--t-fast); }
.card:hover .card__link svg, a.card:hover .card__link svg { transform:translateX(3px); }
@media (prefers-reduced-motion: reduce) { .card__link svg { transition:none; } }

/* action cards (3 up, high-emphasis) */
.action-card { display:flex; flex-direction:column; }
.action-card .btn { margin-top:auto; }
.action-card p { margin-bottom:1.25rem; }

/* Glowing service tiles. Each tile is clickable through a link on its title that
   is stretched over the whole card, so the hover promises something real and
   the link name stays short for screen readers. The glow is built from the brand
   token, so it follows light and dark mode automatically. */
.card--glow { position:relative; cursor:pointer; }
.card--glow,
.card--glow.reveal {
  transition:opacity 420ms ease, transform 420ms ease,
             border-color var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
}
.card--glow .icon-plate { transition:background-color var(--t-base), color var(--t-base); }
.card--glow h3 { transition:color var(--t-base); }

.card--glow:hover,
.card--glow:focus-within {
  border-color:var(--brand);
  background-color:var(--brand-soft);
  box-shadow:
    0 0 0 1px var(--brand),
    0 0 26px -2px color-mix(in srgb, var(--brand) 45%, transparent),
    0 16px 36px -14px color-mix(in srgb, var(--brand) 60%, transparent);
}
.card--glow:hover .icon-plate,
.card--glow:focus-within .icon-plate { background:var(--brand); color:var(--on-brand); }
.card--glow:hover h3,
.card--glow:focus-within h3 { color:var(--brand-strong); }

.card__stretch { color:inherit; text-decoration:none; }
.card__stretch:hover { color:inherit; }
.card__stretch::after { content:""; position:absolute; inset:0; border-radius:var(--r-lg); }
/* keyboard focus rings the whole tile rather than just the title */
.card__stretch:focus-visible { outline:none; }
.card--glow:has(.card__stretch:focus-visible) { outline:3px solid var(--focus); outline-offset:3px; }

/* Cards whose action is a button (the three quick actions): the button link
   stretches over the whole card, so clicking anywhere on the card follows it,
   and the button shows its own hover state while the card is hovered. The
   button keeps its normal focus ring for keyboard users. */
.btn--stretch::after { content:""; position:absolute; inset:0; border-radius:var(--r-lg); }

/* ---------- 9. Split sections ------------------------------------------- */
.split { display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:940px) {
  .split { grid-template-columns:1fr 1fr; }
  .split--reverse .split__media { order:-1; }
}

.steps { list-style:none; padding:0; margin:1.5rem 0 0; counter-reset:step; }
.steps li {
  position:relative; padding-left:3.35rem; padding-bottom:1.5rem; counter-increment:step;
}
.steps li:last-child { padding-bottom:0; }
.steps li::before {
  content:counter(step);
  position:absolute; left:0; top:0;
  width:2.35rem; height:2.35rem; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:var(--on-brand);
  font-family:Lexend,system-ui,sans-serif; font-weight:700; font-size:1rem;
}
.steps li::after {
  content:""; position:absolute; left:1.17rem; top:2.6rem; bottom:.35rem;
  width:2px; background:var(--border-brand);
}
.steps li:last-child::after { display:none; }
.steps h3 { font-size:1.08rem; margin-bottom:.25rem; }
.steps p { color:var(--text-muted); font-size:.98rem; }

.check-list { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.check-list li { display:flex; gap:.7rem; align-items:flex-start; }
.check-list svg { width:22px; height:22px; flex:none; color:var(--cta); margin-top:.15rem; }
.check-list strong { display:block; }
.check-list span.desc { color:var(--text-muted); font-size:.96rem; }

.media-panel {
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg-alt); padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:var(--shadow-sm);
}
.media-panel h3 { margin-bottom:1rem; }

/* stat row */
.stats { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); }
.stat { border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); padding:1.15rem; }
.stat__num {
  font-family:Lexend,system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem); color:var(--brand); line-height:1.1;
}
.stat__label { font-size:.9rem; color:var(--text-muted); margin-top:.3rem; }

/* ---------- 10. Chips / badges ------------------------------------------ */
.chip-row { display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:0; }
.chip {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--border);
  font-size:.94rem; font-weight:600; color:var(--text);
}
.chip svg { width:16px; height:16px; color:var(--cta); }

/* ---------- 10b. Medical-aid logo marquee -------------------------------
   Two identical groups scroll as one track; translating by half the track
   width (plus half the gap between the groups) lands exactly on the seam,
   so the loop is invisible. Logo files live in assets/img/schemes/.        */
.logo-marquee {
  --marquee-gap:1rem;
  --marquee-speed:46s;
  position:relative;
  overflow:hidden;
  padding-block:.25rem;
  /* fade the strip out at both edges instead of cutting logos off hard */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-marquee__track {
  display:flex;
  gap:var(--marquee-gap);
  width:max-content;
  animation:marquee-scroll var(--marquee-speed) linear infinite;
}
.logo-marquee__group {
  display:flex;
  gap:var(--marquee-gap);
  list-style:none;
  margin:0;
  padding:0;
}
.logo-marquee__item {
  flex:none;
  display:grid;
  place-items:center;
  width:186px;
  height:92px;
  padding:1rem 1.25rem;
  /* the plate stays light in both themes: scheme logos are drawn for white */
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.logo-marquee__item img {
  max-width:100%;
  max-height:46px;
  width:auto;
  object-fit:contain;
}

@keyframes marquee-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(calc(-50% - (var(--marquee-gap) / 2))); }
}

/* Let people stop it to read a logo, by pointer or by keyboard. */
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track { animation-play-state:paused; }

/* No motion: drop the duplicate group and hand over a normal scrollable strip. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    overflow-x:auto;
    -webkit-mask-image:none;
            mask-image:none;
    scrollbar-width:thin;
  }
  .logo-marquee__track { animation:none; width:auto; }
  .logo-marquee__group[aria-hidden="true"] { display:none; }
}

/* ---------- 10b-2. Medical-aid logos band ----------------------------------
   A solid brand-red band so the white logo cards stand out, rather than white
   tiles on an almost-white background. Cards are larger, logos bigger, and a
   hovered card lifts with a white glow ring (the strip pauses on hover, so the
   card stays under the pointer). Extra vertical padding stops the lift and the
   shadows being clipped by the strip. */
.logos-band { background:var(--red-600); color:#FFFFFF; }
:root[data-theme="dark"] .logos-band { background:#7A0B14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logos-band { background:#7A0B14; }
}
.logos-band .section-head h2 { color:#FFFFFF; }
.logos-band .section-head p { color:rgba(255,255,255,.92); }
.logos-band .eyebrow { background:rgba(255,255,255,.16); color:#FFFFFF; }
.logos-band__note { margin-top:1.75rem; color:rgba(255,255,255,.92); }
.logos-band__note a { color:#FFFFFF; font-weight:600; }
.logos-band__note a:hover { color:#FFFFFF; text-decoration-thickness:2px; }
.logos-band :focus-visible { outline-color:#FFFFFF; }

.logos-band .logo-marquee { --marquee-gap:1.25rem; padding-block:1.25rem; }
.logos-band .logo-marquee__item {
  width:224px; height:124px; padding:1.25rem 1.5rem;
  border:0; border-radius:var(--r-lg);
  box-shadow:0 14px 30px -14px rgba(40,0,6,.55);
  transition:transform var(--t-base), box-shadow var(--t-base);
}
.logos-band .logo-marquee__item img { max-height:64px; }
.logos-band .logo-marquee__item:hover {
  transform:translateY(-4px);
  box-shadow:0 0 0 4px rgba(255,255,255,.35), 0 20px 36px -14px rgba(40,0,6,.65);
}

/* ---------- 10c. Photography --------------------------------------------
   Every photo sits in a frame with a fixed aspect-ratio, so the layout is
   already the right shape before the real pictures arrive and nothing shifts
   when they land (no CLS). If a file is missing, main.js flags the frame and
   the labelled "pending" state below shows through instead of a broken image.
   Shot list: PHOTOSHOOT.md                                                  */
.photo {
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--surface-2);
  border:1px solid var(--border);
}
.photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.photo--3x2  { aspect-ratio:3 / 2; }
.photo--4x3  { aspect-ratio:4 / 3; }
.photo--1x1  { aspect-ratio:1 / 1; }
.photo--16x9 { aspect-ratio:16 / 9; }

/* pending state — visible only while the photo file is absent */
.photo__pending {
  position:absolute; inset:0;
  display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1.25rem; text-align:center;
  background:
    repeating-linear-gradient(45deg,
      var(--surface-2) 0 12px, var(--bg-alt) 12px 24px);
  color:var(--text-muted);
}
.photo[data-loaded="true"] .photo__pending { display:none; }
/* A real photo needs no frame: the outline and tint are only for the pending state. */
.photo[data-loaded="true"] { border:0; background:none; box-shadow:none; }

.photo__pending svg { width:30px; height:30px; opacity:.5; }
.photo__pending b {
  font-family:Lexend,system-ui,sans-serif; font-size:.95rem;
  font-weight:600; color:var(--heading); display:block;
}
.photo__pending span { font-size:.85rem; max-width:30ch; }
.photo__pending code {
  font-size:.78rem; letter-spacing:.02em;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:.15rem .45rem; color:var(--text-muted);
}

/* caption under a framed photo */
.photo-figure { margin:0; }
.photo-figure figcaption {
  margin-top:.7rem; font-size:.9rem; color:var(--text-muted); text-align:left;
}

/* status pill floated over the hero photo */
.photo__overlay {
  position:absolute; left:1rem; bottom:1rem; right:1rem;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.photo__overlay .status {
  background:var(--surface);
  box-shadow:var(--shadow-md);
  border-color:var(--border);
}
.photo__overlay .status--open { background:var(--ok-soft); border-color:var(--ok); }

/* premises gallery — one feature shot plus five supporting ones */
.gallery { display:grid; gap:clamp(.75rem,1.6vw,1rem); grid-template-columns:1fr; }
@media (min-width: 720px) {
  .gallery { grid-template-columns:repeat(3, 1fr); }
  .gallery > .photo { aspect-ratio:4 / 3; }
  .gallery > .photo:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
}

/* team portraits replace the initials plate */
.person__photo.photo {
  width:112px; height:112px; border-radius:var(--r-full);
  margin:0 auto 1rem; padding:0; overflow:hidden;
  border:3px solid var(--surface); box-shadow:var(--shadow-sm);
  display:block;
}
.person__photo.photo .photo__pending { gap:.15rem; padding:.5rem; }
.person__photo.photo .photo__pending svg { width:22px; height:22px; }
.person__photo.photo .photo__pending b { font-size:1.35rem; }
.person__photo.photo .photo__pending span,
.person__photo.photo .photo__pending code { display:none; }

/* ---------- 11. Google reviews ------------------------------------------
   Google's terms require its content to be visually distinct from the site's
   own, so live reviews sit in their own bordered, tinted panel.            */
.reviews-summary {
  display:grid; justify-items:center; gap:.35rem; text-align:center;
  margin-bottom:clamp(2rem,4vw,2.75rem);
}
.reviews-summary__score { display:flex; align-items:center; gap:.75rem; }
.reviews-summary__number {
  font-family:Lexend,system-ui,sans-serif; font-weight:700; line-height:1;
  font-size:clamp(2rem,1.6rem + 1.5vw,2.6rem); color:var(--heading);
}
.reviews-summary__count { color:var(--text-muted); }
.reviews-summary .btn-row { margin-top:1rem; }

/* Stars: an empty row with a filled row clipped to the rating on top of it.
   The amber holds 3:1 against both themes' backgrounds. */
.stars { position:relative; display:inline-block; line-height:0; color:var(--border); }
.stars__base, .stars__fill { display:flex; gap:2px; }
.stars__fill {
  position:absolute; top:0; left:0; bottom:0; overflow:hidden;
  width:calc(var(--rating, 0) / 5 * 100%); color:#B7700A;
}
.stars svg { width:22px; height:22px; flex:none; }
.stars--sm svg { width:16px; height:16px; }

.reviews-live {
  padding:clamp(1rem,2.5vw,1.5rem);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg-alt);
}
.reviews-grid {
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.review { display:flex; flex-direction:column; gap:.6rem; }
.review__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem; }
.review__author {
  display:inline-flex; align-items:center; gap:.6rem; min-height:44px;
  color:var(--heading); font-weight:600; text-decoration:none;
}
a.review__author:hover .review__name { text-decoration:underline; }
.review__avatar {
  width:40px; height:40px; flex:none; border-radius:var(--r-full);
  object-fit:cover; background:var(--surface-2);
}
.review__when { font-size:.88rem; color:var(--text-muted); }
.review__text { color:var(--text); white-space:pre-line; }
.review__link { display:inline-flex; align-items:center; min-height:44px; margin-top:auto; font-size:.92rem; font-weight:600; }
/* Google requires 12-16px attribution at 4.5:1 or better. */
.reviews-attribution { margin-top:1rem; text-align:center; font-size:.875rem; color:var(--text-muted); }

.trust-strip__link { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; color:inherit; text-underline-offset:3px; }
.trust-strip__link:hover { color:var(--heading); }
.trust-strip svg.trust-strip__star { color:#B7700A; }

/* ---------- 12. Team ----------------------------------------------------- */
.person { text-align:center; }
.person__photo {
  width:104px; height:104px; border-radius:var(--r-full); margin:0 auto 1rem;
  background:var(--brand-soft); color:var(--brand-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:Lexend,system-ui,sans-serif; font-weight:700; font-size:1.75rem;
  border:3px solid var(--surface); box-shadow:var(--shadow-sm);
}
.person__role { color:var(--brand); font-weight:600; font-size:.95rem; margin-bottom:.6rem; }
.person__reg { font-size:.85rem; color:var(--text-muted); margin-top:.75rem; font-variant-numeric:tabular-nums; }

/* ---------- 13. FAQ ------------------------------------------------------ */
.faq { display:grid; gap:.75rem; max-width:52rem; margin-inline:auto; }
.faq details {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color var(--t-fast);
}
.faq details[open] { border-color:var(--border-brand); }
.faq summary {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.25rem; min-height:var(--tap); cursor:pointer;
  font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:1.02rem;
  color:var(--heading); list-style:none;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { background:var(--bg-alt); }
.faq summary .chev { width:22px; height:22px; flex:none; color:var(--brand); transition:transform var(--t-base); }
.faq details[open] summary .chev { transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .faq summary .chev { transition:none; } }
.faq .faq__body { padding:0 1.25rem 1.25rem; color:var(--text-muted); }
.faq .faq__body p + p { margin-top:.75rem; }

/* ---------- 14. Tables --------------------------------------------------- */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:.98rem; }
caption { text-align:left; padding:1rem 1.15rem; color:var(--text-muted); font-size:.92rem; }
th,td { padding:.9rem 1.15rem; text-align:left; border-bottom:1px solid var(--border); }
thead th {
  font-family:Lexend,system-ui,sans-serif; font-size:.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); background:var(--bg-alt);
}
tbody tr:last-child td { border-bottom:0; }
td.price { font-variant-numeric:tabular-nums; font-weight:600; color:var(--heading); white-space:nowrap; }

/* ---------- 15. Forms ---------------------------------------------------- */
.form { display:grid; gap:1.15rem; }
.field { display:grid; gap:.4rem; }
.field label { font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:.94rem; color:var(--heading); }
.field .hint { font-size:.87rem; color:var(--text-muted); }
.field .req { color:var(--danger); }
.input, .field select, .field textarea {
  width:100%; min-height:var(--tap); padding:.7rem .9rem;
  font-family:inherit; font-size:1rem; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height:9rem; resize:vertical; line-height:1.6; }
.input:hover, .field select:hover, .field textarea:hover { border-color:var(--ink-300); }
.input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color:var(--focus); }
.input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color:var(--danger); background:var(--danger-soft);
}
.field .error { display:none; align-items:center; gap:.4rem; color:var(--danger); font-size:.9rem; font-weight:600; }
.field .error svg { width:16px; height:16px; flex:none; }
.field .error[data-visible="true"] { display:flex; }

.checkbox { display:flex; gap:.75rem; align-items:flex-start; }
.checkbox input { width:22px; height:22px; margin-top:.28rem; flex:none; accent-color:var(--brand); cursor:pointer; }
.checkbox label { font-family:inherit; font-weight:400; font-size:.95rem; color:var(--text-muted); line-height:1.55; cursor:pointer; }

.form-note {
  display:flex; gap:.65rem; align-items:flex-start;
  padding:.9rem 1rem; border-radius:var(--r-md);
  background:var(--bg-alt); border:1px solid var(--border-brand);
  font-size:.92rem; color:var(--text-muted);
}
.form-note svg { width:20px; height:20px; flex:none; color:var(--cta); margin-top:.1rem; }

.form-status { display:none; padding:1rem 1.15rem; border-radius:var(--r-md); font-weight:600; }
.form-status[data-state="success"] { display:block; background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok); }
.form-status[data-state="error"] { display:block; background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger); }

/* ---------- 15b. Send a script -----------------------------------------
   The real file input covers the whole drop zone, so tapping anywhere opens
   the camera or picker and keyboard focus lands on a genuine control.       */
fieldset.field { border:0; margin:0; padding:0; min-width:0; }
.field legend {
  font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:.94rem;
  color:var(--heading); padding:0; margin-bottom:.4rem;
}

.field .upload-zone {
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; min-height:188px; padding:1.5rem 1.25rem;
  border:2px dashed var(--border); border-radius:var(--r-lg);
  background:var(--bg-alt); text-align:center; cursor:pointer;
  font-family:inherit; font-weight:400; color:var(--text-muted);
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.upload-zone:hover { border-color:var(--brand); }
.upload-zone:focus-within { border-color:var(--focus); outline:3px solid var(--focus); outline-offset:2px; }
.upload-zone[data-has-file="true"] { border-style:solid; border-color:var(--ok); background:var(--surface); }
.upload-zone:has(input[aria-invalid="true"]) { border-color:var(--danger); background:var(--danger-soft); }
.upload-zone input[type="file"] {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.upload-zone__icon {
  display:grid; place-items:center; width:60px; height:60px;
  border-radius:var(--r-full); background:var(--surface); color:var(--brand);
  box-shadow:var(--shadow-sm);
}
.upload-zone__icon svg { width:28px; height:28px; }
.upload-zone__title { font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:1.02rem; color:var(--heading); }
.upload-zone__hint { font-size:.9rem; }

.upload-preview {
  display:flex; align-items:center; gap:.9rem; padding:.75rem;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
}
.upload-preview img {
  width:64px; height:84px; flex:none; object-fit:cover;
  border:1px solid var(--border); border-radius:var(--r-sm);
}
.upload-preview__meta {
  flex:1; min-width:0; display:grid; gap:.1rem;
  font-size:.9rem; color:var(--text-muted); overflow-wrap:anywhere;
}
.upload-preview__meta strong { color:var(--ok); }

.choice-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:.6rem; }
.field .choice {
  display:flex; align-items:center; gap:.6rem;
  min-height:var(--tap); padding:.7rem 1rem;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);
  font-family:inherit; font-weight:600; font-size:.98rem; color:var(--text);
  cursor:pointer; transition:border-color var(--t-fast), background-color var(--t-fast);
}
.choice input { width:20px; height:20px; margin:0; flex:none; accent-color:var(--brand); cursor:pointer; }
.choice:has(input:checked) { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-strong); }
.choice:focus-within { outline:3px solid var(--focus); outline-offset:2px; }

/* Send a script, stacked: intro and steps on top, form centred below. On wider
   screens the steps run across in a row so the section does not grow too tall. */
.upload-stack { display:grid; gap:clamp(1.75rem,3.5vw,2.5rem); }
.upload-stack .section-head { margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.upload-stack__intro { width:100%; max-width:980px; margin-inline:auto; }
.upload-stack__form { width:100%; max-width:760px; margin-inline:auto; }
.upload-stack__note { margin-bottom:1rem; }

@media (min-width: 720px) {
  .steps--row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem; margin-top:0; }
  .steps--row li { padding-left:0; padding-top:3.25rem; padding-bottom:0; }
  /* the connector runs sideways to the next number instead of downwards */
  .steps--row li::after { top:1.12rem; bottom:auto; left:2.85rem; right:-1.25rem; width:auto; height:2px; }
}

@media (min-width: 640px) {
  #script-form { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:1rem; }
  #script-form > * { grid-column:1 / -1; }
  #script-form > .field:has(#script-name),
  #script-form > .field:has(#script-phone) { grid-column:auto; }
}

/* Wide screens: the form spreads across the page in three columns to cut its
   height. Photo on the left running down beside the fields; name and phone,
   then collect/deliver, then notes on the right; consent across the full width,
   then the privacy note with the send button beside it. "dense" lets the button
   slot in beside the privacy note even though it comes last in the markup, and
   the optional delivery-address row simply adds one more row on the right. */
@media (min-width: 1000px) {
  .upload-stack__form { max-width:none; }
  #script-form {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:1.25rem;
    grid-auto-flow:row dense;
  }
  #script-form > * { grid-column:2 / -1; }
  #script-form > .field:has(#script-photo) {
    grid-column:1; grid-row:1 / span 3;
    display:flex; flex-direction:column; gap:.5rem;
  }
  #script-form > .field:has(#script-photo) .upload-zone { flex:1; min-height:0; }
  #script-form > .field:has(#script-name) { grid-column:2; }
  #script-form > .field:has(#script-phone) { grid-column:3; }
  /* consent runs the full width on one line; privacy note and button share the row below */
  #script-form > .field:has(#script-consent) { grid-column:1 / -1; }
  #script-form > .form-note { grid-column:1 / span 2; }
  #script-form > button[type="submit"] { grid-column:3; align-self:center; }
  #script-form textarea { min-height:5.5rem; }
}

/* ---------- 16. Map + contact ------------------------------------------- */
.map-frame {
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-2); box-shadow:var(--shadow-sm);
}
.map-frame iframe { display:block; width:100%; height:clamp(300px,42vw,430px); border:0; }

.info-list { list-style:none; padding:0; margin:0; display:grid; gap:1.25rem; }
.info-list li { display:flex; gap:.9rem; align-items:flex-start; }
.info-list .icon-plate { width:44px; height:44px; margin-bottom:0; }
.info-list .icon-plate svg { width:22px; height:22px; }
.info-list h3 { font-size:1rem; margin-bottom:.15rem; }
.info-list p, .info-list address { color:var(--text-muted); font-style:normal; font-size:.98rem; }
.info-list a { font-weight:600; }

/* ---------- 16b. Find us, compact -----------------------------------------
   One card: contact details in a 2x2 grid and a tight hours list on the left,
   the map filling the full height on the right. Stacks on narrow screens. */
.findus {
  display:grid; grid-template-columns:1fr;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
}
.findus__info { display:grid; gap:1.25rem; align-content:start; padding:clamp(1.25rem,2.5vw,1.75rem); min-width:0; }
.findus__contacts {
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem 1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.findus__contacts li { display:flex; align-items:flex-start; gap:.75rem; min-width:0; }
.findus__contacts .icon-plate { width:40px; height:40px; margin:0; flex:none; }
.findus__contacts .icon-plate svg { width:20px; height:20px; }
.findus__contacts h3 { font-size:.95rem; margin-bottom:.1rem; }
.findus__contacts p,
.findus__contacts address { font-style:normal; font-size:.95rem; line-height:1.5; color:var(--text-muted); }
.findus__contacts a { font-weight:600; overflow-wrap:anywhere; }

.findus__hours { border-top:1px solid var(--border); padding-top:1rem; }
.findus__hours-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem; margin-bottom:.25rem; }
.findus__hours-head h3 { font-size:1.02rem; }
.findus__hours .hours-list li { padding-block:.45rem; font-size:.95rem; }

.findus__map { position:relative; min-height:300px; background:var(--surface-2); border-top:1px solid var(--border); }
.findus__map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (min-width: 900px) {
  .findus { grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); }
  .findus__map { min-height:0; border-top:0; border-left:1px solid var(--border); }
}

/* ---------- 17. CTA band ------------------------------------------------- */
.cta-band { background:var(--band); color:var(--on-band); }
:root[data-theme="dark"] .cta-band { background:#0E2A1A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-band { background:#0E2A1A; }
}
.cta-band h2 { color:#FFFFFF; }
.cta-band p { color:var(--on-band); opacity:.86; margin-top:.85rem; font-size:1.08rem; }
.cta-band .btn-row { margin-top:1.85rem; }

/* ---------- 18. Footer --------------------------------------------------- */
.site-footer { background:var(--surface-2); border-top:1px solid var(--border); padding-block:clamp(3rem,6vw,4.5rem) 0; }
.footer__grid { display:grid; gap:2.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }
.footer__brand { max-width:34ch; }
.footer__brand p { color:var(--text-muted); font-size:.96rem; margin-top:1rem; }
.footer h4 {
  font-family:Lexend,system-ui,sans-serif; font-size:.83rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); margin-bottom:1rem;
}
.footer__list { list-style:none; padding:0; margin:0; display:grid; gap:.15rem; }
.footer__list a, .footer__list span {
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--text); text-decoration:none; font-size:.97rem;
}
.footer__list a:hover { color:var(--brand); text-decoration:underline; }
.footer__list .time { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.footer__hours li { display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:.95rem; }

.social-row { display:flex; gap:.6rem; margin-top:1.35rem; }
.social-row a {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.social-row a:hover { background:var(--brand-soft); color:var(--brand-strong); border-color:var(--border-brand); }
.social-row svg { width:20px; height:20px; }

.footer__legal {
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-block:1.5rem;
  border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  align-items:center; justify-content:space-between;
  font-size:.88rem; color:var(--text-muted);
}
.footer__legal nav { display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; }
.footer__legal a { color:var(--text-muted); }
.footer__legal a:hover { color:var(--brand); }

/* Footer registration strip: three facts in a row, disclaimer underneath. */
.compliance {
  margin-top:2.25rem; overflow:hidden;
  border:1px solid var(--border); border-top:3px solid var(--brand);
  border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.compliance__facts {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr;
}
@media (min-width:760px) { .compliance__facts { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.compliance__fact {
  display:flex; gap:.85rem; align-items:flex-start; min-width:0;
  padding:1.15rem 1.25rem;
}
.compliance__fact + .compliance__fact { border-top:1px solid var(--border); }
@media (min-width:760px) {
  .compliance__fact + .compliance__fact { border-top:0; border-left:1px solid var(--border); }
}
.compliance__icon {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:var(--r-md);
  background:var(--brand-soft); color:var(--brand);
}
.compliance__icon svg { width:20px; height:20px; }
.compliance__text { display:grid; gap:.1rem; min-width:0; }
.compliance__label {
  font-family:Lexend,system-ui,sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
}
.compliance__value { font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:.98rem; color:var(--heading); }
.compliance__meta { font-size:.86rem; color:var(--text-muted); }
/* Marks a detail that still has to be supplied, so it is obvious on review. */
.tbc {
  display:inline-block; padding:0 .45rem; margin-left:.15rem;
  border:1px dashed var(--ink-300); border-radius:var(--r-sm);
  font-size:.8rem; font-style:italic; color:var(--text-muted); white-space:nowrap;
}
.compliance__note {
  display:flex; gap:.6rem; align-items:flex-start; margin:0;
  padding:.95rem 1.25rem; border-top:1px solid var(--border);
  background:var(--bg-alt); font-size:.86rem; line-height:1.55; color:var(--text-muted);
}
.compliance__note svg { width:18px; height:18px; flex:none; margin-top:.12rem; color:var(--text-muted); }
/* ---------- 19. Floating buttons ---------------------------------------- */
:root { --float-inset:1.1rem; --float-size:56px; --tabbar-h:64px; --tabbar-space:0px; }

.wa-float {
  position:fixed; right:var(--float-inset); bottom:calc(var(--float-inset) + var(--tabbar-space)); z-index:var(--z-float);
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:56px; padding:.75rem 1.25rem;
  /* Brand red rather than WhatsApp green; the icon still says WhatsApp.
     White on #C1121F is 5.9:1. A soft ring pulses out to draw the eye. */
  background:#C1121F; color:#FFFFFF;
  border-radius:var(--r-full); box-shadow:var(--shadow-lg);
  font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:.97rem;
  text-decoration:none; cursor:pointer;
  transition:background-color var(--t-fast);
  animation:wa-pulse 2s ease-out infinite;
}
.wa-float:hover { background:#9B0E19; color:#FFFFFF; }
/* Stop pulsing once someone is pointing at it or has tabbed to it. */
.wa-float:hover, .wa-float:focus-visible { animation:none; }
@keyframes wa-pulse {
  0%   { box-shadow:0 0 0 0 rgba(193,18,31,.55), var(--shadow-lg); }
  70%  { box-shadow:0 0 0 16px rgba(193,18,31,0), var(--shadow-lg); }
  100% { box-shadow:0 0 0 0 rgba(193,18,31,0), var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) { .wa-float { animation:none; } }
.wa-float svg { width:26px; height:26px; flex:none; }
@media (max-width:520px) { .wa-float__label { display:none; } .wa-float { padding:.85rem; } }

/* Back to top — injected by main.js, since it cannot work without JS.
   Sits directly above the WhatsApp button so the two never overlap. */
.to-top {
  position:fixed; z-index:var(--z-float);
  right:var(--float-inset);
  bottom:calc(var(--float-inset) + var(--float-size) + .65rem + var(--tabbar-space));
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  background:var(--surface); color:var(--heading);
  border:1px solid var(--border); border-radius:var(--r-full);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  /* hidden by default: not visible, and not reachable by Tab */
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-base), transform var(--t-base),
             visibility var(--t-base), background-color var(--t-fast),
             border-color var(--t-fast), color var(--t-fast);
}
.to-top[data-visible="true"] { opacity:1; visibility:visible; transform:none; }
.to-top:hover { background:var(--brand-soft); border-color:var(--border-brand); color:var(--brand-strong); }
.to-top svg { width:24px; height:24px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition:none; } }

/* ---------- 19a. Branded popup (services & fees) --------------------------
   Native <dialog>: the browser provides the focus trap, Esc to close and
   focus return. Full screen on phones.                                      */
.modal {
  --modal-band:#C1121F;
  width:min(56rem, calc(100% - 2rem)); max-width:none;
  max-height:min(88vh, 60rem);
  margin:auto; /* the global reset zeroes margins, which would pin the dialog top-left */
  padding:0; border:0; border-radius:var(--r-lg);
  background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal { --modal-band:#7A0B14; } }
:root[data-theme="dark"] .modal { --modal-band:#7A0B14; }
.modal[open] { display:flex; flex-direction:column; animation:modal-in .22s ease-out; }
.modal::backdrop { background:rgba(20,12,12,.62); backdrop-filter:blur(3px); }
@keyframes modal-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
html.modal-open { overflow:hidden; }

.modal__band {
  position:relative; flex:none;
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 4.25rem 1.1rem 1.25rem;
  background:var(--modal-band);
  background-image:radial-gradient(circle at 100% 0, rgba(255,255,255,.16), transparent 55%);
  color:#fff;
}
.modal__logo { flex:none; width:auto; height:52px; border-radius:var(--r-md); box-shadow:0 0 0 2px rgba(255,255,255,.85); }
.modal__eyebrow {
  display:block; font-family:Lexend,system-ui,sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:#FFE3E5;
}
.modal__band h2 { margin:0; color:#fff; font-size:clamp(1.3rem, 2.6vw, 1.7rem); line-height:1.2; }
.modal__close {
  position:absolute; top:50%; right:.9rem; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.5); border-radius:var(--r-full);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.modal__close:hover { background:#fff; color:var(--modal-band); }
.modal__close:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.modal__close svg { width:22px; height:22px; }

.modal__body {
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:grid; gap:1.15rem; padding:1.25rem;
}
.modal__label { margin:0 0 .5rem; font-family:Lexend,system-ui,sans-serif; font-weight:600; font-size:.95rem; color:var(--heading); }
.modal__intro { margin:0; color:var(--text-muted); }
.modal__chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.modal__chips li {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem; border-radius:var(--r-full);
  background:var(--brand-soft); color:var(--brand-strong); border:1px solid var(--border-brand);
  font-weight:600; font-size:.92rem;
}
.modal__chips svg { width:16px; height:16px; }
.modal th, .modal td { padding:.7rem 1rem; }

/* Long-form variant (privacy notice): narrower, for comfortable reading. */
.modal--doc { width:min(46rem, calc(100% - 2rem)); }
.modal__doc { display:block; line-height:1.65; }
.modal__doc section + section { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.modal__doc h3 { margin:0 0 .5rem; font-size:1.08rem; color:var(--heading); }
.modal__doc p { margin:0; color:var(--text); }
.modal__doc p + p, .modal__doc ul + p, .modal__doc p + ul, .modal__doc p + address, .modal__doc address + p { margin-top:.75rem; }
.modal__doc ul { margin:0; padding-left:1.2rem; display:grid; gap:.5rem; }
.modal__doc li::marker { color:var(--brand); }
.modal__meta { font-size:.9rem; color:var(--text-muted) !important; margin-bottom:1.25rem !important; }
.modal__address {
  font-style:normal; padding:.9rem 1.1rem; border-radius:var(--r-md);
  background:var(--bg-alt); border:1px solid var(--border);
}
/* Without JS the footer link targets #privacy-notice, so show it as a page.
   Scoped to no-JS: with JS the popup opens properly, and :target can stay
   stuck after the hash is cleared, which would leave a closed popup showing. */
html:not(.modal-js) .modal:target:not([open]) {
  display:flex; flex-direction:column; position:fixed; inset:0; z-index:100;
  margin:auto; max-height:calc(100% - 2rem);
}

.modal__foot {
  flex:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.75rem;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--border); background:var(--bg-alt);
}
@media (max-width:560px) {
  .modal { width:100%; height:100%; max-height:none; margin:0; inset:0; border-radius:0; }
  .modal__logo { height:40px; }
  .modal__foot .btn { flex:1 1 100%; }
  /* Fee table becomes a list: service and fee on one line, notes underneath. */
  .modal table { min-width:0; }
  .modal thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .modal tbody tr {
    display:grid; grid-template-columns:1fr auto; column-gap:1rem;
    padding:.75rem 1rem; border-bottom:1px solid var(--border);
  }
  .modal tbody tr:last-child { border-bottom:0; }
  .modal tbody th, .modal tbody td { padding:0; border:0; }
  .modal tbody td:last-child { grid-column:1 / -1; margin-top:.2rem; color:var(--text-muted); font-size:.9rem; }
}
@media (prefers-reduced-motion: reduce) { .modal[open] { animation:none; } .modal__close { transition:none; } }

/* ---------- 19b. Mobile tab bar -----------------------------------------
   Replaces the header links at 960px and below. Page content and the floating
   buttons are lifted by --tabbar-space so nothing ever sits underneath it.  */
.tabbar { display:none; }

@media (max-width: 960px) {
  :root { --tabbar-space:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom:var(--tabbar-space); }

  .tabbar {
    display:block;
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-nav);
    background:var(--surface);
    border-top:1px solid var(--border);
    box-shadow:0 -6px 18px -10px rgba(25,22,22,.18);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tabbar__list {
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    max-width:640px; margin:0 auto; padding:0; list-style:none;
  }
  .tabbar__link {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.2rem; min-height:var(--tabbar-h); padding:.35rem .15rem;
    font-family:Lexend,system-ui,sans-serif; font-size:.8125rem; font-weight:500;
    line-height:1.1; text-align:center;
    color:var(--text-muted); text-decoration:none;
    transition:color var(--t-fast);
  }
  .tabbar__link svg { width:24px; height:24px; flex:none; }
  .tabbar__link:hover { color:var(--heading); }
  .tabbar__link[aria-current="page"] { color:var(--brand); font-weight:600; }
  .tabbar__link--primary { color:var(--heading); font-weight:600; }
  .tabbar__icon {
    display:grid; place-items:center;
    width:48px; height:30px; border-radius:var(--r-full);
    background:var(--brand); color:var(--on-brand);
  }
  .tabbar__icon svg { width:20px; height:20px; }
}

/* ---------- 20. Page header (inner pages) ------------------------------- */
.page-head {
  background:
    radial-gradient(46rem 22rem at 88% -30%, var(--brand-soft) 0%, transparent 60%),
    var(--bg-alt);
  border-bottom:1px solid var(--border);
  padding-block:clamp(2.75rem,6vw,4.25rem);
}
.page-head p { color:var(--text-muted); font-size:1.1rem; margin-top:1rem; max-width:62ch; }

.breadcrumbs { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0 0 1rem; font-size:.9rem; color:var(--text-muted); }
.breadcrumbs li { display:inline-flex; align-items:center; gap:.4rem; }
.breadcrumbs li + li::before { content:"/"; color:var(--ink-300); }
.breadcrumbs a { color:var(--text-muted); text-decoration:none; }
.breadcrumbs a:hover { color:var(--brand); text-decoration:underline; }

/* ---------- 21. Motion --------------------------------------------------- */
.reveal { opacity:0; transform:translateY(14px); transition:opacity 420ms ease, transform 420ms ease; }
.reveal[data-shown="true"] { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- 22. Print ---------------------------------------------------- */
@media print {
  .site-header, .utility-bar, .wa-float, .to-top, .tabbar, .cta-band { display:none !important; }
  body { font-size:12pt; color:#000; background:#fff; padding-bottom:0; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; }
}