/* Lucorp Media site stylesheet
   Organizing idea: the truck door. Fleet-vehicle lettering on a work-green door panel.
   Work green does most of the work. Safety orange appears only on the primary button.
   Big Shoulders Display for lettering, Public Sans for reading. */

:root {
  /* Color */
  --green: #0f3d2e;        /* door panel, hero bands, headings */
  --green-2: #16523e;      /* hover on green */
  --orange: #ff6b1a;       /* primary button only */
  --orange-2: #ff8340;
  --white: #ffffff;
  --mist: #eceee9;         /* alternate section ground */
  --steel: #59636b;        /* secondary text */
  --asphalt: #1e2326;      /* body ink, trust strip, footer */
  --line: #d4d8d2;
  --line-dark: rgba(255, 255, 255, 0.18);
  --on-green: #e3ebe7;     /* body text on green */
  --star: #ffd100;

  /* Type */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-sm: 0.9375rem;
  --fs-base: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.625rem, 2.6vw, 2rem);
  --fs-h2: clamp(2.5rem, 6vw, 4rem);
  --fs-display: clamp(2.125rem, 4.6vw, 3.5rem);

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --sec-y: clamp(64px, 9vw, 112px);
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 68px;

  /* Shape */
  --r: 2px;
  --focus: 0 0 0 3px var(--white), 0 0 0 6px var(--asphalt);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--asphalt); font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
a { color: var(--green); text-underline-offset: 0.2em; }
a:hover { color: var(--green-2); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--orange); color: var(--asphalt); font-weight: 700; }
.skip:focus { top: 12px; }
.i { width: 18px; height: 18px; flex: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: calc(720px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.pad-x { padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.grid-2 { display: grid; gap: var(--s-5); }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.center { justify-content: center; text-align: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 2px solid transparent; border-radius: var(--r); font-family: var(--f-display); font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-primary { background: var(--orange); color: var(--asphalt); }
.btn-primary:hover { background: var(--orange-2); color: var(--asphalt); }
.btn-secondary { background: transparent; color: var(--green); border-color: var(--green); }
.btn-secondary:hover { background: var(--mist); color: var(--green); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 1.25rem; }
.btn-lg { min-height: 64px; padding: 0 36px; font-size: 1.75rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 519px) { .btn-row .btn { width: 100%; } }

/* Header */
.hd-bar { position: sticky; top: 0; z-index: 50; background: var(--green); color: var(--white); border-bottom: 1px solid var(--line-dark); }
.hd { display: flex; align-items: center; gap: var(--s-2); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.logo img { display: block; height: 44px; width: auto; }
.hd-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--white); text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.hd-link:hover { color: var(--white); text-decoration: underline; }
.hd .btn { margin-left: var(--s-2); }
@media (max-width: 519px) { .logo img { height: 24px; } .hd-link { padding: 0 8px; font-size: 1rem; } .hd .btn { padding: 0 12px; font-size: 1.125rem; margin-left: 0; } }
@media (max-width: 379px) { .hd .btn { display: none; } }

/* Main grid: the source-order technique.
   Source order: H1, intro, hero, trust, everything else.
   Visual order: H1, hero, trust, intro, everything else. */
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "hero" "trust" "intro"; }
.main-grid::before { content: ""; grid-column: 1; grid-row: h1-start / hero-end; background-color: var(--green); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px); }
.main-grid > .page-h1 { grid-area: h1; }
.main-grid > .hero { grid-area: hero; }
.main-grid > .trust { grid-area: trust; }
.main-grid > .intro { grid-area: intro; }

/* Hero */
.page-h1 { position: relative; padding-top: clamp(14px, 2vw, 24px); color: var(--white); font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.eyebrow { display: inline; }
.hero { position: relative; padding-block: var(--s-2) clamp(32px, 5vw, 56px); color: var(--white); }
.hero-inner { display: grid; gap: var(--s-7); }
@media (min-width: 980px) { .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--s-8); } }
.display { font-family: var(--f-display); font-size: var(--fs-display); font-weight: 900; line-height: 0.95; text-transform: uppercase; max-width: 18ch; text-wrap: balance; }
.subhead { margin-top: var(--s-3); font-size: 1.125rem; line-height: 1.5; max-width: 50ch; text-wrap: pretty; }
.hero .subhead, .hero .checks li { color: var(--on-green); }
.hero .checks { margin-top: var(--s-4); gap: var(--s-2); }
.hero .btn-row { margin-top: var(--s-5); }
.hero .btn-secondary, .final .btn-secondary, .article-hero .btn-secondary, .page-head .btn-secondary { color: var(--white); border-color: var(--white); }
.hero .btn-secondary:hover, .final .btn-secondary:hover, .article-hero .btn-secondary:hover, .page-head .btn-secondary:hover { background: rgba(255,255,255,.1); color: var(--white); }
.hero :focus-visible, .final :focus-visible, .article-hero :focus-visible, .page-head :focus-visible { outline-color: var(--white); }
.hero-collage { position: relative; padding-bottom: 36px; }
.hero-media .ph-main { aspect-ratio: 16 / 10; }
@media (min-width: 980px) { .hero-media .ph-main { aspect-ratio: 4 / 3; } }
.collage-chip { position: absolute; left: 12px; bottom: 0; width: 38%; border: 4px solid var(--white); }
.collage-card { position: absolute; right: 12px; top: 16px; padding: 10px 14px; background: var(--white); color: var(--asphalt); border-top: 6px solid var(--orange); line-height: 1.3; }
.collage-card .ring { display: none; }
.collage-sub { font-size: var(--fs-sm); color: var(--steel); }
@media (min-width: 980px) { .collage-chip { left: -28px; } .collage-card { right: -16px; } }
.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--s-5); color: var(--on-green); }
.avatars { display: flex; }
.avatars span, .headshot { width: 40px; height: 40px; border-radius: 50%; background-color: #8b958f; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 1px, transparent 1px 6px); border: 2px solid var(--green); }
.avatars span + span { margin-left: -10px; }
.headshot { width: 48px; height: 48px; flex: none; border-color: var(--line); }
.hero .slot { color: var(--on-green); }

/* Ticks */
.checks, .crosses { display: grid; gap: var(--s-3); }
.checks li, .crosses li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.checks li::before { content: ""; width: 14px; height: 14px; margin-top: 0.4em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.crosses li::before { content: ""; width: 14px; height: 3px; margin-top: 0.7em; background: var(--steel); }

/* Media placeholders */
.ph { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; flex-direction: column; gap: var(--s-3); width: 100%; aspect-ratio: var(--ar, 4 / 3); padding: var(--s-3); background-color: #c9cfca; background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 1px, transparent 1px 12px); overflow: hidden; font-size: 0.8125rem; line-height: 1.35; color: var(--asphalt); }
.ph > span:last-child { align-self: flex-start; margin-top: auto; background: var(--white); padding: 4px 8px; }
.hero .ph, .final .ph { background-color: #23302b; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px); }
.ph-play { align-self: center; margin-block: auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--asphalt); }
.ph-play .i { width: 24px; height: 24px; }
.ar-16x9 { --ar: 16 / 9; } .ar-16x10 { --ar: 16 / 10; } .ar-4x3 { --ar: 4 / 3; } .ar-4x5 { --ar: 4 / 5; } .ar-3x2 { --ar: 3 / 2; } .ar-1x1 { --ar: 1 / 1; }
.slot { font-size: var(--fs-sm); color: var(--steel); }

/* Trust strip: the rocker panel */
.trust { background: var(--asphalt); color: var(--white); }
.trust-inner { display: grid; gap: var(--s-5); padding-block: var(--s-5); }
@media (min-width: 1000px) { .trust-inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-7); } }
.trust-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.trust .slot, .trust span { color: #c4ccc8; }
.stars { color: var(--star) !important; letter-spacing: 2px; font-size: 1.375rem; line-height: 1; }
.trust-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.trust-stats li { display: grid; gap: 2px; border-left: 1px solid var(--line-dark); padding-left: var(--s-4); }
.trust-stats strong, .stat-num { font-family: var(--f-display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--white); }
.trust-stats strong { font-size: 1.25rem; }
.trust-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.logo-slot { display: grid; place-items: center; min-height: 48px; min-width: 84px; padding: 4px 8px; border: 1px dashed var(--line-dark); color: #c4ccc8; font-size: 0.75rem; text-align: center; line-height: 1.25; }

/* Intro band */
.intro { padding-block: clamp(40px, 6vw, 72px); padding-inline-end: max(var(--gutter), calc((100% - var(--wrap)) / 2 + 20%)); font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.5; color: var(--asphalt); border-bottom: 1px solid var(--line); text-wrap: pretty; }
.intro a { font-weight: 700; }

/* Sections */
.sec { padding-block: var(--sec-y); }
.sec--alt { background: var(--mist); }
.sec--tight { padding-block: var(--s-7); }
.sec + .sec:not(.sec--alt) { border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); }
.sec-head.center { margin-inline: auto; justify-items: center; }
.kicker { font-weight: 700; color: var(--green); font-size: var(--fs-sm); }
h2 { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 900; line-height: 0.95; text-transform: uppercase; color: var(--green); text-wrap: balance; max-width: 18ch; }
h3, .h3-size { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.05; color: var(--asphalt); text-wrap: balance; }
.lede { font-size: var(--fs-lg); color: var(--steel); max-width: 60ch; text-wrap: pretty; }
.prose { color: var(--asphalt); max-width: 68ch; text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.split { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); } .split .sec-head { margin-bottom: 0; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); } }

/* Cards: used sparingly, square, ruled */
.card { position: relative; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); background: var(--white); border: 1px solid var(--line); }
.sec--alt .card { border-color: transparent; }
.card p { color: var(--steel); }
.card--link { border-top: 6px solid var(--green); }
.card--link:hover { border-color: var(--green); }
.card-link { color: var(--asphalt); text-decoration: none; }
.card-link:hover { color: var(--green); text-decoration: underline; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { box-shadow: var(--focus); }
.card-arrow { font-weight: 700; color: var(--green); font-size: var(--fs-sm); }
.card-arrow:empty { display: none; }
.card .ph { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-2); width: calc(100% + 2 * var(--s-5)); }

/* Problem */
.pain-list { display: grid; border-top: 2px solid var(--green); margin-top: var(--s-6); }
.pain-list li { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.pain-list .n { display: none; }
.pain-list h3 { font-size: 1.625rem; }
.pain-list p { margin-top: 6px; color: var(--steel); }

/* Before / after */
.ba { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .ba { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba-col { gap: var(--s-4); border-top: 6px solid var(--steel); }
.ba-col--after { border-top-color: var(--green); }
.ba-col .ph { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; width: calc(100% + 2 * var(--s-5)); }
.ba-col li { color: var(--asphalt); }
.fit-tag { justify-self: start; font-family: var(--f-display); font-size: 1.375rem; font-weight: 800; text-transform: uppercase; }
.fit-tag--yes { color: var(--green); }
.fit-tag--no { color: var(--steel); }

/* Stakes */
.stakes { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .stakes { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.table-wrap, .tbl-wrap { overflow-x: auto; background: var(--white); border: 2px solid var(--green); }
.table-wrap:focus-visible, .tbl-wrap:focus-visible { outline: none; box-shadow: var(--focus); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl-wrap table { min-width: 420px; }
th, td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--green); color: var(--white); font-weight: 700; }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tr.is-current td { background: #fff1e8; }
.note { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--steel); max-width: 68ch; }

/* Button band */
.cta-band { background: var(--asphalt); color: var(--white); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-7); }
.cta-line { font-family: var(--f-display); font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1; text-transform: uppercase; max-width: 26ch; }
@media (max-width: 519px) { .cta-inner .btn { width: 100%; } }

/* Client photo wall */
.mosaic-cta { padding-block: var(--sec-y); background: var(--green); color: var(--white); overflow: hidden; }
.mosaic-inner { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .mosaic-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); } }
.mosaic-copy { display: grid; gap: var(--s-4); justify-items: start; }
.mosaic-copy .kicker { color: var(--on-green); }
.mosaic-copy h2 { color: var(--white); }
.mosaic-copy .lede { color: var(--on-green); }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 600px) { .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ph--tile { padding: 4px; font-size: 0.6875rem; background-color: #2c4a3e; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px); }
.ph--tile > span:last-child { padding: 1px 4px; }

/* Steps: a real sequence, so it is numbered */
.steps { display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; display: grid; gap: var(--s-3); align-content: start; background: var(--white); border-top: 6px solid var(--green); padding-bottom: var(--s-5); }
.steps li > .ph { margin-bottom: var(--s-2); }
.steps li > :not(.ph) { padding-inline: var(--s-5); }
.step-top { display: flex; }
.step-n::before { content: counter(step); font-family: var(--f-display); font-size: 4rem; font-weight: 900; line-height: 0.9; color: var(--green); }
.steps .ring { display: none; }
.steps p { color: var(--steel); }

/* Control */
.ctrl { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 2px solid var(--green); }
.ctrl p { color: var(--steel); }
.key { display: none; }

/* Project gallery */
.bento { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bento figure { position: relative; min-width: 0; }
.bento .ph { aspect-ratio: 4 / 3; }
.bento .b-lg { grid-column: 1 / -1; }
.bento .b-lg .ph { aspect-ratio: 21 / 9; }
.bento figcaption { margin-top: 8px; font-size: var(--fs-sm); color: var(--steel); }

/* Testimonials */
.testi { display: grid; gap: var(--s-4); align-content: start; }
.testi blockquote { font-size: 1.3125rem; line-height: 1.45; color: var(--asphalt); }
.who { display: flex; align-items: center; gap: 12px; color: var(--steel); }
.after-grid { margin-top: var(--s-7); }

/* Dive deeper */
.dive { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .dive { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.dive-list { display: grid; border-top: 2px solid var(--green); }
.dive-list li { border-bottom: 1px solid var(--line); }
.dive-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-3) 0; color: var(--asphalt); text-decoration: none; font-size: var(--fs-lg); font-weight: 600; }
.dive-list a:hover { color: var(--green); text-decoration: underline; }
.dive-meta { display: block; font-size: var(--fs-sm); color: var(--steel); font-weight: 400; margin-top: 2px; }

/* FAQ */
.faq { max-width: 860px; border-top: 2px solid var(--green); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-h { font-family: var(--f-body); font-size: inherit; font-weight: inherit; text-transform: none; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; min-height: 68px; padding: var(--s-4) 0; background: none; border: 0; color: var(--asphalt); cursor: pointer; text-align: left; font-size: var(--fs-lg); font-weight: 700; }
.faq-q:hover { color: var(--green); }
.faq-q:focus-visible { outline: none; box-shadow: var(--focus); }
.faq-ic { position: relative; flex: none; width: 32px; height: 32px; background: var(--green); }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--white); transform: translate(-50%, -50%); }
.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-ic::after { transform: translate(-50%, -50%); }
.faq-a { padding: 0 0 var(--s-5); color: var(--steel); max-width: 68ch; }

/* Final call to action */
.final { padding-block: clamp(72px, 10vw, 128px); background: var(--green); color: var(--white); }
.final .kicker { color: var(--on-green); }
.final .display { margin-top: 0; max-width: 18ch; }
.final .subhead { color: var(--on-green); }
.final .btn-row { margin-top: var(--s-6); }
.final-split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .final-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); } }

/* Page heads (blog, guides, tools, legal) */
.article-hero, .page-head { background: var(--green); color: var(--white); padding-block: clamp(20px, 3vw, 36px) clamp(40px, 6vw, 64px); }
.article-hero .wrap-narrow > * + *, .page-head .wrap > * + * { margin-top: var(--s-4); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--on-green); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); }
.article-title, .page-title { font-family: var(--f-display); font-size: clamp(2.125rem, 4.6vw, 3.5rem); font-weight: 900; line-height: 0.95; text-transform: uppercase; text-wrap: balance; max-width: 18ch; }
.article-hero .subhead, .page-head .subhead, .article-hero .checks li { color: var(--on-green); }
.page-head .kicker { color: var(--on-green); }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); color: var(--steel); }
.article-hero .post-meta, .legal-meta { color: var(--on-green); }
.tag { font-weight: 700; color: var(--green); }
.article-hero .tag { color: var(--white); }
.article-figure { padding-block: var(--s-7) 0; }
.article { padding-block: var(--s-7) var(--sec-y); font-size: 1.1875rem; line-height: 1.7; }
.article > * + * { margin-top: 1.1em; }
.article h2 { margin-top: 1.6em; font-size: clamp(2rem, 4.4vw, 2.75rem); }
.article ul { display: grid; gap: var(--s-2); padding-left: 1.2em; list-style: disc; }
.article li::marker { color: var(--green); }
.article strong { font-weight: 700; }
.article-key { padding: var(--s-5); background: var(--mist); border-left: 0; border-top: 6px solid var(--green); }
.ak-label { font-weight: 700; color: var(--green); margin-bottom: var(--s-2); }
.article-key p, .article-pull p { margin: 0; }
.article-pull { margin-block: 2em; font-family: var(--f-display); font-size: clamp(1.75rem, 3.4vw, 2.25rem); font-weight: 800; line-height: 1.1; color: var(--green); text-wrap: pretty; }
.aside-cta { margin-block: 2em; padding: var(--s-6); background: var(--asphalt); color: var(--white); display: grid; gap: var(--s-4); }
.aside-cta p { font-family: var(--f-display); font-size: 2rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.related { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 2px solid var(--green); }
.related b { display: block; color: var(--steel); font-size: var(--fs-sm); }
.post-list { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }

/* Case studies */
.case { display: grid; gap: var(--s-3); }
.case-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.case-stats strong { display: block; font-family: var(--f-display); font-size: 1.375rem; font-weight: 800; }
.case-stats span { font-size: var(--fs-sm); color: var(--steel); }

/* Legal */
.legal { display: grid; gap: var(--s-7); padding-block: var(--s-7) var(--sec-y); }
@media (min-width: 1000px) { .legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-8); } .toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.toc ol { display: grid; border-top: 2px solid var(--green); }
.toc a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--asphalt); text-decoration: none; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.toc a:hover { color: var(--green); text-decoration: underline; }
.toc .n, .legal-body h2 .n { font-family: var(--f-display); font-weight: 800; color: var(--green); }
.toc-note { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--steel); }
.legal-body { max-width: 72ch; }
.legal-body > * + * { margin-top: 1em; }
.legal-body h2 { display: flex; align-items: baseline; gap: 12px; margin-top: 1.8em; font-size: clamp(1.875rem, 3.6vw, 2.5rem); max-width: none; scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin-top: 1.4em; font-size: 1.5rem; }
.legal-body ul { display: grid; gap: var(--s-2); padding-left: 1.2em; list-style: disc; }
.legal-fine { padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--steel); }
.legal-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); }

/* Shared tool page layout */
.tool { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-6); }
@media (min-width: 1000px) { .tool--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; } .tool--split .panel--out { position: sticky; top: calc(var(--header-h) + 16px); } }
.panel { display: grid; gap: var(--s-5); align-content: start; padding: var(--s-5); background: var(--white); border: 2px solid var(--green); min-width: 0; }
.panel--out { background: var(--mist); border-color: var(--mist); }
.panel-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.panel-h h2 { font-size: 1.75rem; max-width: none; }
.fields { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--asphalt); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 0 14px; background: var(--white); border: 2px solid #aab2ad; border-radius: var(--r); color: var(--asphalt); font: inherit; font-size: 1rem; }
.field textarea { min-height: 260px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230f3d2e' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.25); }
.hint { font-size: 0.875rem; color: var(--steel); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 2px solid var(--line); background: var(--white); font-size: var(--fs-sm); cursor: pointer; }
.opt:hover { border-color: var(--green); }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.opt:focus-within { box-shadow: var(--focus); }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--line); }
.result { display: grid; gap: 4px; padding: var(--s-4); background: var(--white); }
.result span { font-size: 0.875rem; color: var(--steel); }
.result output { font-family: var(--f-display); font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result--hero { grid-column: 1 / -1; background: var(--green); }
.result--hero span { color: var(--on-green); }
.result--hero output { color: var(--white); font-size: clamp(2.5rem, 6vw, 3.5rem); }
.status { font-size: 0.875rem; color: var(--steel); }
.status.is-warn { color: #a34a00; font-weight: 700; }
.svc-rows { display: grid; gap: var(--s-4); }
.svc-row { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.svc-row .field--name { grid-column: 1 / -1; }
@media (min-width: 720px) { .svc-row { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)) 44px; align-items: end; } .svc-row .field--name { grid-column: auto; } }
.icon-btn { display: grid; place-items: center; width: 44px; height: 48px; border: 2px solid var(--line); background: var(--white); color: var(--steel); cursor: pointer; }
.icon-btn:hover { border-color: var(--green); color: var(--green); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.dist { display: grid; }
.dist-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 64px; gap: 8px 12px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--line); }
.dist-row .field input { min-height: 44px; text-align: right; }
.dist-name { font-weight: 700; font-size: var(--fs-sm); }
.dist-name small { display: block; font-size: 0.8125rem; color: var(--steel); font-weight: 400; overflow-wrap: anywhere; }
.dist-count { font-family: var(--f-display); font-size: 1.5rem; font-weight: 800; text-align: right; }
.bar-track { grid-column: 1 / -1; height: 8px; background: var(--white); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--green); transition: width 0.15s; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Footer */
.ft { background: var(--asphalt); color: #e4e6e9; font-size: var(--fs-sm); overflow: hidden; }
.ft a { color: #e4e6e9; text-decoration: none; }
.ft a:hover { color: var(--white); text-decoration: underline; }
.ft :focus-visible { outline-color: var(--orange); }
.ft-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 48px 40px; border-bottom: 1px solid var(--line-dark); }
.ft-cta-line { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 0.95; text-transform: uppercase; color: var(--white); max-width: 20ch; }
.ft-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ft-cs { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline !important; text-underline-offset: 0.25em; }
.ft-grid { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 44px 8px; }
.ft-brand { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; max-width: 34ch; }
@media (min-width: 960px) { .ft-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } .ft-brand { grid-column: auto; } }
.ft-logo img { display: block; height: 52px; width: auto; }
.ft-brand p { color: #c3c8cf; }
.ft-place { font-weight: 700; color: var(--white) !important; }
.ft-col h2 { font-family: var(--f-display); font-size: 1.375rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: var(--white); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-dark); max-width: none; }
.ft-col a { display: flex; align-items: center; min-height: 40px; color: #d3d7dc; }
.ft-mark { font-family: var(--f-display); font-weight: 900; font-size: clamp(3.5rem, 15vw, 12.5rem); line-height: 0.8; text-transform: uppercase; color: rgba(255, 255, 255, 0.06); white-space: nowrap; padding-top: 28px; user-select: none; }
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 16px 24px; border-top: 1px solid var(--line-dark); color: #b9bdc4; }
.ft-bottom ul { display: flex; gap: 20px; }
.ft-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: #d3d7dc; }
@media (max-width: 519px) { .ft-cta-btns, .ft-cta-btns .btn { width: 100%; } }

/* Sticky mobile button bar */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--green); border-top: 1px solid var(--line-dark); transform: translateY(110%); visibility: hidden; transition: transform 0.18s, visibility 0s linear 0.18s; }
.sticky-cta.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.has-sticky { padding-bottom: 80px; }
@media (min-width: 900px) { .sticky-cta { display: none; } .has-sticky { padding-bottom: 0; } }

/* Opt-in funnel */
.funnel { background: var(--green); color: var(--white); }
.funnel-top { border-bottom: 1px solid var(--line-dark); }
.funnel-top .wrap { display: flex; justify-content: center; align-items: center; min-height: var(--header-h); }
.funnel-top .logo { margin: 0; }
.funnel-hero { display: grid; justify-items: center; gap: var(--s-4); padding-block: clamp(16px, 3vw, 32px) var(--s-9); text-align: center; max-width: calc(960px + 2 * var(--gutter)); }
.callout { display: inline-block; padding: 4px 12px; background: var(--white); color: var(--green); font-family: var(--f-display); font-size: 1.125rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; }
.funnel .display { max-width: 18ch; margin-inline: auto; }
.funnel .subhead { margin: 0 auto; color: var(--on-green); }
.funnel-video { width: 100%; margin-block: var(--s-4); }
.funnel-video .ph { --ar: 16 / 9; background-color: #23302b; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px); border: 3px solid var(--white); }
.ph-unlocked { display: none !important; }
.is-unlocked .ph-locked { display: none !important; }
.is-unlocked .ph-unlocked { display: flex !important; }
.fine { font-size: 0.875rem; color: var(--on-green); max-width: 52ch; }
.funnel-foot { border-top: 1px solid var(--line-dark); }
.funnel-foot ul { display: flex; justify-content: center; gap: var(--s-5); padding-block: var(--s-4); }
.funnel-foot a { display: flex; align-items: center; min-height: 44px; color: var(--on-green); font-size: var(--fs-sm); }
.modal { width: min(480px, calc(100% - 32px)); padding: 0; border: 0; background: var(--white); color: var(--asphalt); border-top: 8px solid var(--orange); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); }
.modal::backdrop { background: rgba(15, 26, 22, 0.8); }
.modal-inner { position: relative; display: grid; gap: var(--s-5); padding: var(--s-7) var(--s-6) var(--s-6); }
.modal-title { font-family: var(--f-display); font-size: 2rem; font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--green); padding-right: 32px; }
.modal-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--steel); cursor: pointer; }
.modal-close:hover { color: var(--asphalt); }
.modal-close:focus-visible { outline: none; box-shadow: var(--focus); }
.modal form { display: grid; gap: var(--s-4); }
.modal .btn { margin-top: var(--s-2); }
.modal .fine { color: var(--steel); }
.modal .btn-secondary { color: var(--green); border-color: var(--green); }
.modal-done { display: grid; gap: var(--s-4); }
.modal-done[hidden] { display: none; }
.modal-done .ph { --ar: 16 / 9; }

/* Mockup index */
.idx-group + .idx-group { margin-top: var(--s-7); }
.idx-group h2 { font-size: 2rem; margin-bottom: var(--s-3); }
.idx-list { display: grid; gap: var(--s-2); }
.idx-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; min-height: 56px; padding: var(--s-3) var(--s-5); background: var(--white); border: 2px solid var(--line); text-decoration: none; color: var(--asphalt); font-weight: 600; }
.idx-list a:hover { border-color: var(--green); }
.idx-list code { font-size: 0.8125rem; color: var(--steel); font-weight: 400; }

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

/* 3D curved tape divider (decorative). Overlaps the seam between two sections. */
.tape3d { position: relative; z-index: 3; height: clamp(110px, 12vw, 170px); margin-block: clamp(-80px, -6vw, -48px); pointer-events: none; overflow: hidden; }
.tape3d svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tn { font-family: var(--f-display); font-weight: 800; font-size: 22px; fill: #141414; }
.tn.odd { fill: #c4161c; }
.tape3d + .sec, .tape3d + .final, .tape3d + .mosaic-cta { padding-top: calc(var(--sec-y) + 40px); }

/* Homepage: the house. Services are the upper-floor windows, industries the ground floor, the front door is the button. */
.house { background: var(--white); }
.facade { margin-top: var(--s-5); }
.roof { position: relative; height: clamp(90px, 13vw, 180px); margin-inline: -3%; background-color: var(--green); background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 18px); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.chimney { position: absolute; right: 22%; top: 18%; width: clamp(28px, 4vw, 48px); height: 40%; background: var(--steel); }
.wall { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px) 0; background-color: #dfe4df; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 28px); }
.floor { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.window { align-content: start; }
@media (min-width: 900px) { .floor--up { grid-template-columns: repeat(5, minmax(0, 1fr)); } .floor--down { grid-template-columns: 1fr 1fr 1.35fr 1fr; } }
.window { padding: 10px 10px 14px; gap: 10px; background: var(--white); border: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.1); margin-bottom: 14px; }
.window:hover { box-shadow: 0 0 0 3px var(--green); }
.window::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -14px; height: 14px; background: #b5bcb7; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.window .ph { margin: 0; width: 100%; background-color: #23302b; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px); color: var(--asphalt); }
.window .ph::before, .window .ph::after { content: ""; position: absolute; background: var(--white); z-index: 1; }
.window .ph::before { left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; }
.window .ph::after { top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; }
.window .ph > span:last-child { position: relative; z-index: 2; }
.window h3 { font-size: 1.5rem; padding-inline: 4px; }
.window p { font-size: var(--fs-sm); padding-inline: 4px; }
.floor-band { margin: clamp(24px, 3vw, 36px) calc(-1 * clamp(16px, 4vw, 48px)); padding: 10px clamp(16px, 4vw, 48px); background: var(--white); font-family: var(--f-display); font-size: 1.375rem; font-weight: 800; text-transform: uppercase; color: var(--green); border-block: 1px solid rgba(0,0,0,.1); }
.front-door { position: relative; display: grid; align-content: end; gap: var(--s-4); min-height: 100%; padding: 22px 18px 22px; background: var(--green); border: 10px solid var(--white); border-bottom: 0; color: var(--white); box-shadow: inset 0 0 0 6px var(--green), inset 0 0 0 8px rgba(255,255,255,.25); }
.front-door p { font-family: var(--f-display); font-size: 1.5rem; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.front-door .btn { width: 100%; padding: 0 10px; font-size: 1.25rem; }
.knob { position: absolute; right: 16px; top: 46%; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
@media (max-width: 899px) { .front-door { grid-column: 1 / -1; min-height: 220px; order: 3; } }
.foundation { height: 30px; margin-inline: -1%; background: var(--steel); background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 2px, transparent 2px 64px); }
.floor--row { padding-bottom: clamp(24px, 4vw, 48px); }
@media (min-width: 760px) { .floor--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .floor--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.window .ph { aspect-ratio: 4 / 5; }
.collage-card { display: grid; gap: 2px; }
.cc-label { font-size: var(--fs-sm); color: var(--steel); }
.cc-value { font-family: var(--f-display); font-size: 2rem; font-weight: 900; line-height: 1; color: var(--green); }
.window { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.window h3 { overflow-wrap: anywhere; hyphens: auto; }

/* Written testimonials grid */
.reviews { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.review { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--orange); }
.review-stars { color: #b07800; letter-spacing: 2px; font-size: 1.25rem; line-height: 1; }
.review blockquote p { font-size: 1.1875rem; line-height: 1.5; color: var(--asphalt); }
.review .who { font-size: var(--fs-sm); }
/* Brands and websites grid */
.brands { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brand { background: var(--white); border: 1px solid var(--line); text-align: center; transition: border-color .18s; }
.brand:hover { border-color: var(--asphalt); }
.brand-link { display: grid; gap: 6px; padding: var(--s-4); height: 100%; color: inherit; text-decoration: none; }
.brand-name { font-size: 0.9375rem; font-weight: 600; color: var(--asphalt); }
.brand-logo { display: grid; place-items: center; height: 120px; margin-bottom: 4px; }
.brand-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.brand-site { font-size: 0.8125rem; color: var(--steel); overflow-wrap: anywhere; }

/* =====================================================================
   BLUEPRINT THEME (live). Overrides the archived truck-door tokens above.
   Blueprint blue does most of the work, logo red on the primary button,
   Barlow Condensed for lettering, Barlow for reading, IBM Plex Mono for labels.
   ===================================================================== */
:root {
  --green: #1f4f8f; --green-2: #2a5d9f;
  --orange: #d23b30; --orange-2: #b8322a;
  --mist: #f2f3f6; --steel: #4c5366; --asphalt: #1b2030; --line: #dfe2e8;
  --line-dark: rgba(255, 255, 255, 0.25); --on-green: #e2ecf8; --star: #ffd100;
  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --r: 0;
  --bp-grid: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  --bp-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.btn-primary, .btn-primary:hover, .ph-play { color: #fff; }
.btn-primary:hover { background: var(--orange-2); }
.skip { color: #fff; }
.main-grid::before, .final, .mosaic-cta, .article-hero, .page-head, .funnel, .cta-band, .aside-cta { background-color: var(--green); background-image: var(--bp-grid); background-size: var(--bp-size); color: #fff; }
.cta-band .btn-secondary, .final .btn-secondary, .mosaic-cta .btn-secondary, .page-head .btn-secondary, .article-hero .btn-secondary, .aside-cta .btn-secondary { color: #fff; border-color: #fff; }
.hero .ph, .final .ph, .mosaic-cta .ph, .page-head .ph, .article-hero .ph { background-color: #2f62a6; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 11px); }
.trust { background: #fff; color: var(--asphalt); border-bottom: 1px solid var(--line); }
.trust .slot, .trust span { color: var(--steel); }
.trust .stars { color: #b07800 !important; }
.trust-stats li { border-left-color: var(--line); }
.ft { background: #173d70; color: #dbe7f6; }
.ft a { color: #dbe7f6; }
.ft-col h2 { color: #fff; }
.kicker, .crumbs, .eyebrow { font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; }
.eyebrow { border: 1.5px solid #fff; padding: 4px 10px; background: transparent; color: #fff; }
th { background: var(--green); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.review { border-top-color: var(--orange); }
.card, .case, .review, .field input, .field select, .field textarea, .panel, .result, .modal { border-radius: 0; }
.faq-ic { background: var(--orange); }
.trust, .trust strong, .trust b, .trust .stat-num, .trust-stats strong { color: var(--asphalt); }
.trust .logo-slot { color: var(--steel); border-color: #aab2ad; }
.ft .btn-primary, .ft .btn-primary:hover { color: #fff; text-decoration: none; }

/* Trust strip: real stats sit on one line (fix for squeezed labels) */
@media (min-width: 1000px) {
  .trust-inner { grid-template-columns: auto auto minmax(0, 1fr); }
  .trust-stats { grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--s-6); }
}
@media (min-width: 1000px) {
  .trust-inner { grid-template-columns: auto minmax(0, 1fr); }
  .trust-logos { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(96px, 140px)); }
}

/* Step photos (How it works) */
.step-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--line, #d9dde3); }

/* Content-fit hardening: longer real copy must never push a layout wider than the screen */
.btn { max-width: 100%; }
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; line-height: 1.15; padding-block: 10px; }
  .hd .btn { font-size: 1.05rem; padding-inline: 12px; min-height: 44px; max-width: 52vw; }
  .callout { max-width: 100%; }
}
.lc, .lc-in, .lc-out, .lc-foot { min-width: 0; }
h1, h2, h3, .display, .subhead, .lede, .callout { overflow-wrap: anywhere; }

/* A page that ends in its own final CTA does not repeat the ask in the footer band (mobile showed
   two "See how it works" buttons in one screen, three with the sticky bar). */
body:has(main .final) .ft-cta { display: none; }

/* Placeholders filled with real images (scripts/place-images.mjs) */
.ph.ph--img { padding: 0; background: none !important; }
.ph.ph--img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.ph--img > .ph-play { position: relative; z-index: 1; }
.ph.ph--img.ph--logo { background: #fff !important; }
.ph.ph--img.ph--logo > img { object-fit: contain; padding: 14%; }

/* Phones: one "See how it works" per screen. The sticky bar is the mobile ask, so the header copy
   of it hides; a page with its own CTA band does not repeat it in the footer either. */
@media (max-width: 899px) { body:has(.sticky-cta) header .btn { display: none; } }
body:has(main .cta-band) .ft-cta { display: none; }

/* Brands we've worked with: rotating logo carousel (scripts/brands-carousel.mjs) */
.brands-band { padding-block: 28px 32px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); }
.brands-band .brands-title { font-size: clamp(1.25rem, 3.2vw, 1.75rem); line-height: 1.1; max-width: none; text-align: center; margin: 0 0 18px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; list-style: none; margin: 0; padding: 0; animation: brands-marquee 48s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item { flex: 0 0 auto; }
.marquee-item a, .marquee-item span { display: grid; place-items: center; height: 84px; padding: 0 22px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; }
.marquee-item img { display: block; height: 46px; width: auto; max-width: 300px; object-fit: contain; }
@media (min-width: 900px) { .marquee-item a, .marquee-item span { height: 100px; padding: 0 28px; } .marquee-item img { height: 58px; max-width: 360px; } }
@keyframes brands-marquee { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee { overflow-x: auto; } }
/* The mosaic beside "... like you" holds six job photos, two rows of three on a phone */
.mosaic.mosaic--photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .mosaic.mosaic--photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Photos lift off the page (Ben, 2026-10-03): layered shadow, slight radius, small hover lift */
.ph.ph--img { border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 8px 18px -6px rgba(0,0,0,.22), 0 24px 44px -14px rgba(0,0,0,.34); transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { .ph.ph--img:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 14px 26px -8px rgba(0,0,0,.26), 0 34px 60px -18px rgba(0,0,0,.38); } }

/* While a photo loads, its tile shows stone, not a white hole; the jobs grid packs its gaps */
.ph.ph--img:not(.ph--logo) { background-color: #cfc8bd !important; }
.mosaic { grid-auto-flow: dense; }

/* Depth pass 2 (Ben, 2026-10-03: "all images need to pop and be dimensional"): a deeper,
   longer shadow so every photo reads as a print lifted off the page. */
.ph.ph--img { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 20px -6px rgba(0,0,0,.28), 0 30px 56px -16px rgba(0,0,0,.42); }

/* Inner-page heroes carry no photo (Ben, 2026-10-03: "the image does nothing for this section"):
   the copy, bullets and the two buttons take the width at a readable measure. */
.hero-inner:not(:has(.hero-media)) { grid-template-columns: minmax(0, 1fr); }
.hero-inner:not(:has(.hero-media)) .hero-copy { max-width: 820px; }
.hero-inner:not(:has(.hero-media)) .display { max-width: 20ch; }

/* The homepage hero's proof row, now on every page (scripts/hero-proof.mjs) */
.proof-row { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; border: 1.5px solid rgba(255,255,255,.6); list-style: none; padding: 0; }
@media (min-width: 640px) { .proof-row { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
.proof-row li { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-right: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); }
.proof-row b { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1; color: #fff; }
.proof-row span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: #dbe7f6; line-height: 1.3; }
.proof-row .pr-stars { color: #ffd100; font-size: 1rem; letter-spacing: 2px; font-family: Barlow, sans-serif; }
@media (max-width: 639px) { .proof-row .pr-rating { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; gap: 0 10px; } }

/* House windows hold animated demos now, so they need room to read (Ben, 2026-10-03): a two-storey
   house, three windows up and two centred below, at every desktop width (the 5-across row made
   each window 165px). */
@media (min-width: 760px) {
  .floor--row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .floor--row > * { grid-column: span 2; }
  .floor--row > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* Screen order (Ben, 2026-10-03; agencyseov1): the Lucorp Media intro stays under the H1 in the
   source, but on screen it follows the "How ..." section (scripts/intro-order.mjs tags the rest). */
.main-grid { grid-template-areas: "h1" "hero"; }
.main-grid > .intro { grid-area: auto; order: 1; }
.main-grid > .after-intro { order: 2; }
/* The intro band's visible heading comes from CSS, so nothing sits between the H1 and the intro in
   the source (agencyseov1: ".lc-intro::before { content: ... }"). */
.main-grid > .intro { background: var(--mist, #eef2f6); border-top: 1px solid var(--line, #dfe4ec); }
.main-grid > .intro::before { content: "Why owners choose Lucorp Media"; display: block; margin-bottom: .6em; font-family: var(--f-display, "Barlow Condensed", sans-serif); font-weight: 900; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1; text-transform: uppercase; color: var(--green, #1f4f96); }

/* Bullets are hard hats (Ben, 2026-10-03) */
.checks li::before, .ticks li::before { content: ""; width: 20px; height: 20px; margin-top: .15em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.5%2015.5a7.5%207.5%200%200%201%2015%200z%22%20fill%3D%22%23f5b400%22%20stroke%3D%22%231d2533%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%208.6V6.2h4v2.4%22%20fill%3D%22%23ffd34d%22%20stroke%3D%22%231d2533%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%208.2v7.3%22%20stroke%3D%22%231d2533%22%20stroke-width%3D%221%22%20opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2215.5%22%20width%3D%2220%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23f5b400%22%20stroke%3D%22%231d2533%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; clip-path: none; border: 0; transform: none; }
.checks li, .ticks li { grid-template-columns: 26px minmax(0, 1fr); }

/* Pain / frustration / desire callouts are BIG so they stand out (Ben, 2026-10-03) */
.pain-list { gap: 18px; border-top: 0; }
.pain-list li { padding: 22px 24px 22px 26px; border: 0; border-left: 6px solid var(--red, #d6402f); background: var(--mist, #eef2f6); box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); }
.pain-list h3 { font-family: var(--f-display, "Barlow Condensed", sans-serif); font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--green, #1f4f96); }
.pain-list p { font-size: 1.125rem; color: var(--asphalt, #1d2533); }
.pain-list .fix { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(0,0,0,.18); font-weight: 700; color: var(--asphalt, #1d2533); }
.pain-list .fix::before { content: "How we fix it: "; color: var(--red, #d6402f); text-transform: uppercase; letter-spacing: .04em; font-size: .85em; }
/* owner quotes pulled out of the paragraph, large */
.voice { margin: 28px 0; padding: 26px 28px 22px 64px; position: relative; background: var(--green, #1f4f96); color: #fff; box-shadow: 0 16px 32px -18px rgba(0,0,0,.5); }
.voice::before { content: "\201C"; position: absolute; left: 14px; top: -6px; font: 900 6rem/1 Georgia, serif; color: var(--red, #d6402f); }
.voice p { font-family: var(--f-display, "Barlow Condensed", sans-serif); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.08; color: #fff; max-width: none; }
.voice cite { display: block; margin-top: 12px; font: 500 .8rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: #cfe0f5; font-style: normal; }

/* a lone stakes table (no side card) takes the full width */
.stakes > :only-child { grid-column: 1 / -1; }