/* Latin and Latin Extended WOFF2 subsets from Google Fonts; a subset is only downloaded when the page uses its characters. Public Sans is a variable font. */
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-300-latin-ext.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-300-latin.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-400-latin-ext.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-400-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-500-latin-ext.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-500-latin.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-600-latin-ext.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-600-latin.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-700-latin-ext.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Fahkwang;src:url('assets/fonts/fahkwang-700-latin.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';src:url('assets/fonts/public-sans-latin-ext.woff2') format('woff2');font-style:normal;font-weight:300 700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';src:url('assets/fonts/public-sans-latin.woff2') format('woff2');font-style:normal;font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --red: #c62a3d;
  --red-text: #d21e38;
  --ink: #1e1c1b;
  --cream: #f2eeeb;
  --heading-font: Fahkwang, sans-serif;
  --body-font: 'Public Sans', sans-serif;
  --content-width: 1120px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.77, 0, .18, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--body-font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
svg { display: block; width: 24px; height: 24px; flex: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--heading-font); font-weight: 400; }
strong { font-weight: 700; }
ul { padding: 0; margin: 0; list-style: none; }
button { border: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
.button:focus-visible { outline-color: currentColor; outline-offset: 5px; }
.container { width: min(var(--content-width), calc(100% - 64px)); margin-inline: auto; }
.accent { color: var(--red-text); }
.eyebrow { color: var(--red-text); font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 16px; left: 16px; z-index: 100; padding: 16px 24px; background: #fff; color: var(--ink); }

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 18px 32px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: transform .2s;
}
/* A darker layer sweeps in from the left on hover and leaves to the right. */
.button::before { content: ''; position: absolute; z-index: -1; inset: 0; background: #a82032; transform: scaleX(0); transform-origin: right center; transition: transform .7s var(--ease-out); }
.button svg { width: 18px; height: 18px; transition: rotate .6s var(--ease-out); }
.button:active { transform: translateY(1px); }
.button:active::before { transform: scaleX(1); transform-origin: left center; }
.button-light { background: #fff; color: var(--red-text); }
.button-light::before { background: #f4e6e8; }
@media (hover: hover) {
  .button:hover::before { transform: scaleX(1); transform-origin: left center; }
  .button:hover svg { rotate: -12deg; }
}

/* Text links draw an underline from the left and retract to the right. */
.main-nav a, .footer-nav a, a.contact-detail span { background: linear-gradient(currentColor, currentColor) right bottom / 0 1px no-repeat; transition: color .3s, background-size .6s var(--ease-out); }
@media (hover: hover) {
  .main-nav a:hover, .footer-nav a:hover, a.contact-detail:hover span { background-position: left bottom; background-size: 100% 1px; }
}

/* The desktop reference is a 1920px frame with a 1120px content column. */
.site-header { position: absolute; z-index: 10; top: 0; inset-inline: 0; height: 87px; color: #fff; background: linear-gradient(100deg, #24221fed, #141311f5 65%, #272522ed); }
/* Past the top of the page the header becomes fixed: it hides while scrolling down and returns when scrolling up. */
.site-header.is-floating { position: fixed; transform: translateY(-100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-header.is-floating.is-shown { transform: none; }
.site-header.is-animated { transition: transform .7s var(--ease-out); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { flex: none; }
.brand img { width: 147px; height: 47px; }
.main-nav { display: flex; align-items: center; gap: 40px; }
.main-nav a { font-size: 12px; line-height: 20px; letter-spacing: 1px; font-weight: 400; text-transform: uppercase; }
.main-nav a:hover, .main-nav a.is-highlighted { color: var(--red-text); }
.header-cta { min-height: 45px; width: 224px; padding: 12px 20px; font-size: 13px; }
.header-cta svg { width: 15px; height: 15px; }
.menu-toggle { display: none; }

.hero { --hero-position: center calc(50% + 27px); position: relative; isolation: isolate; overflow: hidden; height: 778px; color: #fff; background: var(--ink); }
/* The photo is an <img> (AVIF/WebP sized per screen) laid out like a cover background, so it can settle into place without moving the text. */
.hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--hero-position); }
.hero-inner { display: grid; grid-template-columns: 620px 454px; gap: 46px; padding-top: 280px; }
.hero h1 { font-size: 56px; line-height: 58px; font-weight: 300; letter-spacing: -2px; }
.hero h1 strong { font-weight: 600; }
.hero-copy { padding-top: 8px; }
.hero-copy > p:first-child { font-size: 20px; line-height: 26px; letter-spacing: .2px; font-weight: 300; }
.hero-copy .button { min-width: 372px; margin-top: 30px; }
.hero-note { margin-top: 10px; font-size: 14px; line-height: 22px; color: #bcbab7; letter-spacing: 1px; }
.hero-note strong { color: #fff; }
.benefits { height: 102px; background: #fff; }
.benefits-list { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.benefits li { display: flex; align-items: center; gap: 20px; }
.benefits li img { flex: none; }
.benefits p { font-size: 18px; line-height: 20px; letter-spacing: -.45px; color: #505050; }
.benefits strong { color: var(--red-text); }

.section-copy h2 { font-size: 48px; line-height: 55px; letter-spacing: -2px; }
.section-copy > .eyebrow { margin-bottom: 20px; }
.section-copy > p:not(.eyebrow), .history-text { font-size: 18px; line-height: 27px; font-weight: 300; letter-spacing: 0; }
.section-copy h2 + p { margin-top: 27px; }
.section-copy blockquote { border-left: 3px solid var(--red-text); padding-left: 20px; margin-top: 42px; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: 0; }
.editorial-image { position: relative; min-width: 0; }
.editorial-media { overflow: hidden; }
.editorial-media img { width: 100%; }
.editorial-image figcaption { position: absolute; left: -18px; bottom: -20px; padding: 21px 24px; font-family: var(--heading-font); font-size: 14px; line-height: 21px; background: var(--red); color: #fff; font-weight: 300; }
.editorial-image figcaption strong { font-weight: 600; }
.editorial-grid { display: grid; grid-template-columns: 524px 524px; gap: 72px; }
.positioning { position: relative; overflow: hidden; min-height: 924px; background: var(--cream); padding-block: 128px 162px; }
.positioning-decoration { position: absolute; width: 883px; height: 1087px; max-width: none; left: -125px; top: -72px; }
.positioning-inner { position: relative; display: grid; grid-template-columns: 507px 527px; gap: 81px; padding-left: 5px; }
.positioning-image { align-self: start; }
.positioning-image img { aspect-ratio: 507 / 634; object-fit: cover; }
.positioning-image figcaption { bottom: -30px; left: -19px; width: 224px; padding-right: 20px; }
.positioning-copy { padding-top: 50px; }
.positioning-copy > .eyebrow { margin-bottom: 14px; }
.positioning-copy h2 + p { margin-top: 17px; }
.positioning-copy > p:not(.eyebrow) { padding-left: 3px; max-width: 510px; }
.positioning-copy blockquote { margin-top: 47px; margin-left: 3px; }
.choices { padding-top: 151px; padding-bottom: 121px; }
.choices-copy { padding-top: 44px; padding-left: 5px; padding-right: 12px; }
.choices-copy > .eyebrow { margin-bottom: 17px; }
.choices-copy h2 + p { margin-top: 21px; }
.choices-image img { aspect-ratio: 786 / 983; border-radius: 2px; }
.choices-copy blockquote { margin-top: 43px; margin-left: 3px; max-width: 461px; }
.choices-copy > p:not(.eyebrow) { padding-left: 3px; }
.choices-image figcaption { bottom: -17px; left: -17px; width: 231px; }

.differences { isolation: isolate; position: relative; color: #fff; padding-bottom: 57px; }
.differences::before { content: ''; position: absolute; z-index: -2; inset: 188px 0 0; background: linear-gradient(135deg, #292929, #0c0c0c 83%); }
.differences::after { content: ''; position: absolute; z-index: -1; inset: 188px 0 0; background: url('assets/reference/texture.png') repeat; background-image: image-set(url('assets/img/optimized/texture-256.avif') type('image/avif'), url('assets/img/optimized/texture-256.webp') type('image/webp'), url('assets/reference/texture.png') type('image/png')); opacity: .065; pointer-events: none; }
.differences-banner { --parallax-space: 32px; --banner-background-position: center; position: relative; isolation: isolate; overflow: hidden; min-height: 424px; padding: 102px 96px; display: flex; align-items: center; justify-content: space-between; border-radius: 2px; }
.differences-banner::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('assets/img/img-diferenciais.jpg') var(--banner-background-position) / cover no-repeat; background-image: image-set(url('assets/img/optimized/diferenciais-1680.avif') type('image/avif'), url('assets/img/optimized/diferenciais-1680.webp') type('image/webp'), url('assets/img/img-diferenciais.jpg') type('image/jpeg')); pointer-events: none; }
.differences-banner.has-parallax::before { inset-block: calc(-1 * var(--parallax-space)); transform: translate3d(0, var(--parallax-offset, 0px), 0); will-change: transform; }
.differences-banner .eyebrow { margin-bottom: 22px; }
.differences-banner h2 { font-size: 40px; line-height: 45px; letter-spacing: -1px; }
.differences-banner h2 strong { font-weight: 600; }
.brand-stamp { position: relative; flex: none; width: 192px; height: 192px; margin-right: 22px; }
.brand-stamp-text { width: 100%; height: 100%; transform: rotate(var(--stamp-rotation, 0deg)); transform-origin: center; }
.brand-stamp-symbol { position: absolute; width: 48.4375%; height: 48.4375%; top: 25.520833%; left: 25.520833%; }
.differences-list { width: 930px; max-width: 100%; margin: 16px auto 0; }
.difference { display: grid; grid-template-columns: 57px 233px 1fr; align-items: center; column-gap: 20px; min-height: 155px; border-bottom: 1px solid #ffffff20; }
.difference:last-child { border-bottom: 0; }
.difference > img { width: 57px; height: 60px; object-fit: contain; }
.difference h3 { font-size: 18px; line-height: 24px; letter-spacing: -.2px; }
.difference p { font-size: 15px; line-height: 23px; font-weight: 300; letter-spacing: -.3px; }

.guidance { min-height: 403px; background: var(--red); color: #fff; position: relative; overflow: hidden; padding-block: 117px 112px; }
.guidance-decoration { position: absolute; width: 510px; height: 510px; max-width: none; left: -72px; top: 99px; filter: brightness(.4); opacity: .23; }
.guidance-inner { position: relative; width: min(938px, calc(100% - 64px)); margin-inline: auto; display: grid; grid-template-columns: 350px 510px; gap: 78px; }
.guidance h2 { font-size: 54px; line-height: 58px; font-weight: 300; letter-spacing: -2px; }
.guidance p { font-size: 18px; line-height: 28px; font-weight: 300; padding-top: 6px; letter-spacing: -.3px; }
.guidance .button { margin-top: 28px; min-height: 57px; min-width: 353px; font-size: 13px; }

.section-heading { text-align: center; }
.section-heading .eyebrow { margin-bottom: 8px; }
.section-heading h2 { font-size: 48px; line-height: 55px; letter-spacing: -2px; }
.section-heading > p:last-child:not(.eyebrow) { font-size: 18px; line-height: 27px; font-weight: 300; margin-top: 18px; letter-spacing: -.25px; }
.showroom { padding-top: 92px; padding-bottom: 95px; }
.showroom-gallery { display: flex; gap: 20px; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin-top: 65px; scrollbar-width: none; }
.showroom-gallery::-webkit-scrollbar { display: none; }
.showroom-item { position: relative; background: transparent; display: block; flex: 0 0 460px; aspect-ratio: 1; padding: 0; scroll-snap-align: center; overflow: hidden; }
.showroom-item:first-child { margin-left: max(0px, calc((100vw - 2380px) / 2)); }
.showroom-item:last-child { margin-right: max(0px, calc((100vw - 2380px) / 2)); }
.showroom-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
/* Hover and keyboard focus darken the photo and show an enlarge mark. */
.showroom-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1e1c1b00 35%, #1e1c1b80); opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
.showroom-item::before { content: ''; position: absolute; z-index: 1; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid #ffffffb3; border-radius: 50%; background: linear-gradient(#fff, #fff) center / 18px 1px no-repeat, linear-gradient(#fff, #fff) center / 1px 18px no-repeat, #1e1c1b40; opacity: 0; scale: .7; transition: opacity .5s var(--ease-out), scale .7s var(--ease-out); pointer-events: none; }
.showroom-item:focus-visible img { transform: scale(1.06); }
.showroom-item:focus-visible::before, .showroom-item:focus-visible::after { opacity: 1; scale: 1; }
@media (hover: hover) {
  .showroom-item:hover img { transform: scale(1.06); }
  .showroom-item:hover::before, .showroom-item:hover::after { opacity: 1; scale: 1; }
}
.showroom-item:focus-visible { outline-offset: -6px; }

.testimonials { background: #f5f5f5; min-height: 768px; padding-block: 66px 93px; }
.testimonial-carousel { position: relative; margin-top: 42px; }
/* A horizontal strip that scrolls one page at a time: three cards from 700px up, one on phones. The vertical padding
   leaves room for the hover lift and shadow; negative margins keep the section spacing unchanged. */
.testimonial-track { --card-gap: 25px; display: flex; gap: var(--card-gap); align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 12px 40px; margin-block: -12px -40px; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card { flex: 0 0 calc((100% - 2 * var(--card-gap)) / 3); scroll-snap-align: start; overflow: hidden; position: relative; background: #fff; border-radius: 8px; padding: 32px 32px 36px; transition: translate .7s var(--ease-out), box-shadow .7s var(--ease-out); }
@media (hover: hover) and (min-width: 700px) {
  .testimonial-card:hover { translate: 0 -6px; box-shadow: 0 28px 50px -30px #1e1c1b4d; }
}
.testimonial-card::before { content: '“'; position: absolute; top: -47px; right: 19px; color: #f8e8eb; font: 270px/1 Arial, sans-serif; font-weight: 700; pointer-events: none; }
.testimonial-card:not(:nth-child(3n + 1)) { scroll-snap-align: none; }
.customer-initials { position: relative; display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 50%; background: var(--red); color: #fff; font: 600 17px/1 var(--heading-font); letter-spacing: .5px; }
.testimonial-card blockquote { position: relative; font-size: 16px; line-height: 27px; color: #6b6b6b; font-weight: 400; letter-spacing: 0; }
.customer-name { font-size: 16px; line-height: 21px; color: var(--red-text); font-weight: 700; margin-top: 28px; }
.customer-source { margin-top: 2px; color: #6b6b6b; font-size: 12px; line-height: 18px; }
.carousel-arrow { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: transparent; color: var(--red); transition: color .3s; }
.carousel-arrow svg, .dialog-arrow svg { transition: translate .5s var(--ease-out); }
.carousel-arrow:hover { color: #9d1b2b; }
@media (hover: hover) {
  .carousel-arrow.next:hover svg, .dialog-next:hover svg { translate: 4px 0; }
  .carousel-arrow.previous:hover svg, .dialog-previous:hover svg { translate: -4px 0; }
}
.carousel-arrow.previous { left: -63px; }
.carousel-arrow.next { right: -63px; }
.previous svg, .dialog-previous svg { transform: rotate(180deg); }
.carousel-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 0; margin-top: 30px; }
.carousel-dots button { width: 20px; height: 28px; padding: 0; display: grid; place-items: center; background: transparent; }
.carousel-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #c6c6c6; transition: background-color .5s var(--ease-out); }
.carousel-dots button:hover::before { background: #9a9a9a; }
.carousel-dots button.is-active::before { background: var(--red); }
.testimonials-more { margin-top: 34px; text-align: center; }
.button-outline { background: transparent; color: var(--red-text); box-shadow: inset 0 0 0 1px var(--red); transition: color .5s var(--ease-out), transform .2s; }
.button-outline::before { background: var(--red); }
.button-outline svg { width: 16px; height: 16px; transition: translate .6s var(--ease-out); }
.button-outline:active { color: #fff; }
@media (hover: hover) {
  .button-outline:hover { color: #fff; }
  .button-outline:hover svg { rotate: none; translate: 2px -2px; }
}

.history { padding-top: 137px; padding-bottom: 148px; }
.history-copy { padding-left: 5px; }
.history-copy > .eyebrow { margin-bottom: 14px; }
.history-copy h2 { font-size: 42px; line-height: 48px; letter-spacing: -1.7px; }
.history-text { margin-top: 52px; }
.history-text p + p { margin-top: 10px; }
.history-copy blockquote { margin-top: 52px; font-size: 17px; line-height: 26px; padding-left: 19px; }
.history-image { align-self: start; }
.history-image img { aspect-ratio: 786 / 1004; border-radius: 2px; }
.history-image figcaption { width: 215px; font-size: 13px; line-height: 20px; bottom: -21px; padding: 21px 23px; }

.closing { position: relative; isolation: isolate; background: linear-gradient(155deg, #302f2f, #101010 88%); color: #fff; }
.closing::before { content: ''; z-index: -1; position: absolute; inset: 0; background: url('assets/reference/texture.png') repeat; background-image: image-set(url('assets/img/optimized/texture-256.avif') type('image/avif'), url('assets/img/optimized/texture-256.webp') type('image/webp'), url('assets/reference/texture.png') type('image/png')); opacity: .065; pointer-events: none; }
.contact { padding: 177px 32px 109px; }
.contact-box { position: relative; max-width: 860px; margin-inline: auto; border: 1px solid #ffffff20; padding: 91px 32px 68px; text-align: center; }
.contact-symbol { position: absolute; top: -69px; inset-inline: 0; margin-inline: auto; width: 126px; height: 126px; background: var(--red); border-radius: 50%; display: grid; place-items: center; }
.contact-symbol svg { width: 69px; height: 69px; }
.contact-box h2 { font-size: 42px; line-height: 45px; letter-spacing: -1.7px; }
.contact-box p { font-size: 18px; line-height: 27px; margin-top: 30px; font-weight: 300; letter-spacing: -.25px; }
.contact-box .button { margin-top: 30px; min-width: 372px; }
.site-footer { border-top: 1px solid #ffffff16; }
.footer-main { display: grid; grid-template-columns: 400px 244px 1fr; column-gap: 72px; padding-top: 79px; padding-bottom: 92px; }
.footer-brand img { width: 195px; height: auto; }
.footer-brand p { font-size: 16px; line-height: 19px; margin-top: 42px; letter-spacing: -.15px; }
.footer-main .eyebrow { margin-bottom: 36px; }
.footer-nav { display: flex; align-items: flex-start; flex-direction: column; }
.footer-nav a { font-size: 16px; line-height: 21px; }
.footer-nav a + a { margin-top: 16px; }
.footer-nav a:hover, .contact-detail:hover { color: var(--red-text); }
.contact-detail { transition: color .3s; }
.footer-contact .eyebrow { margin-bottom: 38px; }
.contact-detail { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.contact-detail + .contact-detail { margin-top: 23px; }
.contact-detail svg { color: var(--red-text); width: 23px; height: 23px; }
.footer-bottom { background: #222; }
.footer-bottom-inner { min-height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; }
.footer-bottom p { font-size: 14px; line-height: 20px; letter-spacing: -.1px; }

.gallery-dialog { max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); width: min(850px, 100% - 32px); padding: 52px 70px 40px; background: #1e1c1b; color: #fff; border: 1px solid #ffffff30; }
.gallery-dialog::backdrop { background: #000c; backdrop-filter: blur(5px); }
.gallery-dialog img { width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; }
.dialog-close { position: absolute; right: 8px; top: 4px; width: 44px; height: 44px; font-size: 36px; font-weight: 300; background: transparent; color: #fff; transition: rotate .6s var(--ease-out); }
@media (hover: hover) {
  .dialog-close:hover { rotate: 90deg; }
}
.dialog-arrow { position: absolute; top: 50%; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: #fff; }
.dialog-previous { left: 8px; }
.dialog-next { right: 8px; }
.gallery-counter { text-align: center; font-size: 14px; margin-top: 16px; }
.gallery-dialog[open] { animation: dialog-in .7s var(--ease-out); }
.gallery-dialog[open]::backdrop { animation: fade-in .6s ease; }
.gallery-dialog.is-closing { animation: dialog-out .35s cubic-bezier(.4, 0, 1, 1) forwards; }
.gallery-dialog.is-closing::backdrop { animation: fade-in .35s ease reverse forwards; }
@keyframes dialog-in { from { opacity: 0; scale: .96; translate: 0 16px; } }
@keyframes dialog-out { to { opacity: 0; scale: .97; translate: 0 10px; } }
@keyframes fade-in { from { opacity: 0; } }

@media (min-width: 2200px) {
  .hero { --hero-position: center 56%; }
}

@media (max-width: 1279px) {
  .main-nav { gap: 24px; }
  .header-cta { width: 192px; }
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; }
  .hero h1 { font-size: 48px; line-height: 1.1; letter-spacing: -1.7px; }
  .hero h1 .desktop-break { display: none; }
  .hero-copy > p:first-child { font-size: 18px; }
  .hero-note { font-size: 12px; }
  .hero-copy .button { min-width: 0; padding-inline: 24px; }
  .editorial-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .positioning-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 64px; }
  .positioning { padding-block: 110px 130px; min-height: 0; }
  .positioning-copy { padding-top: 15px; }
  .section-copy h2 { font-size: 40px; line-height: 1.17; }
  .section-copy > p:not(.eyebrow), .history-text, .section-copy blockquote { font-size: 17px; line-height: 26px; }
  .desktop-break { display: none; }
  .choices { padding-top: 120px; padding-bottom: 120px; }
  .choices-copy { padding-top: 12px; padding-right: 0; }
  .differences-banner { padding-inline: 64px; }
  .differences-list { width: calc(100% - 128px); }
  .difference { grid-template-columns: 52px 200px 1fr; }
  .difference h3 { font-size: 17px; }
  .testimonials > .container { width: calc(100% - 120px); }
  .carousel-arrow.previous { left: -54px; }
  .carousel-arrow.next { right: -54px; }
  .testimonial-track { --card-gap: 20px; }
  .testimonial-card { padding-inline: 24px; }
  .history-copy h2 { font-size: 36px; }
  .history-text { margin-top: 32px; }
  .history-copy blockquote { margin-top: 30px; }
  .history { padding-block: 120px; }
  .footer-main { grid-template-columns: 1.1fr .65fr 1.1fr; gap: 40px; }
  .contact-detail { white-space: normal; }
}

@media (max-width: 1023px) {
  .site-header { height: 82px; }
  /* The closed menu stays in the layout but hidden, so opening and closing can be animated. */
  .main-nav { position: absolute; top: 82px; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 28px 32px 32px; background: #201e1c; border-top: 1px solid #ffffff1a; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .4s ease, clip-path .5s var(--ease-out), visibility 0s linear .5s; }
  .main-nav.is-open { visibility: visible; opacity: 1; clip-path: inset(0); transition: opacity .3s ease, clip-path .7s var(--ease-out), visibility 0s; }
  .main-nav a { display: block; padding: 14px 0; font-size: 14px; background: none; opacity: 0; translate: 0 -8px; transition: color .3s, opacity .3s ease, translate .5s var(--ease-out); }
  .main-nav a:nth-child(2) { --menu-order: 1; }
  .main-nav a:nth-child(3) { --menu-order: 2; }
  .main-nav a:nth-child(4) { --menu-order: 3; }
  .main-nav.is-open a { opacity: 1; translate: none; transition-duration: .3s, .6s, .7s; transition-delay: 0s, calc(.1s + var(--menu-order, 0) * 60ms), calc(.1s + var(--menu-order, 0) * 60ms); }
  .header-cta { margin-left: auto; margin-right: 28px; }
  .menu-toggle { width: 44px; height: 44px; background: transparent; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 9px; color: #fff; }
  .menu-toggle span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .45s var(--ease-out), opacity .3s; }
  .menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .hero { min-height: 740px; height: auto; }
  .hero-inner { padding-top: 218px; padding-bottom: 110px; gap: 30px; }
  .hero h1 { font-size: 42px; }
  .hero-copy { padding-top: 2px; }
  .hero-copy > p:first-child { font-size: 17px; line-height: 25px; }
  .hero-copy .button { font-size: 11px; letter-spacing: .8px; padding-inline: 18px; }
  .hero-note { font-size: 11px; letter-spacing: .4px; }
  .benefits { height: auto; }
  .benefits-list { display: grid; grid-template-columns: 1fr 1fr; padding-block: 28px; gap: 28px 64px; }
  .benefits li { justify-content: flex-start; gap: 20px; }
  .benefits li img { width: 44px; height: 44px; object-fit: contain; }
  .benefits p { font-size: 16px; line-height: 21px; }
  .positioning-inner, .editorial-grid { gap: 40px; }
  .section-copy h2 { font-size: 34px; letter-spacing: -1.2px; }
  .section-copy > p:not(.eyebrow), .history-text, .section-copy blockquote { font-size: 16px; line-height: 25px; }
  .positioning-copy { padding-top: 0; }
  .positioning-image { margin-top: 34px; }
  .section-copy blockquote { margin-top: 28px; padding-left: 16px; }
  .editorial-image figcaption { font-size: 12px; line-height: 19px; padding: 17px 19px; left: -12px; }
  .positioning { padding-block: 80px 100px; }
  .positioning-decoration { width: 700px; height: auto; left: -300px; top: -20px; }
  .choices { padding-block: 90px 110px; }
  .choices-image { align-self: start; margin-top: 34px; }
  .choices-copy { padding-top: 0; }
  .eyebrow { font-size: 12px; letter-spacing: 1.3px; }
  .differences-banner { padding: 68px 48px; min-height: 380px; }
  .differences-banner h2 { font-size: 32px; line-height: 40px; }
  .brand-stamp { width: 160px; height: 160px; margin-right: 0; }
  .differences-list { width: calc(100% - 64px); }
  .difference { grid-template-columns: 46px 166px 1fr; column-gap: 18px; padding-block: 32px; }
  .difference > img { width: 46px; height: 50px; }
  .difference h3 { font-size: 15px; line-height: 22px; }
  .difference p { font-size: 13px; line-height: 21px; }
  .guidance { min-height: 0; padding-block: 88px; }
  .guidance-inner { grid-template-columns: .9fr 1.1fr; gap: 44px; }
  .guidance h2 { font-size: 42px; line-height: 50px; }
  .guidance p { font-size: 16px; line-height: 25px; }
  .guidance .button { min-width: 0; padding-inline: 20px; font-size: 11px; letter-spacing: 1px; }
  .guidance-decoration { left: -210px; }
  .section-heading h2 { font-size: 36px; line-height: 44px; letter-spacing: -1.3px; }
  .section-heading > p:last-child:not(.eyebrow) { font-size: 16px; line-height: 25px; }
  .showroom { padding-block: 80px; }
  .showroom-gallery { margin-top: 44px; gap: 16px; }
  .showroom-item { flex-basis: 360px; }
  .testimonials { min-height: 0; padding-block: 70px; }
  .testimonials > .container { width: calc(100% - 96px); }
  .testimonial-track { --card-gap: 16px; }
  .testimonial-card { padding: 24px 20px 28px; }
  .testimonial-card blockquote { font-size: 14px; line-height: 23px; }
  .testimonial-card::before { font-size: 230px; top: -54px; right: 4px; }
  .customer-name { font-size: 14px; }
  .customer-source { font-size: 11px; }
  .carousel-arrow.previous { left: -44px; }
  .carousel-arrow.next { right: -44px; }
  .history { padding-block: 100px; }
  .history-copy h2 { font-size: 32px; line-height: 39px; }
  .history-copy blockquote { font-size: 15px; line-height: 24px; }
  .contact { padding-top: 142px; padding-bottom: 80px; }
  .contact-box { padding: 88px 32px 58px; }
  .contact-box h2 { font-size: 36px; line-height: 44px; }
  .contact-box p { font-size: 16px; line-height: 25px; }
  .footer-main { grid-template-columns: 1fr .7fr 1.1fr; gap: 32px; padding-block: 64px; }
  .footer-brand p { font-size: 14px; line-height: 21px; margin-top: 30px; }
  .footer-brand p br { display: none; }
  .footer-brand img { width: 170px; }
  .footer-nav a, .contact-detail { font-size: 14px; }
  .contact-detail { gap: 10px; align-items: flex-start; }
  .footer-bottom p { font-size: 11px; }
}

@media (max-width: 699px) {
  .container { width: calc(100% - 48px); }
  .site-header { height: 76px; }
  .brand img { width: 132px; height: auto; }
  .header-cta { display: none; }
  .main-nav { top: 76px; padding-inline: 24px; }
  .hero { --hero-position: 61% center; min-height: 810px; }
  .hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #0002, #0005 45%, #0002); }
  .hero-inner { display: block; padding-top: 163px; padding-bottom: 85px; }
  .hero h1 { font-size: clamp(36px, 9.7vw, 52px); line-height: 1.12; letter-spacing: -1.4px; max-width: 530px; }
  .hero-copy { padding-top: 0; margin-top: 34px; max-width: 470px; }
  .hero-copy > p:first-child { font-family: var(--body-font); font-size: 16px; line-height: 25px; letter-spacing: -.2px; font-weight: 300; }
  .hero-copy .button { margin-top: 26px; min-height: 56px; padding-inline: 20px; font-size: 11px; letter-spacing: 1px; }
  .hero-note { font-size: 10px; line-height: 18px; letter-spacing: .4px; margin-top: 12px; }
  .benefits-list { padding-block: 28px; gap: 27px 16px; }
  .benefits li { gap: 12px; }
  .benefits li img { width: 33px; height: 36px; }
  .benefits p { font-size: 12px; line-height: 17px; letter-spacing: -.2px; }
  .positioning { padding-block: 68px 78px; }
  .positioning-inner, .editorial-grid { display: flex; flex-direction: column; gap: 46px; padding-left: 0; }
  .positioning-image { width: calc(100% - 16px); margin: 0 0 0 16px; }
  .positioning-copy { padding: 0; }
  .positioning-decoration { width: 680px; left: -340px; top: -50px; }
  .section-copy > .eyebrow { margin-bottom: 16px; }
  .section-copy h2 { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.18; letter-spacing: -1px; }
  .section-copy > p:not(.eyebrow), .history-text { font-size: 16px; line-height: 25px; letter-spacing: -.2px; }
  .section-copy h2 + p { margin-top: 24px; }
  .section-copy blockquote { margin-top: 28px; font-size: 16px; line-height: 25px; padding-left: 16px; }
  .editorial-image figcaption { left: -16px; font-size: 12px; line-height: 19px; padding: 18px 20px; bottom: -20px; }
  .positioning-copy > p:not(.eyebrow), .choices-copy > p:not(.eyebrow) { padding-left: 0; }
  .positioning-copy blockquote, .choices-copy blockquote { margin-left: 0; }
  .choices { padding-block: 72px 90px; }
  .choices-copy { padding: 0; }
  .choices-image { width: calc(100% - 16px); margin: 0 0 0 16px; }
  .differences { padding-bottom: 36px; }
  .differences::before, .differences::after { top: 130px; }
  .differences-banner { --parallax-space: 18px; --banner-background-position: 47% center; padding: 40px 28px; min-height: 390px; display: block; }
  .differences-banner h2 { font-size: clamp(27px, 7.3vw, 36px); line-height: 1.2; letter-spacing: -.8px; }
  .differences-banner .eyebrow { margin-bottom: 20px; }
  .brand-stamp { width: 96px; height: 96px; margin: 24px 0 0 auto; }
  .differences-list { width: 100%; margin-top: 12px; }
  .difference { grid-template-columns: 45px minmax(0, 1fr); gap: 19px 18px; padding: 30px 4px; min-height: 0; }
  .difference > img { width: 45px; height: 49px; }
  .difference h3 { font-size: 18px; line-height: 25px; }
  .difference h3 br { display: contents; }
  .difference p { grid-column: 1 / -1; font-size: 15px; line-height: 24px; letter-spacing: -.15px; }
  .guidance { padding-block: 68px; }
  .guidance-inner { width: calc(100% - 48px); display: block; }
  .guidance h2 { font-size: 43px; line-height: 1.13; letter-spacing: -1.4px; }
  .guidance p { margin-top: 30px; padding: 0; font-size: 16px; line-height: 25px; }
  .guidance .button { font-size: 11px; margin-top: 28px; padding-inline: 22px; min-height: 56px; }
  .guidance-decoration { top: 55px; left: auto; right: -235px; width: 480px; height: 480px; opacity: .18; }
  .showroom { padding-block: 68px; }
  .section-heading h2 { font-size: 33px; line-height: 40px; letter-spacing: -1.1px; }
  .section-heading > p:last-child:not(.eyebrow) { margin-top: 22px; font-size: 16px; line-height: 25px; }
  .showroom-gallery { margin-top: 34px; gap: 14px; scroll-snap-type: x mandatory; }
  .showroom-item { flex-basis: 78vw; max-width: 420px; }
  .showroom-item:first-child { margin-left: 24px; }
  .showroom-item:last-child { margin-right: 24px; }
  .testimonials { padding-block: 64px 58px; }
  .testimonials > .container { width: calc(100% - 48px); }
  .testimonial-carousel { margin-top: 30px; }
  .testimonial-track { padding-block: 0; margin-block: 0; }
  .testimonial-card, .testimonial-card:not(:nth-child(3n + 1)) { flex-basis: 100%; scroll-snap-align: start; padding: 28px 28px 32px; }
  .testimonial-card blockquote { font-size: 16px; line-height: 26px; }
  .testimonial-card::before { right: 12px; }
  .customer-name { font-size: 16px; }
  .customer-source { font-size: 12px; }
  .carousel-arrow { width: 32px; }
  .carousel-arrow svg { width: 18px; height: 18px; }
  .carousel-arrow.previous { left: -24px; }
  .carousel-arrow.next { right: -24px; }
  .carousel-dots { margin-top: 22px; }
  .testimonials-more { margin-top: 26px; }
  .testimonials-more .button { min-height: 56px; padding: 15px 20px; font-size: 11px; letter-spacing: 1px; }
  .history { padding-block: 76px 90px; }
  .history-copy { padding: 0; }
  .history-copy h2 { font-size: 32px; line-height: 39px; letter-spacing: -.9px; }
  .history-text { margin-top: 30px; }
  .history-text p + p { margin-top: 16px; }
  .history-copy blockquote { font-size: 16px; line-height: 25px; margin-top: 28px; }
  .history-image { width: calc(100% - 16px); margin-left: 16px; }
  .contact { padding: 116px 24px 66px; }
  .contact-box { padding: 69px 20px 37px; }
  .contact-symbol { width: 94px; height: 94px; top: -51px; }
  .contact-symbol svg { width: 50px; height: 50px; }
  .contact-box h2 { font-size: 29px; line-height: 35px; letter-spacing: -.9px; }
  .contact-box p { font-size: 15px; line-height: 24px; margin-top: 24px; }
  .contact-box .button { min-width: 0; width: 100%; min-height: 56px; padding: 15px 8px; margin-top: 24px; font-size: 10px; letter-spacing: .7px; gap: 8px; }
  .contact-box .button svg { width: 17px; height: 17px; }
  .footer-main { grid-template-columns: 1fr; gap: 42px; padding-block: 50px; }
  .footer-brand img { width: 182px; }
  .footer-brand p { max-width: 280px; font-size: 15px; line-height: 22px; margin-top: 24px; }
  .footer-brand p br { display: inline; }
  .footer-main .eyebrow { font-size: 13px; margin-bottom: 22px; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .footer-nav .eyebrow { grid-column: 1 / -1; margin-bottom: 5px; }
  .footer-nav a + a { margin-top: 0; }
  .footer-nav a { justify-self: start; }
  .footer-nav a, .contact-detail { font-size: 15px; }
  .contact-detail { gap: 14px; }
  .contact-detail + .contact-detail { margin-top: 20px; }
  .footer-bottom-inner { padding-block: 24px; }
  .footer-bottom p { max-width: 370px; font-size: 11px; line-height: 18px; }
  .gallery-dialog { padding: 52px 12px 48px; }
  .gallery-dialog img { max-height: calc(100dvh - 170px); }
  .dialog-arrow { top: auto; bottom: 10px; }
  .gallery-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); margin: 0; }
}

@media (max-width: 359px) {
  .container, .guidance-inner, .testimonials > .container { width: calc(100% - 36px); }
  .hero h1 { font-size: 34px; }
  .benefits li { gap: 8px; }
  .benefits p { font-size: 11px; }
  .benefits li img { width: 29px; }
  .contact { padding-inline: 18px; }
  .contact-box { padding-inline: 15px; }
  .carousel-arrow.previous { left: -18px; }
  .carousel-arrow.next { right: -18px; }
}

/* Entrance motion. `.motion` is set in <head> only when motion is allowed. script.js marks each
   [data-reveal] block with `.is-inview` as it enters the viewport and removes the attribute once
   its animations finish, so the resting page is exactly the static layout. */
@property --line { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

@keyframes reveal-up { from { opacity: 0; translate: 0 32px; } }
@keyframes reveal-fade { from { opacity: 0; } }
@keyframes reveal-rise { from { opacity: 0; translate: 0 40px; filter: blur(8px); } }
@keyframes reveal-eyebrow { from { opacity: 0; letter-spacing: .6em; } }
@keyframes reveal-line { from { --line: 0%; } to { --line: 100%; } }
@keyframes reveal-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes reveal-zoom { from { scale: 1.18; } }
@keyframes reveal-caption { from { opacity: 0; translate: -32px 0; } }
@keyframes reveal-banner { from { opacity: 0; clip-path: inset(10% 8% round 2px); } 35% { opacity: 1; } to { clip-path: inset(0 round 2px); } }
@keyframes reveal-stamp { from { opacity: 0; scale: .6; rotate: -60deg; } }
@keyframes reveal-icon { from { opacity: 0; scale: .5; } }
@keyframes reveal-pop { from { opacity: 0; scale: .4; } }
@keyframes reveal-drift { from { opacity: 0; translate: -80px 0; } }
@keyframes reveal-symbol { from { opacity: 0; scale: 1.2; rotate: -20deg; } }
@keyframes hero-settle { from { scale: 1.12; } }
@keyframes hero-veil { from { opacity: 1; } }
@keyframes header-in { from { opacity: 0; translate: 0 -24px; } }
@keyframes pulse-ring { 0% { opacity: .9; scale: 1; } 60%, 100% { opacity: 0; scale: 1.6; } }

/* Page load: header, hero photo and hero copy. */
.motion .site-header { animation: header-in 1.1s var(--ease-out) backwards; }
/* The photo only zooms; a dark veil above it fades out instead. Chrome counts an element that fades in from
   opacity 0 as painted only when its animation ends, which would delay the Largest Contentful Paint. */
.motion .hero-image { animation: hero-settle 2.6s var(--ease-out) backwards; }
.motion .hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; animation: hero-veil 1.4s ease-out backwards; }
.motion .hero h1 { animation: reveal-rise 1.5s var(--ease-out) .35s backwards; }
.motion .hero-copy > * { animation: reveal-up 1.2s var(--ease-out) calc(.65s + var(--stagger, 0) * 120ms) backwards; }
.motion .contact-symbol::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--red); border-radius: 50%; pointer-events: none; animation: pulse-ring 4s var(--ease-out) 2s infinite backwards; }

.motion :is([data-reveal], .hero-copy) > :nth-child(2), .motion .testimonial-card:nth-child(2) { --stagger: 1; }
.motion :is([data-reveal], .hero-copy) > :nth-child(3), .motion .testimonial-card:nth-child(3) { --stagger: 2; }
.motion [data-reveal] > :nth-child(4) { --stagger: 3; }
.motion [data-reveal] > :nth-child(5) { --stagger: 4; }

.motion [data-reveal]:not(.is-inview) { opacity: 0; }
.motion [data-reveal].is-inview { animation: reveal-up 1.1s var(--ease-out) var(--reveal-delay, 0ms) backwards; }
.motion [data-reveal="fade"].is-inview { animation-name: reveal-fade; }
.motion [data-reveal="eyebrow"].is-inview { animation-name: reveal-eyebrow; }
/* While the letters close in, eyebrows stay on one line so the wide tracking never pushes the title down. */
.motion :is([data-reveal="eyebrow"], [data-reveal="heading"] > .eyebrow, [data-reveal="banner"] .eyebrow) { white-space: nowrap; overflow: hidden; }
.motion [data-reveal="title"].is-inview { animation-name: reveal-rise; animation-duration: 1.3s; }
.motion [data-reveal="drift"].is-inview { animation-name: reveal-drift; animation-duration: 2.4s; }
.motion [data-reveal="symbol"].is-inview { animation-name: reveal-symbol; animation-duration: 2.4s; }

/* Pull quotes: the text rises while the red rule draws downwards. */
.motion [data-reveal="quote"].is-inview { border-image: linear-gradient(var(--red-text) var(--line), transparent var(--line)) 1; animation: reveal-up 1.1s var(--ease-out) var(--reveal-delay, 0ms) backwards, reveal-line 1.2s var(--ease-in-out) calc(var(--reveal-delay, 0ms) + .25s) backwards; }

/* Groups stay still while their children enter one after another. */
.motion :is([data-reveal="stagger"], [data-reveal="heading"], [data-reveal="gallery"], [data-reveal="carousel"], [data-reveal="image"]).is-inview { animation: none; }
.motion :is([data-reveal="stagger"], [data-reveal="heading"]).is-inview > * { animation: reveal-up 1.1s var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--stagger, 0) * 110ms) backwards; }
.motion [data-reveal="heading"].is-inview > .eyebrow { animation-name: reveal-eyebrow; }
.motion [data-reveal="heading"].is-inview > h2 { animation-name: reveal-rise; animation-duration: 1.3s; }

/* Editorial photos: a curtain opens upwards while the photo settles, then the caption slides in. */
.motion [data-reveal="image"].is-inview .editorial-media { animation: reveal-curtain 1.5s var(--ease-in-out) var(--reveal-delay, 0ms) backwards; }
.motion [data-reveal="image"].is-inview .editorial-media img { animation: reveal-zoom 2.2s var(--ease-out) var(--reveal-delay, 0ms) backwards; }
.motion [data-reveal="image"].is-inview figcaption { animation: reveal-caption 1.1s var(--ease-out) calc(var(--reveal-delay, 0ms) + .8s) backwards; }

/* Differences: the banner opens from its centre; each row draws its divider and staggers its content. */
.motion [data-reveal="banner"].is-inview { animation: reveal-banner 1.6s var(--ease-in-out) var(--reveal-delay, 0ms) backwards; }
.motion [data-reveal="banner"].is-inview .eyebrow { animation: reveal-eyebrow 1.2s var(--ease-out) calc(var(--reveal-delay, 0ms) + .5s) backwards; }
.motion [data-reveal="banner"].is-inview h2 { animation: reveal-rise 1.3s var(--ease-out) calc(var(--reveal-delay, 0ms) + .6s) backwards; }
.motion [data-reveal="banner"].is-inview .brand-stamp { animation: reveal-stamp 1.8s var(--ease-out) calc(var(--reveal-delay, 0ms) + .7s) backwards; }
.motion [data-reveal="row"].is-inview { border-image: linear-gradient(90deg, #ffffff20 var(--line), transparent var(--line)) 1; animation: reveal-line 1.4s var(--ease-in-out) var(--reveal-delay, 0ms) backwards; }
.motion [data-reveal="row"].is-inview > * { animation: reveal-up 1.1s var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--stagger, 0) * 100ms) backwards; }
.motion [data-reveal="row"].is-inview > img { animation-name: reveal-icon; }

/* Showroom: photos fade in one after another and settle inside their frames. */
.motion [data-reveal="gallery"].is-inview > * { animation: reveal-fade 1.2s ease calc(var(--reveal-delay, 0ms) + var(--stagger, 0) * 120ms) backwards; }
.motion [data-reveal="gallery"].is-inview img { animation: reveal-zoom 2s var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--stagger, 0) * 120ms) backwards; }

.motion [data-reveal="carousel"].is-inview .testimonial-card { animation: reveal-up 1.1s var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--stagger, 0) * 120ms) backwards; }
.motion [data-reveal="carousel"].is-inview .carousel-arrow { animation: reveal-fade 1s ease calc(var(--reveal-delay, 0ms) + .4s) backwards; }

/* Final call: the frame fades in, the WhatsApp mark pops and the copy follows. */
.motion [data-reveal="contact"].is-inview { animation-name: reveal-fade; animation-duration: 1.2s; }
.motion [data-reveal="contact"].is-inview > * { animation: reveal-up 1.1s var(--ease-out) calc(var(--reveal-delay, 0ms) + .15s + var(--stagger, 0) * 110ms) backwards; }
.motion [data-reveal="contact"].is-inview > .contact-symbol { animation: reveal-pop 1.1s var(--ease-back) calc(var(--reveal-delay, 0ms) + .2s) backwards; }
.motion [data-reveal="contact"].is-inview > h2 { animation-name: reveal-rise; }

@media (max-width: 699px) {
  /* The mobile carousel scrolls horizontally, so its cards must not move vertically. */
  .motion [data-reveal="carousel"].is-inview .testimonial-card { animation-name: reveal-fade; }
}

@media print {
  .motion [data-reveal] { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .differences-banner.has-parallax::before { inset: 0; transform: none; will-change: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}