/* ==========================================================================
   ProntaMano — main stylesheet (on top of Bootstrap 5.3)

   1. Font  2. Design tokens  3. Bootstrap overrides  4. Layout helpers
   5. Header / navbar  6. Footer  7. Floating actions  8. Shared components
   9. Page hero and quick facts

   Tokens for app stylesheets: --pm-accent-ink (text on amber tints),
   --pm-control-border (form controls), --pm-focus-color / -width / -offset
   (the focus outline) and --pm-header-offset (sticky navbar height).

   Rules: Bootstrap utilities first, CSS here only for reused things; no
   inline style="" (blocked by the CSP); never remove a focus outline without
   a solid replacement (WCAG 1.4.11, ≥ 3:1).
   ========================================================================== */

/* 1. Font ------------------------------------------------------------------ */
@font-face {
  font-family: "Encode Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/encode-sans/encode-sans-latin-ext-wght-normal.59b54b628af1.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Encode Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/encode-sans/encode-sans-latin-wght-normal.ce65378dde69.woff2") format("woff2-variations");
  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;
}

/* 2. Design tokens ------------------------------------------------------------ */
:root {
  --pm-primary: #0e5e6f;        /* deep teal — trust */
  --pm-primary-rgb: 14, 94, 111;
  --pm-primary-dark: #0a4652;
  --pm-primary-light: #6fb3bf;
  --pm-primary-soft: #e3f1f3;
  --pm-accent: #f2a541;         /* warm amber — calls to action */
  --pm-accent-rgb: 242, 165, 65;
  --pm-accent-dark: #d98a22;
  --pm-accent-soft: #fdf0dc;
  --pm-accent-ink: #7a4a05;     /* dark amber for text on amber tints: 6.6:1 on --pm-accent-soft */
  --pm-ink: #1b2a30;           /* body text */
  --pm-ink-rgb: 27, 42, 48;
  --pm-muted: #5b6b73;
  --pm-surface: #f5f8f8;        /* alternate section background */
  --pm-border: #dfe7ea;         /* decorative borders only (cards, tables, dividers) */
  --pm-control-border: #6b7d85; /* form controls: 4.3:1 on white, 3.7:1 on --pm-primary-soft */
  --pm-white: #ffffff;

  /* Keyboard focus: a solid 3px outline, 2px away from the element, in teal (7.4:1 on
     white). Dark containers switch the colour to amber (3.6:1 on teal, 7.2:1 on ink);
     see "Keyboard focus" below. */
  --pm-focus-color: var(--pm-primary);
  --pm-focus-width: 3px;
  --pm-focus-offset: 2px;

  /* Height of the sticky navbar (about 4.6rem) plus some air. Anchors and sticky
     side columns use it so nothing ends up hidden under the navbar. */
  --pm-header-offset: 5.5rem;

  --pm-radius: 1rem;
  --pm-radius-sm: 0.6rem;
  --pm-shadow-sm: 0 2px 8px rgba(var(--pm-ink-rgb), 0.06);
  --pm-shadow: 0 10px 30px rgba(var(--pm-ink-rgb), 0.08);
  --pm-shadow-lg: 0 20px 50px rgba(var(--pm-ink-rgb), 0.12);
  --pm-transition: 0.2s ease;
  --pm-section-space: clamp(3.5rem, 7vw, 6rem);
}

/* 3. Bootstrap overrides ------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: "Encode Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--pm-ink);
  --bs-body-color-rgb: var(--pm-ink-rgb);
  --bs-primary: var(--pm-primary);
  --bs-primary-rgb: var(--pm-primary-rgb);
  --bs-primary-text-emphasis: var(--pm-primary-dark);
  --bs-primary-bg-subtle: var(--pm-primary-soft);
  --bs-primary-border-subtle: var(--pm-primary-light);
  --bs-secondary-color: var(--pm-muted);
  --bs-link-color: var(--pm-primary);
  --bs-link-color-rgb: var(--pm-primary-rgb);
  --bs-link-hover-color: var(--pm-primary-dark);
  --bs-border-color: var(--pm-border);
  --bs-border-radius: var(--pm-radius-sm);
  --bs-border-radius-lg: var(--pm-radius);
  --bs-focus-ring-color: var(--pm-primary); /* .focus-ring utility: solid, like our outlines */
  --bs-heading-color: var(--pm-ink);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bootstrap gives headings (and the .h1–.h6 classes) weight 500; every heading
   level is bold here, so a title looks the same whichever tag or class it uses. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-4, .display-5 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h5, h6, .h5, .h6 {
  font-weight: 700;
  line-height: 1.25;
}

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-border-radius: 999px;
  /* Bootstrap draws a 50 % transparent ring on focus (about 1.4–2.4:1); the solid
     outline in "Keyboard focus" below replaces it. */
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: 0.8rem; }

.btn-primary {
  --bs-btn-bg: var(--pm-primary);
  --bs-btn-border-color: var(--pm-primary);
  --bs-btn-hover-bg: var(--pm-primary-dark);
  --bs-btn-hover-border-color: var(--pm-primary-dark);
  --bs-btn-active-bg: var(--pm-primary-dark);
  --bs-btn-active-border-color: var(--pm-primary-dark);
  --bs-btn-disabled-bg: var(--pm-primary);
  --bs-btn-disabled-border-color: var(--pm-primary);
  --bs-btn-focus-shadow-rgb: var(--pm-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--pm-primary);
  --bs-btn-border-color: var(--pm-primary);
  --bs-btn-hover-bg: var(--pm-primary);
  --bs-btn-hover-border-color: var(--pm-primary);
  --bs-btn-active-bg: var(--pm-primary-dark);
  --bs-btn-active-border-color: var(--pm-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--pm-primary-rgb);
}
/* Amber call-to-action button (dark text for contrast). */
.btn-accent {
  --bs-btn-color: var(--pm-ink);
  --bs-btn-bg: var(--pm-accent);
  --bs-btn-border-color: var(--pm-accent);
  --bs-btn-hover-color: var(--pm-ink);
  --bs-btn-hover-bg: var(--pm-accent-dark);
  --bs-btn-hover-border-color: var(--pm-accent-dark);
  --bs-btn-active-color: var(--pm-ink);
  --bs-btn-active-bg: var(--pm-accent-dark);
  --bs-btn-active-border-color: var(--pm-accent-dark);
  --bs-btn-focus-shadow-rgb: var(--pm-accent-rgb);
}

.text-accent { color: var(--pm-accent-dark) !important; }
.bg-accent-soft { background-color: var(--pm-accent-soft) !important; }
.bg-primary-soft { background-color: var(--pm-primary-soft) !important; }

/* Form controls. The border is the only thing that shows an empty field, an
   unticked checkbox or radio, so it uses --pm-control-border (≥ 3:1), not the pale
   decorative --pm-border. The .is-invalid and :checked rules below and in Bootstrap
   are more specific, so they still win. */
.form-control,
.form-select {
  padding: 0.7rem 0.9rem;
  border-color: var(--pm-control-border);
}
.form-check-input { border-color: var(--pm-control-border); }
/* Focus: the border turns teal and a solid 2px ring is added (3px in total). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 0.125rem var(--pm-primary);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.125rem var(--bs-form-invalid-border-color);
}
.form-check-input:checked {
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
}
.form-label { font-weight: 600; }

/* Keyboard focus ------------------------------------------------------------------
   One solid outline for every focusable element. Bootstrap removes the outline of
   buttons, nav links, pagination, accordion and close buttons (outline: 0 plus a
   pale shadow) with two-class selectors, so those are listed explicitly; this file
   loads after Bootstrap and wins at equal specificity.
   Elements with tabindex="-1" (main, dialogs, the off-canvas menu) only receive
   focus from scripts and keep their own styles. */
:focus-visible:where(:not([tabindex="-1"])),
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible,
.navbar-toggler:focus-visible {
  outline: var(--pm-focus-width) solid var(--pm-focus-color);
  outline-offset: var(--pm-focus-offset);
  box-shadow: none;
}
/* Items inside menus and accordions: draw the outline inside, so the edge of the
   menu or panel cannot hide it. */
.dropdown-item:focus-visible,
.accordion-button:focus-visible {
  outline: var(--pm-focus-width) solid var(--pm-focus-color);
  outline-offset: calc(var(--pm-focus-width) * -1);
  box-shadow: none;
}
/* Bootstrap also rings these on mouse focus (:focus); the outline above is enough. */
.btn-close:focus,
.navbar-toggler:focus { box-shadow: none; }
/* On dark backgrounds teal is invisible: switch to amber (list any new dark
   container here). */
.pm-topbar,
.pm-footer,
.pm-cta { --pm-focus-color: var(--pm-accent); }

/* 4. Layout helpers ------------------------------------------------------------ */
.pm-section { padding-block: var(--pm-section-space); }
.pm-section--surface { background: var(--pm-surface); }
.pm-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-primary);
  margin-bottom: 0.75rem;
}
.pm-lead { font-size: 1.15rem; color: var(--pm-muted); }
.pm-section-header { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: 3rem; }
/* Balanced line breaks: no single orphan word on the last line of centred titles. */
.pm-section-header h2,
.pm-section-header p,
.pm-cta h2 { text-wrap: balance; }

/* Phones: a .g-5 row's side margins exceed the container padding (sideways scroll),
   so the horizontal gutter shrinks to match it. */
@media (max-width: 575.98px) {
  .g-5,
  .gx-5 { --bs-gutter-x: 1.5rem; }
}

/* The target of an in-page link (#section) must not end up under the sticky navbar.
   :where() keeps this at zero specificity, so app rules can still change it. */
:where([id]) { scroll-margin-top: var(--pm-header-offset); }

.pm-skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--pm-ink);
  color: var(--pm-white);
  border-radius: var(--pm-radius-sm);
}
main:focus { outline: none; }

/* Honeypot anti-spam field: invisible for humans. */
.pm-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pm-breadcrumb { --bs-breadcrumb-divider-color: var(--pm-muted); font-size: 0.9rem; }

/* Long legal / blog text. Every level h2–h6 is sized: Bootstrap's own sizes would
   make h4 larger than h3. */
.pm-prose { font-size: 1.05rem; line-height: 1.75; }
.pm-prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.6rem; }
.pm-prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; }
.pm-prose h4 { margin-top: 1.75rem; margin-bottom: 0.5rem; font-size: 1.1rem; }
.pm-prose h5 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.05rem; }
.pm-prose h6 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1rem; }
.pm-prose img { max-width: 100%; height: auto; border-radius: var(--pm-radius); }
.pm-prose blockquote {
  border-left: 4px solid var(--pm-accent);
  padding: 0.5rem 1.25rem;
  color: var(--pm-muted);
  background: var(--pm-accent-soft);
  border-radius: 0 var(--pm-radius-sm) var(--pm-radius-sm) 0;
}
.pm-prose table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.pm-prose th, .pm-prose td { border: 1px solid var(--pm-border); padding: 0.5rem 0.75rem; }
/* Column alignment of Markdown tables ("|:--|--:|:-:|") arrives as the align attribute
   (inline styles are not allowed by the CSP). Bootstrap's reboot sets text-align on th,
   which beats the attribute, so the three values are applied here. */
.pm-prose [align="left"] { text-align: left; }
.pm-prose [align="center"] { text-align: center; }
.pm-prose [align="right"] { text-align: right; }
.pm-prose dt { margin-top: 1rem; }
/* Footnotes of an article: the block Python-Markdown writes after the text. */
.pm-prose .footnote { margin-top: 2.5rem; font-size: 0.9rem; color: var(--pm-muted); }
.pm-prose .footnote hr { margin-bottom: 1.5rem; }

/* 5. Header / navbar ------------------------------------------------------------ */
.pm-header { background: var(--pm-white); box-shadow: var(--pm-shadow-sm); }
.pm-topbar {
  background: var(--pm-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  padding-block: 0.4rem;
}
.pm-topbar a { color: inherit; text-decoration: none; }
.pm-topbar a:hover { color: var(--pm-white); }
.pm-navbar { padding-block: 0.75rem; }
.pm-logo { height: 40px; width: auto; }
.pm-navbar .nav-link { font-weight: 600; color: var(--pm-ink); border-radius: 999px; padding-inline: 0.9rem !important; }
.pm-navbar .nav-link:hover,
.pm-navbar .nav-link:focus-visible { color: var(--pm-primary); }
.pm-navbar .nav-link.active { color: var(--pm-primary); background: var(--pm-primary-soft); }
.pm-dropdown { min-width: 20rem; padding: 0.5rem; border: 0; box-shadow: var(--pm-shadow-lg); border-radius: var(--pm-radius); }
.pm-dropdown .dropdown-item { border-radius: var(--pm-radius-sm); padding: 0.6rem 0.75rem; white-space: normal; }
.pm-dropdown .dropdown-item:active { background: var(--pm-primary-soft); color: var(--pm-ink); }
.pm-dropdown-icon {
  flex: 0 0 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.6rem;
  background: var(--pm-primary-soft);
  color: var(--pm-primary);
  font-size: 1.1rem;
}
.pm-lang .dropdown-item.active { background: var(--pm-primary); }
/* Phones and tablets: the languages are a row of large pills (at least 44px high)
   in the off-canvas menu. The outline shows they are buttons; the current language
   gets the same soft teal as the active nav link. */
.pm-lang--inline .nav-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pm-control-border);
}
.pm-lang--inline .nav-link.active { border-color: var(--pm-primary); }
@media (min-width: 992px) {
  .pm-navbar .offcanvas { flex-grow: 1; }
}
/* 992–1199px: tighter navbar so the long Italian labels stay on one line
   (!important beats the gap/padding utilities). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pm-navbar .nav-link,
  .pm-navbar .btn { font-size: 0.9375rem; white-space: nowrap; }
  .pm-navbar .navbar-nav { gap: 0.25rem !important; }
  .pm-navbar .navbar-nav .nav-link { padding-inline: 0.5rem !important; }
  .pm-navbar .btn { --bs-btn-padding-x: 1rem; }
  .pm-navbar .btn .bi { display: none; }
  .pm-logo { height: 34px; }
}

/* 6. Footer --------------------------------------------------------------------- */
.pm-footer {
  background: var(--pm-ink);
  color: rgba(255, 255, 255, 0.75);
  padding-top: 4rem;
  margin-top: 0;
}
.pm-footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.pm-footer a:hover { color: var(--pm-accent); }
.pm-footer__title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pm-white);
  margin-bottom: 1rem;
}
.pm-footer__links li,
.pm-footer__contact li { margin-bottom: 0.5rem; }
.pm-footer__address { font-style: normal; margin-bottom: 1rem; }
.pm-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 3rem;
  padding-block: 1.5rem;
  font-size: 0.875rem;
}

/* 7. Floating actions --------------------------------------------------------------- */
.pm-floating {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pm-floating__btn {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--pm-white);
  box-shadow: var(--pm-shadow);
  transition: transform var(--pm-transition);
}
.pm-floating__btn:hover { transform: translateY(-2px); color: var(--pm-white); }
.pm-floating__btn--whatsapp { background: #1f9d55; }
.pm-floating__btn--call { background: var(--pm-primary); }
.pm-floating__btn--top { background: var(--pm-ink); }
.pm-floating__btn[hidden] { display: none; }
/* They float over light pages and over the dark footer, so the focus indicator has
   two colours: a white ring right around the button and an ink outline outside it. */
.pm-floating__btn:focus-visible {
  outline: var(--pm-focus-width) solid var(--pm-ink);
  outline-offset: var(--pm-focus-width);
  box-shadow: 0 0 0 var(--pm-focus-width) var(--pm-white);
}

/* 8. Shared components ------------------------------------------------------------ */
/* Card surface, as tall as its content; cards in a grid row get .h-100 in the template. */
.pm-card {
  background: var(--pm-white);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-sm);
  transition: transform var(--pm-transition), box-shadow var(--pm-transition);
}
.pm-card--hover:hover { transform: translateY(-4px); box-shadow: var(--pm-shadow); }
.pm-icon-badge {
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.9rem;
  background: var(--pm-primary-soft);
  color: var(--pm-primary);
  font-size: 1.35rem;
  flex-shrink: 0;
}
.pm-icon-badge--accent { background: var(--pm-accent-soft); color: var(--pm-accent-dark); }
.pm-illustration { width: 100%; height: auto; }

/* Final call-to-action band (includes/cta_band.html, thank-you pages): one heading
   size whatever its class; buttons of equal width that fill their line. */
.pm-cta {
  background: linear-gradient(120deg, var(--pm-primary-dark), var(--pm-primary));
  color: var(--pm-white);
  border-radius: calc(var(--pm-radius) * 1.5);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.pm-cta h2 {
  color: var(--pm-white);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
}
.pm-cta .btn { min-width: 13rem; }
.pm-cta .row .btn { flex: 1 1 auto; }
/* Dark teal instead of Bootstrap's black text on the white hover/focus/active state. */
.pm-cta .btn-outline-light {
  --bs-btn-hover-color: var(--pm-primary-dark);
  --bs-btn-active-color: var(--pm-primary-dark);
}
@media (max-width: 575.98px) {
  /* Full-width buttons; less padding on large buttons so long labels stay on one line. */
  .pm-cta { padding: 1.5rem 1.25rem; }
  .pm-cta .btn { width: 100%; min-width: 0; }
  .btn-lg { --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1rem; }
}

/* Timeline of numbered cards (the quote thank-you page).
   <ol class="pm-timeline"><li class="pm-timeline__item"><span class="pm-icon-badge">…</span><h3>…</h3><p>…</p></li></ol> */
.pm-timeline {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pm-timeline;
}
@media (min-width: 768px) { .pm-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pm-timeline { grid-template-columns: repeat(4, 1fr); } }
.pm-timeline__item {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  background: var(--pm-white);
  box-shadow: var(--pm-shadow-sm);
  counter-increment: pm-timeline;
}
.pm-timeline__item::before {
  content: counter(pm-timeline);
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  color: var(--pm-border);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}
.pm-timeline__item .pm-icon-badge { margin-bottom: 1rem; }
.pm-timeline__item p { margin: 0; color: var(--pm-muted); }

/* 9. Page hero and quick facts ------------------------------------------------------
   Markup: templates/includes/page_hero.html. The band (::before) ends --pm-hero-overlap
   above the section's bottom, so the quick-facts panel, the section's last element,
   hangs across its lower edge without negative margins. The blog heroes reuse the
   band, padding and title classes. */
.pm-page-hero {
  --pm-hero-overlap: 0px;
  --pm-hero-art-w: clamp(14rem, 22vw, 18.5rem);   /* column of the plate */
  --pm-hero-art-h: 13rem;                          /* plate height (4:3, so ≤ 17.33rem wide) */
  --pm-hero-aside-w: clamp(19rem, 26vw, 23rem);   /* column of a --facts-aside panel */
  --pm-hero-lead: #44555d;                         /* 6.7:1 on --pm-primary-soft */
  position: relative;
  isolation: isolate; /* keeps the band behind the content */
  padding-block: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 4vw, 2.75rem);
}
.pm-page-hero::before,
.pm-page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 var(--pm-hero-overlap);
  pointer-events: none;
}
/* The band: soft teal to surface, with a white glow behind the plate. */
.pm-page-hero::before {
  background:
    radial-gradient(38rem 20rem at 86% 38%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(115deg, var(--pm-primary-soft) 0%, #ecf5f6 48%, var(--pm-surface) 100%);
  box-shadow: inset 0 -1px 0 rgba(var(--pm-primary-rgb), 0.08);
}
/* A fine dot grid on the right, fading out towards the text. */
.pm-page-hero::after {
  left: 45%;
  background-image: radial-gradient(rgba(var(--pm-primary-rgb), 0.17) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: right 9px top 9px;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 85%);
  mask-image: linear-gradient(to left, #000 10%, transparent 85%);
}
.pm-page-hero--has-facts {
  --pm-hero-overlap: 2.75rem;
  padding-bottom: 0;
}
.pm-page-hero .pm-breadcrumb { margin-bottom: 0; }

/* Layout: text | plate (≥ md; service pages ≥ lg) or text | facts (--facts-aside, ≥ lg);
   one column below. */
.pm-page-hero__layout {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
}
@media (min-width: 768px) {
  .pm-page-hero__layout { grid-template-columns: minmax(0, 1fr) var(--pm-hero-art-w); }
  .pm-page-hero--no-art .pm-page-hero__layout,
  .pm-page-hero--service .pm-page-hero__layout { grid-template-columns: minmax(0, 1fr); }
}
/* Tablets: the plate column has its minimum width, so a fixed gap keeps the text column
   (and the two buttons under the lead) at the same width across the range. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pm-page-hero__layout { column-gap: 2rem; }
}
@media (min-width: 992px) {
  .pm-page-hero--service .pm-page-hero__layout { grid-template-columns: minmax(0, 1fr) var(--pm-hero-art-w); }
  .pm-page-hero--facts-aside .pm-page-hero__layout { grid-template-columns: minmax(0, 1fr) var(--pm-hero-aside-w); }
}

/* Text. */
.pm-page-hero__eyebrow {
  display: flex; /* a block, not a shrink-to-fit inline-flex: WebKit clips those with gap */
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.pm-page-hero__eyebrow::before {
  content: "";
  flex: 0 0 1.75rem;
  height: 3px;
  border-radius: 3px;
  background: var(--pm-accent);
}
.pm-page-hero__eyebrow .bi { flex-shrink: 0; font-size: 1.1em; }
/* Same weight and tracking as every heading; the size stays below the home hero's h1
   (.pm-home-hero h1 in pages/css/home.css) at every width. */
.pm-page-hero__title {
  margin-bottom: 0;
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}
.pm-page-hero__tagline {
  margin: 0.5rem 0 0;
  font-size: clamp(1.1rem, 0.9rem + 0.35vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--pm-primary-dark);
  text-wrap: balance;
}
.pm-page-hero__body { margin-top: 0.9rem; }
.pm-page-hero__lead {
  max-width: 41rem;
  margin-bottom: 0;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--pm-hero-lead);
  text-wrap: pretty;
}
.pm-page-hero__extra { margin-top: 1.5rem; }

/* Buttons: under the lead; on phones and tablets they grow to share their row. On tablets
   they are a little more compact, so both fit on one row next to the plate. */
.pm-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
@media (min-width: 576px) {
  .pm-page-hero__actions .btn-lg {
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1.075rem;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .pm-page-hero__actions .btn-lg {
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1rem;
  }
}
@media (max-width: 991.98px) {
  .pm-page-hero__actions .btn { flex: 1 1 auto; }
}
/* ≥ 1400px: the buttons become a stacked column between the text and the plate (next to
   the lead only on service pages, so long service names keep the full width). */
@media (min-width: 1400px) {
  .pm-page-hero__text--actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head actions" "body actions";
    align-items: center;
    column-gap: clamp(2rem, 3vw, 3rem);
  }
  .pm-page-hero--service .pm-page-hero__text--actions { grid-template-areas: "head head" "body actions"; }
  .pm-page-hero__text--actions > .pm-page-hero__head { grid-area: head; align-self: end; }
  .pm-page-hero__text--actions > .pm-page-hero__body { grid-area: body; align-self: start; }
  .pm-page-hero--service .pm-page-hero__text--actions > .pm-page-hero__body { align-self: center; }
  .pm-page-hero__text--actions > .pm-page-hero__actions {
    grid-area: actions;
    flex-direction: column;
    margin-top: 0;
    padding-left: clamp(2rem, 3vw, 3rem);
    border-left: 1px solid rgba(var(--pm-primary-rgb), 0.16);
  }
  .pm-page-hero__text--actions > .pm-page-hero__actions .btn { width: 100%; }
}

/* The illustration: a small white "plate" with an amber layer offset up and to the right
   ("stacked paper"). Tablets and up; service pages from 992px, where the long summary
   has room next to it. */
.pm-page-hero__art { display: none; }
@media (min-width: 768px) {
  .pm-page-hero__art {
    display: block;
    position: relative;
    isolation: isolate;
    justify-self: end;
    width: calc(100% - 0.75rem);
    max-width: calc(var(--pm-hero-art-h) * 4 / 3);
    margin: 0.75rem 0.75rem 0 0; /* room for the offset layer */
  }
  .pm-page-hero__art::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -0.75rem -0.75rem 0.75rem 0.75rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, var(--pm-accent-soft), rgba(var(--pm-accent-rgb), 0.28));
  }
  .pm-page-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain; /* drawings that are not 4:3 are not cropped */
    border-radius: 1.5rem;
    background: var(--pm-white);
    box-shadow:
      0 0 0 1px rgba(var(--pm-primary-rgb), 0.06),
      0 24px 48px -28px rgba(var(--pm-ink-rgb), 0.4);
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .pm-page-hero--service .pm-page-hero__art { display: none; }
}

/* Service pages: a bigger plate, a smaller lead and a tighter rhythm. */
.pm-page-hero--service {
  --pm-hero-art-w: clamp(16rem, 24vw, 20rem);
  --pm-hero-art-h: 15rem;
}
.pm-page-hero--service .pm-page-hero__layout { margin-top: 1rem; }
.pm-page-hero--service .pm-page-hero__eyebrow { margin-bottom: 0.6rem; }
.pm-page-hero--service .pm-page-hero__title { line-height: 1.02; }
/* 992–1399px: fixed columns and a smaller title, so long service names stay on one line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pm-page-hero--service .pm-page-hero__title { font-size: 2.4rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pm-page-hero--service { --pm-hero-art-w: 18rem; }
  .pm-page-hero--service .pm-page-hero__layout { column-gap: 3rem; }
  .pm-page-hero--service .pm-page-hero__title { font-size: 2.75rem; }
}
.pm-page-hero--service .pm-page-hero__tagline { line-height: 1.25; }
.pm-page-hero--service .pm-page-hero__body { margin-top: 0.6rem; }
.pm-page-hero--service .pm-page-hero__lead {
  max-width: 44rem;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
}
.pm-page-hero--service .pm-page-hero__actions { margin-top: 1.1rem; }
.pm-page-hero--service .pm-quickfacts { margin-top: 1rem; }

/* --facts-aside: the panel takes the plate's place; under the text on tablets, a column
   from 992px, left out on phones. */
.pm-page-hero__aside .pm-quickfacts { margin-top: 0; }
@media (max-width: 575.98px) {
  .pm-page-hero__aside { display: none; }
}
@media (min-width: 992px) {
  .pm-page-hero__aside .pm-quickfacts__item { gap: 0.85rem; padding: 0.75rem 1.1rem; }
  .pm-page-hero__aside .pm-quickfacts__icon { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
}
.pm-quickfacts-title {
  margin-bottom: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pm-ink);
}

/* Quick facts: one white panel; the 1px gap shows the background as dividers. Any number
   of cells wraps evenly (flex); --2, --3 and --4 get tuned grids. */
.pm-quickfacts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: clamp(1.25rem, 2vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--pm-border);
  border: 1px solid var(--pm-border);
  border-radius: 1.25rem;
  box-shadow:
    0 1px 2px rgba(var(--pm-ink-rgb), 0.04),
    0 18px 40px -20px rgba(var(--pm-ink-rgb), 0.22);
  overflow: hidden;
}
.pm-quickfacts--2,
.pm-quickfacts--4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
  .pm-quickfacts--2,
  .pm-quickfacts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .pm-quickfacts--3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pm-quickfacts--3 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .pm-quickfacts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-quickfacts--3 > :last-child { grid-column: auto; }
  .pm-quickfacts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pm-quickfacts__item {
  position: relative;
  flex: 1 1 15rem; /* the flex fallback: as many 15rem+ cells per row as fit */
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 1.15rem;
  background: var(--pm-white);
  transition: background-color var(--pm-transition);
}
@media (min-width: 992px) {
  .pm-quickfacts__item { gap: 1rem; padding: 1.15rem 1.4rem; }
}
/* 1200–1399px: the cells share a narrower container. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pm-quickfacts__item { padding-block: 1rem; }
  .pm-quickfacts--4 .pm-quickfacts__item { gap: 0.75rem; padding: 0.9rem 1rem; }
  .pm-quickfacts--4 .pm-quickfacts__icon { width: 2.5rem; height: 2.5rem; }
  .pm-quickfacts--4 .pm-quickfacts__title { font-size: 0.95rem; }
}
.pm-quickfacts__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  background: var(--pm-primary-soft);
  color: var(--pm-primary);
  font-size: 1.2rem;
}
.pm-quickfacts__icon--accent { background: var(--pm-accent-soft); color: var(--pm-accent-dark); }
.pm-quickfacts__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.pm-quickfacts__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-muted);
}
.pm-quickfacts__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pm-ink);
  overflow-wrap: break-word;
  text-wrap: balance;
}
a.pm-quickfacts__title { color: var(--pm-primary-dark); text-decoration: none; }
.pm-quickfacts__text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pm-muted);
  text-wrap: balance; /* no single word on the last line */
}
.pm-quickfacts__arrow {
  margin-left: auto;
  padding-left: 0.25rem;
  color: var(--pm-primary);
}
.pm-quickfacts__arrow .bi { display: block; transition: transform var(--pm-transition); }
/* Linked cells: the whole cell is the target (.stretched-link). */
.pm-quickfacts__item--link:hover { background: #f7fbfb; }
.pm-quickfacts__item--link:hover a.pm-quickfacts__title { color: var(--pm-primary); text-decoration: underline; }
.pm-quickfacts__item--link:hover .bi-arrow-right { transform: translateX(3px); }
.pm-quickfacts__item--link:hover .bi-arrow-down { transform: translateY(3px); }
/* Keyboard focus: the ring goes around the whole cell (drawn inside it, so the panel's
   rounded clip cannot hide it). Only where :has() works; elsewhere the link keeps its
   own outline. */
@supports selector(:has(a)) {
  .pm-quickfacts__item a:focus-visible { outline: none; }
  .pm-quickfacts__item:has(a:focus-visible) {
    outline: var(--pm-focus-width) solid var(--pm-focus-color);
    outline-offset: calc(var(--pm-focus-width) * -1);
  }
}

/* Less space above the first section: the panel already separates the two. */
.pm-page-hero--has-facts + .pm-section,
.pm-page-hero--has-facts + script + .pm-section {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* Phones: the call button shrinks to a round icon (the number stays in its accessible
   name); --compact-xs keeps icon + title only; --facts-from-sm panels are left out. */
@media (max-width: 575.98px) {
  .pm-page-hero--has-facts { --pm-hero-overlap: 2rem; }
  .pm-page-hero--facts-from-sm {
    --pm-hero-overlap: 0px;
    padding-bottom: 2rem;
  }
  .pm-page-hero--facts-from-sm .pm-quickfacts { display: none; }
  .pm-page-hero::after { left: 30%; }
  .pm-page-hero__actions .pm-page-hero__call {
    flex: 0 0 3.25rem;
    width: 3.25rem;
    padding-inline: 0;
  }
  .pm-page-hero__call .bi { font-size: 1.15rem; }
  .pm-page-hero__call-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
  .pm-quickfacts { border-radius: 1rem; }
  .pm-quickfacts__item { padding: 0.8rem 1rem; }
  .pm-quickfacts__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    font-size: 1.05rem;
  }
  .pm-quickfacts--compact-xs .pm-quickfacts__text { display: none; }
  .pm-quickfacts--compact-xs .pm-quickfacts__item { gap: 0.6rem; padding: 0.75rem 0.8rem; }
  .pm-quickfacts--compact-xs .pm-quickfacts__icon { width: 2.1rem; height: 2.1rem; font-size: 0.95rem; }
  .pm-quickfacts--compact-xs .pm-quickfacts__title { font-size: 0.9375rem; line-height: 1.25; }
  .pm-quickfacts--compact-xs .pm-quickfacts__arrow { padding-left: 0; }
}
@media (min-width: 360px) and (max-width: 575.98px) {
  .pm-quickfacts--compact-xs.pm-quickfacts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .pm-page-hero::before,
  .pm-page-hero::after,
  .pm-page-hero__art,
  .pm-page-hero__aside,
  .pm-page-hero__actions,
  .pm-quickfacts__arrow { display: none !important; }
  .pm-page-hero { padding: 0 0 1rem; }
  .pm-quickfacts { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}