/* ==========================================================================
 TRU ARMOR ROOFING - THE CINEMATIC SYSTEM ON THE OTHER 38 PAGES
 
 system. the decision: "Match the homepage fully."

 HOW THIS FILE WORKS
 Every one of the 38 pages keeps loading assets/styles.css exactly as before,
 then loads this file after it, and carries class="cinematic" on <body>.
 Nothing in styles.css is edited. Nothing in home-cinematic.css is edited.
 index.html is not touched at all: it keeps body.home-cinematic and its own
 two stylesheets, so the approved home page cannot regress.

 NO PAGE'S WORDS CHANGE.: every visible word before this
 pass is visible after it, at every width, nothing added, nothing hidden,
 nothing dropped. This file changes presentation only, and the word diff in
 the build note proves it page by page.

 Region map:
 01 TOKENS the cinematic palette, and the legacy names remapped
 02 CHROME AND GLOBALS lifted from home-cinematic.css, re-scoped
 03 PAGE HERO.phero - the one new component
 04 BANDS AND LAYOUT.section.container.split.grid, heads
 05 THE BOX LANGUAGE the shared surface recipe
 06 COMPONENTS cards, prose, faq, reviews, galleries, lists, CTAs
 07 FORMS the one lead form and its conditional branches
 08 MEDIA photos, figures, films
 09 STATES hover, focus, active, invalid
 10 PHONES the one phone system under 768px
 11 REDUCED MOTION
 12 PRINT
 13 FONT FALLBACKS width-matched, so the font swap moves nothing
 ========================================================================== */


/* ==========================================================================
 01 TOKENS

 Two jobs. First, declare the cinematic palette - the FINAL effective values
 from home-cinematic.css, after all 43 of the passes, not the values the
 original spec printed. Second, remap the legacy token names that styles.css
 declares on:root, so the 153 KB of existing CSS repaints itself instead of
 being fought rule by rule.

 Everything sits on body.cinematic, never on:root, so this file cannot reach
 a page that has not opted in.

 THE THREE TOKENS THAT ARE DELIBERATELY NOT REMAPPED, and why:
 --white styles.css uses it 45 times as a text colour and 35 times as
 a background. One value cannot serve both on a dark ground.
 Left light; its background uses are overridden by selector.
 --navy-900 10 text uses, 8 background uses. Same problem, same answer.
 --navy-800 6 text uses, 3 background uses. Same.
 ========================================================================== */

body.cinematic {
  /* --- Grounds. Final values, home-cinematic.css region 01 --- */
  --ink: #0A0C0E;          /* the page ground, and the footer */
  --ink-2: #0E1114;        /* alternate bands, cards, form fields */
  --ink-3: #131719;        /* the deepest band */
  --navy: #0E2A47;         /* the one navy ground */

  /* --- Text. The cream the brief asked for on, revision (line 3857) --- */
  --bone: #F7F3E8;         /* headings and primary text */
  --ash: #CDC8BE;          /* body text */

  /* --- The two accent roles, never mixed --- */
  --blue-fill: #0E559E;    /* FILL ONLY: button grounds, the active rule, the FAB */
  --blue-fill-deep: #0B4380;
  --sky: #7FB8E8;          /* TEXT ONLY: eyebrows, links on ink, focus ring, nav hover */
  --on-blue: #F9F5EA;      /* text on --blue-fill */
  --verified: #2E8B57;     /* the insurance checkmarks only */

  /* --- Alpha steps --- */
  --bone-85: rgba(247, 243, 232, 0.85);
  --bone-80: rgba(247, 243, 232, 0.80);
  --bone-25: rgba(245, 242, 237, 0.25);
  --ash-75: rgba(205, 200, 190, 0.78);
  --ash-70: rgba(205, 200, 190, 0.72);
  --ash-60: rgba(205, 200, 190, 0.62);

  /* --- Hairlines: bone at 6 / 10 / 18 percent --- */
  --hairline-soft: rgba(245, 242, 237, 0.06);
  --hairline: rgba(245, 242, 237, 0.10);
  --hairline-strong: rgba(245, 242, 237, 0.18);

  /* --- Glass, region 15 --- */
  --glass: rgba(255, 255, 255, 0.07);
  --glass-line: rgba(255, 255, 255, 0.14);

  --error-text: #F0A8AC;

  /* --- Type. Playfair for display and headings, Plex for everything else --- */
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, Cambria, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", "Plex Fallback", "Plex Fallback Arial", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Measure. Final values: region 15 radius, region 35 band height --- */
  --wrap: 1240px;
  --gutter: 1.5rem;
  --gutter-md: 2.5rem;

  /* Motion, home-cinematic.css region 01 */
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.20s;
  --t-mid: 0.30s;
  --band-y: 2.5rem;
  --band-y-md: 2.75rem;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* ------------------------------------------------------------------------
 THE REMAP. styles.css declares these on:root and 153 KB of rules read
 them. Redeclaring them here repoints that whole stylesheet at the
 cinematic palette in one move.
 ------------------------------------------------------------------------ */

  /* Grounds */
  --bg: var(--ink);
  --bg-alt: var(--ink-2);
  --bg-alt-2: var(--ink-3);

  /* Text */
  --text: var(--bone);
  --text-body: var(--ash);
  --text-muted: var(--ash-75);
  --text-invert: var(--bone);
  --text-invert-muted: var(--ash-75);

  /* Lines */
  --border: var(--hairline);
  --border-strong: var(--hairline-strong);

  /* Blue. On ink, a link must be --sky (text role); a filled button keeps
 --blue-fill (fill role). styles.css reads --navy-700 / --navy-600 for link
 colour and --accent for fills, so the two roles separate cleanly here. */
  --navy-700: var(--sky);
  --navy-600: var(--sky);
  --blue: var(--blue-fill);
  --blue-deep: var(--blue-fill-deep);
  --blue-bright: var(--sky);
  --accent: var(--blue-fill);
  --accent-hover: var(--blue-fill-deep);
  --accent-press: #093868;
  --emergency: var(--blue-fill);
  --emergency-hover: var(--blue-fill-deep);

  /* The soft tints. On white these were pale blue washes; on ink they become
 low-alpha blue so the same rules still read as "a tinted panel". */
  --blue-soft: rgba(14, 85, 158, 0.18);
  --blue-border: rgba(127, 184, 232, 0.25);
  --accent-soft: rgba(14, 85, 158, 0.18);
  --accent-border: rgba(127, 184, 232, 0.25);
  --emergency-soft: rgba(14, 85, 158, 0.18);

  /* Feedback, restated for a dark ground */
  --success: #6FD39B;
  --success-soft: rgba(46, 139, 87, 0.18);
  --error: var(--error-text);
  --error-soft: rgba(240, 168, 172, 0.12);

  /* Silver text from the logo, lifted so it still reads on ink */
  --steel-500: var(--ash-75);
  --slate-400: var(--ash-70);

  /* Faces */
  --font-head: var(--font-display);
  --font-body: var(--font-sans);

  background: var(--ink);
  color: var(--ash);
}


/* ==========================================================================
 02 CHROME AND GLOBALS

 Lifted verbatim out of home-cinematic.css by scratchpad/the build script and
 re-scoped from body.home-cinematic to body.cinematic. Nothing here was
 hand-written, and nothing was invented: index.html and these 38 pages
 carry byte-identical chrome markup (utility bar, header, brand, nav,
 mobile drawer, header buttons, footer, the texting FAB, the skip link)
 and the legacy.btn /.field /.form classes, so the rules the home page
 already uses for them are the rules that belong here. That is what makes
 the two look like one site rather than two that resemble each other.

 184 rules. Their home-page region is named in the comment above each one.
 ========================================================================== */

/* [02 RESET AND BASE] */
body.cinematic {
  background: var(--ink);
  color: var(--ash);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 768px) {
/* [02 RESET AND BASE] */
body.cinematic {
    --gutter: var(--gutter-md);
    --band-y: var(--band-y-md);
}
}
/* [02 RESET AND BASE] */
body.cinematic *,
body.cinematic *::before,
body.cinematic *::after {
  border-radius: var(--radius);
}
/* [02 RESET AND BASE] */
body.cinematic img,
body.cinematic svg,
body.cinematic video,
body.cinematic iframe {
  display: block;
  max-width: 100%;
}
/* [02 RESET AND BASE] */
body.cinematic img {
  height: auto;
}
/* [02 RESET AND BASE] */
body.cinematic p {
  margin: 0 0 1rem;
}
/* [02 RESET AND BASE] */
body.cinematic p:last-child {
  margin-bottom: 0;
}
/* [02 RESET AND BASE] */
body.cinematic ul,
body.cinematic ol {
  margin: 0;
  padding: 0;
}
/* [02 RESET AND BASE] */
body.cinematic li {
  margin: 0;
}
/* [02 RESET AND BASE] */
body.cinematic a {
  color: var(--sky);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* [02 RESET AND BASE] */
body.cinematic a:hover {
  color: var(--sky);
}
/* [02 RESET AND BASE] */
body.cinematic strong,
body.cinematic b {
  font-weight: 600;
  color: var(--bone);
}
/* [02 RESET AND BASE] */
body.cinematic hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2rem 0;
}
/* [02 RESET AND BASE] */
body.cinematic figure {
  margin: 0;
}
/* [02 RESET AND BASE] */
body.cinematic blockquote {
  margin: 0;
}
/* [02 RESET AND BASE] */
html:has(body.cinematic) {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 96px) + 1rem);
}
/* [03 TYPOGRAPHY
 Every size is a clamp. No type rule needs a me] */
body.cinematic h1,
body.cinematic h2,
body.cinematic h3,
body.cinematic h4,
body.cinematic h5,
body.cinematic h6 {
  margin: 0;
  color: var(--bone);
  font-weight: 600;
  text-wrap: balance;
}
/* [03 TYPOGRAPHY
 Every size is a clamp. No type rule needs a me] */
body.cinematic .c-nowrap {
  white-space: nowrap;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .skip-link {
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .skip-link:focus {
  color: var(--on-blue);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar {
  background: var(--ink);
  border-bottom: 1px solid var(--hairline);
  color: var(--ash-75);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.4;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar .container {
  max-width: var(--wrap);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar a {
  color: var(--ash-75);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar a:hover {
  color: var(--sky);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar__facts svg {
  width: 15px;
  height: 15px;
  color: var(--ash-70);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar__social .social-label {
  color: var(--ash-70);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar__social a.sq {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--ash-75);
  transition: color var(--t-fast) var(--ease-cinema),
              border-color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar__social a.sq:hover {
  background: transparent;
  color: var(--sky);
  border-color: var(--hairline-strong);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .utility-bar__social svg {
  width: 15px;
  height: 15px;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color var(--t-fast) var(--ease-cinema),
              border-color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .site-header.is-stuck {
  background: rgba(10, 12, 14, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
  box-shadow: none;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .site-header .container {
  max-width: var(--wrap);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__link {
  background: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--bone);
  transition: color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__link:hover,
body.cinematic .nav__link[aria-expanded="true"] {
  background: none;
  color: var(--sky);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__link[aria-current="page"] {
  color: var(--sky);
  box-shadow: inset 0 -1px 0 var(--blue);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__caret {
  width: 10px;
  height: 10px;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__panel {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  box-shadow: none;
  padding: 0.5rem;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__panel a {
  color: var(--ash);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.88rem;
  transition: color var(--t-fast) var(--ease-cinema),
              background-color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__panel a:hover {
  background: var(--hairline-soft);
  color: var(--sky);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav__panel-note {
  color: var(--ash-70);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .header__actions .btn,
body.cinematic .header__actions .btn-sms-mini {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .header__actions .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  box-shadow: none;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .header__actions .btn--primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--on-blue);
}

@media (min-width: 1181px) {
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .header__actions .btn--call {
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--bone);
    box-shadow: none;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .header__actions .btn--call:hover {
    background: var(--hairline-soft);
    border-color: var(--sky);
    color: var(--bone);
}
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .btn-sms-mini {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
  transition: border-color var(--t-fast) var(--ease-cinema),
              color var(--t-fast) var(--ease-cinema),
              background-color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .btn-sms-mini:hover {
  background: var(--hairline-soft);
  border-color: var(--sky);
  color: var(--bone);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav-toggle {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .nav-toggle:hover {
  border-color: var(--sky);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav {
  background: rgba(10, 12, 14, 0.72);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav__panel {
  background: var(--ink);
  border-left: 1px solid var(--hairline);
  box-shadow: none;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav .brand__name {
  color: var(--bone);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav__close {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav__close:hover {
  border-color: var(--sky);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ash-70);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav li {
  border-bottom: 1px solid var(--hairline);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav li a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  color: var(--bone);
  transition: color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav li a:hover {
  color: var(--sky);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav__cta .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  box-shadow: none;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav__cta .btn--primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav__cta .btn--secondary {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .mobile-nav__cta .btn--secondary:hover {
  background: var(--hairline-soft);
  border-color: var(--sky);
  color: var(--bone);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .site-footer {
  background: var(--ink);
  border-top: 1px solid var(--hairline);
  color: var(--ash-75);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .site-footer h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ash-70);
  margin-bottom: 1rem;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .site-footer a {
  color: var(--ash);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .site-footer a:hover {
  color: var(--sky);
  text-decoration: none;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__grid {
  border-bottom: 1px solid var(--hairline);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__c2 svg {
  color: var(--ash-70);
  width: 16px;
  height: 16px;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__c2 a {
  color: var(--bone);
  font-weight: 500;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__c2 span {
  color: var(--ash);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__soc a {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--ash);
  transition: color var(--t-fast) var(--ease-cinema),
              border-color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__soc a:hover {
  background: transparent;
  border-color: var(--sky);
  color: var(--sky);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__lic {
  font-size: 0.78rem;
  color: var(--ash-70);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__lic strong {
  color: var(--bone);
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__areas {
  border-top: 1px solid var(--hairline);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__areas-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ash-70);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__areas a {
  color: var(--ash);
  font-size: 0.85rem;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__legal {
  border-top: 1px solid var(--hairline);
  color: var(--ash-70);
  font-size: 0.78rem;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .footer__legal a {
  color: var(--ash-70);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .text-fab {
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color var(--t-fast) var(--ease-cinema);
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .text-fab:hover {
  background: var(--blue-deep);
  color: var(--on-blue);
  transform: none;
}
/* [05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribu] */
body.cinematic .text-fab::before {
  animation: none;
  box-shadow: none;
  content: none;
}
/* [07 BANDS, IN SECTION ORDER] */
body.cinematic .faq {
  border-top: 1px solid var(--hairline);
}
/* [08 COMPONENTS] */
body.cinematic .link-arrow {
  color: var(--sky);
  border-bottom-color: transparent;
}
/* [08 COMPONENTS] */
body.cinematic .link-arrow:hover {
  color: var(--sky);
  border-bottom-color: var(--sky);
}
/* [08 COMPONENTS] */
body.cinematic main .btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-width: 1px;
  box-shadow: none;
}
/* [08 COMPONENTS] */
body.cinematic main .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  box-shadow: none;
}
/* [08 COMPONENTS] */
body.cinematic main .btn--primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--on-blue);
}
/* [08 COMPONENTS] */
body.cinematic .form {
  gap: 1.25rem;
}
/* [08 COMPONENTS] */
body.cinematic .field label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bone);
}
/* [08 COMPONENTS] */
body.cinematic .field .hint {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ash-70);
  margin-top: 2px;
}
/* [08 COMPONENTS] */
body.cinematic .field .req {
  color: var(--sky);
}
/* [08 COMPONENTS] */
body.cinematic .field input,
body.cinematic .field select,
body.cinematic .field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  padding: 0.85rem 0.9rem;
  min-height: 52px;
  box-shadow: none;
  transition: border-color var(--t-press) var(--ease-cinema),
              background-color var(--t-press) var(--ease-cinema);
}
/* [08 COMPONENTS] */
body.cinematic .field textarea {
  min-height: 116px;
  resize: vertical;
}
/* [08 COMPONENTS] */
body.cinematic .field input::placeholder,
body.cinematic .field textarea::placeholder {
  color: var(--ash-70);
  opacity: 1;
}
/* [08 COMPONENTS] */
body.cinematic .field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C7C3' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
}
/* [08 COMPONENTS] */
body.cinematic .field select option {
  background: var(--ink);
  color: var(--bone);
}
/* [08 COMPONENTS] */
body.cinematic .field__error {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--error-text);
}
/* [08 COMPONENTS] */
body.cinematic .consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ash-75);
}
/* [08 COMPONENTS] */
body.cinematic .consent input {
  accent-color: var(--blue);
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}
/* [08 COMPONENTS] */
body.cinematic .consent a {
  color: var(--sky);
}
/* [08 COMPONENTS] */
body.cinematic .conditional[data-show="true"] {
  gap: 1.25rem;
}
/* [08 COMPONENTS] */
body.cinematic .nav__panel a[href="roof-inspection.html"],
body.cinematic .mobile-nav a[href="roof-inspection.html"] {
  white-space: nowrap;
}
/* [08 COMPONENTS] */
body.cinematic main .btn {
  border-radius: var(--radius);
}
/* [08 COMPONENTS] */
body.cinematic .area-pills {
  display: block;
  justify-content: initial;
  gap: 0;
}
/* [08 COMPONENTS] */
body.cinematic .area-pills a {
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0.9rem 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
/* [08 COMPONENTS] */
body.cinematic .area-pills a {
  color: var(--bone);
}
/* [08 COMPONENTS] */
body.cinematic .area-pills a:hover {
  color: var(--sky);
}
/* [08 COMPONENTS] */
body.cinematic .team-grid {
  justify-content: stretch;
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic :focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 0;
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic .site-footer :focus-visible {
  outline-color: var(--sky);
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic main .btn:active,
body.cinematic .text-fab:active {
  transform: none;
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--on-blue);
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic main .btn:disabled,
body.cinematic button:disabled,
body.cinematic .field input:disabled,
body.cinematic .field select:disabled,
body.cinematic .field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic .field input:disabled,
body.cinematic .field select:disabled,
body.cinematic .field textarea:disabled {
  background: var(--ink-3);
  color: var(--ash-60);
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic .field input:focus,
body.cinematic .field select:focus,
body.cinematic .field textarea:focus {
  outline: none;
  border-color: var(--sky);
  background: var(--ink-3);
  box-shadow: none;
  transform: none;
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic .field input:focus-visible,
body.cinematic .field select:focus-visible,
body.cinematic .field textarea:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
}
/* [09 STATES
 hover, focus-visible, active, disabled, invalid] */
body.cinematic .field input[aria-invalid="true"],
body.cinematic .field select[aria-invalid="true"],
body.cinematic .field textarea[aria-invalid="true"] {
  border-color: var(--error-text);
  background: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
/* [10 MOTION
 Every hover transform is inside @media (hover: hov] */
body.cinematic main .btn,
body.cinematic .text-fab {
    transition: background-color var(--t-fast) var(--ease-cinema),
                border-color var(--t-fast) var(--ease-cinema),
                color var(--t-fast) var(--ease-cinema),
                transform var(--t-press) var(--ease-cinema);
}
/* [10 MOTION
 Every hover transform is inside @media (hover: hov] */
body.cinematic main .btn:hover,
body.cinematic .text-fab:hover {
    transform: translateY(-2px);
}
/* [10 MOTION
 Every hover transform is inside @media (hover: hov] */
body.cinematic main .btn:active,
body.cinematic .text-fab:active {
    transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
/* [11 REDUCED MOTION
 Movement and scale off. Opacity and colour] */
html:has(body.cinematic) {
    scroll-behavior: auto;
}
/* [11 REDUCED MOTION
 Movement and scale off. Opacity and colour] */
body.cinematic main .btn:hover,
body.cinematic .text-fab:hover {
    transform: none;
}
/* [11 REDUCED MOTION
 Movement and scale off. Opacity and colour] */
body.cinematic *,
body.cinematic *::before,
body.cinematic *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
}
@media print {
/* [12 PRINT
 Ink on screen, ink on paper. The chrome and the med] */
body.cinematic {
    background: #FFFFFF;
    color: #000000;
}
/* [12 PRINT
 Ink on screen, ink on paper. The chrome and the med] */
body.cinematic .site-footer,
body.cinematic .utility-bar {
    background: #FFFFFF;
    color: #000000;
}
/* [12 PRINT
 Ink on screen, ink on paper. The chrome and the med] */
body.cinematic h1,
body.cinematic h2,
body.cinematic h3 {
    color: #000000;
}
/* [12 PRINT
 Ink on screen, ink on paper. The chrome and the med] */
body.cinematic p,
body.cinematic li {
    color: #1A1A1A;
}
/* [12 PRINT
 Ink on screen, ink on paper. The chrome and the med] */
body.cinematic .text-fab,
body.cinematic .nav-toggle,
body.cinematic .mobile-nav,
body.cinematic .utility-bar__social,
body.cinematic .vid-modal {
    display: none;
}
/* [12 PRINT
 Ink on screen, ink on paper. The chrome and the med] */
body.cinematic .site-header {
    position: static;
    background: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
}
}
@media (pointer: coarse) {
/* [11 TAP TARGETS ON TOUCH SCREENS] */
body.cinematic .utility-bar a,
body.cinematic .site-footer a:not(.btn),
body.cinematic .footer__areas a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
/* [11 TAP TARGETS ON TOUCH SCREENS] */
body.cinematic .utility-bar .social a,
body.cinematic .site-footer .social a {
    min-width: 44px;
    justify-content: center;
}
/* [11 TAP TARGETS ON TOUCH SCREENS] */
body.cinematic .area-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
/* [11 TAP TARGETS ON TOUCH SCREENS] */
body.cinematic input[type="checkbox"] {
    width: 24px;
    height: 24px;
}
/* [11 TAP TARGETS ON TOUCH SCREENS] */
body.cinematic .consent label,
body.cinematic label.consent {
    padding: 0.5rem 0;
}
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic {
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-line: rgba(255, 255, 255, 0.14);
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic main .btn,
body.cinematic .site-header .btn,
body.cinematic .mobile-nav .btn,
body.cinematic .btn-sms-mini,
body.cinematic .text-fab {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .nav-toggle,
body.cinematic .mobile-nav__close,
body.cinematic .btn--call {
  border-radius: 999px;
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .faq {
  border-radius: var(--radius);
  overflow: hidden;
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .faq {
  border: 1px solid var(--hairline);
  padding: 0 1.25rem;
  background: var(--ink);
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .nav__panel {
  border-radius: 14px;
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .mobile-nav__panel {
  border-radius: 20px 0 0 20px;
}

@media (max-width: 767px) {
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .faq {
    padding: 0 1rem;
}
}
@media (max-width: 560px) {
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .site-header .btn--call { padding: 0; width: 46px; height: 46px; min-width: 46px;
}
/* [15 ROUNDED AND PREMIUM] */
body.cinematic .site-header .btn--call svg { width: 21px; height: 21px;
}
}
@media (max-width: 767px) {
/* [16 PHONES, REBUILT] */
body.cinematic { --header-h: 64px;
}
/* [16 PHONES, REBUILT] */
body.cinematic .utility-bar { display: none;
}
/* [16 PHONES, REBUILT] */
body.cinematic .site-header .container { min-height: 64px;
}
/* [16 PHONES, REBUILT] */
body.cinematic main .btn { font-size: 1rem; padding: 0.85rem 1.4rem; min-height: 52px; letter-spacing: 0;
}
/* [16 PHONES, REBUILT] */
body.cinematic .site-footer { padding-top: 2.5rem; font-size: 0.9375rem;
}
/* [16 PHONES, REBUILT] */
body.cinematic .footer__grid,
body.cinematic .footer__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; padding-bottom: 1.5rem;
}
/* [16 PHONES, REBUILT] */
body.cinematic .site-footer .footer__grid--4 h3 { font-size: 1rem; margin-bottom: 0.6rem;
}
/* [16 PHONES, REBUILT] */
body.cinematic .footer__links a { font-size: 0.9375rem; padding: 4px 0; min-height: 44px;
}
/* [16 PHONES, REBUILT] */
body.cinematic .footer__areas { padding: 1rem 0; gap: 6px 12px;
}
/* [16 PHONES, REBUILT] */
body.cinematic .footer__areas a { font-size: 0.875rem;
}
/* [16 PHONES, REBUILT] */
body.cinematic .footer__legal { padding: 1rem 0 1.75rem; font-size: 0.8125rem;
}
/* [16 PHONES, REBUILT] */
body.cinematic .footer__areas-label { font-size: 0.8125rem;
}
}
/* [18 TIGHTER (the brief: "too much blank space all over ] */
body.cinematic {
  --band-y: 2.5rem;
  --band-y-md: 4.25rem;
}

@media (min-width: 768px) {
/* [18 TIGHTER (the brief: "too much blank space all over ] */
body.cinematic { --band-y: var(--band-y-md);
}
/* [18 TIGHTER (the brief: "too much blank space all over ] */
body.cinematic .site-footer { padding-top: 3rem;
}
/* [18 TIGHTER (the brief: "too much blank space all over ] */
body.cinematic .footer__grid,
body.cinematic .footer__grid--4 { padding-bottom: 2rem;
}
}
@media (max-width: 767px) {
/* [18 TIGHTER (the brief: "too much blank space all over ] */
body.cinematic .site-footer { padding-top: 2rem;
}
}
/* [19 BOXES WITH CHARACTER (the brief: "more customizatio] */
body.cinematic .faq {
  background-color: var(--ink-2);
  background-image: linear-gradient(180deg, rgba(245, 242, 237, 0.05) 0%, rgba(245, 242, 237, 0) 42%);
  border: 1px solid rgba(245, 242, 237, 0.10);
  box-shadow: inset 0 1px 0 rgba(245, 242, 237, 0.07), 0 12px 32px rgba(0, 0, 0, 0.30);
}
/* [25 LAZY LAYOUT FOR THE LONG PAGE] */
body.cinematic .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}
/* [27 FANCIER SERVICE BOXES, A BIGGER HERO, A WARMER WHITE (the brief] */
body.cinematic {
  --bone: #F7F3E8;
  --ash: #CDC8BE;
  --on-blue: #F9F5EA;
  --bone-85: rgba(247, 243, 232, 0.85);
  --bone-80: rgba(247, 243, 232, 0.80);
  --ash-75: rgba(205, 200, 190, 0.78);
  --ash-70: rgba(205, 200, 190, 0.72);
  --ash-60: rgba(205, 200, 190, 0.62);
}
/* [30 "FREE GUIDE" FIRST IN THE MENU] */
body.cinematic .nav__link--guide { color: var(--sky); font-weight: 600;
}
/* [30 "FREE GUIDE" FIRST IN THE MENU] */
body.cinematic .mobile-nav__guide { list-style: none; margin: 0 0 0.5rem; padding: 0;
}
/* [30 "FREE GUIDE" FIRST IN THE MENU] */
body.cinematic .mobile-nav__guide a { color: var(--sky); font-weight: 600;
}
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic { overflow-x: visible; overflow-x: clip;
}

@media (max-width: 767px) {
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic .site-header .container { padding-left: 16px; padding-right: 16px; gap: 8px; min-height: 64px;
}
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic .site-header .brand { flex: 0 0 auto;
}
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic .site-header .brand__mark { width: auto !important; height: 44px !important; display: block;
}
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic .site-header .btn-sms-mini { padding: 0 0.7rem; font-size: 0.75rem; letter-spacing: 0.08em; min-height: 44px;
}
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic .site-header .btn--call { width: 44px; height: 44px; min-width: 44px;
}
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic .site-header .nav-toggle { padding: 0 0.75rem; min-height: 44px; margin: 0;
}
/* [34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER (the brief, 2026] */
body.cinematic .site-header .header__actions { gap: 8px; flex: 0 0 auto;
}
}
@media (min-width: 768px) {
/* [35 DESKTOP, TIGHTER STILL (the brief: "a lot of blank ] */
body.cinematic { --band-y: 2.75rem;
}
/* [35 DESKTOP, TIGHTER STILL (the brief: "a lot of blank ] */
body.cinematic .site-footer { padding-top: 2.25rem;
}
}
@media (max-width: 767px) {
/* [36 PHONES, TIGHTER STILL (the brief: "tighten it up ev] */
body.cinematic .site-footer { padding-top: 1.5rem;
}
/* [36 PHONES, TIGHTER STILL (the brief: "tighten it up ev] */
body.cinematic .footer__grid,
body.cinematic .footer__grid--4 { gap: 1rem 0.75rem; padding-bottom: 1rem;
}
/* [36 PHONES, TIGHTER STILL (the brief: "tighten it up ev] */
body.cinematic .site-footer .footer__grid--4 h3 { margin-bottom: 0.4rem;
}
/* [36 PHONES, TIGHTER STILL (the brief: "tighten it up ev] */
body.cinematic .footer__links a { min-height: 36px; padding: 2px 0;
}
/* [36 PHONES, TIGHTER STILL (the brief: "tighten it up ev] */
body.cinematic .footer__areas { padding: 0.75rem 0;
}
/* [36 PHONES, TIGHTER STILL (the brief: "tighten it up ev] */
body.cinematic .footer__legal { padding: 0.75rem 0 1.25rem;
}
}
@media (min-width: 768px) {
/* [36 PHONES, TIGHTER STILL (the brief: "tighten it up ev] */
body.cinematic .site-footer h3,
body.cinematic .utility-bar__social .social-label,
body.cinematic .footer__areas-label { font-size: 0.75rem;
}
}

/* ==========================================================================
 03 PAGE HERO

 The one component the home page has no counterpart for. Every interior page
 opens with section.phero, and today that is a two-column split: words on the
 left, a job photo in a box on the right, on a bright blue ground.

 The cinematic answer is the home page's answer: the photo IS the ground. The
 same scrim, the same vignette, the same grain, the same glass cells under the
 words. Shorter than the home page's full screen, because an interior page is
 not the front door.

 NO MARKUP CHANGES. The figure is lifted out of the flow and stretched behind
 the words with position, and its caption becomes a plate in the corner, so
 every word including the caption stays visible -.

 Three variants, all from markup that already exists.phero 32 pages, a job photo.phero 1 page, residential-roofing, a muted drone loop.phero--plain 5 pages, no media: 404, accessibility, privacy,
 terms, thank-you
 ========================================================================== */

body.cinematic .phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  border-radius: 0;
  padding: 0;
  min-height: clamp(400px, 54vh, 560px);
  display: flex;
  align-items: flex-end;
}

/* The photo, lifted out of the flow and stretched behind everything. */
body.cinematic .phero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: hidden;
}
body.cinematic .phero__media picture,
body.cinematic .phero__media img,
body.cinematic .phero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  display: block;
}

/* THE LAYER ORDER, and why it is built this way..phero__media is position:absolute with z-index 0, so it opens its own
 stacking context. Anything inside it - including the figure's caption -
 is trapped at z-index 0 no matter what z-index it is given. Putting the
 scrim on.phero:before therefore painted it OVER the caption, and at the
 hero's foot the scrim is 94% opaque, which crushed the caption to an
 unreadable grey. So the scrim and the grain live INSIDE the media, above
 the photo and below the caption.phero__media z-index 0 (its own stacking context)
 img / video auto the photo:before 1 scrim + vignette:after 2 grain, at its own 3%
 figcaption 3 the caption pill, on top.phero__text z-index 4 the words, above the whole media

 It also means.phero--plain needs no special case: no media element, no
 scrim, automatically. */

body.cinematic .phero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(120% 90% at 50% 45%,
      rgba(10, 12, 14, 0) 42%,
      rgba(10, 12, 14, 0.55) 100%),
    linear-gradient(180deg,
      rgba(10, 12, 14, 0.74) 0%,
      rgba(10, 12, 14, 0.34) 30%,
      rgba(10, 12, 14, 0.72) 70%,
      rgba(10, 12, 14, 0.94) 100%);
}

body.cinematic .phero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
}

/* The container stops being a two-column grid: the photo is the ground now. */
body.cinematic .phero > .container {
  position: static;
  display: block;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

body.cinematic .phero__text {
  position: relative;
  z-index: 4;
  max-width: 58ch;
  padding: 3.5rem 0 3rem;
}

/* Breadcrumbs read as the home page's eyebrow. */
body.cinematic .phero__crumbs {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ash-75);
  margin: 0 0 1rem;
}
body.cinematic .phero__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* styles.css line 2995 already prints the separator with:after. Adding a
 second one here made every trail read "HOME / / ABOUT". Style theirs. */
body.cinematic .phero__crumbs li { color: var(--ash-75); opacity: 1; }
body.cinematic .phero__crumbs li:not(:last-child)::after { color: var(--ash-60); opacity: 1; }
body.cinematic .phero__crumbs a { color: var(--sky); text-decoration: none; }
body.cinematic .phero__crumbs a:hover { text-decoration: underline; }
body.cinematic .phero__crumbs [aria-current="page"] { color: var(--ash-75); }

body.cinematic .phero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--bone);
  max-width: 22ch;
  margin: 0 0 1rem;
  text-wrap: balance;
}

body.cinematic .phero__lede {
  font-family: var(--font-sans);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  color: var(--bone-80);
  max-width: 54ch;
  margin: 0 0 1.5rem;
}

body.cinematic .phero .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

/* The proof chips become the home page's glass cells. */
body.cinematic .phero .proof-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
body.cinematic .phero .proof-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.62rem 0.85rem;
  border-radius: 12px;
  background: rgba(10, 12, 14, 0.42);
  border: 1px solid rgba(245, 242, 237, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bone-85);
}
body.cinematic .phero .proof-chips li::before { content: none; }
body.cinematic .phero .proof-chips a { color: var(--bone-85); text-decoration: none; }
body.cinematic .phero .proof-chips a:hover { color: var(--sky); text-decoration: underline; }
body.cinematic .phero .proof-chips svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--sky);
}

/* The caption stays visible: a plate in the corner, the home page's plate. */
body.cinematic .phero__media figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: auto;
  z-index: 3;
  max-width: min(42ch, calc(100% - 24px));
  margin: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(10, 12, 14, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--bone-85);
  text-align: right;
}

/* ----.phero--plain: the five pages with no media ---- */
body.cinematic .phero--plain {
  min-height: 0;
  background: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  align-items: stretch;
}
body.cinematic .phero--plain .phero__text {
  padding: 3rem 0 2.25rem;
}
body.cinematic .phero--plain h1 { max-width: 26ch; }


/* ==========================================================================
 04 BANDS AND LAYOUT

 styles.css pads a band with --s-10 (5rem) top and bottom. the two
 rulings on the home page - "too much blank space all over the website" and
 "a lot of blank space for no reason" - brought that to 2.5rem on phones and
 2.75rem on desktop. The same numbers here.
 ========================================================================== */

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

body.cinematic .section { padding: var(--band-y) 0; background: var(--ink); }
body.cinematic .section--tight { padding: calc(var(--band-y) * 0.75) 0; }
body.cinematic .section--alt { background: var(--ink-2); }
body.cinematic #recent-work { background: var(--ink); }

/* The blue gradient band becomes the navy ground the home page's storm band
 uses. Its text token, --blue-soft, is a fill tint here, so it is restated. */
body.cinematic .section--dark {
  background: var(--navy);
  background-image: linear-gradient(180deg, rgba(245, 242, 237, 0.04) 0%, rgba(245, 242, 237, 0) 38%);
  color: var(--ash);
}
body.cinematic .section--dark h1,
body.cinematic .section--dark h2,
body.cinematic .section--dark h3,
body.cinematic .section--dark h4,
body.cinematic .section--dark strong { color: var(--bone); }
body.cinematic .section--dark p,
body.cinematic .section--dark li,
body.cinematic .section--dark .section-head p { color: var(--ash); }
body.cinematic .section--dark a:not(.btn) { color: var(--sky); }
body.cinematic .section--dark .eyebrow { color: var(--sky); }

body.cinematic .section-head { max-width: 760px; margin-bottom: 1.25rem; }
body.cinematic .section-head p { font-size: 1.02rem; color: var(--ash); margin-bottom: 0; }

body.cinematic .eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.75rem;
}

body.cinematic .split { gap: 2.5rem; align-items: start; }
body.cinematic .grid { gap: 1rem; }

/* ==========================================================================
 05 TYPOGRAPHY

 Playfair carries display and headings; Plex carries everything else. The
 scale steps down from the home page's, because an interior page is read,
 not arrived at.
 ========================================================================== */

body.cinematic h1, body.cinematic h2, body.cinematic h3,
body.cinematic h4, body.cinematic h5, body.cinematic h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.01em;
}
body.cinematic h2 { font-size: clamp(1.65rem, 2.6vw, 2.3rem); line-height: 1.12; margin: 0 0 0.75rem; }
body.cinematic h3 { font-size: clamp(1.18rem, 1.5vw, 1.4rem); line-height: 1.22; margin: 0 0 0.5rem; }
body.cinematic h4 { font-size: 1.05rem; line-height: 1.3; }

body.cinematic p,
body.cinematic li,
body.cinematic dd,
body.cinematic td {
  font-family: var(--font-sans);
  color: var(--ash);
  line-height: 1.6;
}
body.cinematic strong, body.cinematic b { color: var(--bone); font-weight: 600; }
body.cinematic a { color: var(--sky); }
body.cinematic hr { border: 0; border-top: 1px solid var(--hairline); }

body.cinematic .prose { max-width: 68ch; }
body.cinematic .prose h2 { margin-top: 2rem; }
body.cinematic .prose h2:first-child { margin-top: 0; }
body.cinematic blockquote {
  border-left: 2px solid var(--blue-fill);
  padding-left: 1rem;
  color: var(--bone-85);
  font-style: normal;
}

/* ==========================================================================
 06 THE BOX LANGUAGE

 One recipe for every
 card, tile, panel and list - a faint light from the top edge, a 1px bone-10
 line, a 1px inner highlight and a soft drop. The values are region 19 of
 home-cinematic.css, unchanged, so a card here and a card on the home page
 are the same object.
 ========================================================================== */

body.cinematic .card,
body.cinematic .media-card,
body.cinematic .review,
body.cinematic .faq,
body.cinematic .hero-form,
body.cinematic .gallery figure {
  background-color: var(--ink-2);
  background-image: linear-gradient(180deg, rgba(245, 242, 237, 0.05) 0%, rgba(245, 242, 237, 0) 42%);
  border: 1px solid rgba(245, 242, 237, 0.10);
  box-shadow: inset 0 1px 0 rgba(245, 242, 237, 0.07), 0 12px 32px rgba(0, 0, 0, 0.30);
  color: var(--ash);
}
/* On an alternate band the card drops to the darker ground, so it still reads
 as a raised object rather than blending into the band. */
body.cinematic .section--alt :is(.card, .media-card, .review, .faq, .gallery figure) {
  background-color: var(--ink);
}
body.cinematic .hero-form { border-top: 2px solid var(--blue-fill); }

body.cinematic .card h3,
body.cinematic .media-card h3,
body.cinematic .review h3 { color: var(--bone); }
body.cinematic .card p,
body.cinematic .media-card p { color: var(--ash); font-size: 0.95rem; }

body.cinematic .card--flat { background-color: var(--ink-2); background-image: none; border: 1px solid var(--hairline); box-shadow: none; }
body.cinematic .card--dark { background-color: var(--ink); border-color: var(--hairline); color: var(--ash); }
body.cinematic .card--dark h3 { color: var(--bone); }
body.cinematic .card--emergency {
  border: 1px solid rgba(127, 184, 232, 0.35);
  background-color: rgba(14, 85, 158, 0.14);
  background-image: linear-gradient(180deg, rgba(245, 242, 237, 0.05) 0%, rgba(245, 242, 237, 0) 42%);
}
body.cinematic .card__icon {
  background: rgba(14, 85, 158, 0.22);
  border: 1px solid rgba(127, 184, 232, 0.22);
  color: var(--sky);
}

/* ==========================================================================
 07 COMPONENTS
 ========================================================================== */

/* ---- the closing CTA band ---- */
body.cinematic .cta-band {
  background: var(--navy);
  background-image: linear-gradient(180deg, rgba(245, 242, 237, 0.05) 0%, rgba(245, 242, 237, 0) 42%);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(245, 242, 237, 0.07), 0 12px 32px rgba(0, 0, 0, 0.30);
  color: var(--ash);
  padding: 1.75rem 2rem;
}
body.cinematic .cta-band h2 { color: var(--bone); }
body.cinematic .cta-band p, body.cinematic .cta-band li { color: var(--ash); }
body.cinematic .cta-band .btn-note { color: var(--ash-75); }

/* ---- FAQ ---- */
body.cinematic .faq { border-radius: var(--radius); overflow: hidden; }
body.cinematic .faq__item { border-bottom: 1px solid var(--hairline); }
body.cinematic .faq__item:last-child { border-bottom: 0; }
body.cinematic .faq__q {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--bone);
  background: transparent;
  border: 0;
}
body.cinematic .faq__q:hover { color: var(--sky); }
body.cinematic .faq__item[open] .faq__q,
body.cinematic .faq__q[aria-expanded="true"] { color: var(--sky); }
body.cinematic .faq__a p, body.cinematic .faq__a li { color: var(--ash); }

/* ---- reviews ---- */
body.cinematic .review blockquote { color: var(--bone-85); border: 0; padding: 0; }
body.cinematic .review__stars { color: #F0B429; }
body.cinematic .review__who { color: var(--bone); font-weight: 600; }
body.cinematic .review__meta { color: var(--ash-75); }
body.cinematic .review::before { color: rgba(127, 184, 232, 0.14); font-family: var(--font-display); }

/* ---- the recent-work gallery: the home page's 14px frame ---- */
body.cinematic .gallery figure {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background-image: none;
}
body.cinematic .gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 14, 0) 52%, rgba(10, 12, 14, 0.55) 100%);
}
body.cinematic .gallery figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: auto;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(10, 12, 14, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ash-75);
}

/* ---- lists ---- */
body.cinematic .checklist li,
body.cinematic .warnlist li { color: var(--ash); }
body.cinematic .checklist li::before { background-color: rgba(46, 139, 87, 0.22); }
body.cinematic .warnlist li::before { background-color: rgba(14, 85, 158, 0.22); }

body.cinematic .area-list a,
body.cinematic .footer__areas a { color: var(--sky); }

body.cinematic .badge {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  background: rgba(14, 85, 158, 0.22);
  border: 1px solid rgba(127, 184, 232, 0.22);
  color: var(--sky);
}
body.cinematic .badge--navy { background: rgba(245, 242, 237, 0.06); border-color: var(--hairline-strong); color: var(--ash); }
body.cinematic .badge--emergency { background: rgba(14, 85, 158, 0.22); border-color: rgba(127, 184, 232, 0.28); color: var(--sky); }

body.cinematic .link-arrow {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--sky);
  border-bottom-color: rgba(127, 184, 232, 0.35);
}
body.cinematic .link-arrow:hover { color: var(--bone); border-bottom-color: var(--sky); }

/* ==========================================================================
 08 FORMS

 The one Netlify form named "lead" is on nearly every page, with the
 conditional branches script.js shows and hides. Nothing here touches a
 name, an id, a class script.js reads, or the submit path - only the paint.
 ========================================================================== */

body.cinematic .field label,
body.cinematic .form label { color: var(--bone); font-family: var(--font-sans); font-weight: 500; }
body.cinematic .field input,
body.cinematic .field select,
body.cinematic .field textarea {
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
  font-family: var(--font-sans);
  border-radius: 12px;
}
body.cinematic .field input::placeholder,
body.cinematic .field textarea::placeholder { color: var(--ash-70); }
body.cinematic .field input:focus,
body.cinematic .field select:focus,
body.cinematic .field textarea:focus {
  background: var(--ink);
  border-color: var(--sky);
  outline: 2px solid rgba(127, 184, 232, 0.35);
  outline-offset: 1px;
}
body.cinematic .field select { color: var(--bone); }
body.cinematic .field select option { background: var(--ink-2); color: var(--bone); }
body.cinematic .hint { color: var(--ash-75); }
body.cinematic .req { color: var(--sky); }
body.cinematic .field__error { color: var(--error-text); }
body.cinematic .field input[aria-invalid="true"],
body.cinematic .field select[aria-invalid="true"],
body.cinematic .field textarea[aria-invalid="true"] { border-color: var(--error-text); }
body.cinematic .consent { color: var(--ash-75); }
body.cinematic .consent a { color: var(--sky); }
body.cinematic input[type="checkbox"] { accent-color: var(--blue-fill); }

/* ==========================================================================
 09 MEDIA
 ========================================================================== */

body.cinematic .media-card img,
body.cinematic .media-card video,
body.cinematic .card img { border-radius: 0; }
body.cinematic .media-card { overflow: hidden; }
body.cinematic .media-card__body { padding: 1.25rem; }
body.cinematic figure { margin: 0; }
body.cinematic figcaption { color: var(--ash-75); font-family: var(--font-sans); }
body.cinematic .video-card,
body.cinematic .native-video,
body.cinematic .video-split video {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
 10 STATES
 Hover lifts 3px under a real pointer only - region 19's rule.
 ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  body.cinematic .card,
  body.cinematic .media-card,
  body.cinematic .review {
    transition: transform var(--t-fast) var(--ease-cinema), border-color var(--t-fast) var(--ease-cinema);
  }
  body.cinematic .card:hover,
  body.cinematic .media-card:hover {
    transform: translateY(-3px);
    border-color: rgba(127, 184, 232, 0.40);
    box-shadow: inset 0 1px 0 rgba(245, 242, 237, 0.07), 0 18px 44px rgba(0, 0, 0, 0.38);
  }
  body.cinematic .gallery figure img { transition: transform var(--t-mid) var(--ease-cinema); }
  body.cinematic .gallery figure:hover img { transform: scale(1.04); }
}
body.cinematic :focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
body.cinematic .section--dark :focus-visible,
body.cinematic .site-footer :focus-visible,
body.cinematic .phero :focus-visible { outline-color: var(--sky); }


/* ==========================================================================
 11 PHONES

 One phone system for every screen under 768px, on the home page's numbers
 (region 16, as later regions left it): H1 39px at the top of its clamp,
 H2 28px, H3 19px, body 16px, labels, captions and eyebrows 12px, buttons
 16px on 52px pills, fields 16px on 52px, footer 15px, legal 13px.

 Two floors: no text under 12px, no thumb target under
 44px. Nothing is hidden at any width - the pass re-lays the words and
 never removes one.
 ========================================================================== */

@media (max-width: 767px) {

  /* ---- the page hero ---- */
  body.cinematic .phero {
    min-height: clamp(360px, 62vh, 520px);
  }
  body.cinematic .phero__text {
    max-width: none;
    padding: 2.5rem 0 2rem;
  }
  body.cinematic .phero h1 {
    max-width: none;
    font-size: clamp(1.9rem, 8.4vw, 2.45rem);
    line-height: 1.08;
    margin-bottom: 0.8rem;
  }
  body.cinematic .phero__lede {
    font-size: 1.0625rem;
    max-width: none;
    margin-bottom: 1.25rem;
  }
  body.cinematic .phero__crumbs { font-size: 0.75rem; letter-spacing: 0.14em; margin-bottom: 0.75rem; }
  body.cinematic .phero .btn-row { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1.25rem; }
  body.cinematic .phero .btn-row .btn { width: 100%; }

  /* The chips stack two-up so each stays a 44px target and nothing truncates. */
  body.cinematic .phero .proof-chips { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
  body.cinematic .phero .proof-chips li { min-height: 44px; padding: 0.6rem 0.8rem; font-size: 0.8125rem; }

  /* The caption plate moves to the top of the photo: the words own the foot. */
  body.cinematic .phero__media figcaption {
    top: 10px;
    bottom: auto;
    right: 10px;
    left: 10px;
    max-width: none;
    font-size: 0.75rem;
    text-align: right;
  }
  body.cinematic .phero--plain { min-height: 0; }
  body.cinematic .phero--plain .phero__text { padding: 2rem 0 1.5rem; }

  /* ---- type ---- */
  body.cinematic h2 { font-size: 1.75rem; line-height: 1.14; }
  body.cinematic h3 { font-size: 1.1875rem; line-height: 1.25; }
  body.cinematic p, body.cinematic li { font-size: 1rem; }
  body.cinematic .eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; margin-bottom: 0.6rem; }
  body.cinematic .section-head p { font-size: 1rem; }

  /* ---- rhythm ---- */
  body.cinematic .section { padding: var(--band-y) 0; }
  body.cinematic .section-head { margin-bottom: 1rem; }
  body.cinematic .split { grid-template-columns: 1fr; gap: 1.5rem; }
  body.cinematic .grid,
  body.cinematic .grid--2,
  body.cinematic .grid--3,
  body.cinematic .grid--4 { grid-template-columns: 1fr; gap: 0.85rem; }

  /* ---- boxes: photos full width and matted, as on the home page ---- */
  body.cinematic .card { padding: 1.1rem; }
  body.cinematic .media-card__body { padding: 1.1rem; }
  body.cinematic .review { padding: 1.1rem; }
  body.cinematic .cta-band { padding: 1.25rem 1.1rem; grid-template-columns: 1fr; gap: 1rem; }

  /* The recent-work gallery: one 16:10 photo per row, matted, never a thumbnail strip. */
  body.cinematic .gallery { grid-template-columns: 1fr; gap: 0.75rem; }
  body.cinematic .gallery figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

  /* ---- forms: 52px targets, 16px text so iOS does not zoom ---- */
  body.cinematic .field input,
  body.cinematic .field select,
  body.cinematic .field textarea {
    font-size: 1rem;
    min-height: 52px;
  }
  body.cinematic .field textarea { min-height: 104px; }
  body.cinematic .consent { font-size: 0.8125rem; }

  /* ---- floors ---- */
  body.cinematic .hint,
  body.cinematic .req,
  body.cinematic .badge,
  body.cinematic figcaption,
  body.cinematic .review__meta,
  body.cinematic .phero__media figcaption,
  body.cinematic .gallery figcaption { font-size: 0.75rem; }
}

/* The 12px floor holds at every width, not only under 768px. Nothing on these
 pages sets text smaller than 0.75rem after this rule. */
body.cinematic .hint,
body.cinematic .req,
body.cinematic .badge,
body.cinematic .eyebrow,
body.cinematic figcaption,
body.cinematic .review__meta,
body.cinematic .footer__legal,
body.cinematic .consent,
body.cinematic .phero__crumbs { font-size: max(0.72rem, 12px); }

/* Thumb targets. A link in running prose is exempt - the rule is for controls. */
@media (pointer: coarse) {
  body.cinematic .btn,
  body.cinematic .faq__q,
  body.cinematic .nav__link,
  body.cinematic .footer__links a,
  body.cinematic .footer__areas a,
  body.cinematic .proof-chips li,
  body.cinematic .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
 12 REDUCED MOTION
 ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.cinematic *,
  body.cinematic *::before,
  body.cinematic *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body.cinematic .card:hover,
  body.cinematic .media-card:hover,
  body.cinematic .gallery figure:hover img { transform: none; }
  body.cinematic .phero__media video { display: none; }
  body.cinematic .phero--has-video { background-size: cover; background-position: 50% 42%; }
}

/* ==========================================================================
 13 PRINT
 Ink on paper. The chrome, the films and the forms go; the words stay.
 ========================================================================== */

@media print {
  body.cinematic {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  body.cinematic h1, body.cinematic h2, body.cinematic h3,
  body.cinematic h4, body.cinematic p, body.cinematic li,
  body.cinematic strong, body.cinematic a { color: #000000 !important; }
  body.cinematic .phero,
  body.cinematic .section,
  body.cinematic .section--alt,
  body.cinematic .section--dark,
  body.cinematic .cta-band,
  body.cinematic .card,
  body.cinematic .media-card,
  body.cinematic .review,
  body.cinematic .faq,
  body.cinematic .hero-form {
    background: #FFFFFF !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: #CCCCCC !important;
    color: #000000 !important;
  }
  body.cinematic .phero__media::before,
  body.cinematic .phero__media::after,
  body.cinematic .gallery figure::after { content: none !important; }
  body.cinematic .phero__media { position: static; }
  body.cinematic .phero__media img { max-height: 240px; width: auto; }
  body.cinematic .utility-bar,
  body.cinematic .mobile-nav,
  body.cinematic .text-fab,
  body.cinematic .nav-toggle { display: none !important; }
}

/* ==========================================================================
 14 FONT FALLBACKS, WIDTH-MATCHED

 Lifted from home-cinematic.css region 17, unchanged. The web fonts arrive
 after the first paint; size-adjust scales each system face to the web
 face's width so the swap moves nothing. Measured there with canvas
 measureText: Playfair / Georgia 0.884, Plex / Segoe UI 0.987,
 Plex / Arial 0.992. The faces are named in the two font tokens in
 region 01, so this file is self-contained.
 ========================================================================== */

@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia");
  font-weight: 100 900;
  size-adjust: 88.4%;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Segoe UI"), local("SegoeUI");
  font-weight: 100 900;
  size-adjust: 98.7%;
}
@font-face {
  font-family: "Plex Fallback Arial";
  src: local("Arial");
  font-weight: 100 900;
  size-adjust: 99.2%;
}


/* ==========================================================================
 15 THE LAST DARK-ON-DARK RULES

 styles.css uses --navy-900 and --navy-800 as a text colour in some places
 and as a ground in others, so neither could be remapped in region 01. The
 text uses that survive on these 38 pages are named here, one by one. Found
 by walking every element of every page in the browser and measuring the
 real composited contrast, not by reading the stylesheet - the reviewer
 name below was #0A0C0E on #0A0C0E, invisible, and no amount of reading
 would have caught it.
 ========================================================================== */

/* The reviewer's name under a Google review. Was ink on ink. */
body.cinematic .review__name { color: var(--bone); }

/* A filled blue button must carry the on-blue text, never the sky text role. */
body.cinematic .btn--emergency,
body.cinematic .btn--emergency:hover,
body.cinematic .btn--emergency:focus { color: var(--on-blue); }

/* An outline button on any ground, not only inside a dark band. */
body.cinematic .btn--secondary {
  color: var(--bone);
  border-color: var(--hairline-strong);
  background: rgba(245, 242, 237, 0.04);
}
body.cinematic .btn--secondary:hover {
  color: var(--bone);
  border-color: rgba(127, 184, 232, 0.55);
  background: rgba(245, 242, 237, 0.10);
}

/* The FAQ question button and the numerals that read as ink on ink. */
body.cinematic .faq__q,
body.cinematic .stat-row strong,
body.cinematic .cred-strip__num { color: var(--bone); }
body.cinematic .faq__icon { color: var(--sky); }

/* Selected text. Was blue-soft ground with ink type; both moved. */
body.cinematic ::selection { background: var(--blue-fill); color: var(--on-blue); }

/* The Netlify honeypot is off-screen, not hidden, so its white field was
 painting a 170x21 light rectangle at -9999px. It keeps its position and
 its label; only the paint goes. */
body.cinematic .hp-field input { background: transparent; color: var(--ash); border-color: var(--hairline); }

/* A drop shadow tuned for a white page is invisible on ink. */
body.cinematic [style*="box-shadow:var(--shadow-md)"] {
  box-shadow: inset 0 1px 0 rgba(245, 242, 237, 0.07), 0 12px 32px rgba(0, 0, 0, 0.30) !important;
}

/* A filled button carries the on-blue text wherever it sits. A band-level link
 colour must never reach it: that is what turned one primary button on
 roof-replacement.html into sky type on a blue fill, 3.53:1. */
body.cinematic .btn--primary,
body.cinematic .btn--primary:hover,
body.cinematic .btn--primary:focus,
body.cinematic .section--dark .btn--primary,
body.cinematic .cta-band .btn--primary,
body.cinematic .phero .btn--primary { color: var(--on-blue); }


/* ==========================================================================
 16 FORCED COLOURS (Windows High Contrast)

 styles.css:955 already gives.btn.card.review and.media-card a border
 in forced-colours mode, because a filled button loses its fill there and
 would otherwise vanish. This page's new surfaces need the same courtesy:
 the hero's scrim, vignette and grain, the box language's top light and the
 gallery's foot scrim are all background images, and forced-colours drops
 background images while keeping the text. accessibility.html is a public
 commitment on this site, so the dark system honours it.
 ========================================================================== */

@media (forced-colors: active) {
  body.cinematic .phero__media::before,
  body.cinematic .phero__media::after,
  body.cinematic .gallery figure::after { content: none; }
  body.cinematic .phero__text,
  body.cinematic .phero .proof-chips li,
  body.cinematic .phero__media figcaption,
  body.cinematic .gallery figcaption { background: Canvas; color: CanvasText; }
  body.cinematic .phero .proof-chips li,
  body.cinematic .phero__media figcaption,
  body.cinematic .gallery figcaption,
  body.cinematic .faq,
  body.cinematic .hero-form,
  body.cinematic .cta-band { border: 1px solid CanvasText; }
  body.cinematic .faq__item { border-bottom: 1px solid CanvasText; }
  body.cinematic :focus-visible { outline: 2px solid Highlight; }
}

/* ============================================================================
   16. NO AI TELLS (2026-10-06). Andrew: "I CANNOT have ANY indication of AI language being used on the
   page." The inner-page half of home-cinematic.css region 44, same reasons: the header gap at a wide
   screen; the colored stripes on one side of a card (the 5px bar under a service tile, the 4px bar on a
   weather card, the 4px left rule on a stat row, the red left rule on the insurance note); eyebrows on
   every section (hidden: "Next step", "Straight answers", "Recent work" each repeat the heading under
   them); the caps on the header text button; the hairline-plus-wide-shadow surface (the line stays);
   the cramped FAQ and city-pill boxes.
   ========================================================================================== */
body.cinematic .site-header .header__actions { margin-left: 2rem; }
body.cinematic .site-header .btn-sms-mini { margin-left: 0; text-transform: none; letter-spacing: 0.01em; font-size: 0.9rem; }
body.cinematic .svc2__media::after,
body.cinematic .wx-card::before { display: none; content: none; }
body.cinematic .wx-card { border-top: 0; }
body.cinematic .stat-row li { border-left: 0; }
body.cinematic .ins-panel .split > div:first-child > p[style] { border-left: 0; }
body.cinematic .eyebrow,
body.cinematic .section--dark .eyebrow,
body.cinematic .cta-band .eyebrow { display: none !important; }
body.cinematic .faq,
body.cinematic .gallery figure,
body.cinematic .cta-band,
body.cinematic .media-card:hover,
body.cinematic .video-split video,
body.cinematic [style*="box-shadow:var(--shadow-md)"] { box-shadow: inset 0 1px 0 rgba(245, 242, 237, 0.07) !important; }
body.cinematic .faq { padding-top: 0.25rem; padding-bottom: 0.25rem; }
body.cinematic .area-pills { padding-top: 0.75rem; }


/* === 17 NO CAPTIONS ON PHOTOS === */
/* Andrew, 2026-10-06: "remove all of these on the photos." The hero pill and the gallery pills are
 gone from every page's markup; this keeps one from drawing again, and the gallery's bottom scrim,
 which only existed to seat the pill, goes with it. Captions under a video or a photo are untouched. */
body.cinematic .phero__media figcaption,
body.cinematic .gallery figcaption { display: none !important; }
body.cinematic .gallery figure::after { content: none; }

/* === 18 THE REVIEWS PAGE: EVERY CARD THE SAME HEIGHT, THE LONG ONES OPEN IN PLACE (2026-10-13) === */
/* Andrew, with the live reviews page: "I need this formatted better. If it is a really long review then
 they can click on it to read the full thing." The grid gave every card in a row the height of the
 longest review, so a 190-word review left two dark holes beside it. reviews.js now cuts every quote to
 six lines and adds a "Read the full review" button only where a quote was actually cut; the card opens
 in place; the cards in that row stretch with it, as they always did. Without JavaScript nothing
 is cut. In print every review is whole and the buttons are gone. */
body.cinematic .review blockquote.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.cinematic .review__more {
  display: inline-block;
  align-self: flex-start;
  margin: -0.25rem 0 1rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sky);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.cinematic .review__more:hover { color: var(--bone); }
body.cinematic .review__more:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
@media print {
  body.cinematic .review blockquote.is-clamped { display: block; overflow: visible; }
  body.cinematic .review__more { display: none; }
}