/* ============================================================================
   Ipic Media: shared design system (loads AFTER scrollcraft.css)
   ----------------------------------------------------------------------------
   Grammar: chaptered editorial. Paper, folios, measure, restraint. Three
   grounds that hard-cut (no drift). Two faces: Archivo (display) and
   Newsreader (text). One accent hue, two lightnesses, keyed per ground.

   CLASSES THE SUPPORTING PAGES REUSE
   .g-paper .g-ink .g-red   ground: sets the six tokens AND restates background
                            + color on the subtree (color inherits as a computed
                            value, so a redefined --sc-ink alone re-inks nothing)
   .wrap                    reading column: max width + gutters + spine offset
   .prose                   body copy at --sc-measure (Newsreader, 1.6 leading)
   .deck                    lede paragraph, Newsreader at --sc-t-lg
   .cap                     caption: Newsreader italic, small, ink-soft
   .pull                    pull quote: Newsreader italic, --sc-t-xl
   .intertitle              chapter opener: .intertitle__num (roman numeral,
                            Archivo 700 wide) + .intertitle__title (h2, italic)
   .h-display / .h-section  Archivo headings (page h1 / section h2 or h3)
   .rt-cta                  THE call to action, as a line of running text with a
                            red underline. Label everywhere: "Tell us your story".
                            .rt-cta--lg for the closing line
   .rt-link                 quiet inline text link (underline, ink)
   .btn                     square filled button (forms on /contact only)
   .page-head / .page-nav   supporting-page header: ink logo + text nav
   .colophon                the footer plate (ink ground, small type)
   .media / .cap            a photograph in its own column with its caption
   .grid-12                 12-column grid, gap --sc-5
   .skip .vh                skip link, visually hidden
   Spacing: use --sc-1 ... --sc-11 (4px base). Section rhythm: --sc-section.
   Radius scale: square. 2px on the lighting gels only.
   ========================================================================== */

/* ----------------------------------------------------------------- faces -- */
/* Self-hosted latin subsets (SIL Open Font License), so no third-party
   request blocks the first paint. Preloaded in every page head. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-stretch: 100% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-latin-v2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/assets/fonts/newsreader-latin-v3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin-v3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* paper is the page default */
  --sc-canvas: #F1F1EE;  --sc-surface: #E4E4DF;
  --sc-ink: #12131A;     --sc-ink-soft: #464B5C;
  --sc-accent: #D41317;  --sc-accent-ink: #F7F6F2;
  --sc-hairline: rgba(18, 19, 26, .16);
  --sc-hairline-strong: rgba(18, 19, 26, .28);

  --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-mono: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --sc-r-sm: 0px; --sc-r-md: 0px; --sc-r-lg: 0px; --sc-r-pill: 0px;
  --sc-shadow-color: 230 16% 6%;

  /* the two lights, sampled from the client's own gel portraits (MANIFEST.md) */
  --gel-red: #E0192B; --gel-blue: #1E4FE0;

  /* the spine folio occupies the left margin on wide screens */
  --spine: 0px;
}
@media (min-width: 1024px) { :root { --spine: 48px; } }

/* ------------------------------------------------- readability floors -- */
/* The engine's two small steps bottom out at 12px and 14px, which is under the
   floor this build is held to (17px desktop / 16px phone for running text, and
   nothing below ~14.5px anywhere). Raised here, page-local, so every caption,
   label, deck and fine-print line clears it at 390px and at 360px. */
:root {
  --sc-t-xs: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --sc-t-sm: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  /* `ch` is the advance of "0", and Newsreader's zero is wide: 62ch measured
     614px at 18px, which is 85 characters a line, well past the 78 where a
     serif starts losing the reader between lines. 54ch measures 74. */
  --sc-measure: 54ch;
}
small { font-size: var(--sc-t-xs); }

/* Keyboard focus has to land where the reader can see it. scrollcraft.css sets
   scroll-behavior:smooth on <html>, so the browser's scroll-into-view animates
   and the focused control is off screen for the length of the glide: on a page
   eleven screens tall, a jump from the contents sheet glides for seconds with
   focus nowhere. The engine already opts out with behavior:'instant' inside its
   own focus handler; the page opts out everywhere else. Anchor jumps land at
   once, which is also the grammar: this page cuts, it does not drift. */
html { scroll-behavior: auto; }

/* --------------------------------------------------------------- grounds -- */
.g-paper {
  --sc-canvas: #F1F1EE; --sc-surface: #E4E4DF; --sc-ink: #12131A; --sc-ink-soft: #464B5C;
  --sc-accent: #D41317; --sc-accent-ink: #F7F6F2;
  --sc-hairline: rgba(18, 19, 26, .16); --sc-hairline-strong: rgba(18, 19, 26, .28);
  --folio-ink: #565B6C;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.g-ink {
  --sc-canvas: #12131A; --sc-surface: #1B1D28; --sc-ink: #F1F1EE; --sc-ink-soft: #A3A8B8;
  --sc-accent: #FF5A5E; --sc-accent-ink: #12131A;
  --sc-hairline: rgba(241, 241, 238, .14); --sc-hairline-strong: rgba(241, 241, 238, .26);
  --folio-ink: #A3A8B8;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.g-red {
  /* ink-soft is lighter than the brief's #F3C9C9, which measured 3.6:1 on the red */
  --sc-canvas: #D41317; --sc-surface: #B81015; --sc-ink: #F7F6F2; --sc-ink-soft: #F7F6F2;
  --sc-accent: #F7F6F2; --sc-accent-ink: #D41317;
  --sc-hairline: rgba(247, 246, 242, .22); --sc-hairline-strong: rgba(247, 246, 242, .4);
  --folio-ink: #FBE8E8;
  background: var(--sc-canvas); color: var(--sc-ink);
}
/* light on dark: one step more leading, a touch more tracking, one weight up */
.g-ink, .g-red { line-height: 1.65; letter-spacing: .01em; }
.g-ink .prose, .g-red .prose, .g-ink .deck, .g-red .deck { font-weight: 500; }

/* ------------------------------------------------------------------ base -- */
html { background: var(--sc-canvas); }
body { font-family: var(--sc-font-text); }
h1, h2, h3, h4 { font-family: var(--sc-font-display); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
b, strong { font-weight: 600; }
a { color: inherit; text-decoration-color: var(--sc-hairline-strong); }
a:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: color 140ms var(--sc-ease-out), text-decoration-color 140ms var(--sc-ease-out), opacity 140ms var(--sc-ease-out); }
}
[hidden] { display: none !important; }

.skip {
  position: absolute; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: var(--sc-3) var(--sc-4);
  background: #12131A; color: #F1F1EE;
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm);
  transform: translateY(-300%);
}
.skip:focus-visible { transform: none; outline-color: #FF5A5E; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- layout -- */
.wrap {
  width: 100%; max-width: calc(var(--sc-maxw) + var(--spine)); margin-inline: auto;
  padding-left: calc(var(--sc-gutter) + var(--spine)); padding-right: var(--sc-gutter);
}
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-5); row-gap: var(--sc-7); }
@media (max-width: 860px) { .grid-12 { grid-template-columns: minmax(0, 1fr); row-gap: var(--sc-6); } }

/* ------------------------------------------------------------------ type -- */
.h-display {
  font-weight: 700; font-stretch: 100%;
  font-size: var(--sc-t-3xl); line-height: .96; letter-spacing: var(--sc-track-tight);
}
.h-section { font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.06; letter-spacing: var(--sc-track-snug); }
.h-item { font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.12; letter-spacing: var(--sc-track-snug); }
@media (max-width: 700px) { .h-display { font-size: var(--sc-t-2xl); } }

.prose { max-width: var(--sc-measure); font-size: var(--sc-t-base); line-height: 1.6; text-wrap: pretty; }
.prose + .prose { margin-top: var(--sc-4); }
.deck { max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.5; letter-spacing: 0; text-wrap: pretty; }
.cap {
  font-style: italic; font-size: var(--sc-t-sm); line-height: 1.5;
  color: var(--sc-ink-soft); max-width: 48ch; margin-top: var(--sc-3);
}
.cap b { font-style: normal; font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-ink); }
.pull {
  margin: 0; font-style: italic; font-weight: 400;
  font-size: var(--sc-t-xl); line-height: 1.22; letter-spacing: -.005em; max-width: 26ch;
  text-wrap: pretty;
}
.pull::before { content: "\201C"; }
.pull::after { content: "\201D"; }

/* chapter opener: the numeral is set wide, the running title is italic */
.intertitle { display: grid; row-gap: var(--sc-3); align-content: end; }
.intertitle__num {
  display: block; font-family: var(--sc-font-display); font-weight: 700; font-stretch: 125%;
  font-size: var(--sc-t-3xl); line-height: .9; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.intertitle__title {
  font-family: var(--sc-font-text); font-style: italic; font-weight: 400;
  font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: 0; max-width: 22ch;
}
@media (max-width: 700px) { .intertitle__num { font-size: var(--sc-t-2xl); } }

/* ------------------------------------------------ cross-page morphs (4.2) -- */
/* The client asked for easier navigation. Every navigation between the seven
   pages becomes a morph instead of a white flash, and the mark travels from
   the title page's corner into the supporting page's header, so the reader
   never loses their place. Chromium and Safari do this cross-document; Firefox
   falls back to an ordinary navigation, which is exactly today's behaviour. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.masthead img, .page-head__logo img { view-transition-name: masthead; }

/* ------------------------------------------------------------------- cta -- */
.rt-cta {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug); color: var(--sc-ink);
  text-decoration: underline; text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 2px; text-underline-offset: .28em;
  display: inline-block; padding-block: var(--sc-2); min-height: 44px; line-height: 1.6;
}
.rt-cta:hover, .rt-cta:focus-visible { color: var(--sc-accent); text-decoration-color: currentColor; }
.rt-cta:active { transform: translateY(1px); }
/* the ring is keyed per ground so it is always at least 3:1 on what it sits on */
.rt-cta:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.g-ink .rt-cta:focus-visible { outline-color: #FF5A5E; }
.g-red .rt-cta:focus-visible { outline-color: #F7F6F2; }
.rt-cta--lg { font-size: var(--sc-t-2xl); text-decoration-thickness: 3px; text-underline-offset: .18em; line-height: 1.2; }
.g-red .rt-cta { text-decoration-color: currentColor; }
.rt-link { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.rt-link:hover { text-decoration-thickness: 2px; }
/* one intent, one treatment: a secondary call to action carries the accent rule */
.rt-link--accent { text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.rt-link--accent:hover, .rt-link--accent:focus-visible { color: var(--sc-accent); text-decoration-color: currentColor; }
/* WCAG 2.5.8: a link that is the only thing on its line loses the inline
   exception, so the standalone ones get a real 44 px box. Genuinely inline
   links keep the line rhythm and are left alone. */
.rt-link--block { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--sc-2); }

.btn {
  display: inline-block; min-height: 44px; padding: var(--sc-3) var(--sc-5);
  background: var(--sc-ink); color: var(--sc-canvas); border: 0;
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------------ media -- */
.media img, .media video { width: 100%; height: auto; }
.media--frame img { height: 100%; object-fit: cover; }

/* --------------------------------------------------- supporting-page head -- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-6);
  padding-block: var(--sc-6) var(--sc-5); border-bottom: 1px solid var(--sc-hairline);
  flex-wrap: wrap;
}
.page-head__logo img { width: 104px; height: auto; }
@media (min-width: 1024px) {
  /* The header is the only child of its own .wrap, so sticky ON THE HEADER has
     no scroll range to stick through: the wrapper is header-height. The wrapper
     is the direct child of <body>, so that is what sticks. */
  .wrap:has(> .page-head) {
    position: sticky; top: 0; z-index: var(--sc-z-chrome); background: var(--sc-canvas);
  }
  .page-head { padding-block: var(--sc-4) var(--sc-3); }
  .page-head__logo img { width: 76px; }
}
@media (max-width: 860px) {
  .page-head { padding-block: var(--sc-4) var(--sc-3); gap: var(--sc-3); }
  .page-head__logo img { width: 72px; }
  /* .footcta--bar is pinned at every scroll position with the same link */
  .page-head__cta { display: none; }
}
.page-nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 500; }
/* 44 px targets: the inline padding grows the hit box, the negative margin
   cancels it in layout so the wordmarks sit where they did */
.page-nav a { text-decoration: none; padding: var(--sc-2); margin-inline: calc(-1 * var(--sc-2)); min-height: 44px; display: inline-flex; align-items: center; }
.page-nav a:hover, .page-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: .28em; }

/* --------------------------------------------------------------- colophon -- */
.colophon { padding-block: var(--sc-8) var(--sc-7); }
.colophon__plate { display: grid; row-gap: var(--sc-4); max-width: 54ch; font-size: var(--sc-t-sm); line-height: 1.6; font-weight: 500; }
.colophon__plate > * { margin: 0; }
.colophon__logo { width: 120px; height: auto; margin-bottom: var(--sc-4); }
.colophon__plate a:not(.rt-cta) { text-decoration: underline; text-underline-offset: .22em; text-decoration-color: var(--sc-hairline-strong); }
.colophon__plate a:not(.rt-cta):hover { text-decoration-color: currentColor; }
.colophon__nav { display: flex; flex-wrap: wrap; gap: var(--sc-1) var(--sc-4); font-family: var(--sc-font-display); font-weight: 500; }
.colophon__nav a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--sc-2); margin-inline: calc(-1 * var(--sc-2)); }
/* WCAG 2.5.8 again: the phone and the email are actions, not prose. */
.colophon__plate a[href^="tel:"], .colophon__plate a[href^="mailto:"],
.sheet__contact a[href^="tel:"], .sheet__contact a[href^="mailto:"] {
  display: inline-flex; align-items: center; min-height: 44px;
}
/* the social marks run inline with the sentence, sitting on its baseline */
.colophon__social { display: inline; white-space: nowrap; }
.colophon__social svg { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; margin-right: .3em; fill: currentColor; }
.colophon__cta { margin-top: var(--sc-6); }
.colophon__fine { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); font-family: var(--sc-font-display); letter-spacing: .01em; margin-top: var(--sc-5); }
@media (max-width: 860px) { .colophon__nav a { min-height: 48px; } }
@media (max-width: 700px) {
  /* Nine of these links are inline running text, and an inline box is measured
     from the font box, not the line box: at 8px padding they came out 32px
     tall, under the 44px tap gate. 14px padding puts the hit box at 44px.
     Vertical padding on an inline box does not touch layout, so the leading has
     to open with it or two links on consecutive lines overlap: 2.8 gives a 45px
     line pitch against the 44px box. The setting, size and weight are unchanged. */
  .colophon__plate p { line-height: 2.8; }
  .colophon__plate p a:not(.rt-cta) { padding-block: 14px; }
}

/* ------------------------------------------------------- the foot action --
   Below 1024px there is no spine, so the one call to action rides the foot of
   every page: running text with the red rule, 48px tall, never a filled pill,
   above every decorative layer and reachable at every scroll position without
   opening a menu. On the landing page it is the right slot of the foot folio
   (.folio__cta, styled in index.html); on the supporting pages it is the bar
   itself. This block is the shared typography and the bar placement. */
.footcta {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding-inline: var(--sc-4);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-snug); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em;
}
.footcta--bar { display: none; }
@media (max-width: 1023px) {
  .footcta--bar {
    position: fixed; z-index: var(--sc-z-chrome); left: 0; right: 0; bottom: 0;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(241, 241, 238, .94);
    border-top: 1px solid var(--sc-hairline);
    color: #12131A; text-decoration-color: #D41317;
  }
  .footcta--bar:hover, .footcta--bar:focus-visible { color: #D41317; text-decoration-color: currentColor; }
  .footcta--bar:focus-visible { outline: 3px solid #D41317; outline-offset: -3px; }
  .footcta--bar:active { background: #E4E4DF; }
  /* the bar sits over the last of the page, so the plate makes room for it */
  .colophon { padding-bottom: calc(var(--sc-7) + 56px); }
}
@supports (backdrop-filter: blur(6px)) {
  @media (max-width: 1023px) { .footcta--bar { background: rgba(241, 241, 238, .86); backdrop-filter: blur(6px); } }
}
/* both bars carry contrast through a translucent fill today; a reader who has
   asked for less transparency gets the solid ground instead */
@media (prefers-reduced-transparency: reduce) {
  .footcta--bar { background: #F1F1EE !important; backdrop-filter: none !important; }
}

/* --------------------------------------------------- the foot bar's pages --
   Below 1024px the supporting-page header scrolls away and the only fixed
   chrome left carried one WhatsApp link, so from the middle of /work (6.1
   screens at 360) or /services (6.9) there was no way to reach another page
   without scrolling. The landing page pins a CONTENTS slot at every scroll
   position and then took it away the moment the reader followed a link.
   The bar becomes two slots divided by a 1px rule, the same shape as the
   landing page's foot folio: Pages on the left, the call to action on the
   right. The panel is a native [popover], so light dismiss, Escape and focus
   return are the browser's, not ours: no dialog script on six static pages.
   Where popover is not supported the button and the panel are both absent and
   the bar is exactly what it is today. */
/* display: contents so that with no popover support the bar is exactly the
   single fixed anchor it is today, and the button and panel simply do not
   exist. Nothing is ever a hidden focus stop. */
.footbar { display: contents; }
.footbar__btn, .footbar__pages { display: none; }
@supports selector(:popover-open) {
  @media (max-width: 1023px) {
    .footbar {
      position: fixed; z-index: var(--sc-z-chrome); left: 0; right: 0; bottom: 0;
      display: flex; align-items: stretch;
      padding-bottom: env(safe-area-inset-bottom);
      background: rgba(241, 241, 238, .94);
      border-top: 1px solid var(--sc-hairline);
    }
    .footbar .footcta--bar { position: static; display: flex; flex: 1 1 auto; border-top: 0; background: none; padding-bottom: 0; }
    .footbar__btn {
      display: inline-flex; align-items: center;
      flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
      min-height: 48px; padding-inline: var(--sc-4);
      border-right: 1px solid var(--sc-hairline);
      font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
      letter-spacing: var(--sc-track-snug); color: #12131A;
      text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em;
      text-decoration-color: #D41317;
      -webkit-tap-highlight-color: transparent;
    }
    .footbar__btn:hover, .footbar__btn:focus-visible { color: #D41317; text-decoration-color: currentColor; }
    .footbar__btn:focus-visible { outline: 3px solid #D41317; outline-offset: -3px; }
    .footbar__pages:popover-open {
      display: grid; row-gap: var(--sc-4);
      position: fixed; inset: auto 0 0 0; margin: 0; width: auto; max-width: none;
      max-height: 82dvh; overflow-y: auto;
      border: 0; border-top: 3px solid var(--sc-accent);
      padding: var(--sc-5) var(--sc-gutter) calc(var(--sc-5) + 56px + env(safe-area-inset-bottom));
      background: #F1F1EE; color: #12131A;
      box-shadow: 0 -12px 40px -12px rgba(18, 19, 26, .35);
    }
    .footbar__pages::backdrop { background: rgba(18, 19, 26, .55); }
    .footbar__pages nav { display: grid; }
    .footbar__pages nav a {
      display: flex; align-items: center; min-height: 48px;
      border-top: 1px solid var(--sc-hairline); text-decoration: none;
      font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base);
      letter-spacing: var(--sc-track-snug);
    }
    .footbar__pages nav a:last-child { border-bottom: 1px solid var(--sc-hairline); }
    .footbar__pages nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
    .footbar__pages p { font-size: var(--sc-t-sm); line-height: 2.35; max-width: 40ch; }
    .footbar__pages p a { text-decoration: underline; text-underline-offset: .22em; padding-block: .5rem; margin-block: -.5rem; }
    .footbar__pages p a[href^="tel:"], .footbar__pages p a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
    .footbar__close { justify-self: start; min-height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); text-decoration: underline; text-underline-offset: .28em; text-decoration-color: var(--sc-accent); padding: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .footbar__pages { transition: none; } }
}
@supports (backdrop-filter: blur(6px)) {
  @media (max-width: 1023px) { .footbar { background: rgba(241, 241, 238, .86); backdrop-filter: blur(6px); } }
}
@media (prefers-reduced-transparency: reduce) {
  .footbar { background: #F1F1EE !important; backdrop-filter: none !important; }
}