/* ============================================================
   site.css - Boom12, new.boom12.com

   Loads after base.css and wins on the cascade. Never replaced by an engine
   update.

   The Radius system: ink grounds the big moments (header, hero, AI band,
   closing call, footer), paper carries the reading, pink is the signal (the
   full stops, the centre dot, the main action), and sky and lime appear only
   as strokes, tags, and text on ink. Rings are decoration, drawn here rather
   than placed as content, so authors never handle them.

   Colours and fonts come from Settings, Branding: --color-ink, --color-paper,
   --color-action (pink), --color-sky, and --color-lime. Heading sizes there
   are fixed lengths (Branding takes no clamp()), so the fluid sizes for each
   component live below.

   Hooks are block and section classes set in the page editor:
     b12-ink           a section on ink
     b12-hero          the opening section (b12-hero--page on inner pages)
     b12-practice-strip, b12-practices, b12-practice--sky|pink|lime
     b12-section-head  a rich-text intro above a group
     b12-cards         a list block shown as cards
     b12-radius-row, b12-radius, b12-radius-copy
     b12-ai            the AI band (section)
     b12-steps         a list block shown as numbered steps
     b12-work          a collection grid of work
     b12-pills         a list block shown as pills
     b12-closing, b12-reach
     b12-footer, b12-footer-tagline  (footer region)

   Motion: the ring pulse runs once, inside five seconds, and not at all
   under reduced motion (base.css's reduced-motion block).
   ============================================================ */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --muted: #5F5E5A;      /* 6.1:1 on paper; base.css's derived mix is lighter */
  --hairline: #E4E4DC;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --on-ink-line: rgb(247 247 242 / .18);

  --b12-radius: 20px;
  --b12-btn-radius: 12px;
  --b12-h2: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  --b12-lead: clamp(1.125rem, 1.05rem + .25vw, 1.1875rem);
}

/* Dark grounds flip the focus ring to paper. */
.site-header, .site-footer, .b12-ink { --focus: var(--color-paper); }

/* ---- Base refinements ----------------------------------------------------- */
a:hover { color: inherit; }
:focus-visible { outline: 2px solid var(--focus, var(--color-ink)); outline-offset: 3px; }
.dot { color: var(--color-action); }

.block-eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .9375rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.b12-ink .block-eyebrow { color: var(--color-sky); }

/* ---- Buttons -------------------------------------------------------------- */
.cta--primary, .cta--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding: 0 26px;
  border-radius: var(--b12-btn-radius);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.2;
  text-decoration: none;
}
.cta--primary { background: var(--color-action); color: var(--color-ink); }
.cta--primary:hover { background: var(--color-action); color: var(--color-ink); text-decoration: underline; }
.cta--secondary { border: 1.5px solid currentColor; color: inherit; }
.cta--secondary:hover { border-color: currentColor; color: inherit; text-decoration: underline; }
.cta--tertiary {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  text-decoration: underline;
  color: inherit;
}

/* ---- Header (classic header, on ink) --------------------------------------- */
/* Full-bleed ink without changing the header's own width: a shadow paints the
   edges and the clip keeps it from spilling above or below. */
.site-header {
  position: relative;
  z-index: 1;
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: 0 0 0 100vmax var(--color-ink);
  clip-path: inset(0 -100vmax);
  padding-block: 22px;
}
.site-logo img { block-size: 1.9rem; }
.site-nav .nav-list { gap: 0 2rem; }
.site-nav .nav-item > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
}
.site-nav .nav-item > a:hover { text-decoration: underline; }
.site-header-cta--primary {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 16px;
  border: 1.5px solid currentColor;
  border-radius: var(--b12-btn-radius);
  font-family: var(--font-heading);
  font-weight: 500;
  text-decoration: none;
}
.site-header-cta--primary:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .site-nav { order: 3; }
  .site-nav .nav-list { gap: 0 1.25rem; }
  .site-header-actions { margin-inline-start: 0; }
}

/* ---- Section rhythm -------------------------------------------------------- */
/* base.css drops the top padding of a block that follows another section,
   which is right on paper. After an ink section the next one needs its own. */
.b12-ink + .sw-section > .block:first-child,
.b12-ink + .sw-section > .sw-section:first-child { padding-block-start: var(--space-block); }

/* A cards section nested in a one-column section has no column to fill, so
   it takes the content width itself. */
.sw-section[data-sw-layout="one"] > .sw-section:is([data-sw-layout="cards"], [data-sw-layout="three"]) {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-block: 0 var(--space-block);
}

/* Narrowed text in a block keeps to the content column's start edge. base.css
   gives every block child margin-inline: auto, so a heading capped at 22ch or
   an intro capped at the measure was centred as a box while its text stayed
   left-aligned. Columns, cards, and centred blocks set their own margins with
   more specific rules and are unaffected. */
.block > :is(.block-eyebrow, .block-heading, .block-subheading, .block-body) {
  margin-inline: max(var(--gutter), (100% - var(--wrap)) / 2) auto;
}

/* ---- Section heads ---------------------------------------------------------- */
:is(.b12-section-head, .b12-cards, .b12-steps, .b12-work, .b12-radius-copy) .block-heading {
  font-size: var(--b12-h2);
  letter-spacing: -.02em;
  max-inline-size: 22ch;
}
:is(.b12-section-head, .b12-cards, .b12-steps, .b12-pills) > .block-body {
  max-inline-size: 760px;
  margin-block-start: 16px;
  font-size: var(--b12-lead);
  color: var(--muted);
}
.b12-section-head { padding-block-end: 44px; }
.b12-section-head .prose { max-inline-size: 760px; }
.b12-section-head .prose p { font-size: var(--b12-lead); color: var(--muted); }

/* ---- Rings: shared art ------------------------------------------------------ */
.b12-hero, .b12-closing, .b12-ai {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink);
  color: var(--color-paper);
}
.b12-hero::before, .b12-closing::before, .b12-ai::before,
.b12-hero::after, .b12-closing::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  pointer-events: none;
}
.b12-hero::before, .b12-closing::before, .b12-ai::before { background: no-repeat center / contain; }
/* The pulse: one ring spreading from the centre, once. */
.b12-hero::after, .b12-closing::after {
  border: 2px solid var(--color-action);
  border-radius: 50%;
  opacity: 0;
  animation: b12-spread 4.4s ease-out .4s 1 both;
}
@keyframes b12-spread {
  from { transform: scale(.06); opacity: .7; }
  to   { transform: scale(.98); opacity: 0; }
}

/* ---- Hero ------------------------------------------------------------------- */
.b12-hero::before, .b12-hero::after {
  inline-size: 1100px;
  inset-inline-end: -620px;
  inset-block-start: 40px;
}
.b12-hero::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.5'><circle cx='500' cy='500' r='64' stroke='%23CDEFFD' stroke-opacity='.5'/><circle cx='500' cy='500' r='124' stroke='%23F78FCA' stroke-opacity='.5'/><circle cx='500' cy='500' r='196' stroke='%23CAF291' stroke-opacity='.3'/><circle cx='500' cy='500' r='276' stroke='%23CDEFFD' stroke-opacity='.3'/><circle cx='500' cy='500' r='366' stroke='%23CAF291' stroke-opacity='.18'/><circle cx='500' cy='500' r='466' stroke='%23CDEFFD' stroke-opacity='.1'/><circle cx='500' cy='500' r='18' fill='%23F78FCA' stroke='none'/></svg>");
}
@media (min-width: 45rem) {
  .b12-hero::before, .b12-hero::after { inline-size: 1300px; inset-inline-end: -360px; inset-block-start: -260px; }
}
.b12-hero .block--hero { padding-block: clamp(3rem, 8vw, 6rem) 3.5rem; }
.b12-hero .block-heading {
  font-size: clamp(4rem, 1.4rem + 8vw, 8rem);
  line-height: .98;
  letter-spacing: -.03em;
  max-inline-size: none;
}
.b12-hero .hero-inner { gap: 0; }
.b12-hero .block-body {
  max-inline-size: 34ch;
  margin-block-start: 28px;
  font-size: clamp(1.25rem, 1.15rem + .35vw, 1.375rem);
  line-height: 1.55;
}
.b12-hero .hero-actions { gap: 14px 18px; margin-block-start: 36px; }
.b12-hero .block:last-child { padding-block-end: clamp(5rem, 9vw, 7.5rem); }

/* Inner pages: the same ground, a smaller statement. */
.b12-hero--page .block-heading { font-size: clamp(3rem, 1.6rem + 5vw, 5.5rem); max-inline-size: 18ch; }
.b12-hero--page .block-eyebrow { margin-block-end: 18px; font-size: 1.0625rem; }

/* The practice strip under the hero. */
.b12-practice-strip .feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-block: 0;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--on-ink-line);
}
.b12-practice-strip .feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
}
.b12-practice-strip .feature-item::before {
  content: "";
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  background: radial-gradient(circle, var(--color-action) 0 3.5px, transparent 4px 8.6px, var(--ring) 8.75px 10.25px, transparent 10.5px);
}
.b12-practice-strip .feature-item:nth-child(1) { --ring: var(--color-sky); }
.b12-practice-strip .feature-item:nth-child(2) { --ring: var(--color-action); }
.b12-practice-strip .feature-item:nth-child(3) { --ring: var(--color-lime); }
.b12-practice-strip .feature-body {
  max-inline-size: none;
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
}

/* ---- The three practices ------------------------------------------------------ */
.b12-practices { --section-gap: 20px; }
.b12-practices > .block.b12-practice {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 32px 33px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--b12-radius);
  box-shadow: inset 5px 0 0 var(--color-ink);   /* the ink edge */
}
.b12-practice--sky  { --ring: var(--color-sky);    --core: var(--color-action); }
.b12-practice--pink { --ring: var(--color-action); --core: var(--color-ink); }
.b12-practice--lime { --ring: var(--color-lime);   --core: var(--color-action); }
.b12-practice > * { margin: 0; }
.b12-practice .block-eyebrow::before {
  content: "";
  display: block;
  inline-size: 72px;
  block-size: 72px;
  margin-block-end: 14px;
  background: radial-gradient(circle, var(--core) 0 8px, transparent 8.5px 18.5px, var(--ring) 18.75px 25.25px, transparent 25.5px 33.25px, var(--color-ink) 33.5px 34.75px, transparent 35px);
}
.b12-practice .block-heading { font-size: 1.75rem; letter-spacing: -.01em; }
.b12-practice .block-body { margin: 0; }
.b12-practice .feature-list { order: 1; display: grid; gap: 6px; margin: 4px 0 0; }
.b12-practice .block-cta { order: 2; margin-block-start: auto; padding-block-start: 10px; }
.b12-practice .feature-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 0;
  border: 0;
}
.b12-practice .feature-item::before {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--color-ink);
  transform: translateY(-2px);
}
.b12-practice .feature-body { color: var(--color-ink); max-inline-size: none; }

/* ---- Cards (a list block shown as a row of cards) ----------------------------- */
.b12-cards .feature-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 20px;
  margin-block-start: 44px;
}
.b12-cards .feature-item {
  display: block;
  padding: 28px 28px 30px 33px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--b12-radius);
  box-shadow: inset 5px 0 0 var(--color-ink);
}
.b12-cards .feature-heading { font-size: 1.375rem; }
.b12-cards .feature-body { margin-block-start: 8px; font-size: 1rem; }

/* ---- Your business at the centre ------------------------------------------- */
/* The gap goes through --section-gap: base.css sizes the two columns from it,
   so setting gap directly makes two columns overflow and stack. */
.sw-section.b12-radius-row { align-items: center; --section-gap: clamp(2.5rem, 6vw, 4.5rem); }
.b12-radius .feature-list {
  position: relative;
  display: block;
  inline-size: 100%;
  max-inline-size: 560px;
  aspect-ratio: 1;
  margin: 0 auto;
  background: no-repeat center / contain url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'><circle cx='200' cy='200' r='190' stroke='%231D201F' stroke-width='1.5'/><circle cx='200' cy='200' r='132' stroke='%231D201F' stroke-width='1.5'/><circle cx='200' cy='200' r='74' stroke='%231D201F' stroke-width='1.5'/><circle cx='200' cy='200' r='190' stroke='%23CDEFFD' stroke-width='8' stroke-dasharray='60 1134' transform='rotate(-120 200 200)'/><circle cx='200' cy='200' r='132' stroke='%23F78FCA' stroke-width='8' stroke-dasharray='60 770' transform='rotate(-130 200 200)'/><circle cx='200' cy='200' r='74' stroke='%23CAF291' stroke-width='8' stroke-dasharray='60 405' transform='rotate(-150 200 200)'/><circle cx='200' cy='200' r='16' fill='%23F78FCA'/></svg>");
}
/* Labels sit on the rings: 2.5%, 17%, and 31.5% are where r190, r132, and r74
   cross the top of a 400 box. */
.b12-radius .feature-item {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: block;
  padding: 3px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--color-paper);
  text-align: center;
  white-space: nowrap;
}
.b12-radius .feature-item:nth-child(1) { inset-block-start: calc(2.5% - 14px); }
.b12-radius .feature-item:nth-child(2) { inset-block-start: calc(17% - 14px); }
.b12-radius .feature-item:nth-child(3) { inset-block-start: calc(31.5% - 14px); }
.b12-radius .feature-item:nth-child(4) { inset-block-start: calc(55% + 4px); }
.b12-radius .feature-heading { font-size: .9375rem; line-height: 1.3; letter-spacing: 0; }
.b12-radius .feature-body { font-size: .8125rem; font-weight: 600; color: var(--muted); max-inline-size: none; }
.b12-radius .feature-item:last-child .feature-body {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-ink);
}
.b12-radius-copy .prose p { font-size: var(--b12-lead); }
.b12-radius-copy .prose p + p { color: var(--muted); }

/* ---- AI that stays home ---------------------------------------------------- */
.sw-section.b12-ai {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  border-radius: 24px;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
}
.b12-ai::before {
  inline-size: 760px;
  inset-inline-end: -380px;
  inset-block-end: -380px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.5'><circle cx='500' cy='500' r='90' stroke='%23CAF291' stroke-opacity='.5'/><circle cx='500' cy='500' r='190' stroke='%23CAF291' stroke-opacity='.3'/><circle cx='500' cy='500' r='300' stroke='%23CDEFFD' stroke-opacity='.3'/><circle cx='500' cy='500' r='410' stroke='%23CAF291' stroke-opacity='.18'/><circle cx='500' cy='500' r='16' fill='%23F78FCA' stroke='none'/></svg>");
}
.b12-ai .block { display: flex; flex-direction: column; align-items: flex-start; padding: 0; }
.b12-ai .block > * { inline-size: 100%; max-inline-size: 640px; margin-inline: 0; }
.b12-ai .block-eyebrow {
  inline-size: auto;
  margin: 0;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--color-lime);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .875rem;
}
.b12-ai .block-heading { margin-block-start: 18px; font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem); letter-spacing: -.02em; }
.b12-ai .block-body { margin-block-start: 18px; font-size: var(--b12-lead); }
.b12-ai .feature-list { order: 1; display: grid; gap: 12px; margin-block-start: 26px; }
.b12-ai .block-cta { order: 2; inline-size: auto; margin-block-start: 32px; }
.b12-ai .feature-item { display: flex; gap: 12px; align-items: baseline; padding: 0; border: 0; }
.b12-ai .feature-item::before {
  content: "";
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--color-lime);
  transform: translateY(-1px);
}
.b12-ai .feature-body { color: var(--color-paper); max-inline-size: none; }

/* ---- Steps (a real sequence, so it is numbered) ----------------------------- */
.b12-steps .feature-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 28px;
  margin-block-start: 44px;
  counter-reset: step;
}
.b12-steps .feature-item {
  display: block;
  padding: 22px 0 0;
  border: 0;
  border-block-start: 2px solid var(--color-ink);
  counter-increment: step;
}
.b12-steps .feature-item::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1.5px solid var(--color-ink);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
}
.b12-steps .feature-heading { margin-block-start: 16px; font-size: 1.375rem; }
.b12-steps .feature-body { margin-block-start: 8px; font-size: 1.0625rem; }

/* ---- Work ------------------------------------------------------------------ */
.b12-work .grid { gap: 20px; margin-block-start: 44px; }
.b12-work .card {
  position: relative;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.b12-work .card-media { margin: 0; }
.b12-work .card-media img { border-radius: var(--b12-radius); border: 1px solid var(--hairline); }
/* No image yet: the brand's placeholder, rings on a white card. */
.b12-work .card:not(:has(.card-media))::before {
  content: "";
  aspect-ratio: 1200 / 630;
  border: 1px solid var(--hairline);
  border-radius: var(--b12-radius);
  background: var(--card) no-repeat center / cover var(--shot);
}
.b12-work .card:nth-child(3n+1) { --shot: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 210' preserveAspectRatio='xMidYMid slice' fill='none' stroke='%23CDEFFD' stroke-width='1.5'><circle cx='330' cy='60' r='40'/><circle cx='330' cy='60' r='90'/><circle cx='330' cy='60' r='150'/></svg>"); }
.b12-work .card:nth-child(3n+2) { --shot: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 210' preserveAspectRatio='xMidYMid slice' fill='none' stroke='%23F78FCA' stroke-width='1.5'><circle cx='70' cy='170' r='40'/><circle cx='70' cy='170' r='90'/><circle cx='70' cy='170' r='150'/></svg>"); }
.b12-work .card:nth-child(3n)   { --shot: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 210' preserveAspectRatio='xMidYMid slice' fill='none' stroke='%23CAF291' stroke-width='1.5'><circle cx='200' cy='105' r='40'/><circle cx='200' cy='105' r='90'/><circle cx='200' cy='105' r='150'/></svg>"); }
.b12-work .card-title { margin-block-start: 8px; font-size: 1.375rem; }
.b12-work .card:hover .card-title { text-decoration: underline; }
.b12-work .card-body { font-size: 1rem; }
/* The whole card is the link; the visible label stays for screen readers and keyboards. */
.b12-work .card-cta {
  margin-block-start: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .9375rem;
}
.b12-work .card-cta::after { content: ""; position: absolute; inset: 0; }

/* ---- Who we work with ------------------------------------------------------- */
.b12-work + .b12-pills { padding-block-start: clamp(3rem, 6vw, 4.5rem); }
.b12-pills .block-heading { font-size: 1.75rem; }
.b12-pills .feature-list { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px; }
.b12-pills .feature-item {
  display: block;
  padding: 8px 18px;
  border: 1.5px solid var(--color-ink);
  border-radius: 999px;
}
.b12-pills .feature-body {
  max-inline-size: none;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
}

/* ---- Closing call ---------------------------------------------------------- */
.b12-closing { text-align: center; }
.b12-closing::before, .b12-closing::after {
  inline-size: 1300px;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
}
.b12-closing::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.5'><circle cx='500' cy='500' r='150' stroke='%23CDEFFD' stroke-opacity='.3'/><circle cx='500' cy='500' r='230' stroke='%23F78FCA' stroke-opacity='.3'/><circle cx='500' cy='500' r='320' stroke='%23CAF291' stroke-opacity='.18'/><circle cx='500' cy='500' r='420' stroke='%23CDEFFD' stroke-opacity='.1'/></svg>");
}
.sw-section.b12-closing > .block:first-child { padding-block-start: clamp(4.5rem, 9vw, 6.25rem); }
.sw-section.b12-closing > .block:last-child { padding-block-end: clamp(4.5rem, 9vw, 6.25rem); }
.b12-closing .cta-band-inner {
  gap: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.b12-closing .block-heading {
  max-inline-size: none;
  font-size: clamp(3rem, 1.4rem + 5vw, 4.5rem);
  letter-spacing: -.02em;
}
.b12-closing .cta-band-inner > .block-body {
  max-inline-size: 40ch;
  margin-block-start: 18px;
  font-size: var(--b12-lead);
}
.b12-closing .cta-band-inner > .block-cta { margin-block-start: 32px; }
.b12-reach .buttons-block { justify-content: center; gap: 6px 28px; }
.b12-reach .cta--tertiary { color: var(--color-sky); }

/* ---- Footer (region built from blocks, on ink) ------------------------------ */
.site-footer {
  margin-block-start: var(--space-block);
  border: 0;
  background: var(--color-ink);
  color: var(--color-paper);
}
main:has(> .sw-section.b12-ink:last-child) + .site-footer { margin-block-start: 0; }
.footer-blocks { border: 0; }
.sw-section.b12-footer {
  padding-block: 40px 48px;
  border-block-start: 1px solid var(--on-ink-line);
  gap: 28px var(--section-gap);
}
.b12-footer .logo-block img { block-size: 1.9rem; }
.b12-footer-tagline .block-heading { margin-block-start: 10px; font-size: 1.25rem; letter-spacing: 0; }
.b12-footer-tagline .prose p { margin-block-start: 10px; font-size: 1rem; }
.b12-footer .menu-block--columns > .menu-list { gap: 28px; }
.b12-footer .menu-heading {
  color: var(--color-sky);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .9375rem;
}
.b12-footer .menu-block a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  color: var(--color-paper);
  font-size: 1rem;
}
.b12-footer .menu-block a:hover { text-decoration: underline; }
.lower-footer { border-color: var(--on-ink-line); color: var(--color-sky); }