/* =====================================================================
   Jream Team Junk Removal — faithful rebuild of jreamteamjunk.com
   Display: Alumni Sans (heavy/condensed) · UI/body: Alata · accents: Montserrat italic
   Brand green #4B8511 · bright green #8CC63F · charcoal #363636 · gray #C6C6C6
   ===================================================================== */

:root {
  --green: #4b8511;
  --green-d: #3a690d;
  --green-br: #8cc63f;
  --charcoal: #363636;
  --charcoal-2: #2f2f2f;
  --gray: #c6c6c6;
  --ink: #2b2b2b;
  --muted: #5e5e5e;
  --line: #e2e2e2;
  --white: #fff;
  --maxw: 1180px;
  --font-display: "Bebas Neue", "Alumni Sans", system-ui, sans-serif;
  --font-ui: "Alata", system-ui, sans-serif;
  --font-italic: "Montserrat", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--gray); line-height: 1.6; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 .35em; color: var(--charcoal); }
p { margin: 0 0 1em; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* textured light-gray sections */
.section { padding: 72px 0; position: relative; }
.section--gray {
  background-color: #c6c6c6;
  background-image: radial-gradient(rgba(255,255,255,.5) 1.1px, transparent 1.5px), radial-gradient(rgba(0,0,0,.05) 1.1px, transparent 1.5px);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
.section--dark { background: var(--charcoal); color: #ededed; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.center { text-align: center; }

.section-title { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: .25em; }
.section-sub { font-family: var(--font-ui); font-size: 1.05rem; color: var(--muted); text-transform: none; letter-spacing: 0; margin-bottom: 0; }
.section--dark .section-sub { color: #cfcfcf; }
.accent-italic { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; font-size: clamp(1.05rem, 2vw, 1.5rem); }
.accent-green { color: var(--green-br); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .5px; padding: 13px 30px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; text-decoration: none; }
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.btn svg { width: 18px; height: 18px; }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-d); }
.btn--ogreen { background: transparent; border-color: var(--green); color: var(--green-br); }
.btn--ogreen:hover { background: rgba(75,133,17,.18); }
.btn--white { background: #fff; color: var(--charcoal); }
.btn--white:hover { background: #efefef; }
.btn--lg { padding: 16px 36px; font-size: 1.05rem; }

/* ---------- Top utility bar ---------- */
.topbar { background: var(--charcoal); color: #e6e6e6; font-size: .85rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 18px; flex-wrap: wrap; }
.topbar a { color: #e6e6e6; }
.topbar a:hover { color: #fff; }
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: 8px; }
.topbar svg { width: 14px; height: 14px; fill: var(--green-br); }

/* ---------- Header (green) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, #6f9a2c, #50791a); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 118px; }
.brand img { height: 96px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .5px; color: #fff; }
.nav a:hover { color: #eaffd0; text-decoration: none; }
.nav .btn { padding: 11px 20px; font-size: .95rem; }
.nav a.btn--white { color: var(--charcoal); }
.btn-textus { padding: 9px 22px; gap: 12px; }
.btn-textus svg { width: 24px; height: 24px; }
.btn-textus .tu-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.btn-textus .tu-stack strong { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.btn-textus .tu-stack small { font-size: .82rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; background: #fff; border-radius: 2px; }

/* ---------- Hero: giant logo block ---------- */
.hero-logo {
  background: none;
  text-align: center; padding: 26px 0 30px;
}
.hero-logo img { width: min(620px, 88vw); margin: 0 auto; display: block; }

/* ---------- Hero: dark headline band ---------- */
.hero-band { background: var(--charcoal); color: #fff; text-align: center; padding: 70px 0 78px; }
.hero-band h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); color: #fff; margin-bottom: .3em; }
.hero-band h1 .g { color: var(--green-br); }
.hero-sub { font-family: var(--font-italic); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 1.9vw, 1.4rem); color: #ededed; max-width: 720px; margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- How it works ---------- */
.hiw-head { margin-bottom: 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.step { text-align: center; }
.step-ico { width: 104px; height: 104px; margin: 0 auto 20px; border-radius: 50%; background: var(--green); border: 5px solid #a4d35f; display: grid; place-items: center; }
.step-ico svg { width: 50px; height: 50px; fill: #fff; }
.step h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; font-size: 1.7rem; color: #1f1f1f; margin-bottom: .25em; }
.step p { font-family: var(--font-ui); color: #4a4a4a; font-size: .96rem; margin: 0; }

/* ---------- Checklist (services) ---------- */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 60px; max-width: 820px; margin: 40px auto 0; }
.check-item { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 1.7rem; letter-spacing: .5px; }
.section--dark .check-item { color: #fff; }
.check-item .tick { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.check-item .tick svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3.2; }
.tick--green { background: var(--green); }
.tick--dark { background: var(--charcoal); }
.price-lines { text-align: center; margin-top: 38px; }
.price-lines .accent-italic { display: block; }
.price-lines .nojob { color: #fff; margin-bottom: .35em; }

/* ---------- Quote form (2-col) ---------- */
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.quote-left { text-align: center; }
.quote-left h2 { font-size: clamp(2rem, 4vw, 3rem); }
.quote-left .accent-italic { color: #1f1f1f; display: block; margin-bottom: 26px; }
.quote-left img { width: min(380px, 70%); margin: 0 auto; }
.form-card { background: var(--charcoal); border: 2px solid var(--green); border-radius: 16px; padding: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row.full { grid-column: 1 / -1; }
.form-row label { font-family: var(--font-display); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.form-row input, .form-row select, .form-row textarea { font-family: var(--font-ui); font-size: 1rem; padding: 13px 15px; border: 2px solid var(--green); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.form-row textarea { resize: vertical; min-height: 96px; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--green-br); box-shadow: 0 0 0 3px rgba(140,198,63,.3); }
.dropzone { border: 2px solid var(--green); border-radius: 12px; padding: 26px; text-align: center; color: #cfcfcf; }
.dropzone .circle { width: 56px; height: 56px; border-radius: 50%; background: #fff; margin: 0 auto 12px; }
.dropzone .file-hint { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.dropzone input[type="file"] { color: #cfcfcf; width: 100%; margin-top: 10px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .76rem; color: #d6d6d6; margin-top: 6px; text-transform: uppercase; letter-spacing: .02em; }
.consent input { margin-top: 3px; flex: 0 0 auto; }
.form-card .btn { width: 100%; margin-top: 10px; }
.form-legal { text-align: center; font-size: .76rem; color: #bcbcbc; margin: 12px 0 0; }
.form-legal a { color: var(--green-br); }

/* ---------- Service areas ---------- */
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 8px; }
.area-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; list-style: none; padding: 0; margin: 26px 0 0; }
.area-list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .5px; color: #1f1f1f; }
.area-list svg { width: 22px; height: 22px; fill: var(--green); flex: 0 0 22px; }
.map-embed { width: 100%; height: 380px; border: 3px solid var(--green); border-radius: 8px; }

/* ---------- Contact page bits ---------- */
.cta-band { text-align: center; }
.cta-band h1, .cta-band h2 { color: #fff; }
.cta-band p { color: #dcdcdc; max-width: 620px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-methods { display: grid; gap: 14px; margin-bottom: 24px; }
.cm { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.cm .cm-ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: #eef5e6; display: grid; place-items: center; }
.cm .cm-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 2; }
.cm strong { font-family: var(--font-ui); display: block; color: var(--charcoal); }
.hours-card { background: var(--charcoal); color: #ededed; border-radius: 14px; padding: 24px 26px; }
.hours-card h3 { color: #fff; }
.hours-card .row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .96rem; }
.hours-card .row:last-child { border-bottom: 0; }
.hours-card .closed { color: #ff8d8d; }

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.legal .meta { color: var(--muted); margin-bottom: 1.6em; text-transform: none; font-family: var(--font-ui); }
.legal h2 { font-size: 1.2rem; margin: 1.6em 0 .4em; text-transform: none; letter-spacing: 0; }
.legal p, .legal li { color: #3a3a3a; font-family: var(--font-ui); }
.legal ul { padding-left: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #c9c9c9; padding: 56px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1fr; gap: 30px; }
.site-footer img.flogo { height: 60px; margin-bottom: 14px; }
.site-footer h4 { color: var(--green-br); font-size: 1.15rem; margin-bottom: 14px; }
.site-footer a { color: #c9c9c9; }
.site-footer a:hover { color: #fff; }
.foot-hours .row, .foot-contact p { display: flex; gap: 8px; font-size: .92rem; padding: 3px 0; font-family: var(--font-ui); }
.foot-hours .row { justify-content: space-between; max-width: 210px; }
.foot-contact p { align-items: flex-start; margin: 0 0 8px; }
.foot-contact svg { width: 15px; height: 15px; fill: var(--green-br); flex: 0 0 15px; margin-top: 4px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; }
.footer-socials a:hover { background: var(--green); border-color: var(--green); }
.footer-socials svg { width: 18px; height: 18px; fill: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 42px; padding-top: 20px; text-align: center; font-size: .85rem; color: #9a9a9a; font-family: var(--font-ui); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .nav { position: fixed; top: 96px; left: 0; right: 0; background: #50791a; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; box-shadow: 0 12px 26px rgba(0,0,0,.25); transform: translateY(-150%); transition: transform .3s ease; }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .nav .btn { margin-top: 14px; }

  /* stack: text above the form / above the map, not side by side */
  .quote-grid, .areas-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ========== Animated self-building logo (hero) ========== */
@property --jt-rev { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.jt-logo-anim {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  container-type: inline-size;
  background: radial-gradient(circle at 50% 44%, #dadada 0%, #c2c2c2 58%, #a6a6a6 100%);
}
.jt-logo-anim .jt-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 44%, rgba(233,255,214,0.9) 0%, rgba(150,220,120,0.25) 26%, transparent 50%);
  mix-blend-mode: screen;
  animation: jt-breathe 5s ease-in-out infinite alternate;
}
@keyframes jt-breathe { from { opacity: .55; transform: scale(.96); } to { opacity: .85; transform: scale(1.04); } }
.jt-logo-anim .jt-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.1px, transparent 1.4px);
  background-size: 18px 18px; opacity: .5;
}
.jt-logo-anim .jt-rings { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.jt-logo-anim .jt-rings .r1 { transform-box: view-box; transform-origin: 350px 308px; animation: jt-spin 26s linear infinite; }
.jt-logo-anim .jt-rings .r2 { transform-box: view-box; transform-origin: 350px 308px; animation: jt-spin 34s linear infinite reverse; }
@keyframes jt-spin { to { transform: rotate(360deg); } }
.jt-logo-anim .jt-stage { position: absolute; inset: 6%; animation: jt-float 5s ease-in-out infinite alternate; }
@keyframes jt-float { from { transform: translateY(-1.3%); } to { transform: translateY(1.3%); } }
.jt-logo-anim .jt-mark {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: 50% 44%;
  -webkit-mask-image: conic-gradient(from -90deg at 50% 44%, #000 0deg, #000 var(--jt-rev), transparent var(--jt-rev), transparent 360deg);
          mask-image: conic-gradient(from -90deg at 50% 44%, #000 0deg, #000 var(--jt-rev), transparent var(--jt-rev), transparent 360deg);
  animation: jt-assemble 10s ease-in-out infinite;
  will-change: transform, --jt-rev, opacity;
}
/* Logo unveils itself into place rotationally (recycle motion), holds, loops */
@keyframes jt-assemble {
  0%   { --jt-rev: 0deg;   transform: scale(.92); opacity: 0; }
  5%   { opacity: 1; }
  28%  { --jt-rev: 360deg; transform: scale(1); }
  80%  { --jt-rev: 360deg; transform: scale(1); opacity: 1; }
  90%  { opacity: 0; }
  100% { --jt-rev: 0deg;   transform: scale(.92); opacity: 0; }
}
/* Tracing glow arc that sweeps around as the logo unveils */
.jt-logo-anim .jt-edge {
  position: absolute; inset: 6%;
  -webkit-mask: radial-gradient(circle at 50% 44%, transparent 17%, #000 21%, #000 40%, transparent 45%);
          mask: radial-gradient(circle at 50% 44%, transparent 17%, #000 21%, #000 40%, transparent 45%);
  background: conic-gradient(from -90deg at 50% 44%, transparent 0deg, transparent calc(var(--jt-rev) - 15deg), rgba(150,235,110,.95) var(--jt-rev), transparent var(--jt-rev));
  mix-blend-mode: screen; pointer-events: none;
  animation: jt-edge 10s ease-in-out infinite;
}
@keyframes jt-edge {
  0%   { --jt-rev: 0deg;   opacity: 0; }
  6%   { opacity: .9; }
  28%  { --jt-rev: 360deg; opacity: .9; }
  34%  { --jt-rev: 360deg; opacity: 0; }
  100% { --jt-rev: 360deg; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jt-logo-anim .jt-mark { animation: none; -webkit-mask-image: none; mask-image: none; }
  .jt-logo-anim .jt-edge, .jt-logo-anim .jt-glow, .jt-logo-anim .jt-rings *, .jt-logo-anim .jt-stage { animation: none; }
}

/* ===== Animated logo wrapper (SVG draw-then-fill) ===== */
.jt-wrap { width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; }
.jt-wrap .jtlogo { width: 100%; height: 100%; display: block; }

/* ===== How It Works — animated icons (ported from Version 1) ===== */
.step-ico { background: none; border: 0; width: auto; height: auto; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step-ico svg { width: 180px; height: 180px; max-width: 100%; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* icon entry: flip + bounce + settle, then gentle float */
@keyframes icon-pop {
  0%   { opacity: 0; transform: perspective(700px) rotateY(-110deg) rotateZ(-12deg) scale(.35) translateY(40px); }
  35%  { opacity: 1; transform: perspective(700px) rotateY(25deg) rotateZ(6deg) scale(1.16) translateY(-6px); }
  55%  { transform: perspective(700px) rotateY(-14deg) rotateZ(-4deg) scale(.94); }
  72%  { transform: perspective(700px) rotateY(8deg) rotateZ(2deg) scale(1.06); }
  86%  { transform: perspective(700px) rotateY(-3deg) scale(.99); }
  100% { opacity: 1; transform: perspective(700px) rotateY(0) rotateZ(0) scale(1); }
}
@keyframes icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.step .step-ico svg { opacity: 0; transform-origin: center; overflow: visible; }
.step.in .step-ico svg { animation: icon-pop 1.6s cubic-bezier(.22,.68,.3,1) both, icon-float 4s ease-in-out 1.7s infinite; }
.steps .step:nth-child(2) .step-ico svg { animation-delay: .25s, 1.95s; }
.steps .step:nth-child(3) .step-ico svg { animation-delay: .5s, 2.2s; }

/* nonstop motion inside each icon */
@keyframes hiw-spin { to { transform: rotate(360deg); } }
.hiw-clock .hand-min { transform-box: view-box; transform-origin: 60px 60px; animation: hiw-spin 4s linear infinite; }
.hiw-clock .hand-hour { transform-box: view-box; transform-origin: 60px 60px; animation: hiw-spin 24s linear infinite; }
.hiw-truck .wheel { transform-box: fill-box; transform-origin: center; animation: hiw-spin 1.1s linear infinite; }
@keyframes msgtype { 0%,10% { transform: scaleX(0); } 26%,70% { transform: scaleX(1); } 88%,100% { transform: scaleX(0); } }
.hiw-msg .msg-line { transform-box: fill-box; transform-origin: left center; animation: msgtype 3s ease-in-out infinite; }
.hiw-msg .ml2 { animation-delay: .35s; }
.hiw-msg .ml3 { animation-delay: .7s; }

@media (prefers-reduced-motion: reduce) {
  .step .step-ico svg { opacity: 1; animation: none; }
  .hiw-clock .hand-min, .hiw-clock .hand-hour, .hiw-truck .wheel, .hiw-msg .msg-line { animation: none; }
  .hiw-msg .msg-line { transform: scaleX(1); }
}

/* ========== Mobile layout — stack the grids ========== */
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .checklist { grid-template-columns: 1fr; gap: 16px; max-width: 460px; }
  .quote-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; gap: 26px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; text-align: center; }
  .section { padding: 48px 0; }
  .step-ico svg { width: 160px; height: 160px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .area-list { grid-template-columns: 1fr; }
  .hero-logo img { width: min(440px, 82vw); }
}

/* ===== Mobile hardening (iPhone / small screens) ===== */
html, body { overflow-x: hidden; max-width: 100%; }
img, iframe, .map-embed { max-width: 100%; }

@media (max-width: 880px) {
  /* working menu: show the hamburger, dock the dropdown under the (smaller) header */
  .nav-toggle { display: block; }
  .site-header .container { min-height: 74px; }
  .brand img { height: 54px; }
  .nav { top: 74px; }

  /* top bar: stack the 3 items cleanly instead of wrapping into a mess */
  .topbar .container { flex-direction: column; align-items: center; text-align: center; gap: 4px; min-height: 0; padding: 7px 0; }
  .topbar { font-size: .9rem; }

  /* size things down so nothing overflows or dwarfs the screen */
  .hero-logo img { width: min(420px, 84vw); }
  .hero-band { padding: 44px 0 50px; }
  .section { padding: 46px 0; }
  .check-item { font-size: 1.45rem; gap: 12px; }
  .quote-left img { width: min(300px, 70%); }
  .form-card { padding: 22px; }
  .map-embed, .areas-grid iframe { height: 320px; }
}

@media (max-width: 480px) {
  .brand img { height: 48px; }
  .check-item { font-size: 1.3rem; }
  .hero-band h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .form-card { padding: 18px; }
  .section-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}