/* ============================================================
   MALTC 2026 design layer: "Two sides of the line"
   Loaded after site.css. Restyles the shared components (header, banners, cards,
   forms, footer) and adds the new home page sections (h-*).
   Concrete + asphalt neutrals from the yard, hard-hat amber as the one accent.
   Archivo (variable width) condensed for signage-style display type.
   ============================================================ */

:root[data-theme="light"], :root {
  --ink: #f1f0eb;          /* concrete page ground */
  --ink-2: #e7e5de;
  --panel: #ffffff;
  --panel-2: #f7f6f2;
  --panel-3: #e4e2db;
  --line: #d3d0c7;
  --line-2: #e2dfd7;
  --bone: #15171a;
  --text: #3f4247;
  --muted: #61656b;
  --faint: #8b9096;
  --asphalt: #101214;
  --asphalt-2: #1a1d20;
  --amber: #ffb200;
  --amber-2: #ffc233;
  --amber-deep: #b37a00;
  --ink-amber: #9a6800;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --radius: 0px;
  --radius-lg: 0px;
  --wrap: 1240px;
  --shadow: none;
}

body { background: var(--ink); background-image: none; font-size: 18px; line-height: 1.55; }

/* ---------- type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 72%;
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(3.4rem, 9vw, 8.2rem); }
h2, .h2 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
h3, .h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: 0; }
.kicker {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-amber);
}
.lead { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }

/* ---------- buttons and links ---------- */
.btn {
  font-family: var(--font-display); font-weight: 800; font-stretch: 90%;
  letter-spacing: 0.01em; font-size: 1.02rem;
  padding: 1.02em 1.6em; border-width: 2px;
}
.btn:hover { transform: none; box-shadow: none; }
.btn--ghost { --fg: var(--bone); border-color: var(--bone); }
.btn--ghost:hover { background: rgb(21 23 26 / 0.06); border-color: var(--bone); transform: none; }
.textlink {
  font-family: var(--font-body); font-size: 1rem; font-weight: 800;
  letter-spacing: 0; text-transform: none;
  color: var(--bone); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; border: 0;
}
.textlink:hover { color: var(--ink-amber); }
[data-theme="light"] .textlink { color: var(--bone); }
[data-theme="light"] .textlink:hover { color: var(--ink-amber); }

/* ---------- header ---------- */
.site-header, [data-theme="light"] .site-header { background: #fff; border-bottom: 1px solid var(--line); }
.brand-logo { height: 62px; }
.nav-links a { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--bone); }
.nav-links a::after { background: var(--amber); height: 3px; }
.nav-phone { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; color: var(--bone); }
@media (max-width: 560px) { .brand-logo { height: 48px; } }

/* ---------- hazard stripes off: the new look is quieter ---------- */
.hazard, .band::before, .site-footer::before { display: none; }

/* ---------- inner page banner ---------- */
.page-banner { padding: clamp(150px, 22vw, 300px) 0 clamp(44px, 6vw, 72px); border-bottom: 0; background: var(--asphalt); }
.page-banner .bg img { filter: none; }
.page-banner .bg::after { background: linear-gradient(180deg, rgb(16 18 20 / 0.12) 0%, rgb(16 18 20 / 0.4) 45%, rgb(16 18 20 / 0.92) 100%); }
.page-banner h1, [data-theme="light"] .page-banner h1 { color: #fff; max-width: 14ch; font-size: clamp(3.4rem, 9vw, 7.6rem); }
.page-banner .kicker, [data-theme="light"] .page-banner .kicker { color: var(--amber); }
.page-banner .lead, [data-theme="light"] .page-banner .lead { color: #e3e5e7; }
.breadcrumb, [data-theme="light"] .breadcrumb { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: #c5c9cd; }
[data-theme="light"] .breadcrumb .sep { color: #8b9096; }

/* ---------- sections, cards, media ---------- */
.section-head h2 { margin: 0.4rem 0 1rem; }
.card, [data-theme="light"] .card {
  background: #fff; border: 0; border-top: 3px solid var(--bone); box-shadow: none; padding: 30px 28px 28px;
}
.card::before { display: none; }
.card:hover { transform: none; background: #fff; border-top-color: var(--amber); }
.card .num { font-family: var(--font-display); font-stretch: 72%; font-weight: 850; font-size: 1.4rem; letter-spacing: 0; color: var(--ink-amber); }
.card h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.media { border: 0; }
.media img { filter: none; }
.media::after { display: none; }
.media .tag { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; background: var(--amber); color: var(--asphalt); border: 0; backdrop-filter: none; }
[data-theme="light"] .media .tag { color: var(--asphalt); }
.flist h4 { font-family: var(--font-display); font-stretch: 80%; font-weight: 850; font-size: 1.4rem; }
.checks li::before { border-radius: 0; background-color: var(--amber); border-color: var(--amber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101214' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* stat band: big amber numbers on asphalt */
.statband, [data-theme="light"] .statband { background: var(--asphalt); border: 0; }
.stat { border-color: rgb(255 255 255 / 0.14) !important; }
.stat .n, [data-theme="light"] .stat .n { font-family: var(--font-display); font-weight: 850; font-stretch: 72%; color: var(--amber); font-size: clamp(3rem, 5vw, 4.6rem); }
.stat .l { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #c5c9cd; }
.stat .d { color: #aeb3b8; }

/* scrolling discipline strip */
.strip-item { font-family: var(--font-display) !important; font-weight: 850; font-stretch: 72%; }

/* ---------- dark safety band stays a photo block ---------- */
.band--photo .flist li { border-bottom-color: rgb(255 255 255 / 0.16); }
.band--photo .kicker { color: var(--amber); }

/* ---------- amber CTA ---------- */
.cta { background: var(--amber); }
.cta::before { opacity: 0.1; }
.cta h2 { font-size: clamp(3rem, 7vw, 6.4rem); max-width: 14ch; }
.cta .kicker, [data-theme="light"] .cta .kicker { color: var(--asphalt); }
.cta .btn { --bg: var(--asphalt); --fg: #fff; }
.cta .btn--ghost { --bg: transparent; --fg: var(--asphalt); border-color: var(--asphalt); }
.cta .btn--ghost:hover { background: rgb(16 18 20 / 0.08); }

/* ---------- forms ---------- */
.form, [data-theme="light"] .form { background: #fff; border: 0; border-top: 3px solid var(--bone); box-shadow: none; }
.form label, legend, [data-theme="light"] legend { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--bone); }
.form input, .form select, .form textarea { background: var(--panel-2); border: 1px solid var(--line); font-size: 1.02rem; padding: 15px 16px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--bone); box-shadow: 0 0 0 3px rgb(255 178 0 / 0.4); }
.form .resp { font-family: var(--font-body); font-weight: 600; }
fieldset { border-color: var(--line); }
.infocard, [data-theme="light"] .infocard { background: #fff; border: 0; border-top: 3px solid var(--bone); box-shadow: none; }
.infocard .label { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); }
.infocard .big { font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: 2rem; }

/* application wizard */
[data-theme="light"] .app-panel { background: #fff; border: 0; border-top: 3px solid var(--bone); box-shadow: none; }
.app-prog-segs i.active, .app-prog-segs i.done { background: var(--amber); }
.app-chips span { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-weight: 700; }

/* video */
.videoblock video { border: 0; }
.video-cap { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; text-transform: none; }

/* ---------- footer: asphalt, white logo ---------- */
.site-footer, [data-theme="light"] .site-footer { background: var(--asphalt-2); border-top: 0; color: #aeb3b8; }
.site-footer .foot-brand p, .foot-col a, .foot-contact .line, .foot-bayside p, .foot-legal { color: #aeb3b8; }
.foot-col h4 { font-family: var(--font-body); font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #fff; }
.foot-col a:hover, .foot-legal a:hover { color: var(--amber); }
.foot-contact svg, [data-theme="light"] .foot-contact svg { color: var(--amber); }
.foot-bayside, .foot-legal { border-top-color: rgb(255 255 255 / 0.12); }
.foot-bayside strong { color: #fff; }
.foot-legal { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; }

/* ============================================================
   Home page sections
   ============================================================ */

.h-hero { position: relative; min-height: min(90svh, 860px); display: flex; align-items: flex-end; color: #fff; background: var(--asphalt); overflow: hidden; }
.h-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.h-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(16 18 20 / 0.15) 0%, rgb(16 18 20 / 0.35) 45%, rgb(16 18 20 / 0.92) 100%); }
.h-hero .wrap { position: relative; z-index: 1; padding-block: 120px 64px; }
.h-hero h1 { color: #fff; font-size: clamp(64px, 12.5vw, 184px); max-width: 9.5em; }
.h-hero h1 span { color: var(--amber); }
.h-hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 30px; align-items: end; }
.h-hero p { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; color: #e3e5e7; max-width: 30em; }
.h-bayside-tag { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 15px; color: #c5c9cd; }
.h-bayside-tag::before { content: ""; width: 26px; height: 3px; background: var(--amber); }
.h-hero .btn--ghost { --fg: #fff; border-color: rgb(255 255 255 / 0.75); }
.h-hero .btn--ghost:hover { background: rgb(255 255 255 / 0.1); border-color: #fff; }
@media (min-width: 900px) { .h-hero-row { grid-template-columns: minmax(0, 6fr) auto; gap: 48px; } }

.h-sides-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 44px; }
.h-sides-head h2 { font-size: clamp(44px, 6.4vw, 92px); max-width: 9em; }
.h-sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .h-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-side { position: relative; display: flex; flex-direction: column; min-height: 620px; overflow: hidden; color: #fff; background: var(--asphalt); }
.h-side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.h-side:hover > img { transform: scale(1.04); }
.h-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(16 18 20 / 0.1) 20%, rgb(16 18 20 / 0.9) 78%); }
.h-side-body { position: relative; z-index: 1; margin-top: auto; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.h-side-label { align-self: flex-start; padding: 6px 12px; background: var(--amber); color: var(--asphalt); font-weight: 800; font-size: 14px; font-stretch: 90%; text-transform: uppercase; }
.h-side h3 { color: #fff; font-size: clamp(42px, 4.6vw, 64px); }
.h-side p { color: #d8dbde; max-width: 30em; }
.h-side ul { margin: 0; padding: 0; display: grid; border-top: 1px solid rgb(255 255 255 / 0.2); }
.h-side li { padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / 0.2); font-weight: 700; font-size: 17px; }
.h-side li a { text-decoration: none; }
.h-side li a:hover { color: var(--amber); }
.h-side .textlink { color: var(--amber); margin-top: 6px; }

.h-climb { background: var(--asphalt); color: #fff; }
.h-climb-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 72px; }
.h-climb-head h2 { color: #fff; font-size: clamp(44px, 6.4vw, 92px); }
.h-climb-head p { color: #c5c9cd; font-size: 20px; max-width: 30em; }
@media (min-width: 900px) { .h-climb-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 64px; } }
.h-pole { position: relative; margin: 0; padding: 0 0 0 64px; display: grid; gap: 56px; }
.h-pole::before { content: ""; position: absolute; left: 18px; top: -24px; bottom: -40px; width: 12px; background: linear-gradient(90deg, #6b4a2c, #8a6440 45%, #5a3d23); border-radius: 3px; }
.h-rung { position: relative; display: grid; gap: 8px; align-content: start; align-self: start; }
.h-rung::before { content: ""; position: absolute; left: -64px; top: 14px; width: 54px; height: 10px; background: #7b5836; border-radius: 2px; }
.h-rung::after { content: ""; position: absolute; left: -51px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px rgb(255 178 0 / 0.18); }
.h-rung-no { font-weight: 850; font-stretch: 72%; font-size: 22px; color: var(--amber); }
.h-rung h3 { color: #fff; font-size: clamp(34px, 4vw, 54px); line-height: 0.95; }
.h-rung p { color: #c5c9cd; max-width: 28em; }
@media (min-width: 900px) {
  .h-pole { padding: 0; grid-template-columns: 1fr 1fr; column-gap: 140px; row-gap: 40px; }
  .h-pole::before { left: 50%; margin-left: -7px; }
  .h-rung:nth-child(odd) { grid-column: 1; text-align: right; justify-items: end; }
  .h-rung:nth-child(even) { grid-column: 2; margin-top: 120px; }
  .h-rung:nth-child(odd)::before { left: auto; right: -70px; }
  .h-rung:nth-child(even)::before { left: -70px; }
  .h-rung:nth-child(odd)::after { left: auto; right: -81px; }
  .h-rung:nth-child(even)::after { left: -81px; }
}

.h-cinema-frame { position: relative; overflow: hidden; background: #000; aspect-ratio: 1280 / 502; }
.h-cinema-frame video { width: 100%; height: 100%; object-fit: cover; }
.h-cinema-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-top: 24px; }
.h-cinema-cap h2 { font-size: clamp(36px, 4.6vw, 64px); }
.h-cinema-cap p { color: var(--text); max-width: 26em; }

.h-svc { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--bone); }
.h-svc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 32px; border-bottom: 1px solid var(--line); text-decoration: none; }
.h-svc-row img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.h-svc-row h3 { font-size: clamp(34px, 3.8vw, 52px); line-height: 0.95; margin-bottom: 10px; }
.h-svc-row p { color: var(--text); max-width: 32em; }
.h-svc-row .go { font-weight: 800; color: var(--ink-amber); }
.h-svc-row:hover h3 { color: var(--ink-amber); }
@media (min-width: 900px) { .h-svc-row { grid-template-columns: 280px minmax(0, 1fr) auto; align-items: center; gap: 40px; } .h-svc-row img { aspect-ratio: 4 / 3; } }

.h-safety { background: var(--amber); color: var(--asphalt); }
.h-safety-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.h-safety h2 { color: var(--asphalt); font-size: clamp(44px, 6.4vw, 92px); }
.h-safety h2 span { display: block; color: #6b4a00; }
.h-safety-items { display: grid; border-top: 2px solid var(--asphalt); }
.h-safety-items div { padding: 22px 0; border-bottom: 1px solid rgb(16 18 20 / 0.25); }
.h-safety-items h3 { color: var(--asphalt); font-stretch: 80%; font-size: 26px; }
.h-safety-items p { margin-top: 6px; color: #3d2c00; }
@media (min-width: 900px) { .h-safety-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; } }

.h-bayside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.h-bayside img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.h-bayside .body { display: flex; flex-direction: column; gap: 20px; }
.h-bayside h2 { font-size: clamp(40px, 5vw, 72px); }
.h-bayside p { color: var(--text); max-width: 32em; }
.h-bayside .btn { --bg: var(--asphalt); --fg: #fff; border-color: var(--asphalt); }
@media (min-width: 900px) { .h-bayside { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; } }

.h-final { position: relative; color: #fff; background: var(--asphalt); overflow: hidden; }
.h-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.h-final .wrap { position: relative; padding-block: 150px; display: flex; flex-direction: column; gap: 26px; }
.h-final h2 { color: #fff; font-size: clamp(56px, 10vw, 150px); max-width: 8em; }
.h-final p { color: #e3e5e7; font-size: 21px; max-width: 30em; }
.h-final .btn--ghost { --fg: #fff; border-color: rgb(255 255 255 / 0.75); }

@media (prefers-reduced-motion: reduce) { .h-side > img { transition: none; } }