/* Everstone Lights. One idea carries the design: the line of lights along a roofline.
   The hero ends in a roof shape whose eave lights up on load; everything after it stays calm
   so that one moment is the memorable thing. Bricolage Grotesque throughout. */
:root {
  --night: #0f1a3a;      /* dark bands, headings on light */
  --dusk: #24356e;       /* hover on dark, secondary dark */
  --lamp: #f6b73c;       /* the light itself: buttons, ticks, the roofline */
  --lamp-deep: #9a6a0c;  /* lamp colour that passes contrast on white */
  --frost: #eef2f8;      /* quiet alternate surface */
  --white: #ffffff;
  --ink: #121a2f;
  --slate: #55607a;
  --mist: #b8c2dc;
  --line: #dce2ec;
  --line-night: rgba(255, 255, 255, 0.14);
  --danger: #c2332b;

  /* older names kept for the small pages, mapped to the new palette */
  --navy: var(--night);
  --gold: var(--lamp);
  --gold-bright: #ffd27a;
  --gold-deep: var(--lamp-deep);
  --paper: var(--frost);

  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(18px, 4.5vw, 48px);
  --band: clamp(72px, 9vw, 128px);
  --header: 74px;
  --roof: clamp(34px, 6.5vw, 104px);
  --r-media: 14px;
  --r-btn: 10px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header) + 16px + env(safe-area-inset-top, 0px)); }

h1, h2, h3 { font-weight: 700; font-stretch: 86%; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
h3 { font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.01em; font-stretch: 92%; }
.lead { font-size: clamp(1.06rem, 1.45vw, 1.2rem); line-height: 1.55; color: var(--slate); max-width: 56ch; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--paper { background: var(--frost); }
.band--night, .band--navy { background: var(--night); color: var(--white); }
.band--night .lead, .band--navy .lead { color: var(--mist); }
.stack { display: grid; gap: 18px; align-content: start; }
.split { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.split > :first-child { grid-column: span 5; }
.split > :last-child { grid-column: span 7; }
.split--center { align-items: center; }

/* Buttons: a solid lamp-coloured block, and an outline for the quieter choice */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: var(--r-btn);
  background: var(--lamp); color: var(--night);
  font-weight: 650; font-size: 1.02rem; line-height: 1.15; letter-spacing: 0;
  text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: #ffc85c; box-shadow: 0 0 0 6px rgba(246, 183, 60, 0.18); }
.btn:active { background: #e9a82a; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.site-header .btn.is-active { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--lamp), 0 0 18px rgba(246, 183, 60, 0.55); }
.btn--block { display: flex; width: 100%; }
.btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--line:hover { background: rgba(246, 183, 60, 0.12); box-shadow: inset 0 0 0 1.5px var(--lamp); }
.btn .short { display: none; }
.textlink { font-weight: 650; text-decoration: underline; text-decoration-color: var(--lamp); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.textlink:hover { text-decoration-color: currentColor; }
.cta-row { margin-top: 8px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--night); color: var(--white); font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.site-header.is-raised { border-bottom-color: var(--line); }
.site-header__row { display: flex; align-items: center; gap: 12px 34px; min-height: var(--header); }
.brand { display: block; margin-right: auto; }
.brand img { height: 46px; width: auto; }
/* Menu: the current page is lit, an amber pill with a rounded border */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 15px;
  border: 1.5px solid transparent; border-radius: 999px; background: none; color: var(--ink);
  font-weight: 550; font-size: 1rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .nav__link:hover { background: rgba(246, 183, 60, 0.12); } }
.nav__link.is-active { background: rgba(246, 183, 60, 0.2); border-color: var(--lamp); color: var(--night); font-weight: 700; box-shadow: 0 0 16px rgba(246, 183, 60, 0.4); }
.nav__chev { width: 16px; height: 16px; stroke-width: 2.4; transition: transform 0.2s ease; }
.nav__group { position: relative; }
.nav__group.is-open .nav__chev { transform: rotate(180deg); }
.nav__menu {
  display: none; position: absolute; top: calc(100% + 12px); left: -10px; z-index: 5; width: 350px; padding: 8px;
  border-radius: 18px; background: var(--white); box-shadow: 0 28px 56px -20px rgba(15, 26, 58, 0.4), 0 0 0 1px var(--line); gap: 2px;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__group.is-open .nav__menu { display: grid; }
@media (hover: hover) and (min-width: 1101px) { .nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { display: grid; } }
.nav__menu a { display: grid; gap: 1px; padding: 11px 14px; border-radius: 12px; text-decoration: none; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--frost); }
.nav__menu a.is-current { background: rgba(246, 183, 60, 0.16); }
.nav__menu b { font-weight: 650; color: var(--night); }
.nav__menu span { font-size: 0.88rem; line-height: 1.35; color: var(--slate); }
.nav__menu .nav__all { margin-top: 4px; padding-block: 12px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; font-weight: 650; color: var(--night); }
.nav a { text-decoration: none; }
.menu-toggle { display: none; width: 46px; height: 46px; padding: 0; margin-right: -8px; border: 0; border-radius: 8px; background: none; cursor: pointer; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.menu-toggle span { position: relative; width: 22px; height: 2px; background: var(--night); transition: background 0.15s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--night); transition: transform 0.2s ease; }
.menu-toggle span::before { transform: translateY(-7px); }
.menu-toggle span::after { transform: translateY(7px); }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* Hero: full-bleed night photo whose bottom edge is a roofline */
.hero {
  position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--white);
  min-height: clamp(520px, calc(100svh - var(--header) - 40px), 760px); display: flex; align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--roof)), 0 100%);
}
.hero > .wrap { width: 100%; }
.hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(15, 26, 58, 0.94) 0%, rgba(15, 26, 58, 0.84) calc(50% - 170px), rgba(15, 26, 58, 0.25) calc(50% + 140px), rgba(15, 26, 58, 0) calc(50% + 400px)),
    linear-gradient(0deg, rgba(15, 26, 58, 0.55) 0%, rgba(15, 26, 58, 0) 30%);
}
.hero__copy { display: grid; gap: 22px; justify-items: start; max-width: 660px; padding-block: clamp(48px, 6vw, 88px) calc(var(--roof) + clamp(48px, 6vw, 88px)); }
.hero__copy p { color: #d6ddf0; font-size: clamp(1.04rem, 1.4vw, 1.18rem); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }

/* The lit roofline along the hero's bottom edge. Lamps are drawn by script; they come on once,
   from the peak outward, when the page loads. */
.roofline { position: relative; z-index: 3; height: 0; pointer-events: none; }
.roofline svg { position: absolute; left: 0; width: 100%; top: calc(-1 * var(--roof) - 14px); height: calc(var(--roof) + 28px); overflow: visible; }
.roofline .lamp { opacity: 0; animation: lamp-on 0.5s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes lamp-on { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0.92; } }

/* Trust strip */
.trust { padding-block: clamp(20px, 3vw, 36px) 0; }
.trust--page { padding-block: 0 var(--band); }
.trust__card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--line); }
.trust__card li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-content: start; padding: 22px clamp(14px, 2vw, 26px); border-left: 1px solid var(--line); }
.trust__card li:first-child { border-left: 0; padding-left: 0; }
.trust__icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--frost); color: var(--lamp-deep); }
.trust__icon .icon { width: 21px; height: 21px; }
.trust__card b { font-weight: 700; font-stretch: 92%; font-size: 1.1rem; line-height: 1.25; color: var(--night); }
.trust__card span:last-child { font-size: 0.92rem; line-height: 1.4; color: var(--slate); }

/* Services: installation leads on a night panel, the other three sit beside it */
.services { margin-top: clamp(36px, 4.5vw, 60px); align-items: stretch; }
.services__main { padding: clamp(28px, 4vw, 48px); border-radius: 20px; background: var(--night); color: var(--white); gap: 20px; }
.services__main h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.02; letter-spacing: -0.03em; font-stretch: 86%; }
.services__main .lead { color: var(--mist); }
.included__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(246, 183, 60, 0.14); color: var(--lamp); }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.45; }
.ticks .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--lamp-deep); stroke-width: 2.4; }
.services__main .ticks .icon, .band--night .ticks .icon { color: var(--lamp); }
.band--night .ticks li { color: var(--mist); }
.services__main .ticks li { color: #dfe5f4; }

.rows { border-top: 1px solid var(--line); }
.rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6px 28px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.rows p { color: var(--slate); font-size: 1rem; }
.rows .ticks { margin-top: 12px; }
.rows .ticks li { color: var(--slate); }
.rows .textlink { display: inline-block; margin-top: 14px; }
.services .rows { border-top: 0; }
.services .rows > li:first-child { padding-top: 6px; }

/* Parts: a price list */
.parts-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(28px, 5vw, 80px); align-items: end; }
.price-list { width: 100%; margin-top: clamp(28px, 4vw, 48px); border-collapse: collapse; background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.price-list th, .price-list td { padding: 18px clamp(14px, 2vw, 26px); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.price-list tr:last-child td, .price-list tr:last-child th { border-bottom: 0; }
.price-list thead th { padding-block: 14px; font-size: 0.9rem; font-weight: 600; color: var(--slate); background: #f7f9fc; }
.price-list tbody th { font-weight: 700; font-stretch: 92%; font-size: 1.08rem; color: var(--night); white-space: nowrap; }
.price-list td { color: var(--slate); }
.price-list .price { color: var(--night); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-list .price small { display: block; font-size: 0.88rem; font-weight: 500; color: var(--slate); }
.price-list .price ul { display: grid; gap: 2px; }
.price-list td:last-child { text-align: right; width: 1%; white-space: nowrap; vertical-align: middle; }
.price-list .btn--line { color: var(--night); }

/* Inner pages: a short dark header with the page title */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(88px, 11vw, 160px) clamp(64px, 8vw, 116px); }
.page-head__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15, 26, 58, 0.95) 0%, rgba(15, 26, 58, 0.82) 38%, rgba(15, 26, 58, 0.35) 72%, rgba(15, 26, 58, 0.2) 100%), linear-gradient(0deg, rgba(15, 26, 58, 0.5) 0%, rgba(15, 26, 58, 0) 40%); }
.page-head .stack { gap: 16px; max-width: 640px; }
.page-head .lead { color: #d6ddf0; }
.page-head h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.page-head + .band--night, .page-head + .band--navy { padding-top: 0; }
.more { margin-top: clamp(28px, 3.5vw, 44px); }
.contact__form { scroll-margin-top: calc(var(--header) + 16px); }
.faq--page .faq { max-width: 860px; }
.page-head + .band:not(.band--night):not(.band--navy) { padding-top: clamp(40px, 5vw, 64px); }
.page-head + .band .services, .page-head + .band .price-list, .page-head + .band .gallery { margin-top: 0; }

/* Service pages */
.services__title { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.02; letter-spacing: -0.03em; font-stretch: 86%; }
.aside-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 4px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.svc-card { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3.4vw, 40px); border-radius: 20px; background: var(--frost); }
.svc-card:first-child { background: var(--night); color: var(--white); }
.svc-card:first-child p { color: var(--mist); }
.svc-card:first-child .included__icon { background: rgba(246, 183, 60, 0.14); color: var(--lamp); }
.svc-card .included__icon { background: var(--white); color: var(--lamp-deep); }
.svc-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.svc-card p { color: var(--slate); max-width: 44ch; }
.svc-card .textlink { justify-self: start; margin-top: 6px; }

/* Parts estimate */
.calc { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--frost); }
.calc__inputs { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 24px; }
.calc__feet { display: flex; align-items: center; gap: 10px; }
.calc__feet .control { width: 140px; font-size: 1.15rem; font-weight: 650; }
.calc__feet span { color: var(--slate); font-weight: 600; }
.calc__check { min-height: 54px; }
.calc .order__lines { padding-top: 4px; }
.note { color: var(--slate); max-width: 52ch; }
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 4vw, 48px); }
.svc-card--plain, .svc-card--plain:first-child { background: var(--white); color: var(--ink); }
.svc-card--plain:first-child p { color: var(--slate); }
.svc-card--plain .included__icon, .svc-card--plain:first-child .included__icon { background: var(--frost); color: var(--lamp-deep); }
.svc-card h3 { font-size: 1.3rem; }

/* About page */
.prose { gap: 16px; }
.prose p:not(.lead) { color: var(--slate); max-width: 62ch; }
.reviews--two { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.reviews--two li { margin-bottom: 0; }
.parts-head + .svc-grid { margin-top: clamp(28px, 4vw, 48px); }
.svc-card--line { background: var(--frost); }
.svc-card--line:first-child { background: var(--frost); color: var(--ink); }
.svc-card--line:first-child p { color: var(--slate); }
.svc-card--line .included__icon, .svc-card--line:first-child .included__icon { background: var(--white); color: var(--lamp-deep); }
.svc-card .said { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.93rem; color: var(--ink); font-style: italic; }
.occasions { display: flex; flex-wrap: wrap; gap: 10px; }
.occasions li { padding: 10px 16px; border: 1px solid var(--line-night); border-radius: 999px; color: var(--white); font-weight: 550; background: rgba(255, 255, 255, 0.04); }

/* Photos */
.photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-media); }

/* Gallery: four looks, captions under each photo */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 52px); }
.shot { display: grid; align-content: start; gap: 12px; padding: 0; border: 0; background: none; color: var(--white); text-align: left; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-media); transition: filter 0.3s ease; }
.shot:hover img { filter: brightness(1.08) saturate(1.08); }
.shot__cap { display: grid; gap: 2px; }
.shot__cap b { font-weight: 700; font-stretch: 92%; font-size: 1.12rem; }
.shot__cap span { font-size: 0.93rem; color: var(--mist); }
.gallery--light .shot { color: var(--ink); }
.gallery--light .shot__cap span, .gallery--light .gallery__hint { color: var(--slate); }
.gallery__hint { display: none; margin-top: 12px; font-size: 0.9rem; color: var(--mist); }

.lightbox { width: min(1180px, 94vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--white); overflow: visible; }
.lightbox::backdrop { background: rgba(10, 17, 38, 0.95); }
.lightbox figure { display: grid; gap: 14px; justify-items: center; }
.lightbox img { max-width: 100%; max-height: 76vh; width: auto; height: auto; border-radius: 10px; }
.lightbox figcaption { font-weight: 650; text-align: center; }
.lightbox figcaption span { display: block; font-weight: 400; color: var(--mist); font-size: 0.95rem; }
.lightbox__bar { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.lightbox__btn { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--line-night); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--white); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lightbox__btn:hover { border-color: var(--lamp); color: var(--lamp); }

/* "See it on your own house first" before-and-after slider */
.compare { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 18px; }
.compare img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.compare-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; }
.compare-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: var(--lamp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1a3a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 0 0 6px rgba(246, 183, 60, 0.25), 0 6px 20px rgba(0, 0, 0, 0.4);
}
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare:focus-within .compare-handle::after { outline: 3px solid var(--white); outline-offset: 3px; }
.compare-tag { position: absolute; top: 16px; padding: 6px 13px; border-radius: 999px; background: rgba(15, 26, 58, 0.78); color: var(--white); font-size: 0.82rem; font-weight: 600; pointer-events: none; }
.compare-tag--before { left: 16px; }
.compare-tag--after { right: 16px; }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(32px, 4vw, 52px); counter-reset: step; }
.steps li { display: grid; gap: 8px; align-content: start; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; background: var(--night); color: var(--lamp); font-weight: 700; font-size: 1.05rem; }
.steps p { color: var(--slate); font-size: 1rem; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding-block: 16px; font-weight: 650; font-size: 1.08rem; line-height: 1.3; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--frost) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1a3a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.2s ease, background-color 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--lamp); }
.band--paper .faq summary::after { background-color: var(--white); }
.band--paper .faq details[open] summary::after { background-color: var(--lamp); }
.faq details p { padding-bottom: 24px; color: var(--slate); max-width: 62ch; }
#faq .split > .stack { position: sticky; top: calc(var(--header) + 32px); align-self: start; }

/* Reviews */
.reviews { columns: 3; column-gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 52px); }
.reviews li { break-inside: avoid; display: grid; gap: 16px; margin-bottom: clamp(18px, 2.4vw, 28px); padding: 26px; border-radius: 18px; background: var(--white); }
.reviews blockquote { margin: 0; font-size: 1.04rem; line-height: 1.55; }
.reviews b { display: block; font-weight: 650; }
.reviews li p span { font-size: 0.9rem; color: var(--slate); }
.stars { display: flex; gap: 2px; color: var(--lamp); }
.stars .icon { width: 18px; height: 18px; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro form" "details form"; grid-template-rows: auto 1fr; gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.contact__intro { grid-area: intro; }
.contact__details { grid-area: details; display: grid; gap: 20px; }
.contact__form { grid-area: form; }
.detail { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.detail__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--lamp); }
.detail dt { font-size: 0.88rem; color: var(--mist); }
.detail dd { font-size: 1.06rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.detail dd a { text-decoration: none; }
.detail dd a:hover { color: var(--lamp); }
.detail dd small { display: block; font-size: 0.92rem; font-weight: 400; color: var(--mist); }
.detail dd small a { text-decoration: underline; text-underline-offset: 3px; }
.detail__icon--wa { background: #25d366; color: var(--white); }
.wa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; justify-self: center; font-weight: 650; text-decoration: none; color: var(--ink); }
.wa-link .icon { width: 20px; height: 20px; color: #128c4b; }
.wa-link span { text-decoration: underline; text-decoration-color: #25d366; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.card { background: var(--white); color: var(--ink); border-radius: 22px; padding: clamp(24px, 3.6vw, 44px); }
.card__head { display: grid; gap: 6px; margin-bottom: 26px; }
.card__head h3 { font-size: 1.6rem; }
.card__head p { color: var(--slate); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field > label, .field > legend { font-weight: 650; font-size: 0.95rem; }
fieldset.field { display: block; }
fieldset.field > legend { margin-bottom: 10px; }
.field .hint { color: var(--slate); font-weight: 400; }
.control {
  width: 100%; min-height: 54px; padding: 13px 15px;
  border: 1.5px solid #cfd6e4; border-radius: 10px; background: var(--white); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.control::placeholder { color: #6b7590; }
.control:hover { border-color: #9aa5bd; }
.control:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 4px rgba(246, 183, 60, 0.35); }
select.control {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1a3a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
textarea.control { min-height: 124px; resize: vertical; line-height: 1.5; }
.control[aria-invalid="true"] { border-color: var(--danger); background: #fff6f5; }
.field__error { color: var(--danger); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.field__error:empty { display: none; }

.segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 12px; background: var(--frost); }
.segment label { position: relative; display: grid; place-items: center; min-height: 46px; border-radius: 9px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.segment input, .picks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment label:has(input:checked) { background: var(--night); color: var(--white); }
.segment label:has(input:focus-visible), .picks label:has(input:focus-visible) { outline: 3px solid var(--lamp); outline-offset: 2px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks label {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid #cfd6e4; border-radius: 999px; background: var(--white); font-weight: 550; font-size: 0.96rem; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent;
}
.picks label:hover { border-color: var(--night); }
.picks label:has(input:checked) { background: var(--night); border-color: var(--night); color: var(--white); }
.picks label .icon { display: none; width: 16px; height: 16px; stroke-width: 3; color: var(--lamp); }
.picks label:has(input:checked) .icon { display: block; }
.parts-pick { display: grid; gap: 8px; }
.parts-pick__row { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; align-items: center; }
.control--qty { min-height: 44px; padding: 8px 12px; text-align: center; }

.order { display: grid; gap: 12px; margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: var(--frost); }
.order__lines { display: grid; gap: 6px; }
.order__lines li, .order__sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.95rem; }
.order__lines li span:first-child { color: var(--slate); }
.order__lines li span:last-child, .order__sum dd { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.order__sum { display: grid; gap: 4px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.order__sum dt { color: var(--slate); }
.order__sum dd { margin: 0; }
.order__sum .order__total { margin-top: 6px; font-size: 1.15rem; }
.order__sum .order__total dt, .order__sum .order__total dd { color: var(--night); font-weight: 750; }
.order__note { font-size: 0.88rem; color: var(--slate); }

.form__foot { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 4px; }
.form__foot small { color: var(--slate); font-size: 0.9rem; text-align: center; }
.form__foot .form__status { color: var(--danger); }
.form__or { display: flex; align-items: center; gap: 14px; color: var(--slate); font-size: 0.9rem; }
.form__or::before, .form__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sent { display: grid; gap: 14px; justify-items: start; }
.sent:focus { outline: none; }
.sent__mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--lamp); color: var(--night); box-shadow: 0 0 0 8px rgba(246, 183, 60, 0.2); }
.sent__mark .icon { width: 30px; height: 30px; stroke-width: 2.6; }
.sent .btn { margin-top: 8px; }
.sent__summary { width: 100%; white-space: pre-line; padding: 14px 16px; border-radius: 12px; background: var(--frost); color: var(--ink); font-size: 0.95rem; }

/* Chat */
.chat-launch {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
  background: var(--night); color: var(--white); font-weight: 650; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -10px rgba(15, 26, 58, 0.7);
  -webkit-tap-highlight-color: transparent;
}
.chat-launch .icon { color: var(--lamp); }
.chat-launch:hover { background: var(--dusk); }
.chat {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; flex-direction: column; width: min(390px, calc(100% - 36px)); height: min(620px, 82%);
  border-radius: 20px; overflow: hidden; background: var(--frost); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(15, 26, 58, 0.6), 0 0 0 1px rgba(15, 26, 58, 0.08);
}
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 18px; background: var(--night); color: var(--white); }
.chat__head img { height: 38px; width: auto; }
.chat__head b { display: block; font-weight: 700; line-height: 1.2; }
.chat__head span { font-size: 0.85rem; color: var(--mist); }
.chat__close { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: none; color: var(--white); cursor: pointer; }
.chat__close:hover { background: rgba(255, 255, 255, 0.1); }
.chat__log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 8px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 0.98rem; line-height: 1.45; overflow-wrap: anywhere; }
.msg--bot { align-self: flex-start; background: var(--white); border-bottom-left-radius: 6px; }
.msg--me { align-self: flex-end; background: var(--night); color: var(--white); border-bottom-right-radius: 6px; }
.msg--typing { display: inline-flex; gap: 5px; padding-block: 15px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b8; animation: typing 1.1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg .textlink { display: inline-block; margin-top: 6px; }
.msg__wa { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; margin-top: 10px; padding: 0 18px; border-radius: 999px; background: #25d366; color: #06301a; font-weight: 650; text-decoration: none; }
.msg__wa .icon { width: 22px; height: 22px; }
.chat__replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 4px; }
.chat__replies:empty { display: none; }
.reply { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--night); border-radius: 999px; background: var(--white); color: var(--night); font-weight: 600; font-size: 0.93rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .reply:hover { background: var(--night); color: var(--white); } }
.chat__form { display: flex; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.chat__input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 1.5px solid #cfd6e4; border-radius: 999px; background: var(--white); }
.chat__input:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 4px rgba(246, 183, 60, 0.35); }
.chat__send { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--lamp); color: var(--night); cursor: pointer; }

/* Privacy policy dialog (single-file preview only) */
.linklike { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.policy { width: min(780px, 94vw); max-width: none; max-height: 88%; padding: 0; border: 0; border-radius: 18px; background: var(--white); color: var(--ink); }
.policy::backdrop { background: rgba(15, 26, 58, 0.8); }
.policy__close { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--frost); color: var(--ink); cursor: pointer; }
.policy__body { display: grid; gap: 12px; padding: clamp(22px, 4vw, 44px); }
.policy__body h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.policy__body h2 { margin-top: 16px; font-size: 1.3rem; line-height: 1.25; }
.policy__body ul { display: grid; gap: 6px; padding-left: 22px; list-style: disc; }
.policy__body .meta { color: var(--slate); }

/* Footer */
.site-footer { background: #0a1229; color: var(--mist); font-size: 0.97rem; }
.site-footer__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 32px clamp(24px, 5vw, 72px); padding-block: clamp(48px, 6vw, 76px); }
.footbrand { display: flex; align-items: center; gap: 16px; color: var(--white); text-decoration: none; justify-self: start; }
.footbrand img { height: 60px; width: auto; }
.footbrand span { font-weight: 700; font-stretch: 86%; font-size: 1.4rem; line-height: 1.05; letter-spacing: -0.02em; }
.site-footer h2 { font-size: 0.95rem; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--white); margin-bottom: 10px; }
.site-footer li a, .site-footer li span { display: inline-block; padding-block: 5px; }
.site-footer a { text-decoration: none; }
.site-footer li a:hover { color: var(--lamp); }
.site-footer__legal { border-top: 1px solid var(--line-night); padding-block: 18px; font-size: 0.88rem; }
.site-footer__map { margin-left: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* Tablet */
@media (max-width: 1180px) {
  .trust__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__card li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust__card li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 1100px) {
  :root { --header: 66px; }
  .menu-toggle { display: inline-flex; }
  .brand img { height: 42px; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 6px var(--gutter) 18px;
    background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(15, 26, 58, 0.45);
  }
  .nav.is-open { display: flex; }
  .nav { align-items: stretch; gap: 4px; padding-top: 10px; max-height: calc(100svh - var(--header)); overflow-y: auto; }
  .nav__link { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 16px; border-radius: 14px; font-size: 1.08rem; }
  .nav__menu { position: static; width: auto; padding: 4px 0 8px 12px; border-radius: 0; box-shadow: none; }
  .nav__menu::before { display: none; }
  .nav__menu a { padding: 10px 14px; }
}
@media (max-width: 1020px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid--three { grid-template-columns: minmax(0, 1fr); }
  .hero::after { background: linear-gradient(90deg, rgba(15, 26, 58, 0.94) 0%, rgba(15, 26, 58, 0.84) 55%, rgba(15, 26, 58, 0.5) 100%), linear-gradient(0deg, rgba(15, 26, 58, 0.55) 0%, rgba(15, 26, 58, 0) 30%); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews { columns: 2; }
  .split, .parts-head { grid-template-columns: minmax(0, 1fr); }
  .split > :first-child, .split > :last-child { grid-column: auto; }
  #faq .split > .stack { position: static; }
  .contact { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "details"; }
  .photo { max-width: 680px; }
}
/* Phone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --roof: 30px; }
  .page-head::after { background: linear-gradient(180deg, rgba(15, 26, 58, 0.55) 0%, rgba(15, 26, 58, 0.9) 100%); }
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero::after { display: none; }
  .hero__photo { position: static; order: 2; z-index: auto; height: auto; aspect-ratio: 5 / 4; object-position: 62% 40%; }
  .hero__copy { padding-block: 40px 32px; gap: 18px; }
  .hero__actions { width: 100%; gap: 12px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .trust__card { grid-template-columns: minmax(0, 1fr); }
  .trust__card li, .trust__card li:nth-child(odd) { border-left: 0; padding: 16px 0; }
  .trust__card li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .services__main { border-radius: 16px; }
  .rows > li { grid-template-columns: minmax(0, 1fr); }
  .svc-grid, .svc-grid--three, .steps--three { grid-template-columns: minmax(0, 1fr); }
  .price-list, .price-list tbody, .price-list tr, .price-list th, .price-list td { display: block; }
  .price-list thead { display: none; }
  .price-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 18px; border-bottom: 1px solid var(--line); }
  .price-list tr:last-child { border-bottom: 0; }
  .price-list th, .price-list td { padding: 0; border: 0; }
  .price-list tbody th { grid-column: 1; }
  .price-list td:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  .price-list td.price { grid-column: 2; grid-row: 1; text-align: right; }
  .price-list td:last-child { grid-column: 1 / -1; text-align: left; width: auto; margin-top: 8px; }
  .gallery {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .gallery::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 84%; scroll-snap-align: start; }
  .shot img { aspect-ratio: 4 / 3; }
  .gallery__hint { display: block; }
  .reviews { columns: 1; }
  .reviews--two { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .card { border-radius: 18px; margin-inline: -6px; }
  .cta-row .btn { display: flex; width: 100%; }
  .site-footer__row { grid-template-columns: minmax(0, 1fr); }
  .chat-launch { right: 14px; min-height: 56px; width: 56px; padding: 0; justify-content: center; }
  .chat-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chat { right: 0; bottom: 0; width: 100%; height: 88%; border-radius: 20px 20px 0 0; }
  /* iOS Safari can clip anything fixed to the bottom edge behind its toolbar, so on phones the
     chat button and panel are placed from the top of the small viewport instead. */
  @supports (height: 100svh) {
    .chat-launch { top: calc(100svh - 72px); bottom: auto; }
    .chat { top: 12svh; bottom: auto; height: 88svh; }
  }
  .site-footer__legal { padding-bottom: 84px; }
}
@media (max-width: 430px) {
  .site-header__row { gap: 12px 14px; }
  .brand img { height: 38px; }
  .btn .long { display: none; }
  .btn .short { display: inline; }
  .btn--small { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .roofline .lamp { animation: none; opacity: 0.92; }
  .msg--typing i { animation: none; }
  .btn, .nav__link, .nav__chev, .faq summary::after, .menu-toggle span::before, .menu-toggle span::after, .shot img { transition: none; }
}

/* ---------- Wholesale catalogue, order request and contact ---------- */

/* Header order button with a count */
.order-btn { gap: 8px; }
.order-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--night); color: var(--lamp); font-size: 0.8rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.order-count[hidden] { display: none; }
.order-btn.is-active { box-shadow: 0 0 0 3px rgba(246, 183, 60, 0.35); }

/* Jump links under the products header */
.cat-jump { position: sticky; top: var(--header); z-index: 15; background: var(--white); border-bottom: 1px solid var(--line); }
.cat-jump ul { display: flex; gap: 8px; margin: 0; padding: 12px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cat-jump ul::-webkit-scrollbar { display: none; }
.cat-jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--line); color: var(--ink); font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.cat-jump a:hover { border-color: var(--night); }
.cat-section { scroll-margin-top: calc(var(--header) + 66px); }
.cat-section.band { padding-block: clamp(56px, 7vw, 96px); }

/* Order bar on the products page */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--night); color: var(--white); box-shadow: 0 -14px 30px -18px rgba(15, 26, 58, 0.8);
}
.order-bar[hidden] { display: none; }
.order-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding-right: calc(var(--gutter) + 210px); }
.order-bar p { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
body:has(.order-bar:not([hidden])) .site-footer__legal { padding-bottom: 96px; }

/* Order request page */
.order-empty { display: grid; gap: 16px; justify-items: start; max-width: 640px; }
.order-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(28px, 5vw, 72px); align-items: start; }
.order-items { gap: 18px; }
.table-scroll { overflow-x: auto; }
.order-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.order-table th, .order-table td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.order-table thead th { padding-top: 0; font-size: 0.85rem; font-weight: 650; color: var(--slate); }
.order-table tbody th { font-weight: 650; }
.order-table small { display: block; font-size: 0.84rem; font-weight: 400; color: var(--slate); }
.order-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-table .control--qty { width: 84px; min-height: 44px; padding: 0 10px; }
.order-table .remove { font-size: 0.9rem; color: var(--slate); }
.order-table .remove:hover { color: var(--danger); }
.order-items .order__sum { max-width: 420px; margin-left: auto; width: 100%; }
.order-card { position: sticky; top: calc(var(--header) + 20px); background: var(--frost); }
.order-card .form__status { color: var(--danger); min-height: 1.2em; margin: 8px 0 0; }
.order-card .wa-link { justify-self: start; }
.order-sent { display: grid; gap: 16px; max-width: 720px; background: var(--frost); }
.order-sent pre { margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--white); font: inherit; font-size: 0.92rem; white-space: pre-wrap; }
.order-sent[hidden] { display: none; }
.order-sent:focus { outline: none; }

/* Contact page */
.contact__list { display: grid; gap: 14px; margin: 8px 0 0; }
.contact__list div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-night); }
.contact__list dt { color: var(--mist); }
.contact__list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.contact__list a { text-decoration-color: var(--lamp); text-underline-offset: 4px; }
#contact-form .form__status { color: var(--danger); min-height: 1.2em; margin: 8px 0 0; }
.contact-sent { display: grid; gap: 8px; }
.contact-sent[hidden] { display: none; }

@media (max-width: 1020px) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .order-card { position: static; }
}
@media (max-width: 760px) {
  .order-bar .wrap { padding-right: calc(var(--gutter) + 64px); }
  .order-bar p { font-size: 0.9rem; line-height: 1.35; }
  .order-bar .btn { flex: none; }
  .order-bar .btn { min-height: 48px; padding-inline: 16px; }
  /* the table becomes stacked rows on phones */
  .order-table thead { display: none; }
  .order-table, .order-table tbody, .order-table tr { display: block; }
  .order-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .order-table th, .order-table td { padding: 0; border: 0; }
  .order-table tbody th { grid-column: 1 / -1; }
  .order-table td:nth-of-type(1) { grid-row: 2; grid-column: 1; text-align: left; }
  .order-table td:nth-of-type(3) { grid-row: 2; grid-column: 2; font-weight: 700; }
  .order-table td:nth-of-type(2) { grid-row: 3; grid-column: 1; }
  .order-table td:nth-of-type(4) { grid-row: 3; grid-column: 2; align-self: center; text-align: right; }
}
@media (max-width: 560px) {
  .contact__list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Night roofline ----------
   The site is set like a lit roofline after dark: deep midnight, the warm amber of the lamps,
   and the brushed aluminium of the track. Big Shoulders Display (a typeface drawn from street
   and storefront signage) carries the headlines; Instrument Sans carries everything else.
   The one moving moment is the hero's roofline lighting up on load. */
:root {
  --night: #0b1431;      /* midnight sky: dark bands, headings on light */
  --dusk: #17244d;       /* the sky just above the roofline */
  --lamp: #f6b73c;       /* the lamp: buttons, links, the roofline */
  --glow: #ffd98a;       /* the hot centre of a lamp */
  --lamp-deep: #8f620a;  /* lamp colour that passes contrast on light surfaces */
  --alu: #c9d0dc;        /* brushed aluminium: muted text on dark */
  --frost: #f2f4f8;      /* light surface */
  --ink: #10182f;
  --slate: #4f5a74;
  --mist: #aeb8cf;
  --line: #dde2eb;
  --line-night: rgba(201, 208, 220, 0.16);
  --display: "Big Shoulders Display", "Arial Narrow", "DejaVu Sans Condensed", sans-serif;
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --r-btn: 6px;
}
body { font-family: var(--font); font-size: 17px; line-height: 1.6; }

h1, h2 { font-family: var(--display); font-weight: 800; font-stretch: normal; letter-spacing: -0.005em; line-height: 0.92; }
h1 { font-size: clamp(3.4rem, 8vw, 7rem); }
h2 { font-size: clamp(2.5rem, 4.8vw, 4.1rem); }
h3 { font-family: var(--font); font-stretch: normal; font-weight: 650; letter-spacing: -0.005em; }
.card__head h3 { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; }
.lead { color: var(--slate); }

.btn { font-weight: 600; letter-spacing: 0.005em; }
.btn:hover { background: var(--glow); box-shadow: 0 0 0 6px rgba(246, 183, 60, 0.16), 0 0 28px rgba(246, 183, 60, 0.35); }

/* Inner page headers */
.page-head { padding-block: clamp(96px, 12vw, 170px) clamp(56px, 7vw, 96px); background: var(--night); }
.page-head::after { background: linear-gradient(90deg, rgba(11, 20, 49, 0.97) 0%, rgba(11, 20, 49, 0.86) 42%, rgba(11, 20, 49, 0.45) 78%, rgba(11, 20, 49, 0.3) 100%); }
.page-head h1 { font-size: clamp(3.2rem, 7vw, 6rem); }
.page-head .lead { color: var(--alu); }
.band--night, .band--navy { background: var(--night); }
.band--night .lead, .band--navy .lead { color: var(--alu); }

/* ---------- Home: hero ---------- */
.hero { min-height: clamp(560px, calc(100svh - var(--header) - 24px), 820px); align-items: flex-end; }
.hero::after {
  background:
    linear-gradient(90deg, rgba(11, 20, 49, 0.9) 0%, rgba(11, 20, 49, 0.66) 34%, rgba(11, 20, 49, 0.12) 62%, rgba(11, 20, 49, 0) 100%),
    linear-gradient(0deg, rgba(11, 20, 49, 0.55) 0%, rgba(11, 20, 49, 0) 28%);
}
.hero__copy { max-width: 780px; display: grid; gap: 26px; padding-block: 64px calc(var(--roof) + 64px); }
.hero__copy h1 { max-width: 11ch; color: var(--white); text-shadow: 0 2px 30px rgba(11, 20, 49, 0.5); }
.hero__side { display: grid; gap: 22px; margin-left: clamp(0px, 4vw, 56px); padding-left: 20px; border-left: 3px solid var(--lamp); }
.hero__copy .hero__side p { color: #dfe4f0; max-width: 40ch; }
.hero + .roofline + .proof { padding-top: calc(var(--roof) * 0.25); }

/* Credibility line under the roofline */
.proof { background: var(--white); color: var(--ink); }
.proof ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 34px 40px; border-bottom: 1px solid var(--line); }
.proof li { display: grid; gap: 4px; padding: 4px 24px; border-left: 1px solid var(--line); }
.proof li:first-child { padding-left: 0; border-left: 0; }
.proof b { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--night); }
.proof span { font-size: 0.95rem; color: var(--slate); }

/* The big idea */
.idea { background: var(--white); color: var(--ink); padding-block: clamp(72px, 9vw, 130px); }
.idea .wrap { display: grid; gap: clamp(48px, 6vw, 80px); }
.idea__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px clamp(40px, 7vw, 120px); align-items: end; }
.idea h2 { font-size: clamp(3rem, 6.4vw, 5.6rem); }
.idea__text { display: grid; gap: 18px; align-content: end; padding-bottom: 6px; border-left: 3px solid var(--lamp); padding-left: 24px; }
.idea__text p { color: var(--slate); font-size: 1.1rem; max-width: 46ch; }
.idea__text p:first-child { color: var(--ink); font-size: 1.28rem; line-height: 1.5; }

/* Anatomy of a roofline: the product showcase */
.anatomy { background: var(--night); color: var(--white); padding-block: clamp(64px, 8vw, 110px) clamp(80px, 10vw, 140px); }
.anatomy__title { margin-bottom: clamp(28px, 4vw, 44px); max-width: 16ch; }
.anatomy__fig { margin: 0 0 clamp(36px, 5vw, 56px); border-radius: 18px; background: radial-gradient(90% 120% at 42% 0%, #22346c 0%, var(--dusk) 38%, #0e1a3d 100%); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-night); }
.anatomy__fig svg { width: 100%; height: auto; aspect-ratio: 1000 / 420; }
.anatomy__fig figcaption { padding: 0 24px 20px; font-size: 0.92rem; color: var(--mist); }
.anatomy__parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); counter-reset: none; }
.anatomy__parts li { border-top: 1px solid var(--line-night); }
.anatomy__parts a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 22px 0 26px; text-decoration: none; }
.anatomy__parts .num { grid-row: span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lamp); color: var(--night); font-weight: 700; font-size: 0.95rem; box-shadow: 0 0 18px rgba(246, 183, 60, 0.45); }
.anatomy__parts b { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1.05; }
.anatomy__parts span { color: var(--alu); font-size: 0.97rem; }
.anatomy__parts em { font-style: normal; font-weight: 650; color: var(--glow); }
.anatomy__parts a:hover b { color: var(--glow); }
.anatomy__more { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; color: var(--alu); }

/* Most ordered, on the home page */
.picks-band { padding-block: clamp(72px, 9vw, 120px); background: var(--frost); }
.picks-band .wrap { display: grid; gap: 36px; }
.picks-band .stack { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: 16px clamp(32px, 6vw, 96px); }

/* Ordering steps along a run of track */
.run { padding-block: clamp(80px, 10vw, 136px); background: var(--night); color: var(--white); }
.run h2 { max-width: 12ch; }
.run__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); padding-top: 46px; }
.run__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #d9dfe9, #9aa5ba); opacity: 0.55; }
.run__steps li { position: relative; display: grid; gap: 10px; align-content: start; }
.run__steps li::before { content: ""; position: absolute; left: 0; top: -44px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0 28%, var(--lamp) 30% 62%, rgba(246, 183, 60, 0) 64%); box-shadow: 0 0 26px 6px rgba(246, 183, 60, 0.4); }
.run__steps b { font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.run__steps p { color: var(--alu); max-width: 34ch; }

/* Questions */
.faq-band { padding-block: clamp(72px, 9vw, 120px); background: var(--frost); }
.faq-band .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 7vw, 120px); }
.faq-band .faq details { background: var(--white); }

/* Final call to action */
.closer { position: relative; overflow: hidden; padding-block: clamp(90px, 12vw, 170px); background: var(--night); color: var(--white); }
.closer { padding-bottom: clamp(150px, 16vw, 230px); }
.closer__lights { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 12vw, 170px); pointer-events: none; }
.closer__lights svg { width: 100%; height: 100%; }
.closer .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.closer h2 { font-size: clamp(3.4rem, 8vw, 7rem); max-width: 8ch; }
.closer__side { display: grid; gap: 22px; }
.closer__side p { color: var(--alu); }
.closer__phone { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; color: var(--glow); text-decoration: none; }
.closer__phone:hover { text-shadow: 0 0 24px rgba(246, 183, 60, 0.6); }

/* ---------- Product rows: a trade price list rather than cards ---------- */
.plist { display: grid; border-top: 2px solid var(--night); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) 252px; gap: 14px 28px; align-items: start; padding: 24px 0 22px; border-bottom: 1px solid var(--line); }
.prow__main { display: grid; gap: 6px; }
.prow .product__name { font-family: var(--display); font-weight: 800; font-size: 1.85rem; line-height: 1; letter-spacing: 0; }
.prow .product__desc { color: var(--slate); font-size: 0.98rem; max-width: 52ch; }
.prow__specs { font-size: 0.88rem; color: var(--slate); }
.prow__specs span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px; border-radius: 50%; background: var(--lamp); vertical-align: middle; }
.prow .product__opts { display: grid; gap: 10px; }
.prow .product__opt { display: grid; gap: 3px; }
.prow .product__opt label { font-size: 0.85rem; font-weight: 600; color: var(--slate); }
.prow .product__opt .control { min-height: 42px; padding: 0 10px; font-size: 0.95rem; }
.prow__buy { display: grid; gap: 10px; justify-items: stretch; }
.prow .product__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--night); }
.prow .product__price b { font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.prow .product__price small, .prow .product__from { font-size: 0.88rem; color: var(--slate); }
.product__from[hidden] { display: none; }
.prow .product__buy { display: flex; gap: 8px; }
.product__qty { display: flex; align-items: stretch; border: 1.5px solid #c3cad8; border-radius: var(--r-btn); overflow: hidden; background: var(--white); }
.product__qty button { width: 34px; border: 0; background: var(--frost); color: var(--night); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.product__qty button:hover { background: #e2e7f0; }
.product__qty .control { width: 46px; min-height: 46px; padding: 0; border: 0; border-radius: 0; text-align: center; -moz-appearance: textfield; }
.product__qty .control::-webkit-outer-spin-button, .product__qty .control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prow .product__add { flex: 1; min-height: 48px; padding-inline: 12px; font-size: 0.95rem; }
.product__added { min-height: 1.3em; font-size: 0.88rem; font-weight: 650; color: #1d7a45; }
.prow--quoted .product__price b { font-size: 1.7rem; }

/* Products page: each category is a section with its name held on the left */
.cat-block { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.cat-block:first-of-type { border-top: 0; }
.cat-block .wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 28px clamp(28px, 5vw, 72px); }
.cat-block__head { position: sticky; top: calc(var(--header) + 86px); align-self: start; display: grid; gap: 12px; }
.cat-block__head h2 { font-size: clamp(2.6rem, 4vw, 3.6rem); }
.cat-block__head p { color: var(--slate); font-size: 0.97rem; }
.cat-block__head .count { font-weight: 650; color: var(--lamp-deep); }
.cat-jump { background: rgba(255, 255, 255, 0.96); }
.cat-jump a { border-radius: var(--r-btn); }
.cat-section { scroll-margin-top: calc(var(--header) + 70px); }

/* Order and contact pages pick up the new type */
.order-empty h2, .order-items > h2, .order-sent h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.order-table tbody th { font-weight: 650; }

@media (max-width: 1100px) {
  .prow { grid-template-columns: minmax(0, 1fr) 252px; }
  .prow__main { grid-column: 1 / -1; }
  .prow .product__opts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-self: end; }
  .prow .product__opts:empty { display: none; }
}
@media (max-width: 1020px) {
  .hero__copy { grid-template-columns: minmax(0, 1fr); }
  .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .proof li:nth-child(3) { padding-left: 0; border-left: 0; }
  .idea__top, .picks-band .wrap, .faq-band .wrap, .closer .wrap, .cat-block .wrap { grid-template-columns: minmax(0, 1fr); }
  .idea__text { padding-left: 18px; }
  .cat-block__head { position: static; }
  .picks-band .stack { grid-template-columns: minmax(0, 1fr); }
  .anatomy__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  h1 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .hero__copy { padding-block: 40px 32px; }
  .hero__copy h1 { max-width: none; }
  .hero__side { margin-left: 0; }
  .anatomy__fig svg { aspect-ratio: 480 / 420; }
  .anatomy__parts { grid-template-columns: minmax(0, 1fr); }
  .run__steps { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 46px; }
  .run__steps::before { left: 11px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; }
  .run__steps li::before { left: -46px; top: 2px; }
  .prow { grid-template-columns: minmax(0, 1fr); }
  .prow .product__opts { align-self: auto; }
}
@media (max-width: 560px) {
  .proof ul { grid-template-columns: minmax(0, 1fr); }
  .proof li { padding-left: 0; border-left: 0; }
}

/* ---------- Questions: each one its own row, the open one lit along its edge ---------- */
.faq { display: grid; gap: 10px; border-top: 0; }
.faq details { border: 0; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.faq details[open] { box-shadow: inset 4px 0 0 var(--lamp), inset 0 0 0 1px var(--line), 0 18px 40px -28px rgba(11, 20, 49, 0.45); }
.faq summary { min-height: 74px; padding: 18px 22px 18px 26px; font-size: 1.1rem; font-weight: 650; border-radius: 14px; }
.faq summary:hover { color: var(--lamp-deep); }
.faq summary::after { width: 34px; height: 34px; background-color: var(--frost); box-shadow: inset 0 0 0 1.5px var(--line); }
.faq details[open] summary::after, .band--paper .faq details[open] summary::after { background-color: var(--lamp); box-shadow: 0 0 16px rgba(246, 183, 60, 0.5); }
.faq details p { padding: 0 26px 24px; max-width: 64ch; color: var(--slate); }
.faq .cta-row { margin-top: 14px; }
.faq-band .stack .faq-band__more { display: grid; gap: 4px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.faq-band__more a { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.1; color: var(--night); text-decoration: none; }
.faq-band__more a:hover { color: var(--lamp-deep); }

/* ---------- Currency switch in the header ---------- */
.cur-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--line); }
.cur-switch button { min-width: 48px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--slate); font-size: 0.85rem; font-weight: 650; cursor: pointer; }
.cur-switch button[aria-pressed="true"] { background: var(--night); color: var(--white); }
.cur-switch button:hover:not([aria-pressed="true"]) { color: var(--night); }

/* ---------- Order request page ---------- */
.order-items { display: grid; gap: 20px; align-content: start; }
.order-items__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.order-items__head p { color: var(--slate); font-weight: 600; }
.order-table thead th { border-bottom: 2px solid var(--night); }
.order-table tbody th b { display: block; font-weight: 650; }
.order-items__tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.order-items__tools .linklike { color: var(--slate); font-size: 0.92rem; }
.order-sum { max-width: none; margin-left: 0; padding: 20px 22px; border: 0; border-radius: 14px; background: var(--frost); }
.order-sum div { padding-block: 4px; }
.order-sum .order__total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.order-sum .order__total dd { font-family: var(--display); font-weight: 800; font-size: 1.9rem; }
.order-next { margin-top: 10px; padding: 24px; border-radius: 14px; background: var(--night); color: var(--white); }
.order-next h3 { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; margin-bottom: 18px; }
.order-next ol { display: grid; gap: 16px; counter-reset: next; }
.order-next li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 14px; counter-increment: next; }
.order-next li::before { content: counter(next); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lamp); color: var(--night); font-weight: 700; font-size: 0.9rem; }
.order-next b { font-weight: 650; }
.order-next span { color: var(--alu); font-size: 0.95rem; }
.order-card { padding: clamp(22px, 3vw, 34px); }
.order-card > .form { gap: 22px; }
.form-group { display: grid; gap: 14px; min-width: 0; padding: 0; margin: 0; border: 0; }
.form-group legend { padding: 0 0 12px; margin-bottom: 4px; width: 100%; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1; color: var(--night); }
.form-group legend .hint { font-family: var(--font); font-size: 0.85rem; font-weight: 500; color: var(--slate); }
.form-group > .form { gap: 14px 16px; }
.order-card select.control { min-height: 50px; }

@media (max-width: 760px) {
  .cur-switch button { min-width: 42px; min-height: 34px; padding: 0 8px; }
  .faq summary { padding: 16px 16px 16px 18px; font-size: 1.02rem; }
  .faq details p { padding: 0 18px 20px; }
  .order-next { padding: 20px; }
}
@media (max-width: 760px) {
  .hero { min-height: calc(100svh - var(--header)); justify-content: flex-end; }
  .hero::after { display: block; background: linear-gradient(180deg, rgba(11, 20, 49, 0.2) 0%, rgba(11, 20, 49, 0.55) 38%, rgba(11, 20, 49, 0.94) 78%); }
  .hero__photo { position: absolute; inset: 0; order: 0; z-index: -2; height: 100%; aspect-ratio: auto; object-position: 66% 30%; }
  .hero__copy { padding-block: 120px calc(var(--roof) + 40px); }
}
@media (max-width: 430px) {
  .site-header__row { gap: 10px; }
  .brand img { height: 38px; }
  .cur-switch button { min-width: 38px; padding: 0 6px; font-size: 0.8rem; }
}

/* ---------- Installation guide ---------- */
.guide__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 32px clamp(32px, 6vw, 96px); }
.guide__toc { position: sticky; top: calc(var(--header) + 28px); align-self: start; display: grid; gap: 12px; }
.guide__toc p { font-weight: 650; color: var(--slate); font-size: 0.92rem; }
.guide__toc ol { display: grid; gap: 2px; border-left: 2px solid var(--line); }
.guide__toc a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; font-size: 0.97rem; }
.guide__toc a:hover { border-left-color: var(--lamp); color: var(--lamp-deep); }
.guide__body { display: grid; gap: 40px; min-width: 0; }
.guide__before { padding: 24px 26px; border-radius: 14px; background: var(--frost); display: grid; gap: 10px; }
.guide__before h2 { font-size: 2rem; }
.guide__before p { color: var(--slate); max-width: 68ch; }
.guide__steps { display: grid; gap: 0; counter-reset: gs; }
.guide-step { position: relative; display: grid; gap: 14px; padding: 34px 0 38px 84px; border-top: 1px solid var(--line); counter-increment: gs; scroll-margin-top: calc(var(--header) + 20px); }
.guide-step::before { content: counter(gs); position: absolute; left: 0; top: 30px; width: 56px; font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--lamp); text-shadow: 0 0 22px rgba(246, 183, 60, 0.35); }
.guide-step h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.guide-step p { color: var(--slate); max-width: 66ch; font-size: 1.04rem; }
.ticks-plain { display: grid; gap: 10px; max-width: 66ch; }
.ticks-plain li { position: relative; padding-left: 22px; color: var(--slate); }
.ticks-plain li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 8px rgba(246, 183, 60, 0.7); }
.ticks-plain b { color: var(--ink); }

.calc-band { background: var(--frost); color: var(--ink); }
.calc2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.calc2__intro { display: grid; gap: 16px; }
.calc2__intro .lead { color: var(--slate); }
.calc2__intro .note { color: var(--slate); font-size: 0.95rem; }
.calc2__panel { display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.calc2__inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.calc2__table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.calc2__table th, .calc2__table td { padding: 11px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.calc2__table thead th { font-size: 0.85rem; color: var(--slate); font-weight: 650; border-bottom: 2px solid var(--night); }
.calc2__table tbody th { font-weight: 650; }
.calc2__table small { display: block; font-weight: 400; color: var(--slate); font-size: 0.85rem; }
.calc2__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc2__table tfoot th, .calc2__table tfoot td { border-bottom: 0; padding-top: 14px; font-weight: 700; }
.calc2__table tfoot td.num { font-family: var(--display); font-weight: 800; font-size: 1.7rem; }

/* Try it section on the home page */
.seeit .lead { color: var(--slate); }
.seeit .ticks li { color: var(--ink); }

@media (max-width: 1020px) {
  .guide__layout, .calc2 { grid-template-columns: minmax(0, 1fr); }
  .guide__toc { position: static; }
  .guide__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; }
}
@media (max-width: 560px) {
  .guide-step { padding-left: 0; padding-top: 74px; }
  .guide-step::before { top: 26px; }
  .calc2__inputs { grid-template-columns: minmax(0, 1fr); }
  .guide__toc ol { grid-template-columns: minmax(0, 1fr); }
}

/* Order page: starting points when empty, small parts when filled */
.order-empty { max-width: none; display: grid; gap: 36px; justify-items: stretch; }
.order-empty__head { display: grid; gap: 12px; max-width: 720px; }
.start-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start-ways a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 24px; border-radius: 16px; background: var(--night); color: var(--white); text-decoration: none; }
.start-ways b { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.start-ways span { color: var(--alu); font-size: 0.97rem; }
.start-ways em { margin-top: 6px; font-style: normal; font-weight: 650; color: var(--glow); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.start-ways a:hover { box-shadow: 0 0 0 3px var(--lamp); }
.order-empty__picks, .order-extras { display: grid; gap: 16px; }
.order-empty__picks h3, .order-extras h3 { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.order-extras { margin-top: clamp(48px, 6vw, 80px); }
.order-extras__head { display: grid; gap: 6px; }
.order-extras__head p { color: var(--slate); max-width: 60ch; }
.order-band + .proof ul { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .start-ways { grid-template-columns: minmax(0, 1fr); } }

/* One system, every holiday: a row of small lit rooflines */
.idea__year { display: grid; gap: 22px; }
.idea__year h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1; }
.occasion-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.occasion-row li { display: grid; gap: 2px; align-content: start; }
.occasion__art { display: block; margin-bottom: 12px; border-radius: 14px; background: radial-gradient(90% 120% at 50% 0%, #22346c, var(--night) 70%); overflow: hidden; }
.occasion__art svg { display: block; width: 100%; height: auto; aspect-ratio: 200 / 96; padding: 10px 6px 0; }
.occasion-row b { font-weight: 650; font-size: 1.02rem; }
.occasion-row span { color: var(--slate); font-size: 0.92rem; }
.occasion-row small { color: var(--lamp-deep); font-weight: 650; font-size: 0.82rem; }
@media (max-width: 1020px) { .occasion-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; } }
@media (max-width: 560px) { .occasion-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Out of stock */
.stock-tag { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: #fde8e6; color: #9b2a22; font-family: var(--font); font-size: 0.8rem; font-weight: 650; vertical-align: middle; letter-spacing: 0; }
.product__add:disabled { background: var(--frost); color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--line); cursor: not-allowed; }

/* ---------- Try it pop-up ---------- */
html.modal-open { overflow: hidden; }
.tryit-modal { width: min(1240px, calc(100vw - 32px)); height: min(920px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--white); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(11, 20, 49, 0.7); }
.tryit-modal[open] { display: flex; flex-direction: column; }
.tryit-modal::backdrop { background: rgba(11, 20, 49, 0.72); backdrop-filter: blur(3px); }
.tryit-modal__bar { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 22px; border-bottom: 1px solid var(--line); }
.tryit-modal__bar b { margin-right: auto; font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--night); }
.tryit-modal__bar .textlink { font-size: 0.92rem; }
.tryit-modal__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--frost); color: var(--night); cursor: pointer; }
.tryit-modal__close:hover { background: var(--lamp); }
.tryit-modal iframe { flex: 1; width: 100%; border: 0; background: var(--white); }
@media (max-width: 760px) {
  .tryit-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .tryit-modal__bar { padding-left: 16px; }
  .tryit-modal__bar .textlink { display: none; }
}

/* The Try it page inside the pop-up: only the tool */
.is-embed { --header: 0px; }
.is-embed .site-header, .is-embed .site-footer, .is-embed .chat-launch, .is-embed .chat, .is-embed .page-head, .is-embed .skip, .is-embed .order-bar { display: none !important; }
.is-embed #visualizer { padding-top: 24px; }

/* ---------- Floating Try it button (bottom left; the chat sits bottom right) ---------- */
.tryit-fab {
  position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 16px; border-radius: 999px;
  background: var(--night); color: var(--white); font-weight: 650; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -10px rgba(11, 20, 49, 0.7);
  -webkit-tap-highlight-color: transparent;
}
.tryit-fab:hover { background: var(--dusk); }
.tryit-fab__dots { display: grid; grid-template-columns: repeat(2, 9px); gap: 4px; }
.tryit-fab__dots i { width: 9px; height: 9px; border-radius: 50%; }
.tryit-fab__dots i:nth-child(1) { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.tryit-fab__dots i:nth-child(2) { background: #39d353; box-shadow: 0 0 8px #39d353; }
.tryit-fab__dots i:nth-child(3) { background: #3aa0ff; box-shadow: 0 0 8px #3aa0ff; }
.tryit-fab__dots i:nth-child(4) { background: var(--lamp); box-shadow: 0 0 8px var(--lamp); }
body:has(.order-bar:not([hidden])) .tryit-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
html.modal-open .tryit-fab, .is-embed .tryit-fab { display: none; }
@media print { .tryit-fab { display: none; } }
@media (max-width: 760px) {
  .tryit-fab { left: 12px; min-height: 44px; padding: 0 14px 0 12px; gap: 8px; font-size: 0.9rem; }
  .tryit-fab__dots { grid-template-columns: repeat(2, 7px); gap: 3px; }
  .tryit-fab__dots i { width: 7px; height: 7px; }
  .tryit-fab__text { font-size: 0; }
  .tryit-fab__text::after { content: "Try it"; font-size: 0.9rem; }
}