*{box-sizing:border-box}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

  :root {
    /* Brändivärvid logolt */
    --blue: #1A44C4;
    --blue-deep: #0E2A80;
    --blue-ink: #0A1633;
    --red: #D91F17;
    --red-deep: #A81610;

    --ice: #EEF3FE;
    --ice-2: #DCE6FB;
    --bg: #FFFFFF;
    --bg-alt: #F6F8FD;
    --surface: #FFFFFF;
    --ink: #0D1730;
    --ink-2: #5A6784;
    --line: #E2E8F4;
    --line-2: #CBD6EC;

    --shadow-sm: 0 1px 2px rgba(13,23,48,.06), 0 8px 20px -14px rgba(13,23,48,.25);
    --shadow-md: 0 2px 4px rgba(13,23,48,.05), 0 24px 48px -28px rgba(14,42,128,.45);
    --shadow-lg: 0 40px 80px -40px rgba(14,42,128,.55);

    --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
    --body: "Manrope", "Helvetica Neue", Arial, sans-serif;

    --tooth: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='0.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5c-1.6-1.6-3.4-2-4.8-1.4C5.4 4.9 4.5 6.9 4.7 9c.2 2 .9 3.4 1.3 5.4.3 1.6.4 4.6 1.9 4.6 1.3 0 1.4-2.2 1.9-4 .3-1 .7-1.6 2.2-1.6s1.9.6 2.2 1.6c.5 1.8.6 4 1.9 4 1.5 0 1.6-3 1.9-4.6.4-2 1.1-3.4 1.3-5.4.2-2.1-.7-4.1-2.5-4.9-1.4-.6-3.2-.2-4.8 1.4z'/%3E%3C/svg%3E");

    --wrap: 1200px;
    --r-s: 10px;
    --r-m: 18px;
    --r-l: 28px;
    --r-xl: 40px;
  }

  /* THIS THEME IS LIGHT ONLY. The mockup shipped a full dark palette behind
     prefers-color-scheme and an explicit [data-theme="dark"]; both are removed.

     `color-scheme: light` is what makes that stick rather than merely painting
     over it: without it a browser on a dark OS still renders the form controls,
     the scrollbars and the spell-check underlines dark, so the page reads light
     and its inputs do not. It is one declaration and it is the whole of "light
     only" as far as the browser is concerned. */
  :root { color-scheme: light; }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

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

  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

  h1, h2, h3, h4 {
    font-family: var(--display);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
    font-weight: 700;
  }

  h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 800; }
  h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
  h3 { font-size: 1.18rem; line-height: 1.25; }
  p { margin: 0; }
  a { color: inherit; }

  .eyebrow {
    font-family: var(--display);
    font-weight: 600;
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue);
  }

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

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--display);
    font-weight: 600;
    font-size: .97rem;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    white-space: nowrap;
    transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }

  .btn svg { width: 17px; height: 17px; flex: none; }
  .btn-blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(26,68,196,.9); }
  .btn-blue:hover { background: var(--blue-deep); transform: translateY(-2px); }
  .btn-red { background: var(--red); color: #fff; box-shadow: 0 10px 24px -12px rgba(217,31,23,.8); }
  .btn-red:hover { background: var(--red-deep); transform: translateY(-2px); }
  .btn-line { border-color: var(--line-2); color: var(--ink); }
  .btn-line:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
  .btn-white { background: #fff; color: #0E2A80; }
  .btn-white:hover { transform: translateY(-2px); }

  /* ---------- top bar ---------- */
  .topbar {
    background: var(--blue-ink);
    color: #C9D6F5;
    font-size: .82rem;
  }

  .topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 40px; flex-wrap: wrap; }
  .topbar b { color: #fff; font-weight: 600; }
  .topbar a { text-decoration: none; }
  .topbar a:hover { color: #fff; }
  .topbar .sep { opacity: .35; }
  .topbar .grp { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

  .a11y-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; cursor: pointer;
    color: inherit; font: inherit; font-size: .82rem;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .a11y-btn svg { width: 17px; height: 17px; flex: none; }
  .a11y-btn:hover { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
  .a11y-btn[aria-pressed="true"] { color: #fff; border-bottom-color: #fff; }

  /* ligipääsetavuse režiim */
  :root.a11y body { font-size: 19px; line-height: 1.75; }
  :root.a11y main a:not(.btn):not(.chip) { text-decoration: underline; text-underline-offset: 3px; }
  :root.a11y .crumbs a, :root.a11y .nav a { text-decoration: underline; text-underline-offset: 4px; }
  :root.a11y { --ink-2: #3E4B66; --line: #C4D0E6; --line-2: #9FB0CE; }
  :root.a11y :focus-visible { outline-width: 3px; }

  /* ---------- header ---------- */
  .site-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
  }

  .site-head.is-stuck { border-bottom-color: var(--line); box-shadow: 0 12px 30px -26px rgba(13,23,48,.6); }

  .head-row { display: flex; align-items: center; gap: 26px; min-height: 78px; }

  .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
  .logo img { height: 40px; width: auto; }

  .logo-fallback { display: none; align-items: baseline; gap: 7px; }
  .logo-fallback .u { font-family: var(--display); font-weight: 800; font-size: 1.55rem; color: var(--red); letter-spacing: -0.03em; }
  .logo-fallback .h { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
  .logo img.is-broken { display: none; }
  .logo img.is-broken + .logo-fallback { display: flex; }

  .nav { display: flex; gap: 26px; font-family: var(--display); font-weight: 500; font-size: .97rem; }
  .nav a { text-decoration: none; color: var(--ink-2); position: relative; padding-block: 4px; transition: color .2s ease; }
  .nav a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; border-radius: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.2,.8,.3,1);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { transform: scaleX(1); }

  /* SQUARE, and the padding is what makes it so: 11 + 20 + 11 + 2 of border
     is 44 each way. It was `9px 11px`, which drew a 44x40 rounded oblong —
     the icon inside was centred to the pixel and the BUTTON was the thing
     that looked off. 44x44 is also the comfortable touch target. */
  .burger { display: none; background: none; border: 1px solid var(--line-2); border-radius: 12px; padding: 11px; cursor: pointer; color: var(--ink); }
  .burger svg { width: 20px; height: 20px; display: block; }

  .mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--bg); }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a { display: block; padding: 14px 0; text-decoration: none; font-family: var(--display); font-weight: 600; border-bottom: 1px solid var(--line); }
  .mobile-nav a:last-child { border-bottom: 0; }

  /* A parent row is a link and a disclosure side by side. The rule below moves
     the divider from the link to the row, so the chevron sits above the line
     rather than beside a link that draws its own. */
  .mobile-nav .mobile-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
  .mobile-nav .mobile-row > a { flex: 1 1 auto; border-bottom: 0; }

  /* 44x44 for the same reason as the burger, and the chevron turns to point at
     what it did rather than at what it will do. */
  .mobile-nav .sub-toggle {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin-right: -10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--ink-2);
  }
  .mobile-nav .sub-toggle svg { width: 20px; height: 20px; transition: transform .2s ease; }
  .mobile-nav .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .mobile-sub { list-style: none; margin: 0; padding: 0; }
  .mobile-sub.is-collapsed { display: none; }

  /* ---------- hero ---------- */
  .hero { position: relative; padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 90px); overflow: hidden; }

  .hero::before {
    content: "";
    position: absolute;
    top: -220px; right: -180px;
    width: 720px; height: 720px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--blue) 22%, transparent), transparent 62%);
    filter: blur(8px);
    pointer-events: none;
  }

  .hero::after {
    content: "";
    position: absolute;
    bottom: -260px; left: -220px;
    width: 560px; height: 560px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--red) 12%, transparent), transparent 65%);
    pointer-events: none;
  }

  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }

  .hero-copy { display: flex; flex-direction: column; gap: 24px; }
  .hero h1 { color: var(--ink); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .hero .lede { font-size: 1.12rem; color: var(--ink-2); max-width: 52ch; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }


  /* photo frame */
  .shot { position: relative; }

  .shot-frame {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 1 / 0.86;
    background-image: var(--tooth), linear-gradient(160deg, var(--blue), var(--blue-deep));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38% auto, cover;
    box-shadow: var(--shadow-lg);
  }

  .shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

  .shot-badge {
    position: absolute;
    left: 22px; bottom: 22px;
    z-index: 3;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: 15px 20px;
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; gap: 13px;
    max-width: calc(100% - 44px);
  }

  .shot-badge .num { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--blue); line-height: 1; letter-spacing: -0.03em; }
  .shot-badge .txt { font-size: .84rem; color: var(--ink-2); line-height: 1.35; }

  /* ---------- trust strip ---------- */
  .strip { background: var(--bg-alt); border-block: 1px solid var(--line); }
  .strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 34px 0; }
  .strip-item { display: flex; gap: 14px; align-items: flex-start; }
  .strip-item .ico { width: 38px; height: 38px; border-radius: 11px; background: var(--ice); color: var(--blue); display: grid; place-items: center; flex: none; }
  .strip-item .ico svg { width: 19px; height: 19px; }
  .strip-item h4 { font-size: 1rem; margin-bottom: 3px; }
  .strip-item p { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }

  /* ---------- sections ---------- */
  section { scroll-margin-top: 96px; }
  .band { padding: clamp(56px, 7vw, 104px) 0; }
  .band.alt { background: var(--bg-alt); }

  .band-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; max-width: 60ch; }
  .band-head p { color: var(--ink-2); font-size: 1.03rem; }

  .band-head.row { max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 30px; }
  .band-head.row > div { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; }

  /* services */
  .services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

  .svc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease, border-color .28s ease;
  }

  .svc::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--red));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.2,.8,.3,1);
  }

  .svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
  .svc:hover::before { transform: scaleX(1); }

  .svc .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--ice); color: var(--blue); display: grid; place-items: center; margin-bottom: 4px; }
  .svc .ico svg { width: 22px; height: 22px; }
  .svc p { font-size: .95rem; color: var(--ink-2); }

  .more-link { display: flex; justify-content: center; margin-top: 34px; }

  /* about / why */
  .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }

  .collage { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; gap: 14px; }
  .collage .cell {
    border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-sm);
    background-image: var(--tooth), linear-gradient(150deg, var(--blue), var(--blue-deep));
    background-repeat: no-repeat; background-position: center; background-size: 42% auto, cover;
  }
  .collage .cell img { width: 100%; height: 100%; object-fit: cover; }
  .collage .cell.tall { grid-row: span 2; aspect-ratio: 3 / 5; }
  .collage .cell.small { aspect-ratio: 4 / 3; }

  .ticks { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
  .tick { display: flex; gap: 12px; align-items: flex-start; }
  .tick .mark { width: 22px; height: 22px; border-radius: 50%; background: var(--ice); color: var(--blue); display: grid; place-items: center; flex: none; margin-top: 2px; }
  .tick .mark svg { width: 12px; height: 12px; }
  .tick p { font-size: .97rem; }
  .tick b { font-family: var(--display); font-weight: 600; }

  /* team */
  .team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

  .doc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
  }
  .doc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

  .avatar {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 700; font-size: 1.02rem;
    background: linear-gradient(145deg, var(--ice), var(--ice-2));
    color: var(--blue);
    border: 1px solid var(--line);
  }

  .doc .name { font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.015em; }
  .doc .role { font-size: .87rem; color: var(--ink-2); margin-top: 3px; }

  .doc.is-cta { background: linear-gradient(150deg, var(--blue), var(--blue-deep)); border-color: transparent; color: #fff; justify-content: space-between; }
  .doc.is-cta .name, .doc.is-cta .role { color: #fff; }
  .doc.is-cta .role { opacity: .82; }
  .doc.is-cta .avatar { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.25); }

  /* prices */
  .price-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
  .price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow-sm); overflow-x: auto; }

  table.prices { width: 100%; border-collapse: collapse; min-width: 400px; }
  table.prices th.grp {
    text-align: left;
    font-family: var(--display); font-weight: 700; font-size: .78rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
    padding: 30px 0 10px;
  }
  table.prices tr:first-child th.grp { padding-top: 0; }
  table.prices td { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .97rem; vertical-align: baseline; }
  table.prices td.val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 600; padding-left: 20px; }
  table.prices tr:hover td { background: color-mix(in srgb, var(--ice) 55%, transparent); }
  /* The qualifier under a price's label — "omaosalus 50%". The mockup wrote it
     as an inline style; it is a class here because it appears on every row of
     the Tervisekassa table. */
  table.prices td .sub { color: var(--ink-2); font-size: .9rem; }

  .aside-stack { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
  .info-card { border-radius: var(--r-l); padding: 24px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 9px; }
  .info-card p { font-size: .93rem; color: var(--ink-2); }
  .info-card.blue { background: linear-gradient(150deg, var(--blue), var(--blue-deep)); border-color: transparent; color: #fff; }
  .info-card.blue p { color: rgba(255,255,255,.85); }
  .info-card.red-line { border-left: 3px solid var(--red); }

  /* gallery */
  .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .gallery .g {
    border-radius: var(--r-m);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-image: var(--tooth), linear-gradient(150deg, var(--blue), var(--blue-deep));
    background-repeat: no-repeat; background-position: center; background-size: 34% auto, cover;
    box-shadow: var(--shadow-sm);
  }
  .gallery .g img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
  .gallery .g:hover img { transform: scale(1.05); }
  .gallery .g.wide { grid-column: span 2; aspect-ratio: 8 / 3; }

  /* insurance band */
  .cover { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .cover-item { background: var(--surface); border-radius: var(--r-l); padding: 28px 26px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
  .cover-item .num { font-family: var(--display); font-weight: 800; font-size: 2.1rem; color: var(--red); line-height: 1; letter-spacing: -0.03em; }
  .cover-item p { font-size: .95rem; color: var(--ink-2); }

  /* contact */
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
  .contact-list { display: flex; flex-direction: column; }
  .crow { display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
  .crow dt { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
  .crow dd { margin: 0; }
  .crow a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
  .crow a:hover { color: var(--blue); border-bottom-color: var(--blue); }
  .crow .big { font-family: var(--display); font-weight: 700; font-size: 1.42rem; letter-spacing: -0.02em; border-bottom: 0; }
  .crow .muted { color: var(--ink-2); font-size: .92rem; }

  .visit-card { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); border: 1px solid var(--line); }
  .visit-card .pic {
    aspect-ratio: 16 / 10;
    background-image: var(--tooth), linear-gradient(150deg, var(--blue), var(--blue-deep));
    background-repeat: no-repeat; background-position: center; background-size: 26% auto, cover;
  }
  .visit-card .pic img { width: 100%; height: 100%; object-fit: cover; }
  .visit-card .body { padding: 26px; display: flex; flex-direction: column; gap: 16px; }

  .hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
  .hours td { padding: 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  .hours td:last-child { text-align: right; color: var(--ink-2); }
  .hours tr:last-child td { border-bottom: 0; }
  .hours tr.today td { color: var(--blue); font-weight: 700; }

  /* cta band */
  .cta-band { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); color: #fff; border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px); position: relative; overflow: hidden; }
  .cta-band::after {
    content: "";
    position: absolute; right: -120px; top: -120px;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
  }
  .cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
  .cta-band h2 { color: #fff; max-width: 18ch; }
  .cta-band p { color: rgba(255,255,255,.85); max-width: 46ch; margin-top: 12px; }

  /* footer */
  .site-foot { background: var(--blue-ink); color: #A8B7DA; padding: 56px 0 30px; }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
  /* MATCHED ON POSITION, NOT ON LEVEL. The mockup wrote <h4> because it liked
     the size; a footer column here is a labelled <nav> under the page's <h1>,
     so its heading is an <h2> and the level is an outline fact, not a style.
     Selecting the tag meant the rule matched nothing: the headings rendered at
     h2 size in --ink, which is #0D1730 on a #0A1633 footer — 1.1:1, invisible.
     A theme-wide "style by role" rule is what stops that recurring. */
  .foot-grid :is(h2, h3, h4, h5) { font-family: var(--display); font-weight: 700; color: #fff; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 14px; }
  .foot-grid a { text-decoration: none; display: block; padding: 5px 0; font-size: .93rem; }
  .foot-grid a:hover { color: #fff; }
  .foot-grid p { font-size: .93rem; line-height: 1.6; }
  .foot-logo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
  .foot-logo .u { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: #fff; }
  .foot-logo .h { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; color: #7C9CFF; text-transform: uppercase; }
  .foot-bottom { padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .84rem; }

  /* reveal */
  .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
  .rv.in { opacity: 1; transform: none; }

  @media (max-width: 1000px) {
    .hero-grid, .about-grid, .price-layout, .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .services, .cover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery .g.wide { grid-column: span 2; }
    .aside-stack { position: static; }
    .nav { display: none; }
    .burger { display: block; }
    .shot-frame { aspect-ratio: 16 / 11; }
    .foot-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 640px) {
    body { font-size: 16px; }
    .services, .cover, .team { grid-template-columns: minmax(0, 1fr); }
    .strip-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .crow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .band-head.row { flex-direction: column; align-items: flex-start; }
    .shot-badge { left: 12px; bottom: 12px; }
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
    .topbar .grp.left { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .rv { opacity: 1; transform: none; }
  }

  /* --- alamlehtede komponendid --- */
  .page-hero {
    position: relative;
    padding: clamp(40px, 5.5vw, 70px) 0 clamp(34px, 4.5vw, 54px);
    overflow: hidden;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
  }

  .page-hero::before {
    content: "";
    position: absolute;
    top: -260px; right: -160px;
    width: 640px; height: 640px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--blue) 20%, transparent), transparent 62%);
    pointer-events: none;
  }

  .page-hero-inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-hero-inner h1 { max-width: 18ch; }
  .page-hero-inner p { max-width: 58ch; }

  .crumbs { font-size: .87rem; color: var(--ink-2); display: flex; align-items: center; gap: 9px; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { color: var(--blue); }
  .crumbs svg { width: 13px; height: 13px; opacity: .5; }

  .svc .cat-label {
    font-family: var(--display);
    font-weight: 600;
    font-size: .71rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
  }


  .note-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

  @media (max-width: 1000px) { .note-row { grid-template-columns: minmax(0, 1fr); } }

  /* --- hinnakirja kõrvalveerg: ei liigu kerimisel kaasa --- */
  .aside-stack { position: static !important; top: auto !important; }

  /* --- galerii suurendus --- */
  .gallery .g { cursor: zoom-in; }
  .lightbox {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(6, 12, 28, .93);
    backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    padding: 28px;
  }
  .lightbox.is-open { display: flex; }
  .lightbox img {
    max-width: min(1120px, 92vw); max-height: 84vh;
    width: auto; height: auto;
    border-radius: var(--r-m);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.85);
  }
  .lb-btn {
    position: absolute;
    width: 46px; height: 46px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(255,255,255,.15); color: #fff;
    display: grid; place-items: center;
    transition: background .2s ease, transform .2s ease;
  }
  .lb-btn svg { width: 22px; height: 22px; }
  .lb-btn:hover { background: rgba(255,255,255,.3); transform: scale(1.06); }
  .lb-close { top: 22px; right: 22px; }
  .lb-prev { left: 22px; top: 50%; margin-top: -23px; }
  .lb-next { right: 22px; top: 50%; margin-top: -23px; }
  .lb-count {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.85);
    font-family: var(--display); font-weight: 600; font-size: .84rem; letter-spacing: .12em;
  }

  /* --- kontaktivorm --- */
  .form-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
  .form-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-l); padding: clamp(24px, 3vw, 36px);
    box-shadow: var(--shadow-sm);
  }
  .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
  .field label { font-family: var(--display); font-weight: 600; font-size: .86rem; }
  .field .hint { font-size: .82rem; color: var(--ink-2); }
  .field input, .field select, .field textarea {
    font: inherit; font-size: .97rem; color: var(--ink);
    background: var(--bg); border: 1.5px solid var(--line-2);
    border-radius: 12px; padding: 12px 14px; width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .field textarea { min-height: 132px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); margin: 2px 0 20px; }
  .consent input { margin-top: 4px; width: auto; accent-color: var(--blue); }
  .form-note {
    display: none; margin-top: 16px; padding: 14px 16px;
    border-radius: 14px; background: var(--ice);
    border-left: 3px solid var(--blue); font-size: .92rem;
  }
  .form-note.is-visible { display: block; }

  .side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
  .side-card + .side-card { margin-top: 16px; }
  .side-list { display: flex; flex-direction: column; gap: 12px; }
  .side-list .row { display: flex; flex-direction: column; gap: 2px; }
  /* The mockup's rows were <span>s; these are a real <dt>/<dd> pair, so the
     browser's 40px indent on <dd> has to go. It is the same shape of bug as the
     dropdown's padding: markup upgraded for semantics, a UA default left behind.
     Every other <dl> here already resets it — .crow, .specs, .company — and this
     one was missed because the card only appears on the contact page. */
  .side-list dd { margin: 0; }
  .side-list .k { font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
  .side-list a { text-decoration: none; border-bottom: 1px solid var(--line-2); align-self: flex-start; }
  .side-list a:hover { color: var(--blue); border-bottom-color: var(--blue); }
  .side-list .big { font-family: var(--display); font-weight: 700; font-size: 1.24rem; letter-spacing: -0.02em; border-bottom: 0; }

  /* --- ettevotte uldandmed --- */
  .company { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
  .company > div { background: var(--surface); padding: 24px 26px; }
  .company dt { font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
  .company dd { margin: 0; font-size: .98rem; }
  .company a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
  .company a:hover { color: var(--blue); border-bottom-color: var(--blue); }

  /* --- alammenüü --- */
  .nav-item { position: relative; display: inline-flex; padding-bottom: 12px; margin-bottom: -12px; }
  .nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
  .nav .caret { width: 13px; height: 13px; opacity: .65; transition: transform .2s ease; }
  .nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }
  .subnav {
    position: absolute; top: 100%; left: -12px; z-index: 70;
    /* list-style/margin here rather than in the shared reset below, so the 8px
       inset sits in the same block as the rule that would otherwise erase it. */
    list-style: none; margin: 0;
    min-width: 218px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-item:hover .subnav, .nav-item:focus-within .subnav { opacity: 1; visibility: visible; transform: none; }
  /* display:block is load-bearing. The mockup's .subnav held the links as its
     DIRECT children, so the flex column made each one a block for free. Wrapping
     them in <li> for the list semantics (see the list-chrome note below) moved
     that free block onto the <li> and left the <a> inline — where the 9px of
     vertical padding adds no height and the hover background is only as wide as
     the word. Measured: a 64px highlight inside a 218px menu. */
  .subnav a { display: block; padding: 9px 13px; border-radius: 11px; color: var(--ink-2); }
  .subnav a::after { content: none; }
  .subnav a:hover { background: var(--ice); color: var(--blue); }
  .mobile-nav a.sub { padding-left: 18px; font-weight: 500; color: var(--ink-2); font-size: .95rem; }

  /* --- jaluse logo --- */
  .foot-logo-img { height: 42px; width: auto; margin-bottom: 16px; }

  /* --- infolehe juhendid --- */
  .guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .guide {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-l); padding: 28px 26px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .guide .num { font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: .18em; color: var(--red); }
  .guide p, .guide li { font-size: .95rem; color: var(--ink-2); }
  .guide ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
  .guide ul::marker, .guide li::marker { color: var(--blue); }

  /* --- tingimuste loend --- */
  .specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
  .specs > div { background: var(--surface); padding: 26px; }
  .specs dt { font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
  .specs dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.02em; color: var(--blue); }
  .specs dd small { display: block; font-family: var(--body); font-weight: 400; font-size: .88rem; color: var(--ink-2); letter-spacing: 0; margin-top: 4px; }

  /* --- kinkekaart --- */
  .gift-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
  .gift-card {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-l);
    background: linear-gradient(135deg, var(--blue-deep), var(--blue));
    color: #fff;
    padding: clamp(24px, 3vw, 36px);
    display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: var(--shadow-lg);
  }
  .gift-card::after {
    content: ""; position: absolute; right: -90px; top: -90px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 62%);
  }
  .gift-card .gc-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .gift-card .gc-label { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; opacity: .85; }
  .gift-card img { height: 34px; width: auto; }
  .gift-card .gc-amount { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; }
  .gift-card .gc-foot { position: relative; display: flex; justify-content: space-between; gap: 16px; font-size: .86rem; color: rgba(255,255,255,.8); }

  @media (max-width: 1000px) {
    .guides, .gift-grid { grid-template-columns: minmax(0, 1fr); }
    .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .company { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .specs { grid-template-columns: minmax(0, 1fr); }
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .company { grid-template-columns: minmax(0, 1fr); }
    .lb-prev { left: 10px; } .lb-next { right: 10px; }
  }

  /* ==================================================================== *
   * PLATFORM INTEGRATION
   *
   * Everything above this line is example/index.html's stylesheet, lifted
   * unchanged so the design stays diffable against the mockup. Everything
   * below is what running it inside pcadmin needs, and each block says why
   * it is here rather than in the design above.
   * ==================================================================== */

  /* ---------- lists that the mockup drew as bare links ---------- */
  /* The navigation, the top bar and the footer columns are LISTS here: a
     screen reader announces how many items there are before reading them,
     which a run of sibling <a> elements cannot do (checklist 4.6). The design
     is unchanged — these rules only undo the list chrome.

     .subnav IS DELIBERATELY NOT IN THIS LIST. It carries `padding: 8px` of its
     own — the inset that keeps the menu items off the card's rounded edge — and
     a shared `padding: 0` ninety lines below its own rule silently won. It
     resets its list chrome in its own rule instead, where the 8px is visible in
     the same declaration block. */
  .nav-list,
  .topbar .grp,
  .mobile-nav ul,
  .foot-grid ul,
  .crumbs ol,
  .side-list ul,
  .guide ul.plain {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-list { display: flex; gap: 26px; align-items: center; }
  .mobile-nav ul { display: block; }

  /* .nav-item is scoped, and that is not tidiness. Core's accessibility
     component emits its own <li class="nav-item"> into the top bar, and the
     dropdown rule below would give it the submenu's positioning and negative
     margin — a control that jumps 12px out of the bar it sits in. */
  .nav .nav-item { position: relative; display: inline-flex; padding-bottom: 12px; margin-bottom: -12px; }
  .topbar .nav-item { position: static; display: inline-flex; padding: 0; margin: 0; }

  /* ---------- "you are here", by attribute ---------- */
  /* Styled from aria-current rather than from a class, so the visual cue and
     the announced one cannot drift apart, and the cue is never colour alone —
     the underline is a shape (checklist 7.1, 8.1 / WCAG 1.4.1). */
  .nav a[aria-current="page"] { color: var(--ink); }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .subnav a[aria-current="page"] { background: var(--ice); color: var(--blue); }
  .mobile-nav a[aria-current="page"] { color: var(--blue); box-shadow: inset 3px 0 0 var(--red); padding-left: 12px; }
  .mobile-nav a.sub[aria-current="page"] { padding-left: 26px; }

  /* ---------- top bar: core's accessibility toggle ---------- */
  /* Core's stylesheet colours the button for a white Bootstrap navbar —
     the icon is --bs-primary blue and the label is #60697b grey with
     !important. On the navy bar both read as mistakes. The .topbar prefix is
     what wins the cascade: core's selectors are id-only, so a class in front
     of the same id outranks them. */
  .topbar #accessibility-toggle { text-transform: none; padding: 6px 0; gap: 8px; }
  .topbar #accessibility-toggle i { color: #fff; font-size: 19px !important; }
  .topbar #accessibility-toggle span { color: #fff !important; font-size: .82rem !important; font-weight: 600 !important; }
  .topbar-hours { color: #C9D6F5; }

  /* On the narrowest phones the toggle keeps its icon and drops its label:
     the word is most of the width the bar has at 320px, which is what pushed
     the phone number off the screen. Core's button carries an aria-label, so
     the control keeps its accessible name (checklist 14.8, 1.2). */
  @media (max-width: 420px) {
    .topbar #accessibility-toggle span { display: none; }
    .topbar .grp a { white-space: nowrap; }
    .topbar-hours { display: none; }
  }

  /* THE EMAIL GOES BEFORE THE BAR WRAPS, and the threshold is measured rather
     than guessed. `white-space: nowrap` above stops the address breaking
     mid-word, so the flex row wraps instead: the two groups need 402px and the
     row has the viewport less 40px of padding, which puts the break just under
     500px. Below that the bar became two 40px lines, and at 320px three — a
     navy block a third of the screen tall standing above the logo.

     The address is in the footer and on the contact page. The phone number is
     not, and is the one a visitor acts on from a phone, so it is what stays. */
  @media (max-width: 519px) {
    .topbar-email,
    .topbar .sep { display: none; }
  }

  /* ---------- language picker ---------- */
  /* Ships as a plain list with the toggle `hidden`; theme.js reveals the
     button and collapses the list. Without the script every language stays
     reachable rather than sitting behind a control that cannot open. */
  .lang-picker { position: relative; font-family: var(--display); font-size: .9rem; font-weight: 600; }
  .lang-picker ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
  .lang-picker a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; padding: 6px 8px; border-radius: 10px; }
  .lang-picker a:hover { background: var(--ice); color: var(--blue); }
  .lang-tick { width: 12px; height: 12px; opacity: 0; }
  .lang-picker a[aria-current="true"] .lang-tick { opacity: 1; }
  .lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid var(--line-2); border-radius: 12px;
    padding: 8px 11px; cursor: pointer; color: var(--ink); font: inherit; font-weight: 600;
  }
  .lang-picker.is-enhanced ul {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    flex-direction: column; gap: 2px; min-width: 150px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .lang-picker.is-enhanced.is-open ul { opacity: 1; visibility: visible; transform: none; }

  /* ---------- the header's own CTA and the mobile panel's ---------- */
  .head-cta { flex: none; }
  /* THE SELECTOR CARRIES THE TAG ON PURPOSE. `.mobile-nav a` sets
     `display: block; padding: 14px 0; border-bottom: …` for every link in the
     panel, and at (0,1,1) it outranks a bare `.mobile-cta` — so the button
     rendered as a block with no side padding, its inherited
     `justify-content: center` inert and the label hard against the left edge.
     Measured: 1px of clearance on the left against 231px on the right.

     Matching that specificity is what lets the button be a button again. It is
     `flex` rather than `inline-flex` because it spans the panel, and centring
     the label is the whole point. */
  .mobile-nav a.mobile-cta {
    display: flex;
    padding: 13px 22px;
    border-bottom: 0;
    margin: 16px 0 20px;
  }
  @media (max-width: 1000px) {
    .head-cta { display: none; }
  }

  /* ---------- gallery cells are buttons ---------- */
  /* The mockup made a <div> clickable and gave it tabindex and a role from
     JavaScript, so the gallery was inert on any page where the script had not
     run. These are real <button> elements; this only strips the chrome. */
  .gallery .g { appearance: none; border: 0; padding: 0; background: none; font: inherit; cursor: pointer; display: block; width: 100%; }

  /* ---------- breadcrumbs ---------- */
  .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .crumbs li { display: inline-flex; align-items: center; gap: 8px; }

  /* ---------- forms ---------- */
  /* The design removes the outline on a focused field and signals focus with
     a border colour alone, which is the one thing a focus indicator may not be
     (WCAG 2.4.7 / 1.4.1, checklist 5.4). The ring comes back for keyboard
     focus; the border colour stays for everyone. */
  .field input:focus-visible,
  .field select:focus-visible,
  .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

  .field .error { display: block; margin-top: 6px; color: var(--red-deep); font-size: .88rem; font-weight: 600; }
  .field [aria-invalid="true"] { border-color: var(--red); }
  .required-note { color: var(--ink-2); font-size: .9rem; margin: 0 0 18px; }
  .req { color: var(--red-deep); }
  .form-note.is-error { color: var(--red-deep); }
  .form-note.is-ok { color: #15803D; }
  /* The badge is hidden, which is what makes the attribution sentence beside
     the send button owed. Core used to inject this as a bare <style> tag; it
     belongs in the stylesheet, where a CSP nonce is not a question. */
  .grecaptcha-badge { visibility: hidden; }
  .recaptcha-notice { font-size: .78rem; line-height: 1.5; color: var(--ink-2); margin: 22px 0 0; }
  .recaptcha-notice a { color: inherit; }

  /* ---------- Consent banner ---------- */
  /* Core ships the Silktide banner with its own palette on #silktide-wrapper,
     every value a custom property — so a theme restyles it by setting the
     properties, never by rewriting core's rules. Two things follow from that:
     a core upgrade that adds a rule inherits this palette for free, and the
     values stay readable as the site's own tokens.

     THE SELECTOR IS DOUBLED ON PURPOSE. core's consent.css declares the same
     properties on the same single-id selector, and it is emitted by
     pc_render_consent() AFTER this stylesheet — so at equal specificity core
     wins on source order and a plain `#silktide-wrapper {}` here is simply
     ignored. Repeating the id outranks it without an !important on every line.
     Measured: with the single id, --primaryColor read back #533BE2.

     The button radius is not exposed as a property, so it is set against the
     same selectors core uses. 5px against the site's 10px reads as a different
     product sitting on the page. */
  #silktide-wrapper#silktide-wrapper {
    --primaryColor: var(--blue);
    --backgroundColor: var(--surface);
    --textColor: var(--ink);
    --fontFamily: var(--body);
    --boxShadow: var(--shadow-md);
    /* Only rendered when the config asks for a backdrop; inert otherwise. */
    --backdropBackgroundColor: rgba(10, 22, 51, .45);
    --cookieIconColor: var(--blue);
    --cookieIconBackgroundColor: var(--surface);
    /* The site's own focus ring, which is a blue outline and not a triple halo. */
    --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--blue);
  }

  #silktide-wrapper#silktide-wrapper .st-button { border-radius: var(--r-s); font-family: var(--display); font-weight: 700; }
  #silktide-wrapper#silktide-wrapper #silktide-banner,
  #silktide-wrapper#silktide-wrapper #silktide-modal { border-radius: var(--r-m); }

  /* ---------- <address> ---------- */
  /* The right element for the clinic's contact details, but browsers
     italicise it and the design is upright throughout. */
  address { font-style: normal; }

  /* ---------- footer columns ---------- */
  /* THE COLUMN HEADINGS ARE STYLED ONCE, WITH THE REST OF THE FOOTER, and this
     block deliberately no longer touches them. It used to set `.foot-grid nav
     h2` to `var(--ink)` at .95rem — dark ink on the navy footer, 1.1:1, and
     more specific than the rule that paints them white, so it won. The result
     was three invisible column titles on every page. Anything the footer's
     headings need belongs in the `.foot-grid :is(h2, h3, h4, h5)` rule above. */
  .foot-grid address ul { list-style: none; margin: 0; padding: 0; }
  .foot-grid .social { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
  .foot-grid .social .circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ice); color: var(--blue);
  }

  /* ---------- pcadmin's accessibility panel ---------- */
  /* Core renders this panel with Bootstrap's grid and utility classes
     (container-fluid, row, col-lg-4, form-check, btn). This theme loads no
     Bootstrap, so without the rules below the panel is an unstyled
     full-height stack — and this theme's own .btn, which core's markup also
     carries, turns its close button into a pill the width of a paragraph.

     Everything here is scoped to .accessibility-controls: these are
     stand-ins for somebody else's framework and must not leak onto the
     site. */
  .accessibility-controls { max-height: 100vh; overflow-y: auto; font-family: var(--body); font-size: 1rem; }
  .accessibility-controls .container-fluid { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
  .accessibility-controls .row { display: flex; flex-wrap: wrap; }
  .accessibility-controls .row.align-items-center { align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(255, 255, 255, .25); }
  .accessibility-controls .col { flex: 1 1 auto; min-width: 0; }
  .accessibility-controls .col-auto { flex: 0 0 auto; }
  .accessibility-controls h5 { color: #fff; font-size: 1.1rem; margin: 0; }
  .accessibility-controls .row.py-3 { gap: 2rem; padding: 1.6rem 0 2rem; }
  .accessibility-controls .col-12 { flex: 1 1 240px; }
  .accessibility-controls .accessibility-heading { color: #fff; font-size: 1rem; margin: 0 0 .25rem; }
  .accessibility-controls .accessibility-desc { color: rgba(255, 255, 255, .72); font-size: .9rem; margin: 0 0 .9rem; }
  .accessibility-controls .radio-list,
  .accessibility-controls .form-group { display: grid; gap: .55rem; }
  .accessibility-controls .form-check { display: flex; align-items: center; gap: .6rem; margin: 0; }
  .accessibility-controls .form-check-input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: #7C9CFF; }
  .accessibility-controls .form-check-label { color: #fff; margin: 0; cursor: pointer; }
  .accessibility-controls .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .35rem; border: 0; border-radius: 10px; background: transparent; color: #fff;
    font: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; cursor: pointer;
  }
  .accessibility-controls .btn:hover { background: rgba(255, 255, 255, .14); transform: none; box-shadow: none; }

  /* ---------- pointer targets ---------- */
  /* 24x24 CSS px minimum (WCAG 2.5.8).
     Measured at 390px rather than reasoned about: the two that came up short
     were the email link in a contact row (23px, one pixel under) and the
     Procommerce credit (18px). The second is INLINE IN A SENTENCE and exempt
     under the rule's own inline exception; it is covered anyway, because a
     rule that has to be re-argued every time somebody re-measures is worth
     less than one extra selector. */
  .topbar a,
  .foot-grid a,
  .foot-bottom a,
  .contact-list a,
  .side-list a,
  .company a,
  .crumbs a { display: inline-block; min-height: 24px; }
  .contact-list a,
  .side-list a,
  .company a { line-height: 24px; }

  /* ---------- classes for what the mockup wrote as inline styles ---------- */
  /* The design set these on the element with a style attribute. A section
     template renders the same block many times, so they are classes here — and
     an inline <style> per section would have to carry the CSP nonce. */
  .about-copy,
  .gift-copy { display: flex; flex-direction: column; gap: 20px; }
  .about-lede { color: var(--ink-2); font-size: 1.03rem; }
  .gift-lede { color: var(--ink-2); font-size: 1.06rem; }
  .about-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
  .contact-title { margin: 14px 0 24px; }
  .form-card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 8px; }
  .form-lede { color: var(--ink-2); font-size: .96rem; margin-bottom: 22px; }

  /* The trust strip's headings are <h2>, not <h4>: they are the section's own
     content and the page's <h1> is the hero above it, so the outline has to
     descend one level at a time rather than jump to the size that looked right
     (checklist 4.2). The mockup's .strip-item h4 rule is kept for the size. */
  .strip-item h2 { font-size: 1rem; margin-bottom: 3px; }
  /* A CARD'S HEADING IS SIZED BY WHERE IT SITS, NOT BY ITS TAG. The templates
     promote these from h3 to h2 when their section has no heading of its own,
     so an outline that is correct does not come with type that changes size —
     see uku_hambaravi_card_heading().

     WRITTEN AS `:is(h2, h3)` RATHER THAN A LIST OF TAGS, because a rule naming
     one level is a rule that silently stops applying. `.side-card h2` and
     `.visit-card h2` did exactly that: both render h3 in practice, so the
     contact page's two cards had unstyled headings and nobody noticed, the same
     way `.foot-grid h4` left the footer's column titles at 1.1:1 on the navy.
     Match by where the heading sits; the level is the outline's business. */
  .cover-item :is(h2, h3),
  .guide :is(h2, h3) { font-size: 1.08rem; }
  .svc :is(h2, h3),
  .info-card :is(h2, h3),
  .side-card :is(h2, h3),
  .visit-card :is(h2, h3) { font-size: 1.18rem; line-height: 1.25; }

  /* ---------- a doctor's photo, where there is one ---------- */
  .avatar.has-photo { padding: 0; overflow: hidden; background: var(--ice); }
  .avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
  .avatar svg { width: 22px; height: 22px; }

  /* The booking tile is an <a> wrapping the whole card — one tab stop, one
     accessible name, and the whole tile is the pointer target. */
  a.doc.is-cta { text-decoration: none; }
  a.doc.is-cta:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

  /* ---------- authored rich text ---------- */
  /* Bounded measure, because a paragraph 1200px wide is unreadable — the eye
     loses the start of the next line (WCAG 1.4.8, checklist 6.9). */
  .prose { max-width: 68ch; display: flex; flex-direction: column; gap: 14px; }
  .prose h3 { font-size: 1.25rem; margin-top: 14px; }
  .prose h4 { font-size: 1.05rem; margin-top: 10px; }
  .prose p { color: var(--ink-2); }
  .prose ul, .prose ol { margin: 0; padding-left: 22px; color: var(--ink-2); display: grid; gap: 6px; }
  .prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- a legal document: terms, a privacy policy, a data notice ---------- */
  /* The `texts` section, which is ONE rich-text field an operator pastes a whole
     policy into — so every rule here has to work on markup this theme did not
     author. No card, no border and no rule between clauses: the reading measure
     and the vertical rhythm are what make a wall of numbered paragraphs legible,
     and a box around it just makes the wall narrower.

     NOT `.doc`, which is this theme's DOCTOR CARD — a bordered, padded tile in
     the team grid. The first draft used it and inherited the border and the
     22px of padding onto the policy, which looked deliberate and was not.

     `.pc-content` is pc_render_rich_text()'s own wrapper and is the only child
     of `.prose`, so the flex gap that spaces the other sections' paragraphs
     lands on nothing. Restating it one level down is what puts the rhythm back.

     CENTRED IN THE WRAP, unlike every other .prose on the site, which sits at
     the left edge of a band that has other things beside it. This one has the
     band to itself, and a 72ch column pinned left leaves 470px of empty page to
     its right that reads as a missing column rather than as a margin. */
  .prose.legal { max-width: 72ch; margin-inline: auto; }
  .prose.legal .pc-content { display: flex; flex-direction: column; gap: 16px; }

  /* Clause headings are DOCUMENT scale, not band scale. The global h2 is
     clamp(1.9rem, 3.4vw, 2.9rem) — a size chosen for one heading introducing a
     section, which reads as five competing titles when the document has five of
     them. */
  .prose.legal :is(h1, h2) { font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.2; margin-top: 26px; }
  .prose.legal :is(h1, h2):first-child { margin-top: 0; }
  .prose.legal h3 { font-size: 1.1rem; margin-top: 14px; }
  .prose.legal h4 { font-size: 1rem; margin-top: 10px; }

  /* Pasted content carries whatever the last CMS left on it — Bootstrap's
     `mb-4` is on all 41 paragraphs of the privacy policy here. This theme ships
     no Bootstrap, so those classes are inert; the margins that matter are set
     above and any inline one the editor writes is left alone. */
  .prose.legal :is(p, ul, ol) { margin: 0; }
  .prose.legal :is(ul, ol) { padding-left: 22px; display: grid; gap: 6px; }

  /* ---------- table captions ---------- */
  /* A caption names a table for someone who reaches it out of context. It is
     visible rather than hidden: the information is useful to everyone. */
  table.prices caption,
  table.hours caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--ink-2); padding: 0 0 12px; }

  /* ---------- the reveal animation is gated on JavaScript ---------- */
  /* THE DESIGN SHIPS `.rv { opacity: 0 }` UNCONDITIONALLY, and theme.js is the
     only thing that ever adds `.in`. So a visitor whose script did not run —
     JavaScript off, a blocked file, a crawler, a `Save as PDF` — gets a page
     with the hero and the footer and NOTHING BETWEEN THEM: eleven of the
     sixteen sections carry the class. It looks like a rendering bug rather than
     a missing animation, and nothing is logged anywhere.
     Found in a browser, which is the only way it was going to be found.

     includes/head.php already puts `js` on <html> before the first paint,
     precisely so this can be gated on it. The rules are overridden here rather
     than edited above, so the block lifted from example/index.html stays
     diffable against the mockup.

     prefers-reduced-motion is honoured by the rule further up, which shows
     everything at once — that one already wins on later-in-file at equal
     specificity, and `.js .rv` would outrank it, so it is restated here. */
  .rv { opacity: 1; transform: none; }
  .js .rv { opacity: 0; transform: translateY(22px); }
  .js .rv.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .js .rv { opacity: 1; transform: none; }
  }

  /* ---------- the top bar and the footer ---------- */
  /* Both are painted with `var(--blue-ink)`, and while a dark palette existed
     that token flipped to near-white underneath them — the bar and the footer
     went pale under pale text, 1.0:1 measured. The palette is gone, so the
     token means one thing again and neither needs an override.

     Left as a note rather than deleted silently: `--blue-ink` is an INK name
     used here as a SURFACE, which is what made it fragile. A future dark mode
     has to give these two literal colours, not re-point the token. */

  /* ---------- the accessibility toggle survives on a phone ---------- */
  /* THE MOCKUP HIDES `.topbar .grp.left` ENTIRELY BELOW 640px, and that group
     is where core's accessibility control sits. In the mockup that cost a
     nice-to-have; here it removes the ONLY way into a real preferences panel —
     text size, line spacing, contrast — on the devices whose users need it
     most. Core's own component carries a comment about the same mistake made
     one step earlier, at 992px.

     What actually needed the space is the opening-hours line, which is hidden
     below 420px already and repeated in the footer and the visit card. So the
     group stays and its text goes. (Checklist 1.2, 5.1) */
  @media (max-width: 640px) {
    .topbar .grp.left { display: flex; }
    .topbar-hours { display: none; }
    /* With its label gone the button is its icon, which came out 21px wide —
       under the 24x24 floor (WCAG 2.5.8). Measured, not assumed. */
    .topbar #accessibility-toggle { min-width: 24px; min-height: 24px; justify-content: center; }
  }