/* Morley Towing Services — yellow / black / white, straight off the client's own flyer.
   Backgrounds are only ever yellow, black, or white. Dark orange (#b5441c) is an accent and
   a headline colour on yellow; it is never a background. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/anton.woff2') format('woff2');
}
:root {
  --yellow: #fdd226;
  --yellow-deep: #e6bd1a;
  --yellow-soft: #fdf6dd;
  --black: #0d0d0d;
  --black-2: #191919;
  --black-3: #232323;
  --orange: #bd4c16;
  --orange-deep: #8a3a10;
  --white: #fff;
  --text: #1b1712;
  --muted: #5f574c;
  --line: rgba(13, 13, 13, .15);
  --line-strong: rgba(13, 13, 13, .82);
  --line-dark: rgba(253,210,38, .22);
  --shadow: 0 24px 70px rgba(13, 13, 13, .22);
  --shadow-hard: 6px 6px 0 var(--black);
  --radius: 12px;
  --hazard: repeating-linear-gradient(135deg, var(--black) 0 14px, var(--yellow) 14px 28px);
  --bg-drift: 0px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.58; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, a, span, strong, article, section, div { min-width: 0; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2 { font-family: Anton, "Arial Narrow", Impact, system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
h3 { font-family: Anton, "Arial Narrow", Impact, system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }

/* ---------- header ---------- */
/* White header: the logo ships on a transparent background, so it sits directly on
   white with no backing plate. The black bottom rule keeps the sticky header defined
   as it scrolls over the yellow hero and the white sections below. */
.site-header { position: sticky; top: 0; z-index: 50; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px clamp(16px, 4vw, 56px); background: #fff; border-bottom: 3px solid var(--black); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
/* white backing so the logo's black truck and nameplate don't dissolve into the
   black header/footer; sized by height since the lockup is landscape (350x180) */
.brand-pill { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.brand-logo { width: auto; height: 52px; flex: 0 0 auto; }
.nav-links { display: flex; gap: 24px; color: rgba(13,13,13,.82); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.nav-links a:hover { color: var(--orange); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.phone-link { color: var(--black); font-weight: 900; white-space: nowrap; }
.phone-link:hover { color: var(--orange); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 10px; padding: 0 22px; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .045em; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; text-align: center; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--black); color: var(--yellow); border-color: var(--black); box-shadow: 0 6px 20px rgba(13,13,13,.3); }
.btn.primary:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
/* A black button on a black section is invisible — flip .primary to the yellow
   treatment anywhere it sits on a dark background. */
.subhero .btn.primary, .detail-hero .btn.primary, .contact-hero .btn.primary,
.dark .btn.primary, .introband .btn.primary, .meet-band .btn.primary,
.tips-section .btn.primary, .payments-band .btn.primary, .cta-band .btn.primary,
.mobile-sticky.btn.primary {
  background: var(--yellow); color: var(--black); border-color: var(--yellow); box-shadow: 0 6px 20px rgba(253,210,38,.3);
}
.subhero .btn.primary:hover, .detail-hero .btn.primary:hover, .contact-hero .btn.primary:hover,
.dark .btn.primary:hover, .introband .btn.primary:hover, .meet-band .btn.primary:hover,
.tips-section .btn.primary:hover, .payments-band .btn.primary:hover, .cta-band .btn.primary:hover,
.mobile-sticky.btn.primary:hover { background: #fff; color: var(--black); border-color: #fff; }
.btn.light { background: var(--yellow); color: var(--black); border-color: var(--yellow); box-shadow: 0 6px 20px rgba(253,210,38,.3); }
.btn.light:hover { background: #fff; border-color: #fff; }
.btn.ghost { background: transparent; color: var(--black); border-color: var(--black); }
.btn.ghost:hover { background: var(--black); color: var(--yellow); }
.btn.dark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn.dark-ghost:hover { background: #fff; color: var(--black); border-color: #fff; }
.btn.outline { background: #fff; color: var(--black); border-color: var(--black); }
.btn.outline:hover { background: var(--yellow); }
.menu-toggle { display: none; width: 46px; height: 46px; border: 2px solid var(--black); border-radius: 10px; background: transparent; position: relative; }
.menu-toggle span, .menu-toggle:before, .menu-toggle:after { content: ""; position: absolute; left: 11px; right: 11px; height: 3px; border-radius: 999px; background: var(--black); }
.menu-toggle span { top: 21px; }
.menu-toggle:before { top: 13px; }
.menu-toggle:after { top: 29px; }
.mobile-menu { display: none; }

/* ---------- hero (yellow, per their flyer) ---------- */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - 78px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr); align-items: center; gap: clamp(30px, 5vw, 70px); padding: clamp(42px, 7vw, 92px) clamp(16px, 5vw, 76px); background: var(--yellow); color: var(--text); overflow: hidden; }
.hero > *:not(.road-motion) { position: relative; z-index: 1; }
.road-motion { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glow { position: absolute; top: -20%; right: -8%; width: 58vw; max-width: 620px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,.15) 46%, transparent 68%); transform: translate3d(0, var(--bg-drift), 0); transition: transform .2s ease-out; }
.ring { position: absolute; border-radius: 50%; border: 3px solid rgba(13,13,13,.12); }
.ring-1 { width: 340px; height: 340px; right: 3%; top: -70px; animation: pulse 6s ease-in-out infinite; }
.ring-2 { width: 210px; height: 210px; left: 32%; bottom: -50px; border-color: rgba(181,68,28,.2); animation: pulse 8s ease-in-out infinite 1.2s; }
@keyframes pulse { 0%, 100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.08); opacity: .85; } }
.stripes { position: absolute; top: 0; bottom: 0; left: -12%; width: 26%; background: var(--hazard); opacity: .1; transform: skewX(-14deg); }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(13,13,13,.14)); overflow: hidden; }
.road-dashes { position: absolute; left: 0; bottom: 34px; display: flex; gap: 44px; width: max-content; animation: roadmove 2.4s linear infinite; }
.road-dashes span { display: block; width: 60px; height: 7px; border-radius: 3px; background: rgba(13,13,13,.32); }
@keyframes roadmove { to { transform: translateX(-104px); } }
.sparks { position: absolute; inset: 0; }
.sparks i { position: absolute; left: var(--x); bottom: -24px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, rgba(181,68,28,.6) 46%, transparent 76%); animation: floatUp var(--t) linear infinite; animation-delay: var(--d); }
@keyframes floatUp {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .8; }
  85% { opacity: .45; }
  100% { transform: translate(var(--dx), -112vh); opacity: 0; }
}
/* Their flyer's black banner line, reused as the hero eyebrow */
.flyer-band { display: inline-flex; margin-bottom: 20px; padding: 11px 20px; background: var(--black); color: #fff; font-size: clamp(.74rem, 1.6vw, .92rem); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.hero h1 { color: var(--orange); }
.hero p { color: #241f18; }
.hero h1, .subhero h1, .detail-hero h1, .contact-hero h1 { margin: 0; font-size: clamp(2.9rem, 6.6vw, 5.6rem); line-height: .98; max-width: 16ch; text-wrap: balance; }
.hero p, .subhero p, .detail-hero p, .contact-hero p { font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 660px; }
.subhero p, .detail-hero p, .contact-hero p { color: rgba(255,255,255,.84); }
.eyebrow { display: inline-flex; margin-bottom: 16px; color: var(--orange); font-size: .78rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 900; }
.dark .eyebrow, .cta-band .eyebrow, .subhero .eyebrow, .detail-hero .eyebrow, .contact-hero .eyebrow, .introband .eyebrow, .meet-band .eyebrow, .tips-section .eyebrow, .payments-band .eyebrow, .mission-band .eyebrow { color: var(--yellow); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 34px; max-width: 760px; }
.trust-row span { min-height: 74px; display: flex; align-items: center; padding: 14px 16px; border: 2px solid var(--black); border-radius: var(--radius); background: rgba(255,255,255,.5); color: var(--black); font-weight: 800; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-photo { position: relative; margin: 0; width: 100%; max-width: 560px; border-radius: 18px; overflow: hidden; border: 4px solid var(--black); box-shadow: var(--shadow-hard); }
.hero-photo img { display: block; width: 100%; height: auto; }
.hero-photo-badge { position: absolute; left: 0; bottom: 18px; display: inline-flex; align-items: center; padding: 10px 18px; background: var(--black); color: var(--yellow); font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }

/* ---------- ribbons & marquee ---------- */
.service-ribbon { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px clamp(16px, 5vw, 76px); background: var(--black); border-bottom: 3px solid var(--yellow); }
.service-ribbon span { display: inline-flex; padding: 10px 16px; border: 1px solid rgba(253,210,38,.4); border-radius: 999px; background: rgba(253,210,38,.08); color: var(--yellow); font-weight: 800; }
.makes-band { padding: 34px clamp(16px, 5vw, 76px) 38px; background: #fff; border-bottom: 2px solid var(--line); overflow: hidden; }
.makes-head { text-align: center; margin: 0 0 22px; color: var(--muted); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.make-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.make-track { display: flex; align-items: center; gap: clamp(20px, 4vw, 44px); width: max-content; animation: marquee 38s linear infinite; }
.make-item { display: inline-flex; align-items: center; color: var(--black); font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: .01em; opacity: .42; white-space: nowrap; transition: opacity .2s ease, color .2s ease; }
.make-item:hover { opacity: 1; color: var(--orange); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 116px) clamp(16px, 5vw, 76px); }
.section.soft { background: var(--yellow-soft); }
.section.dark { background: var(--black); color: #fff; }
.section.yellow { background: var(--yellow); }
.section-head { max-width: 900px; margin-bottom: 34px; }
.section h2, .cta-band h2, .estimate-card h2 { margin: 0 0 14px; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.02; text-wrap: balance; color: var(--black); }
.section-head p, .two-col p, .service-card p, .area-card p, .process-grid p, .faq-list p, .stacked-list p, .value-card p, .meet-band p, .tip-card p { color: var(--muted); font-size: 1.03rem; }
/* on-yellow sections: black headline, dark-orange eyebrow, near-black body */
.section.yellow h2 { color: var(--black); }
.section.yellow .eyebrow { color: var(--orange-deep); }
.section.yellow p, .section.yellow .stacked-list p { color: #2a241c; }
.section.yellow .stacked-list article { border: 2px solid var(--black); background: rgba(255,255,255,.44); }
.section.yellow .stacked-list strong { color: var(--black); }
/* on-black sections */
.dark h2, .introband h2, .cta-band h2, .meet-band h2, .tips-section h2, .payments-band h2, .guarantee-band h2 { color: #fff; }
.dark p, .introband p, .meet-band p, .tips-section .section-head p, .payments-band p, .guarantee-band p { color: rgba(255,255,255,.82); }
.card-grid { display: grid; gap: 16px; }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { display: flex; flex-direction: column; padding: 26px 24px 24px; border: 2px solid var(--line); border-radius: 16px; background: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.service-card:hover, .area-card:hover { transform: translateY(-4px); border-color: var(--black); box-shadow: var(--shadow-hard); }
.service-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 14px; background: var(--yellow); border: 2px solid var(--black); color: var(--black); margin-bottom: 18px; }
.svc-icon { width: 30px; height: 30px; }
.service-eyebrow { color: var(--orange); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; }
.service-card h3 { margin: 8px 0 0; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.1; color: var(--black); }
.service-card p { margin: 10px 0 16px; flex: 1; }
.service-more { color: var(--orange); font-weight: 900; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; }
.split, .two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 72px); align-items: center; }
.two-col.meet { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
/* aspect-ratio gives the frame a definite height, so the photo's height:100% resolves
   and the box holds its space before the image loads */
.meet-photo { aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; border: 4px solid var(--black); box-shadow: var(--shadow-hard); background: var(--black); }
.portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.stacked-list { display: grid; gap: 12px; }
.stacked-list article { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: rgba(255,255,255,.05); padding: 22px; }
.stacked-list strong { font-size: 1.2rem; font-weight: 900; }
.stacked-list p { margin: 8px 0 0; }
.introband { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(28px, 6vw, 64px); align-items: center; background: var(--black); color: #fff; }
.introband-tally { display: inline-flex; align-items: center; gap: 16px; margin: 26px 0 6px; flex-wrap: wrap; }
.tally-a { color: rgba(255,255,255,.66); font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 800; }
.tally-arrow { color: var(--yellow); font-size: 1.7rem; font-weight: 900; }
.tally-b { color: var(--yellow); font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-size: clamp(1.35rem, 2.9vw, 2rem); }
.introband-panel { border: 2px solid rgba(253,210,38,.4); border-radius: 16px; background: rgba(253,210,38,.06); padding: clamp(22px, 3vw, 30px); }
.introband-panel-head { display: block; color: var(--yellow); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; margin-bottom: 16px; }
.introband-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.introband-list li { position: relative; padding: 13px 12px 13px 42px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: rgba(255,255,255,.05); color: #f3efe6; font-weight: 700; font-size: .95rem; }
.introband-list li:before { content: ""; position: absolute; left: 14px; top: 50%; width: 15px; height: 9px; margin-top: -6px; border-left: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); transform: rotate(-45deg); }
.meet-band { background: var(--black); color: #fff; }
.meet-band-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 66px); align-items: center; max-width: 1200px; margin: 0 auto; }
.meet-band .meet-photo { border-color: var(--yellow); }
.mission-band { background: var(--black); color: #fff; text-align: center; border-top: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); }
.mission-inner { max-width: 960px; margin: 0 auto; }
.mission-quote { font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.2; color: var(--yellow); margin: 6px 0 0; text-wrap: balance; }

/* ---------- payments (real, from their flyer) ---------- */
.payments-band { padding: clamp(48px, 7vw, 76px) clamp(16px, 5vw, 76px); background: var(--black); border-top: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); }
.payments-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: center; max-width: 1200px; margin: 0 auto; }
.payments-band h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.05; }
.payments-band p { margin: 0; }
.payment-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.payment-chip { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 10px; background: var(--yellow); color: var(--black); font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-size: 1.06rem; letter-spacing: .03em; }

/* ---------- guarantee / always-open band (yellow) ---------- */
.guarantee-band { background: var(--yellow); }
.guarantee-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; max-width: 1000px; margin: 0 auto; }
.guarantee-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(84px, 12vw, 128px); height: clamp(84px, 12vw, 128px); border-radius: 24px; background: var(--black); border: 3px solid var(--black); color: var(--yellow); flex: 0 0 auto; }
.gshield { width: 56%; height: 56%; }
.guarantee-band .eyebrow { color: var(--orange-deep); }
.guarantee-band h2 { color: var(--black); }
.guarantee-band p { color: #2a241c; max-width: 640px; }

/* ---------- values / process / areas ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.value-card { padding: 24px 22px; border: 2px solid var(--line); border-radius: 16px; background: #fff; }
.value-card h3 { margin: 0 0 10px; font-size: 1.22rem; color: var(--black); line-height: 1.12; }
.pill-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; padding: 11px 17px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--black); font-weight: 800; }
.pill:hover { border-color: var(--black); background: var(--yellow); }
.pill-all { background: var(--black); color: var(--yellow); border-color: var(--black); }
.pill-all:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.process-grid article { padding: 24px 22px; border: 2px solid var(--line); border-radius: 16px; background: #fff; }
.process-grid span { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: var(--black); color: var(--yellow); font-family: Anton, "Arial Narrow", Impact, sans-serif; font-size: 1.2rem; }
.process-grid h3 { margin: 16px 0 8px; font-size: 1.24rem; color: var(--black); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- tips (black) ---------- */
.tips-section { background: var(--black); color: #fff; }
.tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tip-card { padding: 26px 24px; border: 1px solid rgba(253,210,38,.3); border-radius: 16px; background: rgba(253,210,38,.06); }
.tip-card h3 { margin: 0 0 10px; font-size: 1.26rem; color: var(--yellow); line-height: 1.14; }
.tip-card p { color: rgba(255,255,255,.8); margin: 0; }

/* ---------- faq ---------- */
.faq-list { display: grid; gap: 10px; max-width: 980px; }
.faq-list details { border: 2px solid var(--line); border-radius: var(--radius); background: #fff; padding: 18px 20px; }
.faq-list details[open] { border-color: var(--black); }
.faq-list summary { cursor: pointer; font-size: 1.06rem; font-weight: 900; color: var(--black); }
.faq-list p { margin: 12px 0 0; }

/* ---------- CTA band ---------- */
.cta-band { margin: 0 clamp(16px, 5vw, 76px) clamp(64px, 9vw, 96px); padding: clamp(28px, 5vw, 56px); border-radius: 20px; background: var(--black); border: 3px solid var(--yellow); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 720px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- inner-page heroes (black) ---------- */
.subhero { padding: clamp(82px, 12vw, 148px) clamp(16px, 5vw, 76px) 58px; background: var(--black); color: #fff; border-bottom: 3px solid var(--yellow); }
.subhero h1, .detail-hero h1, .contact-hero h1 { color: #fff; max-width: 18ch; }
.detail-hero, .contact-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: clamp(28px, 5vw, 62px); align-items: center; padding: clamp(70px, 10vw, 128px) clamp(16px, 5vw, 76px); background: var(--black); color: #fff; border-bottom: 3px solid var(--yellow); }
/* the contact card is much taller than the copy beside it — top-align so the copy
   doesn't float in the middle of a tall empty column */
.contact-hero { align-items: start; }
.detail-hero h1, .contact-hero h1 { max-width: 15ch; }
.detail-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 300px; border-radius: 18px; background: var(--yellow); border: 4px solid var(--yellow); overflow: hidden; }
.detail-visual span { color: var(--black); font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding: 0 20px 34px; font-size: 1.1rem; }
.detail-icon { width: 96px; height: 96px; color: var(--black); margin-top: 40px; }
.detail-photo { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.check-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 15px 15px 15px 46px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); font-weight: 700; }
.check-list li:before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 9px; margin-top: -6px; border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg); }

/* ---------- areas ---------- */
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.area-regions { display: grid; gap: clamp(36px, 5vw, 56px); }
.area-region-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 0 0 20px; font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: var(--black); border-bottom: 3px solid var(--yellow); padding-bottom: 12px; }
.area-region-count { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); font-family: Inter, system-ui, sans-serif; }
.area-card { padding: 24px 22px; border: 2px solid var(--line); border-radius: 16px; background: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.area-card h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--black); }
.area-card p { margin: 10px 0 0; }

/* ---------- contact card ---------- */
.estimate-card { padding: clamp(22px, 4vw, 36px); background: #fff; color: var(--text); border-radius: 20px; border: 4px solid var(--yellow); box-shadow: var(--shadow); }
.estimate-card h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: var(--black); }
.contact-lead { color: var(--muted); margin: 0 0 22px; }
/* .contact-hero p (0,0,1,1) would otherwise wash these out on the white card */
.estimate-card .contact-lead, .estimate-card p { color: var(--muted); }
.estimate-card .form-placeholder-title { color: var(--black); }
.estimate-card .form-placeholder-note { color: var(--muted); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: none; padding-bottom: 0; }
.contact-list span:first-child { color: var(--orange); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; }
.contact-list a, .contact-list li > span:last-child { font-size: 1.06rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--orange); }
.contact-socials { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-socials a { color: var(--orange); text-decoration: underline; }
.form-placeholder { border: 3px dashed var(--black); border-radius: var(--radius); background: var(--yellow); padding: clamp(24px, 4vw, 38px); text-align: center; margin: 0 0 24px; }
/* this card is yellow, so its button must stay black — it sits inside .contact-hero,
   whose dark-background override would otherwise make it yellow-on-yellow */
.estimate-card .form-placeholder .btn.primary { background: var(--black); color: var(--yellow); border-color: var(--black); box-shadow: 0 6px 18px rgba(13,13,13,.28); }
.estimate-card .form-placeholder .btn.primary:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.form-placeholder-tag { display: inline-flex; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px; background: var(--black); color: var(--yellow); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.form-placeholder-title { margin: 0 0 6px; font-family: Anton, "Arial Narrow", Impact, sans-serif; text-transform: uppercase; font-size: 1.4rem; color: var(--black); }
.estimate-card .form-placeholder-note { margin: 0 0 20px; color: #3a3228; font-size: .98rem; }
.form-placeholder-actions { display: grid; gap: 10px; }

/* ---------- footer ---------- */
.footer { display: flex; justify-content: space-between; gap: 30px; padding: 52px clamp(16px, 5vw, 76px); background: var(--black); color: #fff; border-top: 4px solid var(--yellow); }
.footer .brand { width: fit-content; }
.footer .brand-pill { padding: 9px 15px; border-radius: 12px; background: #fff; }
.footer .brand-logo { width: auto; height: 74px; }
.footer p { color: rgba(255,255,255,.62); max-width: 480px; margin-top: 16px; }
.footer-lic { color: var(--yellow); font-size: .82rem; font-weight: 700; }
.footer-social { display: flex; gap: 14px; margin-top: 18px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 2px solid rgba(253,210,38,.42); border-radius: 999px; color: var(--yellow); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.footer-social a:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.social-icon { width: 17px; height: 17px; }
.footer-grid { display: grid; grid-template-columns: repeat(2, max-content); align-content: start; gap: 10px 28px; color: rgba(255,255,255,.8); }
.footer-grid a:hover { color: var(--yellow); }
.mobile-sticky { display: none; opacity: 0; transform: translateY(18px); pointer-events: none; }
.reveal { opacity: 1; transform: none; }

/* ---------- legal ---------- */
.legal-section { max-width: 880px; }
.legal-prose { color: var(--text); }
.legal-prose .updated { color: var(--muted); font-size: .95rem; margin: 0 0 28px; }
.legal-prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.12; margin: 36px 0 12px; color: var(--black); }
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-prose p, .legal-prose li { color: var(--text); font-size: 1.02rem; line-height: 1.7; }
.legal-prose ul { padding-left: 22px; margin: 0 0 14px; display: grid; gap: 6px; }
.legal-prose a { color: var(--orange); text-decoration: underline; }
.legal-prose strong { font-weight: 800; }

@media (max-width: 1040px) {
  .nav-links, .nav-actions { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { position: fixed; inset: 82px 16px auto; z-index: 49; display: grid; gap: 6px; padding: 10px; border: 3px solid var(--black); border-radius: var(--radius); background: var(--yellow); box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: .18s ease; }
  body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .mobile-menu a { padding: 14px; border-radius: 8px; color: var(--black); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
  .mobile-menu a:hover { background: var(--black); color: var(--yellow); }
  .hero, .detail-hero, .contact-hero, .split, .two-col, .two-col.meet, .cta-band, .introband, .meet-band-inner, .payments-inner { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .meet-photo { max-width: 460px; }
  .portrait { max-height: 440px; }
  .card-grid.three, .process-grid, .area-grid, .value-grid, .tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .site-header { min-height: 68px; padding: 10px 12px; }
  .brand { gap: 9px; }
  .brand-logo { width: auto; height: 40px; }
  .footer .brand-pill { padding: 8px 13px; background: #fff; }
  .footer .brand-logo { width: auto; height: 62px; }
  .hero { padding: 34px 12px 48px; gap: 24px; }
  .hero h1, .subhero h1, .detail-hero h1, .contact-hero h1 { font-size: clamp(2.3rem, 9.4vw, 3.3rem); max-width: 15ch; }
  .hero p, .subhero p, .detail-hero p, .contact-hero p { font-size: 1rem; line-height: 1.55; }
  .flyer-band { font-size: .68rem; letter-spacing: .08em; padding: 10px 14px; }
  .hero-actions, .cta-actions, .form-placeholder-actions { display: grid; grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .trust-row, .card-grid.three, .process-grid, .area-grid, .value-grid, .tips-grid, .check-list, .introband-list { grid-template-columns: 1fr; }
  .trust-row span { min-height: 62px; }
  .section, .subhero, .detail-hero, .contact-hero, .payments-band { padding-left: 12px; padding-right: 12px; }
  .section h2, .cta-band h2 { font-size: clamp(2rem, 8.4vw, 2.7rem); }
  .detail-visual { min-height: 240px; }
  .detail-photo { min-height: 240px; }
  .guarantee-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cta-band { margin-left: 12px; margin-right: 12px; margin-bottom: 84px; }
  .footer { display: grid; padding-bottom: 96px; }
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; box-shadow: var(--shadow); transition: opacity .22s ease, transform .22s ease; }
  body.show-mobile-sticky .mobile-sticky { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .sparks, .ring, .road-dashes { display: none; }
  .make-track { animation: none; }
}