/* =====================================================================
   bollarditaly.com — one stylesheet.
   The design keeps the old Tempera theme's identity: dark band #171717,
   teal #1693A5 + red #D6341D accents, Yanone Kaffeesatz titles, Ubuntu
   text, Open Sans light headings. Colours ONLY from the tokens below.
   ===================================================================== */

@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ubuntu-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/ubuntu-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Yanone Kaffeesatz"; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("/assets/fonts/yanone-kaffeesatz-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/assets/fonts/open-sans-latin-var.woff2") format("woff2"); }

:root {
  --ink: #2b2b2b;
  --ink-soft: #555;
  --muted: #6b6b6b;
  --line: #e3e2e2;
  --bg: #fff;
  --bg-soft: #f5f5f4;
  --dark: #171717;
  --dark-2: #232323;
  --dark-line: #333;
  --on-dark: #e9e9e9;
  --on-dark-soft: #b5b5b5;
  --teal: #1693a5;          /* the old accent: large text, lines, backgrounds */
  --teal-ink: #0f6f7d;      /* the same hue dark enough for small text on white (5.6:1) */
  --teal-light: #5fc6d5;    /* on the dark band */
  --red: #d6341d;           /* the old hover accent */
  --red-dark: #b02815;

  --font-text: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Yanone Kaffeesatz", "Arial Narrow", sans-serif-condensed, sans-serif;
  --font-head: "Open Sans", system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 4px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .07);
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.7 var(--font-text); }
img { max-width: 100%; height: auto; }
a { color: var(--teal-ink); text-underline-offset: .15em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
abbr[title] { text-decoration: none; }
main { display: block; }
main:focus { outline: none; }

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

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: .6rem 1rem; background: var(--bg); color: var(--ink); border-radius: var(--radius); }
.skip-link:focus { top: 8px; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: .65rem 1.3rem; border: 2px solid var(--dark); border-radius: var(--radius);
  background: var(--dark); color: #fff; font: 700 .9rem/1.2 var(--font-text); letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn--download::before {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.1em;
  background: currentColor; -webkit-mask: url("/assets/img/download.svg") center / contain no-repeat; mask: url("/assets/img/download.svg") center / contain no-repeat;
}
.btn--buy { background: var(--red); border-color: var(--red); }
.btn--buy:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-note { display: inline-block; margin-left: .4rem; color: var(--muted); font-size: .85rem; }

/* ------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--dark); color: var(--on-dark); }
.topbar { background: #000; font-size: .8rem; border-bottom: 1px solid rgb(255 255 255 / .2); }   /* a hairline between the top bar and the photo band */
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.social, .langs ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.social a, .langs a { display: flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; color: var(--on-dark-soft); text-decoration: none; }
.social a:hover, .langs a:hover { color: #fff; }
.langs a { padding-inline: .45rem; font-weight: 700; letter-spacing: .08em; }
.langs a[aria-current="true"] { color: #fff; box-shadow: inset 0 -2px 0 var(--teal); }
.icon { display: block; }

/* The old site's header photo (bollards at night on a quay), without its baked-in text, as the
   band behind brand and menu. Anchored at the TOP (PM, 2026-11-13): on wide screens the band
   is shorter than the photo and shows its upper part, the row of bollard heads. On a phone
   the whole height fits. The gradient keeps the brand and the menu readable on any crop. */
.masthead {
  border-bottom: 3px solid var(--teal);
  background-color: var(--dark);
  background-image: linear-gradient(90deg, rgb(10 10 10 / .78) 0%, rgb(10 10 10 / .35) 38%, rgb(10 10 10 / .35) 62%, rgb(10 10 10 / .7) 100%),
                    url("/assets/img/header-night-1200.webp");
  background-position: center, center top;
  background-size: cover, cover;
  background-repeat: no-repeat;
}
@media (min-width: 1200px), (min-width: 700px) and (min-resolution: 2dppx) {
  .masthead { background-image: linear-gradient(90deg, rgb(10 10 10 / .78) 0%, rgb(10 10 10 / .35) 38%, rgb(10 10 10 / .35) 62%, rgb(10 10 10 / .7) 100%), url("/assets/img/header-night-1800.webp"); }
}
@media (min-width: 1800px), (min-width: 1200px) and (min-resolution: 2dppx) {
  .masthead { background-image: linear-gradient(90deg, rgb(10 10 10 / .78) 0%, rgb(10 10 10 / .35) 38%, rgb(10 10 10 / .35) 62%, rgb(10 10 10 / .7) 100%), url("/assets/img/header-night-2400.webp"); }
}
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 112px; }
.brand__name, .site-nav a { text-shadow: 0 1px 3px rgb(0 0 0 / .6); }

/* Desktop: the photo band is 112 px tall, too much to keep on screen while reading — the header
   scrolls away. On a phone it is 64 px and stays (sticky), with the menu button. */
@media (min-width: 861px) { .site-header { position: relative; } }
.brand { display: flex; flex-direction: column; color: #fff; text-decoration: none; line-height: 1; margin-right: auto; }
.brand:hover { color: #fff; }
.brand__name { font: 400 clamp(1.9rem, 4.6vw, 2.6rem)/1 var(--font-title); letter-spacing: .01em; }
.brand__by { margin-top: .2rem; color: var(--teal-light); font: 700 .7rem/1 var(--font-text); letter-spacing: .28em; text-transform: uppercase; }

.site-nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: block; padding: .7rem .85rem; color: var(--on-dark); font: 400 .85rem/1.2 var(--font-text);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--red); }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--teal); }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .masthead__inner { min-height: 64px; flex-wrap: wrap; gap: 0; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .8rem;
    border: 1px solid var(--dark-line); border-radius: var(--radius); background: transparent; color: #fff;
    font: 700 .8rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { display: none; flex-basis: 100%; padding-bottom: .75rem; }
  .site-header.nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--dark-line); font-size: .95rem; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--dark-line); box-shadow: inset 3px 0 0 var(--teal); padding-left: .75rem; }
}

/* ------------------------------------------------------------- hero (home) */
/* The photo stays clean — the bollards are the subject — and the facts sit in a dark band under
   it: counter and title on the left (on the brand's edge), text, link and slim controls on the right. All slides share
   one grid cell, so the band takes the height of the longest text and nothing jumps. */
.hero { position: relative; background: var(--dark); color: #fff; }
.hero__track { display: grid; }
.hero__slide { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.hero__img { display: block; width: 100%; aspect-ratio: 3 / 1; max-height: 540px; object-fit: cover; object-position: 50% 15%; }   /* wide screens crop the reflections, never the domes */

.hero__caption {
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  flex: 1; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0 clamp(1.5rem, 3.5vw, 3rem);
  align-items: stretch; padding: 1.35rem var(--edge) 1.4rem;
  border-top: 3px solid var(--teal);
}
.hero__count { margin: 0 0 .2rem; color: var(--teal-light); font: 700 .72rem/1 var(--font-text); letter-spacing: .2em; }
.hero__count span { color: var(--on-dark-soft); font-weight: 400; }
.hero__title { margin: 0; font: 400 clamp(1.6rem, 2.4vw, 2.05rem)/1.05 var(--font-title); letter-spacing: .01em; }
/* left: counter + title; right, after a rule: the text, then one row with the link and (absolute,
   at the band's right end) the controls — the link is pushed to the bottom of the band, so it
   always shares its row with the controls, whichever slide is the longest. */
.hero__body { display: flex; flex-direction: column; align-items: flex-start; padding: .95rem 0 0 clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--dark-line); }
.hero__text { margin: 0 0 .5rem; max-width: 48em; color: var(--on-dark); font-size: .95rem; line-height: 1.6; }
.hero__link { margin-top: auto; color: var(--teal-light); font: 700 .8rem/32px var(--font-text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.hero__link span { display: inline-block; transition: transform .2s; }
.hero__link:hover { color: #fff; }
.hero__link:hover span { transform: translateX(3px); }

.hero__controls {
  position: absolute; right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); bottom: 1.4rem;
  display: flex; align-items: center; gap: .2rem;
}
.hero__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgb(255 255 255 / .22); border-radius: var(--radius); background: transparent; color: var(--on-dark); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hero__btn:hover { border-color: var(--teal-light); color: #fff; }
.hero__chev { width: 8px; height: 8px; margin-left: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.hero__next .hero__chev { margin: 0 3px 0 0; transform: rotate(-135deg); }
.hero__dots { display: flex; margin-inline: .2rem; }
.hero__dot { position: relative; width: 26px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero__dot::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgb(255 255 255 / .3); transition: background .2s; }
.hero__dot:hover::before { background: rgb(255 255 255 / .6); }
.hero__dot[aria-current="true"]::before { background: var(--teal-light); }
.hero__pause { margin-left: .35rem; }
.hero__pause-icon { display: block; width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.hero__pause.is-paused .hero__pause-icon { width: 0; height: 0; margin-left: 2px; border: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; }

/* Narrower screens: one column, the controls under the text, aligned with it. */
@media (max-width: 1000px) {
  .hero__caption { grid-template-columns: 1fr; padding: 1rem var(--edge) 3.5rem; }
  .hero__body { padding: .3rem 0 0; border-left: 0; }
  .hero__controls { left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); right: auto; bottom: .85rem; margin-left: -6px; }
}
@media (max-width: 760px) {
  .hero__img { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------- home intro, cards, strip */
.intro { padding-block: clamp(2.5rem, 6vw, 4rem); }
.intro__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.intro__title { margin: 0 0 .75rem; font: 400 clamp(2.4rem, 6vw, 3.6rem)/1 var(--font-title); color: var(--dark); }
.intro__by { display: block; margin-top: .4rem; color: var(--teal-ink); font: 700 .8rem/1 var(--font-text); letter-spacing: .28em; text-transform: uppercase; }
.intro__lead { margin: 0; color: var(--ink-soft); font: 300 1.2rem/1.6 var(--font-head); max-width: 34em; }
.intro__features { padding: 1.5rem 1.75rem; background: var(--bg-soft); border-top: 4px solid var(--teal); border-radius: 0 0 var(--radius) var(--radius); }
.intro__features .ticks { columns: 2; column-gap: 1.5rem; }
@media (max-width: 860px) { .intro__inner { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .intro__features .ticks { columns: 1; } }

.cards { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(0 0 0 / .06), 0 14px 30px rgb(0 0 0 / .1); }
.card__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.25rem; }
.card__title { margin: 0 0 .5rem; font: 400 1.8rem/1.05 var(--font-title); }
.card__title a { color: var(--teal-ink); text-decoration: none; }
.card__title a:hover { color: var(--red); }
.card__body p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .95rem; }
.card__more { margin-top: auto !important; margin-bottom: 0 !important; }
.card__more a { font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
@media (max-width: 760px) { .cards__grid { grid-template-columns: 1fr; } }

.about-strip { background: var(--dark); color: var(--on-dark); padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.about-strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.about-strip h2 { margin: 0 0 .6rem; color: #fff; font: 400 1.9rem/1.1 var(--font-title); }
.about-strip p { margin: 0 0 .8rem; font-size: .95rem; }
/* on the dark strip a dark button would vanish: red, the old site's second accent */
.about-strip .btn { background: var(--red); border-color: var(--red); }
.about-strip .btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.about-strip a:not(.btn) { color: var(--teal-light); }
.about-strip a:not(.btn):hover { color: #fff; }
.about-strip strong { color: #fff; }
.about-strip__cta { padding-left: clamp(0px, 3vw, 2rem); border-left: 1px solid var(--dark-line); }
.about-strip__phone { color: var(--on-dark-soft); }
@media (max-width: 860px) { .about-strip__grid { grid-template-columns: 1fr; } .about-strip__cta { border-left: 0; padding-left: 0; } }

/* ------------------------------------------------------------- inner pages */
.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: 1.25rem 1.5rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .35rem; padding: 0; list-style: none; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-right: .4rem; }
.breadcrumb a { color: var(--teal-ink); text-decoration: none; }
.page-head__title { margin: 0; font: 400 clamp(2.4rem, 6vw, 3.4rem)/1 var(--font-title); color: var(--dark); text-transform: uppercase; letter-spacing: .01em; }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem); }
.page-grid--single { grid-template-columns: minmax(0, 780px); }
@media (max-width: 900px) { .page-grid { grid-template-columns: 1fr; } }

/* body text from the database */
.prose { min-width: 0; }
.prose::after { content: ""; display: table; clear: both; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 1.1em; }
.prose h2 { margin: 1.6em 0 .5em; font: 400 1.5rem/1.25 var(--font-head); color: var(--dark); }
.prose strong { color: var(--dark); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--teal); }
.prose img.align-left { float: left; margin: .3rem 1.5rem 1rem 0; }
.prose img.align-right { float: right; margin: .3rem 0 1rem 1.5rem; }
.prose .zoom { display: inline; }
.prose .zoom img { cursor: zoom-in; }
.fig-wide { clear: both; margin: 1.5rem 0; }
.fig-wide img { display: block; border-radius: var(--radius); }
@media (max-width: 600px) {
  .prose img.align-left, .prose img.align-right { float: none; display: block; margin: .5rem auto 1rem; }
}

/* the data sheet, rebuilt from a picture into a table */
.datasheet { clear: both; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; align-items: start; margin: 1.75rem 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 130px; }
.datasheet__drawing { margin: 0; }
.datasheet__drawing img { display: block; width: 100%; }
.datasheet__table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 !important; }
.datasheet__table caption { text-align: left; padding-bottom: .5rem; font: 400 1.9rem/1 var(--font-title); color: var(--dark); letter-spacing: .03em; text-transform: uppercase; }
.datasheet__table th, .datasheet__table td { padding: .45rem .6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.datasheet__table tr:nth-child(odd) { background: var(--bg-soft); }
.datasheet__table th { font-weight: 400; color: var(--ink-soft); width: 55%; }
.datasheet__table td { font-weight: 700; color: var(--dark); }
@media (max-width: 700px) {
  .datasheet { grid-template-columns: 1fr; padding: 1rem; }
  .datasheet__drawing { max-width: 260px; margin-inline: auto; }
  .datasheet__table th { width: 50%; }
}
@media (max-width: 520px) {
  /* label above value: two columns of long words do not fit a phone */
  .datasheet { padding: .75rem; margin-inline: calc(var(--gutter) * -.5); }
  .datasheet__table, .datasheet__table tbody, .datasheet__table tr, .datasheet__table th, .datasheet__table td { display: block; width: auto; }
  .datasheet__table th { padding-bottom: 0; border-bottom: 0; font-size: .82rem; }
  .datasheet__table td { padding-top: .1rem; overflow-wrap: anywhere; }
}

.prose--contact p { font-size: 1.02rem; }
.prose--legal h2 { font-size: 1.3rem; }
.legal-updated { color: var(--muted); font-size: .9rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-table th, .legal-table td { padding: .5rem .6rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table thead th { background: var(--bg-soft); }

/* sidebar */
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; font-size: .93rem; }
.side-block { padding: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
.side-block__title { margin: 0 0 .6rem; padding: .45rem .75rem; background: var(--bg-soft); font: 400 1.15rem/1.3 var(--font-head); color: var(--dark); }
.side-block p { margin: 0 0 .8rem; }
.side-block p:last-child { margin-bottom: 0; }
.side-block .btn { width: 100%; text-align: center; }
.side-block .btn-note { display: block; margin: .3rem 0 0; text-align: center; }

.ticks { margin: 0 0 1rem; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 1.5rem; margin-bottom: .3rem; break-inside: avoid; }
.ticks li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .7rem; height: .4rem; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* ------------------------------------------------------------- footer */
.site-footer { background: var(--dark-2); color: var(--on-dark-soft); font-size: .9rem; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--teal-light); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; padding-block: 2.75rem 2rem; }
.footer__logo { display: block; width: 180px; height: auto; margin-bottom: 1.1rem; }
.footer__company p { margin: 0; }
.footer__company strong { color: #fff; }
.footer__title { margin: 0 0 .7rem; color: #fff; font: 400 1.6rem/1 var(--font-title); }
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li { margin-bottom: .35rem; }
.footer__bottom { background: #111; font-size: .78rem; }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: 1rem; }
.footer__copy { margin: 0; letter-spacing: .03em; }
.footer__credit { margin: 0; }
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- contact form */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* honeypots */
.contact-form { clear: both; margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg-soft); border-top: 4px solid var(--teal); border-radius: 0 0 var(--radius) var(--radius); scroll-margin-top: 120px; }
.contact-form h2 { margin-top: 0; font: 400 2.2rem/1.05 var(--font-title); color: var(--dark); }
/* Partnership page: the partners list, and the line saying what the form is for */
.prose .partners { padding-left: 1.2rem; }
.prose .partners li { margin-bottom: .5em; }
.form__intro { margin: -.25rem 0 1rem !important; color: var(--ink-soft); }
.form__note { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .3rem; font-weight: 700; font-size: .92rem; color: var(--dark); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  display: block; width: 100%; padding: .65rem .75rem; border: 1px solid #b9b9b9; border-radius: var(--radius);
  background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--font-text);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { border-color: var(--teal-ink); outline: 3px solid rgb(22 147 165 / .3); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--red); }
.field--captcha input { max-width: 7rem; }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.field--check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--teal-ink); }
.field--check label { font-weight: 400; margin: 0; }
.field--check .field__error { grid-column: 2; }
.field__hint { margin: .3rem 0 0 !important; color: var(--muted); font-size: .85rem; }
.field__error { margin: .3rem 0 0 !important; color: var(--red-dark); font-weight: 700; font-size: .88rem; }
.btn--submit { min-width: 14rem; cursor: pointer; }
.notice { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: var(--radius); border-left: 4px solid; }
.notice p, .notice ul { margin: 0 0 .4rem !important; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0 !important; }
.notice--ok { background: #e8f5f2; border-color: #1c7c54; color: #134d35; }
.notice--err { background: #fdecea; border-color: var(--red-dark); color: #7a1b0e; }
.notice--err a { color: #7a1b0e; }

/* privacy notice in a dialog (playbook: the consent link never navigates away from a form) */
.pdialog { width: min(760px, calc(100% - 2rem)); max-height: min(85vh, 900px); padding: 0; border: 0; border-radius: var(--radius); box-shadow: 0 20px 60px rgb(0 0 0 / .35); color: var(--ink); }
.pdialog[open] { display: flex; flex-direction: column; }
.pdialog::backdrop { background: rgb(0 0 0 / .55); }
.pdialog__head, .pdialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; background: var(--bg-soft); }
.pdialog__head { border-bottom: 1px solid var(--line); }
.pdialog__foot { border-top: 1px solid var(--line); }
.pdialog__title { margin: 0; font: 400 1.7rem/1 var(--font-title); color: var(--dark); }
.pdialog__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink); }
.pdialog__close:hover { background: var(--line); }
.pdialog__body { overflow-y: auto; padding: 1rem 1.25rem; font-size: .93rem; }
@media (max-width: 760px) { .pdialog { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; } }
html.dialog-open { overflow: hidden; }

/* ------------------------------------------------------------- error page */
.error-page { padding-block: 4rem; }