/*
Theme Name: HS Dumpsters
Theme URI: https://hsdumpsters.com
Author: Studio6 / IHC Media
Author URI: https://ihmholdings.com
Description: Custom WordPress block theme for HS Dumpsters (An A. Patullo Company) — roll-off dumpster rental & demolition in Hunterdon, Somerset & Warren County, NJ. Built from scratch (Beckage method). Brand: HS Red #F50A0B + charcoal + white, Poppins.
Version: 0.7.20
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hs-dumpsters
*/

/* ==========================================================================
   HS Dumpsters — escape-hatch + component CSS
   (Design tokens live in theme.json; this file holds component styling,
   hover states, and block-gap fixes that theme.json can't express.)
   ========================================================================== */

:root {
  /* Fonts */
  --hsd-display: "Anton", "Arial Narrow", system-ui, sans-serif;   /* condensed display headings */
  --hsd-label:   "Oswald", system-ui, sans-serif;                  /* condensed labels / buttons / nav */
  --hsd-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Brand */
  --hsd-red: #F50A0B;
  --hsd-red-dark: #C8070A;
  /* Dark surfaces */
  --hsd-night: #0C0D10;
  --hsd-ink: #141619;
  --hsd-charcoal: #313131;
  /* Light surfaces */
  --hsd-surface: #F4F5F7;
  --hsd-border: #E4E6EB;
  --hsd-muted: #5B6068;
  --hsd-muted-dark: #A6ADB8;              /* muted text on dark backgrounds */
  --hsd-border-dark: rgba(255,255,255,.12);
  --hsd-caution: #FFC400;
}

/* ----- Base ----- */
body { -webkit-font-smoothing: antialiased; color: var(--hsd-ink); }
a { color: var(--hsd-red); }
a:hover { color: var(--hsd-red-dark); }

/* Kill the small block-gap between header / main / footer template parts */
body > * + * { margin-block-start: 0 !important; }
/* …and between the sticky <header>, <main>, and <footer> inside .wp-site-blocks
   (this is the thin line of space that showed between the nav bar and the hero). */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-block-template-part { margin: 0 !important; }

/* ----- Buttons ----- */
.wp-block-button__link,
.btn {
  font-family: var(--hsd-label);
  font-weight: 600;
  border-radius: 6px;
  padding: 0.85em 1.6em;
  line-height: 1.1;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.wp-block-button__link:hover,
.btn:hover { transform: translateY(-1px); }

/* Primary = HS Red */
.is-style-primary .wp-block-button__link,
.btn-primary {
  background: var(--hsd-red);
  color: #fff;
}
.is-style-primary .wp-block-button__link:hover,
.btn-primary:hover { background: var(--hsd-red-dark); color: #fff; }

/* Secondary = ink outline */
.is-style-outline .wp-block-button__link { border: 2px solid var(--hsd-ink); color: var(--hsd-ink); }
.is-style-outline .wp-block-button__link:hover { background: var(--hsd-ink); color: #fff; }

/* ----- Utility bar (top tier) ----- */
.hsd-utility-bar { background: var(--hsd-ink); color: #fff; font-size: .9rem; }
.hsd-utility-bar a { color: #fff; text-decoration: none; }
.hsd-utility-bar a:hover { color: var(--hsd-caution); }
.hsd-utility-bar .hsd-util-phone { font-weight: 600; }
.hsd-utility-bar .wp-block-social-links { gap: 4px; }
.hsd-util-cta .wp-block-button__link { background: var(--hsd-red); color: #fff; padding: .5em 1.1em; border-radius: 4px; font-size: .85rem; }
.hsd-util-cta .wp-block-button__link:hover { background: var(--hsd-red-dark); }
@media (max-width: 700px) { .hsd-utility-bar { font-size: .8rem; } .hsd-utility-bar .wp-block-social-links { display: none; } }

/* ----- Header (main tier) ----- */
/* Kill the default block-gap the wrapper group puts between the utility bar and the
   white nav bar (showed as a vertical gap between the two tiers on desktop). */
.site-header-wrap > * + * { margin-block-start: 0 !important; }
.site-header { background: #fff; border-bottom: 1px solid var(--hsd-border); }
.site-header .site-logo img { max-height: 64px; width: auto; height: auto; }
.primary-nav a {
  font-family: var(--hsd-label);
  font-weight: 600;
  color: var(--hsd-ink);
  text-decoration: none;
}
/* Animated red underline on top-level items (hover / keyboard focus / current page) */
.primary-nav .wp-block-navigation-item__content { position: relative; transition: color .18s ease; }
.primary-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--hsd-red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s ease;
}
.primary-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.primary-nav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after,
.primary-nav .current-menu-item > .wp-block-navigation-item__content::after,
.primary-nav .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--hsd-red); }
/* Don't underline items inside the dropdown panel (they get a fill instead) */
.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
/* Dropdown submenus */
.primary-nav .wp-block-navigation__submenu-container {
  background: #fff; border: 1px solid var(--hsd-border); border-top: 3px solid var(--hsd-red);
  box-shadow: 0 12px 28px rgba(0,0,0,.12); border-radius: 0 0 8px 8px; padding: 6px 0; min-width: 240px;
}
.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 18px; border-left: 3px solid transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease, padding-left .15s ease;
}
.primary-nav .wp-block-navigation__submenu-container a:hover,
.primary-nav .wp-block-navigation__submenu-container a:focus-visible { background: var(--hsd-surface); color: var(--hsd-red); border-left-color: var(--hsd-red); padding-left: 22px; }
.header-phone {
  font-family: var(--hsd-label);
  font-weight: 700;
  color: var(--hsd-ink);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--hsd-red); }

/* Sticky header */
header.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; top: 0; z-index: 100;
}

/* ----- Hero ----- */
.hsd-hero { position: relative; }
.hsd-hero h1 { line-height: 1.05; }

/* ----- Page banner: photo backgrounds by context (dumpster / demolition) -----
   A body_class filter (functions.php §5b) tags the page; here we swap the plain
   surface banner for a photo + dark overlay and flip the title to white. Assets are
   root-relative so they survive the GoDaddy migration. */
.hsd-ctx-dumpster .hsd-page-banner,
.hsd-ctx-demo .hsd-page-banner,
.hsd-ctx-rv .hsd-page-banner {
  position: relative;
  background-color: var(--hsd-ink) !important;
  background-size: cover;
  background-position: center;
}
.hsd-ctx-dumpster .hsd-page-banner {
  background-image: linear-gradient(rgba(18,18,18,.62), rgba(18,18,18,.74)), url('/wp-content/themes/hs-dumpsters/assets/banners/dumpster-banner.jpg');
}
.hsd-ctx-demo .hsd-page-banner {
  background-image: linear-gradient(rgba(18,18,18,.62), rgba(18,18,18,.74)), url('/wp-content/themes/hs-dumpsters/assets/banners/demolition-banner.jpg');
}
.hsd-ctx-rv .hsd-page-banner {
  background-image: linear-gradient(rgba(18,18,18,.62), rgba(18,18,18,.74)), url('/wp-content/themes/hs-dumpsters/assets/banners/rv-banner.jpg');
}
.hsd-ctx-dumpster .hsd-page-banner .wp-block-post-title,
.hsd-ctx-demo .hsd-page-banner .wp-block-post-title,
.hsd-ctx-rv .hsd-page-banner .wp-block-post-title {
  color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

/* ----- Cards (dumpster sizes / services / towns) ----- */
.hsd-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.hsd-card {
  background: #fff;
  border: 1px solid var(--hsd-border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  text-decoration: none;
  color: var(--hsd-ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.hsd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-color: var(--hsd-red);
}
.hsd-card .hsd-card__price { color: var(--hsd-red); font-weight: 800; font-size: 1.5rem; }
.hsd-card .hsd-card__size { font-weight: 700; font-size: 1.15rem; }
.hsd-card .learn-more { margin-top: auto; color: var(--hsd-red); font-weight: 600; }

/* ----- Section helpers ----- */
.hsd-surface { background: var(--hsd-surface); }
.hsd-ink-band { background: var(--hsd-ink); color: #fff; }
.hsd-ink-band :where(h1,h2,h3,p,a) { color: #fff; }

/* ----- FAQ accordion (wp:details) ----- */
.wp-block-details summary {
  font-family: var(--hsd-label);
  font-weight: 700;
  cursor: pointer;
  padding: 14px 0;
  border-bottom: 1px solid var(--hsd-border);
}
.wp-block-details[open] summary { color: var(--hsd-red); }

/* ----- Footer ----- */
.site-footer { background: var(--hsd-ink); color: #fff; }
.site-footer :where(a) { color: #fff; text-decoration: none; }
.site-footer :where(a):hover { color: var(--hsd-caution); }
.site-footer h3 { color: #fff; font-size: 1.05rem; }
.site-footer .footer-logos img { max-height: 44px; width: auto; }

.hsd-card__plus { color: var(--hsd-muted); font-size: .85rem; }
.hsd-card__img { width: 100%; height: 110px; object-fit: contain; margin-bottom: 10px; }

/* Size-page spec showcase — plain dumpster graphic + styled spec tiles */
.hsd-spec-showcase {
  margin: 1.5rem 0 1.25rem;
  background: #fff;
  border: 1px solid var(--hsd-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.hsd-spec-showcase__media {
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, #fff 0%, var(--hsd-surface) 100%);
  border-bottom: 1px solid var(--hsd-border);
}
.hsd-spec-showcase__media img {
  display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto;
}
.hsd-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hsd-border);
}
.hsd-spec {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.15rem 1.35rem;
  background: #fff;
}
.hsd-spec__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(245, 10, 11, .08);
  color: var(--hsd-red);
}
.hsd-spec__icon svg { width: 24px; height: 24px; display: block; }
.hsd-spec__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsd-spec__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hsd-muted);
}
.hsd-spec__value { font-size: 1.08rem; font-weight: 700; color: var(--hsd-ink); line-height: 1.2; }
.hsd-spec-bestfor {
  margin: 0 0 1.5rem;
  padding: .9rem 1.15rem;
  background: var(--hsd-surface);
  border-left: 4px solid var(--hsd-red);
  border-radius: 0 10px 10px 0;
  color: var(--hsd-charcoal);
}
@media (max-width: 600px) { .hsd-spec-grid { grid-template-columns: 1fr; } }

/* ----- Hero ----- */
.hsd-hero {
  position: relative;
  background: var(--hsd-ink);
  background-size: cover;
  background-position: center;
  /* Breathing room above/below the content so the quote form isn't flush to the
     hero's top/bottom edges (esp. on shorter windows where min-height collapses). */
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
/* Keep the left/center (where the headline + subtext sit) solidly dark so the copy stays
   readable; let the photo show through only on the far right. */
.hsd-hero__overlay { background: linear-gradient(90deg, rgba(10,10,10,.97) 0%, rgba(10,10,10,.93) 52%, rgba(10,10,10,.8) 74%, rgba(10,10,10,.55) 100%); }
.hsd-hero h1 { line-height: 1.12; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* Subheading paragraph ("Affordable roll-off dumpster rentals…") — a tight, near-opaque
   halo plus a soft outer shadow so it stays crisp even where it crosses lighter pixels. */
.hsd-hero p { color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,.85); }
/* Subtext: ~30% smaller and lighter than the "large" preset — it was carrying too much weight.
   The preset class sets font-size with !important, so this override needs it too. */
.hsd-hero p.has-large-font-size { font-size: 1.05rem !important; font-weight: 500; line-height: 1.5; }
.hsd-hero .hsd-hero__eyebrow { color: var(--hsd-caution); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* Placeholder image box (where real photos get inserted) */
.hsd-imgbox {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; width: 100%;
  background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 12px, #e6e9ee 12px, #e6e9ee 24px);
  border: 2px dashed #c3c8d0; border-radius: 10px;
  color: #8a909a; font-weight: 600; text-align: center; padding: 16px;
}

/* ----- Quote form ----- */
.hsd-quote-form {
  background: #fff; border-radius: 12px; padding: 24px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 12px;
  max-width: 440px;
}
/* High specificity so the hero's light text color + text-shadow can't bleed into the form (ADA contrast) */
.hsd-quote-form .hsd-form-title { font-family: var(--hsd-label); font-weight: 800; font-size: 1.4rem; margin: 0; color: var(--hsd-ink); text-shadow: none; }
.hsd-quote-form .hsd-form-sub { margin: 0 0 4px; color: var(--hsd-muted); font-size: .95rem; text-shadow: none; }
.hsd-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--hsd-charcoal); }
.hsd-field input, .hsd-field select, .hsd-field textarea {
  box-sizing: border-box;
  font-family: inherit; font-size: 1rem; font-weight: 400;
  padding: 10px 12px; border: 1px solid var(--hsd-border); border-radius: 6px; width: 100%;
}
.hsd-field input:focus, .hsd-field select:focus, .hsd-field textarea:focus { outline: 2px solid var(--hsd-red); border-color: var(--hsd-red); }
.hsd-field-row { display: flex; gap: 12px; }
.hsd-field-row .hsd-field { flex: 1; }
.hsd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.hsd-form-submit { border: 0; cursor: pointer; width: 100%; margin-top: 6px; background: var(--hsd-red); color: #fff; font-weight: 700; padding: 14px; border-radius: 6px; font-size: 1.05rem; }
.hsd-form-submit:hover { background: var(--hsd-red-dark); }
.hsd-form-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-weight: 600; }
.hsd-form-notice--ok { background: #e7f7ec; color: #15803d; border: 1px solid #b6e3c4; }
.hsd-form-notice--err { background: #fdecec; color: #b91c1c; border: 1px solid #f3c2c2; }

/* ----- Hero quote-form fit (scoped to the homepage hero only) -----
   The hero form has ~10 stacked fields. With the hero columns vertically centered,
   a form taller than the headline block pushed the H1/subtext/buttons down — clipping
   the subtext and overflowing the viewport on laptop screens. Fix: top-align the hero
   columns so the headline + subtext always sit at the top, and compact the form (~100px
   shorter) so the whole form fits. Scoped to .hsd-hero so the ~480 other forms (size /
   town / demo / contact pages) are unchanged. */
/* Top-align BOTH the columns container AND each column. WordPress puts
   `is-vertically-aligned-center` (align-self:center) on the individual columns, which
   overrides the container's align-items — so the per-column override is the one that
   actually pulls the form up to the top (was starting ~120px down, dropping the submit
   button below the fold on short laptop windows). */
.hsd-hero .wp-block-columns { align-items: flex-start; }
.hsd-hero .wp-block-column,
.hsd-hero .wp-block-column.is-vertically-aligned-center { align-self: flex-start; }
.hsd-hero .hsd-quote-form { padding: 16px 18px 14px; gap: 7px; }
.hsd-hero .hsd-quote-form .hsd-form-title { font-size: 1.2rem; }
.hsd-hero .hsd-quote-form .hsd-form-sub { font-size: .88rem; margin-bottom: 2px; }
.hsd-hero .hsd-quote-form .hsd-field { gap: 3px; font-size: .8rem; }
.hsd-hero .hsd-quote-form .hsd-field input,
.hsd-hero .hsd-quote-form .hsd-field select,
.hsd-hero .hsd-quote-form .hsd-field textarea { padding: 8px 11px; font-size: .95rem; }
.hsd-hero .hsd-quote-form textarea { min-height: 2.6rem; }
.hsd-hero .hsd-quote-form .hsd-form-submit { padding: 11px; font-size: 1rem; margin-top: 2px; }
/* On short viewports let the hero hug its content instead of forcing 620px */
@media (max-height: 860px) { .hsd-hero { min-height: 0 !important; } }

/* ----- Pricing table ----- */
.hsd-pricing-table { width: 100%; border-collapse: collapse; }
.hsd-pricing-table th, .hsd-pricing-table td { padding: 12px 14px; border-bottom: 1px solid var(--hsd-border); text-align: left; }
.hsd-pricing-table th { background: var(--hsd-surface); font-family: var(--hsd-label); }
.hsd-pricing-note { font-size: .85rem; color: var(--hsd-muted); margin-top: 10px; }

/* ----- 3 steps (clickable cards → quote form) ----- */
.hsd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2.25rem; }
.hsd-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid var(--hsd-border); border-radius: 14px;
  padding: 2.25rem 1.5rem; text-decoration: none; color: var(--hsd-ink);
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hsd-step:hover, .hsd-step:focus-visible {
  transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.12);
  border-color: var(--hsd-red); outline: none;
}
.hsd-step h3 { margin: .35rem 0 .5rem; }
.hsd-step p { color: var(--hsd-muted); margin: 0 0 1.1rem; }
.hsd-step__num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hsd-red); color: #fff; font-weight: 800; font-size: 1.5rem; font-family: var(--hsd-label); margin-bottom: 8px; transition: transform .2s ease; }
.hsd-step:hover .hsd-step__num { transform: scale(1.06); }
.hsd-step__cta { margin-top: auto; color: var(--hsd-red); font-weight: 700; }
.hsd-step:hover .hsd-step__cta { text-decoration: underline; }

/* ----- Split content/image section (e.g. "Real People, Reliable Service") ----- */
.hsd-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .8rem; color: var(--hsd-red); margin: 0 0 .4rem; }
/* Body copy in the split runs long; drop it from the "large" preset to near-body size so the
   text column height balances against the image. (Preset sets size !important → override needs it.) */
.hsd-split p.has-large-font-size { font-size: 1.1rem !important; line-height: 1.6; }
.hsd-split__img { margin: 0; }
.hsd-split__img img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.14); object-fit: cover; }
/* Inline content photo (e.g. demolition project shot) — rounded + soft shadow. */
.hsd-content-photo img { border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.14); width: 100%; height: auto; }

/* ----- Service-area town list (hub page) ----- */
.hsd-area-list { line-height: 2; color: var(--hsd-muted); }
.hsd-area-list a { color: var(--hsd-red); text-decoration: none; font-weight: 500; }
.hsd-area-list a:hover { text-decoration: underline; }

/* ----- Icon service cards (demolition "what we do") ----- */
.hsd-service-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin: 2.5rem 0 1rem;
}
.hsd-service-card {
  background: #fff; border: 1px solid var(--hsd-border); border-radius: 16px;
  padding: 2rem 1.75rem; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hsd-service-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0,0,0,.12); border-color: var(--hsd-red); }
.hsd-service-card__icon {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  background: rgba(245,10,11,.08); color: var(--hsd-red);
}
.hsd-service-card__icon svg { width: 30px; height: 30px; display: block; }
.hsd-service-card h3 { margin: 0 0 .9rem; font-size: 1.25rem; }
.hsd-service-card p { margin: 0; color: var(--hsd-muted); }
.hsd-service-card__list { list-style: none; margin: 0; padding: 0; }
.hsd-service-card__list li {
  position: relative; padding: .5rem 0 .5rem 1.75rem; color: var(--hsd-charcoal);
  border-bottom: 1px solid var(--hsd-border);
}
.hsd-service-card__list li:last-child { border-bottom: 0; }
.hsd-service-card__list li::before {
  content: ""; position: absolute; left: 3px; top: .78rem;
  width: 6px; height: 11px; border: solid var(--hsd-red); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Two-up variant (e.g. Accepted / Not Accepted) + lead paragraph + "not accepted" × markers */
.hsd-service-cards--2 { grid-template-columns: repeat(2, 1fr); }
.hsd-service-card p.hsd-service-card__lead { margin: 0 0 1.1rem; color: var(--hsd-muted); }
.hsd-service-card__list--no li::before {
  content: "\00d7"; border: 0; transform: none; left: 0; top: .18rem;
  width: auto; height: auto; color: var(--hsd-muted);
  font-family: var(--hsd-label); font-weight: 700; font-size: 1.2rem; line-height: 1;
}
@media (max-width: 800px) { .hsd-service-cards, .hsd-service-cards--2 { grid-template-columns: 1fr; } }

/* ----- Demolition town pages: services grid + county directory ----- */
.hsd-demo-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin: 2rem 0;
}
.hsd-demo-svc {
  background: #fff; border: 1px solid var(--hsd-border); border-radius: 12px;
  padding: 1.4rem 1.5rem;
}
.hsd-demo-svc h3 { margin: 0 0 .6rem; font-size: 1.15rem; }
.hsd-demo-svc ul { margin: 0; padding-left: 1.1rem; }
.hsd-demo-svc li { margin: .25rem 0; }
.hsd-demo-area-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2rem; margin-top: 2rem; text-align: left;
}
.hsd-demo-area-col h3 {
  margin: 0 0 .4rem; font-size: 1.05rem; color: var(--hsd-ink);
  border-bottom: 2px solid var(--hsd-red); padding-bottom: .3rem; display: inline-block;
}
@media (max-width: 800px) { .hsd-demo-services { grid-template-columns: 1fr; } }

/* ----- Resource cards (Guide / Checklist) — cover image + download ----- */
.hsd-resource-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
  max-width: 880px; margin: 2rem auto 0;
}
.hsd-resource-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid var(--hsd-border); border-radius: 16px;
  padding: 1.75rem 1.5rem 1.75rem; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hsd-resource-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.hsd-resource-card__cover {
  display: block; width: 72%; max-width: 260px; margin-bottom: 1.25rem; line-height: 0;
  transition: transform .2s ease;
}
.hsd-resource-card__cover:hover { transform: scale(1.02); }
.hsd-resource-card__cover img {
  width: 100%; height: auto; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.hsd-resource-card h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.hsd-resource-card p { margin: 0 0 1.25rem; color: var(--hsd-muted); }
.hsd-resource-card__btn { margin-top: auto; text-decoration: none; background: var(--hsd-red); color: #fff; }
.hsd-resource-card__btn:hover { background: var(--hsd-red-dark); color: #fff; }
@media (max-width: 700px) { .hsd-resource-grid { grid-template-columns: 1fr; max-width: 360px; } }

/* ----- Map graphics (service area / demolition) ----- */
.hsd-map { text-align: center; }
.hsd-map img { max-width: 360px; width: 100%; height: auto; }
.hsd-map figcaption { font-size: .9rem; color: var(--hsd-muted); margin-top: 8px; }

/* ----- "Our Dumpster Can Handle" accept band ----- */
.hsd-accept {
  position: relative; color: #fff;
  background-image: linear-gradient(rgba(26,26,26,.92), rgba(20,20,20,.95)), url('/wp-content/uploads/2026/06/hero.jpg');
  background-size: cover; background-position: center;
}
.hsd-accept :where(h2,p,li) { color: #fff; }
.hsd-accept .hsd-accept__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .8rem; color: var(--hsd-red); margin: 0 0 .3rem; }
.hsd-accept h2 { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 1.6rem; }
.hsd-accept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 48px; }
.hsd-accept-list { list-style: none; margin: 0; padding: 0; }
.hsd-accept-list li {
  position: relative; padding: 9px 0 9px 36px;
  border-bottom: 1px solid rgba(255,255,255,.18); font-weight: 500;
}
.hsd-accept-list li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.55);
}
.hsd-accept-list li::after {
  content: ""; position: absolute; left: 8px; top: calc(50% - 5px);
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ----- Responsive ----- */
@media (max-width: 700px) { .hsd-accept-grid { grid-template-columns: 1fr; gap: 0 0; } }
@media (max-width: 1100px) { .hsd-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .hsd-card-grid { grid-template-columns: repeat(2, 1fr); } .hsd-steps { grid-template-columns: 1fr; } .hsd-field-row { flex-direction: column; } }
@media (max-width: 480px)  { .hsd-card-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   THEME 0.7 — DARK / CONDENSED REDESIGN
   Anton (display) + Oswald (labels) + Inter (body), HS Red accent.
   Appended layer — later rules override earlier component styles where they diverge.
   ========================================================================== */

/* ----- Typography foundation ----- */
body { font-family: var(--hsd-body); color: var(--hsd-ink); font-size: 1.0625rem; line-height: 1.65; }
h1, h2, h3, h4, h5, h6, .wp-block-heading {
  font-family: var(--hsd-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .005em;
}
h1, .wp-block-heading.has-xx-large-font-size { letter-spacing: 0; }
strong, b { font-weight: 700; }
/* "large" preset is used for lead/intro paragraphs — keep it readable, not heading-tight */
p.has-large-font-size { line-height: 1.4; font-weight: 400; }
.hsd-accent { color: var(--hsd-red); }

/* ----- Eyebrow / kicker ----- */
.hsd-eyebrow {
  font-family: var(--hsd-label); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 600; font-size: .8rem; color: var(--hsd-red); margin: 0 0 1rem; display: block;
}
.has-text-align-center .hsd-eyebrow, .hsd-eyebrow.aligncenter { text-align: center; }

/* ----- Buttons (condensed uppercase labels) ----- */
.wp-block-button__link, .btn, .hsd-form-submit {
  font-family: var(--hsd-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; border-radius: 8px;
}
.is-style-outline .wp-block-button__link { border-width: 2px; }
/* Outline buttons sitting on dark backgrounds */
.hsd-dark .is-style-outline .wp-block-button__link,
.hsd-hero .is-style-outline .wp-block-button__link { border-color: rgba(255,255,255,.55); color: #fff; }
.hsd-dark .is-style-outline .wp-block-button__link:hover,
.hsd-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--hsd-ink); }

/* ----- Dark section helper ----- */
.hsd-dark {
  position: relative; background: var(--hsd-night); color: #fff;
  background-image:
    radial-gradient(90% 130% at 88% 0%, rgba(245,10,11,.16), transparent 58%),
    radial-gradient(70% 110% at 0% 100%, rgba(245,10,11,.08), transparent 55%);
}
.hsd-dark :where(h1,h2,h3,h4,h5,h6,p,li,cite,summary,td,th) { color: #fff; }
.hsd-dark :where(p, li) { color: var(--hsd-muted-dark); }
.hsd-dark strong { color: #fff; }
.hsd-dark .hsd-eyebrow { color: var(--hsd-red); }

/* ----- Nav (condensed uppercase) ----- */
.primary-nav a { text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; }

/* ----- Google review pill ----- */
.hsd-review-pill {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: .4rem .45rem .4rem .85rem;
}
.hsd-review-pill:hover { border-color: rgba(255,255,255,.3); }
.hsd-review-pill svg { width: 20px; height: 20px; flex: 0 0 auto; }
.hsd-review-pill__stars { color: #FBBC05; letter-spacing: 1px; font-size: .8rem; }
.hsd-review-pill__txt { color: #fff; font-family: var(--hsd-body); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.hsd-review-pill__cta {
  font-family: var(--hsd-label); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  font-size: .68rem; color: #fff; background: var(--hsd-red); border-radius: 999px; padding: .38rem .8rem; white-space: nowrap;
}
.hsd-review-pill:hover .hsd-review-pill__cta { background: var(--hsd-red-dark); }

/* ----- Stats row ----- */
.hsd-stats { display: flex; flex-wrap: wrap; gap: 2.75rem; margin-top: 2.25rem; }
.hsd-stat__num { font-family: var(--hsd-display); font-size: 2rem; line-height: 1; color: #fff; }
.hsd-stat__num .star { color: var(--hsd-red); }
.hsd-stat__label { font-family: var(--hsd-label); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--hsd-muted-dark); margin-top: .4rem; }

/* ----- Hero (dark, condensed) ----- */
/* Full-height hero (fills the display below the sticky header) */
.hsd-hero { background: var(--hsd-night); min-height: 100vh !important; }
/* Near-black overlay — the bright daytime photo reads only as a faint texture, giving the
   dark/moody hero feel from the inspiration. Subtle red glow top-right.
   NOTE: the cover block's has-background-dim-60 caps the span opacity at .6 — force it to 1
   so the gradient's own alpha controls the darkness. */
.hsd-hero__overlay {
  opacity: 1 !important;
  background:
    radial-gradient(55% 75% at 82% 15%, rgba(245,10,11,.18), transparent 55%),
    linear-gradient(90deg, rgba(9,10,13,.9) 0%, rgba(9,10,13,.86) 55%, rgba(9,10,13,.8) 100%) !important;
}
/* Center the content vertically now that the hero fills the screen */
.hsd-hero .wp-block-columns { align-items: center; }
.hsd-hero .wp-block-column,
.hsd-hero .wp-block-column.is-vertically-aligned-center { align-self: center; }
@media (max-width: 900px) { .hsd-hero { min-height: auto !important; } }
.hsd-hero .hsd-hero__eyebrow {
  font-family: var(--hsd-label); color: var(--hsd-red); text-transform: uppercase;
  letter-spacing: .2em; font-weight: 600; text-shadow: none;
}
.hsd-hero h1 { color: #fff; text-shadow: none; line-height: .96; letter-spacing: 0; font-size: clamp(2.8rem, 5.6vw, 5rem); }
.hsd-hero p { color: var(--hsd-muted-dark); font-weight: 400; text-shadow: none; }
.hsd-hero p.has-large-font-size { color: #E7E9ED; }

/* ----- Component upgrades to display/label fonts ----- */
.hsd-quote-form .hsd-form-title { font-family: var(--hsd-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: 1.6rem; }
.hsd-step__num, .hsd-stat__num { font-family: var(--hsd-display); font-weight: 400; }
/* Prices: Oswald (condensed but legible) at a real bold weight — Anton faux-bold was too cramped to read */
.hsd-card .hsd-card__price { font-family: var(--hsd-label); font-weight: 700; letter-spacing: .01em; }
.hsd-card__size { font-family: var(--hsd-label); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.hsd-spec__value { font-family: var(--hsd-label); font-weight: 600; }
/* FAQ questions stay readable (not display caps) */
.wp-block-details summary { font-family: var(--hsd-body); font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ----- Card refinements (rounder, cleaner) ----- */
.hsd-card, .hsd-service-card, .hsd-step, .hsd-demo-svc, .hsd-resource-card { border-radius: 16px; }

/* ----- Ink band → night + glow (owner note / dark CTA) ----- */
.hsd-ink-band {
  background: var(--hsd-night);
  background-image: radial-gradient(60% 120% at 50% 0%, rgba(245,10,11,.12), transparent 60%);
}

/* ----- Page-banner title sizing (Anton gets big fast) ----- */
.hsd-page-banner .wp-block-post-title { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.02; }

/* ----- Section eyebrow when centered ----- */
.hsd-eyebrow-c { text-align: center; }

@media (max-width: 700px) {
  .hsd-stats { gap: 1.5rem 2rem; }
  .hsd-review-pill__txt { font-size: .74rem; }
}

/* ═══════════ THEME 0.7.9 — hero overlay + glassy hero form (Randy, 2026-07-20) ═══════════ */

/* Lighten the hero overlay a notch so the photo reads more clearly, while keeping enough
   darkness behind the left-hand copy for contrast. (Was .9/.86/.8 + a .18 red glow.)
   Must stay `!important` — it overrides the 0.7.0 rule above, which itself overrides the
   cover block's has-background-dim-60 opacity cap. */
.hsd-hero__overlay {
  background:
    radial-gradient(55% 75% at 82% 15%, rgba(245,10,11,.15), transparent 55%),
    linear-gradient(90deg, rgba(9,10,13,.78) 0%, rgba(9,10,13,.72) 55%, rgba(9,10,13,.62) 100%) !important;
}

/* Glassy hero quote form — slightly transparent so the photo shows through, with a blur +
   heavier shadow so the dark form text keeps its ADA contrast. Scoped to .hsd-hero, so the
   ~480 other forms (size / town / demo / contact / RV pages) stay solid white. */
.hsd-hero .hsd-quote-form {
  background: rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
}
/* Inputs need a solid-ish fill of their own or they'd read as muddy over the photo */
.hsd-hero .hsd-quote-form .hsd-field input,
.hsd-hero .hsd-quote-form .hsd-field select,
.hsd-hero .hsd-quote-form .hsd-field textarea { background: rgba(255,255,255,.96); }

/* ═══════════ THEME 0.7.12 — white hero-form heading/labels (Randy, 2026-07-22) ═══════════ */
/* On the 30%-opacity panel over the dark hero photo, the form title, subtitle, and field
   labels read better in white. Scoped to .hsd-hero ONLY — the identical form on light-bg
   pages (contact / size / town / RV) keeps its dark text. Target the label <span> (not
   .hsd-field itself) so the input TEXT stays dark against its near-white fill. A soft shadow
   keeps the white legible where the panel overlaps the lighter part of the photo. */
.hsd-hero .hsd-quote-form .hsd-form-title,
.hsd-hero .hsd-quote-form .hsd-form-sub,
.hsd-hero .hsd-quote-form .hsd-field > span {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ═══════════ THEME 0.7.13 — RV quote photo upload (Randy, 2026-07-22) ═══════════ */
/* Helper text under the "Photos (optional)" file input on the RV removal forms. */
.hsd-field-hint { display: block; font-weight: 400; font-size: .78rem; line-height: 1.35; color: var(--hsd-muted); margin-top: 3px; }
.hsd-field input[type="file"] { padding: 8px 10px; background: #fff; font-size: .9rem; cursor: pointer; }
.hsd-field input[type="file"]::file-selector-button {
  font-family: var(--hsd-label); font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  font-size: .78rem; color: #fff; background: var(--hsd-red); border: 0; border-radius: 5px;
  padding: 7px 12px; margin-right: 10px; cursor: pointer;
}
.hsd-field input[type="file"]::file-selector-button:hover { background: var(--hsd-red-dark); }

/* ═══════════ THEME 0.7.14 — hero photo brought forward (Randy, 2026-08-26) ═══════════ */
/* Goal: let the dumpster/jobsite photo actually read. Two moves, plus the legibility work
   that has to come with them.
   1) Overlay stepped down again — .78/.72/.62 → .60/.52/.40, red glow .15 → .11.
   2) Hero quote panel taken from 30% → 16% fill; inputs .96 → .88.
   The left-hand copy sits directly ON the dumpster, so dropping the overlay without
   restoring the type's own shadow would repeat the faint-subline problem from 0.7.11.
   Every text shadow below re-enables one that the 0.7.0 dark layer had set to `none` —
   at .60 overlay the type carries its own contrast instead of borrowing the scrim's. */
.hsd-hero__overlay {
  background:
    radial-gradient(55% 75% at 82% 15%, rgba(245,10,11,.11), transparent 55%),
    linear-gradient(90deg, rgba(9,10,13,.60) 0%, rgba(9,10,13,.52) 55%, rgba(9,10,13,.40) 100%) !important;
}

/* Left-column copy: carry its own contrast now that the scrim is lighter. */
.hsd-hero h1 { text-shadow: 0 2px 20px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.5); }
.hsd-hero .hsd-hero__eyebrow { text-shadow: 0 1px 5px rgba(0,0,0,.75); }
/* Was var(--hsd-muted-dark)/#E7E9ED with no shadow — the first thing to go faint. */
.hsd-hero p.has-large-font-size { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.55); }
.hsd-hero .hsd-stat__num { text-shadow: 0 1px 5px rgba(0,0,0,.85); }
.hsd-hero .hsd-stat__label { color: #E7E9ED; text-shadow: 0 1px 4px rgba(0,0,0,.85); }

/* Glass panel: thinner fill, more blur so it still reads as a panel and not a smear. */
.hsd-hero .hsd-quote-form {
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
/* Inputs follow the panel down, but stop well short — their text is dark and has to stay
   ADA-legible against the fill, so .88 is the floor here, not .16. */
.hsd-hero .hsd-quote-form .hsd-field input,
.hsd-hero .hsd-quote-form .hsd-field select,
.hsd-hero .hsd-quote-form .hsd-field textarea { background: rgba(255,255,255,.88); }
/* Panel text sits on less white than before — deepen the existing 0.7.12 shadow a step. */
.hsd-hero .hsd-quote-form .hsd-form-title,
.hsd-hero .hsd-quote-form .hsd-form-sub,
.hsd-hero .hsd-quote-form .hsd-field > span { text-shadow: 0 1px 4px rgba(0,0,0,.75); }

/* ═══════════ THEME 0.7.15 — RV/Boat/Other 4-up "What We Take" (Randy, 2026-08-26) ═══════════ */
/* The page now covers RVs, boats, trailers AND condition, so it needs a 4th card. Scoped to a
   modifier so the 3-up `.hsd-demo-services` on the demolition pages is untouched. */
.hsd-demo-services--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .hsd-demo-services--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .hsd-demo-services--4 { grid-template-columns: 1fr; } }

/* ----- Hero: breathing room + fit on laptop-class desktops (2026-09-03) -----
   Randy: the hero read cramped at 100% zoom and the quote form's submit button plus
   the stats row fell below the fold; he preferred the proportions at ~80% browser zoom.

   Measured cause: the alignwide container is a fixed 1200px, so on a 1580px-wide window
   it filled 76% of the viewport, and the form's bottom edge landed 11px past the fold.
   (1580x795 is very common — a 1920x1080 screen at 125% Windows scaling reports exactly
   that.) On a true 1920px monitor it was already 63% and fitted, which is why the issue
   looked intermittent.

   Fix: track the viewport with 60vw instead of a fixed width, capped at the original
   1200px so very wide monitors do not stretch, and scale the headline and form back
   enough that everything clears the fold. Verified 1580x795, 1600x820, 1920x950,
   2560x1300 — all fit, all 60% (47% at 2560, where the cap takes over).

   Scoped to min-width 1024px: phone and tablet are byte-identical, verified at
   390x844, 768x1024 and 1000x800. */
@media (min-width: 1024px) {
  .hsd-hero .wp-block-columns.alignwide { max-width: min(1200px, 60vw) !important; }

  .hsd-hero h1 { font-size: clamp(2.5rem, 3.8vw, 3.8rem) !important; }

  .hsd-hero .hsd-review-pill { margin-bottom: .5rem; }
  .hsd-hero .hsd-hero__eyebrow { margin-bottom: .35rem; }
  .hsd-hero p.has-large-font-size { font-size: 1rem !important; line-height: 1.45; }

  .hsd-hero .hsd-quote-form { padding: 14px 16px 12px; gap: 6px; }
  .hsd-hero .hsd-quote-form .hsd-form-title { font-size: 1.1rem; }
  .hsd-hero .hsd-quote-form .hsd-field { gap: 2px; font-size: .76rem; }
  .hsd-hero .hsd-quote-form .hsd-field input,
  .hsd-hero .hsd-quote-form .hsd-field select { padding: 7px 10px; font-size: .9rem; }
  .hsd-hero .hsd-quote-form .hsd-form-submit { padding: 10px; font-size: .95rem; }
}

/* ----- Form result dialog (2026-09-03) -----
   Shown after a form POST because the redirect lands the visitor at the top of the
   page while the inline notice sits inside the form — below the fold on /rv-removal/
   and the demolition pages. Native <dialog>, so focus trapping / ESC / inert
   background come from the browser. */
.hsd-result {
  /* Centre in the viewport.
     margin:auto does NOT work here: with inset:0 and a content-sized height the
     auto margins resolve to top:0 and dump the remainder into margin-bottom
     (measured: margin 0px 544px 506px), leaving the card behind the sticky
     header. Transform-based centring does not depend on height resolution. */
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  border: 0; border-radius: 16px; padding: 28px 26px 22px; max-width: 440px; width: calc(100% - 2rem);
  background: #fff; color: var(--hsd-ink); text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.hsd-result::backdrop { background: rgba(9,10,13,.62); backdrop-filter: blur(2px); }
.hsd-result__icon {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1;
}
.hsd-result--ok  .hsd-result__icon { background: #1E9E5A; }
.hsd-result--err .hsd-result__icon { background: var(--hsd-red); }
.hsd-result__title {
  font-family: var(--hsd-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.5rem; margin: 0 0 8px; letter-spacing: .01em;
}
.hsd-result__body { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; color: var(--hsd-muted); }
.hsd-result__body a { color: var(--hsd-red); font-weight: 600; }
.hsd-result__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hsd-result__btn {
  font-family: var(--hsd-label); text-transform: uppercase; letter-spacing: .03em;
  font-size: .92rem; font-weight: 600; padding: 11px 20px; border-radius: 8px;
  border: 1px solid var(--hsd-border); background: #fff; color: var(--hsd-ink); cursor: pointer;
}
.hsd-result__btn:hover { background: #f3f4f6; }
.hsd-result__btn--primary { background: var(--hsd-red); border-color: var(--hsd-red); color: #fff; }
.hsd-result__btn--primary:hover { background: var(--hsd-red-dark); color: #fff; }
@media (max-width: 480px) { .hsd-result { padding: 24px 18px 18px; } }