/*
 * Deepcar Dental Care: site stylesheet (own rebuild, stage 2).
 *
 * Written from docs/spec/design-system.md (tokens and component anatomy measured from the
 * rendered site) and from computed styles read in Chrome. Pass A keeps today's class names so
 * tools/style-parity.mjs can prove each block renders exactly as before; pass B renames to dc-*.
 *
 * Layers, lowest to highest priority. While pass A runs, the old sheet still loads unlayered for
 * the blocks not rebuilt yet (data/stage2/retire.json), and unlayered rules outrank every layer.
 */
@layer tokens, base, layout, components, utilities;

/* Track B partials (footer, floating chrome, money and practice blocks). Each file places its own
   rules in @layer components and keeps any pass-A bridge rules unlayered, so it is imported without
   a layer. */
@import url("dc/s2b-footer.css");
@import url("dc/s2b-floating.css");
@import url("dc/s2b-money.css");
/* Track C partials (heroes and chapters; content blocks). Each wraps its rules in @layer
   components itself and ends with its own unlayered pass-A bridge. */
@import url("dc/s2c-heroes.css");
@import url("dc/s2c-content.css");
/* Track D partials (landers, home, hubs): component layer inside, own pass-A bridge at the end */
@import url("dc/s2d-landers.css");
@import url("dc/s2d-home.css");
@import url("dc/s2d-hubs.css");

/* ------------------------------------------------------------------ fonts and page motion */

@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  /* Latin subset, as the font file is cut */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Same-origin page changes cross-fade where the browser supports it. */
@view-transition { navigation: auto; }

@keyframes dc-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------------ tokens */

@layer tokens {
  /* Skin hook: the colour, line and radius tokens below read the custom properties that our design
     layer public/assets/sandstone.css sets on :root (loaded after this sheet on every page but the
     ad landers), so the Sandstone finish reaches our rules as it reached the old ones. The fallback
     is the value with no skin (landers). Pass B renames these hooks to --dc-* in sandstone.css. */
  :root {
    /* colour: brand and surfaces */
    --dc-color-ink: var(--ink, #0e0e0e);
    --dc-color-paper: var(--bone, #faf8f3);
    --dc-color-paper-glass: rgb(251 248 244 / .9);
    --dc-color-white: #fff;
    --dc-color-on-ink: var(--on-ink, #fff);          /* text on the dark surfaces */
    --dc-color-ink-2: var(--ink-2, #1f1f1f);         /* the second dark (figures under a dark hero) */
    --dc-color-green: #0f5e4b;
    --dc-color-green-hover: #15755d;
    --dc-color-mint: var(--accent-light, #8ed1bc);
    --dc-color-sage: var(--sage, #e6ede8);
    --dc-color-sage-tint: #e4efea;
    --dc-color-bone: var(--blush, #f1ede5);
    --dc-color-sand: var(--stone, #e7e1d7);
    --dc-color-red: #c2412b;
    --dc-color-red-hover: #a3341f;

    /* colour: ink and white at strengths (text, lines, tints) */
    --dc-ink-82: var(--t-body, rgb(14 14 14 / .82));
    --dc-ink-72: var(--t2, rgb(14 14 14 / .72));
    --dc-ink-48: var(--t3, rgb(14 14 14 / .48));
    --dc-line-strong: var(--line-strong, rgb(14 14 14 / .32));
    --dc-line: var(--line, rgb(14 14 14 / .18));
    --dc-line-ring: rgb(14 14 14 / .22);
    --dc-ink-06: rgb(14 14 14 / .06);
    --dc-ink-05: rgb(14 14 14 / .05);
    --dc-on-ink: var(--on-ink-2, rgb(255 255 255 / .76));
    --dc-on-ink-muted: var(--on-ink-3, rgb(255 255 255 / .52));
    --dc-on-ink-line: var(--on-ink-line, rgb(255 255 255 / .22));
    --dc-on-ink-control: rgb(255 255 255 / .4);
    --dc-green-line: var(--sage-line, rgb(15 94 75 / .16));
    --dc-green-35: rgb(15 94 75 / .35);
    --dc-green-45: rgb(15 94 75 / .45);

    /* type */
    --dc-font: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    --dc-step-body: clamp(17px, calc(13.5px + .4vw), 19px);
    --dc-step-lede: clamp(17px, calc(14.5px + .6vw), 20px);
    --dc-step-display: clamp(38px, 5vw, 72px);
    --dc-step-h2: clamp(28px, 2.8vw, 40px);
    --dc-step-h3-l: clamp(22px, calc(16px + 1.4vw), 28px);
    --dc-step-h3: clamp(19px, calc(16px + .5vw), 21px);

    /* space */
    --dc-space-1: 6px;
    --dc-space-2: 8px;
    --dc-space-3: 10px;
    --dc-space-4: 12px;
    --dc-space-5: 14px;
    --dc-space-6: 18px;
    --dc-space-7: 22px;
    --dc-space-8: 26px;
    --dc-space-9: 30px;
    --dc-space-10: 36px;
    --dc-space-11: 44px;
    --dc-space-12: 56px;

    /* container */
    --dc-gutter: clamp(20px, 4vw, 44px);
    --dc-container-wide: 1240px;
    --dc-container-narrow: 760px;

    /* section rhythm (vertical padding of a band), four families */
    --dc-section-home: clamp(44px, 5.5vw, 80px);
    --dc-section-page: clamp(32px, 4vw, 56px);
    --dc-section-guide: clamp(26px, 3vw, 40px);

    /* shape */
    --dc-radius-pill: 100px;
    --dc-radius-card: var(--r-card, 18px);
    --dc-radius-panel: 14px;
    --dc-radius-tile: 12px;
    --dc-radius-media: var(--r-img, 10px);

    /* depth */
    --dc-shadow-lift: 0 10px 26px rgb(14 14 14 / .16);
    --dc-shadow-overlay: 0 24px 60px rgb(14 14 14 / .16);

    /* motion */
    --dc-ease-out: cubic-bezier(.16, 1, .3, 1);
    --dc-ease-soft: cubic-bezier(.2, .7, .2, 1);
    --dc-dur-fast: .2s;
    --dc-dur-base: .25s;
    --dc-dur-med: .35s;
    --dc-dur-slow: .45s;

    /* stacking */
    --dc-z-sticky: 60;
    --dc-z-header: 80;
    --dc-z-menu: 90;
    --dc-z-drawer: 100;
    --dc-z-skip: 200;

    /* in-page jumps land below the sticky header */
    --dc-anchor-offset: 104px;
  }
}

/* ------------------------------------------------------------------ base */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    max-width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    max-width: 100%;
    overflow-x: clip;
    background: var(--dc-color-paper);
    color: var(--dc-color-ink);
    font-family: var(--dc-font);
    font-size: var(--dc-step-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img,
  iframe {
    display: block;
    max-width: 100%;
  }

  img { height: auto; }

  a { color: inherit; }

  button { font-family: inherit; }

  ::selection {
    background: var(--dc-color-green);
    color: var(--dc-color-white);
  }

  :focus-visible {
    outline: 2px solid var(--dc-color-green);
    outline-offset: 3px;
  }

  /* Page entry and exit (site.js sets the classes on <html>) */
  html.is-entering body { animation: dc-page-enter .5s var(--dc-ease-out) both; }

  html.is-leaving body {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
  }

  /* Type steps */
  .display {
    font-weight: 300;
    line-height: .94;
    letter-spacing: -.048em;
    text-wrap: balance;
  }

  /* the emphasised words of a headline: brand green, heavier, tighter */
  .display em {
    color: var(--dc-color-green);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -.055em;
  }

  .h2 {
    font-size: var(--dc-step-h2);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.025em;
    text-wrap: balance;
  }

  .h3 {
    font-size: var(--dc-step-h3-l);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
  }

  .h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: -.02em;
  }

  /* Reduced motion: everything settles at once. Important, so it beats component rules in
     every layer and in the old sheet. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }

  @media print {
    body { background: var(--dc-color-white); }
  }
}

/* ------------------------------------------------------------------ layout */

@layer layout {
  /* Section rhythm by template: home and default pages, practice / lander / guide pages, and
     the implant guides. Set on <body>, read by every band. */
  body { --dc-band-pad: var(--dc-section-home); }
  .guide-v2,
  .lp-v2 { --dc-band-pad: var(--dc-section-page); }
  .guide-v2[data-service="implants"] { --dc-band-pad: var(--dc-section-guide); }

  /* Container: centred column with fluid side gutters */
  .wrap {
    max-width: var(--dc-container-wide);
    margin-inline: auto;
    padding-inline: var(--dc-gutter);
  }

  /* on paper every container spans the page */
  @media print {
    .wrap { width: 100%; }
  }

  /* Band: a full-bleed section */
  .band {
    --dc-ring: var(--dc-line-ring);
    position: relative;
    padding-block: var(--dc-band-pad);
  }

  .band > .wrap {
    position: relative;
    z-index: 1;
  }

  /* guide-family pages use the narrow reading column */
  .guide-v2 main > .wrap { max-width: calc(var(--dc-container-narrow) + 2 * var(--dc-gutter)); }

  .band--tight { padding-block: calc(var(--dc-band-pad) * .6); }

  .lp-v2 .band--tight { padding-block: clamp(16px, 2vw, 22px); }
  .lp-v2 .band--tight:has(+ :not(.band--tight)) { padding-bottom: clamp(24px, 3vw, 36px); }

  .band--ink {
    --dc-ring: rgb(255 255 255 / .26);
    background: var(--dc-color-ink);
    color: var(--dc-color-on-ink);
  }

  .band--sage {
    --dc-ring: rgb(15 94 75 / .26);
    background: var(--dc-color-sage);
  }

  .band--blush,
  .band--bone2 {
    --dc-ring: rgb(14 14 14 / .19);
    background: var(--dc-color-bone);
  }

  .is-home #prices.band--blush { background: var(--dc-color-sage); }

  /* Two outline rings behind every band, placed by the band's position in a cycle of six so
     neighbouring bands never repeat. Decorative only. */
  .band::before,
  .band::after {
    content: "";
    position: absolute;
    z-index: 0;
    aspect-ratio: 1;
    border: 1px solid var(--dc-ring);
    border-radius: 50%;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .band::before,
    .band::after { transition: opacity .4s var(--dc-ease-out); }
  }

  .band::after { opacity: .5; }
  .band:nth-of-type(6n+1)::after,
  .band:nth-of-type(6n+3)::after,
  .band:nth-of-type(6n+6)::after { opacity: .55; }

  .band:nth-of-type(6n+1)::before { width: min(60vw, 470px); top: -9%; right: -15vw; }
  .band:nth-of-type(6n+1)::after { width: min(38vw, 300px); top: 9%; right: -3vw; }
  .band:nth-of-type(6n+2)::before { width: min(64vw, 510px); bottom: -13%; left: -19vw; }
  .band:nth-of-type(6n+2)::after { width: min(40vw, 320px); bottom: 5%; left: -6vw; }
  .band:nth-of-type(6n+3)::before { width: min(56vw, 440px); top: 50%; left: -25vw; transform: translateY(-50%); }
  .band:nth-of-type(6n+3)::after { width: min(34vw, 270px); bottom: -7%; right: -11vw; }
  .band:nth-of-type(6n+4)::before { width: min(66vw, 520px); bottom: -15%; right: -21vw; }
  .band:nth-of-type(6n+4)::after { width: min(32vw, 250px); top: -5%; left: -8vw; }
  .band:nth-of-type(6n+5)::before { width: min(52vw, 410px); top: -15%; left: -11vw; }
  .band:nth-of-type(6n+5)::after { width: min(44vw, 350px); top: 32%; right: -17vw; }
  .band:nth-of-type(6n+6)::before { width: min(58vw, 460px); top: 56%; right: -9vw; }
  .band:nth-of-type(6n+6)::after { width: min(36vw, 290px); bottom: -9%; left: -15vw; }

  /* Phones: one larger, softer ring per band */
  @media (max-width: 720px) {
    .band::before { opacity: .85; }
    .band::after { display: none; }
    .band:nth-of-type(6n+1)::before { width: 74vw; top: -3%; right: -30vw; }
    .band:nth-of-type(6n+2)::before { width: 78vw; bottom: -4%; left: -34vw; }
    .band:nth-of-type(6n+3)::before { width: 68vw; top: 46%; left: -32vw; }
    .band:nth-of-type(6n+4)::before { width: 80vw; bottom: -5%; right: -36vw; }
    .band:nth-of-type(6n+5)::before { width: 66vw; top: -4%; left: -26vw; }
    .band:nth-of-type(6n+6)::before { width: 72vw; top: 52%; right: -28vw; }
  }

  /* Band footer: a row of actions under a band's content */
  .band__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px 26px;
    margin-top: clamp(28px, 3.5vw, 44px);
  }

  #prices .band__foot { justify-content: center; }

  /* Grids */
  .grid2 {
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    text-align: left;
  }

  .grid2 > * { min-width: 0; }

  @media (min-width: 900px) {
    .grid2 { grid-template-columns: 1fr 1fr; }
  }

  .grid3 {
    display: grid;
    gap: 12px;
    text-align: left;
  }

  @media (min-width: 800px) {
    .grid3 { grid-template-columns: repeat(3, 1fr); }
  }

  /* practice pages: a three-panel grid holding only two panels splits in half from 761 */
  @media (min-width: 761px) {
    .practice-v2 .grid3:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
  }

  /* practice pages keep their grids to one column inside the narrow container */
  .guide-v2.practice-v2 .grid2 {
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.4vw, 28px);
  }

  /* lander grids marked to centre their items align them to the top instead */
  .lp-v2 .grid2[style*="align-items:center"] { align-items: start !important; }
}

/* ------------------------------------------------------------------ components: text */

@layer components {
  /* Section head: eyebrow, heading, intro */
  .head {
    margin-bottom: clamp(28px, 3.4vw, 44px);
    text-align: left;
  }


  .head__h { margin-top: 20px; }

  .head__p { margin: 18px 0 0; }

  .head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
  }

  .band--ink .head { color: var(--dc-color-on-ink); }

  /* Eyebrow: small capitals between two hairlines (one, after it, in a section head) */
  .label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    color: var(--dc-ink-48);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: .24em;
    text-align: center;
    text-transform: uppercase;
  }

  .label::before,
  .label::after {
    content: "";
    flex: 1 1 0%;
    max-width: 190px;
    height: 1px;
    background: var(--dc-line);
  }

  .label--left {
    justify-content: flex-start;
    text-align: left;
  }

  .label--left::before,
  .label--left::after { display: none; }

  .head .label { justify-content: flex-start; }
  .head .label::before { display: none; }
  .head .label::after { max-width: 64px; }

  /* a split head's inner head: no bottom margin, eyebrow aligned left with a short rule */
  .head--split .head { margin-bottom: 0; }
  .head--split .head .label { text-align: left; }

  .head--split .head .label::after {
    flex: none;
    width: 60px;
  }

  .is-home #prices .label::before,
  .is-home #prices .label::after { background: var(--dc-green-line); }

  .band--sage .label::before,
  .band--sage .label::after {
    border-color: var(--dc-green-line);
    background: var(--dc-green-line);
  }

  .label--ink,
  .band--ink .label { color: var(--dc-on-ink-muted); }

  .label--ink::before,
  .label--ink::after,
  .band--ink .label::before,
  .band--ink .label::after { background: var(--dc-on-ink-line); }

  /* Decorative mint wave above a section head */
  .mark {
    display: block;
    width: 56px;
    height: 34px;
    margin: 0 0 18px;
    color: var(--dc-color-mint);
  }

  .mark--left { margin-left: 0; }

  #waiting .mark { margin-inline: auto; }

  /* Intro paragraph */
  .lede {
    max-width: 60ch;
    color: var(--dc-ink-72);
    font-size: var(--dc-step-lede);
    line-height: 1.55;
    text-wrap: pretty;
  }

  .lede--ink,
  .band--ink .lede { color: var(--dc-on-ink); }

  /* Small print */
  .fine {
    max-width: 72ch;
    color: var(--dc-ink-48);
    font-size: 13px;
    line-height: 1.6;
  }

  .fine--ink,
  .band--ink .fine { color: var(--dc-on-ink-muted); }

  .fine.fine--ink { margin-inline: auto; }

  /* Long-form text column */
  .prose {
    min-width: 0;
    max-width: 760px;
  }

  .prose > section { padding: 8px 0 30px; }

  .prose > section + section {
    padding-top: 34px;
    border-top: 1px solid var(--dc-line);
  }


  .prose .h2 { margin-bottom: 16px; }

  .prose .h3 {
    margin-top: 26px;
    margin-bottom: 10px;
  }

  .prose .h4 { margin: 22px 0 8px; }

  .prose p {
    max-width: 66ch;
    margin: 0 0 14px;
    color: var(--dc-ink-72);
    font-size: var(--dc-step-body);
    line-height: 1.7;
    text-wrap: pretty;
  }

  .legal-v2 .prose a { overflow-wrap: anywhere; }
  .legal-v2 .prose .list li { font-size: var(--dc-step-body); }

  /* Bullet list with hairlines; numbered when it is an <ol> */
  .list {
    margin: 0 0 16px;
    list-style: none;
  }

  .list li {
    position: relative;
    padding: 9px 0 9px 24px;
    border-top: 1px solid var(--dc-line);
    color: var(--dc-ink-72);
    font-size: 15px;
    line-height: 1.6;
  }

  .list li:last-child { border-bottom: 1px solid var(--dc-line); }

  /* green dot bullet */
  .list li::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-color-green);
  }

  ol.list { counter-reset: li; }

  ol.list li {
    padding-left: 34px;
    counter-increment: li;
  }

  /* numbered: 01, 02 ... in small green figures */
  ol.list li::before {
    content: counter(li, decimal-leading-zero);
    top: 9px;
    left: 0;
    background: none;
    color: var(--dc-color-green);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .06em;
  }

  /* a list inside a list item: plain rows with a smaller dot */
  .list ul {
    margin-top: 6px;
    list-style: none;
  }

  .list ul li {
    padding: 4px 0 4px 20px;
    border-top: 0;
  }

  .list ul li::before {
    top: 13px;
    width: 4px;
    height: 4px;
    background: var(--dc-ink-48);
  }

  /* Checklist: tick and text rows with hairlines */
  .checks {
    display: flex;
    flex-direction: column;
    margin-top: 26px;
    list-style: none;
  }

  .checks li:last-child { border-bottom: 1px solid var(--dc-line); }

  .checks__p {
    font-size: 16px;
    line-height: 1.6;
  }

  /* numbered variant: a small step number in place of the tick */
  .checks__n {
    display: block;
    flex-shrink: 0;
    width: 26px;
    padding-top: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .28em;
  }

  .band--ink .checks__n { color: var(--dc-on-ink-muted); }

  .checks li {
    display: flex;
    gap: 13px;
    padding-block: 14px;
    border-top: 1px solid var(--dc-line);
    color: var(--dc-ink-72);
    font-size: 14px;
    line-height: 1.6;
  }

  .checks svg {
    display: block;
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--dc-color-green);
  }

  .band--ink .checks li { color: var(--dc-on-ink); }

  .band--sage .checks li { border-color: var(--dc-green-line); }
  .band--ink .checks li { border-color: var(--dc-on-ink-line); }
  .band--ink .checks svg { color: var(--dc-color-mint); }

  /* ---------------------------------------------------------------- buttons */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 16px 30px;
    border: 1px solid transparent;
    border-radius: var(--dc-radius-pill);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dc-dur-fast) ease, color var(--dc-dur-fast) ease,
      border-color var(--dc-dur-fast) ease, transform var(--dc-dur-base) var(--dc-ease-out),
      box-shadow var(--dc-dur-base) ease;
  }

  .btn svg { flex-shrink: 0; }

  .btn svg:last-child { transition: transform var(--dc-dur-base) var(--dc-ease-soft); }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--dc-shadow-lift);
  }

  .btn:hover svg:last-child { transform: translateX(4px); }

  .btn:active { transform: translateY(0); }

  /* Primary: brand green, ink on hover */
  .btn--ink,
  .btn--accent,
  .btn--alert {
    background: var(--dc-color-green);
    color: var(--dc-color-white);
  }

  .btn:is(.btn--ink, .btn--accent, .btn--alert):is(:hover, :focus-visible) {
    background: var(--dc-color-ink);
    border-color: var(--dc-color-ink);
    color: var(--dc-color-white);
  }

  /* Emergency: red */
  .btn.btn--emergency {
    background: var(--dc-color-red);
    border-color: var(--dc-color-red);
    color: var(--dc-color-white);
  }

  .btn.btn--emergency:is(:hover, :focus-visible) {
    background: var(--dc-color-red-hover);
    border-color: var(--dc-color-red-hover);
  }

  /* Light, for dark surfaces */
  .btn--bone {
    background: var(--dc-color-paper);
    color: var(--dc-color-ink);
  }

  .btn--bone:hover { background: var(--dc-color-white); }

  /* Outline */
  .btn--ghost {
    background: transparent;
    border-color: var(--dc-line-strong);
    color: var(--dc-color-ink);
  }

  .btn.btn--ghost:is(:hover, :focus-visible) {
    background: var(--dc-color-green);
    border-color: var(--dc-color-green);
    color: var(--dc-color-white);
    box-shadow: none;
  }

  /* Outline on dark */
  .btn--ghost-ink {
    background: transparent;
    border-color: var(--dc-on-ink-control);
    color: var(--dc-color-on-ink);
  }

  .btn.btn--ghost-ink:is(:hover, :focus-visible) {
    background: var(--dc-color-white);
    border-color: var(--dc-color-white);
    color: var(--dc-color-ink);
    box-shadow: none;
  }

  /* Sizes */
  .btn--sm {
    padding: 11px 20px;
    font-size: 14px;
  }

  .btn--wide { width: 100%; }

  /* Button row: wraps, stacks on phones */
  .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 22px;
  }
}

/* ------------------------------------------------------------------ components: header chrome
 * Skip link, announce bar, sticky header (logo, primary nav with four mega menus, phone pill,
 * Book button, menu button) and the phone drawer. Spec: design-system.md 2.2; behaviour:
 * site-js-behaviours.md (is-stuck, is-open, is-locked are set by site.js).
 */

@keyframes dc-announce-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .28; }
}

@layer components {
  /* Skip link: parked off screen, slides in on keyboard focus */
  .skip {
    position: absolute;
    top: 8px;
    left: -9999px;
    z-index: var(--dc-z-skip);
    display: block;
    padding: 10px 16px;
    border-radius: var(--dc-radius-pill);
    background: var(--dc-color-ink);
    color: var(--dc-color-paper);
  }

  .skip:focus { left: 12px; }

  /* Announce bar: one dark line above the header, offer on the left, hours and Book on the right */
  .announce {
    height: 40px;
    overflow: hidden;
    background: var(--dc-color-ink);
    color: var(--dc-color-paper);
  }

  .announce__in {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
  }

  .announce__offer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    letter-spacing: -.01em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .announce__offer b { font-weight: 600; }

  .announce__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dc-color-mint);
    animation: dc-announce-pulse 2.4s ease-in-out infinite;
  }

  .announce__sub { color: var(--dc-on-ink-muted); }

  .announce__hours {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: var(--dc-on-ink-muted);
    font-size: 13px;
  }

  .announce__hours a {
    padding: 7px 15px;
    border-radius: var(--dc-radius-pill);
    background: var(--dc-color-paper);
    color: var(--dc-color-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dc-dur-fast) ease;
  }

  @media (max-width: 760px) {
    .announce__sub,
    .announce__hours em { display: none; }
  }

  /* Header: sticks to the top on frosted paper; a hairline appears once the page scrolls */
  .header {
    position: sticky;
    top: 0;
    z-index: var(--dc-z-header);
    border-bottom: 1px solid transparent;
    background: var(--dc-color-paper-glass);
    backdrop-filter: blur(14px);
    transition: transform var(--dc-dur-med) var(--dc-ease-soft), border-color var(--dc-dur-base) ease;
  }

  .header.is-stuck { border-bottom-color: var(--dc-line); }

  .header__in {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 84px;
  }

  /* Logo: the wordmark SVG at a fixed height */
  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .logo svg {
    display: block;
    width: auto;
    height: 44px;
  }

  @media (max-width: 480px) {
    .logo svg { height: 36px; }
  }

  /* on dark surfaces */
  .logo--bone {
    display: inline-flex;
    color: var(--dc-color-paper);
  }

  /* Header actions: phone pill, Book button, menu button */
  .header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .header__tel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--dc-color-green);
    border-radius: var(--dc-radius-pill);
    color: var(--dc-color-green);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dc-dur-fast) ease, color var(--dc-dur-fast) ease, border-color var(--dc-dur-fast) ease;
  }

  .header__tel:is(:hover, :focus-visible) {
    background: var(--dc-color-green);
    color: var(--dc-color-white);
  }

  @media (max-width: 599px) {
    .header__tel {
      padding: 7px 12px;
      font-size: 14px;
    }
  }

  .header__book {
    display: none;
    border-color: var(--dc-color-green);
    font-size: 15px;
  }

  /* small laptops: the nav needs the room, so the actions tighten */
  @media (min-width: 1100px) and (max-width: 1340px) {
    .header__actions { gap: 10px; }

    .header__tel {
      gap: 6px;
      padding: 8px 12px;
      font-size: 14px;
    }

    .header__book {
      padding-inline: 16px;
      font-size: 14px;
    }
  }

  /* Menu button (phones and tablets) and the drawer's close button: a bare round icon button */
  .burger,
  .drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dc-color-ink);
    cursor: pointer;
  }

  /* Primary nav: desktop only */
  .nav { display: none; }

  .nav__link {
    position: relative;
    white-space: nowrap;
  }

  /* a hairline under the link draws in from the left on hover */
  .nav__link::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: 6px;
    left: 13px;
    height: 1px;
    background: var(--dc-color-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--dc-ease-out);
  }

  @media (min-width: 1140px) {
    .nav { display: block; }

    .header__book { display: inline-flex; }

    .burger { display: none; }

    .nav__list {
      display: flex;
      gap: 2px;
      list-style: none;
    }

    .nav__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 13px;
      border-radius: var(--dc-radius-pill);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      text-decoration: none;
    }

    .nav__link:hover,
    .nav__item.is-active > .nav__link,
    .nav__item--mega.is-open > .nav__link { background: var(--dc-ink-06); }

    .nav__link:hover::after { transform: scaleX(1); }

    /* the emergency item carries a small green dot before its name */
    .nav__item--accent > .nav__link::before {
      content: "";
      width: 6px;
      height: 6px;
      margin-right: 2px;
      border-radius: 50%;
      background: var(--dc-color-green);
    }

    /* Mega menu: a panel the width of the container, dropped under the header */
    /* it overlaps the header's lower edge by 10 px, so the pointer never crosses a gap */
    .mega {
      position: absolute;
      top: calc(100% - 10px);
      right: 0;
      left: 0;
      z-index: var(--dc-z-menu);
      padding: 30px 32px 32px;
      border: 1px solid var(--dc-line);
      border-radius: var(--dc-radius-panel);
      background: var(--dc-color-paper);
      box-shadow: var(--dc-shadow-overlay);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity var(--dc-dur-fast) ease, transform var(--dc-dur-base) var(--dc-ease-soft);
    }

    /* an invisible strip above the panel keeps the pointer "inside" on the way down */
    .mega::before {
      content: "";
      position: absolute;
      top: -18px;
      right: 0;
      left: 0;
      height: 18px;
    }

    .nav__item--mega.is-open .mega {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    .mega__in {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 30px;
    }

    .mega__col ul {
      display: flex;
      flex-direction: column;
      margin-top: 14px;
      list-style: none;
    }

    .mega__col a {
      display: block;
      padding: 8px 0;
      border-top: 1px solid var(--dc-line);
      color: var(--dc-ink-72);
      font-size: 14px;
      text-decoration: none;
    }

    .mega__col a:hover { color: var(--dc-color-ink); }

    /* the dark card at the end of each menu */
    .mega__feature {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 240px;
      padding: 24px;
      border-radius: 10px; /* not the skin's image radius */
      background: var(--dc-color-ink);
      color: var(--dc-color-on-ink);
    }

    .mega__feature .label { color: var(--dc-on-ink-muted); }

    .mega__title {
      font-size: 22px;
      font-weight: 300;
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .mega__text {
      flex: 1;
      color: var(--dc-on-ink);
      font-size: 13px;
    }
  }

  /* Eyebrows in the menus sit flush left, without rules */
  .mega .label,
  .drawer .label {
    justify-content: flex-start;
    text-align: left;
  }

  .mega .label::before,
  .mega .label::after,
  .drawer .label::before,
  .drawer .label::after { display: none; }

  /* Drawer: the full-screen menu on phones and tablets, sliding in from the right */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: var(--dc-z-drawer);
    display: block;
    overflow: auto;
    padding: 0 var(--dc-gutter) 40px;
    background: var(--dc-color-paper);
    transform: translateX(100%);
    transition: transform var(--dc-dur-med) var(--dc-ease-soft);
  }

  /* closed: kept in layout off to the right, but hidden from view and focus */
  .drawer[hidden] { visibility: hidden; }

  .drawer.is-open { transform: none; }

  /* the page under an open drawer does not scroll */
  body.is-locked { overflow: hidden; }

  /* on paper the page starts at its content: no bar, header or menu */
  @media print {
    .announce,
    .header,
    .drawer { display: none; }
  }

  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
  }

  .drawer__cta {
    display: grid;
    gap: 10px;
    margin: 8px 0 22px;
  }

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

  /* group headings and the plain top-level links share one large light style */
  .drawer__group summary,
  .drawer__link {
    padding: 18px 0;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: -.04em;
  }

  .drawer__group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
  }

  .drawer__group[open] summary svg { transform: rotate(180deg); }

  .drawer__group .label { margin: 12px 0 6px; }

  .drawer__group ul {
    margin-bottom: 18px;
    list-style: none;
  }

  .drawer__group ul a {
    display: block;
    padding: 9px 0;
    color: var(--dc-ink-72);
    font-size: 15.5px;
    text-decoration: none;
  }

  .drawer__link {
    display: block;
    border-top: 1px solid var(--dc-line);
    text-decoration: none;
  }

  .drawer__foot {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--dc-line);
    color: var(--dc-ink-72);
    font-size: 14px;
  }

  .drawer__foot a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--dc-color-ink);
    font-weight: 600;
    text-decoration: none;
  }
}

/* ------------------------------------------------------------------ pass-A bridge
 * Unlayered on purpose, for as long as the old sheet still loads: these rules must outrank old
 * rules that are still unlayered, as they did in the old cascade. At pass-A close-out they move
 * into @layer base unchanged.
 */

/* In-page jump targets */
[id] { scroll-margin-top: var(--dc-anchor-offset); }

/* Links written inside running text (no class of their own) */
main :is(p, li, td, dd) a:not([class]):not(nav a) {
  color: var(--dc-color-green);
  font-weight: 500;
  text-decoration: underline 1.5px var(--dc-green-45);
  text-underline-offset: 3px;
}

main :is(p, li, td, dd) a:not([class]):not(nav a):hover {
  color: var(--dc-color-green-hover);
  text-decoration-color: currentColor; /* the underline follows the hover colour */
}

/* Classed paragraphs inside prose read as prose (their own blocks still load old rules) */
.prose p:is(.disclaimer, .mapembed__addr) {
  max-width: 66ch;
  margin: 0 0 14px;
  color: var(--dc-ink-72);
  font-size: var(--dc-step-body);
  line-height: 1.7;
  text-wrap: pretty;
}

/* A container that is also a prose column keeps the wide width; its children cap at 820 */
.wrap.prose { max-width: var(--dc-container-wide); }
.wrap.prose > * { max-width: 820px; }

/* Buttons keep their own colours, at rest and on hover or focus, inside panels, prose and
   heroes whose old rules colour links */
a.btn { text-decoration: none; }
.btn.btn--ink,
.btn.btn--accent,
.btn.btn--alert { color: var(--dc-color-white); }
.btn.btn--ghost-ink { color: var(--dc-color-on-ink); }
.btn.btn--ghost,
.btn.btn--bone { color: var(--dc-color-ink); }

.btn:is(.btn--ink, .btn--accent, .btn--alert):is(:hover, :focus-visible) {
  background: var(--dc-color-ink);
  border-color: var(--dc-color-ink);
  color: var(--dc-color-white);
}

.btn.btn--ghost:is(:hover, :focus-visible) {
  background: var(--dc-color-green);
  border-color: var(--dc-color-green);
  color: var(--dc-color-white);
  box-shadow: none;
}

.btn.btn--ghost-ink:is(:hover, :focus-visible) {
  background: var(--dc-color-white);
  border-color: var(--dc-color-white);
  color: var(--dc-color-ink);
  box-shadow: none;
}

/* Section heads on guide and lander pages: tighter gap below, over older per-block margins */
.guide-v2 .head,
.lp-v2 .head { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* The home price band centres its intro */
#prices .head__p { margin-inline: auto; }

/* Bold words in running text: full ink, semibold */
.prose strong {
  color: var(--dc-color-ink);
  font-weight: 600;
}

/* Intro paragraphs keep one measure wherever they sit (heroes, panels, bands) */
.lede { max-width: 60ch; }

/* ------------------------------------------------------------------ pass-A bridge: the Sandstone layer
 * sandstone.css (ours, unlayered, loaded after this sheet) restyles some elements with selectors
 * of lower specificity than the rules that style them here. Against the old unlayered rules it
 * lost; against our layered rules it would win. These declarations therefore sit unlayered, at the
 * same specificity (:where keeps a narrowed selector at its original weight). Found by
 * tools/skin-conflicts.mjs; they move into their layers once the skin's selectors are reworked
 * (pass B). Rules where sandstone.css has an equal or higher-specificity rule of its own are left
 * out: it wins either way. */
@media (min-width: 1140px) {
  .mega__feature .label { color: var(--dc-on-ink-muted); }
}
.hero .display { line-height: 1.02; letter-spacing: -.042em; }
.hero--ink .display { color: var(--dc-color-on-ink); }
.hero--ink .display em { color: var(--dc-color-mint); }
.is-home #prices.band--blush { background: var(--dc-color-sage); }
.is-home #prices .label::before,
.is-home #prices .label::after,
.band--sage .label::before,
.band--sage .label::after { background: var(--dc-green-line); }
.label--ink::before,
.label--ink::after,
.band--ink .label::before,
.band--ink .label::after { background: var(--dc-on-ink-line); }
.label--ink { color: var(--dc-on-ink-muted); }
@media (min-width: 1140px) {
  .nav__item--mega.is-open > .nav__link { background: var(--dc-ink-06); }
}
#prices .head .label::after { max-width: 64px; }
.prose p:where(.label) { color: var(--dc-ink-72); font-size: var(--dc-step-body); }
.bio__b p:where(.label) { color: var(--dc-ink-72); font-size: 15px; }
.panel p:where(.label) { color: var(--dc-ink-72); }
.panel--ink p:where(.label) { color: var(--dc-on-ink); }
.sheet .form { background: none; }
.field :is(input, select, textarea):focus { outline: 0; }
.totop:hover { background: var(--dc-color-green); }
.totop:focus-visible { outline: 3px solid var(--dc-color-mint); outline-offset: 3px; }