:root {
  --accent: #ff7a45;
  --accent-dark: #e8611f;
  --accent-soft: rgba(255, 122, 69, .14);

  --ink: #f5f6f7;
  --ink-soft: #c9cdd3;
  --muted: #8b929b;
  --line: rgba(255, 255, 255, .10);

  --bg: #0a0a0b;
  --surface: #1a1b1e;
  --surface-warm: #101113;
  --dark: #141517;

  --header-height: 76px;
  --radius: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

/* Anchor targets stop clear of the floating capsule instead of sliding under
   it. #top is deliberately excluded so the logo returns to a true page top. */
#process,
#why,
#door-types,
#gallery,
#areas,
#faq {
  scroll-margin-top: 94px;
}

body {
  background: var(--bg);
  line-height: 1.5;
}

img {
  max-width: 100%;
}

a,
button {
  cursor: pointer;
  user-select: none;
}

a {
  text-decoration: none;
  color: inherit;
}

input,
button {
  font-family: inherit;
  border: none;
  outline: none;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------- */
/* Brand + header                                              */
/* ---------------------------------------------------------- */

.site-header {
  height: auto;
  padding: 22px 0;
  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

/* Minimum contrast treatment so the overlay nav reads over any part of the
   hero photo - a soft top-down scrim behind the header only, no solid bar. */
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  pointer-events: none;
}

.site-header__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ----- Primary nav (per-letter weight-hover, staggered from center) ----- */

.site-nav {
  display: flex;
  align-items: center;
  width: 480px;
  justify-content: space-between;
}

.site-nav__link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  transition: color .2s ease;
}

.site-nav__link:hover {
  color: var(--accent);
}

.site-nav__char {
  display: inline-block;
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings .3s ease;
}

.site-nav__link:hover .site-nav__char {
  font-variation-settings: 'wght' 700;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  height: 300px;
  width: auto;
  display: block;
}

/* The logo file is a square canvas whose visible artwork fills only the middle
   ~30%, leaving ~35% transparent above and below. These negative margins remove
   that dead space from the layout so the header hugs the visible mark. The
   rendered logo size is unchanged. */
.site-header .brand__mark {
  margin-top: -105px;
  margin-bottom: -105px;
  /* Shifts the visible artwork flush with the container edge so it lines up
     with the hero heading below. A transform (not a negative margin) keeps the
     image's own box - and therefore its rendered size - completely unchanged. */
  transform: translateX(-78.5px);
}

/* ----- Floating capsule nav -------------------------------------------- */
/* Once the hero header has scrolled fully out of view, the same header is
   re-pinned as a centred capsule. Reusing one element (rather than a second
   nav) means there is never a moment where two navigations are on screen. */

/* Specificity is raised past the plain `.site-header` rules, one of which
   re-applies vertical padding at the mobile breakpoint later in this file and
   would otherwise push the capsule down away from its `top` offset. */
.site-header.site-header--float {
  position: fixed;
  top: 14px;
  padding: 0;
  z-index: 60;
  justify-content: center;
  animation: navFloatIn .28s ease both;
}

@keyframes navFloatIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.site-header--float { animation-duration: .01ms; }
}

/* The hero scrim belongs to the top-of-page state only. */
.site-header--float::before {
  display: none;
}

.site-header--float .site-header__inner {
  width: auto;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 9px 26px 9px 17px;
  gap: 28px;
  background: rgba(13, 14, 17, .97);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  backdrop-filter: blur(12px);
}

.site-header--float .site-nav {
  width: auto;
  gap: 26px;
  justify-content: flex-start;
}

.site-header--float .site-nav__link {
  text-shadow: none;
}

/* The logo file is a square canvas whose artwork fills the middle 30%. At hero
   size that dead space is trimmed with negative margins; at capsule size the
   brand link becomes a window onto just the artwork instead. The percentages
   are derived from the asset's own bounds (artwork 614x376 at x328,y439 of
   1254x1254), so the box can be resized per breakpoint without recalculating.
   Specificity is raised past `.site-header .brand__mark`, which sets the hero
   logo's negative margins per breakpoint later in this file and would
   otherwise displace the cropped artwork inside its window. */
.site-header.site-header--float .brand {
  position: relative;
  overflow: hidden;
  width: 58px;
  aspect-ratio: 614 / 376;
  flex: none;
}

.site-header.site-header--float .brand__mark {
  position: absolute;
  width: 204.24%;
  height: auto;
  max-width: none;
  left: -53.43%;
  top: -116.75%;
  margin: 0;
  transform: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__text strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.brand__text span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink-soft);
  margin-top: 3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------- */
/* Buttons                                                     */
/* ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 8px;
  transition: background-color .2s ease, transform .12s ease;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--gold {
  background: var(--accent);
  color: #fff;
}

.btn--accent:hover {
  background: var(--accent-dark);
}

.btn--accent:active {
  transform: scale(.98);
}

/* ---------------------------------------------------------- */
/* Hero                                                        */
/* ---------------------------------------------------------- */

.hero {
  position: relative;
  /* Leaves room for the trust bar so hero + trust bar together fill one screen. */
  min-height: calc(100dvh - 116px);
  display: flex;
  align-items: center;
  padding: 160px 0 32px;
  background-image: url('./src/assets/images/background-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12, 14, 16, .82) 0%, rgba(12, 14, 16, .62) 46%, rgba(12, 14, 16, .40) 100%);
  z-index: -1;
}

.hero__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
}

.hero__copy h1 {
  font-size: 54px;
  line-height: 1.08;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}

.hero__copy__tagline {
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 14px;
}

.hero__copy p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
  margin-top: 20px;
  max-width: 30em;
}

.hero__bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hero__bullets li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .94);
}

.hero__bullets svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

/* ----- Glassmorphism estimate card ----- */

.hero__card {
  background: rgba(255, 255, 255, .30);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .38);
  padding: 30px 28px 22px;
  display: flex;
  flex-direction: column;
}

.hero__card__head {
  text-align: center;
  margin-bottom: 22px;
}

.hero__card__title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.24;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

.hero__card__title .gold {
  color: var(--accent);
}

.hero__card__sub {
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  margin-top: 9px;
}

.hero__card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
}

.hero__card__foot svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.hero__card__foot i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
}

/* ---------------------------------------------------------- */
/* Estimate wizard (markup + IDs unchanged - styling only)     */
/* ---------------------------------------------------------- */

.main__form {
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
}

.main__form__content {
  transition: opacity .3s ease, transform .3s ease;
  width: 100%;
}

.main__form__content.hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.97);
  pointer-events: none;
}

.main__form__title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.4;
}

.main__form__hint {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 8px;
}

.main__form__hint.error {
  color: #ffb4b4;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

/* inputs */

.main__form input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .6);
  color: #1a1d21;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 8px;
  transition: border-color .2s ease, background-color .2s ease;
}

.main__form input::placeholder {
  color: #9aa0a6;
}

.main__form input:focus {
  background: #fff;
  border-color: var(--accent);
}

.main__form input:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.inputField {
  display: flex;
  gap: 10px;
}

/* step back navigation */

.step-back {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 14px;
  transition: color .2s ease;
}

.step-back:hover {
  color: #fff;
}

.step-back svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* small sub-instruction under a step title (e.g. "select more than one") */

.step-hint {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .68);
  text-align: center;
  margin-top: -10px;
  margin-bottom: 16px;
}

/* "Other" door type custom input */

.operation-other {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}

.operation-other.visible {
  max-height: 80px;
  opacity: 1;
  margin-top: 10px;
}

/* step 1 form row */

.main__form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.main__form form button {
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 8px;
  transition: background-color .2s ease, transform .12s ease;
}

.main__form form button:hover {
  background: var(--accent-dark);
}

.main__form form button:active {
  transform: scale(.98);
}

.main__form form button:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* wizard "a.button" actions */

.main__form__content a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: 8px;
  margin-top: 16px;
  transition: background-color .2s ease, transform .12s ease;
}

.main__form__content a.button:hover {
  background: var(--accent-dark);
}

.main__form__content a.button:active {
  transform: scale(.98);
}

/* checkbox option grid */

.main__form__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.main__form__buttons > label {
  width: calc(50% - 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.main__form__buttons > label:hover {
  background: rgba(255, 255, 255, .22);
}

.main__form__buttons > label input {
  display: none;
}

.main__form__buttons > label:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
}

/* progress bars */

.progress__bar {
  height: 7px;
  width: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
}

.progress__bar__filled {
  height: 100%;
  width: 100%;
  max-width: 0%;
  background: var(--accent);
  transition: max-width .3s ease-in-out;
}

/* success / confirmation states */

.nice_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 12px;
}

#formStep2,
#formStep5,
#formStep6,
#formStep7,
#formStep8,
#formStep9 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
}

#formStep9 {
  align-items: center;
  text-align: center;
}

#formStep9 svg {
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
}

#formStep9 .main__form__title {
  font-size: 15px;
  font-weight: 500;
}

/* wizard footer (door-type animation strip) */

.main__form__footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  transition: opacity .2s ease;
}

.main__form__footer.hidden {
  visibility: hidden;
  opacity: 0;
}

.main__form__footer__content {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.main__form__footer__content > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}

.main__form__footer__content .door-frame {
  width: 62px;
  height: 4px;
  /* ~2mm visual offset so the graphic clears its label. Uses `top` rather
     than the flex gap so nothing else in the card reflows. */
  top: 8px;
}

.main__form__footer__content .door {
  width: 40%;
  left: 12px;
  height: 4px;
}

/* ---------------------------------------------------------- */
/* Animated door illustrations (used by the wizard footer)     */
/* ---------------------------------------------------------- */

.door-frame {
  position: relative;
  width: 200px;
  height: 10px;
  background-color: rgba(255, 255, 255, .16);
  border-radius: 2px;
}

.door {
  position: absolute;
  left: 50px;
  top: 0;
  border-radius: 2px;
  width: 100px;
  height: 10px;
  background-color: rgba(255, 255, 255, .55);
  transform-origin: 0% 50%;
  animation: swing 2s infinite alternate;
}

@keyframes swing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-90deg) translateX(-2px); }
}

.door1 {
  position: absolute;
  width: 30%;
  height: 4px;
  background-color: rgba(255, 255, 255, .55);
  border-radius: 2px;
  animation: slide1 2s infinite alternate;
}

.door2 {
  position: absolute;
  width: 30%;
  height: 4px;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, .55);
  border-radius: 2px;
  animation: slide2 2s infinite alternate;
}

@keyframes slide1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(68%); }
}

@keyframes slide2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-68%); }
}

.sliding-door {
  position: absolute;
  width: 40%;
  height: 4px;
  border-radius: 2px;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .55);
  animation: slide 2s infinite alternate;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.bi-fold-door {
  position: absolute;
  width: 50%;
  height: 3px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
}

.bi-fold-section {
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, .55);
  transform-origin: left center;
}

.bi-fold-left {
  left: 0;
  display: flex;
  justify-content: flex-end;
  transform-origin: left center;
  animation: bi-fold-left 2s infinite alternate;
}

.bi-fold-left .bi-fold-section {
  animation: bi-fold-left-inner 2s infinite alternate;
  width: 50%;
}

.bi-fold-left .bi-fold-not-section,
.bi-fold-right .bi-fold-not-section {
  width: 50%;
  background-color: rgba(255, 255, 255, .55);
}

@keyframes bi-fold-left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-45deg); }
}

@keyframes bi-fold-left-inner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.bi-fold-right {
  right: 0;
  display: flex;
  justify-content: flex-start;
  transform-origin: center right;
  animation: bi-fold-right 2s infinite alternate;
}

.bi-fold-right .bi-fold-section {
  animation: bi-fold-right-inner 2s infinite alternate;
  transform-origin: center right;
  width: 50%;
}

@keyframes bi-fold-right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

@keyframes bi-fold-right-inner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-90deg); }
}

/* ---------------------------------------------------------- */
/* "Estimate is ready" nudge                                   */
/* ---------------------------------------------------------- */

.ready__qoute {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  max-width: 300px;
  padding: 0;
  cursor: pointer;
  transition: transform .3s ease, opacity .3s ease;
}

.ready__qoute.hidden {
  transform: translateY(160%);
  opacity: 0;
  pointer-events: none;
}

.quote__container {
  background: var(--dark);
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
}

.ready__qoute .title {
  font-size: 15px;
  font-weight: 600;
}

.ready__qoute .message {
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  margin-top: 4px;
}

/* ---------------------------------------------------------- */
/* Privacy / Terms modals                                      */
/* ---------------------------------------------------------- */

.privacy__wrapper {
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.privacy__wrapper:has(.privacy.hidden) {
  display: none;
}

.privacy__bg {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 16, .6);
}

.privacy {
  position: relative;
  z-index: 2;
  background: #121212;
  color: #fff;
  padding: 24px;
  border-radius: 10px;
  max-width: 640px;
  width: calc(100% - 32px);
  height: calc(100dvh - 200px);
  overflow-y: auto;
}

.close {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s ease;
}

.close:hover {
  opacity: 1;
}

.privacy .heading {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 16px;
}

.privacy .paragraph {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.privacy ul {
  font-size: 14px;
  padding-left: 18px;
  margin-bottom: 16px;
}

.privacy ul li {
  line-height: 1.55;
}

/* ---------------------------------------------------------- */
/* Shared section styling                                      */
/* ---------------------------------------------------------- */

.section {
  padding: 84px 0;
}

.section h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -.015em;
  color: var(--ink);
}

.rule {
  width: 62px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  margin: 16px auto 46px;
}

/* ---------------------------------------------------------- */
/* Trust bar                                                   */
/* ---------------------------------------------------------- */

.trustbar {
  background: var(--surface-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
}

.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.trustbar__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.trustbar__item > svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--accent);
}

.trustbar__item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.trustbar__item p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 3px;
}

/* ---------------------------------------------------------- */
/* Installation process                                        */
/* ---------------------------------------------------------- */

.process__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.process__step {
  flex: 1 1 0;
  max-width: 200px;
  text-align: center;
}

.process__icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.process__icon svg {
  width: 32px;
  height: 32px;
}

.process__num {
  width: 25px;
  height: 25px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}

.process__step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* "Consultation" runs a few characters longer than its siblings and wrapped to
   3 lines at the shared column width. A small symmetric bleed lets it wrap to 2
   lines like the other four; the columns themselves stay equal and evenly spaced. */
.process__grid > .process__step:nth-of-type(3) p {
  margin-left: -10px;
  margin-right: -10px;
}

.process__arrow {
  flex: 0 0 auto;
  margin-top: 34px;
  color: var(--line);
}

.process__arrow svg {
  width: 38px;
  height: 12px;
  display: block;
}

/* ---------------------------------------------------------- */
/* Why choose us                                               */
/* ---------------------------------------------------------- */

.why {
  background: var(--surface-warm);
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.why__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.why__card:hover {
  box-shadow: 0 12px 30px rgba(26, 29, 33, .07);
  transform: translateY(-2px);
}

.why__icon {
  width: 30px;
  height: 30px;
  color: var(--accent);
  margin-bottom: 14px;
}

.why__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}

.why__card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------- */
/* Door types                                                  */
/* ---------------------------------------------------------- */

.doortypes__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.doortypes__card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.doortypes__card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(26, 29, 33, .08);
  transform: translateY(-2px);
}

.doortypes__art {
  background: var(--surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 16px;
  color: var(--ink-soft);
}

.doortypes__art svg {
  width: auto;
  height: 96px;
  display: block;
}

.doortypes__label {
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  padding: 14px 8px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------- */
/* Gallery                                                     */
/* ---------------------------------------------------------- */

.gallery {
  background: var(--surface-warm);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  margin: 0;
}

/* <img> and the placeholder share identical box rules, so swapping the
   placeholder for a real photo needs no layout changes. */
/* Square cards match the source photos' 1:1 framing, so each door is shown
   complete rather than cropped at the head. object-fit keeps ratios intact. */
.gallery__item > img,
.gallery__item > .gallery__ph {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gallery__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 122, 69, .05) 0 12px,
      rgba(255, 122, 69, .02) 12px 24px);
  color: var(--muted);
}

.gallery__ph svg {
  width: 34px;
  height: 34px;
}

.gallery__ph span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gallery__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(18, 18, 18, .82), rgba(18, 18, 18, 0));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 26px 16px 12px;
}

/* ---------------------------------------------------------- */
/* Service areas                                               */
/* ---------------------------------------------------------- */

/* Supporting sentence under a section heading. Only the areas section uses one
   today, so the tightened rule spacing is scoped to it. */
.section-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 44px;
}

.areas .rule {
  margin-bottom: 18px;
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.areas__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.areas__card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transform: translateY(-2px);
}

.areas__map {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  /* Matches the map surface so the card never flashes light while tiles load. */
  background: #0e1014;
  /* The card is rounded and clips its children, but the map's own canvas and
     controls are absolutely positioned, so it needs its own containment. */
  position: relative;
  overflow: hidden;
}

.areas__map .maplibregl-canvas { outline: none; }

/* Orange service pin - same teardrop as the previous map markers. */
.dip-pin {
  width: 22px;
  height: 29px;
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
  transition: transform .15s ease;
  transform-origin: 50% 100%;
}

.dip-pin svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dip-pin path { fill: var(--accent); }
.dip-pin circle { fill: #101216; }

.dip-pin:hover,
.dip-pin:focus-visible {
  transform: scale(1.18);
}

/* Tooltip, restyled from the MapLibre default light popup. */
.dip-tip .maplibregl-popup-content {
  background: #14161a;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 10px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  white-space: nowrap;
}

.dip-tip .maplibregl-popup-tip { display: none; }

/* Map chrome toned down to the card's palette so it does not read as a
   third-party widget bolted onto the section. */
.areas__map .maplibregl-ctrl-group {
  background: rgba(16, 18, 22, .88);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: none;
  overflow: hidden;
}

.areas__map .maplibregl-ctrl-group button {
  width: 26px;
  height: 26px;
  background: transparent;
}

.areas__map .maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--line);
}

.areas__map .maplibregl-ctrl-group button:hover {
  background: rgba(255, 255, 255, .07);
}

.areas__map .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1) opacity(.72);
}

/* Required CARTO / OpenStreetMap credit, kept in full but reduced to a thin
   line tucked into the bottom-right corner. The links carry a little vertical
   padding so they stay tappable at this size without growing the strip. */
.areas__map .maplibregl-ctrl-attrib {
  margin: 0;
  padding: 1px 6px 1px 7px;
  background: rgba(10, 10, 11, .55);
  border-radius: 5px 0 0 0;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  line-height: 15px;
  color: rgba(255, 255, 255, .38);
}

.areas__map .maplibregl-ctrl-attrib a {
  color: rgba(255, 255, 255, .52);
  padding: 4px 0;
}

.areas__map .maplibregl-ctrl-attrib a:hover,
.areas__map .maplibregl-ctrl-attrib a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.areas__map .maplibregl-ctrl-bottom-right,
.areas__map .maplibregl-ctrl-top-right {
  z-index: 2;
}

.areas__map .maplibregl-ctrl-top-right { margin: 4px 4px 0 0; }

/* Cooperative-gesture overlay: keeps page scrolling intact on touch, but the
   default styling is a bright full-bleed panel, so tone it down. */
.areas__map .maplibregl-cooperative-gesture-screen {
  background: rgba(10, 10, 11, .74);
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

.areas__body {
  padding: 18px 20px 20px;
}

.areas__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.areas__body p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.areas__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  margin-top: 26px;
}

.areas__cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* Tighten only the gap between the areas CTA and the FAQ heading: 84 + 84 = 168px
   becomes 56 + 56 = 112px, i.e. two thirds of the original. Scoped to this one
   boundary so every other section keeps its default rhythm. */
.section.areas {
  padding-bottom: 56px;
}

.section.faq {
  padding-top: 56px;
}

/* ---------------------------------------------------------- */
/* FAQ                                                         */
/* ---------------------------------------------------------- */

.faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.faq__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
  transition: border-color .2s ease;
}

.faq__item[open] {
  border-color: var(--accent);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
}

.faq__item[open] summary::after {
  content: '\2212';
}

.faq__item p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------------------------------------------------------- */
/* Final CTA                                                   */
/* ---------------------------------------------------------- */

.finalcta {
  padding: 0 0 72px;
}

.finalcta__inner {
  background: var(--dark);
  border-radius: 12px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.finalcta__copy h2 {
  font-size: 29px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  letter-spacing: -.015em;
}

.finalcta__copy p {
  font-size: 15px;
  color: rgba(255, 255, 255, .68);
  margin-top: 7px;
}

.finalcta__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.finalcta__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
}

.finalcta__meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}

/* ---------------------------------------------------------- */
/* Footer                                                      */
/* ---------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 54px 0 26px;
  background: var(--surface);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Same transparent-canvas correction as the header logo, scaled to the footer's
   180px mark. Block display avoids the inline baseline gap, and the negative
   left margin pulls the visible artwork flush with the text beneath it. */
.brand--footer {
  display: block;
}

.brand--footer .brand__mark {
  height: 180px;
  margin: -63px 0 -63px -47px;
}

.site-footer__brand p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px;
  max-width: 24em;
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  transition: color .2s ease;
}

.site-footer__cta:hover {
  color: var(--accent-dark);
}

.site-footer__cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.site-footer__heading {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer__col li {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.site-footer__col a {
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease;
}

.site-footer__col a:hover {
  color: var(--accent);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

.site-footer__legal {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

.site-footer__legal a {
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------- */
/* Responsive                                                  */
/* ---------------------------------------------------------- */

@media only screen and (max-width: 1100px) {
  /* Two up keeps each map wide enough for its labels to stay legible. */
  .areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__top {
    grid-template-columns: repeat(4, 1fr);
    gap: 34px 24px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-nav {
    width: auto;
    justify-content: center;
    gap: 24px;
  }

  .site-header--float .site-nav {
    gap: 20px;
  }

  .site-header--float .site-header__inner {
    padding: 8px 22px 8px 15px;
    gap: 22px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 620px;
  }

  .hero__copy h1 {
    font-size: 42px;
  }

  .hero {
    min-height: 0;
    padding: 170px 0 40px;
  }

  .trustbar__grid,
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .doortypes__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process__grid {
    flex-wrap: wrap;
    gap: 34px 12px;
  }

  .process__step {
    flex: 0 0 calc(33.333% - 12px);
    max-width: none;
  }

  .process__arrow {
    display: none;
  }
}

@media only screen and (max-width: 760px) {
  /* Same two-thirds reduction at the mobile section rhythm: 58 + 58 -> 38 + 38. */
  .section.areas {
    padding-bottom: 38px;
  }

  .section.faq {
    padding-top: 38px;
  }

  .site-header {
    height: auto;
    padding: 14px 0;
  }

  .site-header__inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }

  .site-nav {
    gap: 8px 18px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-nav__link {
    font-size: 13px;
  }

  /* Six links will not fit one row at this width, so the floating capsule
     carries the four shortest and drops Service Areas and FAQ. This is scoped
     to the floating state only - the hero nav at the top of the page still
     lists all six, and both sections remain on the page and reachable. */
  .site-header.site-header--float {
    top: 10px;
  }

  .site-header--float .site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    padding: 8px 15px 8px 11px;
    gap: 12px;
    border-radius: 999px;
    max-width: calc(100vw - 20px);
  }

  .site-header--float .site-nav__link[href="#areas"],
  .site-header--float .site-nav__link[href="#faq"] {
    display: none;
  }

  .site-header--float .site-nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
  }

  .site-header--float .site-nav__link {
    font-size: 12.5px;
  }

  .site-header.site-header--float .brand {
    width: 46px;
  }

  .brand__mark {
    height: 216px;
  }

  /* Proportional to the smaller logo at this breakpoint. The header is
     centered here, so no horizontal correction. */
  .site-header .brand__mark {
    margin-top: -76px;
    margin-bottom: -76px;
    transform: none;
  }

  .hero {
    padding-top: 160px;
  }

  .section {
    padding: 58px 0;
  }

  .section h2 {
    font-size: 26px;
  }

  .rule {
    margin-bottom: 34px;
  }

  .hero__copy h1 {
    font-size: 33px;
  }

  .hero__copy__tagline {
    font-size: 20px;
  }

  .hero__card {
    padding: 24px 20px 18px;
  }

  .hero__card__title {
    font-size: 23px;
  }

  .trustbar__grid,
  .why__grid,
  .faq__grid,
  .areas__grid {
    grid-template-columns: 1fr;
  }

  .doortypes__grid,
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process__step {
    flex: 0 0 calc(50% - 12px);
  }

  .finalcta__inner {
    padding: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .finalcta__action {
    width: 100%;
    align-items: stretch;
  }

  .finalcta__action .btn {
    width: 100%;
  }

  .finalcta__meta {
    justify-content: center;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ready__qoute {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }

  .ready__qoute.mobileHidden {
    opacity: 0;
    transform: translateY(160%);
    visibility: hidden;
  }

  .main__form__footer__content {
    gap: 8px;
  }

  .main__form__footer__content .door-frame {
    width: 48px;
  }

  .main__form__footer__content > div {
    font-size: 8px;
    gap: 12px;
  }
}

@media only screen and (max-width: 460px) {
  /* Keeps the four capsule links on one row down to 320px. */
  .site-header--float .site-header__inner {
    padding: 8px 12px 8px 9px;
    gap: 10px;
  }

  .site-header--float .site-nav {
    gap: 11px;
  }

  .doortypes__grid,
  .gallery__grid {
    grid-template-columns: 1fr;
  }

  .main__form__buttons > label {
    width: 100%;
  }
}