/* ===========================================================================
   roofingcontractortampa.net — single stylesheet, mobile-first, no framework.

   DESIGN BRIEF: "Gulf Coast editorial".

   This site deliberately does NOT look like the rest of the portfolio. Five
   axes are broken at once so it shares no visual fingerprint with
   roofingcompanymobile.net in particular, which is the same vertical:

     1. Warm limestone base (#f7f3ec) instead of white + cool grey.
     2. A LIGHT header with a clay rule — not a dark navy sticky bar.
     3. Serif display headings instead of system sans throughout.
     4. Zero border-radius, zero drop shadows. Hairline rules only.
     5. Numbered ruled rows (01 / 02 / 03) instead of shadow card grids.

   Clay (#a8442a) is ornament only — rules, numerals, underlines. It is never
   a CTA background, which keeps it visually distant from the orange CTAs used
   on every other site in the portfolio. The CTA is deep Gulf pine.

   No webfonts: font-src stays 'self' in the CSP and there is no render-block.
   =========================================================================== */

:root {
  --ink: #1b2422;
  --deep: #0f4c45;
  --deep-dark: #0a3630;
  --clay: #a8442a;
  --clay-dark: #8d3722;
  --sand: #f7f3ec;
  --sand-2: #efe7da;
  --rule: #ddd3c4;
  --text: #24302d;
  --text-mute: #54625e;

  /* Text colours for the INVERTED surfaces — the footer and the CTA band,
     which sit on --deep-dark. These exist because five near-identical greens
     were previously hard-coded in this file, outside the token system, and so
     escaped the build's contrast check. Lighthouse then found the footer logo
     sub-label rendering clay-on-pine at 2.22:1.
     NEVER use --clay as a foreground on a dark surface. It is an ornament
     colour, calibrated against the sand ground only. */
  --on-deep: #dfe9e6;
  --on-deep-mute: #a9c4bf;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;

  --max: 1140px;
  --prose: 720px;
  --bar-h: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--sand);
  line-height: 1.65;
  font-size: 17px;
  /* clearance for the fixed mobile call bar */
  padding-bottom: var(--bar-h);
  /* diagram numbering — every figure.diagram increments this */
  counter-reset: fig;
}

::selection { background: var(--clay); color: #fff; }

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

a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color .12s ease; }
a:hover { color: var(--clay-dark); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Fluid scale. Clamp min/max match the old 375px and 900px+ fixed sizes, so
   the small-phone hero measurement and the desktop layout are unchanged —
   what improves is everything between, where the type used to jump at two
   breakpoints instead of flowing. */
h1 { font-size: clamp(2.05rem, 1.45rem + 2.6vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 1.42rem + .8vw, 1.85rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; }

p + p, p + ul, p + ol, ul + p, ol + p { margin-top: 1em; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li + li { margin-top: .4em; }

/* Statute and authority quotes. These carry the site's most load-bearing
   text — verbatim Florida Statutes — and they must read as *quoted matter*,
   set apart from our own commentary: serif, italic, hung off an ink rule. */
.prose blockquote {
  border-left: 2px solid var(--ink);
  margin: 1.5em 0;
  padding: 6px 0 6px 22px;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-style: italic;
  color: var(--text);
}
.prose blockquote p + p { margin-top: .8em; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep); color: #fff; padding: 12px 18px;
  font-weight: 700; z-index: 400;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
}

.lede { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.2rem); color: var(--text); }

.muted { color: var(--text-mute); }

.small { font-size: .88rem; }

/* ---------------------------------------------------------------------------
   Buttons — square corners, no shadow, no gradient.
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--deep);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 15px 26px;
  border: 2px solid var(--deep);
  text-decoration: none;
  min-height: 52px;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--deep-dark); border-color: var(--deep-dark); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--deep);
  border-color: var(--rule);
}
.btn-ghost:hover { background: transparent; color: var(--clay-dark); border-color: var(--clay); }

.btn-lg { font-size: 1.12rem; padding: 17px 30px; min-height: 58px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------------------
   Utility strip + header. Light, not sticky on desktop.
   --------------------------------------------------------------------------- */

.utility {
  background: var(--sand-2);
  border-bottom: 1px solid var(--rule);
  font-size: .8rem;
  color: var(--text-mute);
}
.utility-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
  justify-content: space-between;
}
.utility strong { color: var(--text); font-weight: 700; }

.site-header {
  background: var(--sand);
  border-bottom: 3px solid var(--clay);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark { width: 34px; height: 34px; flex: none; }
.logo-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.logo-text span { display: block; font-family: var(--sans); font-size: .66rem;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--clay); margin-top: 3px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .92rem;
  padding: 10px 14px;
  min-height: 46px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--clay); }
.nav-toggle svg { width: 18px; height: 18px; }

.main-nav { display: none; }
.main-nav.open { display: block; }
.main-nav ul { list-style: none; }
.main-nav li { border-top: 1px solid var(--rule); }
.main-nav a {
  display: block;
  padding: 14px 0;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.main-nav a { transition: color .12s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--clay-dark); }
.main-nav a:hover { text-decoration: underline; text-decoration-color: var(--clay);
  text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.header-call { display: none; }

/* ---------------------------------------------------------------------------
   Hero — asymmetric split with a hard clay offset frame on the image.
   --------------------------------------------------------------------------- */

.hero { padding: 34px 0 8px; }
.hero-grid { display: grid; gap: 26px; }
.hero h1 { margin-top: 10px; }
.hero .lede { margin-top: 14px; }
.hero .btn-row { margin-top: 22px; }

.hero-figure { position: relative; }
.hero-figure img { position: relative; z-index: 2; width: 100%; }
/* the offset frame: 2px clay outline pushed down-right, no radius, no shadow */
.hero-figure::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 2px solid var(--clay);
  z-index: 1;
}
.hero-figure figcaption {
  margin-top: 22px;
  font-size: .82rem;
  color: var(--text-mute);
}

/* "what happens when you call" strip */
.callstrip {
  margin-top: 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
}
.callstrip ol { list-style: none; }
.callstrip li {
  display: flex;
  gap: 13px;
  align-items: baseline;
  padding: 11px 0;
  font-size: .95rem;
}
.callstrip li + li { border-top: 1px solid var(--rule); }
.callstrip .num {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  color: var(--clay);
  flex: none;
  min-width: 22px;
}

/* ---------------------------------------------------------------------------
   Sections + bands
   --------------------------------------------------------------------------- */

.section { padding: 46px 0; }
.section-tight { padding: 30px 0; }
.band { background: var(--sand-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-deep { background: var(--deep-dark); color: #fff; }
.band-deep h2, .band-deep h3 { color: #fff; }
.band-deep a { color: #fff; }

/* Section signature: a short clay rule above the eyebrow. One consistent
   mark that opens every section and page head — the editorial equivalent of
   a chapter ornament, and cheaper than any of the alternatives. */
.section-head::before, .page-head::before {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  background: var(--clay);
  margin-bottom: 16px;
}

.section-head { max-width: var(--prose); }
.section-head h2 { margin-top: 8px; }
.section-head p { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   Ruled rows — the portfolio's card grid, replaced.
   --------------------------------------------------------------------------- */

.rows { margin-top: 26px; border-top: 1px solid var(--rule); }
.row-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.row-item .num {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--clay);
  line-height: 1.3;
}
.row-item h3 { font-size: 1.15rem; }
/* inline-block + padding so these clear the 24px minimum target size —
   they are the primary route from the home page into the service pages */
.row-item h3 a { display: inline-block; padding: 3px 0; color: var(--ink); text-decoration: none;
  transition: color .12s ease; }
.row-item h3 a:hover { color: var(--clay-dark); text-decoration: underline; }
.row-item .num { transition: transform .15s ease; }
.row-item:hover .num { transform: translateX(4px); }
.row-item p { grid-column: 2; margin-top: 6px; color: var(--text-mute); font-size: .96rem; }
.row-item .more { grid-column: 2; margin-top: 4px; font-weight: 600; font-size: .92rem; }
.row-item .more a { display: inline-block; padding: 5px 0; }

/* two-column ruled list, used for areas */
.arealist { margin-top: 22px; border-top: 1px solid var(--rule); columns: 1; }
.arealist li { list-style: none; border-bottom: 1px solid var(--rule); }
.arealist a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.arealist a:hover { color: var(--clay-dark); }
.arealist .chev { color: var(--clay); font-weight: 700; transition: transform .15s ease; }
.arealist a:hover .chev { transform: translateX(5px); }

/* ---------------------------------------------------------------------------
   Notice / callout blocks — left clay rule, no fill, no radius.
   --------------------------------------------------------------------------- */

.notice {
  border-left: 4px solid var(--clay);
  padding: 4px 0 4px 18px;
  margin: 26px 0;
}
.notice h3 { font-size: 1.05rem; margin-bottom: 6px; }
.notice p { font-size: .96rem; }

.keyfact {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
  margin: 26px 0;
}
.keyfact dt { font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute); }
.keyfact dd { font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); margin-top: 4px; }
.keyfact .src { font-size: .8rem; color: var(--text-mute); margin-top: 8px; }

/* ---------------------------------------------------------------------------
   Guide furniture — answer-first TL;DR, and the sources block that every
   guide ends with. Both are ruled rather than filled, matching the rest.
   --------------------------------------------------------------------------- */

.tldr {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0 20px;
  margin: 8px 0 30px;
}
.tldr .label {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--clay); display: block; margin-bottom: 10px;
}
.tldr p { font-size: 1.08rem; }
.tldr p + p { margin-top: .7em; }

.sources {
  margin-top: 44px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  font-size: .87rem;
  color: var(--text-mute);
}
.sources h2 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.sources ol { padding-left: 1.2em; }
.sources li + li { margin-top: .5em; }
.sources .verified {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 22px 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
caption { text-align: left; font-size: .85rem; color: var(--text-mute); padding-bottom: 8px; }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--sans); font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-mute); border-bottom: 2px solid var(--ink); }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: var(--sand-2); }

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.faq { margin-top: 24px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 34px 17px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 15px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--clay);
  font-family: var(--sans);
}
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 0 18px; font-size: .98rem; }
.faq .answer > * + * { margin-top: .8em; }

/* ---------------------------------------------------------------------------
   CTA band
   --------------------------------------------------------------------------- */

/* The roof-mark watermark: the logo gable, drawn in white at 7% opacity in
   the band's lower-right corner. Flat line art, no gradient — the one place
   the brand mark appears at architectural scale. `white` keyword deliberately:
   the css-raw-colours build check bans hex literals outside :root. */
.cta-band { background: var(--deep-dark); color: #fff; padding: 40px 0;
  position: relative; overflow: hidden; }
.cta-band::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 340px;
  height: 340px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 24 20 13l12 11' fill='none' stroke='white' stroke-width='2.5'/%3E%3Cpath d='M8 30h24' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .07;
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 12px; color: var(--on-deep); }
.cta-band .btn {
  background: #fff; color: var(--deep-dark); border-color: #fff; margin-top: 22px;
}
.cta-band .btn:hover { background: var(--sand-2); border-color: var(--sand-2); color: var(--deep-dark); }
.cta-band .small { color: var(--on-deep-mute); margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */

.crumbs { font-size: .84rem; color: var(--text-mute); padding: 14px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li::after { content: "/"; margin-left: 6px; color: var(--rule); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--text-mute); }

/* ---------------------------------------------------------------------------
   Page header (non-home)
   --------------------------------------------------------------------------- */

.page-head { padding: 6px 0 30px; border-bottom: 1px solid var(--rule); }
.page-head h1 { margin-top: 10px; max-width: 18ch; }
.page-head .lede { margin-top: 14px; max-width: var(--prose); }
.page-head .btn-row { margin-top: 22px; }

/* ---------------------------------------------------------------------------
   Figures / diagrams
   --------------------------------------------------------------------------- */

figure.diagram { margin: 30px 0; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); padding: 22px 0;
  counter-increment: fig; }
figure.diagram figcaption { margin-top: 14px; font-size: .85rem; color: var(--text-mute); }
/* auto-numbered captions — "FIG. 01" in the eyebrow style */
figure.diagram figcaption::before {
  content: "Fig. " counter(fig, decimal-leading-zero);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--clay);
  margin-right: 10px;
}

/* Diagrams scroll inside their own container rather than shrinking to
   illegibility.
   A 900-unit viewBox squeezed into a 335px phone column renders 27-unit labels
   at 10px against 17px body text — technically present, practically unreadable.
   The min-width holds the drawing at a scale where the labels stay legible and
   lets the diagram scroll horizontally instead. The page body never scrolls;
   only this box does. The caption sits OUTSIDE the scrolling area so it stays
   put and stays readable.
   MIN WIDTH IS LOAD-BEARING: build.py's svg type-size check computes effective
   pixel size from it. Change one and change the other. */
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--clay) var(--sand-2); }
.diagram-scroll svg { min-width: 560px; }
figure.photo { margin: 30px 0; }
figure.photo figcaption { margin-top: 10px; font-size: .82rem; color: var(--text-mute); }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
  background: var(--deep-dark);
  color: var(--on-deep);
  padding: 40px 0 26px;
  margin-top: 46px;
  font-size: .93rem;
}
.site-footer a { color: #fff; }
/* The logo sub-label is clay on the sand header. On the dark footer that reads
   2.22:1, so it is overridden here. */
.site-footer .logo-text span { color: var(--on-deep-mute); }
.footer-grid { display: grid; gap: 26px; }
.site-footer h2 { font-size: .78rem; font-family: var(--sans); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-deep-mute); margin-bottom: 12px; }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: 7px; }
.footer-brand .logo-text { color: #fff; }
.footer-phone {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-top: 6px;
}
.disclosure {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: .85rem;
  color: var(--on-deep);
  max-width: 74ch;
}
.disclosure a { color: #fff; }
.copyright { margin-top: 18px; font-size: .82rem; color: var(--on-deep-mute); }

/* ---------------------------------------------------------------------------
   Fixed mobile call bar. Square, clay top rule, serif number.
   The one fixed element on the site.
   --------------------------------------------------------------------------- */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--deep);
  border-top: 2px solid var(--clay);
  height: var(--bar-h);
}
.callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 100%;
  color: #fff;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 700;
}
.callbar svg { width: 20px; height: 20px; flex: none; }
.callbar .label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

/* ---------------------------------------------------------------------------
   Breakpoints
   --------------------------------------------------------------------------- */

@media (min-width: 620px) {
  /* heading sizes are fluid via clamp() at the top of the file */
  .arealist { columns: 2; column-gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; font-size: 17.5px; }
  .callbar { display: none; }

  .nav-toggle { display: none; }
  .main-nav { display: block; }
  .main-nav ul { display: flex; gap: 26px; }
  .main-nav li { border-top: 0; }
  .main-nav a { padding: 6px 0; font-size: .97rem; }
  .main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--clay); }
  .nav-wrap { padding: 0; }
  .header-inner { flex-wrap: nowrap; gap: 30px; }
  .header-call {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
    flex: none;
  }
  .header-call .label {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-mute);
  }
  .header-call .num {
    font-family: var(--serif); font-size: 1.28rem; font-weight: 700;
    color: var(--deep); line-height: 1.2;
  }
  .header-call:hover .num { color: var(--clay-dark); }

  .hero { padding: 46px 0 10px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: start; }
  .hero-figure { margin-right: 12px; }

  .section { padding: 62px 0; }
  .row-item { grid-template-columns: 62px 1fr 1fr; gap: 6px 22px; padding: 24px 0; }
  .row-item h3 { align-self: start; }
  .row-item p { grid-column: 3; grid-row: 1; margin-top: 0; }
  .row-item .more { grid-column: 3; margin-top: 10px; }
  .row-item .num { font-size: 1.5rem; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
}

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

@media print {
  .callbar, .nav-toggle, .utility, .cta-band { display: none; }
  body { padding-bottom: 0; background: #fff; }
}