/* Clinical: after instalanding.ai's halden-clinical-equipment-page (MIT; visual language only).
   A service bench's paperwork: ink and paper bands in turn, Geist Light at a large size with
   one serif-italic phrase per headline, Geist Mono for every label and figure, hairlines
   and 18px cards with no shadows, pill buttons whose cobalt fill is wiped over by ink (or
   paper) from the left. One cobalt signal; monitor green is kept for the ECG trace.
   Suits clinics, physios, dentists, vets, labs, opticians, accountants who want calm.

   Bands: the opening, the footer, the pricing section and every odd-numbered section of
   <main> are ink; the rest are paper. Each band re-points the colour tokens at the
   --i-* (ink) or --p-* (paper) set, so a variant only has to change those. */

:root[data-theme="clinical"] {
  /* motion below the hero (see base.css) */
  --reveal-y: 18px; --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --nav-lift: 0 1px 0 rgb(243 245 246 / 0.1); --hero-in: rise; --reveal-in: rise;

  /* paper */
  --p-bg: #f3f5f6;
  --p-bg-soft: #e2e7ea;
  --p-surface: #e9edef;
  --p-ink: #090c0e;
  --p-ink-2: #1a2329;
  --p-muted: #4b545b;
  --p-line: #d3d9dc;
  --p-line-strong: #8a959b;
  --p-accent: #2b46ff;
  --p-glass: rgb(243 245 246 / 0.9);
  --p-wipe: #090c0e;
  --p-wipe-ink: #f3f5f6;
  /* ink */
  --i-bg: #090c0e;
  --i-bg-soft: #131a1e;
  --i-surface: #0f1417;
  --i-ink: #f3f5f6;
  --i-ink-2: #d3d9dc;
  --i-muted: #8a959b;
  --i-line: rgb(243 245 246 / 0.14);
  --i-line-strong: rgb(243 245 246 / 0.34);
  --i-accent: #7d8cff;
  --i-glass: rgb(9 12 14 / 0.88);
  --i-wipe: #f3f5f6;
  --i-wipe-ink: #090c0e;

  --cobalt: #2b46ff;
  --live: #3fd99a;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --bg: var(--p-bg);
  --bg-soft: var(--p-bg-soft);
  --surface: var(--p-surface);
  --ink: var(--p-ink);
  --ink-2: var(--p-ink-2);
  --muted: var(--p-muted);
  --line: var(--p-line);
  --line-strong: var(--p-line-strong);
  --accent: var(--p-accent);
  --glass: var(--p-glass);
  --glass-border: var(--line);
  --wipe: var(--p-wipe);
  --wipe-ink: var(--p-wipe-ink);
  --primary: var(--cobalt);
  --primary-ink: #ffffff;

  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --display-weight: 300;
  --display-tracking: -0.04em;
  --display-leading: 0.98;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 18px;
  --shadow: none;
  --card-border: 1px solid var(--line);

  /* placeholders: clinical-grey tints under faint scan lines */
  --scan: repeating-linear-gradient(0deg, rgb(9 12 14 / 0.05) 0 1px, transparent 1px 9px);
  --ph-1: var(--scan), linear-gradient(135deg, #e6eaec, #cdd5d9);
  --ph-2: var(--scan), linear-gradient(135deg, #e1e6fb, #c4cdf3);
  --ph-3: var(--scan), linear-gradient(135deg, #dcebe6, #bfd6cd);
  --ph-4: var(--scan), linear-gradient(135deg, #eaeaee, #d3d4dc);
  --ph-5: var(--scan), linear-gradient(135deg, #e0eaee, #c2d3da);
  --ph-6: var(--scan), linear-gradient(135deg, #e8e6ec, #d1cdd9);

  & body { background: var(--bg); color: var(--ink); font-size: 17px; letter-spacing: -0.005em; }
  & ::selection { background: var(--cobalt); color: #ffffff; }
  & :focus-visible { outline-color: var(--accent); }
  & h2 { font-size: clamp(34px, 5.2vw, 76px); letter-spacing: -0.045em; line-height: 0.96; }
  & h3 { font-size: 24px; letter-spacing: -0.03em; }
  & h4 { font-size: 22px; letter-spacing: -0.025em; }
  & .lead { font-size: clamp(18px, 1.8vw, 24px); font-weight: 350; line-height: 1.45; letter-spacing: -0.015em; color: var(--ink-2); }
  & .note { color: var(--muted); }

  /* the highlighted phrase: serif italic, no background */
  & mark { background: none; color: inherit; font: italic 400 1.1em/0.9 var(--font-serif); letter-spacing: -0.01em; }

  /* ---------- bands ---------- */
  & :is(.nav, .callbar, .cl-hero, .footer, main > .pricing, main > .section:nth-child(odd)) {
    --bg: var(--i-bg);
    --bg-soft: var(--i-bg-soft);
    --surface: var(--i-surface);
    --ink: var(--i-ink);
    --ink-2: var(--i-ink-2);
    --muted: var(--i-muted);
    --line: var(--i-line);
    --line-strong: var(--i-line-strong);
    --accent: var(--i-accent);
    --glass: var(--i-glass);
    --wipe: var(--i-wipe);
    --wipe-ink: var(--i-wipe-ink);
    color: var(--ink);
    color-scheme: dark;
  }
  & :is(.cl-hero, .footer, main > .pricing, main > .section:nth-child(odd)) {
    background: var(--bg) var(--grain);
  }
  & main > .section:not(:nth-child(odd), .pricing) { background: var(--bg); }
  & main > .section { border-top: 1px solid var(--line); }

  /* mono labels */
  & :is(.eyebrow, .pill, .index, .stat dt, .field label, .hours caption, .footer-title, .review-source, .book-day-name, .book-range, .book-option-meta, .cl-spread, .cl-address, .group-title) {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  }
  & .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); }
  & .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  & .pill { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); padding: 6px 12px; }
  & :is(main, .footer) a:not(.btn) { text-decoration: underline dashed; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  & :is(main, .footer) a:not(.btn):hover { text-decoration-style: solid; color: var(--accent); }

  /* ---------- buttons: pills; the fill wipes in from the left ---------- */
  & .btn {
    position: relative; overflow: hidden; isolation: isolate;
    height: 48px; padding: 0 24px;
    font: 500 14px/1 var(--font-body); letter-spacing: 0;
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  & .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--wipe); transform: scaleX(0); transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  & .btn:hover { transform: none; }
  & .btn:is(:hover, :focus-visible)::before { transform: scaleX(1); }
  & .btn:disabled::before { display: none; }
  & .btn-sm { height: 40px; padding: 0 18px; }
  & .btn-primary { background: var(--cobalt); color: #ffffff; border-color: var(--cobalt); }
  & .btn-primary:is(:hover, :focus-visible):not(:disabled) { color: var(--wipe-ink); border-color: var(--wipe); }
  & .btn-ghost { color: var(--ink); border-color: var(--line-strong); }
  & .btn-ghost:is(:hover, :focus-visible):not(:disabled) { color: var(--wipe-ink); border-color: var(--wipe); }
  & .btn .plus { font-family: var(--font-mono); }

  /* ---------- cards ---------- */
  & .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }

  /* ---------- nav ---------- */
  & .nav { background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
  & .nav-inner { height: 60px; }
  & .brand-mark { background: var(--cobalt); color: #ffffff; font: 500 15px/1 var(--font-body); }
  & .brand-name { font-weight: 500; letter-spacing: -0.025em; }
  & .nav-links a, & .nav-phone { font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
  & .nav-links a:hover, & .nav-phone:hover { color: var(--accent); }
  & .nav-menu summary { border-color: var(--line-strong); }
  & .nav-menu ul { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
  & .nav-menu a:hover { background: var(--bg-soft); }
  & .callbar { background: var(--glass); }

  /* ---------- hero ---------- */
  & .cl-hero { padding-block: clamp(18px, 3vw, 32px) 0; position: relative; overflow: hidden; }
  & .cl-hero .wrap { width: min(1320px, 100% - 2 * var(--gutter)); position: relative; }
  & .cl-light { display: none; }
  & .cl-spread {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
    margin: 0 0 clamp(40px, 8vw, 112px); padding: 10px 0 12px; border-bottom: 1px solid var(--line); color: var(--muted);
  }
  & .cl-spread a { color: inherit; }
  & .cl-hero h1 { font-size: clamp(42px, 9.4vw, 136px); letter-spacing: -0.05em; line-height: 0.94; max-width: 15ch; overflow-wrap: break-word; }
  & .cl-hero .lead { margin: clamp(22px, 3vw, 36px) 0 0; max-width: 46ch; }
  & .cl-photo { margin-top: 40px; aspect-ratio: 16 / 9; height: auto; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }

  /* the ECG trace: complete and static unless motion is allowed, then a green head runs along it */
  & .cl-ecg { display: block; width: 100%; height: clamp(72px, 8.33vw, 160px); margin-top: clamp(36px, 6vw, 80px); overflow: visible; }
  & .cl-ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  & .cl-ecg-base { stroke: var(--live); stroke-opacity: 0.2; stroke-width: 1.5; }
  & .cl-ecg-tail { display: none; stroke: var(--live); stroke-opacity: 0.5; stroke-width: 2; }
  & .cl-ecg-head { stroke: var(--live); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--live)); }
  & .cl-address {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
    margin: 0; padding: 16px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2);
  }
  & .cl-address a { color: inherit; }

  /* ---------- sections ---------- */
  & .section-head h2 { max-width: 16ch; }
  & .highlights { border-block: 1px solid var(--line); background: var(--bg); }
  & .marquee-track { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; color: var(--ink-2); }
  & .marquee-track li::after { content: "/"; color: var(--accent); }

  /* services: a rate card, one ruled line per service */
  & .group-title { margin-bottom: 8px; padding-top: 0; border-top: 0; color: var(--muted); font-weight: 400; }
  & .service-group + .service-group { margin-top: 56px; }
  & .services-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  & .services-grid > li:last-child { border-bottom: 1px solid var(--line); }
  & .service.card {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) 110px 120px auto; column-gap: 20px; row-gap: 6px; align-items: baseline;
    padding: 22px 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  }
  & .service-top, & .service-foot { display: contents; }
  & .service .index { grid-column: 1; grid-row: 1; color: var(--muted); }
  & .service-name { grid-column: 2; grid-row: 1; font-size: clamp(21px, 2.3vw, 30px); font-weight: 350; letter-spacing: -0.03em; line-height: 1.1; }
  & .service .pill { grid-column: 3; grid-row: 1; justify-self: start; padding: 0; border: 0; color: var(--muted); }
  & .service .price { grid-column: 4; grid-row: 1; justify-self: end; font: 400 15px/1 var(--font-mono); letter-spacing: 0; }
  & .service-foot .btn { grid-column: 5; grid-row: 1; align-self: center; }
  & .service-foot > span:not(.price) { display: none; }
  & .service-desc { grid-column: 2 / 5; grid-row: 2; max-width: 60ch; color: var(--muted); }
  @media (max-width: 759px) {
    & .service.card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    & .service .index { grid-column: 1; grid-row: 1; }
    & .service .pill { grid-column: 2; grid-row: 1; justify-self: end; }
    & .service-name { grid-column: 1 / -1; grid-row: 2; }
    & .service-desc { grid-column: 1 / -1; grid-row: 3; }
    & .service .price { grid-column: 1; grid-row: 4; justify-self: start; padding-top: 6px; }
    & .service-foot .btn { grid-column: 2; grid-row: 4; }
  }

  & .about-media, & .gallery-item, & .hero-media, & .map { border-radius: 18px; }
  & .ph-label { background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-line); font: 400 10.5px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
  & .about-copy p:not(.eyebrow) { color: var(--ink-2); }
  & .stat { border-top: 1px solid var(--line); }
  & .stat dt { color: var(--muted); }
  & .stat dd { font: 300 clamp(36px, 4vw, 52px)/1 var(--font-display); letter-spacing: -0.045em; }

  & .review { padding: 28px; }
  & .stars { color: var(--accent); }
  & .review blockquote p { margin: 0; font-size: clamp(19px, 1.7vw, 23px); font-weight: 350; line-height: 1.4; letter-spacing: -0.02em; }
  & .review-author { font-weight: 500; }
  & .review-source { color: var(--muted); }

  /* ---------- layouts: master, figures, cases ---------- */
  /* master: the questions as an index, the chosen answer in a panel of Geist Light */
  & .master-tab { padding-left: 16px; font-size: 19px; font-weight: 350; letter-spacing: -0.02em; color: var(--ink-2); transition: background-color 0.2s ease, color 0.2s ease; }
  & .master-n { color: var(--muted); }
  & .master-tab:hover { background: var(--bg-soft); }
  & .master-tab[aria-selected="true"] { color: var(--ink); font-weight: 350; box-shadow: inset 3px 0 0 var(--accent); }
  & .master-tab[aria-selected="true"] .master-n { color: var(--accent); }
  & .master-item { border-radius: 18px; }
  & .master-q { font-size: clamp(26px, 3.4vw, 46px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
  & .master-a { font-size: 19px; font-weight: 350; line-height: 1.5; letter-spacing: -0.01em; }

  /* figures: huge Geist Light numbers, each with a serif-italic phrase */
  & .figures-head h2 { max-width: 18ch; }
  & .fig-n { font-weight: 300; }
  & .fig-l { font: italic 400 clamp(22px, 2.2vw, 30px)/1.15 var(--font-serif); letter-spacing: -0.01em; color: var(--ink-2); }
  & .figures-body p { font-weight: 350; letter-spacing: -0.01em; }

  /* cases: a case note headed by its mono reference */
  & .case figure { border-radius: 18px; }
  & .case-ref { color: var(--ink-2); text-transform: uppercase; }
  & .case-head { font-family: var(--font-mono); }
  & .case blockquote p { font-size: clamp(19px, 1.7vw, 22px); font-weight: 350; line-height: 1.4; letter-spacing: -0.02em; }
  & .case .review-source { display: block; }

  /* pricing: an ink band holding a panel of plans */
  & .pricing-slab { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; }
  & .pricing-slab .lead { color: var(--ink-2); opacity: 1; }
  & .pricing-slab .eyebrow { color: var(--muted); opacity: 1; }
  & .plan { border: 1px solid var(--line-strong); border-radius: 18px; }
  & .plan.featured {
    --bg: var(--p-bg); --bg-soft: var(--p-bg-soft); --surface: var(--p-bg); --ink: var(--p-ink); --ink-2: var(--p-ink-2);
    --muted: var(--p-muted); --line: var(--p-line); --line-strong: var(--p-line-strong); --accent: var(--p-accent);
    --wipe: var(--p-wipe); --wipe-ink: var(--p-wipe-ink);
    background: var(--p-bg); color: var(--p-ink); border-color: var(--p-bg); box-shadow: none;
  }
  & .plan-flag { background: var(--cobalt); color: #ffffff; border-color: var(--cobalt); }
  & .plan-price .mono { font: 300 clamp(40px, 5vw, 60px)/1 var(--font-display); letter-spacing: -0.05em; }
  & .plan-period { font-family: var(--font-mono); font-size: 12px; opacity: 1; color: var(--muted); }
  & .plan-features li::before { content: "+"; font-family: var(--font-mono); color: var(--accent); }

  & .faq-item, & .faq-item:first-child { border-color: var(--line); }
  & .faq-item summary { font-size: clamp(19px, 2vw, 24px); font-weight: 350; letter-spacing: -0.025em; }
  & .faq-item summary::after {
    display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%;
    font: 400 18px/1 var(--font-mono); transition: transform 0.25s ease, background-color 0.2s ease;
  }
  & .faq-item[open] summary::after { background: var(--cobalt); border-color: var(--cobalt); color: #ffffff; }
  & .faq-item p { color: var(--ink-2); }

  & .chips .pill { padding: 9px 16px; font-size: 12px; }

  & .visit-card h2 { font-size: clamp(34px, 4vw, 56px); }
  & .hours caption { color: var(--muted); padding-bottom: 6px; }
  & .hours th, & .hours td { border-bottom: 1px solid var(--line); }
  & .hours td { font-size: 14px; }
  & .map { border: 1px solid var(--line); background: var(--bg-soft); }
  & .map iframe { filter: grayscale(1) contrast(1.05); }

  & .field label { color: var(--muted); }
  & .field input, & .field textarea { border-radius: 12px; background: var(--bg-soft); color: var(--ink); border-color: var(--line); }
  & .field input:focus, & .field textarea:focus { outline-color: var(--accent); border-color: var(--accent); }
  & .form .sent { border-radius: 12px; border-color: var(--accent); }

  /* booking */
  & .book-option, & .book-time, & .book-day { border-radius: 12px; background: var(--bg-soft); border-color: var(--line); }
  & .book-option:has(input:checked), & .book-time:has(input:checked), & .book-day[aria-pressed="true"] {
    background: var(--cobalt); border-color: var(--cobalt); color: #ffffff;
  }
  & .book-option-meta { text-transform: none; letter-spacing: 0.02em; color: var(--muted); }
  & .book-option:has(input:checked) .book-option-meta { color: #ffffff; opacity: 0.9; }
  & .book-time { font-family: var(--font-mono); font-size: 13px; }
  & .book-day-num { font-family: var(--font-mono); font-weight: 400; }
  & .book-range { color: var(--ink-2); }

  /* footer */
  & .footer { padding: 0; background: var(--bg) var(--grain); border-top: 1px solid var(--line); }
  & .footer-card { background: none; color: var(--ink); border-radius: 0; padding: clamp(48px, 7vw, 96px) 0 32px; }
  & .footer-name { font: 300 clamp(30px, 4.4vw, 56px)/1 var(--font-display); letter-spacing: -0.045em; }
  & .footer-title { color: var(--muted); opacity: 1; }
  & .footer-base { font: 400 11.5px/1.5 var(--font-mono); letter-spacing: 0.06em; border-top-color: var(--line); opacity: 1; color: var(--muted); }
  & .footer .btn { margin-top: 12px; }

  /* ---------- motion ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .cl-ecg-tail { display: block; stroke-dasharray: 35 200; --len: 35; }
      & .cl-ecg-head { stroke-dasharray: 8 200; --len: 8; }
      & .cl-ecg-tail, & .cl-ecg-head {
        animation-name: cl-trace; animation-duration: 5.5s; animation-timing-function: linear; animation-iteration-count: infinite;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    & .btn, & .btn::before, & .faq-item summary::after, & .master-tab { transition: none; }
  }
  &[data-motion="none"] :is(.btn, .btn::before, .faq-item summary::after, .master-tab) { transition: none; }
}

@keyframes cl-trace {
  from { stroke-dashoffset: var(--len); }
  to { stroke-dashoffset: calc(var(--len) - 135); }
}