/* ==========================================================================
 TRU ARMOR ROOFING - HOMEPAGE, CINEMATIC REBUILD
 
 

 Loaded by index.html ONLY, after assets/styles.css, which is not edited.
 Every rule below is scoped to body.home-cinematic. The other 38 pages share
 styles.css and do not change.

 Radius is 0 on every element on this page. Only transform and opacity
 animate. Every animation has a prefers-reduced-motion variant. Every hover
 transform lives inside @media (hover: hover) and (pointer: fine).

 Region map:
 01 TOKENS
 02 RESET AND BASE
 03 TYPOGRAPHY
 04 LAYOUT PRIMITIVES
 05 CHROME THE PAGE INHERITS
 06 HERO
 07 BANDS, IN SECTION ORDER (S03 - S18)
 08 COMPONENTS
 09 STATES
 10 MOTION
 11 REDUCED MOTION
 12 PRINT
 ========================================================================== */


/* ==========================================================================
 01 TOKENS
 The spec's "## Tokens used" block, verbatim. It sits on:root because only
 index.html loads this file, so no other page can see it.

 COLLISION NOTE, deliberate and handled: assets/styles.css already declares
 --blue (#1868B0), --blue-deep (#0E559E) and --font-display (Barlow
 Condensed). The three names below replace those values on this page alone.
 Region 05 re-declares every inherited rule that read them, so nothing is
 left to chance.
 ========================================================================== */

:root {
  /* Grounds */
  --ink: #0A0C0E;          /* page ground, bands 02 05 07 09 11 13 15 17, footer */
  --ink-2: #0E1114;        /* bands 03 06 08 10 12 16 18, cards, form fields */
  --ink-3: #131719;        /* the discount band only */
  --navy: #0E2A47;         /* the storm band ground only */

  /* Text */
  --bone: #F5F2ED;         /* headings and primary text, 17.55:1 on ink */
  --ash: #C9C7C3;          /* body text, 11.61:1 on ink */

  /* The two accent roles, never mixed */
  --blue: #0E559E;         /* FILL ONLY - button grounds, the active rule, the FAB */
  --blue-deep: #0B4380;    /* hover and pressed fill */
  --sky: #7FB8E8;          /* TEXT ONLY - eyebrows, open FAQ row, focus ring, nav hover. 9.26:1 */
  --on-blue: #F7F4F0;      /* text on --blue (6.81:1) or --blue-deep (9.00:1) */
  --verified: #2E8B57;     /* the three insurance checkmark icons only. 4.62:1 on ink */

  /* Alpha steps */
  --bone-85: rgba(245, 242, 237, 0.85);   /* field plate text */
  --bone-80: rgba(245, 242, 237, 0.80);   /* hero lede */
  --bone-25: rgba(245, 242, 237, 0.25);   /* the giant step numerals only. 2.07:1, decorative */
  --ash-75: rgba(201, 199, 195, 0.75);    /* small labels. 6.80:1 */
  --ash-70: rgba(201, 199, 195, 0.70);    /* placeholders. 6.06:1 */
  --ash-60: rgba(201, 199, 195, 0.60);    /* absolute floor. 4.70:1 */

  /* 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);

  /* Error. Not a brand colour..field__error text and invalid field border only */
  --error-text: #F0A8AC;

  /* Type */
  --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;
  /* The two "Fallback" faces are region 17: the system fonts, width-matched, so the swap to
 the web fonts does not move the words. */
  /* Declared and deliberately unused on this page. The field plate is IBM Plex
 Sans 600, not a monospace, so nothing depends on a system mono font. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Geometry */
  --wrap: 1240px;
  --gutter: 1.5rem;
  --gutter-md: 2.5rem;
  --band-y: 5rem;
  --band-y-md: 7rem;
  --radius: 0;

  /* Motion */
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --t-press: 0.16s;
  --t-fast: 0.20s;
  --t-mid: 0.30s;
  --t-reveal: 1.00s;
  /* the design --t-slow: 0.70s is not used. See the motion budget. */
}


/* ==========================================================================
 02 RESET AND BASE
 ========================================================================== */

body.home-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;
}

/* Gutters and band height step up at 768px. Declared in scope, not on:root. */
@media (min-width: 768px) {
  body.home-cinematic {
    --gutter: var(--gutter-md);
    --band-y: var(--band-y-md);
  }
}

/* Radius 0 on every element on this page. Do not raise it. */
body.home-cinematic *,
body.home-cinematic *::before,
body.home-cinematic *::after {
  border-radius: var(--radius);
}

body.home-cinematic img,
body.home-cinematic svg,
body.home-cinematic video,
body.home-cinematic iframe {
  display: block;
  max-width: 100%;
}

body.home-cinematic img {
  height: auto;
}

body.home-cinematic p {
  margin: 0 0 1rem;
}

body.home-cinematic p:last-child {
  margin-bottom: 0;
}

body.home-cinematic ul,
body.home-cinematic ol {
  margin: 0;
  padding: 0;
}

body.home-cinematic li {
  margin: 0;
}

body.home-cinematic a {
  color: var(--sky);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.home-cinematic a:hover {
  color: var(--sky);
}

body.home-cinematic strong,
body.home-cinematic b {
  font-weight: 600;
  color: var(--bone);
}

body.home-cinematic hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2rem 0;
}

body.home-cinematic figure {
  margin: 0;
}

body.home-cinematic blockquote {
  margin: 0;
}

/* Smooth anchor scrolling. Motion budget item 16: it prevents a jarring jump
 to the form. Set on the document because scroll-behavior is a document
 property, and matched to this page only. */
html:has(body.home-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 media query.
 ========================================================================== */

body.home-cinematic h1,
body.home-cinematic h2,
body.home-cinematic h3,
body.home-cinematic h4,
body.home-cinematic h5,
body.home-cinematic h6 {
  margin: 0;
  color: var(--bone);
  font-weight: 600;
  text-wrap: balance;
}

body.home-cinematic .c-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: var(--bone);
}

body.home-cinematic .c-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--bone);
}

body.home-cinematic .c-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--bone);
}

body.home-cinematic .c-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ash);
}

body.home-cinematic .c-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.62;
  max-width: 46ch;
  color: var(--ash);
}

body.home-cinematic .c-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ash-75);
}

body.home-cinematic .c-micro {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ash-70);
}

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

body.home-cinematic .c-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.70rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ash);
}

/* "Free roof" must never be alone on a line. Build check 1. */
body.home-cinematic .c-nowrap {
  white-space: nowrap;
}

/* Declared, used nowhere, deliberately. method step 4: the only
 honest big numbers on this page are the five in the trust strip, and the
 discount band has no number we are allowed to print. */
body.home-cinematic .c-stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
}

body.home-cinematic .c-stat-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--bone);
}


/* ==========================================================================
 04 LAYOUT PRIMITIVES
 Bands, wraps and the three grid rules, written once.
 ========================================================================== */

body.home-cinematic .c-band {
  position: relative;
  background: var(--ink);
  padding-top: var(--band-y);
  padding-bottom: var(--band-y);
}

body.home-cinematic .c-band--alt {
  background: var(--ink-2);
}

body.home-cinematic .c-band--deep {
  background: var(--ink-3);
}

/* The wrap..c-wrap and an inherited.container inside a band are the same
 thing here, so either spelling in the markup lands in the right place. */
body.home-cinematic .c-wrap,
body.home-cinematic .c-band > .container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

body.home-cinematic .c-wrap--narrow,
body.home-cinematic .c-band > .container--narrow {
  max-width: 46rem;
}

/* Band heading block */
body.home-cinematic .c-head {
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

body.home-cinematic .c-head--wide {
  max-width: 62ch;
}

body.home-cinematic .c-head > * + * {
  margin-top: 1rem;
}

body.home-cinematic .c-head .c-eyebrow {
  margin-bottom: 0;
}

/* Card grid: 1 / 2 / 3 across */
body.home-cinematic .c-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {
  body.home-cinematic .c-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.home-cinematic .c-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Gallery grid: 2 / 2 / 4 across */
body.home-cinematic .c-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  body.home-cinematic .c-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Two-column splits: stacked below 1024px */
body.home-cinematic .c-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  body.home-cinematic .c-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3rem;
  }

  /* Featured project: the film is the 5, the words are the 7 */
  body.home-cinematic .c-split--reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  /* Insurance: an even split */
  body.home-cinematic .c-split--even {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }
}

/* The border-drawn grid. 1px hairlines between cells, no gap: the container
 ground shows through a 1px gap, so the rules land exactly between cells and
 never around the outside. Used by the trust strip and the process steps. */
body.home-cinematic .c-rule-grid {
  display: grid;
  gap: 1px;
  background: var(--hairline-strong);
}


/* ==========================================================================
 05 CHROME THE PAGE INHERITS
 Every URL, label, aria-* attribute, data-cta, data-loc and class name is
 kept. Only the look changes, and only inside this scope.
 ========================================================================== */

/* --- Skip link ----------------------------------------------------------- */
body.home-cinematic .skip-link {
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.06em;
}

body.home-cinematic .skip-link:focus {
  color: var(--on-blue);
}

/* --- Utility bar --------------------------------------------------------- */
body.home-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;
}

body.home-cinematic .utility-bar .container {
  max-width: var(--wrap);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

body.home-cinematic .utility-bar a {
  color: var(--ash-75);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .utility-bar a:hover {
  color: var(--sky);
}

body.home-cinematic .utility-bar__facts svg {
  width: 15px;
  height: 15px;
  color: var(--ash-70);
}

body.home-cinematic .utility-bar__social .social-label {
  color: var(--ash-70);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* The inherited rule is (0,2,1) and carries a 5px radius and a blue fill, so
 both are named here rather than left to the blanket radius rule. */
body.home-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);
}

body.home-cinematic .utility-bar__social a.sq:hover {
  background: transparent;
  color: var(--sky);
  border-color: var(--hairline-strong);
}

body.home-cinematic .utility-bar__social svg {
  width: 15px;
  height: 15px;
}

/* --- Header -------------------------------------------------------------- */
/* Transparent over the hero. script.js sets.is-stuck at scrollY > 8, and that
 is the only thing that changes. No new JS, no shadow (a shadow on ink does
 nothing). */
body.home-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);
}

body.home-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;
}

body.home-cinematic .site-header .container {
  max-width: var(--wrap);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

body.home-cinematic .brand__name {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
}

body.home-cinematic .brand__tag {
  color: var(--ash-70);
  font-family: var(--font-sans);
}

/* --- Nav ----------------------------------------------------------------- */
body.home-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);
}

body.home-cinematic .nav__link:hover,
body.home-cinematic .nav__link[aria-expanded="true"] {
  background: none;
  color: var(--sky);
}

body.home-cinematic .nav__link[aria-current="page"] {
  color: var(--sky);
  box-shadow: inset 0 -1px 0 var(--blue);
}

body.home-cinematic .nav__caret {
  width: 10px;
  height: 10px;
}

body.home-cinematic .nav__panel {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  box-shadow: none;
  padding: 0.5rem;
}

body.home-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);
}

body.home-cinematic .nav__panel a:hover {
  background: var(--hairline-soft);
  color: var(--sky);
}

body.home-cinematic .nav__panel-note {
  color: var(--ash-70);
}

/* --- Header actions ------------------------------------------------------ */
body.home-cinematic .header__actions .btn,
body.home-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;
}

body.home-cinematic .header__actions .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  box-shadow: none;
}

body.home-cinematic .header__actions .btn--primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--on-blue);
}

/* The Call button is an outline at desktop widths in styles.css. Re-skinned
 for ink so it is legible over the hero and over the stuck header alike. */
@media (min-width: 1181px) {
  body.home-cinematic .header__actions .btn--call {
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--bone);
    box-shadow: none;
  }

  body.home-cinematic .header__actions .btn--call:hover {
    background: var(--hairline-soft);
    border-color: var(--sky);
    color: var(--bone);
  }
}

body.home-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);
}

body.home-cinematic .btn-sms-mini:hover {
  background: var(--hairline-soft);
  border-color: var(--sky);
  color: var(--bone);
}

body.home-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;
}

body.home-cinematic .nav-toggle:hover {
  border-color: var(--sky);
}

/* --- Mobile drawer ------------------------------------------------------- */
/* Existing open and close behaviour and timing are kept. Colours only. */
body.home-cinematic .mobile-nav {
  background: rgba(10, 12, 14, 0.72);
}

body.home-cinematic .mobile-nav__panel {
  background: var(--ink);
  border-left: 1px solid var(--hairline);
  box-shadow: none;
}

body.home-cinematic .mobile-nav .brand__name {
  color: var(--bone);
}

body.home-cinematic .mobile-nav__close {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
}

body.home-cinematic .mobile-nav__close:hover {
  border-color: var(--sky);
}

/* --font-display is Playfair on this page, and a bare h2 would inherit it.
 The drawer's section labels are Plex, as they are today. */
body.home-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);
}

body.home-cinematic .mobile-nav li {
  border-bottom: 1px solid var(--hairline);
}

body.home-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);
}

body.home-cinematic .mobile-nav li a:hover {
  color: var(--sky);
}

body.home-cinematic .mobile-nav__cta .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  box-shadow: none;
}

body.home-cinematic .mobile-nav__cta .btn--primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

body.home-cinematic .mobile-nav__cta .btn--secondary {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
}

body.home-cinematic .mobile-nav__cta .btn--secondary:hover {
  background: var(--hairline-soft);
  border-color: var(--sky);
  color: var(--bone);
}

/* --- Footer -------------------------------------------------------------- */
/* The ground is already #0A0C0E. Type only is re-set. */
body.home-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;
}

body.home-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;
}

body.home-cinematic .site-footer a {
  color: var(--ash);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .site-footer a:hover {
  color: var(--sky);
  text-decoration: none;
}

body.home-cinematic .footer__grid {
  border-bottom: 1px solid var(--hairline);
}

body.home-cinematic .footer__c2 svg {
  color: var(--ash-70);
  width: 16px;
  height: 16px;
}

body.home-cinematic .footer__c2 a {
  color: var(--bone);
  font-weight: 500;
}

body.home-cinematic .footer__c2 span {
  color: var(--ash);
}

body.home-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);
}

body.home-cinematic .footer__soc a:hover {
  background: transparent;
  border-color: var(--sky);
  color: var(--sky);
}

body.home-cinematic .footer__lic {
  font-size: 0.78rem;
  color: var(--ash-70);
}

body.home-cinematic .footer__lic strong {
  color: var(--bone);
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.home-cinematic .footer__areas {
  border-top: 1px solid var(--hairline);
}

body.home-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);
}

body.home-cinematic .footer__areas a {
  color: var(--ash);
  font-size: 0.85rem;
}

body.home-cinematic .footer__legal {
  border-top: 1px solid var(--hairline);
  color: var(--ash-70);
  font-size: 0.78rem;
}

body.home-cinematic .footer__legal a {
  color: var(--ash-70);
}

/* --- Floating Text Us ---------------------------------------------------- */
/* Square, --blue fill, --on-blue text. Same href, same data-cta, same
 aria-label. The inherited fabpulse ring is an endless pulse and is on the
 never-ship list, so it is switched off here. */
body.home-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);
}

body.home-cinematic .text-fab:hover {
  background: var(--blue-deep);
  color: var(--on-blue);
  transform: none;
}

body.home-cinematic .text-fab::before {
  animation: none;
  box-shadow: none;
  content: none;
}


/* ==========================================================================
 06 HERO
 Five layers, back to front: media, scrim, vignette, 3% grain, content, cue.
 ========================================================================== */

body.home-cinematic .c-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 84vh;
  min-height: 84dvh;
  background: var(--ink);
  overflow: hidden;
  /* The header is sticky and transparent, so the hero is pulled up under it by
 exactly the header's own height. --header-h is 96px, and 78px at 720px and
 below, both set by styles.css. */
  margin-top: calc(var(--header-h, 96px) * -1);
}

@media (min-width: 768px) {
  body.home-cinematic .c-hero {
    min-height: 88vh;
    min-height: 88dvh;
  }
}

@media (min-width: 1280px) {
  body.home-cinematic .c-hero {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Layer 1, media */
body.home-cinematic .c-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

body.home-cinematic .c-hero__media video,
body.home-cinematic .c-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* The poster twin is the reduced-motion and no-video state only. */
body.home-cinematic .c-hero__media img {
  display: none;
}

/* Layer 2, scrim */
body.home-cinematic .c-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 12, 14, 0.78) 0%,
      rgba(10, 12, 14, 0.42) 34%,
      rgba(10, 12, 14, 0.72) 74%,
      rgba(10, 12, 14, 0.94) 100%);
  pointer-events: none;
}

/* Layer 3, vignette */
body.home-cinematic .c-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(120% 90% at 50% 45%,
    rgba(10, 12, 14, 0) 42%,
    rgba(10, 12, 14, 0.55) 100%);
  pointer-events: none;
}

/* Layer 4, grain. 140x140 tile, fractalNoise, baseFrequency 0.85, 3 octaves,
 opacity 0.03, no blend mode. */
body.home-cinematic .c-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.03;
  pointer-events: none;
  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;
}

/* Layer 5, content */
body.home-cinematic .c-hero__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: calc(var(--header-h, 96px) + 3rem);
  padding-bottom: 4.5rem;
}

@media (min-width: 768px) {
  body.home-cinematic .c-hero__inner {
    padding-top: 128px;
    padding-bottom: 112px;
  }
}

body.home-cinematic .c-hero .c-eyebrow {
  margin-bottom: 1.25rem;
}

body.home-cinematic .c-hero .c-h1 {
  max-width: 18ch;
  margin: 0 0 1.5rem;
}

body.home-cinematic .c-hero .c-lede {
  color: var(--bone-80);
  margin: 0 0 2.25rem;
}

body.home-cinematic .c-hero__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  body.home-cinematic .c-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }
}

/* Layer 6, the scroll cue. A real button. Hidden below 640px. */
body.home-cinematic .c-cue {
  display: none;
}

@media (min-width: 640px) {
  body.home-cinematic .c-cue {
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0 2.5rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ash-75);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.55;
    transition: color var(--t-fast) var(--ease-cinema);
  }

  body.home-cinematic .c-cue:hover {
    color: var(--sky);
  }

  /* A static 1px vertical rule and the word. No arrow glyph, no bounce loop. */
  body.home-cinematic .c-cue__rule {
    display: block;
    width: 1px;
    height: 56px;
    background: var(--hairline-strong);
  }

  body.home-cinematic .c-cue__label {
    display: block;
  }
}


/* ==========================================================================
 07 BANDS, IN SECTION ORDER
 ========================================================================== */

/* --- S03 Trust strip ----------------------------------------------------- */
body.home-cinematic .c-trust {
  background: var(--ink-2);
}

body.home-cinematic .c-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline-strong);
}

/* The fifth figure spans the row on phone */
body.home-cinematic .c-trust__cell:nth-child(5) {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  body.home-cinematic .c-trust__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.home-cinematic .c-trust__cell:nth-child(5) {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  body.home-cinematic .c-trust__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body.home-cinematic .c-trust__cell {
  background: var(--ink-2);
  padding: 1.75rem 1.25rem;
}

body.home-cinematic .c-trust__fig {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 0 0.6rem;
}

body.home-cinematic .c-trust__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.62rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ash-75);
  margin: 0;
}

/* --- S04 Storm band ------------------------------------------------------ */
body.home-cinematic .c-storm {
  background-color: var(--navy);
  background-image: radial-gradient(70% 120% at 15% 50%,
    rgba(14, 85, 158, 0.22) 0%,
    rgba(14, 85, 158, 0) 70%);
}

body.home-cinematic .c-storm .c-h2,
body.home-cinematic .c-storm .c-h3 {
  color: var(--bone);
}

body.home-cinematic .c-storm .c-body,
body.home-cinematic .c-storm p {
  color: var(--ash);
  max-width: 46ch;
}

body.home-cinematic .c-storm .c-eyebrow {
  color: var(--sky);
}

body.home-cinematic .c-storm__inner > * + * {
  margin-top: 1.25rem;
}

body.home-cinematic .c-storm__inner {
  max-width: 46ch;
}

/* --- S05 Services -------------------------------------------------------- */
body.home-cinematic .c-services {
  background: var(--ink);
}

/* --- S06 Materials index ------------------------------------------------- */
body.home-cinematic .c-index {
  border-top: 1px solid var(--hairline);
  list-style: none;
}

body.home-cinematic .c-index__row {
  border-bottom: 1px solid var(--hairline);
}

body.home-cinematic .c-index__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding: 1.5rem 0;
  text-decoration: none;
  color: var(--bone);
  transition: color var(--t-fast) var(--ease-cinema);
}

@media (min-width: 768px) {
  body.home-cinematic .c-index__link {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
    gap: 2rem;
  }
}

body.home-cinematic .c-index__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  color: inherit;
}

body.home-cinematic .c-index__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ash-75);
  transition: color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .c-index__link:hover,
body.home-cinematic .c-index__link:hover .c-index__desc {
  color: var(--sky);
}

/* --- S07 Inspection band ------------------------------------------------- */
body.home-cinematic .c-inspect {
  background: var(--ink);
}

body.home-cinematic .c-proof {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

body.home-cinematic .c-proof li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ash-75);
}

/* --- S08 Reviews --------------------------------------------------------- */
body.home-cinematic .c-reviews {
  background: var(--ink-2);
}

body.home-cinematic .c-reviews__head {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ash-75);
  margin-bottom: 2rem;
}

body.home-cinematic .c-reviews__head svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* --- S09 Featured project ------------------------------------------------ */
body.home-cinematic .c-featured {
  background: var(--ink);
}

body.home-cinematic .c-films {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  body.home-cinematic .c-films--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- S10 Recent work ----------------------------------------------------- */
body.home-cinematic .c-work {
  background: var(--ink-2);
}

/* --- S11 Insurance ------------------------------------------------------- */
body.home-cinematic .c-insurance {
  background: var(--ink);
}

body.home-cinematic .c-checks {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

body.home-cinematic .c-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ash);
}

body.home-cinematic .c-checks svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  color: var(--verified);
}

/* The compliance line. It does not move and it does not get an accent. */
body.home-cinematic .c-compliance-line {
  border-top: 1px solid var(--hairline);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ash-75);
}

/* --- S12 Process --------------------------------------------------------- */
body.home-cinematic .c-process {
  background: var(--ink-2);
}

body.home-cinematic .c-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--hairline-strong);
}

@media (min-width: 640px) {
  body.home-cinematic .c-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.home-cinematic .c-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body.home-cinematic .c-step {
  background: var(--ink-2);
  padding: 2rem 1.5rem;
}

/* Decorative. 2.07:1 and declared: every step is also named in a heading at
 --bone (17.55:1), so no information lives in the numeral. Do not put a word
 in it and do not reuse --bone-25 anywhere a reader has to read something. */
body.home-cinematic .c-step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone-25);
  margin: 0 0 1rem;
}

body.home-cinematic .c-step .c-h3 {
  margin: 0 0 0.6rem;
}

body.home-cinematic .c-step p {
  font-size: 0.9rem;
  color: var(--ash-75);
}

/* --- S13 Idaho weather --------------------------------------------------- */
body.home-cinematic .c-weather {
  background: var(--ink);
}

body.home-cinematic .c-wx__icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--ash-70);
  margin-bottom: 1.25rem;
}

/* --- S14 Discount programs ----------------------------------------------- */
body.home-cinematic .c-discounts {
  background: var(--ink-3);
}

body.home-cinematic .c-discounts__body {
  max-width: 70ch;
  margin-top: 1.25rem;
  color: var(--ash);
}

/* --- S15 Areas we serve -------------------------------------------------- */
body.home-cinematic .c-areas {
  background: var(--ink);
}

/* No CSS filter on the map. A recoloured map misrepresents a map. */
body.home-cinematic .c-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline-strong);
  background: var(--ink-2);
}

@media (min-width: 1024px) {
  body.home-cinematic .c-map {
    aspect-ratio: 16 / 9;
  }
}

body.home-cinematic .c-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.home-cinematic .c-cities {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 1024px) {
  body.home-cinematic .c-cities {
    margin-top: 0;
  }
}

body.home-cinematic .c-cities li {
  border-bottom: 1px solid var(--hairline);
}

body.home-cinematic .c-cities a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--bone);
  text-decoration: none;
  min-height: 48px;
  transition: color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .c-cities a:hover {
  color: var(--sky);
}

/* --- S16 FAQ ------------------------------------------------------------- */
/* Mechanism unchanged: script.js toggles the hidden attribute on.faq__a.
 No animation on open. The panel simply appears. */
body.home-cinematic .c-faq {
  background: var(--ink-2);
}

body.home-cinematic .faq {
  border-top: 1px solid var(--hairline);
}

body.home-cinematic .faq__item {
  border-bottom: 1px solid var(--hairline);
}

body.home-cinematic .faq__q {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--bone);
  background: none;
  padding: 1.35rem 44px 1.35rem 0;
  transition: color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .faq__q:hover {
  color: var(--sky);
}

body.home-cinematic .faq__q[aria-expanded="true"] {
  color: var(--sky);
}

/* The inherited +/- glyph is replaced by a rotating chevron rule. */
body.home-cinematic .faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  background: none;
  color: inherit;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-mid) var(--ease-cinema);
}

body.home-cinematic .faq__q[aria-expanded="true"]::after {
  content: "";
  background: none;
  color: inherit;
  transform: rotate(225deg);
}

body.home-cinematic .faq__icon {
  display: none;
}

body.home-cinematic .faq__a {
  padding: 0 0 1.5rem;
  max-width: 72ch;
  animation: none;
}

body.home-cinematic .faq__a p {
  color: var(--ash);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* No JS, no toggle. The answers must still be readable. */
@media (scripting: none) {
  body.home-cinematic .faq__a[hidden] {
    display: block;
  }
}

/* --- S17 The owners ------------------------------------------------------ */
body.home-cinematic .c-owners {
  background: var(--ink);
}

body.home-cinematic .c-owner__name {
  margin: 1.25rem 0 0.35rem;
}

body.home-cinematic .c-owner__role {
  display: block;
  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: 0.75rem;
}

/* --- S18 Closing CTA ----------------------------------------------------- */
body.home-cinematic .c-cta {
  background: var(--ink-2);
  text-align: center;
}

body.home-cinematic .c-cta .c-wrap,
body.home-cinematic .c-cta .container {
  max-width: 46rem;
}

body.home-cinematic .c-cta .c-h2 {
  margin-bottom: 1.25rem;
}

body.home-cinematic .c-cta .c-body,
body.home-cinematic .c-cta p {
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
  margin-bottom: 2rem;
}


/* ==========================================================================
 08 COMPONENTS
 ========================================================================== */

/* --- The field plate ----------------------------------------------------- */
/* The signature. Drawn the way a line is drawn on a page of Tru Armor's own
 inspection report. City only, never a house number, never a street, never a
 name. Where a <figcaption> already exists, the plate replaces its styling
 and keeps its words. */
body.home-cinematic .c-figure {
  position: relative;
  margin: 0;
  background: var(--ink-2);
  overflow: hidden;
}

body.home-cinematic .c-figure img,
body.home-cinematic .c-figure video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.home-cinematic .c-plate,
body.home-cinematic .c-figure figcaption,
body.home-cinematic .c-card__media figcaption,
body.home-cinematic .c-film figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(10, 12, 14, 0.72);
  border-top: 1px solid var(--hairline-strong);
  padding: 0.55rem 0.75rem;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.62rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bone-85);
  text-wrap: balance;
}

/* --- Cards --------------------------------------------------------------- */
body.home-cinematic .c-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  transition: border-color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .c-band:not(.c-band--alt) .c-card {
  background: var(--ink-2);
}

body.home-cinematic .c-band--alt .c-card {
  background: var(--ink);
}

body.home-cinematic .c-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

body.home-cinematic .c-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform var(--t-mid) var(--ease-cinema);
}

body.home-cinematic .c-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.5rem;
}

body.home-cinematic .c-card__body .c-h3 {
  margin: 0 0 0.75rem;
}

body.home-cinematic .c-card__body p {
  color: var(--ash-75);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

body.home-cinematic .c-card__more {
  margin-top: auto;
}

/* --- Links --------------------------------------------------------------- */
body.home-cinematic .c-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--sky);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .c-link:hover {
  color: var(--sky);
  border-bottom-color: var(--sky);
}

body.home-cinematic .c-link svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* The inherited arrow link, re-skinned where the markup keeps it */
body.home-cinematic .link-arrow {
  color: var(--sky);
  border-bottom-color: transparent;
}

body.home-cinematic .link-arrow:hover {
  color: var(--sky);
  border-bottom-color: var(--sky);
}

/* --- Buttons ------------------------------------------------------------- */
body.home-cinematic .c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  text-align: center;
  text-decoration: none;
  padding: 1.15rem 2rem;
  min-height: 56px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-cinema),
              border-color var(--t-fast) var(--ease-cinema),
              color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .c-btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
}

body.home-cinematic .c-btn--primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--on-blue);
}

body.home-cinematic .c-btn--ghost {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--bone);
}

body.home-cinematic .c-btn--ghost:hover {
  background: rgba(245, 242, 237, 0.06);
  border-color: var(--sky);
  color: var(--bone);
}

body.home-cinematic .c-btn--block {
  display: flex;
  width: 100%;
}

body.home-cinematic .c-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Inherited.btn inside the page body, re-skinned to match */
body.home-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;
}

body.home-cinematic main .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  box-shadow: none;
}

body.home-cinematic main .btn--primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--on-blue);
}

/* --- Review rail --------------------------------------------------------- */
/* A CSS scroll-snap track. Nothing is animated; the browser scrolls. */
body.home-cinematic .c-rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

body.home-cinematic .c-rail::-webkit-scrollbar {
  height: 3px;
}

body.home-cinematic .c-rail::-webkit-scrollbar-track {
  background: var(--hairline-soft);
}

body.home-cinematic .c-rail::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
}

body.home-cinematic .c-review {
  flex: 0 0 min(86%, 22rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--hairline);
  padding: 1.75rem 1.5rem;
}

body.home-cinematic .c-review__stars {
  color: var(--sky);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  line-height: 1;
  margin-bottom: 1.1rem;
}

body.home-cinematic .c-review blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bone);
}

body.home-cinematic .c-review__who {
  margin-top: auto;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bone);
}

body.home-cinematic .c-review__meta {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ash-70);
  margin-top: 0.25rem;
}

/* --- Film tile ----------------------------------------------------------- */
body.home-cinematic .c-film {
  position: relative;
  background: var(--ink-2);
  overflow: hidden;
}

body.home-cinematic .c-film video,
body.home-cinematic .c-film img {
  width: 100%;
  display: block;
}

/* The modal trigger keeps its exact existing mechanism and attributes */
body.home-cinematic .c-film__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bone);
}

body.home-cinematic .c-film__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 14, 0.72);
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
  transition: background-color var(--t-fast) var(--ease-cinema),
              border-color var(--t-fast) var(--ease-cinema);
}

body.home-cinematic .c-film__open:hover .c-film__play {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
}

body.home-cinematic .c-film__play svg {
  width: 20px;
  height: 20px;
}

/* --- Video modal, re-skinned, mechanism untouched ------------------------ */
body.home-cinematic .vid-modal__backdrop {
  background: rgba(10, 12, 14, 0.92);
}

body.home-cinematic .vid-modal__box video {
  box-shadow: none;
  background: var(--ink);
}

body.home-cinematic .vid-modal__close {
  background: var(--bone);
  color: var(--ink);
  border: 0;
  box-shadow: none;
  width: 40px;
  height: 40px;
}

/* --- The form ------------------------------------------------------------ */
/* Class names are ADDED alongside the existing ones. script.js finds its work
 through.field.field__error.conditional, [data-service-select].form__status and.hp-field, so none of those are renamed. */
body.home-cinematic .c-form-panel {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  padding: 1.75rem 1.25rem;
}

@media (min-width: 768px) {
  body.home-cinematic .c-form-panel {
    padding: 2.5rem 2.25rem;
  }
}

body.home-cinematic .form {
  gap: 1.25rem;
}

body.home-cinematic .field label,
body.home-cinematic .c-field__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bone);
}

body.home-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;
}

body.home-cinematic .field .req {
  color: var(--sky);
}

body.home-cinematic .field input,
body.home-cinematic .field select,
body.home-cinematic .field textarea,
body.home-cinematic .c-input,
body.home-cinematic .c-select,
body.home-cinematic .c-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);
}

body.home-cinematic .field textarea,
body.home-cinematic .c-textarea {
  min-height: 116px;
  resize: vertical;
}

/* Placeholders are --ash-70 (6.06:1). the design 45% ash measured 3.11:1
 and is banned by measurement. */
body.home-cinematic .field input::placeholder,
body.home-cinematic .field textarea::placeholder,
body.home-cinematic .c-input::placeholder,
body.home-cinematic .c-textarea::placeholder {
  color: var(--ash-70);
  opacity: 1;
}

body.home-cinematic .field select,
body.home-cinematic .c-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;
}

body.home-cinematic .field select option,
body.home-cinematic .c-select option {
  background: var(--ink);
  color: var(--bone);
}

body.home-cinematic .field__error {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--error-text);
}

body.home-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);
}

body.home-cinematic .consent input {
  accent-color: var(--blue);
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}

body.home-cinematic .consent a {
  color: var(--sky);
}

body.home-cinematic .form__microcopy {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ash-70);
}

body.home-cinematic .form__microcopy svg {
  color: var(--ash-70);
  width: 15px;
  height: 15px;
}

body.home-cinematic .form__microcopy a {
  color: var(--sky);
  font-weight: 600;
}

body.home-cinematic .form__alt a {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--sky);
}

body.home-cinematic .form__status {
  padding: 1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--hairline-strong);
  background: var(--ink);
  color: var(--bone);
}

body.home-cinematic .form__status--ok {
  border-color: var(--verified);
  background: var(--ink);
  color: var(--bone);
}

body.home-cinematic .form__status--err {
  border-color: var(--error-text);
  background: var(--ink);
  color: var(--error-text);
}

body.home-cinematic .conditional[data-show="true"] {
  gap: 1.25rem;
}

/* --- The action row ------------------------------------------------------ */
/* The button that closes a band. One or two buttons, never more. Nothing here
 animates; the buttons carry their own press and hover states. */
body.home-cinematic .c-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 0;
}

/* --- "Free roof" never alone on a line, in the chrome --------------------- */
/* Build check 1. The two nav labels that read "Free Roof Inspection" are
 carried forward byte for byte, markup included, so the guard is applied
 here instead of by wrapping the label in a span. */
body.home-cinematic .nav__panel a[href="roof-inspection.html"],
body.home-cinematic .mobile-nav a[href="roof-inspection.html"] {
  white-space: nowrap;
}


/* --- The form field hook ------------------------------------------------- */
/* Spec S07: c-field, c-field__label, c-input, c-select and c-textarea are
 added ALONGSIDE the existing names, never in place of them, because
 script.js finds its work through.field. The layout lives on.field; this
 declares the hook so the class is not orphaned. */
body.home-cinematic .c-field {
  display: block;
}


/* ==========================================================================
 05b INHERITED CLASS NAMES, NEUTRALISED
 Class names carried forward from the old markup because script.js or the
 do-not-rename rule needs them, and which styles.css draws in the light
 theme: white grounds, rounded corners, shadows, pill borders, a hover
 transform. Every rule below only cancels; none of them invents a look, and
 the replacement look is on the c- class beside it.
 ========================================================================== */

/* Radius is 0 on every element of this page..btn carries border-radius from
 styles.css and.c-btn never overrode it. */
body.home-cinematic main .btn,
body.home-cinematic .c-btn {
  border-radius: var(--radius);
}

/* S09, the Justin film..vid-thumb is a 240px rounded card with a shadow, and.vid-thumb__play is a white circle that the legacy rule also translates and
 scales on hover..c-film__open and.c-film__play draw the replacement, and
 the play badge is positioned by margin, so the inherited transform has to
 go or the badge sits off centre. */
body.home-cinematic .vid-thumb {
  border-radius: var(--radius);
  box-shadow: none;
}

body.home-cinematic .vid-thumb__play {
  border-radius: var(--radius);
  transform: none;
}

body.home-cinematic .vid-thumb:hover .vid-thumb__play {
  transform: none;
}

/* S15, the city list..area-pills is a centred flex row of white pills with a
 full radius..c-cities draws the list; this cancels the pill. */
body.home-cinematic .area-pills {
  display: block;
  justify-content: initial;
  gap: 0;
}

body.home-cinematic .area-pills a,
body.home-cinematic .area-pills a.area-pills__all,
body.home-cinematic .area-pills a.area-pills__all:hover {
  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;
}

body.home-cinematic .area-pills a {
  color: var(--bone);
}

body.home-cinematic .area-pills a:hover,
body.home-cinematic .area-pills a.area-pills__all:hover {
  color: var(--sky);
}

/* S17, the owners..team-card is a white card with a border and a radius, and.team-card__body p sets the light theme's muted grey, which loses on a dark
 ground. The figure and its plate carry the look instead. */
body.home-cinematic .team-card {
  background: none;
  border: 0;
  border-radius: var(--radius);
  overflow: visible;
  text-align: left;
}

body.home-cinematic .team-grid {
  justify-content: stretch;
}

body.home-cinematic .team-card__body {
  padding: 1.25rem 0 0;
}

body.home-cinematic .team-card__body p {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ash);
  text-align: left;
  max-width: 46ch;
  margin: 0;
}


/* ==========================================================================
 09 STATES
 hover, focus-visible, active, disabled, invalid
 ========================================================================== */

/* Focus. Never removed, never a red ring on this page. */
body.home-cinematic :focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 0;
}

body.home-cinematic .site-footer :focus-visible,
body.home-cinematic .c-hero :focus-visible,
body.home-cinematic .c-storm :focus-visible {
  outline-color: var(--sky);
}

/* Pressed. Colour only, never a lift. */
body.home-cinematic .c-btn:active,
body.home-cinematic main .btn:active,
body.home-cinematic .text-fab:active {
  transform: none;
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--on-blue);
}

body.home-cinematic .c-btn--ghost:active {
  background: rgba(245, 242, 237, 0.10);
  border-color: var(--sky);
  color: var(--bone);
}

/* Disabled */
body.home-cinematic .c-btn:disabled,
body.home-cinematic main .btn:disabled,
body.home-cinematic button:disabled,
body.home-cinematic .field input:disabled,
body.home-cinematic .field select:disabled,
body.home-cinematic .field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.home-cinematic .field input:disabled,
body.home-cinematic .field select:disabled,
body.home-cinematic .field textarea:disabled {
  background: var(--ink-3);
  color: var(--ash-60);
}

/* Field focus. Border and background only. Nothing on the form moves. */
body.home-cinematic .field input:focus,
body.home-cinematic .field select:focus,
body.home-cinematic .field textarea:focus,
body.home-cinematic .c-input:focus,
body.home-cinematic .c-select:focus,
body.home-cinematic .c-textarea:focus {
  outline: none;
  border-color: var(--sky);
  background: var(--ink-3);
  box-shadow: none;
  transform: none;
}

body.home-cinematic .field input:focus-visible,
body.home-cinematic .field select:focus-visible,
body.home-cinematic .field textarea:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
}

/* Invalid. script.js sets aria-invalid="true". */
body.home-cinematic .field input[aria-invalid="true"],
body.home-cinematic .field select[aria-invalid="true"],
body.home-cinematic .field textarea[aria-invalid="true"] {
  border-color: var(--error-text);
  background: var(--ink);
}

/* Keyboard users get the same card signal as a mouse, with no movement. */
body.home-cinematic .c-card:focus-within {
  border-color: var(--blue);
}

body.home-cinematic .c-review:focus-within {
  border-color: var(--blue);
}

body.home-cinematic .c-rail:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 4px;
}


/* ==========================================================================
 10 MOTION
 Every hover transform is inside @media (hover: hover) and (pointer: fine).
 Nothing on this page transitions or keyframes width, height, margin,
 padding, top or left.
 ========================================================================== */

/* --- Item 3: the one authored reveal ------------------------------------- */
/* Used on exactly one element: the five trust-strip figures, staggered 90ms.
 Everything else on the page is visible on load. Over 300ms with a written
 reason: this is the page's single explanatory moment, it runs once per
 visit, on five elements, and never again. */
body.home-cinematic .c-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-reveal) var(--ease-cinema),
              transform var(--t-reveal) var(--ease-cinema);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

body.home-cinematic .c-reveal.is-visible,
body.home-cinematic .c-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

body.home-cinematic .c-reveal-group > .c-reveal:nth-child(1) { --reveal-delay: 0ms; }
body.home-cinematic .c-reveal-group > .c-reveal:nth-child(2) { --reveal-delay: 90ms; }
body.home-cinematic .c-reveal-group > .c-reveal:nth-child(3) { --reveal-delay: 180ms; }
body.home-cinematic .c-reveal-group > .c-reveal:nth-child(4) { --reveal-delay: 270ms; }
body.home-cinematic .c-reveal-group > .c-reveal:nth-child(5) { --reveal-delay: 360ms; }

/* --- Item 4: the reveal safety nets, required, not optional -------------- */
/* Content is never stranded invisible. Three independent nets: no JS at all,
 the.no-js class on <html>, and a 3s setTimeout that adds.c-reveal-failsafe to <body>. */
@media (scripting: none) {
  body.home-cinematic .c-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

html.no-js body.home-cinematic .c-reveal,
body.home-cinematic.c-reveal-failsafe .c-reveal {
  opacity: 1;
  transform: none;
}

/* --- Item 2: the scroll cue, three passes then still --------------------- */
@keyframes cCuePulse {
  0% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(6px); }
  100% { opacity: 0.55; transform: translateY(0); }
}

@media (min-width: 640px) {
  body.home-cinematic .c-cue {
    animation: cCuePulse 2.4s var(--ease-inout) 3 both;
  }
}

/* --- Items 5 to 8: hover, gated ------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  /* 5. Button lift, 160ms. Touch never gets this. */
  body.home-cinematic .c-btn,
  body.home-cinematic main .btn,
  body.home-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);
  }

  body.home-cinematic .c-btn:hover,
  body.home-cinematic main .btn:hover,
  body.home-cinematic .text-fab:hover {
    transform: translateY(-2px);
  }

  body.home-cinematic .c-btn:active,
  body.home-cinematic main .btn:active,
  body.home-cinematic .text-fab:active {
    transform: translateY(0);
  }

  /* 7. Card lift and border, 200ms */
  body.home-cinematic .c-card {
    transition: transform var(--t-fast) var(--ease-cinema),
                border-color var(--t-fast) var(--ease-cinema);
  }

  body.home-cinematic .c-card:hover {
    transform: translateY(-4px);
    border-color: var(--blue);
  }

  /* 8. Card image push-in, 300ms */
  body.home-cinematic .c-card:hover .c-card__media img {
    transform: scale(1.04);
  }

  /* The review card gets the border signal, no lift: it is inside a
 horizontal scroller and a lift fights the scroll. */
  body.home-cinematic .c-review:hover {
    border-color: var(--blue);
  }
}


/* ==========================================================================
 11 REDUCED MOTION
 Movement and scale off. Opacity and colour kept.
 ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* The hero plays nothing. The poster twin is shown in the video's place.
 The inline loader also checks this before setting src. */
  body.home-cinematic .c-hero__media video {
    display: none;
  }

  body.home-cinematic .c-hero__media img {
    display: block;
  }

  /* The reveal arrives with no movement. */
  body.home-cinematic .c-reveal {
    transform: none;
    transition: opacity var(--t-fast) linear;
    transition-delay: 0ms;
  }

  body.home-cinematic .c-reveal.is-visible,
  body.home-cinematic .c-reveal.is-in {
    transform: none;
  }

  /* The cue says the same thing without moving. */
  body.home-cinematic .c-cue {
    animation: none;
    opacity: 0.8;
  }

  /* The rail scrolls, it does not glide. */
  body.home-cinematic .c-rail {
    scroll-behavior: auto;
  }

  html:has(body.home-cinematic) {
    scroll-behavior: auto;
  }

  /* No lift, no push-in, anywhere. */
  body.home-cinematic .c-btn:hover,
  body.home-cinematic main .btn:hover,
  body.home-cinematic .text-fab:hover,
  body.home-cinematic .c-card:hover {
    transform: none;
  }

  body.home-cinematic .c-card:hover .c-card__media img {
    transform: none;
  }

  /* The chevron changes state without rotating through it. */
  body.home-cinematic .faq__q::after {
    transition: none;
  }

  /* The blanket, last, so anything added later is covered too. */
  body.home-cinematic *,
  body.home-cinematic *::before,
  body.home-cinematic *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
 12 PRINT
 Ink on screen, ink on paper. The chrome and the media come off; the proof
 stays on.
 ========================================================================== */

@media print {
  body.home-cinematic {
    background: #FFFFFF;
    color: #000000;
  }

  body.home-cinematic .c-band,
  body.home-cinematic .c-band--alt,
  body.home-cinematic .c-band--deep,
  body.home-cinematic .c-storm,
  body.home-cinematic .c-trust,
  body.home-cinematic .c-trust__cell,
  body.home-cinematic .c-step,
  body.home-cinematic .c-card,
  body.home-cinematic .c-review,
  body.home-cinematic .site-footer,
  body.home-cinematic .utility-bar {
    background: #FFFFFF;
    color: #000000;
  }

  body.home-cinematic .c-h1,
  body.home-cinematic .c-h2,
  body.home-cinematic .c-h3,
  body.home-cinematic .c-trust__fig,
  body.home-cinematic h1,
  body.home-cinematic h2,
  body.home-cinematic h3 {
    color: #000000;
  }

  body.home-cinematic .c-body,
  body.home-cinematic .c-lede,
  body.home-cinematic .c-small,
  body.home-cinematic .c-micro,
  body.home-cinematic p,
  body.home-cinematic li {
    color: #1A1A1A;
  }

  body.home-cinematic .c-eyebrow,
  body.home-cinematic .c-trust__label,
  body.home-cinematic .c-step__num {
    color: #4A4A4A;
  }

  body.home-cinematic .c-hero__media,
  body.home-cinematic .c-hero__scrim,
  body.home-cinematic .c-hero__vignette,
  body.home-cinematic .c-hero__grain,
  body.home-cinematic .c-cue,
  body.home-cinematic .text-fab,
  body.home-cinematic .nav-toggle,
  body.home-cinematic .mobile-nav,
  body.home-cinematic .utility-bar__social,
  body.home-cinematic .c-map,
  body.home-cinematic .vid-modal,
  body.home-cinematic .c-film__play {
    display: none;
  }

  body.home-cinematic .c-hero {
    min-height: 0;
    margin-top: 0;
  }

  body.home-cinematic .c-hero__inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  body.home-cinematic .site-header {
    position: static;
    background: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
  }

  /* Answers people need are readable on paper. */
  body.home-cinematic .faq__a[hidden] {
    display: block;
  }

  body.home-cinematic .c-rail {
    display: block;
    overflow: visible;
  }

  body.home-cinematic .c-review {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #CCCCCC;
    margin-bottom: 1rem;
  }

  body.home-cinematic .c-card,
  body.home-cinematic .c-step,
  body.home-cinematic .c-figure {
    page-break-inside: avoid;
    break-inside: avoid;
    border-color: #CCCCCC;
  }

  body.home-cinematic .c-plate,
  body.home-cinematic .c-figure > figcaption {
    position: static;
    background: #FFFFFF;
    color: #000000;
    border-top: 1px solid #CCCCCC;
  }

  body.home-cinematic .c-reveal {
    opacity: 1;
    transform: none;
  }
}


/* === 10 COPY RESTORATION === */
/* the previous layout's words back in the design format. Small additions only. */

/* Hero: the still paints first and is the LCP element; the film fades in once it plays. */
body.home-cinematic .c-hero__media picture,
body.home-cinematic .c-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}
body.home-cinematic .c-hero__media picture {
  position: absolute;
  inset: 0;
}
body.home-cinematic .c-hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-inout);
}
body.home-cinematic .c-hero__media video.is-live {
  opacity: 1;
}
body.home-cinematic .c-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body.home-cinematic .c-hero .c-lede {
  max-width: 52ch;
}
body.home-cinematic .c-hero__actions .c-btn svg {
  flex: 0 0 auto;
}

/* Hero proof row: the old badges and proof line, as the design tracked divider. */
body.home-cinematic .c-hero__proof {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.66rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash-75);
}
body.home-cinematic .c-hero__proof li + li::before {
  content: "\00B7";
  margin-right: 0.9rem;
  color: var(--ash-60);
}
body.home-cinematic .c-hero__proof a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-cinema);
}
body.home-cinematic .c-hero__proof a:hover,
body.home-cinematic .c-hero__proof a:focus-visible {
  color: var(--sky);
}

/* Scroll cue: a chevron instead of a word. */
body.home-cinematic .c-cue__chev {
  display: block;
  line-height: 0;
}

/* Inspection band: the proof card beside the form. */
body.home-cinematic .c-proof-card > * + * {
  margin-top: 1.25rem;
}
body.home-cinematic .c-proof-card__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
  color: var(--bone);
  margin: 1.5rem 0 0;
}
body.home-cinematic .c-btn--block {
  display: flex;
  width: 100%;
}
body.home-cinematic .c-proof-card__urgent {
  color: var(--ash-75);
}
body.home-cinematic .c-proof-card__urgent a {
  color: var(--sky);
  font-weight: 600;
  text-decoration: none;
}

/* Reviews: the Google label is the band's head. */
body.home-cinematic .c-reviews__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
}
body.home-cinematic .c-reviews__label svg {
  width: 20px;
  height: 20px;
}

/* Discount band: the figure, then the four programmes. */
body.home-cinematic .c-discounts .c-stat {
  margin: 0.5rem 0 0.9rem;
}
body.home-cinematic .c-discounts__who {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 1.75rem;
}

/* Roof types: rows with no description, the arrow at the right. */
body.home-cinematic .c-index--plain .c-index__link {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

/* Process: label-only steps. */
body.home-cinematic .c-step .c-h3 {
  margin: 0;
}

/* Owners: name, role, bio. */
body.home-cinematic .team-card__role {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0.35rem 0 0.9rem;
}

/* Phones: keep the first screen tight so the number is visible without scrolling. */
@media (max-width: 639px) {
  body.home-cinematic .c-hero__inner {
    padding-top: calc(var(--header-h, 96px) + 1.5rem);
    padding-bottom: 3rem;
  }
  body.home-cinematic .c-hero .c-h1 {
    font-size: clamp(2.35rem, 10.5vw, 2.9rem);
    margin-bottom: 1rem;
  }
  body.home-cinematic .c-hero .c-lede {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  body.home-cinematic .c-hero__actions {
    gap: 0.6rem;
  }
  body.home-cinematic .c-hero__proof {
    margin-top: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-cinematic .c-hero__media video {
    transition: none;
  }
}


/* === 11 TAP TARGETS ON TOUCH SCREENS === */
/* Every control a thumb can hit is at least 44px tall on a touch screen. Padding only,
 pulled back with negative margin where the layout must not move. Scoped to this page. */
@media (pointer: coarse) {
  body.home-cinematic .utility-bar a,
  body.home-cinematic .site-footer a:not(.btn),
  body.home-cinematic .footer__areas a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  body.home-cinematic .utility-bar .social a,
  body.home-cinematic .site-footer .social a {
    min-width: 44px;
    justify-content: center;
  }
  body.home-cinematic .c-hero__proof a,
  body.home-cinematic .c-card__more,
  body.home-cinematic .c-actions .c-link,
  body.home-cinematic .c-actions .link-arrow,
  body.home-cinematic .area-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  body.home-cinematic .c-hero__proof a {
    margin: -0.7rem 0;
  }
  body.home-cinematic .c-index__link {
    min-height: 56px;
  }
  body.home-cinematic .faq__q {
    min-height: 56px;
  }
  body.home-cinematic input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  body.home-cinematic .consent label,
  body.home-cinematic label.consent {
    padding: 0.5rem 0;
  }
}


/* === 12 LIST RESETS AND CARD MEDIA === */
/* The base sheet gives every ul/ol a marker and an indent; these lists are grids and rails. */
body.home-cinematic .c-trust__grid,
body.home-cinematic .c-steps,
body.home-cinematic .c-index,
body.home-cinematic .c-checks,
body.home-cinematic .c-cities,
body.home-cinematic .c-hero__proof {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.home-cinematic .c-trust__cell,
body.home-cinematic .c-step,
body.home-cinematic .c-index__row,
body.home-cinematic .c-cities li {
  margin: 0;
  min-width: 0;
}
body.home-cinematic .c-checks {
  margin: 0 0 1.5rem;
}
/* One shape for every service-card photo, whatever the master's ratio, so a portrait
 frame never becomes a 700px tall card on a phone. */
body.home-cinematic .c-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
@media (max-width: 639px) {
  body.home-cinematic .c-trust__cell:nth-child(5) {
    grid-column: 1 / -1;
  }
  body.home-cinematic .c-trust__fig {
    font-size: 1.55rem;
  }
}


/* === 13 STRIP BANDS, SMALLER === */
/* The storm band, the discount band and the closing call are strips, not chapters:
 less height, a smaller heading, and on wider screens the storm line sits beside its button. */
body.home-cinematic .c-storm,
body.home-cinematic .c-discounts,
body.home-cinematic .c-cta {
  padding: 2.5rem 0;
}
@media (min-width: 768px) {
  body.home-cinematic .c-storm,
  body.home-cinematic .c-discounts,
  body.home-cinematic .c-cta {
    padding: 3rem 0;
  }
}
body.home-cinematic .c-storm .c-h2,
body.home-cinematic .c-discounts .c-h2,
body.home-cinematic .c-cta .c-h2 {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
body.home-cinematic .c-storm__inner > * + * {
  margin-top: 1rem;
}
body.home-cinematic .c-storm .c-actions,
body.home-cinematic .c-discounts .c-actions,
body.home-cinematic .c-cta .c-actions {
  margin: 0;
}
body.home-cinematic .c-discounts__body {
  margin: 0 0 1.25rem;
}
body.home-cinematic .c-cta .c-lede {
  margin: 0 0 1.25rem;
}
@media (min-width: 768px) {
  body.home-cinematic .c-storm__inner {
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  body.home-cinematic .c-storm .c-h2 {
    margin: 0;
  }
  body.home-cinematic .c-storm__inner > * + * {
    margin-top: 0;
  }
}


/* === 14 PHONES - removed. The phone system is region 16. === */


/* === 15 ROUNDED AND PREMIUM === */
/* "Not so pointy, million-dollar-brand": one rounded system at every width. Pill buttons in
 sentence case, 16px cards and tiles, 10px images and films, 12px fields, the three strips as
 inset rounded panels, captions as small floating pills, glassy secondary buttons. Colour,
 type and words are unchanged. */
body.home-cinematic {
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-line: rgba(255, 255, 255, 0.14);
}

/* buttons */
body.home-cinematic .c-btn,
body.home-cinematic main .btn,
body.home-cinematic .site-header .btn,
body.home-cinematic .mobile-nav .btn,
body.home-cinematic .btn-sms-mini,
body.home-cinematic .text-fab {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
}
body.home-cinematic .c-btn--ghost {
  background: var(--glass);
  border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.home-cinematic .c-btn--ghost:hover,
body.home-cinematic .c-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
body.home-cinematic .c-btn--primary {
  box-shadow: 0 8px 24px rgba(14, 85, 158, 0.28);
}
body.home-cinematic .nav-toggle,
body.home-cinematic .mobile-nav__close,
body.home-cinematic .btn--call {
  border-radius: 999px;
}

/* cards, tiles, panels */
body.home-cinematic .c-card,
body.home-cinematic .c-review,
body.home-cinematic .c-step,
body.home-cinematic .team-card,
body.home-cinematic .c-form-panel,
body.home-cinematic .c-trust__cell,
body.home-cinematic .c-proof-card,
body.home-cinematic .faq,
body.home-cinematic .c-index {
  border-radius: var(--radius);
  overflow: hidden;
}
body.home-cinematic .c-trust__grid,
body.home-cinematic .c-steps {
  gap: 10px;
  background: none;
}
body.home-cinematic .c-trust__cell,
body.home-cinematic .c-step,
body.home-cinematic .c-proof-card {
  border: 1px solid var(--hairline);
}
body.home-cinematic .c-proof-card {
  background: var(--ink-2);
  padding: 1.5rem;
}
body.home-cinematic .faq,
body.home-cinematic .c-index {
  border: 1px solid var(--hairline);
  padding: 0 1.25rem;
  background: var(--ink);
}
body.home-cinematic .faq__item:last-child,
body.home-cinematic .c-index__row:last-child {
  border-bottom: 0;
}
body.home-cinematic .nav__panel {
  border-radius: 14px;
}
body.home-cinematic .mobile-nav__panel {
  border-radius: 20px 0 0 20px;
}

/* images, films, the map */
body.home-cinematic .c-figure,
body.home-cinematic .c-film,
body.home-cinematic .c-map,
body.home-cinematic .vid-thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
body.home-cinematic .c-map iframe {
  border-radius: var(--radius-sm);
}
body.home-cinematic .c-card > .c-card__media,
body.home-cinematic .team-card > .c-figure {
  border-radius: 0;
}
body.home-cinematic .c-checks svg rect {
  rx: 5px;
}

/* captions as small floating pills */
body.home-cinematic .c-plate {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: auto;
  width: auto;
  max-width: calc(100% - 20px);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  background: rgba(10, 12, 14, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* fields */
body.home-cinematic .c-input,
body.home-cinematic .c-select,
body.home-cinematic .c-textarea {
  border-radius: 12px;
}
body.home-cinematic .c-form-panel input[type="checkbox"] {
  border-radius: 6px;
}

/* the three strips as inset rounded panels */
body.home-cinematic .c-storm,
body.home-cinematic .c-discounts,
body.home-cinematic .c-cta {
  background: var(--ink);
  padding: 1.25rem 0;
}
body.home-cinematic .c-storm > .container,
body.home-cinematic .c-discounts > .container,
body.home-cinematic .c-cta > .container {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--wrap);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}
body.home-cinematic .c-storm > .container {
  background-color: var(--navy);
  background-image: radial-gradient(70% 120% at 15% 50%, rgba(14, 85, 158, 0.28) 0%, rgba(14, 85, 158, 0) 70%);
}
body.home-cinematic .c-discounts > .container {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
}
body.home-cinematic .c-cta > .container {
  background: linear-gradient(135deg, #1868B0 0%, #0B4380 100%);
}
body.home-cinematic .c-cta .c-lede {
  color: rgba(247, 244, 240, 0.85);
}
body.home-cinematic .c-cta .c-btn--primary {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body.home-cinematic .c-cta .c-btn--primary:hover,
body.home-cinematic .c-cta .c-btn--primary:focus-visible {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ink);
}
body.home-cinematic .c-cta .c-btn--primary:active {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

/* quieter chrome */
body.home-cinematic .c-rail {
  scrollbar-width: none;
}
body.home-cinematic .c-rail::-webkit-scrollbar {
  display: none;
}
body.home-cinematic .c-eyebrow {
  letter-spacing: 0.16em;
}

@media (max-width: 767px) {
  /* button sizes on phones: region 16 */
  body.home-cinematic .c-services .c-card__media img,
  body.home-cinematic .team-card img {
    border-radius: 10px;
  }
  body.home-cinematic .c-storm > .container,
  body.home-cinematic .c-discounts > .container,
  body.home-cinematic .c-cta > .container {
    padding: 1.5rem 1.25rem;
    border-radius: 18px;
  }
  body.home-cinematic .faq,
  body.home-cinematic .c-index {
    padding: 0 1rem;
  }
}


/* === 15b the round call button keeps its icon === */
@media (max-width: 560px) {
  body.home-cinematic .site-header .btn--call { padding: 0; width: 46px; height: 46px; min-width: 46px; }
  body.home-cinematic .site-header .btn--call svg { width: 21px; height: 21px; }
}
body.home-cinematic .c-form-panel .c-input,
body.home-cinematic .c-form-panel .c-select,
body.home-cinematic .c-form-panel .c-textarea { border-radius: 12px; }


/* === 16 PHONES, REBUILT === */
/* This region replaces the
 "smaller and more minimal" pass (regions 14 and 14b), which took 68 text runs
 under 12px and squeezed the hero to its content. Rules for every screen under 768px, in
 page order, every value in one place. Nothing here hides a word; the utility bar is the one
 element off screen on phones, as the design and the previous layout's phone view both had it.

 The phone type scale (Plex unless named):
 H1 Playfair 39px at 375 (clamp) H2 Playfair 28 to 34px H3 Playfair 19px
 body and lede 16px, hero lede 17px small 14px labels, captions, eyebrows 12px
 buttons 16px on a 52px pill fields 16px on a 52px field footer 15px, legal 13px
 Floors: no text under 12px anywhere; no thumb target under 44px; fields never under 16px
 (iOS zooms otherwise). Desktop (768px and up) is untouched by this region. */
@media (max-width: 767px) {
  /* chrome */
  body.home-cinematic { --header-h: 64px; }
  body.home-cinematic .utility-bar { display: none; }
  body.home-cinematic .site-header .container { min-height: 64px; }

  /* rhythm */
  body.home-cinematic .c-band { padding: 3rem 0; }
  body.home-cinematic .c-head { margin-bottom: 1.5rem; }
  body.home-cinematic .c-actions { margin-top: 1.25rem; }

  /* type */
  body.home-cinematic .c-h2 { font-size: clamp(1.75rem, 7.4vw, 2.125rem); line-height: 1.12; margin-bottom: 0.75rem; }
  body.home-cinematic .c-h3 { font-size: 1.2rem; line-height: 1.25; }
  body.home-cinematic .c-body,
  body.home-cinematic .c-lede { font-size: 1rem; line-height: 1.55; }
  body.home-cinematic .c-small { font-size: 0.875rem; }
  body.home-cinematic .c-eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; margin-bottom: 0.75rem; }
  body.home-cinematic .c-plate { font-size: 0.75rem; letter-spacing: 0.08em; padding: 0.4rem 0.75rem; }

  /* buttons: one pill, 52px, 16px */
  body.home-cinematic .c-btn,
  body.home-cinematic main .btn { font-size: 1rem; padding: 0.85rem 1.4rem; min-height: 52px; letter-spacing: 0; }
  body.home-cinematic .c-btn svg { width: 18px; height: 18px; }

  /* hero: the film is the first screen; the words sit at its foot */
  body.home-cinematic .c-hero { min-height: 100vh; min-height: 100svh; }
  body.home-cinematic .c-hero__inner { padding-top: calc(var(--header-h, 64px) + 1.5rem); padding-bottom: 2rem; }
  body.home-cinematic .c-hero .c-h1 { font-size: clamp(2.25rem, 10.5vw, 2.9rem); line-height: 1.04; margin-bottom: 0.9rem; }
  body.home-cinematic .c-hero .c-lede { font-size: 1.0625rem; line-height: 1.5; margin-bottom: 1.35rem; max-width: 21rem; }
  body.home-cinematic .c-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  body.home-cinematic .c-hero__actions > a { width: 100%; justify-content: center; }
  body.home-cinematic .c-hero__proof { margin-top: 1.35rem; padding-top: 1rem; font-size: 0.75rem; letter-spacing: 0.12em; gap: 0.45rem 0.8rem; }
  body.home-cinematic .c-hero__proof li + li::before { margin-right: 0.8rem; }

  /* trust strip: two tiles across, the fifth full width (base), readable labels */
  body.home-cinematic .c-trust__cell { padding: 1.1rem 1rem; }
  body.home-cinematic .c-trust__fig { font-size: 1.5rem; }
  body.home-cinematic .c-trust__label { font-size: 0.75rem; letter-spacing: 0.1em; }

  /* the form band: 52px fields, 16px text, the photo beside it stays off on phones */
  body.home-cinematic .c-form-panel .form { gap: 0.9rem; }
  body.home-cinematic .c-form-panel .field label { font-size: 0.9375rem; }
  body.home-cinematic .c-form-panel .field input,
  body.home-cinematic .c-form-panel .field select,
  body.home-cinematic .c-form-panel .field textarea { min-height: 52px; padding: 0.75rem 0.9rem; font-size: 16px; }
  body.home-cinematic .c-form-panel .field textarea { min-height: 104px; }
  body.home-cinematic .c-form-panel .consent { font-size: 0.8125rem; line-height: 1.5; }
  body.home-cinematic .c-form-panel .form__microcopy { font-size: 0.875rem; }
  body.home-cinematic .c-proof-card .c-figure { display: none; }
  body.home-cinematic .c-proof-card__tag { font-size: 1.375rem; }
  body.home-cinematic .c-proof-card > * + * { margin-top: 0.9rem; }

  /* reviews: one card in view, the next peeking */
  body.home-cinematic .c-review { flex: 0 0 84%; padding: 1.25rem; }
  body.home-cinematic .c-review blockquote { font-size: 1rem; line-height: 1.5; }
  body.home-cinematic .c-review__meta { font-size: 0.8125rem; }
  body.home-cinematic .c-reviews__label,
  body.home-cinematic .rev-car__google { font-size: 0.8125rem; }

  /* the three strips as panels: a heading you can read, one button */
  body.home-cinematic .c-storm > .container,
  body.home-cinematic .c-discounts > .container,
  body.home-cinematic .c-cta > .container { padding: 1.75rem 1.5rem; }
  body.home-cinematic .c-storm .c-h2,
  body.home-cinematic .c-discounts .c-h2,
  body.home-cinematic .c-cta .c-h2 { font-size: 1.625rem; }
  body.home-cinematic .c-discounts__body,
  body.home-cinematic .c-cta .c-lede { font-size: 1rem; }

  /* services: a real thumbnail beside the words, 15px body, a 44px Learn more */
  body.home-cinematic .c-services .c-grid { gap: 0.75rem; }
  body.home-cinematic .c-services .c-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.85rem; }
  body.home-cinematic .c-services .c-card__media { margin: 0; }
  body.home-cinematic .c-services .c-card__media img { aspect-ratio: 1 / 1; width: 104px; height: 104px; }
  body.home-cinematic .c-services .c-card__body { padding: 0; }
  body.home-cinematic .c-services .c-h3 { font-size: 1.125rem; margin-bottom: 0.3rem; }
  body.home-cinematic .c-services .c-body { font-size: 0.9375rem; line-height: 1.45; margin-bottom: 0.4rem; }
  body.home-cinematic .c-services .c-card__more { font-size: 0.875rem; min-height: 44px; }

  /* roof types: 52px rows */
  body.home-cinematic .c-index__link { padding: 0.95rem 0; min-height: 52px; }
  body.home-cinematic .c-index__name { font-size: 1.0625rem; }

  /* featured project: the portrait clip centred; the two films stacked, the landscape drone
 clip full width at its own 16:10, the portrait oiling clip 62% wide and centred */
  body.home-cinematic .c-featured .vid-thumb { width: 180px; }
  body.home-cinematic .c-films--two { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  body.home-cinematic .c-film video { width: 100%; height: auto; background: #000; }
  body.home-cinematic .c-films--two .c-film:last-child video { width: 62%; aspect-ratio: 9 / 16; margin: 0 auto; }

  /* recent work: two across, 4:3 */
  body.home-cinematic .c-work .c-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  body.home-cinematic .c-work .c-figure img { aspect-ratio: 4 / 3; object-fit: cover; }

  /* insurance */
  body.home-cinematic .c-insurance .c-figure img { aspect-ratio: 16 / 9; object-fit: cover; }
  body.home-cinematic .c-checks li { font-size: 1rem; }
  body.home-cinematic .c-compliance-line { font-size: 1.0625rem; }

  /* process: four rows, the digit beside the step */
  body.home-cinematic .c-steps { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  body.home-cinematic .c-step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; column-gap: 0.75rem; padding: 0.9rem 1rem; }
  body.home-cinematic .c-step__num { font-size: 1.75rem; margin: 0; }
  body.home-cinematic .c-step .c-h3 { font-size: 1.0625rem; margin: 0; }

  /* Idaho weather: icon beside the title, 15px body */
  body.home-cinematic .c-weather .c-grid { gap: 0.6rem; }
  body.home-cinematic .c-weather .c-card__body { padding: 1rem 1.1rem; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 0.8rem; }
  body.home-cinematic .c-wx__icon { width: 28px; height: 28px; margin: 0; grid-row: 1 / 3; }
  body.home-cinematic .c-weather .c-h3 { font-size: 1.0625rem; margin-bottom: 0.25rem; }
  body.home-cinematic .c-weather .c-body { font-size: 0.9375rem; line-height: 1.45; }

  /* areas: a shorter map, the six cities as two columns of 48px pills */
  body.home-cinematic .c-map iframe { height: 240px; }
  body.home-cinematic .c-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.25rem; border-top: 0; }
  body.home-cinematic .c-cities li { border-bottom: 0; }
  body.home-cinematic .c-cities a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.6rem 0.9rem; font-size: 0.9375rem; background: var(--ink-2); border: 1px solid var(--hairline); border-radius: 999px; }
  body.home-cinematic .c-cities li:last-child { grid-column: 1 / -1; }

  /* faq: 52px rows, 16px questions */
  body.home-cinematic .faq__q { font-size: 1rem; padding: 1rem 2.4rem 1rem 0; min-height: 52px; }
  body.home-cinematic .faq__a { padding-bottom: 1rem; font-size: 0.9375rem; }

  /* owners: the portrait beside the words */
  body.home-cinematic .c-owners .team-grid { gap: 0.75rem; }
  body.home-cinematic .team-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.85rem; text-align: left; }
  body.home-cinematic .team-card .c-figure { margin: 0; }
  body.home-cinematic .team-card img { aspect-ratio: 1 / 1; width: 112px; height: 112px; object-fit: cover; border-radius: 10px; }
  body.home-cinematic .team-card__body { padding: 0; }
  body.home-cinematic .team-card__body .c-h3 { font-size: 1.125rem; }
  body.home-cinematic .team-card__role { font-size: 0.75rem; margin: 0.2rem 0 0.5rem; }
  body.home-cinematic .team-card__body p { font-size: 0.9375rem; line-height: 1.5; max-width: none; margin: 0; }

  /* footer: two columns, 15px links on 44px rows, 13px legal */
  body.home-cinematic .site-footer { padding-top: 2.5rem; font-size: 0.9375rem; }
  body.home-cinematic .footer__grid,
  body.home-cinematic .footer__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; padding-bottom: 1.5rem; }
  body.home-cinematic .site-footer .footer__grid--4 h3 { font-size: 1rem; margin-bottom: 0.6rem; }
  body.home-cinematic .footer__links a { font-size: 0.9375rem; padding: 4px 0; min-height: 44px; }
  body.home-cinematic .footer__areas { padding: 1rem 0; gap: 6px 12px; }
  body.home-cinematic .footer__areas a { font-size: 0.875rem; }
  body.home-cinematic .footer__legal { padding: 1rem 0 1.75rem; font-size: 0.8125rem; }
}

/* 16b: the round call button in the header keeps its icon on the narrowest phones (from 15b) */

/* 16c: the two labels the measurement still found under 12px, and the consent box at 24px */
@media (max-width: 767px) {
  body.home-cinematic .c-film .c-plate,
  body.home-cinematic .c-films .c-plate { font-size: 0.75rem; }
  body.home-cinematic .footer__areas-label { font-size: 0.8125rem; }
  body.home-cinematic .c-figure > figcaption,
  body.home-cinematic .c-figure > figcaption.c-plate { font-size: 0.75rem; }
  body.home-cinematic .c-form-panel input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; }
}


/* === 17 FONT FALLBACKS, WIDTH-MATCHED === */
/* The web fonts arrive after the first paint. Before this region the fallback faces were the
 plain system fonts: Georgia runs 13% wider than Playfair Display and pushed the phone H1 to a
 fourth line, and the sans fallback wrapped the lede differently, so the bottom-anchored hero
 block jumped when the fonts landed (Lighthouse CLS 0.08, all of it the hero). size-adjust
 scales each system face to the web face's width, measured in the browser with canvas
 measureText on the hero's own strings (Playfair / Georgia 0.884, Plex / Segoe UI 0.987,
 Plex / Arial 0.992). Line heights on this page are unitless, so vertical metrics need no
 override. The faces are named in the two font tokens in region 01. */
@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%;
}


/* === 18 TIGHTER === */
/* Band height 7rem -> 4.25rem on desktop, 3rem -> 2.5rem on phones; heads, grids, splits,
 panels, rows and the footer pulled in. The scroll cue goes: the five figures now sit where
 it pointed. Every value here is a spacing value; colours and type are untouched. */
body.home-cinematic {
  --band-y: 2.5rem;
  --band-y-md: 4.25rem;
}
@media (min-width: 768px) {
  body.home-cinematic { --band-y: var(--band-y-md); }
}
body.home-cinematic .c-head { margin-bottom: 1.5rem; }
body.home-cinematic .c-head > * + * { margin-top: 0.75rem; }
body.home-cinematic .c-h2 { margin-bottom: 0.75rem; }
body.home-cinematic .c-actions { margin-top: 1.25rem; }
body.home-cinematic .c-cue { display: none; }
/* The 50px utility bar sits above the hero on desktop, so a 100vh hero ends 50px below the fold
 and the five figures with it. The hero is the viewport less the bar. */
@media (min-width: 1280px) {
  body.home-cinematic .c-hero { min-height: calc(100vh - 50px); min-height: calc(100dvh - 50px); }
}
@media (min-width: 768px) {
  body.home-cinematic .c-hero__inner { padding-top: calc(var(--header-h, 96px) + 2rem); padding-bottom: 1.5rem; }
  body.home-cinematic .c-hero__proof { margin-top: 1.5rem; padding-top: 1rem; }
  body.home-cinematic .c-hero .c-eyebrow { margin-bottom: 1rem; }
  body.home-cinematic .c-hero .c-h1 { margin-bottom: 1rem; }
  body.home-cinematic .c-hero .c-lede { margin-bottom: 1.5rem; }
  body.home-cinematic .c-split { gap: 2.5rem; }
  body.home-cinematic .c-grid { gap: 1rem; }
  body.home-cinematic .c-card__body { padding: 1.25rem; }
  body.home-cinematic .c-review { padding: 1.5rem 1.25rem; }
  body.home-cinematic .c-step { padding: 1.25rem; }
  body.home-cinematic .c-form-panel { padding: 1.75rem 1.5rem; }
  body.home-cinematic .c-proof-card { padding: 1.25rem; }
  body.home-cinematic .c-storm > .container,
  body.home-cinematic .c-discounts > .container,
  body.home-cinematic .c-cta > .container { padding: 1.75rem 2rem; }
  body.home-cinematic .c-index__link { padding: 1.1rem 0; }
  body.home-cinematic .faq__q { padding: 1.1rem 2.4rem 1.1rem 0; }
  body.home-cinematic .faq__a { padding-bottom: 1.1rem; }
  body.home-cinematic .c-checks { margin-bottom: 1.25rem; }
  body.home-cinematic .team-card__body { padding: 1.1rem 1.25rem 1.35rem; }
  body.home-cinematic .site-footer { padding-top: 3rem; }
  body.home-cinematic .footer__grid,
  body.home-cinematic .footer__grid--4 { padding-bottom: 2rem; }
}
@media (max-width: 767px) {
  body.home-cinematic .c-band { padding: 2.5rem 0; }
  body.home-cinematic .c-head { margin-bottom: 1.15rem; }
  body.home-cinematic .c-hero__inner { padding-bottom: 1.25rem; }
  body.home-cinematic .c-hero__proof { margin-top: 1.1rem; padding-top: 0.85rem; }
  body.home-cinematic .site-footer { padding-top: 2rem; }
}


/* === 19 BOXES WITH CHARACTER === */
/* One box language for every card, tile, panel and list: a faint light from the top edge
 (bone at 5% fading out by 42%), a 1px bone-10 line, a 1px inner highlight and a soft drop.
 Photos and films sit in 14px frames with a scrim at the foot so the caption pills read.
 Icons and digits sit in blue-tinted chips. Hover lifts 3px under a real pointer only.
 Alpha steps used, all from the four tokens: bone 5 / 7 / 10 / 14 %, blue 18 / 22 %,
 sky 16 / 22 / 28 / 40 / 85 %, ink 42 / 55 %. */
body.home-cinematic .c-card,
body.home-cinematic .c-review,
body.home-cinematic .c-step,
body.home-cinematic .c-proof-card,
body.home-cinematic .c-form-panel,
body.home-cinematic .faq,
body.home-cinematic .c-index,
body.home-cinematic .team-card {
  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);
}
body.home-cinematic .c-band--alt :is(.c-card, .c-review, .c-step, .faq, .c-index, .team-card) {
  background-color: var(--ink);
}
body.home-cinematic .c-form-panel {
  border-top: 2px solid var(--blue);
}
body.home-cinematic .team-card {
  overflow: hidden;
}
body.home-cinematic .team-card > .c-figure {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* photo and film frames */
body.home-cinematic .c-figure,
body.home-cinematic .c-film,
body.home-cinematic .vid-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(245, 242, 237, 0.10);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
body.home-cinematic .c-card__media {
  position: relative;
}
body.home-cinematic .c-figure::after,
body.home-cinematic .vid-thumb::after,
body.home-cinematic .c-card__media::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.home-cinematic .c-map::after { content: none; }
body.home-cinematic .c-film .c-plate { top: 10px; bottom: auto; }   /* the native controls own the foot of a film */
body.home-cinematic .vid-thumb__play {
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(10, 12, 14, 0.55);
  color: var(--bone);
  border: 2px solid rgba(127, 184, 232, 0.85);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.home-cinematic .c-work .c-figure img { transition: transform var(--t-mid) var(--ease-cinema); }

/* chips: the weather icons and the process digits */
body.home-cinematic .c-wx__icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(14, 85, 158, 0.22);
  border: 1px solid rgba(127, 184, 232, 0.22);
  color: var(--sky);
}
body.home-cinematic .c-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: rgba(14, 85, 158, 0.18);
  border: 1px solid rgba(127, 184, 232, 0.28);
  color: var(--sky);
  font-size: 1.35rem;
  letter-spacing: 0;
  margin: 0 0 1rem;
}

/* the reviews carry a Playfair quotation mark, decorative, in sky at 16% */
body.home-cinematic .c-review { position: relative; overflow: hidden; }
body.home-cinematic .c-review::before {
  content: "\201C";
  position: absolute;
  top: 0.3rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: rgba(127, 184, 232, 0.16);
  pointer-events: none;
}

/* hover: lift and a sky line, real pointers only */
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-card,
  body.home-cinematic .c-step,
  body.home-cinematic .team-card,
  body.home-cinematic .c-index__link svg {
    transition: transform var(--t-fast) var(--ease-cinema), border-color var(--t-fast) var(--ease-cinema);
  }
  body.home-cinematic .c-card:hover,
  body.home-cinematic .c-step:hover,
  body.home-cinematic .team-card:hover {
    transform: translateY(-3px);
    border-color: rgba(127, 184, 232, 0.40);
  }
  body.home-cinematic .c-index__link:hover svg { transform: translateX(4px); }
  body.home-cinematic .c-work .c-figure:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  body.home-cinematic .c-card:hover,
  body.home-cinematic .c-step:hover,
  body.home-cinematic .team-card:hover,
  body.home-cinematic .c-index__link:hover svg,
  body.home-cinematic .c-work .c-figure:hover img { transform: none; }
}
@media (max-width: 767px) {
  body.home-cinematic .c-wx__icon { width: 36px; height: 36px; padding: 8px; }
  body.home-cinematic .c-weather .c-card__body { grid-template-columns: 36px minmax(0, 1fr); }
  body.home-cinematic .c-step__num { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; margin: 0; }
  body.home-cinematic .vid-thumb__play { width: 52px; height: 52px; }
}


/* === 20 THE FIVE FIGURES IN THE HERO, AND THE FILM ROW === */
/* "Smaller and at the bottom of the hero": the five-figure strip leaves its own band and sits
 as a glass row at the foot of the hero, five across on desktop, two across on phones with
 the fifth full width. The featured project is one row of three frames, Justin at 4:5, the
 drone at 16:10, the oiling clip at 4:5, the same height; on phones the drone goes full width
 first and the two portraits sit side by side under it. */
body.home-cinematic .c-hero__trust {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  background: none;
}
body.home-cinematic .c-hero__trust .c-trust__cell {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(10, 12, 14, 0.42);
  border: 1px solid rgba(245, 242, 237, 0.14);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.home-cinematic .c-hero__trust .c-trust__fig { font-size: 1.2rem; margin-bottom: 0.15rem; }
body.home-cinematic .c-hero__trust .c-trust__label { font-size: 0.75rem; letter-spacing: 0.08em; }

body.home-cinematic .c-featured__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
body.home-cinematic .c-featured__row .vid-thumb { width: 100%; max-width: none; margin: 0; display: block; }
body.home-cinematic .c-featured__row .vid-thumb img { aspect-ratio: 4 / 5; height: 100%; object-fit: cover; object-position: 50% 22%; }
body.home-cinematic .c-featured__row .c-film { margin: 0; }
body.home-cinematic .c-featured__row .c-film video { width: 100%; height: 100%; object-fit: cover; background: #000; }
body.home-cinematic .c-featured__row .c-film--drone video { aspect-ratio: 16 / 10; }
body.home-cinematic .c-featured__row .c-film--portrait video { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
  body.home-cinematic .c-featured__row { grid-template-columns: 3fr 6fr 3fr; gap: 1rem; align-items: stretch; }
}
@media (max-width: 767px) {
  body.home-cinematic .c-hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 1.1rem; }
  body.home-cinematic .c-hero__trust .c-trust__cell { padding: 0.55rem 0.7rem; }
  body.home-cinematic .c-hero__trust .c-trust__cell:nth-child(5) { grid-column: 1 / -1; }
  body.home-cinematic .c-hero__trust .c-trust__fig { font-size: 1.1rem; }
  body.home-cinematic .c-featured__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  body.home-cinematic .c-featured__row .c-film--drone { grid-column: 1 / -1; order: -1; }
}


/* === 21 FOUR FIGURES, FIVE STARS === */
body.home-cinematic .c-hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.home-cinematic .c-trust__fig--stars {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--sky);
  line-height: 1.2;
}
@media (max-width: 767px) {
  body.home-cinematic .c-hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home-cinematic .c-hero__trust .c-trust__cell:nth-child(5) { grid-column: auto; }
  body.home-cinematic .c-trust__fig--stars { font-size: 0.95rem; }
}


/* === 22 THE REVIEW RAIL: every Google review on file, with arrows === */
/* The rail keeps its swipe and snap. Two glass arrows step it one card at a time for people with a
 mouse; touch screens never see them. Disabled at either end. */
body.home-cinematic .c-rail-wrap { position: relative; }
body.home-cinematic .c-rail__btn {
  position: absolute;
  top: calc(50% - 32px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(245, 242, 237, 0.18);
  background: rgba(10, 12, 14, 0.62);
  color: var(--bone);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color var(--t-fast) var(--ease-cinema), opacity var(--t-fast) var(--ease-cinema);
}
body.home-cinematic .c-rail__btn--prev { left: -12px; }
body.home-cinematic .c-rail__btn--next { right: -12px; }
body.home-cinematic .c-rail__btn[disabled] { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-rail__btn { display: flex; }
  body.home-cinematic .c-rail__btn:not([disabled]):hover { border-color: rgba(127, 184, 232, 0.6); }
}
body.home-cinematic .c-rail__btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }


/* === 23 THE FREE GUIDE === */
body.home-cinematic .c-gift__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background-color: var(--ink);
  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);
}
@media (min-width: 768px) {
  body.home-cinematic .c-gift__panel { grid-template-columns: 4fr 8fr; gap: 2rem; padding: 2rem; align-items: center; }
}
/* the drawn cover card was retired in region 37; the panel is the cover now */
body.home-cinematic .c-gift__body .c-h2 { margin-bottom: 0.6rem; }
body.home-cinematic .c-gift__body .c-body { margin-bottom: 1.1rem; max-width: 52ch; }
body.home-cinematic .c-gift__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; align-items: end; }
@media (min-width: 640px) {
  body.home-cinematic .c-gift__row { grid-template-columns: minmax(0, 1fr) auto; }
}
body.home-cinematic .c-gift__field { margin: 0; }
body.home-cinematic .c-gift__field .c-input { min-height: 52px; }
body.home-cinematic .c-gift__btn { min-height: 52px; white-space: nowrap; }
body.home-cinematic .c-gift__form .form__microcopy { margin-top: 0.8rem; }
body.home-cinematic .c-gift__done .c-h3 { margin-bottom: 0.4rem; }
body.home-cinematic .c-gift__done .c-actions { margin-top: 1rem; }


/* === 24 THE QUIZ === */
/* Three steps over the one lead form. Off until the script adds.c-quiz--on, so a browser without JS
 sees the plain form with every field in one column, as before. */
body.home-cinematic .c-pick-grid,
body.home-cinematic .c-quiz__nav,
body.home-cinematic .c-quiz__progress { display: none; }
body.home-cinematic .c-quiz--on .c-quiz__step { display: none; }
body.home-cinematic .c-quiz--on .c-quiz__step[data-active="true"] { display: block; }
body.home-cinematic .c-quiz--on .c-field--service .c-select { display: none; }
body.home-cinematic .c-quiz--on .c-pick-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 0.35rem; }
@media (min-width: 768px) {
  body.home-cinematic .c-quiz--on .c-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.home-cinematic .c-pick {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  background: var(--ink-2);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-cinema), background-color var(--t-fast) var(--ease-cinema);
}
body.home-cinematic .c-pick__mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(245, 242, 237, 0.35);
  position: relative;
}
body.home-cinematic .c-pick[aria-pressed="true"] { border-color: var(--sky); background: rgba(14, 85, 158, 0.22); }
body.home-cinematic .c-pick[aria-pressed="true"] .c-pick__mark { border-color: var(--sky); background: var(--blue); }
body.home-cinematic .c-pick[aria-pressed="true"] .c-pick__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--on-blue);
  border-bottom: 2px solid var(--on-blue);
  transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-pick:hover { border-color: rgba(127, 184, 232, 0.55); }
}
body.home-cinematic .c-pick:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
body.home-cinematic .c-quiz--on .c-quiz__progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
body.home-cinematic .c-quiz__segs { display: flex; gap: 4px; flex: 1 1 auto; }
body.home-cinematic .c-quiz__seg { height: 4px; flex: 1 1 0; border-radius: 999px; background: var(--hairline-strong); }
body.home-cinematic .c-quiz__seg[data-done="true"] { background: var(--blue); }
body.home-cinematic .c-quiz__label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash-75); font-weight: 600; white-space: nowrap; }
body.home-cinematic .c-quiz--on .c-quiz__nav { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
body.home-cinematic .c-quiz--on .c-quiz__nav .c-btn { min-height: 48px; }
body.home-cinematic .c-quiz--on .c-quiz__nav--end { margin-top: 0.75rem; }
body.home-cinematic .c-quiz--on .c-quiz__step[data-step="3"] .c-field:first-of-type { margin-top: 0; }


/* === 25 LAZY LAYOUT FOR THE LONG PAGE === */
/* The page is fifteen bands long. Every band below the inspection form is laid out and painted only
 as it nears the screen (content-visibility), which takes the first paint off the hook for the
 twelve review cards, the film row, the gallery and the quiz cards. Anchors, find-in-page and the
 lazy posters keep working: the browser renders a band the moment anything needs it. The hero and
 the form band are excluded so the first screen and the quiz never wait. */
body.home-cinematic .c-band:not(.c-hero):not(.c-inspect),
body.home-cinematic .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}


/* === 26 THE NEW HEADLINE === */
/* "Tru Armor Roofing - Let us be your shield against the elements." is three times the old
 headline's length, so it runs smaller and wider: three lines on desktop, four on a phone, and the
 first screen still holds the buttons, the proof row and the four figures. The warranty cell is a
 phrase, not a figure, so it sets in the sans at label weight. */
body.home-cinematic .c-hero .c-h1 { max-width: 24ch; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.06; }
body.home-cinematic .c-trust__fig--text { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
@media (max-width: 767px) {
  body.home-cinematic .c-hero .c-h1 { max-width: none; font-size: clamp(1.85rem, 8.2vw, 2.25rem); line-height: 1.08; margin-bottom: 0.8rem; }
  body.home-cinematic .c-trust__fig--text { font-size: 0.95rem; }
}


/* === 27 FANCIER SERVICE BOXES, A BIGGER HERO, A WARMER WHITE === */
/* The warmer white: every heading and every line of body text on this page carries a very slight
 cream (bone #F5F2ED -> #F7F3E8, ash #C9C7C3 -> #CDC8BE, the text on blue #F7F4F0 -> #F9F5EA).
 Contrast on ink stays above 11:1 for body and 17:1 for headings. */
body.home-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);
}

/* the hero, bigger: 70px headline on desktop over three lines, 35px on a phone over four */
body.home-cinematic .c-hero .c-eyebrow { font-size: 0.85rem; }
body.home-cinematic .c-hero .c-h1 { max-width: 26ch; font-size: clamp(3rem, 5.5vw, 4.4rem); line-height: 1.04; margin-bottom: 1.1rem; }
body.home-cinematic .c-hero .c-lede { font-size: 1.3rem; line-height: 1.45; max-width: 40ch; }
@media (max-width: 767px) {
  body.home-cinematic .c-hero .c-eyebrow { font-size: 0.8rem; }
  body.home-cinematic .c-hero .c-h1 { max-width: none; font-size: clamp(2.1rem, 9.4vw, 2.6rem); line-height: 1.06; margin-bottom: 0.9rem; }
  body.home-cinematic .c-hero .c-lede { font-size: 1.125rem; }
}

/* the service boxes: the photo matted inside the box with its own corners, a faint blue light in
 the top corner, the title over a short sky rule, Learn more as a glass pill */
body.home-cinematic .c-services .c-card {
  position: relative;
  padding: 0.6rem;
  border-radius: 18px;
  border: 1px solid rgba(247, 243, 232, 0.12);
  background-image:
    radial-gradient(70% 55% at 100% 0%, rgba(14, 85, 158, 0.24) 0%, rgba(14, 85, 158, 0) 70%),
    linear-gradient(180deg, rgba(247, 243, 232, 0.05) 0%, rgba(247, 243, 232, 0) 42%);
  box-shadow: inset 0 1px 0 rgba(247, 243, 232, 0.08), 0 16px 40px rgba(0, 0, 0, 0.34);
}
body.home-cinematic .c-services .c-card > .c-card__media { border-radius: 12px; border: 0; box-shadow: none; margin: 0; }
body.home-cinematic .c-services .c-card__body { padding: 1.2rem 0.85rem 0.9rem; }
body.home-cinematic .c-services .c-card__body .c-h3 { font-size: 1.4rem; margin-bottom: 0.9rem; position: relative; padding-bottom: 0.7rem; }
body.home-cinematic .c-services .c-card__body .c-h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--sky); border-radius: 2px; }
body.home-cinematic .c-services .c-card__body p { color: var(--ash); font-size: 0.95rem; }
body.home-cinematic .c-services .c-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 243, 232, 0.16);
  background: rgba(247, 243, 232, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  color: var(--sky);
  transition: border-color var(--t-fast) var(--ease-cinema), background-color var(--t-fast) var(--ease-cinema);
}
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-services .c-card__more:hover,
  body.home-cinematic .c-services .c-card:hover .c-card__more { border-color: rgba(127, 184, 232, 0.6); background: rgba(14, 85, 158, 0.25); }
  body.home-cinematic .c-services .c-card:hover .c-card__media img { transform: scale(1.04); }
}
@media (max-width: 767px) {
  body.home-cinematic .c-services .c-card { padding: 0.6rem; border-radius: 16px; }
  body.home-cinematic .c-services .c-card__body { padding: 0.15rem 0.35rem 0.25rem 0; }
  body.home-cinematic .c-services .c-card__body .c-h3 { font-size: 1.15rem; padding-bottom: 0.5rem; margin-bottom: 0.6rem; }
  body.home-cinematic .c-services .c-card__body p { font-size: 0.9375rem; }
  body.home-cinematic .c-services .c-card__more { min-height: 40px; padding: 0 0.9rem; font-size: 0.75rem; }
}


/* === 28 THREE FIGURES; THE SERVICE BOXES LIGHT UP === */
/* The registration number left the hero (it stays in the footer and under the form), so the strip
 is three cells: three across on desktop, two and one on a phone. The six service boxes carry a
 lit perimeter at rest and light up brightly under a mouse: a sky border, a 1px sky ring and two
 soft blue glows. Shadow and colour only; nothing moves except the existing 3px lift. */
body.home-cinematic .c-hero__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  body.home-cinematic .c-hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home-cinematic .c-hero__trust .c-trust__cell:nth-child(3) { grid-column: 1 / -1; }
}
body.home-cinematic .c-services .c-card {
  border-color: rgba(127, 184, 232, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(247, 243, 232, 0.08),
    0 0 0 1px rgba(127, 184, 232, 0.16),
    0 0 22px rgba(127, 184, 232, 0.20),
    0 16px 40px rgba(0, 0, 0, 0.34);
  transition: transform var(--t-fast) var(--ease-cinema), border-color var(--t-fast) var(--ease-cinema), box-shadow var(--t-mid) var(--ease-cinema);
}
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-services .c-card:hover {
    border-color: rgba(127, 184, 232, 1);
    box-shadow:
      inset 0 1px 0 rgba(247, 243, 232, 0.12),
      0 0 0 1px rgba(127, 184, 232, 0.7),
      0 0 30px rgba(127, 184, 232, 0.6),
      0 0 80px rgba(14, 85, 158, 0.55),
      0 18px 44px rgba(0, 0, 0, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.home-cinematic .c-services .c-card { transition: none; }
}


/* === 29 THE GUIDE: the band higher up, and the hero's guide button ===
 The logo-on-the-cover rules that opened this region were retired with the cover card in region 37. */

/* the hero's fourth button: the guide. A glass pill with a blue-to-ink wash, a sky line and a soft
 blue glow, a book icon in a sky ring, and an arrow that slides under a mouse. */
body.home-cinematic .c-btn--guide {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bone);
  background: linear-gradient(135deg, rgba(14, 85, 158, 0.42) 0%, rgba(10, 12, 14, 0.55) 100%);
  border: 1px solid rgba(127, 184, 232, 0.7);
  box-shadow: 0 0 0 1px rgba(127, 184, 232, 0.18), 0 8px 26px rgba(14, 85, 158, 0.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color var(--t-fast) var(--ease-cinema), box-shadow var(--t-mid) var(--ease-cinema), transform var(--t-press) var(--ease-cinema);
}
body.home-cinematic .c-btn--guide__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(127, 184, 232, 0.8);
  color: var(--sky);
  flex: 0 0 auto;
}
body.home-cinematic .c-btn--guide__arrow { color: var(--sky); transition: transform var(--t-fast) var(--ease-cinema); }
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-btn--guide:hover {
    border-color: rgba(127, 184, 232, 1);
    box-shadow: 0 0 0 1px rgba(127, 184, 232, 0.45), 0 0 26px rgba(127, 184, 232, 0.45), 0 10px 30px rgba(14, 85, 158, 0.5);
  }
  body.home-cinematic .c-btn--guide:hover .c-btn--guide__arrow { transform: translateX(4px); }
}
body.home-cinematic .c-btn--guide:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
@media (max-width: 767px) {
  body.home-cinematic .c-btn--guide { justify-content: center; }
  body.home-cinematic .c-btn--guide__ic { width: 24px; height: 24px; }
}


/* === 30 "FREE GUIDE" FIRST IN THE MENU === */
body.home-cinematic .nav__link--guide { color: var(--sky); font-weight: 600; }
body.home-cinematic .mobile-nav__guide { list-style: none; margin: 0 0 0.5rem; padding: 0; }
body.home-cinematic .mobile-nav__guide a { color: var(--sky); font-weight: 600; }


/* === 31 THE QUIZ, AS SIMPLE AS IT GETS === */
/* Two steps: what is wrong, then a first name, a phone number and the address. Last name, email and
 the notes box stay in the plain form for browsers without JS, optional, and out of the quiz. */
body.home-cinematic .c-quiz--on .c-field--quiz-hide { display: none; }


/* === 32 THE QUIZ IN SHORT SLIDES === */
/* Slide 1 is four cards; two open a short sub-list in place. The sub-lists sit in the same grid so
 nothing jumps, and a Back card returns to the four. */
body.home-cinematic .c-quiz--on .c-pick-grid[hidden] { display: none; }
body.home-cinematic .c-pick--group { justify-content: space-between; }
body.home-cinematic .c-pick--group .c-pick__mark { display: none; }
body.home-cinematic .c-pick--group > span:nth-of-type(2) { flex: 1 1 auto; }
body.home-cinematic .c-pick__chev { flex: 0 0 auto; color: var(--sky); transition: transform var(--t-fast) var(--ease-cinema); }
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-pick--group:hover .c-pick__chev { transform: translateX(3px); }
}
body.home-cinematic .c-pick--back { background: none; border-color: transparent; color: var(--ash-75); min-height: 44px; padding-left: 0.25rem; }
body.home-cinematic .c-pick--back svg { color: var(--sky); }
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-pick--back:hover { color: var(--bone); border-color: transparent; }
}
@media (min-width: 768px) {
  body.home-cinematic .c-quiz--on .c-pick-grid--sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home-cinematic .c-pick--back { grid-column: 1 / -1; }
}


/* === 33 PHONES, BEAUTIFUL === */
/* The compact rows go. On a phone every photo is full width and matted inside its box, the way the
 desktop cards are: service cards with a 16:10 photo over the words, the three films stacked
 (Justin first, at 4:5), the recent work as a mosaic (a wide tile, then two squares), the owners'
 portraits large, the insurance photo and the map taller, and more air between bands. Nothing here
 changes a word; every value is a size. */
@media (max-width: 767px) {
  body.home-cinematic .c-band { padding: 2.75rem 0; }
  body.home-cinematic .c-head { margin-bottom: 1.35rem; }
  body.home-cinematic .c-h2 { font-size: clamp(1.85rem, 7.8vw, 2.25rem); }

  /* services: the desktop card, one per row */
  body.home-cinematic .c-services .c-grid { gap: 1rem; }
  body.home-cinematic .c-services .c-card { display: flex; flex-direction: column; padding: 0.6rem; border-radius: 18px; }
  body.home-cinematic .c-services .c-card__media { margin: 0; }
  body.home-cinematic .c-services .c-card__media img { aspect-ratio: 16 / 10; width: 100%; height: auto; border-radius: 12px; }
  body.home-cinematic .c-services .c-card__body { padding: 1.1rem 0.75rem 0.85rem; }
  body.home-cinematic .c-services .c-card__body .c-h3 { font-size: 1.45rem; padding-bottom: 0.65rem; margin-bottom: 0.8rem; }
  body.home-cinematic .c-services .c-card__body p { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
  body.home-cinematic .c-services .c-card__more { min-height: 44px; padding: 0 1.1rem; font-size: 0.78rem; }

  /* the featured project: Justin first, full width, then the two clips */
  body.home-cinematic .c-featured__row { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  body.home-cinematic .c-featured__row .vid-thumb { order: -1; }
  body.home-cinematic .c-featured__row .vid-thumb img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
  body.home-cinematic .c-featured__row .c-film--drone { order: 0; grid-column: auto; }
  body.home-cinematic .c-featured__row .c-film--portrait video { aspect-ratio: 16 / 10; object-position: 50% 45%; }
  body.home-cinematic .vid-thumb__play { width: 64px; height: 64px; }

  /* recent work: a mosaic, one wide tile then two squares */
  body.home-cinematic .c-work .c-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  body.home-cinematic .c-work .c-grid--4 > :nth-child(3n + 1),
  body.home-cinematic .c-work .c-grid--4 > :last-child:nth-child(3n + 2) { grid-column: 1 / -1; }
  body.home-cinematic .c-work .c-figure img { aspect-ratio: 1 / 1; object-fit: cover; }
  body.home-cinematic .c-work .c-grid--4 > :nth-child(3n + 1) img,
  body.home-cinematic .c-work .c-grid--4 > :last-child:nth-child(3n + 2) img { aspect-ratio: 16 / 10; }

  /* insurance: a taller photo */
  body.home-cinematic .c-insurance .c-figure img { aspect-ratio: 4 / 3; }

  /* the owners: a large portrait over the words */
  body.home-cinematic .c-owners .team-grid { gap: 1rem; }
  body.home-cinematic .team-card { display: block; padding: 0.6rem; }
  body.home-cinematic .team-card > .c-figure { margin: 0 0 0.9rem; border-radius: 12px; overflow: hidden; }
  body.home-cinematic .team-card img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; object-position: 50% 15%; border-radius: 12px; }
  body.home-cinematic .team-card__body { padding: 0 0.5rem 0.5rem; }
  body.home-cinematic .team-card__body .c-h3 { font-size: 1.4rem; }
  body.home-cinematic .team-card__role { font-size: 0.75rem; margin: 0.25rem 0 0.6rem; }
  body.home-cinematic .team-card__body p { font-size: 1rem; line-height: 1.5; }

  /* weather cards with air; the map taller; the reviews a touch larger */
  body.home-cinematic .c-weather .c-grid { gap: 0.75rem; }
  body.home-cinematic .c-weather .c-card__body { padding: 1.1rem 1.1rem; }
  body.home-cinematic .c-map iframe { height: 260px; }
  body.home-cinematic .c-review { flex: 0 0 86%; padding: 1.35rem 1.25rem; }
  body.home-cinematic .c-review blockquote { font-size: 1.0625rem; line-height: 1.5; }

}


/* === 34 THE HEADER STICKS; THE LOGO SITS IN ITS CORNER === */
/* The header is position: sticky in home-styles.css, but body carried overflow-x: hidden, which
 turns the body into its own scroll box and a sticky header inside it never sticks (the page
 scrolls on html, not on body). overflow-x: clip clips sideways overflow without making a scroll
 box, so the header holds at the top on every screen. On phones the logo is 44px tall like the
 pills beside it, centred in the 64px bar, and both ends of the bar keep the same 16px inset. */
body.home-cinematic { overflow-x: visible; overflow-x: clip; }
@media (max-width: 767px) {
  body.home-cinematic .site-header .container { padding-left: 16px; padding-right: 16px; gap: 8px; min-height: 64px; }
  body.home-cinematic .site-header .brand { flex: 0 0 auto; }
  body.home-cinematic .site-header .brand__mark { width: auto !important; height: 44px !important; display: block; }
  body.home-cinematic .site-header .btn-sms-mini { padding: 0 0.7rem; font-size: 0.75rem; letter-spacing: 0.08em; min-height: 44px; }
  body.home-cinematic .site-header .btn--call { width: 44px; height: 44px; min-width: 44px; }
  body.home-cinematic .site-header .nav-toggle { padding: 0 0.75rem; min-height: 44px; margin: 0; }
  body.home-cinematic .site-header .header__actions { gap: 8px; flex: 0 0 auto; }
}


/* === 35 DESKTOP, TIGHTER STILL === */
/* Measured at 1280: every band carried 68px above and below its content. Now 44px. Section heads
 and action rows pull in. The two side-by-side splits with a short column (the form beside its
 photo card, the insurance text beside its photo) stretch the photo to the column's full height,
 so nothing is left hanging under it. Owner portraits sit at 3:2. Footer top trimmed. */
@media (min-width: 768px) {
  body.home-cinematic { --band-y: 2.75rem; }
  body.home-cinematic .c-head { margin-bottom: 1.25rem; }
  body.home-cinematic .c-actions { margin-top: 1rem; }
  body.home-cinematic .c-inspect .c-split { align-items: stretch; }
  body.home-cinematic .c-proof-card { display: flex; flex-direction: column; min-height: 0; }
  body.home-cinematic .c-proof-card .c-figure { flex: 1 1 auto; min-height: 240px; }
  body.home-cinematic .c-proof-card .c-figure picture,
  body.home-cinematic .c-proof-card .c-figure img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 40%; }
  body.home-cinematic .c-insurance .c-split { align-items: stretch; }
  body.home-cinematic .c-insurance .c-figure { height: 100%; }
  body.home-cinematic .c-insurance .c-figure picture,
  body.home-cinematic .c-insurance .c-figure img { height: 100%; width: 100%; object-fit: cover; }
  body.home-cinematic .c-index__link { padding: 0.9rem 0; }
  body.home-cinematic .team-card img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; object-position: 50% 20%; }
  body.home-cinematic .site-footer { padding-top: 2.25rem; }
  body.home-cinematic .c-storm > .container,
  body.home-cinematic .c-discounts > .container,
  body.home-cinematic .c-cta > .container { padding: 1.5rem 2rem; }
}


/* === 36 PHONES, TIGHTER STILL === */
/* Measured at 375: 44px of band above and below every section (the three strips had inherited it
 too), 22px under every head, a 300px guide cover, a 1,127px footer. Bands 32px, strips 16px,
 heads 16px, the cover 220px, footer rows 36px, every gap a step smaller. Pictures keep their size. */
@media (max-width: 767px) {
  body.home-cinematic .c-band { padding: 2rem 0; }
  body.home-cinematic .c-storm,
  body.home-cinematic .c-discounts,
  body.home-cinematic .c-cta { padding: 1rem 0; }
  body.home-cinematic .c-storm > .container,
  body.home-cinematic .c-discounts > .container,
  body.home-cinematic .c-cta > .container { padding: 1.25rem 1.25rem; }
  body.home-cinematic .c-head { margin-bottom: 1rem; }
  body.home-cinematic .c-h2 { margin-bottom: 0.6rem; }
  body.home-cinematic .c-actions { margin-top: 0.9rem; }
  body.home-cinematic .c-hero__proof { margin-top: 0.9rem; padding-top: 0.75rem; }
  body.home-cinematic .c-hero__trust { margin-top: 0.75rem; }
  body.home-cinematic .c-form-panel { padding: 1.5rem 1rem; }
  body.home-cinematic .c-gift__panel { padding: 1.1rem; gap: 1rem; }
  body.home-cinematic .c-services .c-grid { gap: 0.75rem; }
  body.home-cinematic .c-services .c-card__body { padding: 0.9rem 0.6rem 0.7rem; }
  body.home-cinematic .c-services .c-card__body .c-h3 { margin-bottom: 0.6rem; padding-bottom: 0.5rem; }
  body.home-cinematic .c-services .c-card__body p { margin-bottom: 0.75rem; }
  body.home-cinematic .c-featured__row { gap: 0.6rem; margin-bottom: 1rem; }
  body.home-cinematic .c-work .c-grid--4 { gap: 0.5rem; }
  body.home-cinematic .c-weather .c-grid { gap: 0.5rem; }
  body.home-cinematic .c-weather .c-card__body { padding: 0.9rem 1rem; }
  body.home-cinematic .c-owners .team-grid { gap: 0.75rem; }
  body.home-cinematic .team-card > .c-figure { margin-bottom: 0.7rem; }
  body.home-cinematic .c-steps { gap: 0.5rem; }
  body.home-cinematic .faq__q { padding: 0.85rem 2.4rem 0.85rem 0; min-height: 48px; }
  body.home-cinematic .c-index__link { padding: 0.8rem 0; min-height: 48px; }
  body.home-cinematic .c-rail { padding-bottom: 0.5rem; }
  body.home-cinematic .site-footer { padding-top: 1.5rem; }
  body.home-cinematic .footer__grid,
  body.home-cinematic .footer__grid--4 { gap: 1rem 0.75rem; padding-bottom: 1rem; }
  body.home-cinematic .site-footer .footer__grid--4 h3 { margin-bottom: 0.4rem; }
  body.home-cinematic .footer__links a { min-height: 36px; padding: 2px 0; }
  body.home-cinematic .footer__areas { padding: 0.75rem 0; }
  body.home-cinematic .footer__legal { padding: 0.75rem 0 1.25rem; }
}


/* === 37 THE GUIDE, ONE CANVAS ===
 The cover card inside the panel is gone. The panel IS the cover: one ink ground, one blue light
 falling from the top-left, the white shield sitting in that light as an emblem (no box), and the
 eyebrow, title, paragraph and form printed on the same surface. The title appears once. The only
 edge left is the panel's own hairline, the page's service-card language. Chosen from three
 concepts (one canvas / the book in the scene / a title card) by a design panel; the tilted-book
 and glass-pill ideas were dropped for phone fragility (float wrap, autofill paint). */
body.home-cinematic .c-gift__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  padding: 1.2rem 1.1rem 1.1rem;
  border-radius: var(--radius);
  background-color: var(--ink);
  background-image: none;
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 36px rgba(0, 0, 0, 0.32);
}
/* the one light: drawn on the panel, oversized so it can drift without showing an edge; the
 panel's overflow: hidden trims it to the radius */
body.home-cinematic .c-gift__panel::before {
  content: "";
  position: absolute;
  inset: -25% -15% -15% -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 44% at 24% 20%, rgba(14, 85, 158, 0.46) 0%, rgba(14, 85, 158, 0.18) 36%, rgba(14, 85, 158, 0) 68%);
  opacity: 0.88;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 24% 20%;
  transition: opacity 700ms var(--ease-cinema, ease);
  animation: cg-breathe 14s var(--ease-cinema, ease-in-out) infinite alternate;
}
/* the light comes up when someone starts filling the form */
body.home-cinematic .c-gift__panel:focus-within::before { opacity: 1; }
/* the emblem: the shield on the ground, no box */
body.home-cinematic .c-gift__emblem {
  position: relative;
  z-index: 1;
  display: block;
  width: 60px;
  height: auto;
  margin: 0;
  filter: drop-shadow(0 6px 16px rgba(14, 85, 158, 0.40));
}
/* the words and the form sit above the light */
body.home-cinematic .c-gift__body { position: relative; z-index: 1; min-width: 0; }
/* the cover's blue rule moves to the eyebrow, so the one accent line lives with the words;
 --blue is fill, the eyebrow's --sky text is inherited */
body.home-cinematic .c-gift__body .c-eyebrow { display: flex; align-items: center; gap: 0.55rem; }
body.home-cinematic .c-gift__body .c-eyebrow::before {
  content: "";
  display: block;
  flex: none;
  position: static;
  margin: 0;
  width: 24px;
  height: 2px;
  border-radius: 0;
  background: var(--blue);
}
body.home-cinematic .c-gift__body .c-h2 { margin-bottom: 0.6rem; text-wrap: pretty; }
body.home-cinematic .c-gift__body .c-body { margin-bottom: 1.1rem; max-width: 52ch; }
@keyframes cg-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
}
@media (max-width: 767px) {
  body.home-cinematic .c-gift__panel { padding: 1.2rem 1.1rem 1.1rem; gap: 0.8rem; }
  /* on a phone the light is tighter and brighter, pooled behind the emblem, so the top of the
 panel reads as lit rather than merely dark (the first capture was too faint to carry it) */
  body.home-cinematic .c-gift__panel::before {
    background: radial-gradient(64% 30% at 20% 13%, rgba(14, 85, 158, 0.58) 0%, rgba(14, 85, 158, 0.24) 40%, rgba(14, 85, 158, 0) 72%);
    transform-origin: 20% 13%;
    opacity: 0.94;
  }
  body.home-cinematic .c-gift__emblem { width: 68px; filter: drop-shadow(0 6px 18px rgba(14, 85, 158, 0.55)); }
}
@media (min-width: 768px) {
  body.home-cinematic .c-gift__panel { grid-template-columns: 200px minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem; align-items: center; }
  body.home-cinematic .c-gift__panel::before {
    background: radial-gradient(40% 72% at 24% 50%, rgba(14, 85, 158, 0.48) 0%, rgba(14, 85, 158, 0.18) 38%, rgba(14, 85, 158, 0) 68%);
    transform-origin: 24% 50%;
  }
  body.home-cinematic .c-gift__emblem { width: 150px; justify-self: center; align-self: center; filter: drop-shadow(0 10px 28px rgba(14, 85, 158, 0.42)); }
}
@media (min-width: 1024px) {
  body.home-cinematic .c-gift__panel { grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; }
  body.home-cinematic .c-gift__emblem { width: 180px; }
}
/* reduced motion: the light is still, nothing fades */
@media (prefers-reduced-motion: reduce) {
  body.home-cinematic .c-gift__panel::before { animation: none; transition: none; opacity: 1; transform: none; }
}


/* === 38 THE NAME IN THE HERO, LIT ===
 The H1 keeps every word; the dash is gone and the name sits on its own line above the rest.
 The name gets two slight things: a soft blue halo on the letters (text-shadow) and a blurred
 pool of blue light behind the words (:before), hugging the name's own width. Nothing else in
 the headline changes. Static, so nothing to stop under reduced motion. */
body.home-cinematic .c-hero .c-h1 .c-hero__brand {
  position: relative;
  z-index: 0;
  display: block;
  width: fit-content;
  max-width: 100%;
  color: var(--bone);
  /* the glow lives on the letters themselves: four rings of text-shadow, each one following the
 shape of every glyph (the brief, third note: "the glow effect to be on the individual letters,
 shadows for the letters individually"). The pool of light behind the word is switched off. */
  text-shadow: 0 0 4px rgba(127, 184, 232, 0.42), 0 0 12px rgba(127, 184, 232, 0.40), 0 0 26px rgba(14, 85, 158, 0.62), 0 0 52px rgba(14, 85, 158, 0.36);
}
body.home-cinematic .c-hero .c-h1 .c-hero__brand::before {
  display: none;
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34% -14%;
  border-radius: 50%;
  /* the ellipse is wider than its box, so the first and last letters sit inside the even part of
 the light (about 56% of the radius), not on its falling edge */
  background: radial-gradient(140% 120% at 50% 50%, rgba(14, 85, 158, 0.42) 0%, rgba(14, 85, 158, 0.30) 56%, rgba(14, 85, 158, 0) 100%);
  filter: blur(12px);
  pointer-events: none;
}
@media (max-width: 767px) {
  body.home-cinematic .c-hero .c-h1 .c-hero__brand { text-shadow: 0 0 3px rgba(127, 184, 232, 0.42), 0 0 9px rgba(127, 184, 232, 0.40), 0 0 20px rgba(14, 85, 158, 0.62), 0 0 40px rgba(14, 85, 158, 0.36); }
}


/* === 39 THE INSPECTION BAND, ONE CANVAS ===
 The form box and the photo card beside it were two matted boxes side by side. Now the split is
 the one panel: one ink ground, one hairline, one light top-left behind the heading that comes up
 when someone starts typing. The form loses its own box and its blue top bar (the eyebrow carries
 the blue rule instead, as in the guide band). The photo loses its card: it bleeds to the panel's
 top and right edges and dissolves into the ink on its left and at its foot, so the italic line,
 the Text Us button and the urgent line print on the same surface. Phones keep the photo off
 (region 16) and stack those three under the form inside the one panel, above a single hairline. */
body.home-cinematic .c-inspect .c-split {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 0;
  border-radius: var(--radius);
  background-color: var(--ink);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 36px rgba(0, 0, 0, 0.32);
}
body.home-cinematic .c-inspect .c-split::before {
  content: "";
  position: absolute;
  inset: -25% -15% -15% -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(42% 38% at 16% 10%, rgba(14, 85, 158, 0.44) 0%, rgba(14, 85, 158, 0.16) 40%, rgba(14, 85, 158, 0) 70%);
  opacity: 0.9;
  transition: opacity 700ms var(--ease-cinema, ease);
}
body.home-cinematic .c-inspect .c-split:focus-within::before { opacity: 1; }
body.home-cinematic .c-inspect .c-form-panel,
body.home-cinematic .c-inspect .c-proof-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
/* the eyebrow carries the blue rule that used to be the form box's top bar */
body.home-cinematic .c-inspect .c-form-panel > .c-eyebrow { display: flex; align-items: center; gap: 0.55rem; }
body.home-cinematic .c-inspect .c-form-panel > .c-eyebrow::before {
  content: "";
  display: block;
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--blue);
}
/* the photo: no card, no corner radius of its own; it dissolves into the ink */
body.home-cinematic .c-inspect .c-proof-card .c-figure { background: var(--ink); border-radius: 0; border: 0; box-shadow: none; }
/* the shared figure rules give the picture and the image 16px corners and a hairline; a dissolving
 photo has neither (the hairline drew a 1px line along the fades in the first capture) */
body.home-cinematic .c-inspect .c-proof-card .c-figure picture,
body.home-cinematic .c-inspect .c-proof-card .c-figure img { border-radius: 0; }
body.home-cinematic .c-inspect .c-proof-card .c-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 0;
}
body.home-cinematic .c-inspect .c-proof-card .c-figure::after {
  border-radius: 0;   /* the shared overlay carries 16px corners; here they left a sliver of photo in each corner */
  /* the foot reaches full ink before the edge (92%), so the photo has no bottom line at all */
  background: linear-gradient(180deg, rgba(10, 12, 14, 0.18) 0%, rgba(10, 12, 14, 0) 28%, rgba(10, 12, 14, 0) 50%, rgba(10, 12, 14, 0.82) 80%, var(--ink) 92%, var(--ink) 100%);
}
body.home-cinematic .c-inspect .c-proof-card__tag { margin-top: 0; }
@media (max-width: 767px) {
  body.home-cinematic .c-inspect .c-form-panel { padding: 1.5rem 1rem 1.25rem; }
  body.home-cinematic .c-inspect .c-proof-card { margin: 0 1rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--hairline); }
  body.home-cinematic .c-inspect .c-proof-card > * + * { margin-top: 0.9rem; }
  /* the hidden photo still counts as a sibling, so the italic line would sit 34px under the hairline
 against 20px above it; zero its own margin and the line sits centred between the halves */
  body.home-cinematic .c-inspect .c-proof-card__tag { margin-top: 0; }
  /* the same tighter, brighter phone light as the guide band, so the two panels read as a pair */
  body.home-cinematic .c-inspect .c-split::before {
    background: radial-gradient(64% 30% at 20% 13%, rgba(14, 85, 158, 0.58) 0%, rgba(14, 85, 158, 0.24) 40%, rgba(14, 85, 158, 0) 72%);
    opacity: 0.94;
  }
}
/* the narrowest phones: the Text Us label and the send button may wrap to two lines inside the pill
 rather than ride into its rounded ends (a pre-existing base-sheet nowrap) */
@media (max-width: 400px) {
  body.home-cinematic .c-inspect .c-btn--block,
  body.home-cinematic .c-inspect .form button[type="submit"] { white-space: normal; }
}


/* === 40 THE SERVICE BOXES: RAZZLE DAZZLE UNDER THE MOUSE ===
 Region 28 gave the six boxes a lit perimeter. Under a mouse they now get four things at once: a
 beam of sky light that runs around the border (a conic gradient, masked to a 2px ring, its
 angle animated through a registered custom property), a bigger bloom around the whole box, a
 shine that sweeps once across the photo, and a taller lift with the photo pushing in a little
 further and the title's rule growing. Mouse only (hover + fine pointer); reduced motion keeps the
 bloom and drops every movement. Browsers without @property show the beam standing still. */
@property --cg-beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
body.home-cinematic .c-services .c-card { overflow: visible; }   /* the beam sits on the border and the bloom outside it */
body.home-cinematic .c-services .c-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--cg-beam),
    rgba(127, 184, 232, 0) 0deg,
    rgba(127, 184, 232, 0) 215deg,
    rgba(127, 184, 232, 0.55) 262deg,
    rgba(247, 243, 232, 0.95) 292deg,
    rgba(127, 184, 232, 0.9) 318deg,
    rgba(14, 85, 158, 0.8) 342deg,
    rgba(127, 184, 232, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity var(--t-mid) var(--ease-cinema);
}
/* the shine: a diagonal band of warm light that crosses the photo once */
body.home-cinematic .c-services .c-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, rgba(247, 243, 232, 0) 38%, rgba(247, 243, 232, 0.30) 50%, rgba(247, 243, 232, 0) 62%);
  transform: translateX(-120%);
}
body.home-cinematic .c-services .c-card__body .c-h3::after { transition: width var(--t-mid) var(--ease-cinema); }
@keyframes cg-beam { to { --cg-beam: 360deg; } }
@keyframes cg-shine {
  0% { opacity: 0; transform: translateX(-120%); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-services .c-card:hover {
    transform: translateY(-6px);
    border-color: rgba(127, 184, 232, 1);
    box-shadow:
      inset 0 1px 0 rgba(247, 243, 232, 0.14),
      0 0 0 1px rgba(127, 184, 232, 0.85),
      0 0 40px rgba(127, 184, 232, 0.62),
      0 0 120px rgba(14, 85, 158, 0.62),
      0 26px 64px rgba(0, 0, 0, 0.48);
  }
  body.home-cinematic .c-services .c-card:hover::before {
    opacity: 1;
    animation: cg-beam 2.4s linear infinite;
  }
  body.home-cinematic .c-services .c-card:hover .c-card__media::before {
    animation: cg-shine 1.1s var(--ease-cinema) 0.08s 1 both;
  }
  body.home-cinematic .c-services .c-card:hover .c-card__media img { transform: scale(1.07); filter: brightness(1.08) saturate(1.05); }
  body.home-cinematic .c-services .c-card:hover .c-card__body .c-h3::after { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-cinematic .c-services .c-card:hover { transform: none; }
  body.home-cinematic .c-services .c-card:hover::before { animation: none; }
  body.home-cinematic .c-services .c-card:hover .c-card__media::before { animation: none; opacity: 0; }
  body.home-cinematic .c-services .c-card:hover .c-card__media img { transform: none; filter: none; }
  body.home-cinematic .c-services .c-card__body .c-h3::after { transition: none; }
}
/* tablets, one column: the photo sits under the form, full width, fading in from the ink above */
@media (min-width: 768px) and (max-width: 1023px) {
  /* the same insets as the form column (its padding at this width is 1.75rem 1.5rem), so the italic
 line, the button and the heading share one left edge (review) */
  body.home-cinematic .c-inspect .c-proof-card { padding: 0 1.5rem 1.75rem; }
  body.home-cinematic .c-inspect .c-proof-card .c-figure { margin: 0 -1.5rem; min-height: 260px; max-height: 340px; }
  body.home-cinematic .c-inspect .c-proof-card .c-figure::before { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 3%, rgba(10, 12, 14, 0) 40%); }
  body.home-cinematic .c-inspect .c-proof-card__tag { margin-top: 1.25rem; }
}
/* desktop, side by side: the photo bleeds to the panel's top and right edges and fades in from the left */
@media (min-width: 1024px) {
  body.home-cinematic .c-inspect .c-proof-card { padding: 0 1.5rem 1.75rem 0; }
  /* flex-basis 0 so the photo's own 4:3 height never sets the row; the form's height does, and
 the photo fills whatever that is (the first cut left 120px of empty panel under the choices) */
  body.home-cinematic .c-inspect .c-proof-card .c-figure { margin: 0 -1.5rem 0 0; flex: 1 1 0px; min-height: 240px; }
  body.home-cinematic .c-inspect .c-proof-card .c-figure::before { background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 3%, rgba(10, 12, 14, 0.6) 20%, rgba(10, 12, 14, 0) 50%); }
  body.home-cinematic .c-inspect .c-proof-card__tag { margin-top: 1.25rem; }
}


/* === 41 THE FEATURED PROJECT AS A COLLAGE ===
 The wood shake row (a video thumbnail and two native players sitting black until pressed) is
 replaced by five photos of the new-construction standing seam metal roof, laid out the way the
 recent-work mosaic is: on desktop the finished roof leads at two rows by eight columns, the crew
 at the ridge stands tall beside it, and three details run under; on phones the lead photo is full
 width and the other four sit as two rows of squares. Each tile is a matted figure with a plate,
 the same box language and hover push-in as the recent work. The old.c-featured__row rules stay
 in the sheet but nothing uses them. */
body.home-cinematic .c-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
body.home-cinematic .c-collage .c-figure { margin: 0; border-radius: 12px; }
body.home-cinematic .c-collage .c-figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--t-mid) var(--ease-cinema);
}
body.home-cinematic .c-collage .c-collage__tile--lead { grid-column: 1 / -1; }
body.home-cinematic .c-collage .c-collage__tile--lead img { aspect-ratio: 16 / 10; }
body.home-cinematic .c-collage .c-collage__tile--tall img { object-position: 50% 30%; }
@media (min-width: 768px) {
  body.home-cinematic .c-collage { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.75rem; }
  body.home-cinematic .c-collage .c-collage__tile { grid-column: span 4; }
  body.home-cinematic .c-collage .c-collage__tile img { aspect-ratio: 4 / 3; }
  body.home-cinematic .c-collage .c-collage__tile--lead { grid-column: 1 / 9; grid-row: 1 / 3; }
  body.home-cinematic .c-collage .c-collage__tile--lead img { aspect-ratio: auto; }
  body.home-cinematic .c-collage .c-collage__tile--tall { grid-column: 9 / 13; grid-row: 1 / 3; }
  body.home-cinematic .c-collage .c-collage__tile--tall img { aspect-ratio: 4 / 5; }
}
@media (hover: hover) and (pointer: fine) {
  body.home-cinematic .c-collage .c-figure:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  body.home-cinematic .c-collage .c-figure img { transition: none; }
  body.home-cinematic .c-collage .c-figure:hover img { transform: none; }
}


/* === 42 THE WEATHER CARDS, TIGHTER ON DESKTOP (the brief, with a screenshot of the six
 cards: "tighten these up") ===
 On desktop the six cards stacked icon, title and text with 20px under the icon and 24px of
 padding, and every card stretched to the tallest one, so the two-line cards sat over a hundred
 pixels of empty box. The phones already put the icon beside the title (region 16); desktop now
 does the same: the chip in a 40px column, the title and the text beside it, tighter padding and
 gaps, so the tallest card is short and the short ones look full. Words unchanged. */
@media (min-width: 768px) {
  body.home-cinematic .c-weather .c-grid { gap: 0.85rem; }
  body.home-cinematic .c-weather .c-card__body {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 0.9rem;
    align-content: start;
    padding: 1.15rem 1.25rem 1.2rem;
  }
  /* the chip and the title share the first row; the text runs the full width under both, so the
 long card stays four lines and the short ones sit over less box */
  body.home-cinematic .c-weather .c-wx__icon { margin: 0; grid-column: 1; grid-row: 1; align-self: center; }
  body.home-cinematic .c-weather .c-h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.35rem; line-height: 1.15; align-self: center; }
  body.home-cinematic .c-weather .c-body { grid-column: 1 / -1; grid-row: 2; margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.5; }
  /* found while measuring this band: the section eyebrows were 0.72rem (11.52px) on desktop, under the
 12px floor that set for phones; the floor holds on every screen. The hero's own
 eyebrow (0.85rem) is untouched. */
  body.home-cinematic .c-eyebrow { font-size: 0.75rem; }
  body.home-cinematic .c-hero .c-eyebrow { font-size: 0.85rem; }
}


/* === 43 THE 12PX FLOOR ON EVERY SCREEN ===
 Region 16 set the floor for phones; a desktop audit at 1280 found the photo plates at 9.92px, the
 review meta lines at 11.52px, the hero proof row at 10.56px, the owners' roles and the footer
 headings at 11.2px, and two footer labels. Small caps with letter-spacing stay small caps, at 12px. */
@media (min-width: 768px) {
  body.home-cinematic .c-figure figcaption.c-plate,
  body.home-cinematic figcaption.c-plate,
  body.home-cinematic span.c-plate,
  body.home-cinematic .c-review__meta,
  body.home-cinematic .c-hero__proof li,
  body.home-cinematic .c-proof li,
  body.home-cinematic .team-card__role,
  body.home-cinematic .site-footer h3,
  body.home-cinematic .utility-bar__social .social-label,
  body.home-cinematic .footer__areas-label { font-size: 0.75rem; }
}


/* === 33 CONSENT WORDS LAID OUT === */
/* The texting consent: one plain sentence to agree to, then the small print underneath it. */
body.home-cinematic .c-consent {
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--ink);
}
body.home-cinematic .c-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--blue);
}
body.home-cinematic .c-consent__text {
  display: block;
  min-width: 0;
}
body.home-cinematic .c-consent__lead {
  display: block;
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--bone);
}
body.home-cinematic .c-consent__fine {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ash-70);
}
body.home-cinematic .c-consent__fine a {
  color: var(--sky);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 767px) {
  body.home-cinematic .c-form-panel .c-consent { font-size: 0.9rem; line-height: 1.4; padding: 0.8rem 0.85rem; }
  body.home-cinematic .c-consent__lead { font-size: 0.9rem; }
  body.home-cinematic .c-consent__fine { font-size: 0.7rem; }
}

/* ============================================================================
   43. NO SHORT RULES (2026-10-06). Andrew: "Remove any of these on the website": the small blue
   bars. The three decorative rules on this page are switched off here rather than deleted, so
   the regions that drew them still read as history: the 36px sky underline under a service
   card's title (region 27, and its hover widening in region 40), the 24x2 blue bar before the
   guide band's eyebrow (region 37) and the one before the inspection form's eyebrow (region 39).
   The inner pages never drew one. The title's padding that made room for the underline goes too.
   ========================================================================================== */
body.home-cinematic .c-services .c-card__body .c-h3::after,
body.home-cinematic .c-gift__body .c-eyebrow::before,
body.home-cinematic .c-inspect .c-form-panel > .c-eyebrow::before { display: none; content: none; }
body.home-cinematic .c-services .c-card__body .c-h3 { padding-bottom: 0; }

/* ============================================================================
   44. NO AI TELLS (2026-10-06). Andrew: "I CANNOT have ANY indication of AI language being used on the
   page." Everything here is a tell from smeargle references/ai-tells.md or a failure the detector
   reported on this page, switched off in one place. In order: the header gap he saw at a wide screen
   ("Contact" touched "Text Us"); the colored glows (button, guide button, service-card ring and bloom,
   the hero name's halo, the light pools behind the form and guide panels); the hover beam and shine on
   the service cards; the icon tiles on the weather cards and the digit chips on the process steps; the
   hero strip's huge-figure-tiny-caps-label pattern and the caps on the proof row and the header text
   button; eyebrows on every band (hidden: every one repeats the heading under it); the hairline-plus-
   wide-shadow surface (the line stays, the wide shadow goes); the cramped FAQ and city-pill boxes.
   ========================================================================================== */
body.home-cinematic .site-header .header__actions { margin-left: 2rem; }
body.home-cinematic .site-header .btn-sms-mini { margin-left: 0; text-transform: none; letter-spacing: 0.01em; font-size: 0.9rem; }
body.home-cinematic .c-btn--primary,
body.home-cinematic .c-btn--guide,
body.home-cinematic .c-btn--guide:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
body.home-cinematic .c-services .c-card,
body.home-cinematic .c-services .c-card:hover { box-shadow: inset 0 1px 0 rgba(247, 243, 232, 0.08); }
body.home-cinematic .c-services .c-card::before,
body.home-cinematic .c-services .c-card__media::before,
body.home-cinematic .c-gift__panel::before,
body.home-cinematic .c-inspect .c-split::before { display: none; content: none; animation: none; }
body.home-cinematic .c-hero .c-h1 .c-hero__brand { text-shadow: none; }
body.home-cinematic .c-hero .c-h1 .c-hero__brand::before { display: none; content: none; }
body.home-cinematic .c-wx__icon { width: 28px; height: 28px; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; }
body.home-cinematic .c-step__num { width: auto; height: auto; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; }
body.home-cinematic .c-trust__fig { font-size: 1.35rem; margin-bottom: 0.3rem; }
body.home-cinematic .c-hero__trust .c-trust__label,
body.home-cinematic .c-trust__label,
body.home-cinematic .c-hero .c-hero__proof,
body.home-cinematic .c-hero__proof { text-transform: none; letter-spacing: 0.01em; font-size: 0.85rem; }
body.home-cinematic .c-eyebrow,
body.home-cinematic .c-head .c-eyebrow,
body.home-cinematic .c-gift__body .c-eyebrow,
body.home-cinematic .c-inspect .c-form-panel > .c-eyebrow { display: none !important; }
body.home-cinematic .faq,
body.home-cinematic .gallery figure,
body.home-cinematic .cta-band,
body.home-cinematic .team-card,
body.home-cinematic .c-gift__panel,
body.home-cinematic .c-inspect .c-split,
body.home-cinematic [style*="box-shadow:var(--shadow-md)"] { box-shadow: inset 0 1px 0 rgba(245, 242, 237, 0.07) !important; }
body.home-cinematic .faq { padding-top: 0.25rem; padding-bottom: 0.25rem; }
body.home-cinematic .area-pills { padding-top: 0.75rem; }


/* === 45 NO CAPTIONS ON PHOTOS === */
/* Andrew, 2026-10-06, with a picture of the "PANELS AT SUNSET" pill: "remove all of these on the
 photos." The 14 plates are gone from index.html; this keeps any caption that lands on a photo from
 drawing, and drops the bottom scrim that only existed to seat the plate. The proof-card figure in the
 inspection band keeps its own fade (its rule is more specific and sets its own background). */
body.home-cinematic .c-plate,
body.home-cinematic .c-figure > figcaption,
body.home-cinematic .c-card__media > figcaption,
body.home-cinematic .c-film > figcaption { display: none !important; }
body.home-cinematic .c-figure::after { background: none; }

/* === 46 THE HERO LEDE IN THE COMPANY BLUE === */
/* Andrew, 2026-10-06, with a picture of the lede: "This needs to be in the company blue font." On the
 dark hero the company blue as TEXT is --sky (#7FB8E8, 9.26:1 on ink); --blue (#0E559E) is a fill and
 reads 2.3:1 as text here, so it is never used for words (design.md tokens, the two roles never swap). */
body.home-cinematic .c-hero .c-lede { color: var(--sky); }

/* === 47 THE GUIDE ON PAPER (2026-10-13) === */
/* Andrew, with a picture of the band: "make this stand out better." The panel was ink on an ink
 band, one hairline apart, with the header's white shield repeated inside it; after the 2026-10-06
 passes took its light pool and its eyebrow, nothing set it off. The guide is a printed thing, so it
 gets the one paper surface on the page: a bone panel on the ink band, ink type, the colour shield,
 and the blue button at its strongest. No glow, no rule, no shadow, no box inside the box (design.md,
 the guide band). Contrast on bone #F5F2ED: ink 17.5:1, body grey #3A3D40 9.8:1, small grey #4B4F53
 7.4:1, the error red #A4161E 6.5:1, the field line is ink at 28%. The done state follows. */
body.home-cinematic .c-gift__panel {
  background-color: var(--bone);
  border-color: rgba(10, 12, 14, 0.14);
  box-shadow: none !important;
}
body.home-cinematic .c-gift__emblem { filter: none; }
body.home-cinematic .c-gift__body .c-h2,
body.home-cinematic .c-gift__body .c-h3,
body.home-cinematic .c-gift__field .c-field__label,
body.home-cinematic .c-gift__field .req { color: var(--ink); }
body.home-cinematic .c-gift__body .c-body { color: #3A3D40; }
body.home-cinematic .c-gift__field .c-input {
  color: var(--ink);
  background: #FFFFFF;
  border-color: rgba(10, 12, 14, 0.28);
}
body.home-cinematic .c-gift__field .c-input:focus { border-color: var(--blue); background: #FFFFFF; }
body.home-cinematic .c-gift__field .c-input::placeholder { color: #5C6065; }
body.home-cinematic .c-gift__field .field__error { color: #A4161E; }
body.home-cinematic .c-gift__form .form__microcopy,
body.home-cinematic .c-gift__form .form__microcopy svg { color: #4B4F53; }