/* Homepage composition. Shared tokens and components stay in the approved design system. */
.home-page {
  --home-dark: var(--ds-neutral-900);
  --home-muted-dark: var(--ds-neutral-200);
  --home-line-dark: rgb(246 243 236 / .18);
  --home-photo-position: 58% center;
}

.home-page :where(section[id], #bao-gia-nhanh, #dat-lich) { scroll-margin-block-start: 6.25rem; }
.home-page svg:not(.home-symbols) { flex-shrink: 0; }
.home-symbols { position: absolute; }
.home-page :is(.home-topbar, .home-header, .home-hero, .home-footer) :focus-visible { outline-color: var(--ds-focus-on-dark); }
.home-page :is(.home-quick, .home-mega-panel, .home-final-panel) :focus-visible { outline-color: var(--ds-focus); }
.home-page a[aria-disabled="true"] { cursor: default; text-decoration: none; }

.home-topbar {
  color: var(--ds-cream);
  background: var(--home-dark);
  border-block-end: 1px solid var(--home-line-dark);
  font-size: var(--ds-type-caption);
}
.home-topbar-inner, .home-topbar-contact, .home-topbar-location, .home-topbar-contact > :is(a, span) {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
}
.home-topbar-inner { justify-content: space-between; min-height: 2.6rem; }
.home-topbar-contact { gap: var(--ds-space-3); }
.home-topbar svg { inline-size: 1rem; block-size: 1rem; color: var(--ds-primary-400); }
.home-topbar a { text-decoration: none; }
.home-topbar a[href]:hover { text-decoration: underline; }

.home-page .home-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--ds-neutral-700);
  border-block-end: 1px solid var(--home-line-dark);
}
.home-page .home-header-inner {
  display: flex;
  min-height: 5rem;
  gap: clamp(.5rem, 1.25vw, 1.25rem);
  transition: min-height var(--ds-motion-standard) var(--ds-ease);
}
.home-page .is-compact .home-header-inner { min-height: 3.8rem; }
.home-brand { display: inline-flex; flex-shrink: 0; align-items: center; }
.home-brand img { width: clamp(7rem, 11vw, 10rem); }
.home-page .home-nav { display: flex; flex-wrap: nowrap; gap: clamp(.55rem, 1.15vw, 1.15rem); margin-inline: auto; }
.home-page .home-nav > a, .home-mega > summary {
  white-space: nowrap;
  font-size: clamp(.72rem, .93vw, .875rem);
  font-weight: 700;
}
.home-mega { position: relative; }
.home-mega > summary { display: flex; gap: .2rem; align-items: center; cursor: pointer; list-style: none; }
.home-mega > summary::-webkit-details-marker { display: none; }
.home-mega > summary svg { width: 1rem; height: 1rem; }
.home-mega[open] > summary svg { rotate: 180deg; }
.home-mega-panel {
  position: absolute;
  inset-block-start: calc(100% + .9rem);
  inset-inline-start: -2rem;
  width: min(39rem, calc(100vw - 3rem));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-1);
  padding: var(--ds-space-2);
  color: var(--ds-ink);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-3);
}
.home-page .home-mega-panel a {
  display: flex;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  white-space: normal;
}
.home-page .home-mega-panel a:hover { background: var(--ds-primary-100); text-decoration: none; }
.home-mega-panel a > svg { width: 1.25rem; height: 1.25rem; }
.home-mega-panel small { display: block; margin-block-start: .25rem; color: var(--ds-muted); }
.home-mega-all { grid-column: 1 / -1; border-block-start: 1px solid var(--ds-line); }
.home-page :is(.home-search, .home-header-cta) { flex-shrink: 0; min-height: 2.5rem; font-size: .82rem; }
.home-page .home-search { width: 2.5rem; }
.home-page .home-menu-toggle { display: none; }

.home-hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  color: var(--ds-cream);
  background: var(--home-dark);
}
.home-page .home-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--home-photo-position);
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(28 32 35 / .98) 0%, rgb(28 32 35 / .88) 34%, rgb(28 32 35 / .43) 68%, rgb(28 32 35 / .26) 100%);
}
.home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  min-block-size: min(44rem, calc(100svh - 7rem));
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.home-hero-copy { display: grid; gap: var(--ds-space-2); }
.home-hero-copy .ds-eyebrow { color: var(--ds-cream); }
.home-hero-copy .ds-type-display { font-size: clamp(2.65rem, 4.7vw, 4.75rem); }
.home-hero-copy > p:not(.ds-eyebrow) { max-inline-size: 49ch; color: var(--home-muted-dark); font-size: var(--ds-type-body); }
.home-hero-actions { margin-block: var(--ds-space-1); }
.home-page .home-hero-zalo { --ds-button-bg: var(--ds-cream); }
.home-hero-note { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--ds-type-caption); font-weight: 700; }
.home-hero-note svg { width: 1.15rem; height: 1.15rem; color: var(--ds-primary-400); }
.home-quick {
  align-self: center;
  justify-self: end;
  width: min(100%, 28rem);
  padding: clamp(1.25rem, 2.7vw, 2rem);
  color: var(--ds-ink);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-3);
}
.home-quick h2 { margin-block: .2rem var(--ds-space-2); font-size: var(--ds-type-h3); }
.home-form-kicker { font-size: var(--ds-type-caption); font-weight: 800; }
.home-page :is(.home-quick-form, .home-final-form) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-1) var(--ds-space-2); }
.home-quick-form > button, .home-final-form > button { justify-self: stretch; }
.home-form-note { color: var(--ds-muted); font-size: var(--ds-type-caption); }
.home-page .form-status { color: var(--ds-success-ink); }

.home-metrics { background: var(--ds-neutral-800); color: var(--ds-cream); }
.home-metrics-grid, .home-promise-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-metrics-grid > div, .home-promise-grid > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: .3rem;
  padding: var(--ds-space-3) var(--ds-space-2);
}
.home-metrics-grid > div + div { border-inline-start: 1px solid var(--home-line-dark); }
.home-metrics-grid strong { color: var(--ds-primary-300); font-size: var(--ds-type-h3); line-height: 1.2; }
.home-metrics-grid > div > span { font-size: var(--ds-type-caption); }
.home-promises { background: var(--ds-white); border-block-end: 1px solid var(--ds-line); }
.home-promise-grid > div { grid-template-columns: auto 1fr; align-items: center; gap: var(--ds-space-1); }
.home-promise-grid svg { color: var(--ds-ink); padding: 3px; border-radius: 50%; background: var(--ds-primary-200); }
.home-promise-grid strong { font-size: .88rem; line-height: 1.4; }

.home-page .home-intro { max-inline-size: 48rem; }
.home-lead { color: var(--ds-muted); }
.home-page :is(.ds-section--dark, .home-footer) .home-lead { color: var(--home-muted-dark); }
.home-services {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ds-grid-gap);
}
.home-service { display: grid; grid-template-columns: 1.03fr 1fr; min-width: 0; }
.home-service--1, .home-service--4 { grid-column: span 7; }
.home-service--2, .home-service--3 { grid-column: span 5; }
.home-page .home-service .ds-card-media img {
  width: 100%;
  height: 100%;
  min-height: 13rem;
  aspect-ratio: unset;
  object-fit: cover;
}
.home-service-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--ds-primary-200);
  border-radius: var(--ds-radius-sm);
}
.home-service-icon svg { width: 1.25rem; height: 1.25rem; }
.home-service-price { font-weight: 800; }
.home-note { margin-block-start: var(--ds-space-2); color: var(--ds-muted); font-size: var(--ds-type-caption); }

.home-workshop { background: var(--ds-neutral-800); }
.home-workshop-intro { display: flex; justify-content: space-between; align-items: end; gap: var(--ds-space-2); margin-block-end: var(--ds-space-3); }
.home-workshop-intro .home-intro { margin-block-end: 0; }
.home-workshop-intro > a { flex-shrink: 0; }
.home-workshop-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--ds-grid-gap);
}
.home-workshop-main, .home-workshop-details figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--home-line-dark);
  background: var(--home-dark);
}
.home-page .home-workshop-main img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
}
.home-workshop-main figcaption, .home-workshop-details figcaption {
  display: grid;
  gap: .2rem;
  align-content: center;
  padding: var(--ds-space-2);
}
.home-workshop-main figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--ds-space-3);
  background: linear-gradient(transparent, rgb(28 32 35 / .95));
}
.home-workshop-main figcaption strong { font-size: var(--ds-type-h3); }
.home-workshop-main figcaption span, .home-workshop-details figcaption span { color: var(--home-muted-dark); font-size: var(--ds-type-caption); }
.home-workshop-details { display: grid; gap: var(--ds-space-2); }
.home-workshop-details figure { display: grid; grid-template-columns: minmax(5rem, .75fr) minmax(0, 1.25fr); }
.home-page .home-workshop-details img { width: 100%; height: 100%; aspect-ratio: 1.25; object-fit: cover; }
.home-workshop-note { margin-block-start: var(--ds-space-2); color: var(--home-muted-dark); font-size: var(--ds-type-caption); }

.home-featured-project, .home-estimate-grid, .home-side-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.home-featured-project {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .85fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-white);
}
.home-page .home-compare { min-width: 0; aspect-ratio: 16 / 10; }
.home-page .home-compare :is(.compare-before, .compare-after) { width: 100%; height: 100%; }
.home-page .home-compare:focus-within::after { outline-color: var(--ds-focus); }
.home-featured-copy { display: grid; align-content: center; justify-items: start; gap: var(--ds-space-2); padding: clamp(1.25rem, 3vw, 3rem); }
.home-filters { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin-block: var(--ds-space-4) var(--ds-space-1); }
.home-page .home-filters > button { min-height: 2.5rem; font-size: .85rem; }
.home-page .home-filters > button[aria-pressed="true"] { color: var(--ds-neutral-900); background: var(--ds-primary-300); border-color: var(--ds-primary-500); }
.home-project-grid, .home-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-grid-gap); }
.home-page .home-project-card h3 { font-size: var(--ds-type-h4); }
.home-page .home-project-card .ds-card-media img { aspect-ratio: 16 / 10; }
.home-project-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .35rem; color: var(--ds-muted); font-size: var(--ds-type-caption); }
.home-project-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.home-project-meta svg { width: .9rem; height: .9rem; }
.home-section-action { margin-block-start: var(--ds-space-3); }

.home-estimate-panel, .home-final-panel { min-width: 0; }
.home-estimate-paint { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); }
.home-estimate-result {
  margin-block-start: var(--ds-space-2);
  padding: var(--ds-space-2);
  background: var(--ds-primary-50);
  border: 1px solid var(--ds-line);
  border-inline-start: .25rem solid var(--ds-action);
  border-radius: var(--ds-radius-sm);
}
.home-estimate-result strong { display: block; font-size: var(--ds-type-h3); line-height: 1.2; overflow-wrap: anywhere; }
.home-estimate-result p { margin-block: var(--ds-space-1) var(--ds-space-2); }
.home-copy-fallback { width: 100%; min-height: 7rem; margin-block-start: var(--ds-space-2); }
.home-estimate-status { margin-block-start: var(--ds-space-1); font-size: var(--ds-type-caption); }
.home-page .ds-table-wrap { min-width: 0; }
.home-page .ds-table tbody :is(th, td) { color: var(--ds-ink); }
.home-page .home-compare-table td { white-space: normal; }

.home-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ds-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-timeline li {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2);
  border-block-start: 2px solid var(--ds-action);
  background: var(--ds-neutral-800);
  border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm);
}
.home-timeline h3 { font-size: var(--ds-type-h4); }
.home-timeline p, .home-step-time { font-size: var(--ds-type-caption); color: var(--home-muted-dark); }
.home-step-number { font-weight: 800; color: var(--ds-primary-300); }

.home-video-poster {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 13rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--home-dark);
  color: var(--ds-cream);
}
.home-page .home-video-poster img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home-video-poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(28 32 35 / .53); }
.home-video-poster:has(button:hover)::before { background: rgb(28 32 35 / .37); }
.home-reviews { max-width: 55rem; }
.home-review-track { display: grid; gap: var(--ds-space-2); }
.home-review { margin: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--ds-line); border-inline-start: .25rem solid var(--ds-action); border-radius: var(--ds-radius-md); background: var(--ds-white); }
.home-review p { font-size: var(--ds-type-h4); font-weight: 700; }
.home-review cite { display: block; margin-block-start: var(--ds-space-1); font-size: var(--ds-type-caption); color: var(--ds-muted); }
.home-review-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-1); margin-block-start: var(--ds-space-2); }
.home-materials { padding-block: var(--ds-space-4); background: var(--ds-white); border-block: 1px solid var(--ds-line); }
.home-materials h2 { font-size: var(--ds-type-h4); }
.home-materials p { color: var(--ds-muted); font-size: var(--ds-type-caption); margin-block-start: .25rem; }
.home-materials ul { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); list-style: none; margin: var(--ds-space-2) 0 0; padding: 0; }
.home-materials li { padding: .35rem .75rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); font-weight: 750; }
.home-article { display: grid; align-content: start; gap: var(--ds-space-1); }
.home-article > span { font-size: var(--ds-type-caption); color: var(--ds-muted); }
.home-article h3 { font-size: var(--ds-type-h4); }
.home-article p { color: var(--ds-muted); }

.home-page #lien-he.home-contact { color: var(--ds-cream); background: var(--ds-neutral-700); }
.home-final-panel { color: var(--ds-ink); background: var(--ds-white); }
.home-footer { color: var(--ds-cream); background: var(--home-dark); padding-block: var(--ds-space-6) var(--ds-space-2); }
.home-footer-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, .85fr) minmax(0, 1.3fr); gap: var(--ds-space-3); }
.home-footer-grid h2 { font-size: var(--ds-type-h4); margin-block-end: var(--ds-space-1); }
.home-footer-grid :is(p, li, figcaption) { font-size: var(--ds-type-caption); }
.home-footer-grid p + p { margin-block-start: var(--ds-space-1); }
.home-footer-grid ul { display: grid; gap: .35rem; padding: 0; margin: 0; list-style: none; }
.home-footer-company .home-brand { margin-block-end: var(--ds-space-2); }
.home-footer-channel { display: flex; align-items: center; gap: .35rem; margin-block: .3rem; }
.home-footer-channel svg { width: 1rem; height: 1rem; }
.home-page .home-footer-map { min-height: 0; border-radius: var(--ds-radius-md); }
.home-page .home-footer-map img { min-height: 0; height: auto; }
.home-footer-map figcaption { color: var(--ds-ink); }
.home-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-2); margin-block-start: var(--ds-space-3); padding-block-start: var(--ds-space-2); border-block-start: 1px solid var(--home-line-dark); font-size: var(--ds-type-caption); }
.home-footer-bottom a { display: inline-flex; align-items: center; gap: .35rem; }
.home-footer-bottom svg { width: 1rem; height: 1rem; }
.home-mobile-bar { z-index: 19; }

@media (prefers-reduced-motion: no-preference) {
  .home-page .is-reveal-pending { opacity: 0; transform: translateY(.65rem); }
  .home-page .is-revealed { animation: home-rise var(--ds-motion-slow) var(--ds-ease) both; }
  @keyframes home-rise { from { opacity: 0; transform: translateY(.65rem); } to { opacity: 1; transform: none; } }
}
@media (min-width: 67rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .home-page .home-hero-image { animation: home-photo-shift linear both; animation-timeline: scroll(); animation-range: 0px 620px; }
    @keyframes home-photo-shift { from { transform: scale(1.08); } to { transform: translateY(1.35rem) scale(1.08); } }
  }
}

@media (max-width: 66rem) {
  .home-page .home-header-inner { position: relative; display: grid; grid-template-columns: 1fr auto auto auto; min-height: 4.25rem; }
  .home-page .home-header-cta { grid-column: 3; grid-row: 1; }
  .home-page .home-search { grid-column: 2; grid-row: 1; }
  .js .home-page .home-menu-toggle {
    display: inline-grid;
    place-items: center;
    grid-column: 4;
    grid-row: 1;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--ds-cream);
    background: transparent;
    border: 1px solid var(--home-line-dark);
    border-radius: var(--ds-radius-sm);
  }
  .home-page .home-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    width: 100%;
    gap: 0;
    margin: 0;
    padding-block-end: var(--ds-space-1);
    max-height: 70svh;
    overflow-y: auto;
  }
  .js .home-page .home-nav:not(.is-open) { display: none; }
  .home-page .home-nav > a, .home-mega > summary { padding: .65rem .25rem; border-block-start: 1px solid var(--home-line-dark); font-size: .9rem; }
  .home-mega-panel { position: static; width: 100%; padding: var(--ds-space-1); box-shadow: none; }
  .home-page .home-mega-panel a { border: 0; }
  .home-page .home-mega-panel .home-mega-all { border-block-start: 1px solid var(--ds-line); }
  .home-service { grid-template-columns: 1fr; }
  .home-service--1, .home-service--2, .home-service--3, .home-service--4 { grid-column: span 6; }
  .home-page .home-service .ds-card-media img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .home-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 50rem) {
  .home-hero-inner, .home-estimate-grid, .home-side-layout, .home-featured-project { grid-template-columns: 1fr; }
  .home-hero-inner { min-block-size: auto; gap: var(--ds-space-3); }
  .home-hero::before { background: linear-gradient(180deg, rgb(28 32 35 / .8) 0%, rgb(28 32 35 / .76) 44%, rgb(28 32 35 / .91) 100%); }
  .home-page .home-hero-image { object-position: 57% 35%; }
  .home-quick { justify-self: stretch; width: min(100%, 36rem); }
  .home-workshop-grid { grid-template-columns: 1fr; }
  .home-page .home-workshop-main img { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .home-workshop-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-workshop-details figure { grid-template-columns: 1fr; }
  .home-page .home-workshop-details img { height: auto; aspect-ratio: 16 / 10; }
  .home-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-articles { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
  .home-topbar-inner { min-height: 2.25rem; font-size: .72rem; gap: .35rem; }
  .home-topbar-contact { gap: .35rem; }
  .home-topbar-contact .home-opening, .home-topbar-contact .home-topbar-zalo { display: none; }
  .home-topbar-location svg, .home-topbar-contact svg { width: .8rem; height: .8rem; }
  .home-page .home-header-inner { gap: .4rem; }
  .home-page .home-header-cta { min-height: 2.35rem; padding-inline: .55rem; font-size: .76rem; }
  .home-page .home-header-cta svg { display: none; }
  .home-page .home-search, .js .home-page .home-menu-toggle { width: 2.35rem; height: 2.35rem; min-height: 2.35rem; }
  .home-mega-panel { grid-template-columns: 1fr; }
  .home-hero-inner { padding-block: var(--ds-space-4); }
  .home-page :where(section[id], #bao-gia-nhanh, #dat-lich) { scroll-margin-block-start: 4.9rem; }
  .home-metrics-grid, .home-promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-metrics-grid > div, .home-promise-grid > div { padding: var(--ds-space-2) var(--ds-space-1); }
  .home-metrics-grid > div:nth-child(3) { border-inline-start: 0; }
  .home-metrics-grid > div:nth-child(n+3) { border-block-start: 1px solid var(--home-line-dark); }
  .home-promise-grid > div:nth-child(n+3) { border-block-start: 1px solid var(--ds-line); }
  .home-workshop-intro { display: grid; justify-items: start; }
  .home-workshop-details { grid-template-columns: 1fr; }
  .home-workshop-details figure { grid-template-columns: minmax(5rem, .7fr) minmax(0, 1.3fr); }
  .home-page .home-workshop-details img { height: 100%; aspect-ratio: 1.45; }
  .home-workshop-main figcaption { padding: var(--ds-space-2); }
  .home-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-footer-grid { grid-template-columns: 1fr 1fr; }
  .home-footer-company, .home-footer-grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
  .home-page .home-header-inner { grid-template-columns: 1fr auto auto auto; }
  .home-brand img { width: clamp(6rem, 27vw, 7rem); }
  .home-page .home-hero-copy .ds-type-display { font-size: clamp(2.4rem, 9.6vw, 2.9rem); }
  .home-page :is(.home-quick-form, .home-final-form) { grid-template-columns: 1fr; }
  .home-services { grid-template-columns: 1fr; }
  .home-project-grid { gap: var(--ds-space-1); }
  .home-project-card .ds-card-body { gap: .35rem; padding: .65rem; }
  .home-page .home-project-card h3 { font-size: 1rem; }
  .home-project-card .ds-badge, .home-project-meta { font-size: .72rem; }
  .home-project-meta { gap: .1rem .2rem; }
  .home-service--1, .home-service--2, .home-service--3, .home-service--4 { grid-column: auto; }
  .home-estimate-paint { grid-template-columns: 1fr; }
  .home-page .price-card-table { border: 0; }
  .home-page .ds-table-wrap:has(.price-card-table) { border: 0; }
}

@media (max-width: 22.4375rem) {
  .home-project-grid { grid-template-columns: 1fr; }
}