/* Measured, Clinics (/clinics/). Ported from docs/design/v2/clinics-b.html as shown in #present. Only what the page
   needs beyond home.css: the inner hero split with the principal's week on paper, the example practice site, the two
   numbers, the four "Why" cards, the privacy cards, "What we do" with the health rules fold, and the "Also for" line.
   Call and email take the comp's hero form's place, as on Home. */

/* ---------- Tokens the comp adds: paper sheet, two more chip tints (light, dark) ---------- */
:root {
  --chip-y: #FDEBC4; --chip-s: #DCE9FB;
  --paper: #FFFBF3; --paper-2: #F3E6CC; --paper-3: #F8EEDB; --paper-foot: #FBF1DF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14);
    --paper: #F1E9D8; --paper-2: #E6D9BE; --paper-3: #EADFC8; --paper-foot: #E9DDC4;
  }
}
:root[data-theme="dark"] {
  --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14);
  --paper: #F1E9D8; --paper-2: #E6D9BE; --paper-3: #EADFC8; --paper-foot: #E9DDC4;
}

.chip { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--chip-ink); flex: none; }
.chip .i { width: 17px; height: 17px; }
.chip--y { background: var(--chip-y); } .chip--m { background: var(--chip-m); } .chip--s { background: var(--chip-s); }
.body { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.body + .body { margin-top: 12px; }
.body b { color: var(--ink); font-weight: 600; }
.body a { color: var(--ink); font-weight: 600; }

/* ---------- Inner hero: a shorter navy band behind the copy, settling onto warm paper ---------- */
.hero__copy { grid-template-columns: minmax(0, 1fr); }
.hero--inner { --bandx: 150px; background: linear-gradient(to bottom, var(--warm) 0, var(--warm) 55%, var(--bg) 100%); }
.hero--inner::before, .hero--inner .hero__glow::after { display: none; }
.hero--inner .hero__copy { position: relative; text-align: left; justify-items: start; padding-top: 48px; }
.hero--inner .hero__copy::before, .hero--inner .hero__copy::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: -60px; bottom: calc(-1 * var(--bandx)); pointer-events: none; }
.hero--inner .hero__copy::before { border-bottom: 1px solid rgb(185 212 247 / .22); background: var(--band); }
.hero--inner .hero__copy::after { opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; }
/* Home's Aurora layer inside the inner band, at Home's strength */
.hero--inner .hero__glow { inset: auto; top: -60px; bottom: calc(-1 * var(--bandx)); left: calc(50% - 50vw); width: 100vw; z-index: -1; }
.hero--inner .eyebrow { min-height: 0; padding: 0; box-shadow: none; background: none; font-size: 15px; font-weight: 600; color: var(--on-band-2); }
.hero--inner .eyebrow::before { width: 18px; height: 2px; border-radius: 2px; }
.hero--inner .eyebrow--list { padding: 0; }
.hero--inner h1 { margin-top: 14px; max-width: 15em; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; }
.hero--inner h1 span { display: inline; }
.hero--inner .lede { margin-top: 18px; max-width: 720px; font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.hero--inner .aform { margin-top: 26px; }
.hero--inner .under { display: block; margin-top: 10px; max-width: 1100px; }
.hero--inner .ticks { margin-inline: 0; }
.hero--inner .ticks .tk { margin-top: 0; }
@media (min-width: 761px) and (max-width: 1099px) { .hero--inner .ticks { grid-template-columns: minmax(0, 560px); justify-content: start; gap: 6px; } }
.hero__text { display: grid; justify-items: start; min-width: 0; }
@media (min-width: 1000px) {
  .hero--inner .hero__split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: center; }
  .hero--inner .hero__split h1 { font-size: clamp(40px, 3.9vw, 58px); }
  .hero--inner .hero__split .ticks { grid-template-columns: minmax(0, 1fr); gap: 6px; max-width: 600px; }
}
/* Quality bar 22 Oct, X2 and X4: from 1101px the hero follows Trades. The 64px inner H1, the week card beside the copy
   (440px, so its rows keep their time column), and the three ticks in Home's row under both: .hero__text hands its
   children to the split's grid. The card is taller than the copy, so an empty fifth row takes the difference rather
   than spreading it between the eyebrow, H1, lede and buttons. */
@media (min-width: 1101px) {
  .hero--inner .hero__split { grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto auto auto auto 1fr; column-gap: 64px; align-items: start; }
  .hero--inner .hero__split h1 { font-size: clamp(40px, 4.6vw, 64px); }
  .hero__split .hero__text { display: contents; }
  .hero__split .hero__text > * { grid-column: 1; }
  .hero--inner .hero__split .under { grid-column: 1 / -1; grid-row: 6; margin-top: 30px; } /* clear of the card's back sheets */
  .hero--inner .hero__split .ticks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.5fr); gap: 8px 28px; max-width: 1040px; }
  .hero--clinic .hero__split .sheets--card { grid-column: 2; grid-row: 1 / span 5; align-self: start; margin-top: 6px; }
}
@media (max-width: 760px) {
  .hero--inner { --bandx: 96px; }
  .hero--inner .hero__copy { padding-top: 18px; }
  .hero--inner .eyebrow { font-size: 14px; align-items: center; }
  .hero--inner .eyebrow::before { margin-top: 0; }
  .hero--inner .eyebrow--list { padding: 0; justify-content: flex-start; align-items: center; }
  .hero--inner h1 { margin-top: 10px; font-size: 40px; line-height: 1.04; }
  .hero--inner .lede { margin-top: 14px; font-size: 17px; }
  .hero--inner .aform { margin-top: 18px; }
  .ticks { display: grid; grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 374px) { .hero--inner h1 { font-size: 36px; } }

/* ---------- The principal's week, on paper, in the hero's right half ---------- */
.sheets { position: relative; width: min(980px, 100%); }
.sheets::before, .sheets::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: var(--paper-2); box-shadow: 0 1px 0 rgb(20 40 75 / .06), 0 20px 40px -24px rgb(4 10 24 / .45); }
.sheets::before { transform: rotate(-1.4deg) translate(-6px, 10px); }
.sheets::after { transform: rotate(.9deg) translate(8px, 6px); background: var(--paper-3); }
.sheet { position: relative; z-index: 1; border-radius: 6px; background: var(--paper); color: #14284B; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(120 90 40 / .10), 0 2px 4px rgb(4 10 24 / .08), 0 26px 50px -22px rgb(4 10 24 / .5), 0 60px 110px -40px rgb(4 10 24 / .34); }
.sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .3  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.sheet::after { content: ""; position: absolute; top: 0; bottom: 0; left: 56px; width: 1.5px; background: #F2C9B8; }
.sheet__top { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 22px 34px 14px 80px; border-bottom: 1px solid #EEDFC4; }
.sheet__top b { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.sheet__foot { position: relative; padding: 13px 34px 15px 80px; border-top: 1px solid #EEDFC4; background: var(--paper-foot); font-size: 15px; color: #3E4F70; text-wrap: pretty; }
.hero--clinic .sheets--card { width: 100%; margin-top: 0; }
@media (max-width: 999px) { .hero--clinic .sheets--card { margin-top: 30px; max-width: 620px; } }
.sheet--card::after { left: 40px; }
.sheet--card .sheet__top { flex-wrap: wrap; align-items: center; row-gap: 6px; padding: 18px 22px 12px 60px; }
.sheet--card .sheet__top b { margin-right: auto; }
.pc__sub { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 10px 22px 0 60px; font-size: 15px; color: #3E4F70; font-variant-numeric: tabular-nums; }
.pc__sub b { font-weight: 600; color: #14284B; }
.pc__list { padding: 4px 22px 6px 60px; }
.pc__list li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid #F1E6D2; font-size: 15px; line-height: 1.4; color: #3E4F70; }
.pc__list li:last-child { border-bottom: 0; }
.pc__list time { font-weight: 600; color: #14284B; font-variant-numeric: tabular-nums; }
.pc__list b { font-weight: 600; color: #14284B; }
/* Reception's mark: word plus a solid shape, never colour alone */
.booked { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #D6EFEC; color: #14284B; box-shadow: inset 0 0 0 1px #9FCFC8; font-size: 13px; font-weight: 600; line-height: 1.3; }
.booked::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: #14284B; flex: none; }
.hero--clinic.hero--inner { --bandx: 72px; }
.hero--clinic .sheet--card .sheet__foot { padding-left: 60px; }
@media (max-width: 760px) {
  .sheets { margin-inline: -6px; width: calc(100% + 12px); max-width: none; }
  .sheet::after { left: 26px; }
  .sheet__top { padding: 16px 16px 12px 42px; flex-wrap: wrap; row-gap: 4px; }
  .sheet__top b { font-size: 17px; }
  .sheet__foot { padding: 11px 16px 13px 42px; font-size: 13px; }
  .hero--clinic.hero--inner { --bandx: 36px; }
  .sheet--card::after { left: 22px; }
  .sheet--card .sheet__top { padding: 14px 14px 10px 36px; }
  .sheet--card .sheet__top b { font-size: 17px; }
  .pc__sub { padding: 8px 14px 0 36px; font-size: 13px; }
  .pc__list { padding: 2px 14px 4px 36px; }
  .pc__list li { grid-template-columns: 1fr; gap: 0; padding: 10px 0; }
  .hero--clinic .sheet--card .sheet__foot { padding: 10px 14px 12px 36px; }
}

/* ---------- Your website: copy beside this page's own example site ---------- */
.exrow { max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr) 600px; justify-content: stretch; gap: 56px; padding: 40px 48px; }
.exrow__copy .h2 { margin-top: 14px; }
.exrow__copy .body { max-width: 30em; }
.exrow__acts { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.exrow__acts .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.exrow .link { color: var(--ink); }
@media (max-width: 1100px) { .exrow { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 32px; gap: 28px; } .exrow__copy { justify-self: stretch; max-width: none; margin-inline: 0; } }
@media (max-width: 760px) {
  .exrow { margin: 0; padding: 22px 16px 26px; gap: 20px; border-radius: 22px; }
  .exfig, .exfig__in { width: 240px; height: 444px; }
  .exfig__in { transform: none; }
  .exfig .bframe { display: none; }
  .exfig .phone { position: relative; top: 0; right: auto; }
  .exrow__acts .btn { width: 100%; }
}

/* Example practice, a made-up clinic, in Measured's palette, fixed in both themes (the site is a picture of a site).
   The photo is greyscale under a navy wash, so no outside hue enters the page. */
.xs { --xs-n: #14284B; --xs-band: #0C1A33; --xs-paper: #FFFBF3; --xs-c: #FDEBC4; --xs-i2: #3E4F70; --xs-a: #F59B2A;
  background: #FFFFFF; color: var(--xs-n); font-family: var(--sans); }
.exfig .phone .phone__screen:has(.xs) { background: #FFFFFF; }
.xs .i { width: 12px; height: 12px; }
.xs__nav { display: flex; align-items: center; gap: 20px; padding: 14px 20px; background: #FFFFFF; box-shadow: inset 0 -1px 0 #E6EAF1; }
.xs__name { margin-right: auto; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--xs-n); white-space: nowrap; }
.xs__links { display: flex; gap: 20px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--xs-i2); }
.xs__call, .xs__acts span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xs__call { background: var(--xs-n); color: #FFFFFF; }
.xs__call .i, .xs__acts .p .i { color: var(--xs-a); }
.xs__hero { position: relative; height: 300px; overflow: hidden; background: var(--xs-band); }
.xs__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; filter: grayscale(1) contrast(1.06); }
.xs__hero::before { content: ""; position: absolute; inset: 0; background: rgb(20 40 75 / .42); mix-blend-mode: multiply; }
.xs__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 26 51 / .95) 0%, rgb(12 26 51 / .88) 44%, rgb(12 26 51 / .3) 68%, rgb(12 26 51 / 0) 86%); }
.xs__copy { position: absolute; z-index: 1; left: 24px; top: 0; bottom: 0; width: 300px; display: flex; flex-direction: column; justify-content: center; color: #FFFFFF; }
.xs__kick { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--xs-c); }
.xs__h { margin-top: 10px; font-weight: 600; font-size: 32px; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; color: #FFFFFF; }
.xs__sub { margin-top: 10px; font-size: 13px; line-height: 1.45; color: #C9D5E8; max-width: 25em; text-wrap: balance; }
.xs__acts { margin-top: 16px; display: flex; gap: 8px; }
.xsd .xs__acts .p { background: var(--xs-a); color: var(--xs-n); }
.xsd .xs__acts .p .i { color: var(--xs-n); }
.xsd .xs__acts .s { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); color: #FFFFFF; }
.xs__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12px; font-weight: 500; }
.xs__trust span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%; background: var(--xs-a); vertical-align: 3px; }
.xsd .xs__trust { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .18); color: #C9D5E8; }
.xs__svc { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 36px; padding: 14px 20px 16px; background: var(--xs-paper); }
.xs__svc p { font-size: 12px; line-height: 1.4; color: var(--xs-i2); }
.xs__svc b { display: block; font-weight: 600; font-size: 13px; color: var(--xs-n); }
.xs__svc b::before { content: ""; display: inline-block; width: 12px; height: 1.5px; margin-right: 7px; background: var(--xs-a); vertical-align: 4px; }
.xsm { height: 100%; }
.xsm__status { display: flex; justify-content: space-between; padding: 12px 22px 0 26px; font: 600 12px/1 var(--sans); color: var(--xs-n); }
.xsm .xs__nav { gap: 12px; padding: 14px 14px 10px; box-shadow: none; }
.xsm .xs__name { font-size: 14px; }
.xs__menu { display: grid; gap: 4px; width: 18px; }
.xs__menu i { display: block; height: 1.5px; border-radius: 2px; background: var(--xs-n); }
.xsm__hero { position: relative; height: 212px; margin: 0 10px; border-radius: 14px; overflow: hidden; background: var(--xs-band); }
.xsm__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; filter: grayscale(1) contrast(1.06); }
.xsm__hero::before { content: ""; position: absolute; inset: 0; background: rgb(20 40 75 / .4); mix-blend-mode: multiply; }
/* S6 22 Oct, F26: the top scrim is deeper behind the kicker (it measured 3.28:1 on the photo); same photo, same fade-out */
.xsm__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 26 51 / .8) 0%, rgb(12 26 51 / .64) 15%, rgb(12 26 51 / 0) 33%, rgb(12 26 51 / 0) 36%, rgb(12 26 51 / .92) 80%); }
/* Quality bar 22 Oct, C3: the phone render's kicker at the 12px floor (the comp had 11px) */
.xsm .xs__kick { position: absolute; z-index: 1; left: 14px; top: 14px; font-size: 12px; text-shadow: 0 1px 3px rgb(12 26 51 / .55); }
.xsm .xs__h { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; margin: 0; font-size: 23px; }
.xsm__body { padding: 12px 12px 0; }
.xsm .xs__trust { justify-content: center; color: var(--xs-i2); }
.xsm .xs__acts { margin-top: 17px; display: grid; gap: 7px; }
.xsm .xs__acts span { height: 40px; border-radius: 11px; font-size: 13px; gap: 8px; }
.xsm .xs__acts .p { background: var(--xs-n); color: #FFFFFF; }
.xsm .xs__acts .p .i { width: 13px; height: 13px; }
.xsm .xs__acts .s { background: var(--xs-a); color: var(--xs-n); }

/* ---------- For the practice manager: the two numbers, side by side ---------- */
.calls__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.nums { padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2); }
.nums__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nums__top b { font-weight: 600; font-size: 17px; }
.num-row { margin-top: 14px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 16px; }
.num-row--ours { background: var(--warm); box-shadow: inset 0 0 0 1px var(--warm-line); }
.num-row--own { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hair); }
.num-row small { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.num-row strong { display: block; margin-top: 2px; font-weight: 600; font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.num-row span.w { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 1100px) { .calls__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Why practices choose Measured: four short cards ---------- */
.pod { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pod li { padding: 22px 22px 24px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); }
.pod b { display: block; margin-top: 16px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.pod p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1100px) { .pod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pod { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pod li { padding: 16px 16px 18px; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; } .pod b { margin-top: 6px; font-size: 17px; } .pod p { grid-column: 2; margin-top: 4px; } .pod .chip { grid-row: span 2; } }

/* ---------- Privacy: two cards ---------- */
.card { padding: 28px 30px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2); }
.card p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.priv { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.priv .card h3 { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.priv .card p { margin-top: 10px; font-size: 15px; }
@media (max-width: 960px) { .priv { grid-template-columns: minmax(0, 1fr); } }

/* ---------- What we do: a list on the page ground, the health rules as its last row ---------- */
.panel { margin-top: 28px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.svc li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.svc li:first-child { grid-column: 1 / -1; }
.svc li:last-child { border-bottom: 0; }
.svc li b { font-weight: 600; color: var(--ink); }
/* "Your website." is a row label, not running text, so it gets a 44px target without moving the row */
.svc li a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; }
.svc li.rulesrow { grid-column: 1 / -1; }
.rulesrow > div > p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.rules { margin-top: 10px; border-radius: 18px; background: var(--surface-2); padding: 2px 18px; }
.rules > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-weight: 600; font-size: 15px; }
.rules > summary::-webkit-details-marker { display: none; }
.rules > summary .i { width: 18px; height: 18px; color: var(--ink-2); transition: transform var(--dur) var(--ease); }
.rules[open] > summary .i { transform: rotate(180deg); }
.rules__in { padding: 2px 0 20px; border-top: 1px solid var(--hair); }
.rules__in p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.rules__in h3 { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ink); }
.rules__in a { color: var(--ink); font-weight: 600; }
.rows { margin-top: 8px; }
.rows li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.rows li:last-child { border-bottom: 0; }
.rows .i { margin-top: 3px; color: var(--ink); }
@media (max-width: 960px) { .svc { grid-template-columns: 1fr; } }
/* Quality bar 22 Oct, X1: "What we do" ends with the set's section gap before the white Questions band, not flush */
.sec:has(+ .qsec) { padding-bottom: 104px; }
@media (max-width: 760px) { .sec:has(+ .qsec) { padding-bottom: 48px; } }

/* ---------- "Also for": the other two sector pages, after the close ---------- */
.notcl { padding: 22px 0; font-size: 15px; color: var(--ink-2); }
.notcl a { color: var(--ink); font-weight: 600; }

/* Phones: the two-numbers card is a laptop extra; the paragraph beside it says the same */
@media (max-width: 760px) {
  .body { font-size: 15px; }
  .nums { padding: 16px; }
  .num-row { padding: 14px; gap: 12px; }
  .num-row strong { font-size: 21px; }
  .calls__grid .nums { display: none; }
  .panel { margin-top: 20px; }
  .svc li { padding: 11px 0; gap: 12px; }
  .card { padding: 20px 16px; }
  .card p { font-size: 15px; }
  .priv { margin-top: 18px; gap: 14px; }
  .priv .card { padding: 18px 16px; }
  .priv .card h3 { font-size: 19px; }
}

/* F41, 22 Oct: the close card's email line, as the hero's hint, on the cream card (fixed colours in both themes) */
.go .cta2__hint { margin-top: 14px; color: #3E4F70; }
.go .cta2__hint a { color: #14284B; }