/* Deepcar Night: design tokens v0.2 (31 Oct 2026, SOP homepage; v0.1 is frozen in snapshots/).
   Dr Ibraheem picked the Night homepage (mono-designs staging, 29 Oct) to refine. Every value the
   components use comes from here. Three layers:
     1. primitives  the grey ramp and the signal colours, named by lightness (grey-17 is ~17% light)
     2. roles       what a colour does (ground, ink, text, line, button); components read only these
     3. scopes      .on-light and .on-white flip the roles for a light band, so the same component
                    works on black, on the grey implants band and on the white closing band
   Role names follow the Astro build (src/styles/v2/tokens.css, --dc-*) so this ports across as is. */

@font-face { font-family: "Red Hat Display"; src: url(fonts/red-hat-display-latin-var.woff2) format("woff2"); font-weight: 300 900; font-display: optional; }
@font-face { font-family: "Red Hat Text"; src: url(fonts/red-hat-text-latin-var.woff2) format("woff2"); font-weight: 300 700; font-display: optional; }
/* Arial reshaped to the Red Hat cuts (tools/fallback-metrics.mjs), so the swap moves nothing */
@font-face { font-family: "Red Hat Display Fallback"; src: local("Arial"); size-adjust: 98.69%; ascent-override: 103.36%; descent-override: 31.41%; line-gap-override: 0%; }
@font-face { font-family: "Red Hat Text Fallback"; src: local("Arial"); size-adjust: 98.34%; ascent-override: 103.72%; descent-override: 31.52%; line-gap-override: 0%; }
@font-face { font-family: "Manrope"; src: url(fonts/manrope-latin.woff2) format("woff2"); font-weight: 200 800; font-display: optional; }   /* the logo only */

:root {
  /* 1. primitives: the grey ramp */
  --dc-grey-0: #000;
  --dc-grey-8: #141414;
  --dc-grey-11: #1c1c1c;
  --dc-grey-17: #2b2b2b;
  --dc-grey-20: #333;
  --dc-grey-29: #4a4a4a;
  --dc-grey-36: #5c5c5c;
  --dc-grey-46: #757575;            /* form field outlines: 3:1 or better on black, grey and white */
  --dc-grey-63: #a0a0a0;
  --dc-grey-74: #bdbdbd;
  --dc-grey-83: #d4d4d4;
  --dc-grey-89: #e4e4e4;
  --dc-grey-94: #f0f0f0;
  --dc-grey-100: #fff;
  --dc-grey-12: #1f1f1f;   /* body text on the light bands */

  /* 1. primitives: signals (standing rules: call is green, emergency is red) */
  --dc-green-call: #16794a;
  --dc-green-call-deep: #0f5e39;
  --dc-green-brand: #0f5e4b;        /* the logo full stop on light */
  --dc-green-brand-lift: #3fae7f;   /* the logo full stop on black */
  --dc-red: #c0352b;
  --dc-red-lift: #ff7f73;           /* emergency on black */
  --dc-red-tint: #fbeceb;
  --dc-gold-star: #e0a100;           /* review stars only */

  /* 2. roles, dark (the default: the page is black) */
  --dc-shadow-float: 0 18px 50px rgba(0,0,0,.45);
  --dc-color-ground: var(--dc-grey-0);
  --dc-color-raised: var(--dc-grey-8);        /* cards and panels sitting on the ground */
  --dc-color-raised-2: var(--dc-grey-11);     /* hover, the dock, a panel inside a panel */
  --dc-color-ink: var(--dc-grey-100);         /* headings, figures, emphasis */
  --dc-color-text: var(--dc-grey-89);         /* reading text */
  --dc-color-text-2: var(--dc-grey-63);       /* secondary: captions, labels, notes */
  --dc-color-line: var(--dc-grey-17);         /* hairlines between rows */
  --dc-color-line-2: var(--dc-grey-29);       /* firmer rules, chip outlines */
  --dc-color-field-line: var(--dc-grey-46);   /* form fields and choice chips: must stay visible (WCAG 1.4.11) */
  --dc-color-btn: var(--dc-grey-100);
  --dc-color-on-btn: var(--dc-grey-0);
  --dc-color-btn-hover: var(--dc-grey-63);    /* hovers must change colour obviously */
  --dc-color-call: var(--dc-green-call);
  --dc-color-call-hover: var(--dc-green-call-deep);
  --dc-color-on-call: var(--dc-grey-100);
  --dc-color-on-alert: var(--dc-grey-100);
  --dc-color-emergency: var(--dc-red-lift);
  --dc-color-alert: var(--dc-red);
  --dc-color-alert-tint: var(--dc-red-tint);
  --dc-color-brand: var(--dc-green-brand-lift);
  --dc-color-focus: var(--dc-green-brand-lift);
  --dc-spotlight: radial-gradient(ellipse 58% 74% at 50% 52%, var(--dc-grey-20) 0%, var(--dc-grey-11) 48%, transparent 76%);   /* the focus glow behind the hero words */
  --dc-photo-dark: brightness(.8) contrast(1.06) saturate(.78);   /* room photos eased down to sit on black */
  --dc-photo-mono: grayscale(1) brightness(.86) contrast(1.08);
  --dc-color-scrim: rgba(0, 0, 0, .3);
  --dc-color-scrim-2: rgba(0, 0, 0, .6);
  --dc-color-photo-label: rgba(255, 255, 255, .9);

  /* type: one family, two cuts */
  --dc-font-display: "Red Hat Display", "Red Hat Display Fallback", system-ui, sans-serif;
  --dc-font-text: "Red Hat Text", "Red Hat Text Fallback", system-ui, sans-serif;
  --dc-font-logo: Manrope, system-ui, sans-serif;
  --dc-weight-display: 500;
  --dc-weight-text: 400;
  --dc-weight-strong: 600;
  --dc-tracking-display: -.025em;
  --dc-step-hero: clamp(34px, 4.6vw, 68px);     /* the one h1 */
  --dc-step-close: clamp(36px, 4.2vw, 62px);    /* the closing band */
  --dc-step-h2: clamp(30px, 3.1vw, 46px);
  --dc-step-figure: clamp(50px, 4.4vw, 64px);   /* prices that are the point of a card */
  --dc-step-h3-lg: clamp(28px, 2.4vw, 34px);
  --dc-step-h3: clamp(21px, 1.7vw, 24px);
  --dc-step-h4: 21px;
  --dc-step-lede: 19px;
  --dc-step-body: 18px;
  --dc-step-small: 15.5px;
  --dc-step-fine: 14px;
  --dc-leading-text: 1.6;
  --dc-leading-display: 1.08;
  --dc-measure: 36em;
  --dc-read: 660px;             /* the reading column on long pages */

  /* space */
  --dc-max: 1240px;
  --dc-gutter: 32px;
  --dc-section-y: 88px;
  --dc-gap: 20px;
  --dc-gap-lg: 56px;
  --dc-pad-card: 28px;
  --dc-pad-panel: 44px;

  /* shape */
  --dc-radius-pill: 999px;    /* buttons, chips, the phone box */
  --dc-radius-card: 20px;     /* cards, panels, photos in cards */
  --dc-radius-panel: 28px;    /* the one large panel per section */
  --dc-radius-img: 12px;      /* photos inside a panel, the mega promo */
  --dc-radius-field: 12px;    /* form fields */

  /* motion */
  --dc-ease: cubic-bezier(.2, .7, .2, 1);       /* the live site's two curves */
  --dc-ease-out: cubic-bezier(.16, 1, .3, 1);
  --dc-dur: .25s;
  --dc-dur-fast: .2s;
  --dc-lift: -3px;            /* cards on hover */
  --dc-lift-btn: -1px;        /* buttons on hover */
  --dc-shadow-pop: 0 30px 40px -30px rgba(0, 0, 0, .35);
}

/* 3. scopes */
.on-light {   /* the grey band (implants) */
  --dc-color-ground: var(--dc-grey-94);
  --dc-color-raised: var(--dc-grey-100);
  --dc-color-raised-2: var(--dc-grey-89);
  --dc-color-ink: var(--dc-grey-0);
  --dc-color-text: var(--dc-grey-12);
  --dc-color-text-2: var(--dc-grey-36);
  --dc-color-line: var(--dc-grey-83);
  --dc-color-line-2: var(--dc-grey-74);
  --dc-color-btn: var(--dc-grey-0);
  --dc-color-on-btn: var(--dc-grey-100);
  --dc-color-btn-hover: var(--dc-grey-36);
  --dc-color-emergency: var(--dc-red);
  --dc-color-brand: var(--dc-green-brand);
  --dc-color-focus: var(--dc-green-call);
}
.on-white {   /* the closing band, the finance panel, the announcement bar */
  --dc-color-ground: var(--dc-grey-100);
  --dc-color-raised: var(--dc-grey-94);
  --dc-color-raised-2: var(--dc-grey-89);
  --dc-color-ink: var(--dc-grey-0);
  --dc-color-text: var(--dc-grey-12);
  --dc-color-text-2: var(--dc-grey-36);
  --dc-color-line: var(--dc-grey-83);
  --dc-color-line-2: var(--dc-grey-74);
  --dc-color-btn: var(--dc-grey-0);
  --dc-color-on-btn: var(--dc-grey-100);
  --dc-color-btn-hover: var(--dc-grey-36);
  --dc-color-emergency: var(--dc-red);
  --dc-color-brand: var(--dc-green-brand);
  --dc-color-focus: var(--dc-green-call);
}
.on-grey {    /* the finance panel: visibly grey, softer than white against the black page */
  --dc-color-ground: var(--dc-grey-83);
  --dc-color-raised: var(--dc-grey-94);
  --dc-color-raised-2: var(--dc-grey-89);
  --dc-color-ink: var(--dc-grey-0);
  --dc-color-text: var(--dc-grey-12);
  --dc-color-text-2: var(--dc-grey-29);
  --dc-color-line: var(--dc-grey-74);
  --dc-color-line-2: var(--dc-grey-63);
  --dc-color-btn: var(--dc-grey-0);
  --dc-color-on-btn: var(--dc-grey-100);
  --dc-color-btn-hover: var(--dc-grey-36);
  --dc-color-focus: var(--dc-green-call);
}
.on-dark {    /* a black panel inside a light band */
  --dc-color-ground: var(--dc-grey-0);
  --dc-color-raised: var(--dc-grey-8);
  --dc-color-raised-2: var(--dc-grey-11);
  --dc-color-ink: var(--dc-grey-100);
  --dc-color-text: var(--dc-grey-89);
  --dc-color-text-2: var(--dc-grey-63);
  --dc-color-line: var(--dc-grey-17);
  --dc-color-line-2: var(--dc-grey-29);
  --dc-color-btn: var(--dc-grey-100);
  --dc-color-on-btn: var(--dc-grey-0);
  --dc-color-btn-hover: var(--dc-grey-63);
  --dc-color-focus: var(--dc-green-brand-lift);
}
.on-light, .on-white, .on-grey, .on-dark { background: var(--dc-color-ground); color: var(--dc-color-text); }

@media (max-width: 980px) { :root { --dc-section-y: 72px; --dc-gap-lg: 40px; } }
@media (max-width: 760px) { :root { --dc-section-y: 56px; --dc-gutter: 16px; --dc-pad-panel: 26px; --dc-step-body: 17px; --dc-step-lede: 17px; --dc-step-figure: 50px; } }

/* Deepcar Night: components v0.2 (31 Oct 2026, SOP homepage). Reads only the tokens in tokens.css: no colour, type size,
   radius or easing is typed here. A component on a light band gets .on-light / .on-white from its section. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--dc-color-ground); color: var(--dc-color-text); font: var(--dc-weight-text) var(--dc-step-body)/var(--dc-leading-text) var(--dc-font-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
h1, h2 { font-family: var(--dc-font-display); font-weight: var(--dc-weight-display); color: var(--dc-color-ink); letter-spacing: var(--dc-tracking-display); }
h1 { font-size: var(--dc-step-hero); line-height: 1.04; }
h2 { font-size: var(--dc-step-h2); line-height: 1.1; }
h3 { font: 600 19px/1.35 var(--dc-font-text); color: var(--dc-color-ink); }
.wrap { width: min(var(--dc-max), 100% - 2 * var(--dc-gutter)); margin-inline: auto; }
.sec { padding: var(--dc-section-y) 0; }
.lede { font-size: var(--dc-step-lede); color: var(--dc-color-text-2); max-width: var(--dc-measure); }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stars { display: inline-flex; gap: 2px; color: var(--dc-color-ink); }
.stars .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.tx { color: var(--dc-color-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover .tx, .tx:hover { text-decoration-thickness: 2px; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: var(--dc-radius-pill); border: 1.5px solid var(--dc-color-btn); background: var(--dc-color-btn); color: var(--dc-color-on-btn); font: 600 16px/1 var(--dc-font-text); text-decoration: none; white-space: nowrap; transition: background-color var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
.btn:hover { transform: translateY(var(--dc-lift-btn)); background: var(--dc-color-btn-hover); border-color: var(--dc-color-btn-hover); }
.btn .ico { width: 18px; height: 18px; }
.btn--line { background: transparent; color: var(--dc-color-ink); border-color: currentColor; }
.btn--line:hover { background: var(--dc-color-ink); border-color: var(--dc-color-ink); color: var(--dc-color-ground); }
.btn--call { background: var(--dc-color-call); border-color: var(--dc-color-call); color: var(--dc-color-on-call); }
.btn--call:hover { background: var(--dc-color-call-hover); border-color: var(--dc-color-call-hover); }
.btn--sm { min-height: 34px; padding: 0 16px; font-size: 13px; }
.em-label { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: var(--dc-radius-pill); background: var(--dc-color-alert-tint); color: var(--dc-color-alert); font-size: 13px; font-weight: 700; }
.em-label .ico { width: 15px; height: 15px; }
.stack > .em-label { justify-self: start; }
.rating { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--dc-color-text-2); }
.rating b { color: var(--dc-color-ink); font-weight: 600; }
.credit { position: absolute; z-index: 2; padding: 8px 14px; border-radius: var(--dc-radius-pill); background: var(--dc-color-photo-label); color: var(--dc-grey-8); font-size: 14px; line-height: 1.3; }
.credit b { font-weight: 600; }

/* announcement bar and header */
.note { position: relative; z-index: 31; color: var(--dc-color-ink); font-size: 15px; }
.note .wrap { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 6px 0; text-align: center; }
.hdr { position: sticky; top: 0; z-index: 30; background: var(--dc-color-ground); color: var(--dc-color-ink); border-bottom: 1px solid var(--dc-color-line); }
.hdr .wrap { display: flex; align-items: center; gap: 16px; min-height: 80px; }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.mark .logo { width: 174px; height: auto; }
.logo__dot { fill: var(--dc-color-brand); }
.drawer__head .mark .logo { width: 138px; }
.phone { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 48px; border: 1.5px solid currentColor; border-radius: var(--dc-radius-pill); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.phone .ico { width: 17px; height: 17px; }
.hdr .btn { min-height: 48px; padding: 0 22px; font-size: 15px; background: var(--dc-color-btn); border-color: var(--dc-color-btn); color: var(--dc-color-on-btn); }
.burger { display: none; width: 44px; height: 44px; border-radius: var(--dc-radius-pill); border: 1.5px solid currentColor; background: none; color: inherit; place-items: center; }
.mnav { margin-left: auto; }
.mnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mi__btn, .mi__link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--dc-radius-pill); background: none; color: inherit; font: var(--dc-weight-display) 15px/1 var(--dc-font-text); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dc-dur-fast) var(--dc-ease); }
/* keeps the pointer inside the item on its way down to the open menu */
.mi.open .mi__btn { position: relative; }
.mi.open .mi__btn::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; }
.mi__btn .ico { width: 16px; height: 16px; transition: transform var(--dc-dur) var(--dc-ease); }
.mi__btn:hover, .mi__link:hover, .mi.open .mi__btn { background: var(--dc-color-ink); color: var(--dc-color-ground); }
.mi.open .mi__btn .ico { transform: rotate(180deg); }
.mi--em .mi__btn { color: var(--dc-color-emergency); }
.mi--em .mi__btn:hover, .mi--em.open .mi__btn { background: var(--dc-color-alert); color: var(--dc-color-on-alert); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--dc-color-raised); color: var(--dc-color-ink); border-top: 1px solid var(--dc-color-line); box-shadow: var(--dc-shadow-pop); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dc-dur-fast) var(--dc-ease), transform var(--dc-dur-fast) var(--dc-ease), visibility 0s linear var(--dc-dur-fast); }
.mi.open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dc-dur-fast) var(--dc-ease), transform var(--dc-dur-fast) var(--dc-ease); }
.hdr .wrap.mega__in { display: grid; gap: 40px; align-items: start; min-height: 0; padding: 40px 0 44px; }
.mega__in--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 360px; }
.mega__in--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 340px; }
.mega__label { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--dc-color-text-2); }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__col a { display: block; padding: 6px 0; color: var(--dc-color-ink); text-decoration: none; font-size: 16px; }
.mega__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.promo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised-2); text-decoration: none; color: var(--dc-color-text); }
.promo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--dc-radius-img); margin-bottom: 6px; }
.promo__h { font: var(--dc-weight-display) 22px/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.promo p { font-size: 15px; }
.promo .tx { margin-top: auto; font-size: 15px; }
.promo--em { --dc-color-ink: var(--dc-grey-0); --dc-color-text: var(--dc-grey-12); padding: 26px; background: var(--dc-color-alert-tint); color: var(--dc-color-text); }
.promo--em .em-label { background: var(--dc-grey-100); }
.promo--em .btn { margin-top: 10px; align-self: flex-start; }
.drawer { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--dc-color-raised); color: var(--dc-color-ink); padding: 0 20px 120px; }
.drawer[hidden] { display: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; min-height: 66px; border-bottom: 1px solid var(--dc-color-line); margin-bottom: 8px; }
.drawer__close { width: 48px; height: 48px; border-radius: var(--dc-radius-pill); border: 1.5px solid currentColor; background: none; color: inherit; display: grid; place-items: center; }
.drawer__close .ico { transform: rotate(45deg); }
.dr__grp { border-bottom: 1px solid var(--dc-color-line); }
.dr__grp summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 400 24px/1.2 var(--dc-font-display); cursor: pointer; }
.dr__grp summary::-webkit-details-marker { display: none; }
.dr__grp[open] summary .ico { transform: rotate(45deg); }
.dr__grp ul { list-style: none; margin: 0 0 18px; padding: 0; }
.dr__grp li a { display: block; min-height: 48px; padding: 12px 0; text-decoration: none; }
.dr__link { display: block; padding: 18px 0; border-bottom: 1px solid var(--dc-color-line); font: 400 24px/1.2 var(--dc-font-display); text-decoration: none; }
.drawer .btns { margin-top: 26px; }
.drawer .btns .btn { flex: 1 1 100%; }

/* shared pieces */
.sec__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.sec__head .btns { margin-top: 24px; }
.dots { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.dots::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1.5px; background: var(--dc-color-ink); opacity: .6; }
.dots li { position: relative; padding: 24px 10px 0 0; font-size: 14px; line-height: 1.35; }
.dots li::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--dc-color-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { padding: 8px 14px; border: 1.5px solid var(--dc-color-line-2); border-radius: var(--dc-radius-pill); font-size: 14.5px; color: inherit; text-decoration: none; transition: background-color var(--dc-dur-fast) var(--dc-ease), color var(--dc-dur-fast) var(--dc-ease); }
.chips a:hover { background: var(--dc-color-ink); border-color: var(--dc-color-ink); color: var(--dc-color-ground); }
.slot { display: flex; flex-direction: column; text-decoration: none; }
.slot__vid { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dc-color-raised); }
.slot__vid img { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 1.5px solid var(--dc-grey-100); background: var(--dc-color-scrim); display: grid; place-items: center; color: var(--dc-grey-100); transition: transform var(--dc-dur) var(--dc-ease), background-color var(--dc-dur) var(--dc-ease); }
.slot:hover .play { transform: scale(1.06); background: rgba(0,0,0,.5); }
.play .ico { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 18px; font-weight: 600; color: var(--dc-color-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 20px; height: 20px; margin-top: 3px; transition: transform var(--dc-dur) var(--dc-ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--dc-color-text-2); font-size: 17px; max-width: 36em; }
.drive { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15.5px; }
.drive th, .drive td { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--dc-color-line); vertical-align: top; }
.drive thead th { font-size: 14px; font-weight: 600; color: var(--dc-color-text-2); }
.drive tbody th { font-weight: 600; color: var(--dc-color-ink); }
.drive td:nth-child(2) { white-space: nowrap; font: 400 20px/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.drive td:last-child { color: var(--dc-color-text-2); }
.drive__note { margin-top: 14px; font-size: 14px; color: var(--dc-color-text-2); }

/* footer (reads the band tokens) */
.foot { background: var(--dc-color-ground); color: var(--dc-color-text-2); font-size: 15.5px; padding: 84px 0 116px; }
.foot .mark { color: var(--dc-color-ink); }
.foot .mark .logo { width: 176px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; color: var(--dc-color-ink); }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot p { margin-top: 14px; }
.foot__legal { max-width: 80ch; margin-top: 44px; padding: 26px 76px 0 0; border-top: 1px solid var(--dc-color-line); font-size: 13.5px; }
.foot__bar { margin-top: 16px; padding-right: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; }

@media (max-width: 1180px) {
  .mnav { display: none; }
  .burger { display: grid; }
  .hdr .phone { margin-left: auto; }
}
@media (max-width: 980px) {
  .sec__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
}
@media (max-width: 760px) {
  body { padding-bottom: 84px; }
  .note .wrap { gap: 12px; font-size: 14px; }
  .note .btn { display: none; }
  .hdr .wrap { gap: 10px; min-height: 66px; }
  .mark { gap: 9px; }
  .mark .logo { width: 140px; }
  .hdr .btn { display: none; }
  .phone { min-height: 40px; padding: 0 12px; gap: 6px; font-size: 14px; }
  .burger { width: 40px; height: 40px; }
  .dots { grid-template-columns: 1fr; gap: 14px; }
  .dots::before { right: auto; bottom: 6px; width: 1.5px; height: auto; }
  .dots li { padding: 0 0 0 28px; }
  .drive td:last-child, .drive thead th:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
:focus-visible { outline: 2px solid var(--dc-color-focus); outline-offset: 3px; scroll-margin-block: 120px 112px; }   /* keeps a focused item clear of the header and the dock */

/* ---- homepage sections ---- */
/* hero: centred headline, Dr Ibraheem rising out of the dark beneath it */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__txt { position: relative; z-index: 1; padding-top: 88px; display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 21ch; }
.hero__sub { margin-top: 22px; font-size: var(--dc-step-lede); line-height: 1.55; color: var(--dc-color-text); max-width: 31em; }
.hero .btns { justify-content: center; margin-top: 30px; }
.hero .rating { justify-content: center; margin-top: 20px; color: var(--dc-color-text); }
.credit { right: 32px; bottom: 28px; }

/* trust strip */
.trust { background: var(--dc-color-raised); }
.trust__in { display: grid; grid-template-columns: repeat(5, 1fr); }
.trust p { display: flex; align-items: center; gap: 12px; padding: 28px 20px; border-left: 1px solid var(--dc-color-line); font-size: 15.5px; line-height: 1.35; color: var(--dc-color-text); }
.trust p:first-child { border-left: 0; padding-left: 0; }
.trust .ico { color: var(--dc-color-text-2); }

/* two ways: dark panels, emergency outlined in red */
.ways-sec h2 { text-align: center; }
.ways { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 56px; }
.way { display: flex; flex-direction: column; padding: var(--dc-pad-panel); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.way--em { box-shadow: inset 0 0 0 1.5px var(--dc-color-emergency); }
.way__tag { font-size: 15px; color: var(--dc-color-text-2); }
.way h3 { margin-top: 8px; font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.1 var(--dc-font-display); letter-spacing: -.02em; }
.way--em h3 { margin-top: 14px; }
.way > p:not([class]) { margin-top: 14px; font-size: 16.5px; color: var(--dc-color-text-2); }
.way .dots li { color: var(--dc-color-text); }
.way .price { margin-top: auto; padding-top: 32px; font: var(--dc-weight-display) var(--dc-step-figure)/1 var(--dc-font-display); letter-spacing: -.03em; }
.way .price small { display: block; margin-top: 10px; font: 400 14px/1.4 var(--dc-font-text); letter-spacing: 0; color: var(--dc-color-text-2); }
.way .btns { margin-top: 26px; }

/* treatments: photo cards, then the rest as a ruled list */
.tcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tcard { display: flex; flex-direction: column; padding-bottom: 26px; border-radius: var(--dc-radius-card); overflow: hidden; background: var(--dc-color-raised); text-decoration: none; transition: transform var(--dc-dur) var(--dc-ease), background-color var(--dc-dur) var(--dc-ease); }
.tcard:hover { transform: translateY(-3px); background: var(--dc-color-raised-2); }
.tcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tcard h3 { margin: 22px 24px 0; font: var(--dc-weight-display) 24px/1.15 var(--dc-font-display); letter-spacing: -.015em; }
.tcard p { margin: 8px 24px 0; font-size: 15.5px; color: var(--dc-color-text-2); }
.tcard .tx { margin: auto 24px 0; padding-top: 18px; font-size: 15px; }
.more__h { margin-top: 56px; font-size: 15px; font-weight: 600; color: var(--dc-color-text-2); }
.more { list-style: none; padding: 0; margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.more a { display: block; padding: 16px 0; border-top: 1px solid var(--dc-color-line); text-decoration: none; }
.more b { display: block; font: var(--dc-weight-display) 18px/1.3 var(--dc-font-display); color: var(--dc-color-ink); }
.more span { font-size: 14px; color: var(--dc-color-text-2); }

/* see */
.see { padding: 0 0 112px; }
.see__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.see__txt .lede { margin-top: 20px; }
.see__txt .btns { margin-top: 30px; }
.see__fig img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: var(--dc-radius-card); }

/* implants: a light grey band; tokens flip locally */
.imp-sec .wrap { display: grid; gap: 56px; }
.imp__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: start; }
.imp__intro h2 { grid-row: span 3; }
.imp__price { margin-top: 26px; font-size: 16.5px; color: var(--dc-color-text-2); }
.imp__price b { display: block; margin-bottom: 2px; font: var(--dc-weight-display) 40px/1.1 var(--dc-font-display); letter-spacing: -.02em; color: var(--dc-color-ink); }
.imp__intro .btns { margin-top: 26px; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1.5px; background: var(--dc-color-line-2); }
.steps li { position: relative; }
.steps__n { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--dc-color-ink); color: var(--dc-color-on-btn); display: grid; place-items: center; font: 600 17px/1 var(--dc-font-display); }
.steps h3 { margin-top: 20px; font: var(--dc-weight-display) 21px/1.2 var(--dc-font-display); }
.steps p { margin-top: 8px; font-size: 15.5px; color: var(--dc-color-text-2); }
.suit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 32px; border-top: 1px solid var(--dc-color-line); }
.suit__h { font: var(--dc-weight-display) var(--dc-step-h4)/1.2 var(--dc-font-display); color: var(--dc-color-ink); }

/* stories */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.slot__vid { border-radius: var(--dc-radius-card); }
.slot h3 { margin-top: 18px; font: var(--dc-weight-display) 24px/1.2 var(--dc-font-display); }
.slot h3 small { display: block; margin-top: 4px; font: 400 14px/1.3 var(--dc-font-text); color: var(--dc-color-text-2); }
.slot blockquote { margin-top: 12px; font-size: 17px; color: var(--dc-color-text); }
.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.rev { display: flex; flex-direction: column; padding: 32px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.rev blockquote { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--dc-color-text); }
.rev figcaption { margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--dc-color-text-2); }
.rev figcaption b { color: var(--dc-color-ink); }

/* fees: dark panels, finance as the one white panel */
.feegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fee { padding: var(--dc-pad-card); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.fee h3 { padding-bottom: 14px; border-bottom: 1px solid var(--dc-color-line-2); font: var(--dc-weight-display) 21px/1.2 var(--dc-font-display); }
.fee dl div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--dc-color-line); font-size: 15.5px; }
.fee dl div:last-child { border-bottom: 0; }
.fee dd { white-space: nowrap; font-weight: 600; color: var(--dc-color-ink); }
.fin { margin-top: var(--dc-gap); padding: 40px var(--dc-pad-panel); border-radius: var(--dc-radius-card); display: grid; grid-template-columns: 1fr 1.9fr auto; gap: 24px 48px; align-items: center; }
.fin__k { font-size: 14.5px; color: var(--dc-color-text-2); }
.fin__h { margin-top: 6px; font: var(--dc-weight-display) 38px/1.1 var(--dc-font-display); letter-spacing: -.02em; }
.fin dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fin dt { font-size: 14px; color: var(--dc-color-text-2); }
.fin dd { margin: 4px 0; font: var(--dc-weight-display) 50px/1 var(--dc-font-display); letter-spacing: -.03em; }
.fin dd.fin__sub { margin: 0; font: var(--dc-weight-text) 14px/1.5 var(--dc-font-text); letter-spacing: 0; color: var(--dc-color-text-2); }
.fin__note { grid-column: 1 / -1; max-width: 80ch; padding-top: 20px; border-top: 1px solid var(--dc-color-line); font-size: 14px; color: var(--dc-color-text-2); }

/* team */
.team4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team4 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--dc-radius-card); }
.team4 figcaption { margin-top: 16px; display: grid; gap: 2px; }
.team4 b { font: var(--dc-weight-display) 21px/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.team4 span { font-size: 14.5px; color: var(--dc-color-text-2); }

/* practice */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 14px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--dc-radius-card); }
.gallery img:first-child { grid-row: span 2; }

/* visit: one large dark panel */
.visit__in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; padding: 56px; border-radius: var(--dc-radius-panel); background: var(--dc-color-raised); }
.visit__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 28px; border-radius: var(--dc-radius-img); }
.vinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 26px; }
.vinfo small { display: block; font-size: 14px; color: var(--dc-color-text-2); }
.vinfo p { margin-top: 4px; font-size: 17px; color: var(--dc-color-ink); }
.vinfo a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--dc-color-text-2); }
.visit .btns { margin-top: 28px; }
.visit__h { font: var(--dc-weight-display) 30px/1.2 var(--dc-font-display); }

/* faq */
.faq { padding-top: 0; }
.faq__in { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; align-items: start; }
.faq .lede { margin-top: 18px; }
.faq__list { border-top: 1px solid var(--dc-color-line-2); }
.faq details { border-bottom: 1px solid var(--dc-color-line); }

/* close: the white band */
.close { padding: 120px 0; text-align: center; }
.close h2 { font-size: var(--dc-step-close); max-width: 21ch; margin-inline: auto; }
.close .lede { margin: 20px auto 0; }
.close .btns { justify-content: center; margin-top: 34px; }

@media (max-width: 1180px) {
  .trust__in { grid-template-columns: repeat(3, 1fr); }
  .trust p:nth-child(4) { border-left: 0; padding-left: 0; }
  .trust p:nth-child(n+4) { border-top: 1px solid var(--dc-color-line); }
  .tcards { grid-template-columns: 1fr 1fr; }
  .feegrid { grid-template-columns: 1fr 1fr; }
  .fin { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .hero { min-height: 860px; }
  .ways, .see__in, .imp__intro, .visit__in, .faq__in { grid-template-columns: 1fr; gap: 32px; }
  .imp__intro h2 { grid-row: auto; margin-bottom: 16px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .steps::before { display: none; }
  .team4 { grid-template-columns: 1fr 1fr; }
  .revs { grid-template-columns: 1fr; }
  .see { padding-bottom: 84px; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero__txt { order: -1; padding: 44px 0 0; }
  .hero .btns { width: 100%; margin-top: 24px; }
  .hero .btns .btn { flex: 1 1 100%; }
  .credit { left: 12px; right: auto; bottom: 12px; font-size: 12.5px; padding: 6px 12px; }
  .trust__in { grid-template-columns: 1fr 1fr; }
  .trust p, .trust p:nth-child(4) { padding: 18px 12px; border-left: 0; border-top: 1px solid var(--dc-color-line); font-size: 14.5px; }
  .trust p:nth-child(-n+2) { border-top: 0; }
  .trust p:nth-child(odd) { padding-left: 0; }
  .trust p:nth-child(even) { border-left: 1px solid var(--dc-color-line); }
  .trust p:last-child { grid-column: 1 / -1; }
  .tcards--b { grid-template-columns: 1fr 1fr; }
  .more { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .slots { grid-template-columns: 1fr; gap: 36px; }
  .slot__vid { aspect-ratio: 4 / 3.4; }
  .feegrid { grid-template-columns: 1fr; }
  .fin { padding: 30px 22px; }
  .fin dl { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .fin dd { font-size: 32px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 150px 150px; gap: 10px; }
  .gallery img:first-child { grid-column: 1 / -1; grid-row: auto; }
  .visit__in { padding: 28px 20px; border-radius: var(--dc-radius-card); }
  .close { padding: 80px 0; }
  .close .btns .btn { flex: 1 1 100%; }
}

/* ---- inner-page pieces (new in v0.1: Night's homepage had none of these) ---- */
/* notices look like their type: the red-flag notice is outlined in the emergency red, the calm one is a quiet panel */
.notice { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 24px 26px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); max-width: 46em; }
.notice > .ico { grid-row: span 2; margin-top: 2px; color: var(--dc-color-text-2); }
.notice b { font: var(--dc-weight-strong) 17px/1.35 var(--dc-font-text); color: var(--dc-color-ink); }
.notice p { font-size: 16.5px; line-height: 1.55; color: var(--dc-color-text); }
.notice--alert { box-shadow: inset 0 0 0 1.5px var(--dc-color-emergency); }
.notice--alert > .ico, .notice--alert b { color: var(--dc-color-emergency); }
.reviewed { padding-top: 18px; border-top: 1px solid var(--dc-color-line); font-size: var(--dc-step-fine); color: var(--dc-color-text-2); max-width: 46em; }
.reviewed strong { color: var(--dc-color-ink); font-weight: var(--dc-weight-strong); }

/* form fields (the enquiry sheet keeps its names and ids; only the look is set here) */
.form { display: grid; gap: 18px; max-width: 34em; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 15px; font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 0 16px; border: 1.5px solid var(--dc-color-field-line); border-radius: var(--dc-radius-field); background: var(--dc-color-raised); color: var(--dc-color-ink); font: var(--dc-weight-text) 17px/1.4 var(--dc-font-text); transition: border-color var(--dc-dur-fast) var(--dc-ease); }
.field textarea { padding: 14px 16px; min-height: 110px; resize: vertical; }
.field select { appearance: none; padding-right: 48px; cursor: pointer; }
.field__sel { position: relative; }
.field__sel .ico { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; color: var(--dc-color-text-2); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--dc-color-text-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--dc-color-ink); box-shadow: 0 0 0 3px var(--dc-color-focus); }
.field--error input { border-color: var(--dc-color-emergency); }
.field > .field__err { font-size: var(--dc-step-fine); font-weight: var(--dc-weight-text); color: var(--dc-color-emergency); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; font-size: 15px; color: var(--dc-color-text); }
.field--check > input { width: 22px; min-height: 0; height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--dc-color-ink); }
.chip-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--dc-color-field-line); border-radius: var(--dc-radius-pill); font-size: 15px; cursor: pointer; transition: background-color var(--dc-dur-fast) var(--dc-ease), color var(--dc-dur-fast) var(--dc-ease); }
.chip-opt input:checked + span { background: var(--dc-color-ink); border-color: var(--dc-color-ink); color: var(--dc-color-ground); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--dc-color-focus); outline-offset: 3px; }
.field--check > span { font-size: 15px; font-weight: var(--dc-weight-text); color: var(--dc-color-text); }
.field--check a { color: var(--dc-color-ink); text-underline-offset: 3px; }

/* ---- SOP homepage (spec v1, 31 Oct 2026) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dc-dur); animation-timing-function: var(--dc-ease); }
::selection { background: var(--dc-color-ink); color: var(--dc-color-ground); }
html { scrollbar-color: var(--dc-color-line-2) var(--dc-color-ground); }
h1, h2, h3 { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }
a { transition: color var(--dc-dur-fast) var(--dc-ease), text-decoration-color var(--dc-dur-fast) var(--dc-ease), text-decoration-thickness var(--dc-dur-fast) var(--dc-ease); }
.copyslot { display: inline-block; padding: 2px 10px; border: 1px dashed var(--dc-color-line-2); border-radius: 6px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.dataslot { text-decoration: underline dashed; text-underline-offset: 4px; text-decoration-color: var(--dc-color-text-2); }

/* top bar: the new patient offer, in view on every screen */
.note .wrap { min-height: 40px; padding: 4px 0; }
.note__offer { color: var(--dc-color-ink); font-weight: var(--dc-weight-strong); text-underline-offset: 3px; }
.note__offer:hover { text-decoration-thickness: 2px; }

/* buttons: red for the emergency route; call and emergency invert on hover so the change is obvious */
.btn--em { background: var(--dc-color-alert); border-color: var(--dc-color-alert); color: var(--dc-color-on-alert); }
.btn--em:hover { background: var(--dc-color-on-alert); border-color: var(--dc-color-alert); color: var(--dc-color-alert); }
.btn--call:hover { background: var(--dc-color-on-call); border-color: var(--dc-color-call); color: var(--dc-color-call); }
button.btn { cursor: pointer; }

/* hero: one H1 on two lines; h1a is the pick, h1b and h1c are the options */
.hero { min-height: 640px; justify-content: center; padding: 72px 0 84px; background: var(--dc-spotlight); }
.hero__txt { padding-top: 0; }
.hero h1 { max-width: none; }
.h1__svc, .h1__line { display: block; }
.h1__line { margin-inline: auto; }
.hero--h1a .h1__svc { font-size: var(--dc-step-h3-lg); line-height: 1.2; letter-spacing: -.015em; }
.hero--h1a .h1__line { margin-top: 12px; max-width: 22ch; }
.hero--h1b .h1__svc, .hero--h1b .h1__line { font-size: clamp(30px, 4vw, 58px); line-height: 1.08; max-width: 24ch; margin-inline: auto; }
.hero--h1b .h1__line { color: var(--dc-color-text-2); }
.hero--h1c .h1__svc { max-width: 24ch; margin-inline: auto; }
.hero--h1c .h1__line { margin-top: 14px; font-size: var(--dc-step-h3-lg); line-height: 1.2; letter-spacing: -.015em; color: var(--dc-color-text); }
.hero__sub { max-width: 38em; }
.hero__btns--col { flex-direction: column; align-items: stretch; width: min(340px, 100%); }

/* treatments: small blocks. a thumbnail, b four across, c words only, d ruled rows; the whole tile is the link's target */
.tcard { position: relative; display: grid; padding-bottom: 0; }
.tcard:hover { background: var(--dc-color-raised-2); }
.tcard__txt { display: flex; flex-direction: column; padding: 18px 20px; }
.tcard h3 { margin: 0; font: var(--dc-weight-display) var(--dc-step-h4)/1.2 var(--dc-font-display); letter-spacing: -.015em; }
.tcard p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.tcard .tx { margin: auto 0 0; font-size: 15px; }
.tcard__txt p + .tx { padding-top: 10px; }
.tcard__a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tcards { gap: 14px; }
.tcards--a, .tcards--c, .tcards--d { grid-template-columns: 1fr 1fr; }
.tcards--a .tcard { grid-template-columns: 148px 1fr; }
.tcards--a .tcard img { order: -1; height: 100%; aspect-ratio: auto; }
.tcards--b { grid-template-columns: repeat(4, 1fr); }
.tcards--b .tcard img { order: -1; aspect-ratio: 16 / 9; }
.tcards--c .tcard img, .tcards--d .tcard img { display: none; }
.tcards--d { gap: 0 40px; }
.tcards--d .tcard { border-radius: 0; background: none; border-top: 1px solid var(--dc-color-line-2); }
.tcards--d .tcard:hover { transform: none; background: none; border-top-color: var(--dc-color-ink); }
.tcards--d .tcard__txt { padding: 14px 0 18px; }
/* each row reads as a link at rest: an arrow at the end, which moves and brightens with the line under the name on hover */
.more a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.more b, .more span { grid-column: 1; }
.more span { transition: color var(--dc-dur-fast) var(--dc-ease); }
.more .ico { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--dc-color-text-2); transition: color var(--dc-dur-fast) var(--dc-ease), transform var(--dc-dur-fast) var(--dc-ease); }
.more a:hover span, .more a:hover .ico { color: var(--dc-color-ink); }
.more a:hover .ico { transform: translateX(5px); }
.more__top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 28px; }
.more__top h3 { font: var(--dc-weight-display) var(--dc-step-h4)/1.2 var(--dc-font-display); }

/* section heads: the heading on one line, the lede under it */
.sec__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
.sec__head h2 { max-width: none; }

/* two ways */
.way h3 { margin-top: 0; }
.way--em h3 { margin-top: 14px; }
.way .price .tx { color: var(--dc-color-text); }

/* implants */
.imp__intro h2 { grid-row: auto; }
.imp__links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 18px; font-size: 16.5px; }

/* areas */
.areas .wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.areas .lede { margin-top: 16px; }
.areas .drive__note { margin-top: 16px; }
.areas .btns { margin-top: 22px; }
.towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid var(--dc-color-line-2); }
.towns li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--dc-color-line); font-size: var(--dc-step-small); color: var(--dc-color-text); }
.towns b { white-space: nowrap; font: var(--dc-weight-display) 20px/1.2 var(--dc-font-display); font-variant-numeric: tabular-nums; color: var(--dc-color-ink); }
.areas--b .wrap { display: block; }
.scale { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 2px solid var(--dc-color-line-2); }
.scale > li { position: relative; padding: 18px 16px 0 0; }
.scale > li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--dc-color-ink); }
.scale__t { font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.1 var(--dc-font-display); letter-spacing: -.02em; color: var(--dc-color-ink); }
.scale ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--dc-step-small); color: var(--dc-color-text); }

/* why choose us */
.why__in { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: var(--dc-gap-lg); align-items: center; }
.why__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--dc-radius-card); }
.why .lede { margin-top: 16px; }
.why__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dc-gap); margin-top: 28px; }
.why__facts > div { padding: 24px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.why__facts h3 { font: var(--dc-weight-display) var(--dc-step-h4)/1.25 var(--dc-font-display); }
.why__facts p { margin-top: 8px; font-size: var(--dc-step-small); line-height: 1.55; color: var(--dc-color-text-2); }
.why .btns { margin-top: 28px; }

.gallery { grid-template-rows: 210px 210px; }

/* films and written reviews */
.films { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dc-gap); }
.film { display: grid; grid-template-columns: 124px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.film:has(iframe), .film:has(video) { grid-template-columns: 1fr; }
.film iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--dc-radius-img); }
.film video { width: 100%; max-height: 520px; border-radius: var(--dc-radius-img); background: var(--dc-color-ground); }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; overflow: hidden; border-radius: var(--dc-radius-img); background: var(--dc-color-raised-2); cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt .play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.yt:hover .play { transform: scale(1.06); background: var(--dc-color-scrim-2); }
.film h3 { font: var(--dc-weight-display) var(--dc-step-h3)/1.2 var(--dc-font-display); }
.film__t { margin-top: 4px; font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.film blockquote { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--dc-color-text); }
.revs { grid-template-columns: 1fr 1fr; margin-top: var(--dc-gap); }
.rev { padding: var(--dc-pad-card); }
.rev blockquote { margin-top: 0; font-size: 16.5px; }
.revs__all { margin-top: 28px; text-align: center; }

/* fees: a short summary; the full list stays on /fees/ */
.fees__all { margin-top: 12px; font-size: 16.5px; }
.fsum { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--dc-color-line-2); }
.fsum div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--dc-color-line); }
.fsum dt { color: var(--dc-color-text); }
.fsum dd, .ftile dd { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dc-color-ink); }
.fsum dd { font-weight: var(--dc-weight-strong); }
.ftiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dc-gap); }
.ftile { padding: 24px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.ftile dt { font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.ftile dd { margin-top: 6px; font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.1 var(--dc-font-display); letter-spacing: -.02em; }
.fin__plain { margin-top: 24px; }

/* questions: each one is a heading, every answer is in the page */
.faq summary h3 { margin: 0; font: inherit; color: inherit; }
.faq summary { transition: color var(--dc-dur-fast) var(--dc-ease); }
.faq summary:hover { color: var(--dc-color-text-2); }

/* contact and close: one block */
.close { padding: var(--dc-section-y) 0; text-align: left; }
.close h2 { max-width: none; margin-inline: 0; font-size: var(--dc-step-h2); }
.close .lede { margin: 16px 0 0; }
.close .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-content: stretch; margin-top: 26px; }
.close .btn { width: 100%; }
.close--a .close__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--dc-gap-lg); align-items: stretch; }
.close--a .close__in:not(:has(> .map)) { grid-template-columns: 1fr; }
.close__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.nap, .hours { font-style: normal; font-size: 17px; line-height: 1.55; color: var(--dc-color-text); }
.nap b, .hours b { color: var(--dc-color-ink); font-weight: var(--dc-weight-strong); }
.nap a { color: var(--dc-color-ink); text-underline-offset: 3px; }
.map { position: relative; min-height: 380px; overflow: hidden; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.close--b .close__head { text-align: center; }
.close--b .close__head h2 { margin-inline: auto; }
.close--b .close__head .lede { margin-inline: auto; }
.close--b .btns { grid-template-columns: repeat(4, auto); justify-content: center; }
.close__row { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 32px; align-items: center; margin-top: 44px; }
.close--b .map { min-height: 230px; }

/* footer */
.foot__h { margin: 0 0 16px; font: var(--dc-weight-strong) 15px/1.2 var(--dc-font-text); color: var(--dc-color-text-2); }
.foot p.foot__h { margin-top: 0; }

/* enquiry sheet: ids and fields as the live one */
.sheet { position: fixed; inset: 0; z-index: 70; visibility: hidden; transition: visibility 0s linear var(--dc-dur); }
.sheet.is-open { visibility: visible; transition-delay: 0s; }
.sheet__bg { position: absolute; inset: 0; background: var(--dc-color-scrim-2); opacity: 0; transition: opacity var(--dc-dur) var(--dc-ease); }
.sheet.is-open .sheet__bg { opacity: 1; }
.sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); padding: 32px; overflow-y: auto; background: var(--dc-color-raised); color: var(--dc-color-text); transform: translateX(100%); transition: transform var(--dc-dur) var(--dc-ease-out); }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__close { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: var(--dc-color-ink); cursor: pointer; }
.sheet__close .ico { transform: rotate(45deg); }
.sheet__t { padding-right: 60px; font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.15 var(--dc-font-display); letter-spacing: -.02em; color: var(--dc-color-ink); }
.sheet__s { margin-top: 10px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.sheet .form { margin-top: 24px; }
.sheet .field input, .sheet .field select, .sheet .field textarea { background: var(--dc-color-ground); }
.sheet .field--check > input { accent-color: var(--dc-color-ink); }
.form__hp { position: absolute; left: -9999px; }
.sheet__alt { display: grid; gap: 2px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--dc-color-line); }
.sheet__alt a { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--dc-color-ink); font-size: 15.5px; text-underline-offset: 3px; }

@media (max-width: 1180px) {
  .tcards--b { grid-template-columns: 1fr 1fr; }
  .scale { grid-template-columns: repeat(3, 1fr); row-gap: 28px; border-top: 0; }
  .films { grid-template-columns: 1fr; }
  .film { grid-template-columns: 124px 1fr; }
}
@media (max-width: 980px) {
  .areas .wrap, .why__in, .close--a .close__in { grid-template-columns: 1fr; }
  .why__in { gap: 32px; }
  .why__fig { max-width: 420px; }
  .close__row { grid-template-columns: 1fr 1fr; }
  .close--b .map { grid-column: 1 / -1; }
  .close--b .btns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* the emergency line and the header both stay in view on a phone */
  .note { position: sticky; top: 0; z-index: 31; }
  .note .wrap { min-height: 36px; padding: 2px 0; }
  .hdr { top: 36px; }
  .phone, .burger { min-height: 48px; }
  .burger { width: 48px; height: 48px; }
  .chips a { display: inline-flex; align-items: center; min-height: 48px; }
  .hero { min-height: 0; padding: 28px 0 40px; }
  .hero__btns { order: 2; flex-direction: column; align-items: stretch; width: 100%; margin-top: 20px; }
  .hero__sub { order: 3; }
  .hero--h1a .h1__line { margin-top: 8px; }
  .tcards--a, .tcards--b, .tcards--c, .tcards--d { grid-template-columns: 1fr; }
  .tcards--a .tcard { grid-template-columns: 104px 1fr; }
  .more__top { flex-direction: column; gap: 6px; }
  .towns, .why__facts, .fsum { grid-template-columns: 1fr; }
  .scale { grid-template-columns: 1fr 1fr; }
  .ftiles { grid-template-columns: 1fr 1fr; }
  .film { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; align-items: start; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 150px 150px; }
  .close .btns { grid-template-columns: 1fr; }
  .close--b .btns { grid-template-columns: 1fr; }
  .close__facts, .close__row { grid-template-columns: 1fr; }
  .map { min-height: 300px; }
}
@media (max-width: 380px) {
  .mark .logo { width: 118px; }
}

/* every control eases, and answers the hover */
.mark { min-height: 48px; }
.burger, .sheet__close, .drawer__close, .yt, .map__btn, .dock a, .dock button { transition: background-color var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease); cursor: pointer; }
.burger:hover, .sheet__close:hover, .drawer__close:hover { background: var(--dc-color-ink); color: var(--dc-color-ground); border-color: var(--dc-color-ink); }
.phone { transition: background-color var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease); }
@media (max-width: 760px) {
  .tcard .tx, .more__top .tx, .imp__links a { display: inline-flex; align-items: center; min-height: 48px; }
  .tcard__txt p + .tx { padding-top: 6px; }
  .imp__links { gap: 0; flex-direction: column; align-items: flex-start; }
}

/* implants: b timeline beside the intro, c black price panel with step cards, d photo beside the intro */
.imp--b .wrap { grid-template-columns: 1fr 1.1fr; gap: 28px var(--dc-gap-lg); align-items: start; }
.imp--b .imp__intro, .imp--d .imp__intro { display: block; }
.imp--b .imp__intro h2, .imp--d .imp__intro h2 { margin-bottom: 16px; }
.imp--b .steps { grid-template-columns: 1fr; gap: 22px; }
.imp--b .steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 1.5px; height: auto; }
.imp--b .steps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; }
.imp--b .steps h3 { margin-top: 8px; }
.imp--b .suit { grid-column: 1 / -1; }
.imp__wrapc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--dc-gap); }
.imp__panel { display: flex; flex-direction: column; padding: var(--dc-pad-panel); border-radius: var(--dc-radius-panel); }
.imp__panel .lede { margin-top: 14px; }
.imp__panel .imp__price b { color: var(--dc-color-ink); }
.imp__panel .imp__links { flex-direction: column; align-items: flex-start; }
.imp__panel .btns { margin-top: auto; padding-top: 24px; }
.imp__panel .btn--line { color: var(--dc-color-ink); }
.imp__panel .btn--line:hover { color: var(--dc-color-ground); }
.imp--c .steps { grid-template-columns: 1fr 1fr; gap: 14px; }
.imp--c .steps::before { display: none; }
.imp--c .steps li { padding: 22px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.imp--c .steps h3 { margin-top: 14px; }
.imp__wrapd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dc-gap-lg); align-items: stretch; }
.imp__fig img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; border-radius: var(--dc-radius-card); }
@media (max-width: 980px) {
  .imp--b .wrap, .imp__wrapc, .imp__wrapd { grid-template-columns: 1fr; }
  .imp__fig img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .imp--c .steps { grid-template-columns: 1fr; }
}

/* implants: the black panel and the timeline together (Fayez, 1 Nov: B + C) */
.imp--e .steps { grid-template-columns: 1fr; align-content: space-between; gap: 22px; padding: 8px 0; }
.imp--e .steps::before { left: 21px; right: auto; top: 30px; bottom: 30px; width: 1.5px; height: auto; }
.imp--e .steps li { display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
.imp--e .steps h3 { margin-top: 8px; }
.imp--e .imp__wrapc { gap: 40px; }

/* team: by role; square crops keep the section short */
.team4 img { aspect-ratio: 1 / 1; object-position: 50% 24%; }
.team-sec .sec__head { grid-template-columns: 1fr auto; align-items: end; }
.team-sec .lede { margin-top: 12px; }

/* treatment options, second round */
.tcards--e { grid-template-columns: 1.05fr 1fr; }
.tcards--e .tcard:first-child { grid-row: span 3; display: flex; flex-direction: column; overflow: hidden; }
.tcards--e .tcard:first-child img { order: -1; flex: 1 1 0; height: 0; min-height: 0; }
.tcards--f { grid-template-columns: 1fr 1fr; }
.tcards--f .tcard { min-height: 214px; overflow: hidden; background: var(--dc-color-raised); }
.tcards--f .tcard img { position: absolute; inset: 0; height: 100%; object-position: 100% 50%; transition: transform var(--dc-dur) var(--dc-ease); }
.tcards--f .tcard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--dc-color-raised) 42%, transparent 96%); }
.tcards--f .tcard:hover img { transform: scale(1.03); }
.tcards--f .tcard__txt { position: relative; z-index: 2; width: 62%; }
.tcards--f .tcard p { color: var(--dc-color-text); }
.tcards--g { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--dc-color-line-2); }
.tcards--g .tcard { border-radius: 0; background: none; border-top: 1px solid var(--dc-color-line-2); }
.tcards--g .tcard:hover { transform: none; background: none; }
.tcards--g .tcard:hover h3 { color: var(--dc-color-text-2); }
.tcards--g .tcard__txt { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; gap: 28px; align-items: baseline; padding: 16px 0; }
.tcards--g h3 { font-size: var(--dc-step-h3-lg); transition: color var(--dc-dur-fast) var(--dc-ease); }
.tcards--g .tcard p { margin: 0; }
.tcards--g .tcard .tx { margin: 0; justify-self: end; }
.tcards--g .tcard__txt p + .tx { padding-top: 0; }
.treat__split { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--dc-gap-lg); align-items: start; }
.treat__split .sec__head { margin-bottom: 0; }
.tcards--h { grid-template-columns: 1fr 1fr; }
.tcards--i { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 6px 0; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.tcards--i .tcard { background: none; border-radius: 0; border-left: 1px solid var(--dc-color-line); }
.tcards--i .tcard:first-child { border-left: 0; }
.tcards--i .tcard:hover { transform: none; }
.tcards--i .tcard:hover h3 { color: var(--dc-color-text-2); }
.tcards--i h3 { transition: color var(--dc-dur-fast) var(--dc-ease); }
@media (max-width: 1180px) {
  .tcards--i { grid-template-columns: 1fr 1fr; }
  .tcards--i .tcard:nth-child(3) { border-left: 0; }
  .tcards--i .tcard:nth-child(n+3) { border-top: 1px solid var(--dc-color-line); }
}
@media (max-width: 980px) {
  .treat__split { grid-template-columns: 1fr; gap: 24px; }
  .team-sec .sec__head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tcards--e, .tcards--f, .tcards--h, .tcards--i { grid-template-columns: 1fr; }
  .tcards--e .tcard:first-child { grid-row: auto; }
  .tcards--e .tcard:first-child img { flex: none; height: auto; aspect-ratio: 16 / 9; }
  .tcards--f .tcard__txt { width: 72%; }
  .tcards--g .tcard__txt { grid-template-columns: 1fr; gap: 6px; }
  .tcards--g .tcard .tx { justify-self: start; }
  .tcards--i .tcard { border-left: 0; border-top: 1px solid var(--dc-color-line); }
  .tcards--i .tcard:first-child { border-top: 0; }
  .team4 { gap: 14px; }
}

/* treatment tiles: words and an illustration of the treatment */
.tcards--pic { grid-template-columns: 1fr 1fr; }
.tcards--pic .tcard { grid-template-columns: 1fr 276px; min-height: 207px; overflow: hidden; }
.tcards--pic .tcard img { order: 2; height: 100%; aspect-ratio: auto; transition: transform var(--dc-dur) var(--dc-ease); }
.tcards--pic .tcard:hover img { transform: scale(1.03); }
@media (max-width: 1180px) {
  .tcards--pic .tcard { grid-template-columns: 1fr 220px; }
}
@media (max-width: 980px) {
  .tcards--pic { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tcards--pic .tcard { grid-template-columns: 1fr; }
  .tcards--pic .tcard img { order: -1; height: auto; aspect-ratio: 16 / 10; }
}
/* black tiles with a fine outline, so the illustration's black runs into the tile */
.tcards--pic .tcard, .tcards--pic .tcard:hover { background: var(--dc-color-ground); }
.tcards--pic .tcard::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--dc-color-line-2); pointer-events: none; transition: box-shadow var(--dc-dur) var(--dc-ease); }
.tcards--pic .tcard:hover::after { box-shadow: inset 0 0 0 1px var(--dc-color-ink); }

/* team: seven people and the link to the whole team, four across */
.team4 { row-gap: 26px; }
.team4 img { background: var(--dc-color-raised); }
.team4 span { display: block; }
.team__all { display: flex; flex-direction: column; justify-content: center; gap: 10px; aspect-ratio: 1 / 1; padding: var(--dc-pad-card); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); text-decoration: none; transition: background-color var(--dc-dur) var(--dc-ease); }
.team__all:hover { background: var(--dc-color-raised-2); }
.team__all b { font: var(--dc-weight-display) var(--dc-step-h3)/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.team__all .tx { font-size: var(--dc-step-small); }

.gallery { grid-template-columns: repeat(4, 1fr); grid-template-rows: 196px 196px 196px; gap: 12px; }
.gallery img:first-child { grid-column: span 2; grid-row: span 2; }

/* testimonials: the one white band in the middle of the page, with the score, a large lead quote and gold stars */
.proof .stars--gold { color: var(--dc-color-ink); }
.proof__top { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.proof__top .lede { margin-top: 12px; }
.proof__score { display: inline-flex; align-items: center; gap: 16px; padding: 14px 24px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); color: var(--dc-color-text-2); font-size: var(--dc-step-small); text-decoration: none; transition: background-color var(--dc-dur) var(--dc-ease); }
.proof__score:hover { background: var(--dc-color-raised-2); }
.proof__score b { font: var(--dc-weight-display) clamp(44px, 4.4vw, 60px)/1 var(--dc-font-display); letter-spacing: -.03em; color: var(--dc-color-ink); }
.proof__score > span { display: grid; gap: 4px; }
.proof__score .stars .ico, .proof__lead .stars .ico { width: 19px; height: 19px; }
.proof__lead { margin-top: 36px; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--dc-radius-panel); background: var(--dc-grey-0); color: var(--dc-grey-100); }
.proof__lead blockquote { font: var(--dc-weight-display) clamp(24px, 2.6vw, 36px)/1.25 var(--dc-font-display); letter-spacing: -.02em; max-width: 34em; }
.proof__lead figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; font-size: var(--dc-step-small); color: var(--dc-grey-74); }
.proof__lead figcaption b { color: var(--dc-grey-100); font-weight: var(--dc-weight-strong); }
.proof .revs { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.proof .rev { padding: 24px 26px; background: var(--dc-color-raised); }
.proof .rev blockquote { margin-top: 10px; color: var(--dc-color-ink); }
.proof .rev figcaption { padding-top: 14px; color: var(--dc-color-text-2); }
.proof .rev figcaption b { color: var(--dc-color-ink); font-weight: var(--dc-weight-strong); }
.proof .films { margin-top: 14px; gap: 14px; }
.proof .film { background: var(--dc-grey-0); }
.proof .revs__all { margin-top: 24px; }

@media (max-width: 1180px) {
  .team4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
  .team4 { grid-template-columns: repeat(3, 1fr); }
  .team__all { grid-column: span 2; aspect-ratio: auto; }
  .gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: 220px 170px 170px 170px; }
  .gallery img:first-child { grid-column: 1 / -1; grid-row: auto; }
  .proof__top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .team4 { grid-template-columns: 1fr 1fr; }
  .team__all { grid-column: auto; aspect-ratio: 1 / 1; padding: 18px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px repeat(4, 150px); gap: 10px; }
  .proof .revs { grid-template-columns: 1fr; }
  .proof .film { grid-template-columns: 110px 1fr; }
}

.team4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team__all { min-width: 0; align-self: start; }
@media (max-width: 980px) {
  .team4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .team4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* team: one line; swipe, trackpad or the arrows. The next card peeks in so the row reads as more to see */
.team__head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 28px; }
.team__head .sec__head { margin-bottom: 0; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: end; }
.slide__btns { display: flex; gap: 10px; }
.slide__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--dc-color-line-2); border-radius: 50%; background: none; color: var(--dc-color-ink); cursor: pointer; transition: background-color var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease), opacity var(--dc-dur) var(--dc-ease); }
.slide__btn:hover:not(:disabled) { background: var(--dc-color-ink); border-color: var(--dc-color-ink); color: var(--dc-color-ground); }
.slide__btn:disabled { opacity: .35; cursor: default; }
.slide__btn--prev .ico { transform: rotate(180deg); }
.team4.team-track { display: flex; gap: var(--dc-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; margin-right: calc(-1 * var(--dc-gutter)); }
.team-track::-webkit-scrollbar { display: none; }
.team-track > * { flex: 0 0 276px; min-width: 0; scroll-snap-align: start; }
.team-track .team__all { aspect-ratio: 1 / 1; align-self: start; }
.team__photo { display: block; }

/* films: large tiles, the patient's face clear of the caption and the play button; a film opens across the full width */
.proof .films { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.proof .film { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: var(--dc-radius-panel); background: var(--dc-grey-0); color: var(--dc-grey-100); }
.proof .film .yt { aspect-ratio: 16 / 10; border-radius: 0; }
.proof .film .yt img { object-position: 50% 16%; transition: transform .6s var(--dc-ease-out); }
.proof .film:hover .yt img { transform: scale(1.03); }
.proof .film .yt .play { z-index: 1; left: 16px; top: auto; bottom: 16px; width: 72px; height: 72px; margin: 0; background: var(--dc-color-scrim-2); border-width: 2px; }
.proof .film .yt .play .ico { width: 28px; height: 28px; }
.proof .film figcaption { flex: 1; padding: 20px 24px 24px; }
.proof .film h3 { color: var(--dc-grey-100); font-size: var(--dc-step-h3-lg); letter-spacing: -.02em; }
.proof .film .film__t { color: var(--dc-grey-74); font-size: 15px; }
.proof .film blockquote { color: var(--dc-grey-100); font-size: 17px; }
.proof .film--open { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.proof .film--open figcaption { display: none; }
@media (max-width: 760px) { .proof .film--open.film--tall { aspect-ratio: 9 / 16; } }
.proof .film--open iframe, .proof .film--open video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.proof .proof__lead { margin-top: 14px; }


@media (max-width: 1180px) {
  .team__head .sec__head { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 980px) {
  .proof .films { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .team__head { grid-template-columns: 1fr; }
  .slide__btns { display: none; }
  .team-track > * { flex-basis: 66vw; }
  .proof .films { grid-template-columns: 1fr; }
}

/* the landscape films carry side bars: zoom just past them */
.proof .film .yt img[src*="yt-"] { transform: scale(1.56); transform-origin: 50% 58%; }
.proof .film:hover .yt img[src*="yt-"] { transform: scale(1.59); }
.proof .film { box-shadow: 0 0 0 1px var(--dc-color-line); }





/* the practice: tall panels edge to edge; the one you point at opens up */
.panels { display: flex; height: clamp(420px, 40vw, 580px); gap: 4px; }
.panels figure { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--dc-color-raised); transition: flex-grow .6s var(--dc-ease-out); }
.panels:not(:hover) figure:first-child, .panels figure:hover { flex-grow: 3.4; }
.panels img { width: 100%; height: 100%; object-fit: cover; filter: var(--dc-photo-dark); transition: filter var(--dc-dur) var(--dc-ease); }
.panels:not(:hover) figure:first-child img, .panels figure:hover img { filter: none; }
.panels figure::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(to top, var(--dc-grey-0), transparent); pointer-events: none; }
.panels figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 1; font: var(--dc-weight-display) var(--dc-step-h4)/1.2 var(--dc-font-display); color: var(--dc-grey-100); white-space: nowrap; }

@media (max-width: 760px) {
  .panels { flex-direction: column; height: auto; }
  .panels figure, .panels:not(:hover) figure:first-child, .panels figure:hover { flex: none; height: 190px; }
  .panels img { filter: var(--dc-photo-dark); }
}

/* the floating bar, as on the old site: call, WhatsApp, book. On a computer it joins after the first screen; on a phone it is always there. */
.dock { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 40; display: flex; gap: 8px; padding: 6px; border: 1px solid var(--dc-color-line-2); border-radius: var(--dc-radius-pill); background: var(--dc-color-raised-2); box-shadow: var(--dc-shadow-float); transition: transform var(--dc-dur) var(--dc-ease), opacity var(--dc-dur) var(--dc-ease), visibility var(--dc-dur); }
.dock a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1.5px solid transparent; border-radius: var(--dc-radius-pill); color: var(--dc-color-ink); font: var(--dc-weight-strong) 15px/1 var(--dc-font-text); text-decoration: none; white-space: nowrap; }
.dock .ico { width: 18px; height: 18px; }
.dock__call { background: var(--dc-color-call); color: var(--dc-color-on-call) !important; }
.dock__call:hover { background: var(--dc-color-on-call); color: var(--dc-color-call) !important; }
.dock__wa { border-color: var(--dc-color-line-2) !important; }
.dock__wa:hover { background: var(--dc-color-ink); border-color: var(--dc-color-ink) !important; color: var(--dc-color-ground) !important; }
.dock__book { background: var(--dc-color-btn); color: var(--dc-color-on-btn) !important; }
.dock__book:hover { background: var(--dc-color-btn-hover); }
.totop { position: fixed; right: clamp(14px, 2vw, 28px); bottom: calc(clamp(14px, 2vw, 28px) + 72px); z-index: 40; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--dc-color-line-2); border-radius: 50%; background: var(--dc-color-raised-2); color: var(--dc-color-ink); box-shadow: var(--dc-shadow-float); transition: background-color var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease), border-color var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease), opacity var(--dc-dur) var(--dc-ease), visibility var(--dc-dur); }
.totop:hover { background: var(--dc-color-ink); border-color: var(--dc-color-ink); color: var(--dc-color-ground); }
.totop:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(12px); }
@media (min-width: 761px) { .dock { display: none; } }
@media (max-width: 760px) {
  .dock { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .dock a { flex: 1 1 0; gap: 6px; padding: 0 6px; font-size: 14px; }
  .totop { right: 10px; bottom: 16px; width: 50px; height: 50px; }
  .dock { transition: right var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease), opacity var(--dc-dur) var(--dc-ease), visibility var(--dc-dur); }
  body:has(.totop.is-on) .dock { right: 68px; }
}
@media (max-width: 345px) { .dock .ico { display: none; } }

/* background rings (Fayez, 1 Nov): a thin line that fades out round the circle, as if lit from one side. Rings sit behind everything,
   stay out of the way of headings and reading text, and carry on across a band's edge between black bands but stop short where the band changes colour. */
.rings { --edge: max(var(--dc-gutter), calc((100vw - var(--dc-max)) / 2)); }
.rings :is(.sec, .hero, .close) { position: relative; overflow-x: clip; overflow-y: visible; }
.rings :is(.sec, .close) > *, .rings .trust { position: relative; z-index: 1; }
.rings :is(.sec, .hero, .close)::before, .rings :is(.sec, .hero, .close)::after { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: conic-gradient(from 200deg, transparent 0, var(--dc-color-text-2) 26%, transparent 62%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), black calc(100% - 1px)); mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), black calc(100% - 1px)); }
.rings :is(.sec, .hero, .close)::after { background: conic-gradient(from 20deg, transparent 0, var(--dc-color-text-2) 26%, transparent 62%); }
/* to the right beside left-hand headings, in the left margin only further down */
.rings :is(.hero, #treatments, #practice, #fees, #visit)::before { width: 470px; right: -170px; top: -90px; }
.rings :is(.hero, #top-ring)::before { top: 130px; }
.rings :is(.hero, #treatments, #practice, #fees, #visit)::after { width: 300px; right: -60px; top: 70px; opacity: .55; }
.rings :is(.hero, #top-ring)::after { top: 250px; }
.rings :is(#emergency, #implants, #team)::before { width: 510px; left: calc(var(--edge) - 518px); bottom: -120px; }
.rings :is(#emergency, #implants, #team)::after { width: 320px; left: calc(var(--edge) - 328px); bottom: 40px; opacity: .5; }
.rings :is(#areas, #stories, #why, #faq)::before { width: 560px; right: -240px; bottom: -170px; }
.rings :is(#areas, #stories, #why, #faq)::after { width: 300px; left: calc(var(--edge) - 308px); top: 8%; opacity: .55; }
.rings :is(#fees, #visit)::before { top: 24px; }
.rings :is(#fees, #visit)::after { top: 150px; }
.rings :is(#implants, #stories)::before { bottom: 24px; }
.rings #faq::before { width: 420px; right: -230px; bottom: -150px; }
.rings #areas::before { width: 510px; right: calc(var(--edge) - 518px); bottom: -120px; }
@media (max-width: 1240px) {
  .rings :is(.hero, #treatments, #practice, #fees, #visit)::before { width: 320px; right: -190px; }
  .rings #faq::before { width: 320px; right: -220px; bottom: -130px; }
  .rings :is(.sec, .hero, .close)::after { content: none; }
}
/* below this the text runs the full width, so rings only sit in the bottom corners, among the cards and the gap to the next band */
@media (max-width: 980px) {
  .rings :is(.hero, #areas)::before { content: none; }
  .rings :is(#treatments, #practice, #fees, #visit, #stories, #why, #faq, #emergency, #implants, #team)::before { --ring: min(60vw, 300px); width: var(--ring); top: auto; bottom: -44px; opacity: .8; }
  .rings :is(#treatments, #practice, #fees, #visit, #stories, #why, #faq)::before { right: calc(var(--ring) * -.6); }
  .rings :is(#emergency, #implants, #team)::before { left: calc(var(--ring) * -.6); }
  .rings :is(#implants, #stories)::before { bottom: 16px; }
}

/* the phone number: green like every other call button, still boxed */
.phone { background: var(--dc-color-call); border-color: var(--dc-color-call); color: var(--dc-color-on-call); }
.phone:hover { background: var(--dc-color-on-call); border-color: var(--dc-color-call); color: var(--dc-color-call); }

/* the header: a floating pill, matching the call bar at the bottom. The page runs up behind it */
.hdr { top: 12px; padding-top: 12px; background: none; border: 0; margin-bottom: -82px; }
.hdr > .wrap { width: min(1320px, 100% - 32px); min-height: 70px; padding: 0 12px 0 28px; border: 1px solid var(--dc-color-line-2); border-radius: var(--dc-radius-pill); background: var(--dc-color-raised); box-shadow: var(--dc-shadow-float); }
.mega { left: 16px; right: 16px; top: calc(100% + 8px); border: 1px solid var(--dc-color-line-2); border-radius: var(--dc-radius-panel); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.hero { padding-top: 150px; }
@media (max-width: 1280px) {
  .mnav { display: none; }
  .burger { display: grid; }
  .hdr .phone { margin-left: auto; }
}
@media (max-width: 760px) {
  .hdr { top: 44px; padding-top: 8px; margin-bottom: -70px; }
  .hdr > .wrap { width: calc(100% - 20px); min-height: 62px; gap: 6px; padding: 0 6px 0 18px; }
  .hero { padding-top: 100px; }
  .phone { justify-content: center; width: 48px; padding: 0; border-radius: 50%; }
  .phone__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* the footer: who and how to reach us, every link, then the small print */
.foot__lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: start; padding-bottom: 44px; border-bottom: 1px solid var(--dc-color-line); }
.foot p.foot__entity { max-width: 36em; }
.foot__list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 8px 44px; justify-content: start; }
.foot__list a, .foot__list span { display: flex; align-items: flex-start; gap: 10px; min-height: 26px; color: var(--dc-color-ink); font-size: 15px; line-height: 1.45; }
.foot__list .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--dc-color-text-2); }
.foot__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; margin-top: 44px; }
.foot__cols a { font-size: 15px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot__social { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-left: 28px; }
.foot__social a { text-decoration: underline; text-underline-offset: 3px; }
.foot__social a:hover { text-decoration-thickness: 2px; }
.foot__bar a, .foot__cookies { color: var(--dc-color-text-2); text-decoration: underline; text-underline-offset: 3px; }
.foot__bar a:hover, .foot__cookies:hover { color: var(--dc-color-ink); text-decoration-thickness: 2px; }
.foot__cookies { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
@media (max-width: 1180px) {
  .foot__lead { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 980px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__cols > :last-child { grid-column: 1 / -1; }
  .foot__cols > :last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .foot__list { grid-auto-flow: row; grid-template-rows: none; gap: 0; }
  .foot__social { padding-left: 0; }
  .foot ul { gap: 0; }
  .foot__list a, .foot__list span, .foot__cols a, .foot__bar a, .foot__cookies { display: flex; align-items: center; min-height: 48px; }
  .foot__bar { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .foot__legal { padding-right: 0; }
}

/* the treatment page: hero, trust strip, breadcrumb, chapter row, reviewed box, then the page's sections in one reading column.
   Layout a keeps every block in the column on black; layout b runs bands across the page and lets the blocks use the full grid */
.hero--t { min-height: 0; padding-bottom: 72px; }
.hero--t h1 { max-width: 25ch; font-size: var(--dc-step-close); line-height: 1.08; text-wrap: balance; }
.hero--t .hero__sub { max-width: var(--dc-measure); font-size: var(--dc-step-lede); }
.crumbs { padding: 20px 0 14px; font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--dc-color-line-2); }
.crumbs a { text-underline-offset: 3px; transition: color var(--dc-dur-fast) var(--dc-ease); }
.crumbs a:hover { color: var(--dc-color-ink); text-decoration-thickness: 2px; }
.crumbs [aria-current] { color: var(--dc-color-ink); }
.secnav { position: sticky; top: 104px; z-index: 20; }
.secnav__in { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--dc-color-line-2); border-radius: var(--dc-radius-pill); background: var(--dc-color-raised); box-shadow: var(--dc-shadow-float); }
.secnav ol { flex: 1; min-width: 0; display: flex; gap: 2px; list-style: none; padding: 0; overflow-x: auto; scrollbar-width: none; }
.secnav ol::-webkit-scrollbar { display: none; }
.secnav li { flex: none; }
.secnav a { display: block; min-height: 48px; line-height: 48px; padding: 0 16px; border-radius: var(--dc-radius-pill); color: var(--dc-color-text-2); font-size: var(--dc-step-small); text-decoration: none; white-space: nowrap; transition: background-color var(--dc-dur-fast) var(--dc-ease), color var(--dc-dur-fast) var(--dc-ease); }
.secnav a:hover { background: var(--dc-color-raised-2); color: var(--dc-color-ink); }
.secnav a.is-active { background: var(--dc-color-ink); color: var(--dc-color-ground); }
.secnav__arrow { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--dc-color-ink); cursor: pointer; transition: background var(--dc-dur-fast) var(--dc-ease), color var(--dc-dur-fast) var(--dc-ease), opacity var(--dc-dur-fast) var(--dc-ease); }
.secnav__arrow:hover { background: var(--dc-color-ink); color: var(--dc-color-ground); }
.secnav:not(.has-prev) .secnav__arrow--prev, .secnav:not(.has-next) .secnav__arrow--next { opacity: .35; pointer-events: none; }
.intro { padding-top: 24px; }
.revbox { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px 18px; align-items: center; width: min(var(--dc-read), 100%); margin-inline: auto; padding: 20px 24px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.revbox img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.revbox .reviewed { padding: 0; border: 0; max-width: none; font-size: var(--dc-step-small); line-height: 1.45; color: var(--dc-color-text); }
.revbox .reviewed a { color: var(--dc-color-ink); text-underline-offset: 3px; }
.revbox .reviewed__note { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--dc-color-line); font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.revbox .reviewed__note strong { color: var(--dc-color-ink); font-weight: var(--dc-weight-strong); }

.tsec { scroll-margin-top: 160px; }
.tsec h2 { text-align: center; text-wrap: balance; margin-bottom: 32px; }
.read { width: min(var(--dc-read), 100%); margin-inline: auto; }
.read > * + * { margin-top: 20px; }
.read a:not(.btn), .steps a { color: var(--dc-color-ink); text-underline-offset: 4px; }
.read a:not(.btn):hover, .steps a:hover { text-decoration-thickness: 2px; }
.tsec__wide { margin-top: 32px; }
.read + .tsec__wide + .read, .tsec__wide + .read { margin-top: 32px; }
.tsec__wide + .tsec__wide { margin-top: var(--dc-gap); }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 24px 28px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.callout__t { font: var(--dc-weight-display) var(--dc-step-h4)/1.35 var(--dc-font-display); color: var(--dc-color-ink); }
.read .callout { margin-top: 28px; }
.tsec .steps p { color: var(--dc-color-text); }
.more-link { margin-top: 18px; text-align: center; }

/* the content blocks the guide and treatment pages carry */
.read h3 { margin-top: 32px; font: var(--dc-weight-display) var(--dc-step-h4)/1.25 var(--dc-font-display); color: var(--dc-color-ink); }
.read ul, .read ol { display: grid; gap: 10px; padding-left: 1.25em; }
.read .fine, .fine { font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.tablewrap { border-radius: var(--dc-radius-card); background: var(--dc-color-raised); padding: 8px 24px; }
.read .tablewrap { margin-top: 28px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 15px 16px 15px 0; text-align: left; vertical-align: top; font-size: var(--dc-step-small); line-height: 1.45; }
.table thead th { font: var(--dc-weight-strong) var(--dc-step-small)/1.3 var(--dc-font-text); color: var(--dc-color-ink); }
.table tbody tr { border-top: 1px solid var(--dc-color-line); }
.table tbody th { font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.table td { color: var(--dc-color-text); }
.rowcards, .tris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-gap); }
.rowcards--3, .tris { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rowcards--1 { grid-template-columns: 1fr; }
.rowcard, .tri { padding: 22px var(--dc-pad-card); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.rowcards:not(.rowcards--3) .rowcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rowcards--3 .rowcard:last-child:nth-child(3n + 1), .tri:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.rowcards--3 .rowcard:last-child:nth-child(3n + 2), .tri:last-child:nth-child(3n + 2) { grid-column: span 2; }
.rowcard__t, .tri__t { font: var(--dc-weight-strong) 17px/1.35 var(--dc-font-text); color: var(--dc-color-ink); }
.rowcard__b, .tri__b { margin-top: 6px; font-size: var(--dc-step-small); line-height: 1.5; color: var(--dc-color-text); }
.rowcard__b a, .tri__b a, .act__b a, .jcard__b a { color: var(--dc-color-ink); text-underline-offset: 3px; }
.rowcard--now, .tri--now { box-shadow: inset 0 0 0 1.5px var(--dc-color-emergency); }
.rowcard--now .rowcard__t, .tri--now .tri__t { color: var(--dc-color-emergency); }
.acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.act { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.act:last-child:nth-child(odd) { grid-column: 1 / -1; }
.act__n { width: 44px; height: 44px; border-radius: 50%; background: var(--dc-color-ink); color: var(--dc-color-on-btn); display: grid; place-items: center; font: 600 17px/1 var(--dc-font-display); }
.act__b { align-self: center; font-size: var(--dc-step-small); line-height: 1.5; color: var(--dc-color-text); }
.ocards, .jcards, .revs--t { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dc-gap); list-style: none; padding: 0; }
.jcards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ocard, .jcard { display: block; padding: 22px var(--dc-pad-card); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); color: inherit; text-decoration: none; transition: background-color var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
a.ocard:hover { background: var(--dc-color-raised-2); transform: translateY(-3px); }
.ocard__t, .jcard__t { font: var(--dc-weight-display) var(--dc-step-h4)/1.25 var(--dc-font-display); color: var(--dc-color-ink); }
.ocard__p, .jcard__b { margin-top: 6px; font-size: var(--dc-step-small); line-height: 1.5; color: var(--dc-color-text); }
.ocard__m { margin-top: 10px; font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.jcard__n { display: block; margin-bottom: 10px; font: 600 17px/1 var(--dc-font-display); color: var(--dc-color-text-2); }
.tiers { display: grid; }
.tier { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-top: 1px solid var(--dc-color-line); }
.tier__t { color: var(--dc-color-ink); }
.tier__p { font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); text-align: right; }
.checks { list-style: none; padding: 0; }
.read ul.checks { display: grid; gap: 0; padding: 0; }
.checks li { padding: 12px 0; border-top: 1px solid var(--dc-color-line); }
.pricebox { margin-top: 24px; padding: var(--dc-pad-card); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.pricebox__n { font: var(--dc-weight-display) var(--dc-step-figure)/1 var(--dc-font-display); color: var(--dc-color-ink); }
.pricebox .lede { margin-top: 10px; font-size: var(--dc-step-body); color: var(--dc-color-text); }
.knote { padding: 16px 20px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); font-size: var(--dc-step-small); }
.clin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--dc-gap-lg); align-items: center; }
.clin__f img { border-radius: var(--dc-radius-card); }
.clin__r { font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.clin__q { margin-top: 14px; }
.clin__c > * + * { margin-top: 12px; }
.tsec .rev { padding: 22px var(--dc-pad-card); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.rev__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.rev__q { margin-top: 10px; font-size: var(--dc-step-small); line-height: 1.5; color: var(--dc-color-text); }
.rev__f { margin-top: 10px; font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.intro__lede:has(.facts-strip) { width: 100%; }
.tsec .revs { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 0; }
.jcards--prose { grid-template-columns: minmax(0, 1fr); width: min(var(--dc-read), 100%); margin-inline: auto; }
.jcard__b p + p { margin-top: 12px; }
.jcard__b a { color: var(--dc-color-ink); }
.read .sec__photo img { border-radius: var(--dc-radius-card); }
.disclaimer { font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.disclaimer strong { color: var(--dc-color-ink); font-weight: var(--dc-weight-strong); }
.facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dc-gap); }
.fs { padding: 18px 22px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.fs__n { font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.1 var(--dc-font-display); color: var(--dc-color-ink); }
.fs__l { font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.bas { display: grid; gap: var(--dc-gap); }
.bas:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-card:only-child { width: min(860px, 100%); margin-inline: auto; }
.ba { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--dc-radius-card); }
.ba .ba__after img { display: block; width: 100%; height: auto; }
.ba .ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba .ba__before img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba__tag { position: absolute; top: 12px; right: 12px; padding: 4px 12px; border-radius: var(--dc-radius-pill); background: var(--dc-color-scrim-2); font-size: var(--dc-step-fine); color: var(--dc-grey-100); }
.ba__before .ba__tag { right: auto; left: 12px; }
.ba__handle { position: absolute; inset: 0 auto 0 var(--pos); width: 2px; margin-left: -1px; background: var(--dc-grey-100); pointer-events: none; }
.ba__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--dc-grey-100); border-radius: 50%; background: var(--dc-color-scrim-2); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible + .ba__handle::after { outline: 2px solid var(--dc-grey-100); outline-offset: 3px; }
.ba-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.ba-card figcaption b { color: var(--dc-color-ink); }
@media (max-width: 760px) { .bas:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr); } }
.read figure { margin-top: 28px; }
.read figure img, .read figure video { width: 100%; height: auto; border-radius: var(--dc-radius-img); }
.read figure.case-media--portrait { width: min(360px, 100%); margin-inline: auto; }
.read figcaption { margin-top: 10px; font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.read blockquote { margin-top: 28px; font: var(--dc-weight-display) var(--dc-step-h3)/1.3 var(--dc-font-display); color: var(--dc-color-ink); }
.read blockquote cite { display: block; margin-top: 10px; font: var(--dc-weight-text) var(--dc-step-fine)/1.4 var(--dc-font-text); color: var(--dc-color-text-2); }
.read ul.case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-gap); padding: 0; list-style: none; }
.case-facts li { padding: 16px 20px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); font-size: var(--dc-step-small); line-height: 1.4; }
.case-facts b, .case-steps b { display: block; font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.read ol.case-steps { gap: 16px; }
.read blockquote p { font: inherit; }
.redflag { width: min(var(--dc-read), 100%); max-width: none; margin: var(--dc-gap) auto 0; }
.intro__lede { margin-top: 24px; }

.tsec__wide .fin { margin-top: 0; }
.tpage .proof h2 { text-align: center; }
.tpage .proof .films { margin-top: 0; }
.tpage .faq { padding-top: var(--dc-section-y); }
.faq details > p:last-child { padding-bottom: 26px; }
.related { padding-top: 0; }
.related h2 { margin-bottom: 24px; }
.related .more { margin-top: 0; }
.close__areas { margin-top: 14px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); max-width: var(--dc-measure); }

.nb { white-space: nowrap; }

/* the town page: journey first (Fayez, 2 Nov). Getting to us comes straight after the hero: the Google map beside six figures, the page's own drive time in white */
.tfigs__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-gap); list-style: none; margin: 0; padding: 0; }
.tfig { padding: 20px 22px; border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.tfig--here { background: var(--dc-color-ink); }
.tfig--here .tfig__n, .tfig--here .tfig__l { color: var(--dc-color-ground); }
.tfig__n { font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.1 var(--dc-font-display); letter-spacing: -.02em; color: var(--dc-color-ink); }
.tfig__l { margin-top: 4px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.find__list { list-style: none; padding: 0; margin-top: 18px; }
.find__list li { padding: 11px 0; border-top: 1px solid var(--dc-color-line); font-size: var(--dc-step-small); }
.find__list a, .find__list b { color: var(--dc-color-ink); }
.find__list b { font-weight: var(--dc-weight-strong); }
.dirs { list-style: none; padding: 0; margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.dirs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 11px 0; border-top: 1px solid var(--dc-color-line); }
.dirs b { font-weight: var(--dc-weight-strong); font-size: var(--dc-step-small); color: var(--dc-color-ink); }
.dirs span { font-weight: var(--dc-weight-strong); font-size: var(--dc-step-small); color: var(--dc-color-ink); }
.dirs small { grid-column: 1 / -1; font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.dirs__here { box-shadow: inset 0 2px 0 var(--dc-color-ink); }
.find .btns { margin-top: 22px; }
.find { padding-top: 56px; }
.find__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--dc-gap); }
.find__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 16px var(--dc-gap-lg); align-items: start; margin-top: 32px; }
.find__row .find__list, .find__row .dirs { margin-top: 0; }
.find__row .btns { grid-column: 1 / -1; margin-top: 0; }
.band__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 28px; }
.band__foot .link { color: var(--dc-color-ink); text-underline-offset: 4px; }
.tpage .close--b .btns { display: flex; flex-wrap: wrap; justify-content: center; }
.tpage .close--b .btn { width: auto; }
.tpage .close--b .lede { max-width: var(--dc-measure); }
.rev__n, .rev__m { display: block; }
.rev__n { font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.rings.ttown :is(.areas-links, #visit)::before, .rings.ttown :is(.areas-links, #visit)::after { content: none; }
@media (max-width: 980px) {
  .find__top, .find__row { grid-template-columns: minmax(0, 1fr); }
  .find__top .map { min-height: 320px; }
}
@media (max-width: 760px) {
  .tfig { padding: 16px 18px; }
  .dirs { grid-template-columns: minmax(0, 1fr); }
  .tpage .close--b .btns, .tpage .close--b .btn { width: 100%; }
  .band__foot .link { display: inline-flex; align-items: center; min-height: 48px; }
}

/* rings stay in the margins beside the reading column; a band whose blocks use the full grid has none */
.rings .ring-r::before { width: 440px; right: -230px; top: 120px; }
.rings .ring-l::before { width: 380px; left: -210px; top: 120px; }
.rings :is(.ring-r, .ring-l)::after { content: none; }
.tpage .tsec:has(.tsec__wide)::before { content: none; }
.rings :is(.hero--t, #top-ring)::before { width: 380px; right: -230px; top: 150px; }
.rings :is(.hero--t, #top-ring)::after { content: none; }
@media (max-width: 1180px) {
  .rings :is(.ring-r, .ring-l)::before, .rings :is(.hero--t, #top-ring)::before { content: none; }
}
@media (max-width: 760px) {
  .hero--t { padding-bottom: 48px; }
  .secnav { top: 118px; }
  .secnav__in { padding: 2px; }
  .secnav__arrow { display: none; }
  .secnav a { min-height: 48px; line-height: 48px; padding: 0 14px; font-size: var(--dc-step-fine); }
  .revbox { padding: 18px; }
  .callout { padding: 22px; }
  .callout .btns, .callout .btn { width: 100%; }
  .tablewrap { padding: 4px 18px; }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: auto; }
  .table thead { display: none; }
  .table tbody tr { padding: 14px 0; }
  .table tbody tr:first-child { border-top: 0; }
  .table th, .table td { padding: 0; }
  .table td + td, .table th + td { margin-top: 6px; }
  .table td[data-l]::before { content: attr(data-l) ": "; color: var(--dc-color-text-2); }
  .rowcards, .rowcards--3, .tris, .acts, .ocards, .jcards, .clin, .tsec .revs { grid-template-columns: minmax(0, 1fr); }
  .facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rowcards--3 .rowcard:last-child:nth-child(n), .tri:last-child:nth-child(n) { grid-column: auto; }
  .rowcard, .tri, .ocard, .jcard { padding: 20px 22px; }
}

/* hubs and indexes: the page's answers in one place, and lists of pages that leave no empty slot */
.glance { padding-block: var(--dc-gap-lg); }
.glance__figs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.clin h2 { text-align: left; margin-bottom: 0; }
.thub .areas-links { text-align: center; }
.thub .areas-links .lede { margin-inline: auto; }
.thub .areas-links .chips { justify-content: center; }
.glance__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-gap); margin-top: var(--dc-gap); }
.pane { display: flex; flex-direction: column; padding: var(--dc-pad-panel); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); color: var(--dc-color-text); }
.pane h2 { margin-bottom: 20px; font-size: var(--dc-step-h3-lg); text-align: left; }
.pane .fine { margin-top: auto; padding-top: 16px; }
.pane .fine a { color: var(--dc-color-ink); text-underline-offset: 4px; }
.pane .lede { margin-bottom: 16px; font-size: var(--dc-step-body); }
.pane .checks li span { color: var(--dc-color-ink); }
.ocards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ocards > :only-child { grid-column: 1 / -1; }
.ocard--now { outline: 1px solid var(--dc-color-emergency); outline-offset: -1px; }
.thub :is(.on-light, .on-white) + .areas-links { padding-top: var(--dc-section-y); }
.areas-links .lede { max-width: var(--dc-measure); margin-bottom: 20px; }
.hublist h2 { text-align: center; margin-bottom: 32px; }
.hublist h2:has(+ .lede) { margin-bottom: 14px; }
.hublist .lede { max-width: var(--dc-measure); margin: 0 auto 32px; text-align: center; }
.linkcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--dc-gap); }
.linkcards > * { grid-column: span 2; }
.linkcards > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.linkcards > :last-child:nth-child(3n + 2), .linkcards > :nth-last-child(2):nth-child(3n + 1) { grid-column: span 3; }
.find__top:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  .glance__two { grid-template-columns: minmax(0, 1fr); }
  .linkcards > *, .linkcards > :last-child:nth-child(n), .linkcards > :nth-last-child(2):nth-child(n) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .glance__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance__figs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ocards:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) {
  .ocards--4:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1181px) {
  .ocards--4:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tsec .revs:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* money pages: prices that are never folded away, and the finance calculator */
.tmoney .tsec > .wrap > h2 { text-align: center; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-gap); margin-bottom: var(--dc-gap-lg); }
.offer { display: flex; flex-direction: column; gap: 12px; padding: var(--dc-pad-panel); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.offer .pricebox__n, .offer h3 { font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.15 var(--dc-font-display); color: var(--dc-color-ink); }
.offer .pricebox__n s { margin-left: 10px; font-size: var(--dc-step-body); color: var(--dc-color-text-2); }
.offer .lede, .offer > p { margin: 0; font-size: var(--dc-step-body); color: var(--dc-color-text); }
.offer .btn, .offer .btns { margin-top: auto; }
.offer--now { outline: 1px solid var(--dc-color-emergency); outline-offset: -1px; }
.fees-top { padding-bottom: var(--dc-gap-lg); }
.tmoney #finance { padding-bottom: 0; }
.feenotes { padding-top: var(--dc-gap-lg); }
.offer sup { font-size: inherit; vertical-align: baseline; }
.fees-top .offers { margin-bottom: 0; }
.fees-b .fine { max-width: var(--dc-measure); margin: 24px auto 0; text-align: center; }
.feeline__k h3 { font: var(--dc-weight-display) var(--dc-step-h3)/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.feeline dd { flex: none; max-width: 50%; white-space: normal; text-align: right; font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.feeline dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--dc-color-line); }
.feeline dl div:last-child { border-bottom: 0; }
.fee__note { margin-top: 6px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.feeline .btns { margin-top: 14px; }
.feelines { display: grid; }
.feeline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px var(--dc-gap-lg); padding: 28px 0; border-top: 1px solid var(--dc-color-line-2); scroll-margin-top: 170px; }
.feeline:first-child { border-top: 0; }
.feeline__k p { margin-top: 4px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.feeline dl div:first-child { padding-top: 0; }
.feenotes__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-gap); }
.feenotes article { padding: var(--dc-pad-panel); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.feenotes h2 { margin-bottom: 14px; font-size: var(--dc-step-h3-lg); text-align: left; }
.feenotes p + p, .feenotes p + ul, .feenotes ul + p { margin-top: 12px; }
.fincalc .calc { margin-top: var(--dc-gap); }
.calc, .pricepair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--dc-gap); }
.pricepair { margin-top: var(--dc-gap); }
.calc > :first-child, .pricepair > :first-child { padding: var(--dc-pad-panel); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.calc__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 16px; margin-bottom: 24px; }
.calc__row label { font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.calc__val { font: var(--dc-weight-display) var(--dc-step-h3)/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.calc__row input[type="range"] { grid-column: 1 / -1; width: 100%; height: 48px; margin: 0; accent-color: var(--dc-color-ink); cursor: pointer; }
.calc__terms { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.calc__terms button { min-height: 48px; padding: 0 18px; border: 1px solid var(--dc-color-line-2); border-radius: var(--dc-radius-pill); background: none; color: var(--dc-color-text); font: inherit; font-size: var(--dc-step-small); cursor: pointer; transition: background var(--dc-dur) var(--dc-ease), color var(--dc-dur) var(--dc-ease); }
.calc__terms button:hover { background: var(--dc-color-raised-2); color: var(--dc-color-ink); }
.calc__terms button.is-on { background: var(--dc-color-ink); border-color: var(--dc-color-ink); color: var(--dc-color-ground); }
.calc__out, .price-out { display: flex; flex-direction: column; padding: var(--dc-pad-panel); border-radius: var(--dc-radius-card); }
.calc__k { font-weight: var(--dc-weight-strong); color: var(--dc-color-text); }
.calc__m { margin: 8px 0 20px; font: var(--dc-weight-display) var(--dc-step-figure)/1 var(--dc-font-display); letter-spacing: -.03em; color: var(--dc-color-ink); }
.calc__m small { margin-left: 10px; font: var(--dc-weight-text) var(--dc-step-body)/1 var(--dc-font-text); letter-spacing: 0; color: var(--dc-color-text-2); }
.calc__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--dc-color-line); }
.calc__rows b { color: var(--dc-color-ink); text-align: right; }
.calc__out .btn { margin-top: auto; }
.calc__rows { margin-bottom: 24px; }
.calc__legal { display: grid; gap: 8px; max-width: var(--dc-measure); margin: 20px auto 0; text-align: center; }
.pricepair .lede { margin-bottom: 16px; font-size: var(--dc-step-body); }
.price-out { gap: 12px; }
.price-out .pricebox__n { font: var(--dc-weight-display) var(--dc-step-figure)/1 var(--dc-font-display); letter-spacing: -.03em; color: var(--dc-color-ink); }
.price-out sup { font-size: inherit; vertical-align: baseline; }
.price-out s { margin-left: 12px; font-size: var(--dc-step-body); letter-spacing: 0; color: var(--dc-color-text-2); }
.price-out .lede { margin: 0; color: var(--dc-color-text); }
.price-out .btn { margin-top: auto; }
.pane > h3 { margin-bottom: 12px; font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.15 var(--dc-font-display); color: var(--dc-color-ink); }
.pane > p + p { margin-top: 12px; }
.pane .btns { margin-top: auto; padding-top: 18px; }
.pathways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dc-gap); margin-top: var(--dc-gap); }
.pathways h4 { margin: 18px 0 8px; font: var(--dc-weight-strong) var(--dc-step-body)/1.3 var(--dc-font-text); color: var(--dc-color-ink); }
.pathways .checks { margin-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 6px 14px; border: 1px solid var(--dc-color-line-2); border-radius: var(--dc-radius-pill); font-size: var(--dc-step-small); color: var(--dc-color-text); }
.refform { max-width: 860px; margin: var(--dc-gap) auto 0; padding: var(--dc-pad-panel); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); }
.form__t { font: var(--dc-weight-display) var(--dc-step-h3-lg)/1.15 var(--dc-font-display); color: var(--dc-color-ink); }
.form__s { margin-top: 8px; color: var(--dc-color-text); }
.form__step { margin: 28px 0 14px; font: var(--dc-weight-display) var(--dc-step-h3)/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.form__rows { display: grid; gap: 16px; }
.form__rows + .form__rows { margin-top: 16px; }
.form__rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.refform .field input, .refform .field select, .refform .field textarea { background: var(--dc-color-ground); }
.refform .fine a { color: var(--dc-color-ink); }
.form__submit { width: 100%; margin-top: 24px; }
@media (max-width: 860px) {
  .offers, .calc, .pricepair, .feenotes__in, .pathways, .form__rows--2 { grid-template-columns: minmax(0, 1fr); }
  .feeline { grid-template-columns: minmax(0, 1fr); }
}

/* practice pages: the team and reviews, each in full bands */
.roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dc-gap); margin-top: var(--dc-gap); }
.roster .team__photo { display: block; overflow: hidden; border-radius: var(--dc-radius-card); }
.roster img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; }
.roster figcaption { display: grid; gap: 2px; margin-top: 10px; font-size: var(--dc-step-small); color: var(--dc-color-text-2); }
.roster b { font-weight: var(--dc-weight-strong); color: var(--dc-color-ink); }
.clin--top { align-items: start; }
.biohead { margin-bottom: var(--dc-gap-lg); }
.tpractice .clin__c h3 { margin-top: 20px; font: var(--dc-weight-display) var(--dc-step-h3)/1.2 var(--dc-font-display); color: var(--dc-color-ink); }
.tpractice .clin__c h2 { font-size: var(--dc-step-h3-lg); }
.revtop { padding-block: var(--dc-gap-lg); }
.revtop .facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-inline: auto; }
.btns--mid { justify-content: center; margin-top: var(--dc-gap); }
.revjump { justify-content: center; margin-top: 24px; }
@media (min-width: 1181px) {
  .tsec .revs:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tsec .revs:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .tsec .revs:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 860px) {
  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the contact page: four ways to reach us, each a whole link */
.reach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dc-gap); }
.reach__way { display: flex; flex-direction: column; gap: 8px; padding: var(--dc-pad-card); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); color: var(--dc-color-text); text-decoration: none; transition: background var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
.reach__way:hover { background: var(--dc-color-raised-2); transform: translateY(-3px); }
.reach__t { order: -2; font: var(--dc-weight-display) var(--dc-step-h4)/1.25 var(--dc-font-display); color: var(--dc-color-ink); overflow-wrap: anywhere; }
.reach__k { order: -1; font-weight: var(--dc-weight-strong); font-size: var(--dc-step-small); color: var(--dc-color-ink); }
.reach__p { font-size: var(--dc-step-small); }
.reach__m { margin-top: auto; padding-top: 8px; font-weight: var(--dc-weight-strong); font-size: var(--dc-step-small); color: var(--dc-color-ink); text-decoration: underline; text-underline-offset: 4px; }
.reach__way--call { background: var(--dc-color-call); color: var(--dc-color-on-call); }
.reach__way--call:hover { background: var(--dc-color-call-hover); }
.reach__way--call .reach__t, .reach__way--call .reach__k, .reach__way--call .reach__m, .reach__way--call .reach__p { color: var(--dc-color-on-call); }
@media (max-width: 1100px) {
  .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .reach { grid-template-columns: minmax(0, 1fr); }
}

/* long pages: the browser skips laying out what's still far off screen, which is most of a phone's wait for the first paint.
   On each band's .wrap, not the band: the rings run past a band's edges and this clips to its box. Only where scroll anchoring exists, because a skipped band grows when it's reached; Safari hasn't got it, so scrolling back up there would jump. */
@supports (overflow-anchor: auto) {
  .tpage .sec > .wrap, .tpage .close > .wrap, .foot > .wrap { content-visibility: auto; contain-intrinsic-size: auto 700px; overflow-clip-margin: 8px; }   /* the margin leaves room for a card lifting or an arrow sliding on hover */
  .is-whole :is(.tpage .sec > .wrap, .tpage .close > .wrap, .foot > .wrap) { content-visibility: visible; }
}

/* legal pages: the whole document in one column on one sheet, its sections divided by a rule */
.doc { width: min(var(--dc-read), 100%); margin-inline: auto; }
.doc__head > * + *, .doc section > * + * { margin-top: 20px; }
.doc section { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--dc-color-line); scroll-margin-top: 112px; }
.doc h2 { margin-bottom: 0; text-align: left; font-size: var(--dc-step-h3); }
.doc h3 { margin-top: 32px; font: var(--dc-weight-display) var(--dc-step-h4)/1.25 var(--dc-font-display); color: var(--dc-color-ink); }
.doc h4 { font: inherit; color: inherit; }
.doc ul, .doc ol { display: grid; gap: 10px; padding-left: 1.25em; }
.doc a:not(.btn) { color: var(--dc-color-ink); text-underline-offset: 4px; overflow-wrap: anywhere; }
.doc a:not(.btn):hover { text-decoration-thickness: 2px; }
.doc .disclaimer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--dc-color-line); }

/* what site.js expects: scroll held still behind the drawer and the sheet */
body.is-sheet, body.is-locked { overflow: hidden; }

.skip { position: absolute; left: 8px; top: -64px; z-index: 90; padding: 12px 18px; border-radius: var(--dc-radius-pill); background: var(--dc-color-ink); color: var(--dc-color-ground); text-decoration: none; }
.skip:focus { top: 8px; }

/* the consent banner: its words, buttons and script stay as they are */
.consent { position: fixed; left: 50%; bottom: 20px; z-index: 60; display: grid; gap: 14px; width: min(620px, calc(100% - 2 * var(--dc-gutter))); padding: var(--dc-pad-card); border: 1px solid var(--dc-color-line-2); border-radius: var(--dc-radius-card); background: var(--dc-color-raised); color: var(--dc-color-text); font-size: var(--dc-step-small); opacity: 0; transform: translate(-50%, 16px); transition: opacity var(--dc-dur) var(--dc-ease), transform var(--dc-dur) var(--dc-ease); }
.consent[hidden] { display: none; }
.consent.is-in { opacity: 1; transform: translate(-50%, 0); }
.consent a { color: var(--dc-color-ink); text-underline-offset: 3px; }
.consent__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent .btn--sm { min-height: 48px; }
.consent .btn--ghost-ink { background: none; color: var(--dc-color-ink); box-shadow: inset 0 0 0 1.5px var(--dc-color-line-2); }
.consent__reject { min-height: 48px; padding: 0 12px; border: 0; background: none; color: var(--dc-color-text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) { .consent { bottom: 84px; gap: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.45; } .consent__btns { gap: 6px; } }

/* critique pass (3 Nov): breadcrumb and footer links get a usable tap height without moving the text */
.crumbs a { display: inline-block; padding-block: 15px; margin-block: -15px; }
@media (min-width: 761px) { .foot__cols a, .foot__links a, .foot__social a { display: inline-block; padding-block: 3px; } }
/* the offer bar scrolls away on a phone; the header and dock stay */
@media (max-width: 760px) { .note { position: relative; } }
/* the emergency group in the phone menu keeps its red, as in the computer menu */
.dr__grp--em summary { color: var(--dc-color-emergency); }
/* guide bands change colour every few sections; a section carrying on the band starts at its heading */
.tsec--cont { padding-top: 0; }
/* the reviewer's own lines, folded into the reviewed-by box */
.revbox__more { grid-column: 1 / -1; display: grid; gap: 8px; font-size: var(--dc-step-fine); color: var(--dc-color-text-2); }
.revbox__more a { color: var(--dc-color-ink); text-underline-offset: 3px; }
/* the page's own words about finding and contacting the practice, in the closing band */
.close__own { display: grid; gap: 10px; }
.close__own a { color: var(--dc-color-ink); text-underline-offset: 3px; }
.close__own ul { margin: 0; padding-left: 1.2em; }
.facts-strip--1 { grid-template-columns: minmax(0, 1fr); }
.facts-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .facts-strip--3 { grid-template-columns: minmax(0, 1fr); } }
/* a heading for screen readers where a card group sits straight under the page title (heading order, 3 Nov) */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sheet__call { margin: 14px 0 4px; }
/* links in running text keep the regular weight, even where the source wraps the anchor text in strong */
.read a strong { font-weight: inherit; }
/* call buttons inside the header (the Emergency menu) stay green: .hdr .btn would otherwise paint them white */
.hdr .btn--call { background: var(--dc-color-call); border-color: var(--dc-color-call); color: var(--dc-color-on-call); }
.hdr .btn--call:hover { background: var(--dc-color-call-hover); border-color: var(--dc-color-call-hover); }