/* ---- tokens.css ---- */
/* ============================================================================
   TOKENS — McDonell-Levert Insurance

   Every value here was measured on the original site, or read from Porto's own
   published variables at /wp-content/uploads/porto_styles/theme_css_vars.css.
   See .scrape/DESIGN-NOTES.md for the measurements and where each came from.

   Type and spacing use clamp(), from a small phone (~360px) up. The type
   clamps reach their maximum at 576px (see "THE ORIGINAL'S TYPE IS NOT
   FLUID" below); the spacing clamps reach theirs between 858px (--gap) and
   1157px (--band-y), computed from their values. Porto stepped its type down
   by a 0.9286 factor at 575px; the clamp() endpoints below reproduce that
   step's start and end values without the jump.
   ========================================================================= */

:root {
  /* ---- brand ----------------------------------------------------------
     --porto-primary-color. Buttons, links, role labels. */
  --blue: #1947c4;
  --blue-dark: #173fae;        /* --porto-primary-dark-5: link hover, the form button's hover */
  --blue-darker: #143797;      /* --porto-primary-dark-10: the blue buttons' bottom edge */
  --blue-light: #1f54e3;       /* --porto-primary-light-7: the blue buttons' hover */
  --blue-lighter: #2c5ee5;     /* --porto-primary-light-10: a hovered blue button's border */
  /* The CTA band above the footer and the current-page nav link use #0047bb,
     which is NOT the brand blue: 25 units less red and 9 less blue than
     #1947c4. Kept as measured rather than quietly unified. */
  --blue-band: #0047bb;
  /* The hero tagline is a third blue — #1e73be, lighter and greener than the
     brand. Measured, not assumed: it is NOT --blue. */
  --blue-hero: #1e73be;

  /* ---- neutrals ------------------------------------------------------- */
  --ink: #222529;              /* --porto-heading-color */
  --ink-alt: #212529;          /* header nav links */
  --ink-deep: #1d2127;         /* --porto-color-dark */
  --body: #777777;             /* --porto-body-color */
  --muted: #999999;            /* --porto-gray-6 */
  --white: #ffffff;
  --grey-band: #f4f4f4;        /* --porto-gray-1/3/7, section tints + menu hover */
  --grey-soft: #f7f7f7;
  --grey-mid: #e7e7e7;         /* --porto-gray-2/5 */
  --line: #cccccc;             /* --porto-gray-4 */
  --line-soft: rgba(0, 0, 0, 0.06);   /* --porto-normal-bc */
  --stroke-decor: #d8d8d8;     /* the arc SVGs' stroke (line-motif.css) */

  /* ---- type -----------------------------------------------------------
     Poppins for everything except two paragraphs on /about-us/, which the
     original sets in Playfair Display italic — the site's one <blockquote>:
     see the blockquote rules in base/typography.css and .about-quote in
     components/about.css. Shadows Into Light is downloaded by the original
     and genuinely unused. Self-hosted — see base/typography.css. */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-quote: "Playfair Display", Georgia, "Times New Roman", serif;

  /* THE ORIGINAL'S TYPE IS NOT FLUID. Measured at 360/390/480/576/768/992/
     1024/1200/1366/1440: every size is FIXED from 576px up, and steps down by
     Porto's 0.9286 factor at or below 575px. Two values, one Bootstrap
     breakpoint — that is the whole scale.

     So every clamp below reaches its MAX at 576px, not at 1200px. Above 576 it
     is flat and exact; below it interpolates smoothly between 360 and 576
     instead of jumping, landing on Porto's own stepped-down value at 360.

     Solving for max at 576: B = 100(max-min)/216 vw, A = min - 3.6B.

     Fitting them at 1200 instead was the single biggest error in the first
     build: at 390px the hero tagline rendered 28.75px against the original's
     45.5px. See VERIFICATION.md 3.1. */

  /* Body — 13.86px at every width, Porto's own body size (not 14px: an
     earlier note read a 13.896px render as a clamp falling short of 14 and
     "fixed" it upward). It is body's size, so it reaches only text that sets
     none of its own. Measured 2026-09-30 by setting it to a sentinel on all
     22 pages at 1440 and 390: that is the text on /form-problem/ and
     /thank-you/ and one footer paragraph. Every other page's text is sized
     by its own component rule, to what its original measured: the body
     paragraphs of /about-us/, /claims/, /payment-options/ and /careers/ are
     14px, for instance, and the /claims/ and /payment-options/ accordion
     panels' text 13px at 575px and below. */
  --fs-body: 0.86625rem;                                            /* 13.86 flat */
  /* Lead paragraph — .section-intro and .lead. The same sentinel test finds
     it rendering in one place only, the 404 page's intro: /contact/'s intro
     (form.css) and the /brokers/ .lead (team.css) set sizes of their own, and
     /about-us/'s 18.9px lines are fixed in about.css, because the original
     does not shrink them at 390. */
  --fs-lead: clamp(1.0969rem, 0.9563rem + 0.625vw, 1.18125rem);     /* 17.55 → 18.9 */
  --fs-small: 0.8125rem;                                            /* 13 */

  /* Hero "INSURANCE" — 72px, stepping to 66.86px at ≤575. */
  --fs-hero: clamp(4.17875rem, 3.6433rem + 2.3796vw, 4.5rem);       /* 66.86 → 72 */
  /* Hero rotating words — 36px at every width, no step. */
  --fs-hero-word: 2.25rem;                                          /* 36 flat */
  /* Hero tagline — 49px / lh 63.7px, stepping to 45.5 / 59.15. */
  --fs-hero-tag: clamp(2.84375rem, 2.4792rem + 1.6204vw, 3.0625rem);/* 45.5 → 49 */
  /* Hero sub-line — 16.8px / weight 500 / lh 26px. */
  --fs-hero-sub: clamp(0.975rem, 0.85rem + 0.5556vw, 1.05rem);      /* 15.6 → 16.8 */
  /* Inner-page banner h1 — 38.5px, stepping to 35.75px. */
  --fs-h1-banner: clamp(2.2344rem, 1.9479rem + 1.2731vw, 2.40625rem);/* 35.75 → 38.5 */
  /* Section titles — 32.2px, stepping to 29.9px. Not 30: 30 was Porto's
     published token, 32.2 is what it renders. */
  --fs-h2: clamp(1.86875rem, 1.6292rem + 1.0648vw, 2.0125rem);      /* 29.9 → 32.2 */
  /* Feature card titles — 23.1px at every width, no step. */
  --fs-h3: 1.44375rem;                                              /* 23.1 flat */
  /* Product card titles — 19.6px, stepping to 18.2px. */
  --fs-h4: clamp(1.1375rem, 0.9917rem + 0.6481vw, 1.225rem);        /* 18.2 → 19.6 */
  /* Broker name — 30px, stepping to 27.86px. */
  --fs-name: clamp(1.7411rem, 1.5179rem + 0.9921vw, 1.875rem);      /* 27.86 → 30 */
  /* Broker role — 14px, stepping to 13px. */
  --fs-role: clamp(0.8125rem, 0.7083rem + 0.463vw, 0.875rem);       /* 13 → 14 */
  /* CTA band: a small uppercase kicker over a large statement. The kicker is
     the <h2>; the statement below it is nearly twice the size. */
  --fs-cta-head: clamp(0.975rem, 0.85rem + 0.5556vw, 1.05rem);      /* 15.6 → 16.8 */
  --fs-cta-lead: clamp(1.7875rem, 1.5583rem + 1.0185vw, 1.925rem);  /* 28.6 → 30.8 */

  /* Porto sets line-height in PIXELS, not ratios, so leading stays put while
     the font size steps. Measured per element at both steps. */
  --lh-body: 1.876;            /* 26px at 13.86px */
  --lh-heading: 1.2;           /* h4 only — 23.52px at 19.6px */
  --lh-tight: 1;               /* banner h1 renders at lh == font-size */
  --lh-hero: 44px;             /* the big word, at both 72px and 66.86px */
  --lh-hero-word: 36px;
  --lh-hero-sub: 26px;
  --lh-h2: 42px;
  --lh-h3: 24px;
  --lh-name: 40px;
  --lh-role: 27px;
  --lh-lead: 1.8;              /* 34.02px at 18.9px */
  --lh-cta-head: 24px;
  --lh-cta-lead: 42px;

  /* Porto tracks nearly everything at -0.05em. Measured, element by element:
     banner -1.925/38.5, h2 -1.61/32.2, h4 -0.98/19.6, hero tag -2.45/49,
     name -1.5/30, cta head -0.84/16.8, cta lead -1.54/30.8 — all -0.05em.
     h3 is the one that is not, at -1.15/23.1. */
  --ls-tight: -0.05em;
  --ls-banner: -0.05em;        /* -1.925px at 38.5px */
  --ls-h3: -0.0498em;          /* -1.15px at 23.1px */
  --ls-h4: -0.05em;            /* -0.98px at 19.6px */
  --ls-hero: 0.011em;          /* +0.8px at 72px */
  --ls-nav: -0.5px;            /* the top-level nav links */

  /* ---- spacing --------------------------------------------------------
     The CTA band measures 74px top and bottom; content sections run wider. */
  --section-y: clamp(3.125rem, 2.02rem + 4.9vw, 5rem);              /* 50 → 80 */
  --band-y: clamp(3rem, 2.26rem + 3.27vw, 4.625rem);                /* 48 → 74 */
  --gap: clamp(1.25rem, 1.06rem + 0.82vw, 1.5rem);                  /* 20 → 24 */

  /* Both step with the viewport, as Porto's do — see "container steps"
     after this block. These are the values at 1164px and up. */
  --container: 1140px;         /* --porto-container-width */
  --gutter: 12px;              /* --porto-container-spacing */

  /* ---- grid minimum ---------------------------------------------------
     .grid--3's column minimum, tuned so the 1140px container yields three
     columns. The site's two .grid--3 grids are both on the homepage, and
     home.css sets their columns itself (1 below 768px, 3 from 768), so this
     changes no rendered layout today: set to 999px, the grids measured the
     same at 1440 and 390 (2026-09-30). */
  --col-min-3: 300px;

  /* ---- chrome --------------------------------------------------------- */
  /* Porto steps the logo rather than scaling it: 150px above 991px, 123px at
     or below. Reproduced as a flat value plus the existing 991px override in
     header.css — a clamp() here landed at 149.8px, never quite reaching 150. */
  --logo-w: 150px;
  --logo-w-footer: 261px;

  /* The primary button measures 187.84 x 61.98 with a 28px radius — a pill.
     See components/button.css for every variant. */
  --btn-radius: 28px;
  --btn-pad-y: 20px;
  --btn-pad-x: 47px;

  --radius: 0;                 /* cards and images are square-cornered */
  --radius-img: 0;

  --transition: 0.2s ease;
  --transition-slow: 0.5s ease;

  /* ---- decorative line motif -----------------------------------------
     stroke-dashoffset 1600 -> 0 over 7s ease = 228.6 units/sec.
     Reusing the original path data at the original viewBox, so 7s is the
     matching speed. Rescale the art and this must be recomputed. */
  --line-draw-duration: 7s;
  --line-draw-dash: 1600;

  /* ---- the nav breakpoint --------------------------------------------
     Nav collapses to a drawer. Matches Porto's own 991px, which is also
     where the decorative SVGs (d-none d-lg-block) disappear. */
  --bp-nav: 991px;
}

/* ---- container steps -------------------------------------------------
   Porto's container is not one width. Measured on the original 2026-09-29,
   as the x where the header logo starts on /about-us/ (the banner h1 and
   every .container start on the same x at 576, 768, 991, 1024, 1163, 1164
   and 1199, the widths where they were measured too):
     1164px and up   1140px container, 12px gutter   x=24 at 1164, 32 at
                                                     1180, 41.5 at 1199
     992-1163        960px container, 12px gutter    x=28 at 992, 44 at
                                                     1024, 113.5 at 1163
     576-991         full width, 24px gutter         x=24 at 576, 700, 768
                                                     and 991
     575 and below   full width, 20px gutter         x=20 at 360, 390, 575

   The 960px container leaves 936px of content. --col-min-3 is trimmed to
   match, or a 3-up .grid--3 would drop a column there: 3 x 296 + 2 x 24 is
   exactly 936.

   At 576-991 the 24px gutter takes 24px from the content box, so it is
   trimmed there too: the grid still reaches three columns at the viewport
   width it did with the 12px gutter, 972px (48px of gutter plus 3 x 292 +
   48). (No rendered grid reads it today — see "grid minimum" above.) */
@media (min-width: 992px) and (max-width: 1163px) {
  :root {
    --container: 960px;
    --col-min-3: 296px;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  :root {
    --gutter: 24px;
    --col-min-3: 292px;
  }
}
@media (max-width: 575px) {
  :root { --gutter: 20px; }
}

/* ---- base/reset.css ---- */
/* ---- reset & document defaults ------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--body);
  background: var(--white);
  /* No -webkit-font-smoothing / -moz-osx-font-smoothing, on purpose: the
     original leaves both at auto, and antialiased made every word on a Mac
     render lighter than the original's (Lili's review, 2026-09-29). */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--blue-dark); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

/* Keyboard focus was invisible in the original theme. summary is the title
   of every <details> accordion: /claims/, /payment-options/ and the coverage
   lists on the auto, business and home product pages. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 2000;
  padding: 10px 18px;
  background: var(--ink-alt);
  color: #fff;
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---- base/typography.css ---- */
/* ---- typography ----------------------------------------------------------
   Poppins, self-hosted. Five weights (400-800), latin subset, 39 KB total.
   font-display swap so text is readable before the font arrives. 800 is
   used only where the original uses it ("Members" on the broker pages,
   "Current" on /careers/).

   Plus one cut of Playfair Display italic (22 KB), used by the two <blockquote>
   paragraphs on /about-us/ and nowhere else. The declarations ship in the one
   stylesheet, but a browser only fetches a face it actually needs, so a page
   that uses neither 800 nor Playfair pays for neither. Both families are OFL.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/poppins-800.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-400-italic.woff2") format("woff2");
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  font-family: var(--font);
  color: var(--ink);
  line-height: var(--lh-heading);
  font-weight: 700;
}

h1 { font-size: var(--fs-h1-banner); letter-spacing: var(--ls-banner); }
/* h2 and h3 hold a fixed leading while the font size steps — that is how the
   original behaves, so a ratio would drift at ≤575px. Measured: h2 42px at
   both 32.2 and 29.9; h3 24px at 23.1. */
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-h2); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--ls-h4); }
h5 { font-size: 1.103rem; font-weight: 600; letter-spacing: -0.05em; }
h6 { font-size: var(--fs-body); font-weight: 700; }

/* Section heading. The original writes these as one heading with the second
   half in <strong> — weight 500 then bold, on the same line. Measured at 500,
   not 400: at 400 the light half reads noticeably thinner than the original. */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 0.5em;
}
.section-title strong { font-weight: 700; }

.section-head {
  margin-bottom: clamp(2rem, 1.4rem + 2.7vw, 3.25rem);
}
.section-head--center {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.section-intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--body);
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* The two statement paragraphs on /about-us/ — the site's only <blockquote>,
   and its only serif text. The original sets them in Playfair Display italic
   at 18.9px/32.13px in black. An earlier note recorded Playfair as
   downloaded-but-never-applied; it is applied, here. See VERIFICATION.md 3.7. */
blockquote {
  margin: 0 0 1.5rem;
  padding: 0;
}
blockquote p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.7;              /* 32.13px at 18.9px */
  color: #000;
  margin: 0 0 0.35rem;
}
blockquote p:last-child { margin-bottom: 0; }

address {
  font-style: normal;
}

/* ---- base/layout.css ---- */
/* ---- layout primitives ---------------------------------------------------
   The grid here uses auto-fit + minmax, so it reflows on its own at every
   width. There are no media queries in this file, and none are needed.
   -------------------------------------------------------------------------- */

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

.section { padding: var(--section-y) 0; position: relative; }
.section--soft { background: var(--grey-soft); }
.section--white { background: var(--white); }

/* min(…, 100%) stops a column from ever being wider than its container,
   which is what would otherwise cause horizontal scroll on small phones. */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min-3), 100%), 1fr)); }

/* ---- components/button.css ---- */
/* ---- buttons -------------------------------------------------------------
   Every value below was measured on the original with a real mouse hover
   (headless Chrome, 2026-09-29, at 1440 and 390). The original's buttons
   come in five shapes; each is one class here, used where the original uses
   that shape:

     .btn            hero "Get Started"; "Back to Home" on 404, thank-you
                     and form-problem.
                     187.84 x 61.98: 14px/700, line-height 20px, uppercase,
                     padding 20px 47px, a 1px border, radius 28px (a pill).
     .btn--light     the CTA band's "Get Started": the same box, white.
     .btn--sm        "Contact Us" on /claims/, /payment-options/ and the
                     seven product pages: 167.97 x 53.98, padding 16px 37.4px.
     .btn--compact   /brokers/ "More": 84.3 x 43.14, 12px/600, square.
     .btn--form      every form's submit: 100 x 40.3 minimum, 14px/500,
                     not uppercase, square, no border; full width <=782px.

   Every one of them is 14px except .btn--compact — NOT the 13.86px body size,
   which is what this file used before and why the pill measured 184.9 wide
   against the original's 187.84.

   The three blue Porto buttons (.btn, .btn--sm, .btn--compact) carry Porto's
   border: 1px --blue with a --blue-darker (--porto-primary-dark-10) bottom
   edge. Their hover LIGHTENS them, as Porto's does: --blue-light
   (--porto-primary-light-7) with a --blue-lighter (--porto-primary-light-10)
   border, keeping --blue on the bottom edge. White on --blue-light is 6.1:1.

   .btn--form is the form plugin's button, not Porto's. Its original hover,
   #008fca, is 3.6:1 against white text, so it keeps --blue-dark (8.9:1) and
   takes only the original's hover shadow — a deliberate difference.

   Keyboard focus is the 2px outline from base/reset.css on every variant.
   .btn--light alone turns it white: a --blue outline on the --blue-band CTA
   band is 1.05:1, all but invisible.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--blue);
  border-bottom-color: var(--blue-darker);
  border-radius: var(--btn-radius);
  background: var(--blue);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.875rem;             /* 14px, on every width — the original does not step it */
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover {
  background: var(--blue-light);
  border-color: var(--blue-lighter) var(--blue-lighter) var(--blue);
  color: var(--white);
}

/* The white pill on the blue CTA band. Its bottom edge is
   --porto-primary-inverse-dark-10 (#e6e6e6); on hover the edge goes white and
   the fill greys. */
.btn--light {
  background: var(--white);
  border-color: var(--white) var(--white) #e6e6e6;
  color: #000;
}
.btn--light:hover {
  background: #f2f2f2;
  border-color: var(--white);
  color: var(--ink-alt);
}
.btn--light:focus-visible { outline-color: var(--white); }

/* The smaller pill: "Contact Us" on /claims/, /payment-options/ and the
   product pages. */
.btn--sm {
  padding: 16px 37.4px;
}

/* The square "MORE" button on /brokers/. Porto sizes it in em, and steps its
   font by 0.9286 at <=575px like the rest of its type: 11.14px, padding
   11.14/22.29, 78.39 x 40.19 at 390. */
.btn--compact {
  padding: 1em 2em;
  border-radius: 0;
  font-size: 0.75rem;              /* 12px */
  font-weight: 600;
  line-height: 1.42857;            /* 17.14px at 12px */
}
@media (max-width: 575px) {
  .btn--compact { font-size: calc(0.75rem * 0.9286); }
}

/* A form's submit. The original is the form plugin's own button, not Porto's:
   square, borderless, weight 500, sentence case, at least 100px wide, and the
   full width of the form at <=782px (the plugin's own breakpoint). */
.btn--form {
  min-width: 100px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  line-height: 20.3px;
  text-transform: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.btn--form:hover {
  background: var(--blue-dark);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
@media (max-width: 782px) {
  .btn--form { width: 100%; }
}

/* A second, hollow button beside a .btn — the 404 page only. The inset ring
   adds 1px inside the 1px border, for a 2px outline. */
.btn--outline {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.btn--outline:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ---- components/line-motif.css ---- */
/* ---- decorative line motif ----------------------------------------------
   Five concentric stroked arcs. The homepage hero's two sets and the
   footer's draw themselves in once in view; the inner-page banner's are
   static and fully drawn (page-banner.css undoes the draw). This file holds
   what every motif shares — the stroke, the draw animation, reduced motion.
   Where each one sits lives with the thing it decorates: .line-motif--hero-a
   and -b in hero.css, .line-motif--banner in page-banner.css,
   .line-motif--footer in footer.css. Those files load after this one
   (main.css), so their placement rules win any tie with the rules here.

   On the original the homepage hero and the footer carry these as inline
   SVGs, and every inner-page banner draws one as a background-image fetched
   from the theme vendor's server (sw-themes.com/…/15.svg). All of them are
   inline and self-hosted here, from the original path data:
     hero, first set    15.svg, viewBox 0 0 1686.88 1095.86
     hero, second set   viewBox 0 0 1034.87 621.92
     banner             the same 15.svg paths as the hero's first set
                        (partials/line-motif-banner.html, via build.js)
     footer             the footer's own art, viewBox 0 0 393.35 539.93
                        (partials/line-motif-footer.html)
   index.html writes both hero sets inline; partials/line-motif-hero-a.html
   and -hero-b.html hold identical copies that no page includes.

   The draw, which runs on the hero and footer sets only (the banner's set is
   static here), measured on the original:
     stroke-dasharray: 1600; stroke-dashoffset: 1600 -> 0 over 7s ease
   = 228.6 dash units per second. The paths are reused at their original
   viewBox, so 7s is the matching speed. If the art is ever rescaled,
   recompute duration as pathLength / 228.6.
   -------------------------------------------------------------------------- */

.line-motif {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.line-motif path {
  fill: none;
  stroke: var(--stroke-decor);
  stroke-width: 2px;
  stroke-miterlimit: 10;
  stroke-dasharray: var(--line-draw-dash);
  stroke-dashoffset: var(--line-draw-dash);
}

/* Draw only once the block is in view, so the effect is seen rather than
   finishing off-screen. .is-revealed is added by 50-reveal.js. */
.line-motif.is-revealed path,
.is-revealed .line-motif path {
  animation: line-draw var(--line-draw-duration) ease forwards;
}

@keyframes line-draw {
  from { stroke-dashoffset: var(--line-draw-dash); }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .line-motif.is-revealed path,
  .is-revealed .line-motif path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Where the browser runs no script, 50-reveal.js never adds .is-revealed and
   the hero and footer lines would stay undrawn for good: show them fully
   drawn instead. `scripting: none`, not `html:not(.js)`, which would also
   match until the deferred bundle has run and draw every line at once
   before the draw-in could start (header.css makes the same choice). A
   browser that does not know the feature treats the query as false. */
@media (scripting: none) {
  .line-motif path { stroke-dashoffset: 0; }
}

/* ---- components/header.css ---- */
/* ---- site header ---------------------------------------------------------
   The original's geometry, measured 2026-09-29 (Porto header builder):
     >=992  a 165px row of three columns — logo | nav | Facebook + phone,
            as 1fr auto 1fr — then 68px of empty white under it: 233px.
            Logo 150x150 at top 15; nav ul at y51.5 (x419.2 at 1440).
     <=991  218px: a 138px row (logo 123x123 at top 15; on the right
            Facebook, one separator and the phone at 576-991, the phone
            alone at 575 and below) and an 80px row holding only the blue
            menu toggle.
   The empty 68px strip is the original's second header row, which holds
   nothing on a desktop; it is reproduced because Lili asked for the match.

   .site-header keeps ONE layout height at every scroll position (233 / 218),
   and never changes it. Its inner .header-bar becomes a compact fixed bar
   (logo, nav, phone) only once the whole header has scrolled out of view —
   10-header.js adds .is-stuck past the header's own height. The old header
   was sticky in flow and shrank 180 -> 84px at scrollY 40, which moved
   scrollY back under the threshold and made it oscillate (TC-09).

   The original's own sticky state is an empty 60px white bar with no logo
   and no nav (a Porto header-builder defect). Not reproduced: the compact
   bar keeps the navigation in reach.
   -------------------------------------------------------------------------- */

.site-header {
  --hdr-h: 233px;                  /* 165px row + the 68px empty strip */
  --hdr-stuck-h: 84px;             /* the compact bar */
  position: relative;
  z-index: 100;
  height: var(--hdr-h);            /* a height, not a min-height: see above */
  background: var(--white);
}

.header-bar { background: var(--white); }

.site-header.is-stuck .header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
  /* No fill-mode: once the slide ends the bar's transform is none again. A
     transformed ancestor would become the containing block of the fixed
     mobile drawer inside it, and the drawer would open inside the bar. */
  animation: header-bar-in 0.3s ease;
}
@keyframes header-bar-in {
  from { transform: translateY(-100%); }
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.site-header.is-stuck .header-inner { min-height: var(--hdr-stuck-h); }

/* The logo sets the row's height: 15px above a 150px image = 165px. */
.brand {
  justify-self: start;
  align-self: start;
  margin-top: 15px;
  line-height: 0;
}
.brand img {
  width: var(--logo-w);
  height: auto;
}
.site-header.is-stuck .brand { align-self: center; margin-top: 0; }
.site-header.is-stuck .brand img {
  width: clamp(64px, 7vw, 80px);   /* --porto-sticky-logo-mw: 80px */
}

/* ---- nav ---------------------------------------------------------------- */

.main-nav {
  display: flex;
  justify-content: center;
  padding: 0 15px;                 /* the original's .header-center padding */
}

/* The original spaces the nav from inside the links, not with a gap: each <a>
   carries padding 20px 25px 18px 24px and the <li> a 1px right margin, so the
   hit areas are adjacent — a 601.55px nav at 1440. */
.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list > li { position: relative; margin-right: 1px; }
.nav-list > li:last-child { margin-right: 0; }   /* 6 links + 5 gaps = 601.55 */

/* Measured on the original: 14px, weight 600, letter-spacing -0.5px, a 24px
   line box and 20/25/18/24 padding — 62px tall. */
.nav-list > li > a {
  display: block;
  padding: 20px 25px 18px 24px;
  font-size: 0.875rem;             /* 14px — the nav is not on the 13.86px body step */
  font-weight: 600;
  line-height: 24px;
  letter-spacing: var(--ls-nav);
  color: var(--ink-alt);
  white-space: nowrap;
}
/* The original trims the first item's left padding so the row starts flush. */
.nav-list > li:first-child > a { padding-left: 2px; }

/* The original compresses the nav — padding 9px 14px, a 42px row, a 485.55px
   nav — exactly while its container is the 960px one: at 1163px and below,
   uncompressed from 1164 (measured at 1163 and 1164, 2026-09-29), which is
   where its container steps to 1140. So the condition here is the
   container's own width, not the viewport's: the full nav (631.55px with
   its column padding) cannot share a 936px content box with a 150px logo
   and a 155.72px phone column. A container query on .header-inner keeps the
   two in step wherever tokens.css puts the container step. */
.header-inner { container: site-header / inline-size; }
@media (min-width: 992px) {
  @container site-header (max-width: 1000px) {
    .nav-list > li > a { padding: 9px 14px; }
    .nav-list > li:first-child > a { padding-left: 2px; }
  }
}
/* Hover is the current-page blue, #0047bb, with no underline — measured with
   a real pointer on the original. The parent stays blue while the pointer is
   inside its dropdown (li:hover), as on the original. Keyboard focus keeps
   the site-wide outline (reset.css). */
.nav-list > li:hover > a,
.nav-list > li > a:hover { color: var(--blue-band); }
/* The current-page blue is #0047bb — the band blue, NOT --blue (#1947c4).
   Measured on / where "Home" is current, and again on /careers/. */
.nav-list > li.is-active > a,
.nav-list > li > a[aria-current="page"] { color: var(--blue-band); }

/* dropdowns — measured on the original at 1440 after a real hover: a white
   panel with a 3px #0047bb top border, radius 5px, 5px 0 padding, at least
   200px wide and as wide as its longest item (Insurance: 219px), its left
   edge on the link's and its top on the link's bottom. */
.sub-nav {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 5px 0;
  list-style: none;
  background: var(--white);
  border-top: 3px solid var(--blue-band);
  border-radius: 5px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.3s linear, transform 0.3s linear, visibility 0.3s linear;
}
.nav-list > li.has-sub:hover > .sub-nav,
.nav-list > li.has-sub:focus-within > .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Measured on the original: 12.8px/24px, tracked -0.5px, padding 8px 18px,
   one line each (nowrap), 41px apart with a #f3f3f3 rule between items. */
.sub-nav a {
  display: block;
  padding: 8px 18px;
  font-size: 0.8rem;               /* 12.8px */
  line-height: 24px;
  letter-spacing: var(--ls-nav);
  color: var(--body);
  white-space: nowrap;
  border-bottom: 1px solid #f3f3f3;
}
.sub-nav li:last-child > a { border-bottom: 0; }
/* --porto-mainmenu-popup-text-hbg-color: #f4f4f4 */
.sub-nav a:hover { background: var(--grey-band); color: var(--body); }

/* ---- right-hand cluster ------------------------------------------------- */

/* Facebook, a separator, the phone, a separator — right-aligned, and allowed
   to wrap: at 992-1163 the original's 210px column cannot hold all four on
   one line (216.72px), so Facebook + separator sit above phone + separator.
   Every margin below is the original's, so the wrap falls in the same place. */
.header-aside {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

/* 33px circle, #333 glyph; hover fills #3b5a9a with a white glyph (measured
   with a real pointer). The right margin is the original's 3px link margin
   plus its wrapper's 6px. */
.header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  margin: -1px 9px 0 0;
  border-radius: 50%;
  color: #333;
  transition: background-color var(--transition), color var(--transition);
}
.header-social-link:hover { background: #3b5a9a; color: var(--white); }

/* 1x16, rgba(0,0,0,.1), margin 0 8px 0 10px — one after Facebook, and one
   after the phone at 992px and up. */
.header-sep {
  display: block;
  width: 1px;
  height: 16px;
  margin: 0 8px 0 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* 14px / 600 / lh 24px, #212529, hover #0047bb, a 19px thin-line icon 8px
   before the number — 125.72 x 24 on the original. Two classes, because
   utilities.css gives every tel: link min-height 28px at (0,1,1) and loads
   last (CLAUDE.md §8); 24px is still the 24x24 target minimum. */
.site-header .header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 0 16px 0 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-alt);
  white-space: nowrap;
}
.site-header .header-phone:hover { color: var(--blue-band); }
.header-phone svg { flex: 0 0 auto; width: 18.9px; height: 18.9px; }

/* ---- drawer toggle ------------------------------------------------------ */

/* The original's .mobile-toggle: 37.38 x 34 (padding 7px 13px around a 13px
   bars glyph), #1947c4, white, radius 4px. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 37.375px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--blue);
  color: var(--white);
  cursor: pointer;
}
.nav-toggle svg { display: block; width: 11.375px; height: 13px; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---- 991px and below: the nav becomes a drawer --------------------------- */
@media (max-width: 991px) {
  .site-header { --hdr-h: 218px; }

  /* Two rows, as on the original: 138px (logo | phone) and 80px (toggle). */
  .header-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: 138px 80px;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .brand img { width: 123px; }        /* --porto-logo-mw at <=991px */
  .header-aside { grid-column: 2; grid-row: 1; }
  .nav-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  /* Facebook, ONE separator and the full phone number, as on the original
     at 576-991 (measured at 576, 700, 768 and 991: Facebook 33px at y52,
     the separator 52px right of Facebook's left edge at y61, the phone 23px
     right of the separator at y57, ending on the container's content edge).
     The separator after the phone goes, and so does the phone's desktop
     right margin (Bootstrap me-lg-3 is lg only). At 575 and below Facebook
     and the separator go too — see the 575px block. */
  .header-phone + .header-sep { display: none; }
  .site-header .header-phone { margin: 0 0 0 14px; }

  /* The compact bar: one 84px row — logo | the aside above | toggle. */
  .site-header.is-stuck .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: var(--hdr-stuck-h);
    column-gap: 12px;
  }
  .site-header.is-stuck .nav-toggle { grid-column: 3; grid-row: 1; }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    width: min(320px, 86vw);
    display: block;
    padding: 5rem 1.5rem 2rem;
    background: var(--white);
    overflow-y: auto;
    transform: translateX(100%);
    /* Closed, the drawer is hidden as well as moved off-screen, so its links
       leave the Tab order. The hidden state waits 0.2s (--transition's
       duration), until the slide-out has finished; opening has no
       visibility transition at all, so the links are focusable at once —
       a transitioned visibility is still hidden on the next frame, and
       focus would silently fail to move in. */
    visibility: hidden;
    transition: transform var(--transition), visibility 0s linear 0.2s;
  }
  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--transition);
  }

  .nav-list {
    display: block;
    gap: 0;
  }
  .nav-list > li > a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
    white-space: normal;
  }

  /* In the drawer the dropdown is always open — no hover on touch, and an
     accordion that needs JS would hide seven product pages if it failed.
     The desktop panel's border, radius, shadow and one-line items are reset:
     nowrap in a 320px drawer would overflow it. Its visibility is the
     drawer's (inherit, not visible: a visible child of the hidden drawer
     would keep its nine links in the Tab order), with no transition. */
  .sub-nav {
    position: static;
    min-width: 0;
    padding: 0 0 0.5rem 1rem;
    border-top: 0;
    border-radius: 0;
    opacity: 1;
    visibility: inherit;
    transform: none;
    box-shadow: none;
    transition: none;
  }
  .sub-nav a {
    padding: 0.6rem 0;
    white-space: normal;
    border-bottom: 0;
  }
}

/* 575px and below: the original shows the phone alone — no Facebook, no
   separator (measured at 360, 390 and 575). Porto's root font step makes
   its phone line 22px and its icon gap 7.43px; the toggle's radius becomes
   3.71px. The phone keeps a 24px box — the target minimum — around the 22px
   line. */
@media (max-width: 575px) {
  .header-social-link,
  .header-sep { display: none; }
  .site-header .header-phone { margin: 0; gap: 7.43px; line-height: 22px; }
  .nav-toggle { border-radius: 3.7144px; }
}

/* ---- no scripting, 991px and below: the nav as a plain list -------------
   The drawer opens only from 20-nav.js, so a browser that runs no script
   would show a toggle that does nothing and no way to reach the header nav
   (nor /careers/, which the footer does not link). Where scripting is off,
   the toggle goes, the nav becomes a stacked list across the header under
   the logo row — its drawer styles above (full-width rows, sub-menus always
   open) — and the header's fixed height is released to hold it.

   `scripting: none` and not `html:not(.js)`: this matches only when the
   browser runs no script at all, so with JavaScript on nothing here ever
   applies. An html:not(.js) rule would also match until the deferred
   bundle has added .js, so a page painted before then would show the full
   list and then collapse it. A browser that does not know the `scripting`
   media feature treats the query as false and keeps the drawer (as before
   this block). A bundle that fails to load while scripting is on is not
   covered either: its toggle stays inert. */
@media (max-width: 991px) and (scripting: none) {
  .site-header { height: auto; }
  .header-inner { grid-template-rows: 138px auto; }
  .nav-toggle { display: none; }
  .main-nav {
    position: static;
    z-index: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    padding: 0 0 1.5rem;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }
}

/* ---- components/page-banner.css ---- */
/* ---- inner-page banner ---------------------------------------------------
   The original's .page-top, measured 2026-09-29 on seven inner pages: the
   homepage photo (background-3.jpg, the file this repo ships as hero.jpg),
   cover, centred, with NO overlay; the title left-aligned in the container
   at 38.5px/700, tracked -1.925px, white; the 15.svg arc art hanging off the
   right edge at 992px and up. The next section rises 100px into it under a
   white panel — .section--lift below — so only the top 159.5px of the
   259.5px band shows across the middle of the page.
   -------------------------------------------------------------------------- */

/* The height comes from padding, as on the original: 12px on the section,
   then 49px above and 148px below the h1 (Porto's 44px container padding
   plus its 5px title-row offset) — h1 top 61px from the band's top, box
   12 + 49 + 38.5 + 148 + 12 = 259.5px at 576px and up; at 390 the h1 is
   36.13px here against the original's 35.75 (tokens.css --fs-h1-banner), so
   the band is 257.1px against 256.8. The photo alone is dark enough for
   white text, so there is no wash: in assets/img/hero.jpg the brightest
   pixel's luma is 73/255 and no channel passes 74, so white text on it is at
   least 8.8:1 (measured 2026-09-29).

   Clipped sideways only. The arcs' box hangs 291px past the right edge, which
   must not scroll the page — but the original lets their lower tails paint
   on the white page below the band, beside the panel: at 1920 x1672-1851,
   y494-561 (measured on both). overflow-x: clip keeps y visible, which overflow:
   hidden cannot. Above the band the box runs up behind the header, whose
   white background (z-index 100) covers it. */
.page-banner {
  position: relative;
  padding: 12px 0;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--ink-deep) url("/assets/img/hero.jpg") center / cover no-repeat;
}

.page-banner .container {
  position: relative;
  z-index: 2;
  padding-top: 49px;
  padding-bottom: 148px;
}

.page-banner h1 {
  margin: 0;
  font-size: var(--fs-h1-banner);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-banner);
  color: var(--white);
}

/* The banner's arcs (the stroke itself is in line-motif.css). The original
   draws 15.svg as .page-top::before: a 1284x834 box, right -291px, bottom
   189px, rotate(280deg), opacity 1 — STATIC and fully drawn, no draw-in. */
.line-motif--banner {
  right: -291px;
  bottom: 189px;
  width: 1284px;
  height: 834px;
  transform: rotate(280deg);
  opacity: 1;
}
/* Static: undo line-motif.css's dash-offset and draw animation. Both of its
   rules are (0,2,1) — `.line-motif path` sets the dash, `.line-motif.
   is-revealed path` the animation — so a plain `.line-motif--banner path`
   (0,1,1) would lose (CLAUDE.md §8). These are (0,2,1) too and load later. */
.line-motif.line-motif--banner path,
.line-motif--banner.is-revealed path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
/* Hidden below 992px, like the original's (its ::before is min-width 992). */
@media (max-width: 991px) {
  .line-motif--banner { display: none; }
}

/* ---- .section--lift: a section that rises into the band above it ---------
   The original's .custom-container-background rows, on every inner page and
   on the homepage after the hero.

   API
     class="section section--lift"  on the section that follows a banner or
                                    hero. Every inner page gets it without
                                    the class: .page-banner + .section.
     --lift                         how far it rises. Default 100px (inner
                                    pages); the homepage sets 135px, on the
                                    section itself — style="--lift: 135px" or
                                    a rule in its own component file.

   What it does, as on the original:
     - the section starts --lift above the bottom of the element before it,
       and has no background of its own (the page's white shows below the
       band): only the panel is white, so for those --lift px the band above
       shows on both sides of the panel, and at 1920 the banner arcs' tails
       show beside it on the white, as on the original;
     - a white panel, 125% of the container wide (1425px wherever the
       container is 1140px) but never wider than the section, so it cannot
       cause horizontal scroll,
       300px tall and centred, sits at its top;
     - its content starts 84px below the panel's top;
     - z-index 3 puts it over .page-banner .container and .hero .container
       (both z-index 2 in the root stacking context).
   A page's own component CSS loads after this file, so a rule there that
   sets `background` or `padding-top` on the same section wins: leave the
   section's background transparent, and measure first content 84px below
   the panel. The page behind it must be white (reset.css body). */
.section--lift,
.page-banner + .section {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--lift, 100px));
  padding-top: 84px;
  background: transparent;
}
.section--lift::before,
.page-banner + .section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(calc(var(--container) * 1.25), 100%);
  height: 300px;
  transform: translateX(-50%);
  background: var(--white);
}

/* ---- components/hero.css ---- */
/* ---- homepage hero -------------------------------------------------------
   The original, measured 2026-09-29/30 at 390-1920: a row 778px tall that
   runs edge to edge, three layers of the same photo (background-3.jpg, this
   repo's hero.jpg) with NO overlay on any of them, and the copy in the left
   half. "INSURANCE" at 72px sits above four words that type in letter by
   letter, 150ms a letter, rows staggered 0/1000/2000/3000ms. The section
   after it rises 135px into its bottom (.section--lift in page-banner.css,
   --lift: 135px in home.css), so a 643px dark band shows across the middle
   at every width.

   The three layers, as the original paints them:
     row      .hero itself: x 0, the full width, 778px tall; the photo at its
              natural 1920x1200 size from the top-left, repeating
     column   .hero::before: the same, inset 12px each side (8px at <=575)
     banner   .hero__media: inset 24px each side (20px at <=575), 743px tall
              (35px short of the row's bottom), the <img> cover-cropped
   The row and column show only in the side strips and in the 35px under the
   banner, beside the panel. The photo's left 248 columns are flat
   rgb(46,46,46); its right edge is not (luma up to 71 in the columns the
   strips show at 992-1600), which is why the strips are the photo and not a
   flat colour.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 778px;
  /* The copy is centred between these, as the original centres its copy
     layer (top 50%, translateY(-50%), 169px of padding under the button) in
     the 743px banner. Below 992px there is no INSURANCE on the original and
     35px above the first word, so the centre sits in [0, 609]. */
  padding: 0 0 169px;
  overflow: hidden;
  /* A size container, so the h1 can size and place itself against the
     hero's width (100cqw = the viewport, without a scrollbar). */
  container-type: inline-size;
  /* #2e2e2e is the photo's own edge colour, shown only until it loads. */
  background: #2e2e2e url("/assets/img/hero.jpg") 0 0 repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 12px;
  background: url("/assets/img/hero.jpg") 0 0 repeat;
}

.hero__media {
  position: absolute;
  inset: 0 24px 35px;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 575px) {
  .hero::before { inset: 0 8px; }
  .hero__media { inset: 0 20px 35px; }
}

.hero .container { position: relative; z-index: 2; }

/* The copy layer is 90% of the banner below 992px, starting at the banner's
   own left edge (x=20 at 390, 24 at 576-991) — which is where the container's
   gutter puts it. Positioned: arc set A hangs off it. */
.hero__copy {
  position: relative;
  max-width: 90%;
  color: var(--white);
}

/* The 72px word. On the original this is hidden below the lg breakpoint;
   here it stays — it is the page's h1 and should not vanish — and below
   about 515px it scales with its column: the word is 5.91 times its font
   size wide, so 0.165 of the column (0.9 of the container's content box)
   leaves it 2.5% of slack. At 67.6px it ran to x=439 at 390 and the hero
   clipped it to "INSURANC" (measured on 73d5bb4). */
.hero__title {
  /* The original holds a 44px line box under a 72px word. */
  margin: 0 0 clamp(1rem, 0.5rem + 2vw, 2.25rem);
  font-size: min(var(--fs-hero), (100cqw - 2 * var(--gutter)) * 0.1485);
  font-weight: 700;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--white);
}

.hero__words {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__words li {
  font-size: var(--fs-hero-word);
  font-weight: 700;
  line-height: var(--lh-hero-word);   /* 36px at 36px, at every width */
  text-transform: uppercase;
  color: var(--white);
}

/* Letter-by-letter reveal. 35-hero-words.js sets --i per letter and adds
   .is-typing; without JS the words are simply visible, which is the point.
   150ms a letter, as the original's animated-letters plugin
   (animationSpeed 150); each letter fades over 1s. */
.hero__words .letter {
  display: inline-block;
  white-space: pre;
}
.hero__words.is-typing .letter {
  opacity: 0;
  animation: hero-letter 1s ease forwards;
  animation-delay: calc(var(--row-delay, 0ms) + var(--i, 0) * 150ms);
}

@keyframes hero-letter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__tagline {
  margin: 0 0 0.5rem;
  font-size: var(--fs-hero-tag);
  font-weight: 700;
  line-height: 1.3;              /* 63.7px at 49px, 59.15 at 45.5 — a true ratio */
  letter-spacing: var(--ls-tight);   /* -2.45px at 49px */
  color: var(--blue-hero);
}

.hero__sub {
  margin: 0 0 20px;              /* the original's m-b-md, 20px at every width */
  font-size: var(--fs-hero-sub);
  font-weight: 500;              /* measured 500, not 600 */
  line-height: var(--lh-hero-sub);   /* 26px at both 16.8 and 15.6 */
  color: var(--white);
}

/* The button's wrapper carries the entrance fade (a delay on the button
   itself would delay its hover too). Flex, so the inline-flex button makes
   no line box and the wrapper is exactly the button's 62px. */
.hero__cta { display: flex; }

/* The site's --blue focus ring is 1.77:1 on the photo's #2e2e2e; white is
   13.58:1. The original shows no focus at all. */
.hero .btn:focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .hero__words.is-typing .letter { opacity: 1; animation: none; }
}

@media (min-width: 992px) {
  /* INSURANCE's box top is 77.3px below the banner's top at 1024-1920, and
     the button's bottom 592.7px: 515.4px of copy centred in [0, 670] (96px
     of layer padding above INSURANCE, 169 below the button, in 743). At
     992-993 the tagline wraps to 3 lines and the whole block rises 31.85px,
     as it does on the original. The 45/153px split keeps that centre, and
     if the copy ever grows past 580px (text zoom) the hero grows instead,
     the button staying at least 18px clear of the panel — the original's
     own minimum, at 992. */
  .hero { padding: 45px 0 153px; }

  /* The copy sits inside the inset banner on the original, so its container
     is never wider than the banner: 944px at 992, x=36 there (1164-1187
     likewise). */
  .hero .container { max-width: min(var(--container), 100% - 48px); }

  /* The copy layer is half the container's content box: 558px from 1188px
     (546 at 1164), 468 at 1008-1163, 460 at 992 (where the tagline wraps
     to 3 lines). */
  .hero__copy { max-width: 50%; }

  /* 84px from INSURANCE's line box to the first word. The original centres
     the word on a box 214px wider than the copy column, so its glyph starts
     half the column minus 319.8px left of the copy: 40.8px from 1188px,
     46.8 at 1164, 85.8 at 1008-1163, 89.8 at 992 — which puts its first
     letters off the left edge of the screen at 992-1107 and 1164-1197. Here
     the outdent is 40.8px from 992 up, and never takes the glyph left of
     x=0: where the copy starts less than 40.8px from the edge (x=36 to
     40.8, at 992-1017 and 1164-1197) it is the copy's x instead:
     (container - viewport) / 2 - 12px. */
  .hero__title {
    margin: 0 0 84px max(-40.8px, (min(var(--container), 100cqw - 48px) - 100cqw) / 2 - 12px);
  }
}

/* ---- the two arc sets (line-motif.css draws them) ------------------------
   Anchored as on the original, where each sits inside one of the banner's
   layers (measured at 992-1920; they are x = -180 / -100 / 60 for set A
   and 557 / 637 / 797 for set B at 1440 / 1600 / 1920, -306 and 235 at 992).

   Set A is inside the copy block (index.html), as it is inside the copy
   layer there: 342px left of the copy, and 194px above the layer's top,
   which is 96px above INSURANCE's box — so it rises with the copy at
   992-993, where the tagline wraps to 3 lines, as the original's does.

   Set B hangs from the hero: its right edge 59px right of the container's
   content edge, the container being min(--container, 100% - 48px), and
   428.5px below the banner's top at every width. Half opacity. */

.line-motif--hero-a {
  top: -290px;
  left: -342px;
  width: 1470px;
  height: 954.95px;
}

.line-motif--hero-b {
  top: 428.5px;
  left: calc((100% + min(var(--container), 100% - 48px)) / 2 - 733px);
  width: 780px;
  height: 468.75px;
  opacity: 0.5;
}

/* The original marks the two hero motifs d-none d-lg-block — hidden below
   992px. Keep that: they are large, purely decorative, and would only cost
   mobile visitors paint time. */
@media (max-width: 991px) {
  .line-motif--hero-a,
  .line-motif--hero-b { display: none; }
}

/* ---- components/card.css ---- */
/* ---- cards ---------------------------------------------------------------
   Two card types, both on the homepage only (index.html; home.css adjusts
   them there). Measured on the build, 2026-09-30, at 1440 and 390.

   feature-card  — the "Why Do People Choose" grid. 100px icon, centred,
                   title 23.1px/600 tracked -1.15px.
   product-card  — the "Insurance Products" grid, 3x2 from 768px. Whole card
                   is one link: a 48px-wide icon, the title 19.6px/400
                   tracked -0.98px (18.39px at 390, --fs-h4), the
                   description 14px/24px in the brand blue.

   The original is completely flat: no borders, no shadows, no background on
   either card. Hovered, its product card changes one thing: the description
   follows the link's colour to #1c50db (reproduced in home.css). The 4px
   lift and the blue title here are added, because six cards that are
   entirely links need visible hover feedback (a deliberate difference).
   The padding and the white hover wash below are never seen: home.css sets
   both to nothing, as the original has neither (padding 0 and a
   transparent background, hovered, at 1440).
   -------------------------------------------------------------------------- */

.feature-card {
  text-align: center;
}
.feature-card__icon {
  width: 100px;
  height: auto;
  margin: 0 auto clamp(1.25rem, 1rem + 1.1vw, 2rem);
}
.feature-card h3 {
  margin: 0 0 0.75rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
}
.feature-card p { margin: 0; }

/* ---- product cards ------------------------------------------------------ */

.product-card {
  display: block;
  padding: clamp(1.25rem, 1rem + 1.1vw, 1.75rem) 1rem;
  text-align: center;
  color: inherit;
  transition: transform var(--transition), background-color var(--transition);
}
.product-card:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: translateY(-4px);
  color: inherit;
}
.product-card__icon {
  width: 48px;
  height: auto;
  margin: 0 auto 1.25rem;
}
/* Marked up as an h3 but styled as the original's h4 role, so it needs the
   1.2 ratio back — the element-level h3 rule pins 24px, which is right for a
   23.1px feature-card title and 0.5px too loose here. */
.product-card h3 {
  margin: 0 0 0.75rem;
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: var(--lh-heading);   /* 23.52px at 19.6px */
  letter-spacing: var(--ls-h4);
  color: var(--ink);
}
/* The blurbs are brand blue on the original, not body grey — they read as a
   continuation of the card's link rather than as body copy. Measured
   14px/24px in rgb(25, 71, 196) on all six homepage cards; Porto sets this
   description a shade larger and tighter than its 13.86px/26px body. */
.product-card p {
  margin: 0;
  font-size: 0.875rem;           /* 14px */
  line-height: 24px;
  color: var(--blue);
}
.product-card:hover h3 { color: var(--blue); }

/* ---- components/team.css ---- */
/* ---- brokers: /brokers/ and the four /member/ profiles -----------------
   The original is Porto's `member` post type: each broker is a Bootstrap
   .row of col-md-7 text beside a col-md-5 square portrait, 24px gutter,
   the portrait on the right on alternate rows of /brokers/ and on every
   profile. Measured on the original 2026-09-30, headless Chrome, at 390,
   576, 767, 768, 992, 1024, 1163, 1200, 1440 and 1920.

   Porto steps its rem by 0.9286 at <=575px, so every rem-sized gap here
   has two values: 32px row padding becomes 29.71, the 1.5rem under the
   portrait 22.29, the 1rem under "More" 14.86. The 30px under the
   portrait, the 35px between rows and the rule's 44px margins are px and
   do not step.
   -------------------------------------------------------------------------- */

/* The section that holds the rows. It is the first section after the
   banner, so page-banner.css lifts it (padding-top 84px, no background):
   nothing here may set its background or padding-top. On the original the
   CTA band starts 72px below the last row on /brokers/, at every width
   measured, and on a profile 80px below the related cards' boxes (at 768
   and up; below 768 the original's pagination dots sit in between). */
.team-section { padding-bottom: 72px; }
.team-section--profile { padding-bottom: 80px; }

/* The /brokers/ intro: 18.9px then 14px at every width, 24px and 44px
   below. The original's lead stays 18.9px at <=575, where .lead's clamp
   falls towards 17.55. */
.section-head--team { margin-bottom: 44px; }
.section-head--team p { font-size: 14px; line-height: 26px; }
.section-head--team .lead {
  margin-bottom: 24px;
  font-size: 18.9px;
  line-height: 34.02px;
}

/* One broker. One column below 768px: the portrait first on every row —
   the original moves it right (order-md-2) only from 768px, so on a phone
   each portrait sits above its own broker's name. Two columns from 768px:
   5/12 and 7/12 of the content box plus Bootstrap's 24px gutter, so the
   portrait is 286px wide at 768, 376 at 992-1163 and 451 at 1200 and up,
   and the text 410 / 536 / 641 (measured on both). Top-aligned, as on the
   original. */
.broker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 32px 0;
  margin: 0 0 35px;
  border-bottom: 1px solid var(--line-soft);
}
.broker:last-child { margin-bottom: 0; border-bottom: 0; }

/* The portrait fills its column, as on the original: 350px at 390, 528 at
   576, 719 at 767. Below it: the original's 30px .member-image margin plus
   its 1.5rem mb-4 (dropped at 992 and up). */
.broker__media {
  line-height: 0;
  padding-bottom: 30px;
  margin-bottom: 24px;
}
.broker__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-img);
}

@media (min-width: 768px) {
  .broker {
    grid-template-columns: calc(100% * 5 / 12 - 14px) calc(100% * 7 / 12 - 10px);
    column-gap: 24px;
  }
  .broker--reverse {
    grid-template-columns: calc(100% * 7 / 12 - 10px) calc(100% * 5 / 12 - 14px);
  }
  .broker--reverse .broker__media { order: 2; }
}
@media (min-width: 992px) {
  .broker__media { margin-bottom: 0; }
}

.broker__name {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: var(--ls-tight);   /* -0.05em: -1.5px at 30px, -1.39 at 27.86 */
  color: var(--ink);
}

.broker__role {
  display: block;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 27px;
  text-transform: uppercase;
  /* Measured -0.98px at 14px and at 13px — fixed, not an em. Counter-
     intuitive for a small caps label — the usual trap is tracking these
     open, and the original tracks them tight. */
  letter-spacing: -0.98px;
  color: var(--blue);
}

/* 20px between paragraphs. The last one's margin collapses into the rule's
   44px, so the rule sits 44px under the bio either way. */
.broker__bio p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 26px;
}

/* The original's hr.tall: 1px of rgba(0,0,0,.08) — darker than the rows'
   .06 border, which is --line-soft — 44px above and below. */
.broker__rule {
  height: 1px;
  margin: 44px 0;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
}

/* "More" on /brokers/. The button is .btn--compact (button.css); this is
   only the original's 1rem mb-3 under it, below 992px. */
.broker__more { margin-bottom: 16px; }
@media (min-width: 992px) {
  .broker__more { margin-bottom: 0; }
}

@media (max-width: 575px) {
  .broker { padding: 29.715px 0; }
  .broker__media { margin-bottom: 22.286px; }
  .broker__more { margin-bottom: 14.857px; }
  .broker__name { font-size: 27.8571px; }
  .broker__role { font-size: 13px; line-height: 24.75px; }
  .broker__bio p { font-size: 13px; margin-bottom: 18.572px; }
}

/* Contact details for a profile, for when the client supplies them. No
   page uses it today (README, open decision 7). */
.broker__contact {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.broker__contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.broker__contact a { color: var(--ink); font-weight: 600; }
.broker__contact a:hover { color: var(--blue); }

/* ---- "Related Members" on each profile --------------------------------
   The original: h4 "Related <strong>Members</strong>" 35px under the
   profile, then an Owl carousel of the other brokers' cards, 24px apart —
   4 slots at 992 and up, 3 at 768-991 (so every card shows), 2 at 576-767
   and 1 below 576. Below 768 it swipes, with pagination dots under it.
   Here it is a plain grid with the same tracks from 768px up; below 768
   the cards wrap (2-up, then 1-up) instead of swiping, so every card shows
   without a swipe or JavaScript. No LinkedIn circle: every one of the
   original's links is href="#". */
.related-brokers { margin-top: 35px; }

.related-brokers__title {
  margin: 0 0 14px;
  font-size: 16.8px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.98px;
  text-transform: uppercase;
  color: var(--ink);
}
.related-brokers__title strong { font-weight: 800; }

.related-brokers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) {
  .related-brokers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .related-brokers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .related-brokers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.broker-card { text-align: center; }
.broker-card__link { display: block; color: inherit; }

/* The portrait zooms to 1.1 inside its square on hover, over .3s, as the
   original's .thumb-info does; keyboard focus zooms it too. */
.broker-card__img {
  display: block;
  overflow: hidden;
  line-height: 0;
}
.broker-card__img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s;
}
.broker-card:hover .broker-card__img img,
.broker-card__link:focus-visible .broker-card__img img { transform: scale(1.1); }

/* (0,2,0), so neither the h3 rule in base/typography.css (0,0,1) nor
   reset.css's p and p:last-child (up to (0,1,1)) can win: the role is the
   link's last child, and p:last-child would take its 6px margin away. */
.broker-card .broker-card__name {
  margin: 20px 0 0;
  font-size: 19.6px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.98px;
  color: var(--ink);
}
.broker-card .broker-card__role {
  margin: 0 0 6px;
  font-size: 12.6px;
  font-weight: 600;
  line-height: 12.6px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--body);
}
.broker-card .broker-card__excerpt {
  margin: 0;
  padding: 10px 0;
  font-size: 16.8px;
  line-height: 30.24px;
  color: var(--body);
}

@media (max-width: 575px) {
  .related-brokers__title { font-size: 15.6px; line-height: 24.75px; }
  .broker-card .broker-card__name { font-size: 18.2px; line-height: 24.75px; }
}

@media (prefers-reduced-motion: reduce) {
  .broker-card:hover .broker-card__img img,
  .broker-card__link:focus-visible .broker-card__img img { transform: none; }
}

/* ---- components/carousel.css ---- */
/* ---- insurer logo strip --------------------------------------------------
   Original: an Owl carousel of 15 insurer logos on a #cccccc band — 6 in view
   at 1164px and up, 4 at 992-1163, 3 at 768-991, 2 at 576-767, 1 below (each
   boundary probed on both sides; the 6 follows the container's 1164 step) —
   stepping one logo to the left every 2000ms with a 0.25s slide, looping, no
   arrows, no dots, drag disabled, pausing on hover.

   Rebuilt in CSS: a stepped animation of one track, no per-slide state, so it
   cannot get stuck part-way, and it still steps with JS off. 30-carousel.js
   only duplicates the track so the loop is seamless.

   Note the logos are a trust signal, not decoration, so each carries a real
   alt attribute. On the original every one is alt="".
   -------------------------------------------------------------------------- */

/* Geometry, measured at 390-1920: the carousel spans the viewport minus 24px
   each side (20px at <=575); the visible window is inset another 100px each
   side (Owl's stagePadding): 1192px at 1440, 1672 at 1920, 150 at 390. The
   tiles are square and fill the window exactly, 10px apart: 190.33px at
   1440, 270.33 at 1920, 178.5 at 992, 150 at 390. The band is the tile plus
   20px of grey under it (the carousel's margin-bottom): 210.34px at 1440. */
.logo-strip {
  padding: 0 24px 20px;
  background: var(--line);
  overflow: hidden;
}
@media (max-width: 575px) {
  .logo-strip { padding-inline: 20px; }
}

.logo-strip__viewport {
  position: relative;
  overflow: hidden;
  margin-inline: 100px;
  container-type: inline-size;
}

/* --pitch is one tile plus its 10px gap: (window - (n - 1) x 10px) / n +
   10px, in container units of the window. */
.logo-strip__track {
  --n: 6;
  --pitch: calc((100cqw - (var(--n) - 1) * 10px) / var(--n) + 10px);
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-step 30s infinite;
}
@media (max-width: 1163px) { .logo-strip__track { --n: 4; } }
@media (max-width: 991px)  { .logo-strip__track { --n: 3; } }
@media (max-width: 767px)  { .logo-strip__track { --n: 2; } }
@media (max-width: 575px)  { .logo-strip__track { --n: 1; } }

.logo-strip__viewport:hover .logo-strip__track,
.logo-strip__viewport:focus-within .logo-strip__track {
  animation-play-state: paused;
}

.logo-strip__item {
  flex: 0 0 auto;
  width: calc(var(--pitch) - 10px);
  margin-right: 10px;
}
.logo-strip__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* 15 steps of one pitch, 2s each: hold 1.75s (5.8333% of 30s), slide 0.25s
   (0.8333%) with the default ease, as Owl's `all 0.25s ease`. After 15 steps
   the track has moved exactly the first copy's length, so the duplicate
   30-carousel.js appends sits where the first copy began and the loop has no
   seam. Without the duplicate (JS off) the last few steps show a part-empty
   window before the jump back. The 15 is the number of logos in index.html:
   change one and change the other. */
@keyframes logo-step {
  0%, 5.8333%        { transform: translateX(0); }
  6.6667%, 12.5%     { transform: translateX(calc(var(--pitch) * -1)); }
  13.3333%, 19.1667% { transform: translateX(calc(var(--pitch) * -2)); }
  20%, 25.8333%      { transform: translateX(calc(var(--pitch) * -3)); }
  26.6667%, 32.5%    { transform: translateX(calc(var(--pitch) * -4)); }
  33.3333%, 39.1667% { transform: translateX(calc(var(--pitch) * -5)); }
  40%, 45.8333%      { transform: translateX(calc(var(--pitch) * -6)); }
  46.6667%, 52.5%    { transform: translateX(calc(var(--pitch) * -7)); }
  53.3333%, 59.1667% { transform: translateX(calc(var(--pitch) * -8)); }
  60%, 65.8333%      { transform: translateX(calc(var(--pitch) * -9)); }
  66.6667%, 72.5%    { transform: translateX(calc(var(--pitch) * -10)); }
  73.3333%, 79.1667% { transform: translateX(calc(var(--pitch) * -11)); }
  80%, 85.8333%      { transform: translateX(calc(var(--pitch) * -12)); }
  86.6667%, 92.5%    { transform: translateX(calc(var(--pitch) * -13)); }
  93.3333%, 99.1667% { transform: translateX(calc(var(--pitch) * -14)); }
  100%               { transform: translateX(calc(var(--pitch) * -15)); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
  .logo-strip__viewport { overflow-x: auto; }
}

/* ---- components/form.css ---- */
/* ---- forms ---------------------------------------------------------------
   Original: Forminator's "flat" design, sitting straight on the white page —
   no card, no shadow. Measured the same on six of the eight forms
   (2026-09-30: /contact/ at 360-1920px, auto at 390-1920, farm at 390 and
   1440, commercial-vehicle, home and business at 1440):
     title      45px / 400 / line-height 1 / -0.05em, #333
     rule       an 8px blue bar (a 4px border on every side of a 0-height hr)
     subtitle   18px / 400 / -0.05em, #333
     labels     12px / 700, #777771; the asterisk #e04562 (drawn #d2405c
                here — see .req below)
     fields     #ededed, no border, padding 10px, 16px text in #000
   Rows are the plugin's own grid: one, two or three equal columns with a
   30px gap, 30px between rows. At 782px and below every row stacks and the
   30px spacings become 20px (the plugin's own breakpoint; measured at 782
   and 783).

   The original <form> carries style="display:none" and is revealed by
   JavaScript — with JS off there is no form on the page at all. This one is
   plain HTML and works without JS; the script only adds async submission.
   -------------------------------------------------------------------------- */

/* The original form box has padding 0 75px 50px inside a 12px transparent
   border, at every width:
     top 12     the border. On /contact/ the form's own section is the one
                lifted into the banner (page-banner.css), its content 84px
                below the white panel's top, so the title lands 96px below
                it, as on the original.
     sides 87   75 + 12: content 942px wide in the 1140 container, 762 in the
                960 one. Not applied below 992px, where the original keeps it
                and squeezes the form to 176px at 390 (a deliberate
                difference).
     bottom 92  the last row's 30px margin + 50 + 12, measured between the
                submit button and the box's bottom at every width. */
.form-panel {
  padding: 12px 0 92px;
}
@media (min-width: 992px) {
  .form-panel { padding: 12px 87px 92px; }
}

/* 45px from 576px up, as measured at every width from 576 to 1920. Below
   576 it scales down to 30px at 360, where the original stays at 45px and
   wraps the contact title to six lines in its 176px column (a deliberate
   difference). Still an <h2>. */
.form-title {
  margin: 0;
  font-size: clamp(1.875rem, 0.3125rem + 6.944vw, 2.8125rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #333;
}
/* The blue rule under the form title: height 0 and a 4px border on all four
   sides, so it paints 8px, as the original's does. */
.form-rule {
  width: 100%;
  height: 0;
  margin: 30px 0;
  border: 4px solid var(--blue);
  background: none;
  opacity: 1;
}

/* "Please fill in these fields" on /contact/, and the section headings of
   the quote forms ("Name on Registration", "Vehicle Information", …). */
.form-subtitle {
  margin: 0 0 30px;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: #333;
}

/* A row of two or three fields, in equal columns however narrow the form
   is — the plugin's col-6 / col-4 — and stacked at 782px and below. */
.form-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: 30px;
}

.field { margin-bottom: 30px; }

.field label {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
  color: #777771;
}
/* The original's asterisk is #e04562, 4.04:1 on white — under AA's 4.5:1
   for 12px text. #d2405c is the same hue (348.5 against 348.8 degrees) at
   4.54:1 (a deliberate difference). */
.field .req { color: #d2405c; }

/* Block, not the default inline-block: an inline control sits on a text
   line, and the line's descender space adds ~8px under a textarea. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background-color: #ededed;
  font-family: var(--font);
  /* 1rem minimum, or iOS Safari zooms the page on focus. */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #000;
  transition: background-color var(--transition);
}
/* The original greys the field a shade darker on focus and shows nothing
   else. The darker shade is kept; so is the 2px outline from reset.css,
   which the original lacks. */
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  background-color: #e6e6e6;
  outline-offset: 0;
}
.field textarea {
  min-height: 140px;
  line-height: 20px;
  resize: vertical;
}
/* With the text inputs' padding and line-height, Chrome's native date field
   measured 42.8px tall; pinned to their 40.8 (20.8 + 2 x 10). */
.field input[type="date"] { height: 40.8px; }

/* The original's selects are select2 boxes: 38px tall, #ededed, the text
   (the prompt too: "Province", "Type of Farm", …) 16px black and 8px in, and
   a thin #777771 chevron 13px in from the right. Reproduced on the native
   <select>, which keeps the keyboard and the phone's own picker; the chevron
   is an inline SVG (no request; img-src allows data:). */
.field select {
  height: 38px;
  padding: 0 35px 0 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777771' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 7px;
  cursor: pointer;
}
/* The original's #888 is 3.03:1 on #ededed. #676767 is 4.83:1 on it, and
   4.53:1 on the focused #e6e6e6, where the placeholder is still showing
   (a deliberate difference). */
.field input::placeholder,
.field textarea::placeholder {
  color: #676767;
  opacity: 1;
}

.field-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #777771;
}

@media (max-width: 782px) {
  .form-row { display: block; }
  .field { margin-bottom: 20px; }
  .form-rule { margin: 20px 0; }
  .form-subtitle { margin-bottom: 20px; }
}

/* Honeypot. Hidden from people, not from bots — so it keeps a normal size and
   is moved off-screen rather than collapsed to 1x1. A collapsed input is both
   a hint to bots and a sub-minimum tap target in any audit. The class is the
   template's contract name; the rule is this site's own, not the template's
   1x1 one, for that reason. */
.form-hp {
  position: absolute;
  left: -5000px;
  top: auto;
  width: 200px;
  height: 40px;
  overflow: hidden;
}

.form-status {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  font-size: var(--fs-body);
  display: none;
}
.form-status.is-ok  { display: block; background: #e8f5ec; color: #17603a; }
.form-status.is-err { display: block; background: #fdecec; color: #8c1c1c; }

/* ---- consent: the quote forms' Terms and Conditions ---------------------
   On six of the seven quote forms; the business form has none, as on the
   original. As there: "Terms and Conditions *" as a small label, then the
   tick box with the agreement and its two paragraphs beside it, 14px black.
   The label is a <legend>, so it names the group; the paragraphs describe
   the checkbox (aria-describedby).

   The tick box is the browser's own at 24x24, the WCAG 2.2 minimum. The
   original draws a 20x20 grey square; 24 + a 6px gap puts the text where
   the original's is, 30px in.

   The fieldset's margin is zeroed on the sides only: .field sets its bottom
   margin, and steps it at 782px. The radio group below is a fieldset too. */
.field--consent,
.field--radio {
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
}
.field-legend {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
  color: #777771;
}
.field--check {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.field--check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  /* centred on the first 26px line of the text beside it */
  margin: 1px 0 0;
  accent-color: var(--blue);
}
.field--check__text {
  flex: 1 1 auto;
  min-width: 0;
}
.field--check label,
.field--check p {
  display: block;
  margin: 0 0 20px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 26px;
  color: #000;
}
.field--check p:last-child { margin-bottom: 0; }

/* ---- a radio group: the home form's Soft Credit Checks ------------------
   As on the original (measured at 1440 and 390): the question as the small
   label, then Yes and No stacked, each a 20px grey (#ededed) circle and 14px
   black text 10px after it, 40px apart; the first circle 10px under the
   label, the next field's label 30px under the last circle (20px at 782px
   and below). Checked, the original paints a 10px #17a8e3 dot, 2.3:1 on the
   grey; the dot here is the brand blue, 6.5:1 (a deliberate difference).

   Each option is a <label> 24px tall around its 20px circle, the target
   minimum. The label boxes are 16px apart and the fieldset's bottom margin
   is 2px short of .field's, so every circle and the next label land where
   the original's do. */
.field--radio { margin-bottom: 28px; }
.field .field-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  margin: 16px 0 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  color: #000;
  cursor: pointer;
}
.field .field-legend + .field-radio { margin-top: 8px; }
.field--radio input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  border-radius: 50%;
  background: #ededed;
  cursor: pointer;
}
.field--radio input[type="radio"]:checked {
  background: radial-gradient(circle closest-side, var(--blue) 0 4.5px, #ededed 5px);
}
@media (max-width: 782px) {
  .field--radio { margin-bottom: 18px; }
}

/* Turnstile renders its own iframe into this div, so the box is not ours to
   style — but its SIZE is ours to reserve. Without a reserved box the div is
   0px until api.js loads and then jumps to 300x65, shoving the submit button
   down the page just as someone reaches for it. 300x65 is the "normal" widget,
   the default when data-size is not set.
   On /contact/ the original's reCAPTCHA row is 60px with a row margin on
   either side, 120px from the field above to the button (100px at 782px and
   below). 25px (15px) under the 65px widget keeps the button on the same
   line. The quote pages' reCAPTCHA is a badge fixed in the window's corner,
   so there this row is extra height the original does not have. */
.cf-turnstile {
  min-height: 65px;
  margin: 0 0 25px;
  /* Turnstile draws inside a closed shadow root (the div it adds has no
     children the page can see), and this box measured 73px, not 65 — the
     same text-line gap as under an inline textarea. line-height inherits
     into a shadow root; 0 brought the box to 65. */
  line-height: 0;
}
@media (max-width: 782px) {
  .cf-turnstile { margin-bottom: 15px; }
}

/* ---- /contact/: the location block under the form -----------------------
   One white section, as on the original: the form, a faint rule, then "Our
   Location" and the address. The section is the lifted first section after
   the banner (page-banner.css), which sets its top and background. */
.section--contact { padding-bottom: 73px; }

.contact-sep {
  height: 1px;
  margin: 64px 0 48px;
  border: 0;
  background: var(--line-soft);
}

/* 48px from the intro to the address. The original steps it to 44.57px at
   575px and below (measured at 360 and 390); this reaches that at 360 and
   eases up to 48 at 576, as tokens.css does with the type. */
.contact-head { margin-bottom: clamp(2.7856rem, 2.4283rem + 1.588vw, 3rem); }
/* The original keeps 16px under "Our Location" at every width;
   .section-title's 0.5em shrinks with the heading below 576px (15.11 at
   390). */
.contact-head .section-title { margin-bottom: 16px; }
.contact-head .section-intro {
  font-size: 1.05rem;      /* 16.8px */
  line-height: 1.8;        /* 30.24px */
}

/* A column of two flex items, not text lines: an inline-flex link on a line
   of its own made the address 3px taller than the link. */
.contact-address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}
.contact-address__line {
  display: block;
  margin: 0 0 20px;
  font-size: 1.18125rem;   /* 18.9px */
  font-weight: 700;
  line-height: 26px;
  color: var(--ink);
}
/* (0,2,1): utilities.css's a[href^="tel:"] is (0,1,1) and loads last. */
.contact-address a.contact-address__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  font-size: 1.18125rem;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-alt);
}
.contact-address a.contact-address__phone:hover { color: var(--blue); }
/* The handset stays black when the number turns blue, as the original's
   does: there it sits outside the link. The 1px margin centres it 5.5px
   down the 24px line, where the original's glyph paints. */
.contact-address__phone svg {
  flex: none;
  margin-top: 1px;
  color: #000;
}

/* ---- components/dark-band.css ---- */
/* ---- CTA band ------------------------------------------------------------
   The blue band above the footer. Measured on the original (2026-09-30, at
   360-1920): full width, padding 74px 0 at EVERY width, background #0047bb
   (its own colour, not the brand blue: 25 units less red and 9 less blue
   than #1947c4). 290px tall from 1164px up; stacked, 338 where the statement
   fits on one line (measured at 991-1163) and 380 where it takes two
   (576-768); 436.27 at 575 and 504.27 at 390.

   Two columns (Bootstrap col-xl-7 / col-xl-5) from 1164px, the width at
   which the original's xl columns start — with its container, not at
   Bootstrap's 1200. Below that the copy and the action row stack and centre.
   -------------------------------------------------------------------------- */

.cta-band {
  padding: 74px 0;
  background: var(--blue-band);
  color: var(--white);
}

.cta-band__inner { text-align: center; }
/* A grid item from 1164px: let it be narrower than its longest word rather
   than push past its 641px track. */
.cta-band__copy { min-width: 0; }

/* The hierarchy here is deliberate and easy to get backwards. On the original
   "Looking for affordable insurance?" is a SMALL uppercase kicker (16.8px/500)
   and "Tell us what you need…" is the large statement under it (30.8px/700) —
   nearly twice the size. Setting both to 30px, as the first build did, makes
   the kicker compete with the statement. Measured at 1440 and at 360. */
.cta-band h2 {
  margin: 0 0 4px;
  color: var(--white);
  font-size: var(--fs-cta-head);
  font-weight: 500;
  line-height: var(--lh-cta-head);
  letter-spacing: -0.84px;           /* px on the original: the same at 15.6px */
  text-transform: uppercase;
}
.cta-band__lead {
  margin: 0 0 4px;
  font-size: var(--fs-cta-lead);
  font-weight: 700;
  line-height: var(--lh-cta-lead);   /* 42px at both 30.8 and 28.6 */
  letter-spacing: -1.54px;           /* px on the original: the same at 28.6px */
  color: var(--white);
}
.cta-band__sub {
  margin: 0;
  font-size: var(--fs-hero-sub);     /* 16.8px, same step as the kicker */
  font-weight: 600;
  line-height: var(--lh-hero-sub);   /* 26px */
  color: rgba(255, 255, 255, 0.8);   /* original: #FFFFFFCC */
}

/* The phone block and the button on one line, 24px under the copy. On the
   original the block sits 3px lower than the button (the two are
   inline-blocks on one line), so the row is 66px tall. */
.cta-band__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: 24px;
}

/* .cta-band in front: utilities.css's a[href^="tel:"] is (0,1,1) and loads
   last, so a plain .cta-band__phone would lose display and align-items to
   it. 198.63 x 63 on the original: a 42px icon box, 1px, the text; padding
   7/36/14/0, margins 0 48 0 14, and a 1px #555 rule on the right. */
.cta-band .cta-band__phone {
  display: flex;
  align-items: flex-start;
  min-height: 0;
  margin: 3px 48px 0 14px;
  padding: 7px 36px 14px 0;
  border-right: 1px solid #555555;
  color: var(--white);
  text-align: left;
}
.cta-band .cta-band__phone:hover { color: var(--white); }
/* White, as .btn--light's: the site's --blue ring on this --blue-band
   background is 1.05:1, all but invisible. */
.cta-band .cta-band__phone:focus-visible { outline-color: var(--white); }
.cta-band__phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin-right: 1px;
}
.cta-band__phone-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}
.cta-band__phone-text { display: flex; flex-direction: column; }
.cta-band__phone-label {
  margin-top: 3px;
  font-size: 0.7875rem;              /* 12.6px */
  font-weight: 500;
  line-height: 12.6px;
  text-transform: uppercase;
}
.cta-band__phone-number {
  margin-top: 1px;
  font-size: 1.05rem;                /* 16.8px */
  font-weight: 700;
  line-height: 24px;
}

/* From 1164px: col-xl-7 (641px of copy at the 1140 container) beside
   col-xl-5, 24px apart, the action column centred on the copy. */
@media (min-width: 1164px) {
  .cta-band__inner {
    display: grid;
    grid-template-columns: calc(58.3333% - 10px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: center;
    text-align: left;
  }
  .cta-band__action {
    justify-content: flex-start;
    margin-top: 0;
  }
}

/* 575px and below. The three lines step down by Porto's 0.9286 in one go,
   as the original's do. The tokens' clamp() reaches these sizes only at
   360px and is up to 2.2px larger in between: measured at 405 and 410px,
   that put the statement on three lines and the sub-line on two, and the
   band 68px taller than the original's.
   The phone block loses its padding, margins and rule and sits centred above
   the button, 20px apart. The original leaves the button left-aligned under
   it (a page-builder accident); it is centred here. The 24px gap shrinks
   with Porto's smaller root font size, to 22.29px. */
@media (max-width: 575px) {
  .cta-band h2,
  .cta-band__sub { font-size: calc(1.05rem * 0.9286); }      /* 15.6px */
  .cta-band__lead { font-size: calc(1.925rem * 0.9286); }    /* 28.6px */
  .cta-band__action {
    flex-direction: column;
    align-items: center;
    margin-top: 22.29px;
  }
  .cta-band .cta-band__phone {
    margin: 0 0 20px;
    padding: 0;
    border-right: 0;
  }
}

.narrow {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- components/footer.css ---- */
/* ---- footer --------------------------------------------------------------
   Original: a white band. The centred logo at 261x300, then three columns
   (intro + contact / Navigation / Insurance Products), the centred Facebook
   image, a #555 rule, the copyright, and the developer credit with its bulb.
   Its arc art sits past the container's right edge, top right: on screen
   from ~1303px up, plus a sliver at 1123-1163px.

   Every figure below was measured on the original (headless Chrome,
   2026-09-30, at 360-1920). The whole band is 1137px tall at 1164px and up,
   1141.5 at 992-1163 (two product names wrap there), 1238 at 768-991, 1752
   at 576 and 1725.41 at 390.

   The original's spacing comes from Porto's rem values, and Porto sets the
   root font size 0.9286 times smaller at 575px and below, so every rem-based
   gap shrinks there while the px ones do not. The two steps are written out
   as two sets of values; the <=575px block at the end of this file holds the
   small-screen set.
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  /* The original's logo starts 86px down (its row's padding is 51px of
     that), and the band ends 81px under the bulb. */
  padding: 86px 0 81px;
  background: var(--white);
  overflow: hidden;
}

/* The footer's arc art (line-motif.css draws it). On the original it is
   400px wide, 380px above the footer's top, its left edge 93px past the
   container's content edge — so from 1164px up at 50% + 651px. The part
   above the footer is under the CTA band there; here the footer's
   overflow:hidden clips it, which paints the same. Nothing hides it on the
   original: it is simply past the right edge below 1303px — except at
   1123-1163px, where the 960px container brings up to 20.5px of it into view.
   Hidden here below 1200 (decision F3), which drops that sliver. */
.line-motif--footer {
  top: -380px;
  right: calc(50% - 1051px);
  width: 400px;
  height: 549.05px;            /* 400 x 539.93 / 393.35, the viewBox's ratio */
}
@media (max-width: 1199px) {
  .line-motif--footer { display: none; }
}

.footer-logo { margin-bottom: 35px; }
.footer-logo img {
  display: block;
  margin: 0 auto;
  /* min() not clamp(): the original renders this at its natural 261px and only
     needs to shrink on a narrow screen. A vw-based clamp stopped at 259.2px. */
  width: min(var(--logo-w-footer), 100%);
  height: auto;
  /* The original's file is 261x300; logo-full.png is 1394x1600, which would
     make the box 299.56 tall. The box keeps the original's ratio and the
     image is fitted inside it (0.2px each side). */
  aspect-ratio: 261 / 300;
  object-fit: contain;
}

/* Bootstrap's col-md-4 / col-md-8 (two col-md-6): three equal columns with
   24px gutters from 768px, stacked below. With the container's own steps
   this lands every column on the original's x at every width. */
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* The intro starts 17px below the column headings' top. */
.footer-about { padding-top: 17px; }
.footer-about p { margin: 0 0 30px; }

.footer-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 24px rows 48px apart. The last row keeps its margin: from 1164px, where
   the intro column is the tallest, it is the gap to the Facebook image;
   stacked, it is the first half of the gap to the Navigation heading. */
.footer-contact li {
  display: flex;
  align-items: center;
  margin: 0 0 24px;
  line-height: 24px;
}
/* The original's icons are Simple Line Icons font glyphs at 18.9px, drawn
   in Chrome's synthetic bold (weight 700 on a one-weight font). The same
   paths are stroked here, 42 units on the envelope and 48 on the phone
   (footer.html), to paint about as heavy: ink against the original's, in
   headless Chrome on macOS, 2026-09-30, envelope 99.8% at 1x and 97.4% at
   2x, phone 93.8% at 1x and 106.1% at 2x (no one width fits both). */
.footer-contact svg {
  flex: 0 0 auto;
  width: 18.9px;
  height: 18.9px;
  margin: 2px 12px 0 0;
  color: #000000;
}
/* .site-footer in front: utilities.css's a[href^="tel:"] is (0,1,1) and loads
   last, so a plain .footer-contact a would lose display and min-height to it
   on the phone row. */
.site-footer .footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 1.063125rem;      /* 17.01px */
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-alt);
  /* Wrap rather than overflow — a long email on a 360px screen is the most
     common source of horizontal scroll in a footer. */
  overflow-wrap: anywhere;
}
.site-footer .footer-contact a:hover { color: var(--blue-band); }

/* Stacked, the Navigation column sits 24px (Bootstrap's pt-4) under the
   contact rows, and each list ends 19px above what follows it. The two list
   columns share a row with a 36px bottom margin on the original, so the
   Products column ends 55px under its list. From 768px, where the two stand
   beside the intro, that row ends 55px under the longer list, so both
   columns get the 55px. */
.footer-col { padding-bottom: 19px; }
.footer-col--nav { padding-top: 24px; }
.footer-col--products { padding-bottom: 55px; }
@media (min-width: 768px) {
  .footer-col--nav { padding-top: 0; }
  .footer-col { padding-bottom: 55px; }
}

/* The original's heading margin is 16px, and its list sits 4px lower still
   (an empty paragraph's 20px margin wins over the 16px). Written as one 20px
   margin here. */
.footer-col__title {
  margin: 0 0 20px;
  font-size: 1.1025rem;        /* 17.64px at every width */
  font-weight: 700;
  line-height: normal;         /* a 27px box */
  letter-spacing: -0.88px;
  color: var(--ink-alt);
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 29px rows 37px apart: a 24px line, 5px of padding, 8px of margin. A flex
   row so the row's height is the link's, not a line box's. */
.footer-links li {
  display: flex;
  margin: 0 0 8px;
  padding-bottom: 5px;
  break-inside: avoid;
}
/* inline-flex + min-height, not padding: a bare inline <a> measures only as
   tall as its text (17px here), which fails WCAG 2.2 SC 2.5.8's 24x24 minimum.
   These are standalone links in a list, not words in a sentence, so the
   inline-link exemption does not apply to them.
   The body grey #777 (4.48:1 on white, itself a hair under AA's 4.5), not
   the original's #969696 (2.96:1). */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.7875rem;        /* 12.6px */
  line-height: 24px;
  color: var(--body);
}
.footer-links a:hover { color: var(--blue); }
/* The original's last Products item has no padding class, so its row is
   24px tall with a 5px margin — and that is what makes the two-column split
   3|4 rather than 4|3. */
.footer-links--products li:last-child {
  padding-bottom: 0;
  margin-bottom: 5px;
}

/* Two columns from 992px only (the original's columns-lg-2); one below.
   In one column the last row's margin must not add to the column: on the
   original it merges with the 19px that follows the list. In two it stays:
   at 992-1163, where two product names wrap, the original's list is 149.5px
   tall — half its content with that 5px margin — and without the margin
   this one measures 147. */
.footer-links--split { column-gap: 13px; }
@media (min-width: 992px) {
  .footer-links--split { columns: 2; }
}
@media (max-width: 991px) {
  .footer-links li:last-child { margin-bottom: 0; }
}

.footer-social {
  display: flex;
  justify-content: center;
  margin-bottom: 59px;
}
/* On the original this is a 96px image inside an inline <a> whose box is
   only 96x17 and whose label reads "Zoom the image". The same 96px image
   here, as a 96x96 block link labelled for what it is. Same tab, as the
   original. */
.footer-social-link {
  display: block;
  width: 96px;
  height: 96px;
}
.footer-social-link img {
  display: block;
  width: 96px;
  height: 96px;
}

.footer-bottom {
  padding-top: 46px;
  border-top: 1px solid #555555;
  text-align: center;
}
/* 24px under it: the original's 4px padding plus a 20px margin. */
.footer-copyright {
  margin: 0 0 24px;
  font-size: 0.7875rem;        /* 12.6px at every width */
  line-height: 26px;
  color: #555555;
}

/* The credit, as the original shows it: #555 text with a pure-blue link that
   keeps its colour on hover (the original sets it inline). */
.footer-credit__line {
  margin: 0 0 20px;
  font-size: 0.7875rem;
  line-height: 26px;
  color: #555555;
}
.footer-credit__line a,
.footer-credit__line a:hover { color: #0000ff; }
/* A 24px target without moving anything: vertical padding on an inline box
   does not change the height of its line. */
.footer-credit__line a { padding: 4px 0; }

.footer-credit img {
  display: block;
  margin: 0 auto;
  width: 90px;
  height: 90px;
}

/* ---- 575px and below --------------------------------------------------
   Porto's smaller root font size: every rem-based gap x 0.9286 (24 -> 22.29,
   30 -> 27.86, 20 -> 18.57, 8 -> 7.43), and the three offsets that come from
   an empty paragraph's 1.25rem margin lose 1.43px (17 -> 15.57, 19 -> 17.57,
   20 -> 18.57). The link lists step to 11.7px on a 22px line, the contact
   links to a 22px line, the credit line to 11.7px. The px values (the 86px
   top, 35 and 59px gaps, 16px heading margin, 5px padding) do not change. */
@media (max-width: 575px) {
  .site-footer { padding-bottom: 79.57px; }

  .footer-about { padding-top: 15.57px; }
  .footer-about p { margin-bottom: 27.86px; }
  .footer-contact li {
    margin-bottom: 22.29px;
    line-height: 22px;
  }
  /* A 22px row, as the original's, while the link keeps a 24px target: the
     -1px margins take back the 2px min-height adds. */
  .site-footer .footer-contact a {
    line-height: 22px;
    margin: -1px 0;
  }

  .footer-col { padding-bottom: 17.57px; }
  .footer-col--nav { padding-top: 22.29px; }
  .footer-col--products { padding-bottom: 53.57px; }
  .footer-col__title { margin-bottom: 18.57px; }

  /* 27px rows 34.43px apart. */
  .footer-links li { margin-bottom: 7.43px; }
  .footer-links a {
    font-size: 0.73125rem;     /* 11.7px */
    line-height: 22px;
    margin: -1px 0;
  }

  .footer-copyright { margin-bottom: 22.57px; }
  .footer-credit__line {
    margin-bottom: 18.57px;
    font-size: 0.73125rem;
  }
}

/* ---- back to top --------------------------------------------------------
   Original #topcontrol: 49x48, fixed, flush with the bottom edge, 10px from
   the right, background rgba(64,64,64,0.75), z-index 1111, a 14px white
   Font Awesome chevron-up that turns #1947c4 on hover (the box does not
   change). Hidden at 767px and below. It is a <div> there, out of reach of a
   keyboard; this is a <button>. The chevron is Font Awesome's own path,
   unstroked (layout.html): the outline the original's font glyph draws.
   10-header.js adds .is-visible past 600px of scroll; 25-to-top.js handles
   the click. */
.to-top {
  position: fixed;
  right: 10px;
  bottom: 0;
  z-index: 1111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 48px;
  padding: 0;
  border: 0;
  background: rgba(64, 64, 64, 0.75);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), color var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { color: var(--blue); }
/* Inset and white. The site's usual ring sits outside the box, so its
   bottom side would fall below the viewport; inset, blue on this grey is
   1.55:1, white 4.95:1 (over a white page). */
.to-top:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -4px;
}
@media (max-width: 767px) {
  .to-top { display: none; }
}

/* ---- components/home.css ---- */
/* ---- homepage body: the sections below the hero --------------------------
   Measured on the original 2026-09-29/30 at 390-1920. Every rule here but
   the reveal variant at the end is scoped to .home-why or .home-products:
   .section-head is shared with inner pages (/contact/, /brokers/), and the
   generic .feature-card, .product-card and .grid rules live in card.css and
   layout.css, although today only this page uses them.
   The logo strip between the two sections is carousel.css.
   -------------------------------------------------------------------------- */

/* "Why Do People Choose": the section rises 135px into the hero under the
   white panel (.section--lift, page-banner.css, which also sets the 84px
   from the panel's top to the h2 and a transparent background — keep it
   transparent). 81px from the tallest column's text to the logo band.
   Before it is revealed the right-hand card sits 30px right of its place —
   to x=774 at 768. body's overflow-x: hidden already hides that in Chrome
   (measured with this rule removed); overflow-x: clip keeps the travel
   inside the section rather than relying on it. The panel is never wider
   than the section, so nothing visible is clipped. */
.home-why {
  --lift: 135px;
  padding-bottom: 81px;
  overflow-x: clip;
}

/* "Insurance Products" on #f7f7f7 (.section--soft, not the #f4f4f4 of
   --grey-band): 74px
   above the h2, 90px under the last description. */
.home-products {
  padding: 74px 0 90px;
}

/* Both h2s span the container (1116px at 1440: "Why Do People Choose
   McDonell-Levert Insurance?" is one line there), with 36px and 48px under
   them. The h2's margin collapses through .section-head. */
.home-why .section-head,
.home-products .section-head {
  max-width: none;
  margin-bottom: 0;
}
.home-why .section-title { margin-bottom: 36px; }
.home-products .section-title { margin-bottom: 48px; }

/* One column below 768px and three from 768 (Bootstrap col-md-4), for both
   grids: 24px between columns, 20px between rows and between stacked
   cards. The shared auto-fit grid gave 1 / 2 / 3 columns with switches at
   about 654 and 972. */
.home-why .grid,
.home-products .grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 24px;
}
@media (min-width: 768px) {
  .home-why .grid,
  .home-products .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- the three features ------------------------------------------------- */
.home-why .feature-card__icon { margin: 0 auto 32px; }
.home-why .feature-card h3 { margin-bottom: 16px; }
.home-why .feature-card p {
  font-size: 0.9625rem;          /* 15.4px at every width, the original's inline size */
  line-height: 26px;
}

/* ---- the six products ----------------------------------------------------
   Flat, as on the original: no padding, so the 356px column is the text
   width (card.css's 28px/16px made every card 252px tall at 1440), and no
   white wash on hover. At 1440 Farm wraps to 4 lines against the original's
   3 and Business to 3 against 4: the corrected copy ("McDonell-Levert",
   "as it grows") is a little wider or narrower, not the CSS — the line
   counts match at 390 and 576. The lift and the blue title on hover stay
   (card.css). Each link is as tall as its own content, as the original's
   are. The original's one hover change is the description, which follows
   the link's colour to #1c50db (measured with a real pointer; 6.09:1 on
   #f7f7f7). */
.home-products .grid { align-items: start; }
.home-products .product-card { padding: 0; }
.home-products .product-card:hover { background: none; }
.home-products .product-card:hover p { color: #1c50db; }
.home-products .product-card__icon { margin: 0 auto 15px; }
.home-products .product-card h3 { margin-bottom: 16px; }

/* Porto's rem is 14.8576px at 575px and below, and its product description
   steps to 13px/22px there. */
@media (max-width: 575px) {
  .home-why .feature-card h3,
  .home-products .product-card h3 { margin-bottom: 14.8576px; }
  .home-products .product-card p {
    font-size: 0.8125rem;        /* 13px */
    line-height: 22px;
  }
}

/* ---- entrance from above (the hero's INSURANCE) --------------------------
   utilities.css has up, left, right and fade; the original's fadeInDown is
   added here the same way. It needs (0,3,0) because home.css loads before
   utilities.css, whose `.js .reveal` (0,2,0) would otherwise win.
   `.js .reveal.is-visible` in utilities.css is (0,3,0) and loads later, so
   it still clears the travel. With JS off there is no .js class and nothing
   moves; the reduced-motion rule is repeated here for the same reason. */
.js .reveal.reveal--down { transform: translateY(-30px); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal.reveal--down { transform: none; }
}

/* ---- components/about.css ---- */
/* ---- /about-us/, /claims/ and /payment-options/ ---------------------------
   The bodies of the three pages, as the original's Porto rows draw them.
   Measured on mcdonell-levert.ca, 2026-09-30, in headless Chrome at 390, 576,
   768, 991, 992, 1024, 1163, 1200, 1440 and 1920; figures are at 1440 unless
   a width is named.

     .about-top      the first section of each page. It is the section that
                     page-banner.css lifts (.page-banner + .section), so it
                     sets no background and no top margin on its first child:
                     the h2 lands 84px below the white panel's top.
     .about-quote    /about-us/'s pull quote and its author line.
     .about-stats    /about-us/'s four counters; 52-counters.js counts them up.
     .about-acc      /claims/ and /payment-options/: native <details>, all
                     closed as the original's are on load, and they open with
                     JavaScript off.
     .logo-grid      the insurer logos under all three (partials/logo-grid.html).

   The class names carry the file's own prefixes so that no rule here can
   reach another page's markup — the product pages' accordions, for one,
   which are another area's.

   Porto steps some of this down by its 0.9286 factor at <=575px and leaves
   some of it alone; each rule says which. The stepped values are the custom
   properties below, and they step at 575px as Porto's do. tokens.css's
   clamp() form (Porto's value at 360, growing to the full one at 576) is not
   used here: at 390 it set the Cambrian panel's sentence at 28.16px against
   Porto's 27.86, which wrapped it to a seventh line and made that panel 41px
   taller than the original's.
   -------------------------------------------------------------------------- */

.about-top {
  --about-p-gap: 20px;               /* Porto's paragraph margin */
  --about-text: 0.875rem;            /* 14px: the accordion panels' text */
  --about-head: 1rem;                /* 16px: the accordion titles */
  --about-phone: 1.5625rem;          /* 25px: an after-hours number */
  --about-phone-lh: 32px;
  --about-phone-lg: 1.875rem;        /* 30px: the larger ones */
  /* The Contact Us button's bottom to the logo grid's rule: 72px at every
     width, on /claims/ and /payment-options/. */
  padding-bottom: 72px;
}
/* Porto's step, each value measured at 390. */
@media (max-width: 575px) {
  .about-top {
    --about-p-gap: 18.572px;
    --about-text: 0.8125rem;         /* 13px */
    --about-head: 0.9286rem;         /* 14.8576px */
    --about-phone: 1.4509rem;        /* 23.2143px */
    --about-phone-lh: 29.333px;
    --about-phone-lg: 1.7411rem;     /* 27.8571px */
  }
}
/* /about-us/: the counters' bottom to the rule is 84px at every width — the
   original's 35px counter margin plus its row's 49px padding. */
.about-top--counters { padding-bottom: 84px; }

/* Porto's h2 is tracked -1.61px at every width; the site-wide rule tracks it
   -0.05em, which is the same from 576px up and 0.1px looser at 390. */
.about-top .section-title {
  margin-bottom: 20px;
  letter-spacing: -1.61px;
}

/* Paragraphs in the heading block: 14px/26px at every width (not stepped,
   and not the 13.86px body size). */
.about-top__head p {
  margin: 0 0 var(--about-p-gap);
  font-size: 0.875rem;
  line-height: 26px;
}
/* /claims/ "Contact us during business hours at 613-525-2266." — the number
   is a tel: link, which utilities.css makes a 28px-high inline-flex box: in
   a 26px line that grows the line to 28 and moves everything below it down
   2px. The -1px margins keep the 28px target and the original's 26px line. */
.about-top__head a[href^="tel:"] { margin: -1px 0; }
/* The centred line under the h2 — "We pride ourselves on being LOCAL!",
   "Insurance Claims": 18.9px/34.02px at every width, 24px above the next
   line. Not --fs-lead, which steps down below 576px where this does not. */
.about-top__head .about-top__sub {
  margin: 0 0 24px;
  font-size: 1.18125rem;
  line-height: 34.02px;
  text-align: center;
}
/* /about-us/'s intro, centred; 64px to the quote at every width (the
   original's 32px margin plus a 32px spacer). */
.about-top__head .about-top__text {
  margin: 0 0 64px;
  text-align: center;
}

/* ---- the pull quote --------------------------------------------------------
   Playfair Display italic 18.9px/32.13px at every width, indented 36px, with
   a quote mark in the indent. The original asks Font Awesome 5 for that mark
   while loading Font Awesome 6, so it paints an empty 14x13 glyph box; this
   draws the quote mark it meant (a plain SVG path, no icon font). */
.about-quote { margin: 0; }
.about-quote blockquote {
  position: relative;
  margin: 0;
  padding: 8px 16px 0 36px;
}
.about-quote blockquote::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath fill='%23212121' d='M0 12V7.2C0 3.2 2.2.8 5.6 0l.6 1.6C4.4 2.3 3.4 3.6 3.3 5.4H6V12zm8 0V7.2C8 3.2 10.2.8 13.6 0l.4 1.6c-1.8.7-2.8 2-2.9 3.8H14V12z'/%3E%3C/svg%3E") no-repeat center / 14px 12px;
}
.about-quote blockquote p {
  margin: 0;
  font-size: 1.18125rem;
  line-height: 32.13px;
}
/* 29px below the quote, in line with its text: 14px/700, tracked 2px,
   uppercase by CSS so the source stays in normal case. */
.about-quote__author {
  margin: 29px 0 0 36px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 16.8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-alt);
}

/* The logo under the author line: 96x96, 21px below it (19.56 at 390 —
   followed here as the stepped paragraph gap plus 1px) and 35px above the
   counters. */
.about-top__logo {
  display: block;
  width: 96px;
  height: 96px;
  margin: calc(var(--about-p-gap) + 1px) 0 35px;
}

/* ---- counters --------------------------------------------------------------
   No boxes. Four columns from 992px, two at 768-991, one below 768, centred;
   24px between columns, 35px between rows. Each column is indented a little
   less than the one before it — 24, 18, 12, 6px — as the original's are. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 35px 24px;
}
.about-stat:nth-child(1) { padding-left: 24px; }
.about-stat:nth-child(2) { padding-left: 18px; }
.about-stat:nth-child(3) { padding-left: 12px; }
.about-stat:nth-child(4) { padding-left: 6px; }
/* The number and its "+", 56px/700/84px in the CTA band's blue, at every
   width. */
.about-stat__num {
  margin: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 84px;
  color: var(--blue-band);
}
.about-stat__label {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink-alt);
}
@media (max-width: 991px) {
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .about-stats { grid-template-columns: minmax(0, 1fr); }
  .about-stat { text-align: center; }
}

/* ---- accordion (/claims/, /payment-options/) -------------------------------
   Each head is a 73px #f4f4f4 bar the width of the container, 20px apart;
   the title at 30px in, 16px/600/27px tracked -0.8px (14.86px at <=575); a
   "+" 25px from the right edge that turns 45 degrees when open. The first
   head sits 185px below the last paragraph, the button 36px below the last
   head — all at every width. */
.about-acc { margin: 185px 0 0; }
.about-acc__item + .about-acc__item { margin-top: 20px; }

.about-acc__head {
  position: relative;
  display: block;                 /* drops the list-item marker */
  padding: 23px 30px;             /* the original: 13px 10px, then 10px 20px on its link */
  background: var(--grey-band);
  font-size: var(--about-head);
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.8px;
  color: var(--ink-alt);
  cursor: pointer;
  list-style: none;
}
.about-acc__head::-webkit-details-marker { display: none; }   /* Safari */
.about-acc__head::after {
  content: "+";
  position: absolute;
  top: 51%;
  right: 25px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s;
}
.about-acc__item[open] > .about-acc__head::after { transform: translateY(-50%) rotate(45deg); }
/* The original's heads show no focus at all; these get reset.css's
   summary:focus-visible ring. */

/* An open panel: padded 31px 32px 33px 33px at every width. Its paragraphs
   are 14px/26px, stepping to 13px at <=575, as the original's are. */
.about-acc__body { padding: 31px 32px 33px 33px; }
.about-acc--center .about-acc__body { text-align: center; }
.about-acc__body p {
  margin: 0 0 var(--about-p-gap);
  font-size: var(--about-text);
  line-height: 26px;
}
/* Links in a panel's sentence (Burns & Wilcox's "form" and e-mail address):
   at least 24px high, the site's minimum target — staging's .info-card gave
   them the same. Inside a 26px line this adds no height. tel: links are left
   to utilities.css, which already makes them 28px. */
.about-acc__body p a:not([href^="tel:"]) {
  display: inline-block;
  min-height: 24px;
  overflow-wrap: anywhere;
}
/* /claims/: each insurer's logo, 350px wide at most and centred, then its
   after-hours number 20px below it, 25px/700 (23.21px at <=575). Three
   panels set the number as the original's larger heading, 30px/700 (27.86px
   at <=575), with 32px below it: Heartland and Premier (32px below the logo
   too, .about-acc__logo--lg) and Cambrian, which also opens with a sentence
   in that size (.about-acc__statement). */
.about-acc__body .about-acc__logo {
  display: block;
  width: min(350px, 100%);
  height: auto;
  margin: 0 auto 20px;
}
.about-acc__body .about-acc__logo--lg { margin-bottom: 32px; }
.about-acc__body .about-acc__phone {
  margin: 0 0 20px;
  font-size: var(--about-phone);
  font-weight: 700;
  line-height: var(--about-phone-lh);
  letter-spacing: -0.05em;
  color: var(--ink);
}
.about-acc__body .about-acc__phone--lg,
.about-acc__body .about-acc__statement {
  margin: 0 0 32px;
  font-size: var(--about-phone-lg);
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.05em;
  color: var(--ink);
}
/* /payment-options/ e-Transfer: three lines 20px apart, no bullets. */
.about-acc__fields {
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-acc__fields li {
  margin: 0 0 var(--about-p-gap);
  font-size: var(--about-text);
  line-height: 26px;
}

.about-top__cta { margin: 36px 0 0; }

/* ---- the insurer logo grid -------------------------------------------------
   White, under a 1px rule: two rows of six, 24px gutters, 112px between the
   rows, 78px below the rule and 92px above the CTA band. From 768px up the
   logo is the column's width (166px at 1440). Below 768 it is two to a row,
   40px apart — the original stacks them one to a row at the full width
   (350px at 390, 528 at 576), which is 12 logos over ~4,700px of phone
   screen: a deliberate difference. */
.logo-grid-section { padding: 0 0 92px; }
.logo-grid__rule {
  display: block;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line-soft);
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 112px 24px;
  margin: 78px 0 0;
  padding: 0;
  list-style: none;
}
.logo-grid img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
}

/* ---- components/insurance.css ---- */
/* ---- /insurance/ and the seven product pages ------------------------------
   Every value here was measured on the original (mcdonell-levert.ca, Porto
   7.9 with WPBakery) in headless Chrome on 2026-09-29/30, at 360, 390, 576,
   768, 992, 1024, 1163, 1200, 1440 and 1920 — after a full scroll and a
   wait, so the scroll-in animations had run.

   All of it is white: the first section rises into the banner under the
   white panel (page-banner.css, .page-banner + .section — first content 84px
   below the panel's top), and nothing after it has a band of its own.

   Porto steps its rem-based sizes by 0.9286 at 575px and below (its html
   font-size drops); the px values it sets do not move. The ≤575px rules
   below are those steps, value by value, as measured at 390.
   -------------------------------------------------------------------------- */

/* ---- Font Awesome icons (src/partials/icon-fa-*.html) ---------------------
   The original's icons are Font Awesome Free 6.4.2, Solid, drawn from its
   150 KB webfont. Here each is FA's own SVG inline, with FA's licence comment
   kept inside it (icons CC BY 4.0). The partials size themselves in em — 1em
   tall, the glyph's own width — so the font-size where one is used is the
   icon's height. */
.fa-icon {
  display: block;
  flex: none;
  fill: currentColor;
}

/* ---- /insurance/ ------------------------------------------------------------ */

/* The section ends where the Special Event row does: its 26px, then the CTA
   band. The heading and lead are left-aligned and use the full container.
   The heading keeps .section-title's 32.2px/42px/500 with a 700 <strong>. */
.products { padding-bottom: 0; }
.products .products__title { margin: 0 0 20px; }
.products .products__lead {
  margin: 0;                     /* the gap below is .product-list's */
  font-size: 18.9px;             /* at every width — no step at 575 here */
  line-height: 34.02px;
  color: var(--body);
}

/* Under the lead, the original has a second line ("Find out more about the
   products we sell…") that its page builder fades OUT on arrival, so no one
   ever sees it — but it keeps its space. From the lead to the first icon:
   the lead's 24px margin, 26px a line, the line's 32px margin, the grid's
   36px. The line is not reproduced; its space is: 118px. At 14px it takes
   one line in 666px or more, two down to 338.5px, three below that
   (measured on the original's own text), so the gap is 144px below a 714px
   viewport (content = viewport - 48) and 170px below 379px (content =
   viewport - 40). All of it sits here, as one margin: a margin on the lead
   would collapse into this one. */
.product-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 24px;
  margin-top: 118px;
}
@media (max-width: 713px) {
  .product-list { margin-top: 144px; }
}
@media (max-width: 378px) {
  .product-list { margin-top: 170px; }
}

/* Two columns of three, filled top to bottom, then Special Event centred on a
   row of its own — the same order at every width. Each column ends 26px
   below its last item; the Special Event row starts 47px after that. */
.product-list__col { padding-bottom: 26px; }
.product-list__single {
  margin-top: 47px;
  padding-bottom: 26px;
}
@media (min-width: 768px) {
  .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-list__single {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}
/* From 992px each column's box is inset 96px a side (Porto's 48px margin +
   48px padding): items 354px wide at 1440, 264 at 992-1163.
   The Special Event row is not in the page's container on the original, so
   its box follows the viewport, not the container: 50vw - 36px, which is
   what calc(50% - 12px) above already gives below 992px. Its item is
   50vw - 228px: 268 at 992, 284 at 1024, 372 at 1200, 492 at 1440, 732 at
   1920 (all measured). Where a browser draws a classic scrollbar, 50vw
   counts half of it too, so the box is a few px wider there; its content is
   centred, so nothing on screen moves. */
@media (min-width: 992px) {
  .product-list__col,
  .product-list__single { padding-left: 96px; padding-right: 96px; }
  .product-list__single { width: calc(50vw - 36px); }
}
/* Special Event arrives 1.4s after it scrolls in, the original's delay —
   past the reveal steps utilities.css offers (they stop at 1.2s). The
   selector outranks .js .reveal, whose transition shorthand loads later. */
.js .product-list .product-list__single.reveal { transition-delay: 1.4s; }

/* An item is one link: icon, title, "View More" and its arrow — 144px tall,
   20px apart. No description, no card, no hover wash. The arrow moves 7px
   over 0.3s, and only while the pointer is on "View More" itself: on the
   original, hovering the icon or the title moves nothing (measured with a
   real mouse). Keyboard focus shows reset.css's outline around the whole
   item and slides the arrow too; the original shows no focus at all. */
.product-item {
  display: block;
  margin-bottom: 20px;
  text-align: center;
  color: inherit;
}
.product-item__icon {
  display: flex;
  justify-content: center;
  margin: 0 0 15px;
  font-size: 35px;               /* the icon's height: 35px at every width */
  color: var(--blue);
}
.product-item__title {
  margin: 0 0 20px;
  font-size: 21px;               /* at every width */
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -1.05px;
  color: var(--ink);
}
/* 116.6 x 40 on the original: "View More" and a 43.2 x 36 arrow box, the box
   pulled up 1px. The arrow is drawn here, not Porto's icon-font glyph: a
   hairline 26px long with an open head, starting 8px into its box. */
.product-item__more {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0 8px;
  padding-top: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  color: var(--blue);
}
.product-item__arrow {
  display: block;
  flex: none;
  width: 43.2px;
  height: 36px;
  margin-top: -1px;
  transition: transform 0.3s;
}
.product-item__more:hover .product-item__arrow,
.product-item:focus-visible .product-item__arrow { transform: translate3d(7px, 0, 0); }

/* ---- product pages ---------------------------------------------------------
   One lifted section holds everything above the form. Its rhythm is the
   original's rows: a row that ends in coverage bars or a button closes with
   76px of padding (.product-row); every list and small paragraph keeps 35px
   below it. flow-root keeps the last margin inside the section, so the form
   section starts after it. */
.product { padding-bottom: 0; }
.product > .container { display: flow-root; }
.product .product-row { padding-bottom: 76px; }

/* Heading and big icon: two halves from 768px, the icon right-aligned and
   top-aligned; below 768 the icon drops under the heading, still right-
   aligned, with the lead straight after it. */
.product .product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .product .product-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}
/* 48px/40px at every width, #0047bb (the longest rotating words alone
   shrink, below 385px — see the rotator). The name is an inline-block padded
   9.6px top and bottom (59.2px a line); the words follow it, and at every
   width measured they are on a line of their own. */
.product .product-hero__title {
  margin: 0 0 32px;
  font-size: 48px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -2.4px;
  color: var(--blue-band);
}
.product .product-hero__name {
  display: inline-block;
  padding: 9.6px 0;
  margin-right: 6px;
}
.product .product-hero__icon {
  display: flex;
  justify-self: end;
  align-self: start;
  font-size: 72px;               /* the icon's height */
  color: var(--blue-band);
}

/* ---- the word rotator (src/scripts/36-word-rotator.js) ----------------------
   A 59.2px box (40px of word, 9.6px above and below so descenders show)
   holding a track of words, one 40px step each; --step says which step is
   in view. With no script, or under reduced motion, --step is unset: the
   first word shows and the others are transparent. The script adds
   .is-rotating, reorders the track and moves it down a step per change with
   a small overshoot, cross-fading .is-active in and the rest out. The box is
   as wide as the widest word; the original's follows the active word, which
   changes nothing on screen while the words have a line to themselves. */
.word-rotator {
  display: inline-flex;
  align-items: flex-start;
  vertical-align: middle;
  height: 59.2px;
  padding: 9.6px 0;
  overflow: hidden;
}
.word-rotator__track {
  display: block;
  transform: translateY(calc(var(--step, 0) * -40px));
  transition: transform 0.5s cubic-bezier(0.3, 2, 0.6, 1);
}
.word-rotator__word {
  display: block;
  height: 40px;
  font-size: min(1em, calc((100vw - 20px) / var(--rotator-em)));
  font-weight: inherit;
  letter-spacing: -0.05em;       /* -2.4px at 48px, as the heading's; scales with the word */
  white-space: nowrap;
}
/* A word does not wrap, and three are wider than a phone's column: at 48px
   "Entirely Specific" is 351.3px (7.32em) and "Comprehensive" 364.3px
   (7.59em), in a 320px column at 360. The original lets them run into the
   right gutter, which is fine down to the viewport's edge — 372px and 385px
   wide — and below that cuts them off there (at 360 it shows
   "Comprehensiv"). Here a word is 48px wherever the original shows it
   whole, and below that shrinks just enough to end inside the viewport
   (its left gutter is 20px): no letter is cut, and the page does not grow
   wider than the screen. --rotator-em is the widest word's width in em;
   Trusted/Affordable (4.97em) never needs to shrink. */
.word-rotator { --rotator-em: 5; }
.word-rotator--wide { --rotator-em: 7.33; }      /* Entirely Unique / Entirely Specific */
.word-rotator--widest { --rotator-em: 7.6; }     /* Tailored / Comprehensive */
.word-rotator__word + .word-rotator__word { opacity: 0; }
.word-rotator.is-rotating .word-rotator__word {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.word-rotator.is-rotating .word-rotator__word.is-active { opacity: 1; }
.word-rotator .word-rotator__track.is-resetting,
.word-rotator .word-rotator__track.is-resetting .word-rotator__word { transition: none; }

/* ---- lead, call block ------------------------------------------------------- */

.product .product-lead {
  margin: 0 0 24px;
  font-size: 18px;               /* at every width */
  line-height: 36px;
  color: var(--body);
}
/* The heading is an h2 here (the original's is a second h1), and it does not
   type itself out. The phone number stays a tel: link, grey and bold like
   the original's plain text. */
.product .call__heading {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: normal;           /* 55px a line in Poppins */
  letter-spacing: -1.8px;
  color: var(--ink);
}
.product .call__phone {
  display: flex;                 /* the box is the link's 28px, as the original's is */
  margin: 0 0 36px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--body);
}
/* The original's number is a 20px run in a 14px/26px line, so its glyphs
   start 1px above that 28px box; ours are centred in the tel: link's own
   28px box (utilities.css), 1px lower. top: -1px moves the paint back to
   the original's without moving any box. */
.product .call__phone a {
  position: relative;
  top: -1px;
  color: inherit;
}
.product .call__phone a:hover { color: var(--blue); }
.product .call__cta {
  display: flex;
  margin: 0 0 22px;
}
/* Farm and business: the button follows the coverage bars instead. */
.product .call__cta--after { margin-top: 36px; }

/* ---- headings, notes, lists ------------------------------------------------ */

/* A section heading in .section-title's style (32.2/42/500, <strong> 700):
   24px to what follows — none on home's "Optional Coverage". */
.product .product-h2 { margin: 0 0 24px; }
.product .product-h2--flush { margin: 0; }

/* The other heading style: 30px bold, one weight, normal line-height (46px). */
.product .h2-plain {
  margin: 0 0 17px;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.product .h2-plain--center { text-align: center; }

.product .product-note {
  margin: 0 0 35px;
  font-size: 14px;
  line-height: 26px;
  color: var(--body);
}
/* Commercial's "Although some exceptions may apply…": bold capitals, 16px
   at every width (at 390 too, where the other notes step to 13px). */
.product .product-note.product-note--caps {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.product .bullet-list {
  margin: 0 0 35px;
  padding-left: 32px;
  list-style: disc;
}
.product .bullet-list li {
  font-size: 14px;
  line-height: 24px;
  color: var(--body);
}

/* Half-width blocks: auto's "Other types", and the farm and business
   operations lists — the left half from 992px, full width below. */
@media (min-width: 992px) {
  .product .product-half { max-width: calc(50% - 12px); }
}

/* Commercial's two lists side by side, each under a centred heading. The
   original stretches this part of the page to the viewport's edges, 24px
   in (Key Questions 1392px wide at 1440) — a page-builder accident; here it
   stays in the container. */
.product .product-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 24px;
}
@media (min-width: 768px) {
  .product .product-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- icon boxes: an icon, 15px, then a title, centred on each other --------- */
.product .icon-box {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  color: inherit;
}
.product .icon-box__icon {
  display: flex;
  margin-right: 15px;
  font-size: 64px;               /* the icon's height */
  color: var(--blue);
}
.product .icon-box--hero .icon-box__icon { color: var(--blue-hero); }
.product .icon-box--small .icon-box__icon {
  font-size: 32px;
  color: var(--body);
}
.product .icon-box__title {
  margin: 3px 0;
  font-size: 19.6px;
  font-weight: 400;
  line-height: 23.52px;
  letter-spacing: -0.98px;
  color: var(--ink);
}

/* ---- coverage bars -----------------------------------------------------------
   The original's Bootstrap accordion as native <details>: no script, keyboard
   operable, all closed except home's first. A bar is 73px — 23px + a 27px
   line + 23px — with a "+" 25px from its right edge that turns 45° when
   open; bars sit 20px apart. The title's text starts 30px in, as on the
   original; there it may run to 30px from the right edge, under the "+",
   which starts 25px plus its own width in (9.98px at 16px, 9.22px at
   14.86px — 34.98 and 34.22px). Here it stops where the "+" starts
   (0.625em is a hair over the glyph's width): it wraps as the original's
   does unless it would touch the "+" — at 360, "Commercial Property and
   Equipment" ends 0.4px short of it on both.
   Farm's seven bars and business's "Pollution" open onto nothing on the
   original but the page builder's placeholder, so they are
   .coverage__title--static: the same bar, no "+", nothing to open. */
.product .coverage-group {
  margin: 0;
  padding: 0;
  list-style: none;
}
.product .coverage + .coverage { margin-top: 20px; }
.product .coverage__title {
  position: relative;
  display: block;
  margin: 0;
  padding: 23px calc(25px + 0.625em) 23px 30px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 16px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.8px;
  color: var(--blue);
  list-style: none;
  cursor: pointer;
}
/* Farm's and business's bars: #f4f4f4, and their titles are dark, not blue. */
.product .coverage-group--solid .coverage__title {
  background: var(--grey-band);
  color: var(--ink-alt);
}
.product .coverage__title::-webkit-details-marker { display: none; }
.product .coverage__title::after {
  content: "+";
  position: absolute;
  top: 51%;
  right: 25px;
  font-size: 16px;
  font-weight: 600;
  line-height: 27px;
  color: var(--ink-alt);
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s;
}
.product .coverage[open] > .coverage__title::after { transform: translateY(-50%) rotate(45deg); }
/* Keyboard focus: reset.css's summary:focus-visible ring. */
.product .coverage__title--static { cursor: default; }
.product .coverage__title--static::after { content: none; }

/* An open body: 31/32/33/33px padding, 14px/26px grey. Paragraphs sit 20px
   apart (18.57px at 575 and below, Porto's rem step) and, where a body has
   more than one, the last keeps its margin too, as on the original; Cyber's
   list is plain lines there, no bullets. */
.product .coverage__body {
  padding: 31px 32px 33px 33px;
  font-size: 14px;
  line-height: 26px;
  color: var(--body);
}
.product .coverage__body p { margin: 0 0 20px; }
.product .coverage__body p:only-child { margin: 0; }
.product .coverage__lines {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

/* ---- the form section ----------------------------------------------------------
   White, and the width of the viewport less 24px a side (20px at 575 and
   below): the original's product forms span the page like this, where its
   contact form sits in the container. The form's own spacing is .form-panel's
   (form.css). The 12px above the panel is the original form's transparent
   top border: its box starts where this section does and its title 12px
   lower. The 35px below is outside its form box, the gap to the CTA band.
   Measured on auto, home and farm: the 12px at 390, 1024, 1440 and 1920,
   the 35px at those and 768. */
.product-form { padding: 12px 0 35px; }
.container--form-wide {
  max-width: none;
  padding: 0 24px;
}

/* ---- 575px and below: Porto's rem step ------------------------------------------
   The section headings too: the original's are 29.9px tracked -1.61px (px, so
   it does not scale) at 390; tokens.css's --fs-h2 clamp gives 30.22px and
   -0.05em there, and that wider heading put all of "Products and Services"
   on /insurance/'s second line, where the original breaks after "Products"
   (both measured at 390). */
@media (max-width: 575px) {
  .products .section-title,
  .product .section-title { font-size: 29.9px; letter-spacing: -1.61px; }
  .product .product-lead { margin-bottom: 22.29px; }
  .product .call__heading { font-size: 33.43px; letter-spacing: -1.67px; }
  .product .h2-plain { font-size: 27.86px; letter-spacing: -1.39px; }
  .product .product-note { font-size: 13px; }
  .product .bullet-list { padding-left: 29.72px; }
  .product .bullet-list li { font-size: 13px; line-height: 22px; }
  .product .icon-box__title { font-size: 18.2px; line-height: 21.84px; letter-spacing: -0.91px; }
  .product .coverage__title,
  .product .coverage__title::after { font-size: 14.86px; }
  .product .coverage__body { font-size: 13px; }
  .product .coverage__body p,
  .product .coverage__lines { margin-bottom: 18.57px; }
  .container--form-wide { padding: 0 20px; }
}

/* ---- components/careers.css ---- */
/* ---- /careers/ -----------------------------------------------------------
   The original's three WPBakery rows, rebuilt as ONE section on the white
   page: no bands, no card. Measured on https://mcdonell-levert.ca/careers/
   2026-09-30 at 390, 576, 768, 992, 1024, 1163, 1200, 1440 and 1920.

   The section rises into the banner through page-banner.css's
   `.page-banner + .section` (the 100px lift, the white panel, 84px to the
   first heading), so this file sets neither its background nor its
   padding-top, and its first child has no top margin.

   The original builds its gaps from row padding, -100px row margins, empty
   paragraphs and spacer divs; here each gap is ONE collapsed margin that
   adds up to the measured total. So nothing here may wrap blocks in
   padding, borders or flex/grid: the .reveal wrappers in the markup are
   plain blocks, and margins collapse through them.

   From 576px up every figure is flat. At or below 575px the original steps
   some of them down: the paragraph margin (20 -> 18.57), the h3 (25/32 ->
   23.21/29.33), the h4 (19.6/27 -> 18.2/24.75), the reasons and the "Ready"
   heading (30 -> 27.86, leading 46 -> 42 on the reasons) and the gap under
   the first logo (127 -> 125). The sub-heading, the other margins and the
   logo size do not step. As tokens.css does for the type scale, each
   stepped value is a clamp() that reaches its desktop value at 576px and
   the original's stepped value at 360px, with no jump between.
   -------------------------------------------------------------------------- */

.careers {
  /* The paragraph margin: 20px, 18.57px at 360. Used for every gap that is
     the original's <p> margin-bottom. */
  --careers-p: clamp(18.5714px, 16.1905px + 0.6614vw, 20px);
  /* 113px from the tagline's bottom to the CTA band, at every width. */
  padding-bottom: 113px;
}

.careers p {
  font-size: 0.875rem;                 /* 14px: this page's body copy, not the site's 13.86 */
  line-height: 26px;
  margin: 0 0 var(--careers-p);
}

.careers__center { text-align: center; }

/* "Careers at …" and "Why Join …": the site's section title, 20px above
   what follows (the original's inline margin, which does not step). */
.careers .section-title { margin: 0 0 20px; }

/* "Build Your Career With McDonell-Levert": 18.9px/34.02px at EVERY width,
   390 included — so not --fs-lead, which falls to 17.55px at 360. */
.careers .careers__sub {
  font-size: 1.18125rem;
  line-height: var(--lh-lead);
  text-align: center;
  margin-bottom: 24px;
}

/* The two logos, 300x300, centred (logo.png is the same art as the
   original's 300px file). The first sits 32px under the intro and 127px
   above "Current Opportunity" (125px at 390 — the original's blank spacer
   image sits in a line box that shrinks from 24px to 22px); the second 64px
   under the requirements and 68px above "Why Join". */
.careers__logo {
  width: 300px;
  margin: 32px auto clamp(125px, 121.6667px + 0.92593vw, 127px);
}
.careers__logo--end { margin: 64px auto 68px; }

/* "Current Opportunity": centred, "Current" in Poppins 800 (the <strong>
   stays 700 through .section-title strong), 30px to the job title. */
.careers .careers__current {
  text-align: center;
  font-weight: 800;
  margin-bottom: 30px;
}

/* "Insurance Broker" and the closing "McDonell-Levert Insurance Brokers":
   25px/700/32px, tracked -0.05em, centred — 23.21px/29.33px at 360. Not the
   site's h3 (23.1px/600/24px, the homepage feature cards). */
.careers h3 {
  font-size: clamp(1.4509rem, 1.2649rem + 0.8267vw, 1.5625rem);
  font-weight: 700;
  line-height: clamp(29.3333px, 24.8889px + 1.2346vw, 32px);
  letter-spacing: -0.05em;
  text-align: center;
  margin: 0 0 20px;
}
.careers .careers__closing { margin-top: 32px; }

/* The h4s keep the site's size and tracking (19.6px, -0.98px); the leading
   is 27px here (24.75px at 360) and the margin 14px. */
.careers h4 {
  line-height: clamp(24.75px, 21px + 1.0417vw, 27px);
  margin: 0 0 14px;
}
/* "Job Summary" sits 78px under the job title at every width. "Key
   Responsibilities:" sits 78px under the summary paragraph, 76.57px at 390:
   the paragraph margin plus 58px at both widths. */
.careers .careers__gap { margin-top: 78px; }
.careers .careers__gap--after-p { margin-top: calc(var(--careers-p) + 58px); }

/* The two lists. The original types "• " at the start of each item of one
   paragraph, so the bullet is text: grey, inline, and a wrapped line starts
   flush left under it. An `inside` string marker gives exactly that (the
   first letter at the original's x; a wrapped line at the container's
   edge). No gap between items: 26px line pitch. role="list" in the markup
   keeps them lists in Safari, whatever it makes of a string marker. */
.careers__bullets {
  list-style: "\2022\0020" inside;
  font-size: 0.875rem;
  line-height: 26px;
  margin: 0 0 var(--careers-p);
  padding: 0;
}

/* The five reasons: on the original, five 30px/700 headings at
   line-height normal — a 46px box, 42px at 390 — 17px apart (a 63px pitch;
   59px at 390). Kept a list, so role="list" in the markup holds its
   semantics in Safari despite list-style: none. The leading is written out
   (46px, 42px at 360) rather than left to the font's metrics. */
.careers__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
}
.careers__reasons li {
  font-size: var(--fs-name);
  font-weight: 700;
  line-height: clamp(42px, 35.3333px + 1.8519vw, 46px);
  letter-spacing: -0.05em;
  color: var(--ink);
  margin: 0 0 17px;
}

/* "Ready to Make an Impact?": one weight, 30px/40px, 64px under the last
   reason and 32px above its paragraph. */
.careers .careers__h2 {
  font-size: var(--fs-name);
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.05em;
  margin: 64px 0 32px;
}

/* The address and the number, each on its own line under a bold label.
   The original's address is blue text with no href and its number plain
   grey text; here both stay links (mailto:, tel:). inline-block makes each
   box exactly its 26px line — above the 24px target floor, where a plain
   inline link at this size is 20px tall — while utilities.css's tel: rule
   (inline-flex, min-height 28px, specificity 0,1,1) would make that
   paragraph 54px, not the original's 52. These two classes are 0,2,0, so
   they win. */
.careers .careers__link {
  display: inline-block;
  min-height: 24px;
}
/* The number is grey 400, like the text it replaces. At 0,2,0 this also
   beats reset.css's a:hover (0,1,1), so the hover colour is restated. */
.careers .careers__tel { color: inherit; }
.careers .careers__tel:hover { color: var(--blue-dark); }

/* The last line: the section's 113px padding sets the end, not a margin. */
.careers .careers__tagline { margin-bottom: 0; }

/* ---- utilities.css ---- */
/* ---- utilities, motion, print ------------------------------------------- */

/* Any phone link anywhere is a tap target, including one written directly into
   page content. Enforce the WCAG 2.2 minimum (24x24) globally so a bare
   `tel:` link can never ship too small to hit on a phone — which would be a
   particularly bad failure on a business whose phone number is the product. */
a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

/* Scroll reveal. Hidden only when JS is present (00-utils.js puts .js on
   <html>), so with JS off the content is simply there. With JS on,
   50-reveal.js shows each block as it scrolls into view, shows everything at
   once where IntersectionObserver is missing, and after 2.5s shows whatever
   is still hidden. An unreadable page is never an acceptable failure mode. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  /* Matches the original's fadeInUp keyframe: 1s ease, 30px travel. */
  transition: opacity 1s ease, transform 1s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Variants, each added beside .reveal: the same entrance from the left, from
   the right, or a fade with no travel. .is-visible above outranks all three,
   and the reduced-motion rule below comes later, so it still wins. */
.js .reveal--left  { transform: translateX(-30px); }
.js .reveal--right { transform: translateX(30px); }
.js .reveal--fade  { transform: none; }

/* Stagger: wait 0.2s ... 1.2s, in 200ms steps, before the entrance starts.
   These must come after .js .reveal, whose transition shorthand resets the
   delay. They delay every transition on the element, hover included — put
   .reveal on a wrapper, not on a button or a link. */
.js .reveal-d2  { transition-delay: 0.2s; }
.js .reveal-d4  { transition-delay: 0.4s; }
.js .reveal-d6  { transition-delay: 0.6s; }
.js .reveal-d8  { transition-delay: 0.8s; }
.js .reveal-d10 { transition-delay: 1s; }
.js .reveal-d12 { transition-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .line-motif,
  .to-top,
  .skip-link { display: none; }

  body { color: #000; background: #fff; }
  .section { padding: 1rem 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}