/* DoctorGo — website styles
   ─────────────────────────────────────────────────────────────────────────────────────────────
   Design system: «Clinical Clarity» (Design/stitch_doctor_go_redesign/clinical_clarity/DESIGN.md).
   Typeface: IBM Plex Sans Arabic. Palette, radii and rhythm come from that file's tokens.

   Two deliberate departures from the reference, both on the owner's instruction:

   1. NO TAILWIND. The reference is built on the Tailwind CDN, which means a render-blocking script
      that compiles CSS in the visitor's browser on every page load. On a site whose whole purpose is
      being crawled and ranked — and which is hosted on a plan that already sleeps — that is the
      wrong trade. The same tokens are implemented here as custom properties.

   2. TIGHTER RHYTHM. The reference specifies section-gap: 80px. Measured, the first build put the
      categories grid 1230px down a 720px viewport — nearly two screens before the visitor reached
      the thing the page is for. The spacing below is compressed to roughly half that, which is what
      the owner asked for and what the compact mock actually shows.

   Dark mode is token-only: every colour is a variable, so the dark scheme is one block of overrides
   and no component rule needs to know it exists.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Clinical Clarity · light ─────────────────────────────────────────────────────────── */
    --primary: #003d9b;
    --primary-container: #0052cc;
    --on-primary: #ffffff;
    --primary-fixed: #dae2ff;
    --surface-tint: #0c56d0;

    --secondary: #00677d;
    --secondary-container: #b3ebff;
    --on-secondary-container: #005c70;

    --bg: #F8F9FA;                 /* clinical-gray-bg */
    --surface: #ffffff;            /* surface-container-lowest */
    --surface-2: #f3f3fd;          /* surface-container-low */
    --surface-3: #ededf8;          /* surface-container */

    --ink: #172B4D;                /* text-heading */
    --body: #42526E;               /* text-body */
    --muted: #737685;              /* outline */
    --line: #E9ECEF;               /* border-subtle */
    --line-strong: #c3c6d6;        /* outline-variant */

    --error: #ba1a1a;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --success: #25D366;            /* medical-success — also the WhatsApp channel */

    --shadow: 0 1px 2px rgba(23, 43, 77, .04), 0 6px 18px rgba(23, 43, 77, .06);
    --shadow-lg: 0 2px 6px rgba(23, 43, 77, .06), 0 16px 36px rgba(23, 43, 77, .10);

    /* Shapes — DESIGN.md `rounded` */
    --r-sm: .25rem;
    --r: .5rem;
    --r-md: .75rem;
    --r-lg: 1rem;
    --r-xl: 1.5rem;

    /*
       The container width — a floor, and no ceiling.

       DESIGN.md specifies container-max: 1200px, and on an ordinary laptop that is exactly what the
       `max(1200px, …)` floor produces. What a flat 1200px could not handle is the case nobody designs
       for: a browser zoomed out. At 33% zoom the CSS viewport is three times the screen, so a fixed
       column renders as a narrow strip stranded in an empty page — measured at 42% of the width,
       which is what the owner saw and reported.

       There is deliberately NO upper cap. The usual reason for one is line length, and every block of
       text here already carries its own `ch` limit — .prose 72ch, .section-head 64ch, .lead 62ch,
       .hero-sub 48ch, .cta-lead 54ch, .faq answers and field hints 80ch. So the extra width can only
       reach the card grids, and those are `auto-fit`: they answer it by adding columns, never by
       stretching a card.

       ⚠️ If a new full-width block of running text is ever added, give it a `ch` max-width. That is
       what makes the missing cap here safe.
    */
    --wrap: max(1200px, 92vw);
    --gutter: 24px;                /* spacing.gutter */

    --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* The brand mark is dark navy artwork on transparency. On a light surface it needs nothing. */
    --logo-pad: 0;
    --logo-bg: transparent;

    color-scheme: light;
}

/* ── Dark ─────────────────────────────────────────────────────────────────────────────────────
   Derived from the same token set rather than invented: the design file already carries the
   inverse pair — `inverse-primary: #b2c5ff` and `on-primary-fixed: #001848` — which is exactly the
   Material dark primary and its foreground. The neutrals follow the same tonal steps downward.

   Applied twice: once for the system preference, once for an explicit choice. The
   `:not([data-theme="light"])` guard is what lets somebody on a dark-set OS still choose light. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #b2c5ff;
        --primary-container: #0040a2;
        --on-primary: #001848;
        --primary-fixed: #0040a2;
        --surface-tint: #b2c5ff;

        --secondary: #4cd6fb;
        --secondary-container: #004e5f;
        --on-secondary-container: #b3ebff;

        --bg: #111319;
        --surface: #191b23;
        --surface-2: #1e2029;
        --surface-3: #262933;

        --ink: #e3e2ec;
        --body: #c3c6d6;
        --muted: #8e919f;
        --line: #2e3038;
        --line-strong: #43464f;

        --error: #ffb4ab;
        --error-container: #93000a;
        --on-error-container: #ffdad6;

        --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .30);
        --shadow-lg: 0 2px 6px rgba(0, 0, 0, .40), 0 16px 36px rgba(0, 0, 0, .38);

        /* The logo is navy artwork — on a dark surface it would vanish. A light plate keeps the
           brand's own colours instead of inverting them into something that is not the logo. */
        --logo-pad: 5px 9px;
        --logo-bg: #ffffff;

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --primary: #b2c5ff;
    --primary-container: #0040a2;
    --on-primary: #001848;
    --primary-fixed: #0040a2;
    --surface-tint: #b2c5ff;

    --secondary: #4cd6fb;
    --secondary-container: #004e5f;
    --on-secondary-container: #b3ebff;

    --bg: #111319;
    --surface: #191b23;
    --surface-2: #1e2029;
    --surface-3: #262933;

    --ink: #e3e2ec;
    --body: #c3c6d6;
    --muted: #8e919f;
    --line: #2e3038;
    --line-strong: #43464f;

    --error: #ffb4ab;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .30);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .40), 0 16px 36px rgba(0, 0, 0, .38);

    --logo-pad: 5px 9px;
    --logo-bg: #ffffff;

    color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;              /* DESIGN.md: body text at 1.5× */
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--ink); margin: 0 0 .4em; font-weight: 700; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.22; letter-spacing: -.02em; }
h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); line-height: 1.28; font-weight: 600; }
h3 { font-size: 1.05rem; line-height: 1.35; font-weight: 600; }
p { margin: 0 0 .75em; }

.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;
}

.skip {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
    background: var(--primary); color: var(--on-primary); padding: 12px 20px;
    border-radius: 0 0 var(--r) 0;
}
.skip:focus { inset-inline-start: 0; }

:focus-visible { outline: 3px solid var(--surface-tint); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(100% - (2 * var(--gutter)), var(--wrap)); margin-inline: auto; }

@media (max-width: 640px) { :root { --gutter: 16px; } }   /* spacing.margin-mobile */

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────── */

/* Pill, per DESIGN.md — CTAs are deliberately a different shape from every informational card. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 22px; border-radius: 9999px; border: 1.5px solid transparent;
    font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-align: center;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-container); }

.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover { background: var(--primary-fixed); }

.btn-wa { background: var(--success); color: #06301a; }
.btn-wa:hover { background: #1fb757; }

.btn-lg { padding: 13px 28px; font-size: 1rem; flex-direction: column; line-height: 1.3; }
.btn-lg .cta-meta { font-size: .75rem; font-weight: 400; opacity: .85; }

/* ── Header ───────────────────────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky; top: 0; z-index: 50;
    /* Solid first, translucent second: a browser without color-mix() gets an opaque header rather
       than an unreadable transparent one. */
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.header-inner { display: flex; align-items: center; gap: 12px; padding: 8px 0; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
/* Height-driven so the wordmark stays undistorted whatever file replaces it. */
.brand img {
    height: 40px; width: auto;
    background: var(--logo-bg); padding: var(--logo-pad); border-radius: var(--r);
}

.site-nav { display: flex; gap: 2px; }
.site-nav a {
    padding: 7px 10px; border-radius: var(--r); color: var(--body); font-weight: 500;
    font-size: .92rem; white-space: nowrap;
}
.site-nav a:hover { background: var(--surface-3); color: var(--primary); text-decoration: none; }
.site-nav .nav-emg { color: var(--error); font-weight: 600; }
.site-nav .nav-emg:hover { background: var(--error-container); color: var(--on-error-container); }

.nav-toggle { flex: 1; }
.nav-toggle > summary { display: none; }

.header-search { display: flex; gap: 6px; flex: 0 1 260px; }
.header-search input {
    flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid var(--line-strong);
    border-radius: 9999px; font: inherit; font-size: .9rem;
    background: var(--surface-2); color: var(--ink);
}
.header-search input::placeholder { color: var(--muted); }
.header-search input:focus { border-color: var(--primary); outline: none; }
.header-search button {
    padding: 9px 16px; border: 0; border-radius: 9999px; background: var(--surface-3);
    color: var(--primary); font: inherit; font-weight: 600; cursor: pointer;
}
.header-search button:hover { background: var(--primary-fixed); }

.header-cta { flex-shrink: 0; }

/* ── Language switcher ─────────────────────────────────────────────────────────────────────── */

/* A <details>, like the mobile menu: it opens without a script, and every entry inside is a real
   link — which is also how a crawler discovers the other three languages. */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
    height: 38px; padding: 0 12px; border-radius: 9999px;
    border: 1px solid var(--line-strong); background: var(--surface-2);
    color: var(--body); font-size: .88rem; font-weight: 500; white-space: nowrap;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { background: var(--surface-3); color: var(--primary); }
.lang-switch ul {
    position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 160px; margin: 0; padding: 6px; list-style: none;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.lang-switch li a {
    display: block; padding: 8px 12px; border-radius: var(--r-sm);
    color: var(--body); font-size: .92rem; white-space: nowrap;
}
.lang-switch li a:hover { background: var(--surface-3); color: var(--primary); text-decoration: none; }
.lang-switch li a.is-current { color: var(--primary); font-weight: 600; background: var(--primary-fixed); }

@media (max-width: 1024px) { .lang-switch .lang-current { display: none; } }

/* Theme toggle — the two glyphs swap by CSS, so the button needs no script beyond the flip. */
.theme-toggle {
    flex-shrink: 0; width: 38px; height: 38px; padding: 0; border-radius: 9999px;
    border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--body);
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--primary); }
.theme-toggle .icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: inline; }
}
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-light { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: none; }

@media (max-width: 1024px) {
    .nav-toggle { flex: 0; }
    .nav-toggle > summary {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 40px; height: 40px; padding: 10px; cursor: pointer;
        border: 1px solid var(--line-strong); border-radius: var(--r); list-style: none;
    }
    .nav-toggle > summary::-webkit-details-marker { display: none; }
    .nav-toggle > summary span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

    .site-nav {
        position: absolute; inset-inline: var(--gutter); top: calc(100% + 8px);
        flex-direction: column; gap: 2px; padding: 10px;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    }
    .header-search { display: none; }
}

@media (max-width: 560px) {
    .brand img { height: 32px; }
    .header-cta { padding: 8px 12px; font-size: .84rem; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────── */

.hero { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.hero-inner {
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: center;
    padding: clamp(18px, 2.2vw, 32px) 0;
}
.hero h1 { margin-bottom: .3em; }
.hl { color: var(--primary); }
.hero-sub { font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); color: var(--body); max-width: 48ch; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.hero-badges li {
    background: var(--surface); border: 1px solid var(--line); border-radius: 9999px;
    padding: 5px 12px; font-size: .82rem; color: var(--body);
}
.hero-art { display: flex; justify-content: center; }
.hero-art img { width: min(100%, 330px); height: auto; }

/* The banner variant fills the column instead — it is a photograph, not a mark, so it wants the
   whole width. 16:8 because that is what the slider actually is (1280×640), and `fill` because
   nothing in the catalogue is ever cut. With a genuine 16:8 source in a 16:8 box, `fill` is
   pixel-for-pixel the same as `cover` — and it stays correct the day somebody uploads a banner that
   is not exactly 2:1. */
.hero-banner-link { display: block; width: 100%; }
.hero-art .hero-banner {
    width: 100%; max-width: none; aspect-ratio: 16 / 8; object-fit: fill;
    border-radius: var(--r-lg); box-shadow: var(--shadow);
}

@media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; gap: 16px; }
    .hero-art { order: -1; }
    .hero-art img { width: min(56%, 200px); }
    /* …except the banner, which stays full width on a phone. */
    .hero-art .hero-banner { width: 100%; }
}

/* ── Sections ─────────────────────────────────────────────────────────────────────────────── */

.section { padding: clamp(22px, 2.4vw, 36px) 0; }
.section-head { margin-bottom: 16px; max-width: 64ch; }
.section-head p { color: var(--body); margin: 0; font-size: .95rem; }
.section-more { margin-top: 14px; font-weight: 600; }

.band {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: clamp(18px, 2vw, 28px); margin-block: 18px;
}

.empty {
    background: var(--surface); border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg); padding: 26px; text-align: center; color: var(--body);
}

.notice { text-align: center; padding-block: clamp(40px, 7vw, 84px); }
.status-code { font-size: 3.5rem; font-weight: 700; color: var(--line-strong); margin: 0; line-height: 1; }

/* ── Cards ────────────────────────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 16px; }
.grid-cats { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-emergency { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/*
   The service list on a category page: THREE PER ROW at a normal window, no size overrides on the
   card itself (owner, 2026-09-01). Two across made each card so large it read as a banner; one
   across worse. Three is the ordinary grid, and the card is the ordinary card — the picture on top,
   the text under it, the same type sizes as every other card on the site.

   Counted columns rather than `auto-fit, minmax(...)`. auto-fit sets the count from a minimum card
   WIDTH, so the count it lands on depends on the reader's monitor: the same rule that shows three on
   a 1440-wide window shows four on a 1920 one, and "three at 100%" is the thing being asked for.
   The bands below are wide enough that every ordinary desktop — 1280, 1366, 1440, 1536, 1600, 1920 —
   sits inside the three-column band, while zooming still moves between bands: out past 2200 gives
   four, in under 1100 gives two, and a phone gets one.
*/
.grid-services { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 2200px) {
    /* A very wide monitor, or the page zoomed out. Past this the cards are wider than a photograph
       needs to be and the row looks empty rather than generous. */
    .grid-services { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1099px) {
    /* Tablet, or zoomed in past ~175%: three 16:9 pictures across are three thumbnails. */
    .grid-services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 699px) {
    .grid-services { grid-template-columns: 1fr; gap: 14px; }
}

/* DESIGN.md: depth from the white card against the gray page, not from heavy borders. */
.card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow); color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover {
    text-decoration: none; transform: translateY(-2px);
    box-shadow: var(--shadow-lg); border-color: var(--line-strong);
}

/* ⚠️ NOTHING IN THE CATALOGUE IS EVER CUT.
   That is the app's rule, written in its own code (MainScreen.kt, CategoryCard):

       // One rule, no exceptions: nothing in the catalogue is ever cut.
       NetworkImage(image, …, contentScale = ContentScale.FillBounds)

   and it is there because the app's detail screen once cropped a 4:3 picture into a 16:9 box on the
   reasoning that the two "should" match. The stored tile images are not one ratio — measured on
   production they run 1920×1646, 1264×842, 1024×1024, 1200×686 — so any `cover` crops most of them,
   and it crops the part the owner framed.

   `object-fit: fill` is the CSS spelling of FillBounds: the picture is scaled to the box in both
   axes and nothing leaves it. The web follows the app here rather than inventing a second rule. */
.card-media {
    aspect-ratio: 4 / 3; background: var(--surface-3);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-media.wide { aspect-ratio: 16 / 9; }
.card-media img { width: 100%; height: 100%; object-fit: fill; }
.card-fallback { font-size: 2rem; opacity: .5; }

.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin: 0 0 4px; }
.card-body p {
    color: var(--body); font-size: .85rem; line-height: 1.5; margin: 0 0 10px;
    /* Two lines then ellipsis, so one long description cannot leave a hole in the grid. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta {
    margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: .82rem; color: var(--muted);
}
/* DESIGN.md: every card ends in a chevron link at its trailing edge. */
.card-go { color: var(--primary); font-weight: 600; }
.card-go::after { content: " ‹"; }

.price { color: var(--primary); font-weight: 700; }
.price-lg { font-size: 1.4rem; }
.price-ask { color: var(--muted); font-size: .84rem; }
.price-note { color: var(--muted); font-size: .84rem; }

/* ── Banners ──────────────────────────────────────────────────────────────────────────────── */

/* ⚠️ The slider is 16:8 — measured, not assumed: the published banner is 1280×640 exactly.
   An earlier build put it in a 16:9 box with `cover` and sliced the logo off its right edge.
   Height is never capped here: a max-height under an aspect-ratio is a crop wearing a different
   name. What is capped is the WIDTH, which keeps the banner off half the screen while leaving the
   picture whole. */
.banners {
    display: grid; gap: 14px; padding-top: 18px;
    max-width: 820px; margin-inline: auto;
}
.banner {
    position: relative; display: block; overflow: hidden; margin: 0;
    border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.banner img { width: 100%; aspect-ratio: 16 / 8; object-fit: fill; }
.banner-title, .banner figcaption {
    position: absolute; inset-inline-start: 18px; bottom: 14px;
    background: rgba(23, 43, 77, .78); color: #fff;
    padding: 7px 15px; border-radius: 9999px; font-weight: 600; font-size: .92rem;
}

/* ── Emergency ────────────────────────────────────────────────────────────────────────────── */

/* Above the catalogue on the home page, and the one place on this site where shouting is correct:
   somebody who needs an ambulance must not have to read a grid of specialities first. */
.emg-strip {
    display: flex; align-items: center; gap: 14px; margin-top: 16px;
    padding: 13px 18px; border-radius: var(--r-lg);
    background: var(--error-container); border: 1px solid transparent; color: var(--ink);
}
.emg-strip:hover { text-decoration: none; box-shadow: var(--shadow); border-color: var(--error); }
.emg-strip-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.emg-strip-text { display: flex; flex-direction: column; }
.emg-strip-text strong { color: var(--on-error-container); font-size: 1rem; }
.emg-strip-text span { color: var(--body); font-size: .87rem; }
.emg-strip-go { margin-inline-start: auto; color: var(--on-error-container); font-size: 1.4rem; flex-shrink: 0; }

.eyebrow { color: var(--error); font-weight: 700; font-size: .88rem; margin: 0 0 .3em; }

.emg-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow);
}
.emg-card h2 { font-size: 1.1rem; margin-bottom: .3em; }
.emg-card > p { color: var(--body); font-size: .92rem; }
.emg-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 6px; }

.tick-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.tick-list li { position: relative; padding-inline-start: 22px; font-size: .89rem; color: var(--body); }
.tick-list li::before {
    content: "✓"; position: absolute; inset-inline-start: 0; color: var(--success); font-weight: 700;
}

.gov-list li span {
    display: inline-block; background: var(--surface); border: 1px solid var(--line);
    border-radius: 9999px; padding: 6px 14px; font-size: .86rem; color: var(--body);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────────────────────── */

.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding-top: 16px; font-size: .86rem; color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumb-sep { color: var(--line-strong); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ── Detail pages ─────────────────────────────────────────────────────────────────────────── */

.detail-head {
    display: grid; grid-template-columns: 1fr .9fr; gap: 24px; align-items: center;
    padding: clamp(16px, 2vw, 28px) 0 4px;
}
.detail-head.single { grid-template-columns: 1fr; }
.detail-media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.detail-parent { color: var(--muted); font-size: .9rem; margin-bottom: .5em; }
.lead { font-size: 1.05rem; color: var(--body); max-width: 62ch; }
.lead-meta { color: var(--body); font-weight: 600; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 6px; }

@media (max-width: 860px) {
    .detail-head { grid-template-columns: 1fr; }
    .detail-media { order: -1; }
}

/* ── Request fields ───────────────────────────────────────────────────────────────────────── */

.field-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.field-list > li {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 13px 15px;
}
.field-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field-head strong { color: var(--ink); }
.field-unit { color: var(--muted); font-weight: 400; font-size: .88rem; }
.field-hint { color: var(--body); font-size: .88rem; margin: 5px 0 0; max-width: 80ch; }
.field-options { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 9px 0 0; }
.field-options li {
    background: var(--surface-3); border: 1px solid transparent;
    border-radius: 9999px; padding: 3px 12px; font-size: .82rem; color: var(--body);
}
.field-options .muted { border-color: var(--line-strong); background: transparent; }

/* DESIGN.md chips: light blue plate, dark blue text. */
.tag {
    background: var(--primary-fixed); color: var(--primary); border-radius: 9999px;
    padding: 2px 10px; font-size: .75rem; font-weight: 600;
}
.tag-req { background: var(--secondary-container); color: var(--on-secondary-container); }

/* ── Steps & features ─────────────────────────────────────────────────────────────────────── */

.steps, .feature-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    counter-reset: step;
}
.steps li, .feature-list li {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.steps li { counter-increment: step; padding-top: 40px; position: relative; }
.steps li::before {
    content: counter(step);
    position: absolute; top: 12px; inset-inline-start: 16px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary);
    display: grid; place-items: center; font-weight: 700; font-size: .86rem;
}
.steps li strong, .feature-list li strong { color: var(--ink); font-size: .97rem; }
.steps li span, .feature-list li span { color: var(--body); font-size: .87rem; line-height: 1.5; }

/* ── Chips / pills ────────────────────────────────────────────────────────────────────────── */

.chips, .spec-list, .pill-links {
    display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0;
}
.chips li, .spec-list li {
    background: var(--primary-fixed); color: var(--primary);
    border-radius: 9999px; padding: 7px 16px; font-weight: 500; font-size: .9rem;
}

.pill-links a {
    display: inline-block; background: var(--surface); border: 1px solid var(--line);
    border-radius: 9999px; padding: 7px 16px; color: var(--body); font-weight: 500; font-size: .9rem;
}
.pill-links a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-fixed); text-decoration: none; }
.pill-links .pill-all { border-color: var(--primary); color: var(--primary); }

.related { border-top: 1px solid var(--line); }

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────── */

.faq-list { display: grid; gap: 9px; }
.faq-list details {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 2px 18px;
}
.faq-list summary {
    cursor: pointer; font-weight: 600; color: var(--ink); padding: 11px 0; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: "+"; color: var(--primary); font-size: 1.35rem; font-weight: 400; line-height: 1;
}
.faq-list details[open] summary::after { content: "−"; }
/* The container has no upper width — see --wrap. Every run of text carries its own limit instead,
   and an answer is the longest one on these pages. */
.faq-list details p { margin: 0 0 12px; color: var(--body); font-size: .93rem; max-width: 80ch; }
.faq-list summary { max-width: 80ch; }

/* ── Call to action ───────────────────────────────────────────────────────────────────────── */

.cta { text-align: center; margin-block: clamp(20px, 3vw, 36px); }
.cta-boxed {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
    color: #fff; border-radius: var(--r-lg); padding: clamp(24px, 3.2vw, 40px);
    box-shadow: var(--shadow-lg);
}
.cta-boxed h2, .cta-boxed .cta-lead { color: #fff; }
.cta-boxed .btn-primary { background: #fff; color: var(--primary); }
.cta-boxed .btn-primary:hover { background: var(--primary-fixed); }
.cta-boxed .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .55); }
.cta-boxed .btn-ghost:hover { background: rgba(255, 255, 255, .2); }
.cta-lead { font-size: 1.1rem; font-weight: 600; max-width: 54ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 18px 0 10px; }
.cta-note { font-size: .84rem; opacity: .85; margin: 0; }

/* ── Search ───────────────────────────────────────────────────────────────────────────────── */

/* DESIGN.md: booking-context inputs are at least 48px tall. */
.search-form { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 24px; }
.search-form input {
    flex: 1; min-width: 0; min-height: 48px; padding: 12px 20px;
    border: 1px solid var(--line-strong); border-radius: 9999px; font: inherit;
    background: var(--surface); color: var(--ink);
}
.search-form input::placeholder { color: var(--muted); }
.search-form input:focus { border-color: var(--primary); outline: none; }

.result-count { color: var(--body); font-size: .9rem; }

.hit-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 9px; }
.hit-list a {
    display: flex; align-items: center; gap: 14px; padding: 11px 13px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); color: inherit;
}
.hit-list a:hover { border-color: var(--primary); text-decoration: none; background: var(--surface-2); }
.hit-media {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--r);
    background: var(--surface-3); display: grid; place-items: center; overflow: hidden; font-size: 1.3rem;
}
.hit-media img { width: 100%; height: 100%; object-fit: cover; }
.hit-body { display: flex; flex-direction: column; }
.hit-body strong { color: var(--ink); }
.hit-kind { font-size: .83rem; color: var(--muted); }

/* ── Prose ────────────────────────────────────────────────────────────────────────────────── */

.prose { max-width: 72ch; }
.prose p { color: var(--body); }
.prose h2 { margin-top: 1.5em; }

.contact-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 22px; margin-top: 28px;
}
.contact-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.contact-list li { display: flex; gap: 12px; align-items: baseline; }
.contact-list span { color: var(--muted); font-size: .86rem; min-width: 64px; }

.app-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

/* ── Footer ───────────────────────────────────────────────────────────────────────────────── */

.site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 40px; }
.footer-grid {
    display: grid; gap: 28px; padding: clamp(28px, 3.5vw, 44px) 0 26px;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.footer-brand img {
    width: 180px; height: auto; margin-bottom: 12px;
    background: var(--logo-bg); padding: var(--logo-pad); border-radius: var(--r);
}
.footer-brand p { color: var(--body); font-size: .9rem; max-width: 40ch; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h2 { font-size: .95rem; margin: 0 0 4px; }
.footer-col a { color: var(--body); font-size: .9rem; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
    border-top: 1px solid var(--line); padding: 16px 0;
    font-size: .84rem; color: var(--muted); text-align: center;
}

@media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* Somebody who asked their system for less motion asked for a reason. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}