:root {
  --navy:#102f3d;
  --navy-deep:#0b2632;
  --orange:#f28a49;
  --ink:#173542;
  --muted:#5b6b70;
  --paper:#fff;
  --tint:#f1f4f3;
  --line:#dce3e3;
  --max:1180px;
  --radius:3px;
  --space:clamp(64px,7vw,100px);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:105px;
}

body {
  margin:0;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.65;
  background:var(--paper);
}

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

button {
  font:inherit;
  cursor:pointer;
}

img {
  max-width:100%;
  display:block;
}

svg {
  display:block;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  line-height:1.15;
}

h2 {
  font-size:clamp(29px,3.1vw,40px);
  font-weight:600;
  letter-spacing:-1.2px;
}

h3 {
  font-size:21px;
  letter-spacing:-.4px;
}

a,button {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
  outline:3px solid #d36b2c;
  outline-offset:5px;
}

.container {
  width:min(var(--max),calc(100% - 48px));
  margin-inline:auto;
}

.section {
  padding-block:var(--space);
}

.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:1.8px;
  margin-bottom:20px;
}

.eyebrow>span {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--orange);
  margin-right:8px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  min-height:50px;
  padding:12px 23px;
  background:var(--orange);
  color:var(--navy-deep);
  border:1px solid var(--orange);
  border-radius:var(--radius);
  font-size:13px;
  font-weight:700;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:#ff9d60;
  transform:translateY(-2px);
}

.button span {
  font-size:20px;
  line-height:1;
}

.button-small {
  padding:10px 15px;
  min-height:42px;
  gap:15px;
  font-size:12px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  font-weight:700;
  min-height:44px;
}

.text-link span {
  color:#aa4f19;
  font-size:20px;
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.text-link.light span {
  color:var(--orange);
}

.skip-link {
  position:fixed;
  left:15px;
  top:-100px;
  z-index:50;
  background:white;
  padding:12px;
}

.skip-link:focus {
  top:10px;
}

.site-header {
  background:var(--navy);
  color:white;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid #ffffff17;
}

.header-inner {
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.brand {
  display:block;
  flex-shrink:0;
  width:220px;
}

.brand img {
  width:100%;
  height:auto;
}

.navigation {
  display:flex;
  align-items:center;
  gap:27px;
  font-size:12px;
}

.navigation>a:not(.button) {
  padding:12px 0;
}

.navigation>a:hover,.navigation>a[aria-current] {
  color:var(--orange);
}

.navigation>.button:hover {
  color:var(--navy);
}

.menu-toggle {
  display:none;
}

.hero {
  background:var(--navy);
  color:white;
  padding:36px 0 56px;
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 1.08fr;
  align-items:center;
  gap:55px;
}

.hero-copy {
  padding:24px 0;
}

.hero .eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  color:#d2dde0;
}

.hero h1 {
  font-size:clamp(36px,3.65vw,49px);
  font-weight:500;
  line-height:1.14;
  letter-spacing:-1.5px;
  max-width:490px;
}

.hero h1 em {
  font-style:normal;
  color:var(--orange);
}

.hero-description {
  color:#c6d2d6;
  font-size:16px;
  line-height:1.8;
  max-width:415px;
  margin-top:25px;
}

.actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
  margin-top:30px;
}

.hero-note {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid #ffffff21;
  color:#c6d2d6;
  font-size:12px;
}

.hero-note>span {
  font-size:24px;
  color:var(--orange);
}

.hero-visual {
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#c4cccb;
}

.hero-visual>img {
  width:100%;
  height:460px;
  object-fit:cover;
}

.hero-visual figcaption {
  position:absolute;
  top:17px;
  left:17px;
  right:17px;
  color:var(--navy);
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
}

.image-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  background:var(--navy-deep);
  font-size:12px;
}

.image-caption>span:last-child {
  color:var(--orange);
  font-size:22px;
}

.service-strip {
  background:#edf1f1;
  border-bottom:1px solid var(--line);
}

.service-strip>.container {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:20px;
  font-size:12px;
}

.service-strip span:before {
  content:'';
  display:inline-block;
  width:12px; height:7px;
  border-left:2px solid #976027; border-bottom:2px solid #976027;
  transform:rotate(-45deg); vertical-align:3px;
  margin-right:12px;
  color:#976027;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:40px;
}

.section-heading>p {
  max-width:390px;
  font-size:14px;
  color:var(--muted);
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.service {
  padding:32px 30px 28px 0;
}

.service+.service {
  border-left:1px solid var(--line);
  padding-left:30px;
}

.service-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px;
}

.service-top svg {
  width:36px;
  height:36px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.service-top>span {
  font-size:11px;
  color:var(--muted);
}

.service p {
  font-size:14px;
  color:var(--muted);
  margin:17px 0;
  min-height:72px;
}

.accessories {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-top:33px;
}

.accessories .eyebrow {
  font-size:9px;
  margin-bottom:7px;
  color:var(--muted);
}

.accessories h3 {
  font-size:17px;
}

.accessories ul {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  padding:0;
  gap:12px 24px;
  font-size:13px;
}

.accessories li:before {
  content:'·';
  color:#ac531d;
  margin-right:10px;
}

.about {
  background:var(--tint);
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
}

.about-grid>div>p:not(.eyebrow) {
  color:var(--muted);
  font-size:14px;
  margin:25px 0 15px;
  max-width:420px;
}

.principles article {
  display:flex;
  gap:25px;
  padding:24px 0;
  border-bottom:1px solid #d2dcdc;
}

.principles article:first-child {
  padding-top:0;
}

.principles article>span {
  color:#a85a29;
  font-size:11px;
  padding-top:3px;
}

.principles h3 {
  font-size:18px;
}

.principles p {
  font-size:14px;
  color:var(--muted);
  margin-top:10px;
}

.gallery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.gallery figure {
  min-width:0;
}

.gallery-image {
  background:#e1e5e2;
  position:relative;
  overflow:hidden;
}

.gallery img {
  width:100%;
  height:250px;
  object-fit:cover;
}

.gallery button {
  display:block;
  padding:0;
  width:100%;
  border:0;
  text-align:left;
  background:transparent;
  color:inherit;
}

.gallery button:hover img {
  filter:brightness(1.06);
}

.placeholder-tag {
  position:absolute;
  left:12px;
  bottom:12px;
  background:#f8f9f2e8;
  padding:4px 9px;
  font-size:9px;
  letter-spacing:.7px;
  color:var(--navy);
}

.gallery figcaption {
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:14px;
  font-weight:600;
}

.gallery figcaption>span {
  color:var(--muted);
  font-size:11px;
  font-weight:400;
}

.gallery-disclaimer {
  font-size:11px;
  color:var(--muted);
  margin-top:25px;
}

.process {
  background:var(--tint);
  padding-block:60px;
}

.process h2 {
  font-size:30px;
}

.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  list-style:none;
  margin:38px 0 0;
  padding:0;
}

.steps li {
  border-top:1px solid #c9d5d8;
  padding-top:17px;
}

.steps li>span {
  color:#9d4b1b;
  font-size:12px;
}

.steps h3 {
  font-size:16px;
  margin:12px 0;
}

.steps p {
  font-size:13px;
  color:var(--muted);
}

.contact {
  background:var(--navy);
  color:white;
}

.contact-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:110px;
}

.contact .eyebrow {
  color:var(--orange);
}

.contact h2 {
  line-height:1.18;
}

.contact-grid>div>p:not(.eyebrow) {
  font-size:14px;
  color:#c6d2d6;
  margin:22px 0 27px;
}

.contact-details {
  padding:8px 0;
}

.contact-details h3 {
  font-size:18px;
  margin-bottom:23px;
}

.contact-row {
  border-bottom:1px solid #ffffff25;
  padding:14px 0;
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:3px;
}

.contact-row>span {
  color:#b5c5cb;
  font-size:12px;
}

.contact-row>a {
  font-size:23px;
  letter-spacing:.3px;
}

.contact-row>a:hover {
  color:var(--orange);
}

.contact-details .contact-note {
  font-size:11px!important;
}

.extra-item {
  font-size:13px;
  margin-top:15px;
}

.extra-item a {
  text-decoration:underline;
}

footer {
  background:var(--navy-deep);
  color:#c5d1d6;
  padding:30px 0 22px;
}

.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.footer-top .brand {
  width:180px;
}

.footer-top nav {
  display:flex;
  gap:26px;
  font-size:12px;
}

.footer-top>a:last-child {
  font-size:13px;
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-top:25px;
  border-top:1px solid #ffffff1c;
  padding-top:23px;
  font-size:10px;
  padding-right:50px;
}

.whatsapp-float {
  position:fixed;
  right:22px;
  bottom:22px;
  width:52px;
  height:52px;
  z-index:25;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#176b46;
  color:white;
  border:2px solid white;
  box-shadow:0 3px 12px #0002;
}

.whatsapp-float svg {
  width:31px;
  height:31px;
}

.float-label {
  position:absolute;
  right:63px;
  white-space:nowrap;
  background:var(--navy-deep);
  padding:7px 12px;
  border-radius:3px;
  font-size:12px;
  opacity:0;
  pointer-events:none;
}

.whatsapp-float:hover .float-label,.whatsapp-float:focus-visible .float-label {
  opacity:1;
}

dialog {
  border:0;
  padding:45px 20px 20px;
  width:min(950px,94vw);
  max-height:90vh;
  background:var(--navy-deep);
  color:white;
}

dialog::backdrop {
  background:#061720d9;
}

dialog img {
  max-height:70vh;
  width:100%;
  object-fit:contain;
}

dialog p {
  padding-top:15px;
  font-size:14px;
}

.lightbox-close {
  position:absolute;
  right:6px;
  top:0;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:white;
  font-size:30px;
}

.noscript {
  padding:20px;
  background:#fff1d6;
  color:var(--navy);
}

@media(min-width:1500px) {
  .hero-visual>img {
    height:490px;
  }
}

@media(max-width:1050px) {
  .navigation {
    gap:17px;
  }
  .brand {
    width:185px;
  }
  .hero-grid {
    gap:30px;
  }
  .hero-visual>img {
    height:430px;
  }
  .about-grid,.contact-grid {
    gap:60px;
  }
  .accessories {
    flex-wrap:wrap;
  }
  .accessories ul {
    flex:1;
  }
  .gallery img {
    height:220px;
  }
}

@media(max-width:850px) {
  .header-inner {
    min-height:78px;
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    background:transparent;
    border:1px solid #ffffff40;
    border-radius:3px;
    width:44px;
    height:44px;
    padding:11px;
    color:white;
  }
  .menu-toggle span {
    height:2px;
    background:currentColor;
    width:20px;
  }
  .navigation {
    display:flex;
    flex-wrap:wrap;
    padding-bottom:20px;
  }
  .header-inner {
    flex-wrap:wrap;
  }
  .navigation {
    width:100%;
  }
  .js .navigation {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:var(--navy-deep);
    padding:18px 24px 25px;
    border-bottom:1px solid #ffffff30;
  }
  .js .navigation.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
  }
  .js .navigation>a {
    min-height:44px;
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    gap:25px;
  }
  .hero h1 {
    font-size:37px;
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  .hero-description {
    font-size:14px;
  }
  .actions {
    gap:12px;
  }
  .hero-visual>img {
    height:440px;
  }
  .hero-note {
    margin-top:25px;
  }
  .section-heading {
    align-items:start;
  }
  .section-heading>p {
    max-width:310px;
  }
  .service {
    padding-right:20px;
  }
  .service+.service {
    padding-left:20px;
  }
  .service h3 {
    font-size:19px;
  }
  .service .text-link {
    font-size:11px;
    gap:8px;
  }
  .about-grid,.contact-grid {
    gap:40px;
  }
  .gallery {
    gap:14px;
  }
  .gallery img {
    height:190px;
  }
  .gallery figcaption {
    display:block;
  }
  .gallery figcaption>span {
    display:block;
    margin-top:4px;
  }
  .steps {
    grid-template-columns:repeat(2,1fr);
  }
  .footer-top {
    flex-wrap:wrap;
  }
}

@media(max-width:600px) {
  .container {
    width:calc(100% - 40px);
  }
  html {
    scroll-padding-top:92px;
  }
  .brand {
    width:180px;
  }
  .hero {
    padding:20px 0 30px;
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .hero-copy {
    padding-top:20px;
  }
  .hero h1 {
    font-size:39px;
    max-width:370px;
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1.15px;
  }
  .hero-description {
    font-size:15px;
    max-width:390px;
  }
  .actions {
    gap:24px;
  }
  .hero-note {
    margin-top:25px;
    padding-top:15px;
  }
  .hero-visual>img {
    height:310px;
  }
  .hero-visual figcaption {
    font-size:7px;
  }
  .service-strip>.container {
    flex-wrap:wrap;
    gap:8px 20px;
    padding-block:15px;
    font-size:10px;
  }
  .section-heading {
    display:block;
    margin-bottom:30px;
  }
  .section-heading>p {
    max-width:none;
    margin-top:18px;
  }
  .services-grid {
    grid-template-columns:1fr;
  }
  .service,.service+.service {
    padding:26px 0;
    border-left:0;
  }
  .service+.service {
    border-top:1px solid var(--line);
  }
  .service-top {
    margin-bottom:20px;
  }
  .service h3 {
    font-size:22px;
  }
  .service p {
    min-height:0;
    max-width:420px;
  }
  .service .text-link {
    font-size:13px;
    gap:25px;
  }
  .accessories {
    display:block;
    padding-top:28px;
  }
  .accessories ul {
    margin:18px 0 8px;
    gap:8px 20px;
  }
  .about-grid,.contact-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
  .principles article {
    gap:20px;
  }
  .gallery {
    grid-template-columns:1fr;
    gap:28px;
  }
  .gallery img {
    height:255px;
  }
  .gallery figcaption {
    display:flex;
  }
  .gallery figcaption>span {
    margin:0;
  }
  .gallery-disclaimer {
    margin-top:25px;
  }
  .steps {
    gap:28px 22px;
  }
  .steps h3 {
    font-size:15px;
  }
  .process h2 {
    font-size:28px;
  }
  .contact-details {
    padding:0;
  }
  .footer-top {
    display:block;
  }
  .footer-top nav {
    flex-wrap:wrap;
    gap:10px 22px;
    margin:20px 0;
  }
  .footer-top>a:last-child {
    display:inline-block;
    min-height:44px;
  }
  .footer-bottom {
    display:block;
    padding-right:45px;
  }
  .footer-bottom>a {
    display:inline-block;
    margin-top:12px;
    min-height:35px;
  }
  .whatsapp-float {
    right:14px;
    bottom:14px;
    width:48px;
    height:48px;
  }
  .float-label {
    display:none;
  }
}

/* Service detail and residential catalog. */
.main-services { grid-template-columns: 1fr 1fr; }
.main-services .eyebrow { font-size: 10px; min-height: 0; margin: 0 0 18px; }
.maintenance-sheet { display: grid; grid-template-columns: 1fr 1.5fr; gap: 25px 50px; padding: 32px; margin-top: 28px; background: var(--tint); scroll-margin-top: 110px; }
.maintenance-intro h3 { font-size: 25px; max-width: 330px; }
.maintenance-intro > p:not(.eyebrow) { margin: 18px 0 12px; font-size: 14px; color: var(--muted); }
.maintenance-list, .wifi-options, .values dl { margin: 0; }
.maintenance-list > div { display: grid; grid-template-columns: 105px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
dt { font-size: 14px; font-weight: 700; }
dd { margin: 0; color: var(--muted); font-size: 13px; }
.service-disclaimer { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; font-size: 12px; color: var(--muted); }
.connected-services { display: grid; grid-template-columns: 1fr 1.3fr; gap: 65px; padding: 45px 0 30px; border-bottom: 1px solid var(--line); }
.connected-services h3 { font-size: 23px; }
.connected-services article > p:not(.eyebrow) { font-size: 14px; color: var(--muted); margin: 20px 0 12px; }
.service-hint { font-size: 12px !important; color: var(--muted); }
.wifi-options { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 20px; }
.wifi-options dt { margin-bottom: 8px; }
.doors-section { background: var(--tint); }
.door-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.door { display: flex; flex-direction: column; min-width: 0; }
.door img { width: 100%; height: auto; }
.door h3 { margin: 12px 0; }
.door > p:not(.diagram-note) { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.door .text-link { margin-top: auto; }
.diagram-note { font-size: 10px; color: var(--muted); margin-top: 10px; }
.finishes { display: grid; grid-template-columns: 1fr 1.8fr; gap: 50px; border-top: 1px solid #ccd7d4; margin-top: 45px; padding-top: 40px; }
.finishes h3 { font-size: 26px; }
.finishes p { margin-top: 16px; font-size: 14px; color: var(--muted); }
.finish-fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.finish-fieldset legend { font-size: 13px; margin-bottom: 16px; }
.finish-options { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 12px; }
.finish-option { position: relative; cursor: pointer; font-size: 11px; display: grid; gap: 6px; align-content: start; }
.finish-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch { display: block; height: 45px; border: 1px solid #0002; border-radius: 2px; }
.finish-option input:checked + .swatch { outline: 2px solid var(--navy); outline-offset: 3px; }
.finish-option input:checked ~ span:last-child { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.finish-option input:focus-visible + .swatch { outline: 3px solid #a94c16; outline-offset: 4px; }
.finish-selection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 20px; }
.finish-selection p { margin: 0; font-size: 12px; }
.mechanism-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mechanism-grid article { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: center; }
.mechanism-grid img { width: 100%; height: auto; }
.mechanism-grid h3 { font-size: 19px; }
.mechanism-grid .eyebrow { font-size: 8px; margin-bottom: 10px; letter-spacing: 1px; }
.mechanism-grid p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin-top: 12px; }
.equipment-brands { border-top: 1px solid var(--line); padding-top: 35px; margin-top: 40px; }
.equipment-brands h3 { font-size: 18px; }
.equipment-brands ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 30px; list-style: none; padding: 0; margin: 28px 0 20px; font-size: 27px; font-weight: 600; letter-spacing: -.8px; }
.equipment-brands p { font-size: 13px; color: var(--muted); max-width: 730px; }
.equipment-brands .service-hint { margin-top: 8px; }
.values { border-top: 1px solid #ccd7d4; padding-top: 30px; margin-top: 40px; }
.values h3 { margin-bottom: 22px; }
.values dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px; }
.values dt { margin-bottom: 10px; }
@media (min-width: 851px) and (max-width: 1100px) {
  .navigation { gap: 13px; }
  .header-inner > .brand { width: 155px; }
  .navigation .button-small { padding-inline: 10px; gap: 8px; }
}
@media (max-width: 1000px) {
  .door-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .finishes { grid-template-columns: 1fr 1.4fr; gap: 30px; }
  .finish-options { grid-template-columns: repeat(4, 1fr); }
  .mechanism-grid article { grid-template-columns: 1fr; }
  .mechanism-grid img { max-height: 190px; object-fit: contain; background: #eff2ef; }
  .values dl { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .main-services, .maintenance-sheet, .connected-services, .finishes, .mechanism-grid { grid-template-columns: 1fr; }
  .maintenance-sheet { padding: 22px 18px; gap: 22px; }
  .maintenance-list > div { grid-template-columns: 1fr; gap: 4px; }
  .maintenance-intro h3 { font-size: 23px; }
  .connected-services { gap: 35px; }
  .wifi-options { grid-template-columns: 1fr; gap: 15px; }
  .door-grid { gap: 30px 18px; }
  .door h3 { font-size: 19px; }
  .door .text-link { font-size: 12px; }
  .finish-options { grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
  .finishes { gap: 25px; }
  .equipment-brands ul { justify-content: flex-start; font-size: 23px; }
  .values dl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .door-grid, .values dl { grid-template-columns: 1fr; }
  .finish-options { grid-template-columns: repeat(3, 1fr); }
}

.control-examples { margin: 22px 0 16px; }
.control-examples img { width: 100%; height: 170px; object-fit: contain; background: #eff2ef; }
.control-examples figcaption { font-size: 11px; color: var(--muted); padding-top: 10px; }
.wifi-highlight { margin-top: 22px; background: var(--navy); color: white; border-bottom: 3px solid var(--orange); }
.wifi-highlight img { width: 100%; height: 155px; object-fit: contain; }
.wifi-highlight p { padding: 0 20px 18px; }
.wifi-highlight strong { display: block; font-size: 18px; }
.wifi-highlight span { font-size: 12px; color: #c6d2d6; }
.social-dock { position: fixed; right: 18px; bottom: 18px; display: flex; gap: 8px; z-index: 25; }
.social-dock .whatsapp-float { position: static; width: 48px; height: 48px; }
.social-bubble { display: grid; place-items: center; width: 44px; height: 44px; align-self: center; border: 2px solid white; border-radius: 50%; color: white; box-shadow: 0 3px 12px #0002; }
.social-bubble svg { width: 24px; height: 24px; }
.instagram { background: #9d3668; }
.instagram svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.instagram .icon-dot { fill: currentColor; stroke: none; }
.facebook { background: #2160a9; }
.social-notice { position: absolute; bottom: 60px; right: 0; width: 260px; padding: 15px; border: 1px solid #ffffff35; border-radius: 3px; background: var(--navy); color: white; font-size: 13px; box-shadow: 0 3px 12px #0002; }
.social-dock .float-label { bottom: 60px; right: 0; }
footer { padding-bottom: 90px; }
@media(max-width:600px) { .social-dock { right: 12px; bottom: 12px; gap: 6px; } }

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}


/* Vector icons keep action arrows consistent on iOS and desktop. */
.garage-scene { display: block; width: 100%; height: auto; }
.garage-visual { background: #c0bbaa; }
.garage-door, .garage-camera { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .garage-door, .garage-camera { will-change: auto; }
}
.gallery img { height: auto; aspect-ratio: 3 / 2; }
.ui-icon { width: 19px; height: 19px; display: inline-block; vertical-align: middle; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.text-link .ui-icon { color: #aa4f19; }
.text-link.light .ui-icon, .hero-note .ui-icon, .image-caption .ui-icon { color: var(--orange); }
.product-examples { padding: 18px 0; border-top: 1px solid var(--line); margin: 20px 0; }
.product-examples p { font-size: 13px; margin: 5px 0; }
.product-examples .eyebrow { font-size: 10px; }
.parts-section { margin-top: 45px; border-top: 1px solid var(--line); }
.parts-section .accessories { border: 0; margin-top: 0; padding-bottom: 24px; }
.parts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.parts-grid article { background: #f2f4f1; padding: 28px; border-top: 2px solid #c2aa8b; }
.parts-grid h3 { font-size: 21px; margin-bottom: 12px; }
.parts-grid p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.parts-footer { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 22px; }
.motor-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; background: #f2f4f1; padding: 38px; margin-top: 35px; }
.motor-feature h3 { font-size: 42px; letter-spacing: -1px; margin-bottom: 12px; }
.motor-feature p:not(.eyebrow), .motor-feature dd { font-size: 14px; color: var(--muted); }
.motor-feature .text-link { margin-top: 22px; }
.motor-feature dl { margin: 0; }
.motor-feature dl div + div { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.motor-feature dt { font-weight: 600; margin-bottom: 5px; }
.motor-feature dd { margin: 0; }
@media (max-width: 650px) {
  .parts-grid, .motor-feature { grid-template-columns: 1fr; gap: 24px; }
  .motor-feature, .parts-grid article { padding: 24px; }
  .parts-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}
/* Full-width entrance: native scroll, with a compact static fallback. */
.hero-entrance { padding: 0 0 64px; }
.garage-track { --entrance-header: 90px; background: #c0bbaa; }
.garage-stage { position: relative; height: calc(100vh - var(--entrance-header)); height: calc(100svh - var(--entrance-header)); min-height: 420px; max-height: 850px; display: flex; flex-direction: column; overflow: hidden; }
.garage-track.has-motion { height: calc(170vh - var(--entrance-header)); height: calc(170svh - var(--entrance-header)); min-height: calc(420px + 70vh); }
.garage-track.has-motion .garage-stage { position: sticky; top: var(--entrance-header); }
.garage-heading { padding: 24px 20px 0; text-align: center; color: var(--navy); z-index: 1; background: #c0bbaa; }
.hero .garage-heading .eyebrow { color: #344b50; margin-bottom: 6px; }
.garage-headline { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: -1.5px; }
.garage-stage .garage-visual { flex: 1; min-height: 0; width: 100%; overflow: hidden; display: flex; flex-direction: column; }
.garage-stage .garage-scene { flex: 1; min-height: 0; width: 100%; height: 100%; }
.garage-stage .garage-caption { justify-content: center; gap: 15px; background: transparent; color: var(--navy); padding: 8px 20px; font-size: 13px; }
.garage-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding: 10px 20px 24px; color: var(--navy); }
.garage-motion-toggle { font: inherit; font-size: 12px; border: 1px solid #647571; padding: 9px 14px; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.garage-motion-toggle[hidden] { display: none; }
.garage-skip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.hero-entrance .hero-grid { display: block; padding-top: 65px; }
.hero-entrance .hero-copy { max-width: 850px; margin-inline: auto; text-align: center; }
.hero-entrance h1 { max-width: 800px; margin-inline: auto; }
.hero-entrance .hero-description { max-width: 620px; margin-inline: auto; }
.hero-entrance .actions, .hero-entrance .hero-note { justify-content: center; }
.experience-highlight { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 38px auto 0; padding-top: 30px; border-top: 1px solid #ffffff26; max-width: 620px; text-align: left; }
.experience-years { display: flex; flex-direction: column; align-items: center; color: var(--orange); flex: none; }
.experience-years strong { font-size: clamp(64px, 8vw, 88px); font-weight: 500; line-height: .95; letter-spacing: -4px; }
.experience-years span { font-size: 15px; letter-spacing: 3px; text-transform: uppercase; margin-top: 8px; }
.experience-message { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.3; color: #fff; }
.experience-detail { margin-top: 10px; font-size: 12px; color: #c6d2d6; }
@media (max-width: 420px) {
  .experience-highlight { gap: 18px; }
  .experience-years strong { font-size: 64px; }
  .experience-message { font-size: 19px; }
}
@media (max-width: 650px) {
  .garage-stage { min-height: 470px; max-height: 760px; }
  .garage-track.has-motion { min-height: calc(470px + 70vh); }
  .garage-heading { padding-top: 25px; }
  .garage-controls { padding-bottom: 75px; }
  .hero-entrance .hero-grid { padding-top: 35px; }
}