@font-face { font-family: "Space Grotesk"; src: url("assets/space-grotesk-light.ttf") format("truetype"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/space-grotesk-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/space-grotesk-medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face {
  font-family: "Jost";
  src: url("assets/jost-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  src: url("assets/jost-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  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 {
  --white: #fffefa;
  --mineral: #eae9e4;
  --sand: #d9d3c9;
  --page-background: #f5f4f0;
  --ink: #272c29;
  --muted: #626660;
  --red: #bd343e;
  --red-dark: #9e2933;
  --berry: #bd343e;
  --line: rgba(39, 44, 41, .20);
  --radius-lg: 32px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --cocoa: #272c29;
  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --section: clamp(5.5rem, 9vw, 9rem);
  --sans: "Space Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page-background); color: var(--ink); font-family: var(--sans); line-height: 1.55; }
body.menu-open,
body.dialog-open { overflow: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
button,
input,
select,
textarea { font: inherit; }
[id] { scroll-margin-top: 6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; padding: .8rem 1rem; background: var(--white); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.site-header {
  height: 6rem;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background: rgba(39, 44, 41, .58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 254, 250, .12);
  transition: background .2s ease, color .2s ease;
}
.brand { display: flex; flex-direction: column; justify-content: center; gap: .25rem; width: 9.8rem; height: 4rem; background: transparent; text-decoration: none; color: var(--ink); }
/* Show the original wordmark without its old product labels or white panel. */
.brand-mark { display: block; position: relative; width: 100%; aspect-ratio: 850 / 235; overflow: hidden; mix-blend-mode: normal; }
.brand-mark img { position: absolute; width: 112.94%; max-width: none; height: auto; left: -8.82%; top: -36.17%; object-fit: contain; }
.brand-tagline { display: block; text-align: center; font-size: .73rem; line-height: 1.2; font-weight: 400; letter-spacing: .18em; white-space: nowrap; }
.site-nav { display: flex; gap: clamp(1.3rem, 2.8vw, 3.2rem); }
.site-nav a,
.header-contact { text-decoration: none; font-size: .77rem; letter-spacing: .045em; }
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -.45rem; background: var(--berry); transition: right .2s ease; }
.site-nav a:hover::after { right: 0; }
.header-contact { justify-self: end; color: inherit; font-weight: 550; }
.menu-toggle { display: none; border-radius: 50%; }

.hero {
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-items: center;
  background: var(--cocoa);
  color: var(--white);
}
.hero-copy { position: relative; z-index: 2; width: 100%; max-width: 68rem; margin: 0 auto; padding: clamp(9rem, 13vw, 12rem) var(--pad) 7rem; align-self: center; text-align: center; }
.hero .hero-intro { color: var(--white); }
.hero .button--quiet { color: var(--white); border-color: rgba(255,254,250,.65); background: rgba(39,44,41,.2); }
.hero .button--quiet:hover { color: var(--ink); background: var(--white); }
.hero-intro,
.section-kicker,
.dialog-type { margin: 0 0 1.5rem; color: var(--red); font-size: .73rem; letter-spacing: .09em; text-transform: none; }
.hero h1 { max-width: 16ch; margin: 0 auto; font-size: clamp(3.7rem, 6.6vw, 7.2rem); line-height: .98; letter-spacing: -.055em; font-weight: 400; text-wrap: balance; }
.hero-copy > p:not(.hero-intro) { max-width: 36rem; margin: 1.6rem auto 0; color: var(--white); font-size: 1.08rem; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.button { border-radius: 999px; min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.25rem; border: 1px solid var(--ink); text-decoration: none; font-size: .78rem; letter-spacing: .025em; cursor: pointer; }
.button--red { border-color: var(--red); background: var(--red); color: var(--white); }
.button--red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.button--quiet { background: transparent; }
.button--quiet:hover { background: var(--white); }
.hero-visual { position: absolute; inset: 0; overflow: hidden; margin: 0; }
.hero-visual img { object-position: center; }
.hero-visual figcaption { z-index: 1; position: absolute; right: 1.25rem; bottom: 1.25rem; max-width: 14rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: rgba(255,254,250,.94); color: var(--muted); font-size: .68rem; }
.hero-visual figcaption span { display: block; color: var(--ink); font-size: .78rem; }

.statement { padding: var(--section) var(--pad); text-align: center; }
.statement p { max-width: 32ch; margin: 0 auto; font-size: clamp(2rem, 3vw, 3.3rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 360; text-wrap: balance; }
.statement span { display: block; max-width: 43rem; margin: 2rem auto 0; color: var(--muted); }
.section-pad { padding: var(--section) var(--pad); }

.space-guide { border-radius: var(--radius-lg); margin: 0 1.25rem; display: grid; grid-template-columns: .8fr 1.1fr; gap: clamp(3rem, 8vw, 9rem); background: var(--mineral); color: var(--ink); }
.guide-heading { align-self: start; }
.guide-heading h2,
.section-heading h2,
.feature-story h2,
.materials h2,
.faq h2,
.contact h2 { margin: 0; font-size: clamp(2.35rem, 3.7vw, 4.2rem); line-height: 1; letter-spacing: -.05em; font-weight: 360; text-wrap: balance; }
.guide-heading > p:last-child { max-width: 30rem; color: var(--muted); }
.guide-options { display: flex; flex-direction: column; gap: .6rem; }
.guide-options button { width: 100%; display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 1rem; padding: 1.25rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); text-align: left; cursor: pointer; }
.guide-options button span { font-size: .7rem; }
.guide-options button strong { font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 380; }
.guide-options button[aria-pressed="true"] { color: var(--red-dark); background: var(--white); border-color: var(--red); }
.guide-options button[aria-pressed="true"] span { color: var(--red); }
.space-guide .section-kicker, .contact .section-kicker { color: var(--red-dark); }
.guide-result { grid-column: 2; padding-left: 4rem; border-left: 1px solid var(--line); }
.guide-result p { max-width: 37rem; margin: 0 0 1.5rem; color: var(--muted); }
.guide-result a { color: var(--red-dark); text-underline-offset: .35rem; }

.collections { background: var(--page-background); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem,6vw,6rem); align-items: center; }
.section-heading p { max-width: 40ch; justify-self: end; margin: 0; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: 3.5rem 0 2.25rem; }
.filter { border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: .68rem 1.1rem; font-size: .75rem; cursor: pointer; }
.filter.is-active { background: var(--red-dark); color: var(--white); border-color: var(--red-dark); }
.product-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.5rem); align-items: start; }
.product-card { grid-column: span 7; }
.product-card:nth-child(4n + 2),
.product-card:nth-child(4n + 3) { grid-column: span 5; }
.product-card:nth-child(4n + 3) { margin-top: clamp(2rem, 6vw, 6rem); }
.product-card button { border-radius: var(--radius-md); overflow: hidden; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.product-image { border-radius: var(--radius-md); display: block; grid-column: 1 / -1; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.product-card:nth-child(4n + 1) .product-image,
.product-card:nth-child(4n + 4) .product-image { aspect-ratio: 16 / 11; }
.product-image img { transition: transform .55s ease; }
.product-card button:hover .product-image img { transform: scale(1.02); }
.product-copy { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.35rem 1.4rem; }
.product-name { font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1.15; font-weight: 400; }
.product-description { max-width: 35rem; color: var(--muted); font-size: .87rem; }
.product-action { align-self: center; padding: 1rem 1.3rem; color: var(--red); font-size: .72rem; text-decoration: underline; text-underline-offset: .3rem; }
.product-card[hidden] { display: none; }
.empty-state { text-align: center; padding: 3rem; color: var(--muted); }

.feature-story,
.materials { border-radius: var(--radius-lg); overflow: hidden; margin: 2rem 1.25rem; display: grid; grid-template-columns: 1.18fr .82fr; min-height: 44rem; }
.feature-story-image,
.materials-image { border-radius: var(--radius-lg); overflow: hidden; min-height: 40rem; }
.feature-story-copy,
.materials-copy { padding: clamp(4rem, 8vw, 8rem) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.feature-story-copy { background: var(--white); }
.feature-story-copy > p:not(.section-kicker),
.materials-copy > p:not(.section-kicker) { max-width: 36rem; margin: 2rem 0; color: var(--muted); }
.outline-button { border-radius: 999px; align-self: flex-start; padding: .85rem 1.15rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: .76rem; cursor: pointer; }
.outline-button:hover { background: var(--cocoa); color: var(--white); }
.materials { grid-template-columns: .82fr 1.18fr; background: var(--mineral); }
.materials-image { order: 2; }
.materials-copy { order: 1; }
.material-list { margin: 1rem 0 0; border-top: 1px solid var(--line); }
.material-list div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.material-list dt { font-size: 1.08rem; }
.material-list dd { margin: 0; color: var(--muted); font-size: .85rem; }

.inspiration { background: var(--page-background); }
.inspiration-grid { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto; gap: clamp(1rem, 2.3vw, 2.3rem); margin-top: 4rem; }
.inspiration-grid figure { border-radius: var(--radius-md); margin: 0; position: relative; overflow: hidden; }
.inspiration-grid figure:first-child { grid-row: 1 / 3; }
.inspiration-grid img { min-height: 18rem; aspect-ratio: 16 / 9; }
.inspiration-grid figure:first-child img { aspect-ratio: 4 / 5; }
.inspiration-grid figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: rgba(255,254,250,.94); font-size: .76rem; }
.source-note { max-width: 48rem; margin: 2rem 0 0 auto; color: var(--muted); font-size: .72rem; text-align: right; }

.faq { border-radius: var(--radius-lg); margin: 0 1.25rem 2rem; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(3rem, 9vw, 10rem); background: var(--mineral); }
.faq-intro > p:last-child { max-width: 25rem; color: var(--muted); }
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 1.2rem; background: var(--white); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; font-size: 1.12rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--red); font-size: 1.35rem; font-weight: 300; transition: transform .2s; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 48rem; margin: 0; padding: 0 3rem 1.5rem 0; color: var(--muted); }
.faq details a { text-underline-offset: .25rem; }

.contact { border-radius: var(--radius-lg); margin: 0 1.25rem; padding: var(--section) var(--pad); background: var(--mineral); color: var(--ink); }
.contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(3rem, 7vw, 8rem); }
.contact-intro { align-self: start; }
.contact-lead { max-width: 31rem; color: var(--muted); }
.contact-lines { width: 4rem; margin: 2.5rem 0; border-top: 2px solid var(--red); }
.contact-details { margin: 0; }
.contact-details div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.contact-details dt { color: var(--muted); font-size: .74rem; }
.contact-details dd { margin: 0; overflow-wrap: anywhere; }
.contact-details a { text-underline-offset: .25rem; }
.contact-details small { display: block; color: var(--muted); }
.contact-form-panel { border-radius: var(--radius-md); padding: clamp(2rem, 4.5vw, 4.5rem); background: var(--white); color: var(--ink); }
.form-heading { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.form-marker { color: var(--berry); font-size: 1.5rem; }
.form-heading h3 { margin: 0; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.05; font-weight: 370; }
.form-heading p { margin: .5rem 0 0; color: var(--muted); }
.interest-options { margin: 0 0 2.5rem; padding: 0; border: 0; }
.interest-options legend { margin-bottom: .8rem; color: var(--muted); font-size: .75rem; }
.interest-options { display: flex; flex-wrap: wrap; gap: .45rem; }
.interest-options legend { flex-basis: 100%; }
.interest-options input { position: absolute; opacity: 0; pointer-events: none; }
.interest-options span { border-radius: 999px; display: block; padding: .6rem .85rem; border: 1px solid var(--line); font-size: .75rem; cursor: pointer; }
.interest-options input:checked + span { border-color: var(--red-dark); background: var(--sand); color: var(--red-dark); }
.interest-options input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 3px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.25rem; }
.form-field { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { font-size: .75rem; }
.form-field label span { color: var(--red); }
.form-field label small { color: var(--muted); }
.form-field input,
.form-field select,
.form-field textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem; background: var(--mineral); color: var(--ink); }
.form-field textarea { resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: 2px solid var(--red-dark); outline-offset: 2px; border-color: var(--red); }
.form-bottom { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form-bottom p,
.form-demo-note { color: var(--muted); font-size: .7rem; }
.form-submit { border-radius: 999px; border: 0; background: var(--red); color: var(--white); padding: .9rem 1.15rem; cursor: pointer; }
.form-submit:disabled { opacity: .45; cursor: wait; }
.form-demo-note { margin-bottom: 0; }
.request-preview { border-radius: var(--radius-sm); margin-top: 1.25rem; padding: 1rem; border-left: 2px solid var(--red-dark); background: var(--sand); }
.request-preview h4 { margin: 0 0 .5rem; font-weight: 500; }
.request-preview p { margin: .25rem 0; color: var(--muted); font-size: .82rem; }

.site-footer { padding: 2rem var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; background: var(--white); border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.site-footer p { margin: 0; }
.site-footer > a:last-child { justify-self: end; text-underline-offset: .3rem; }

.product-dialog { border-radius: var(--radius-lg); overflow: auto; width: min(68rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; background: var(--white); color: var(--ink); grid-template-columns: 1.05fr .95fr; box-shadow: 0 2rem 7rem rgba(0,0,0,.3); }
.product-dialog[open] { display: grid; }
.product-dialog::backdrop { background: rgba(24,24,23,.76); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; z-index: 2; top: .8rem; right: .8rem; width: 2.7rem; height: 2.7rem; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-size: 1.5rem; cursor: pointer; }
.dialog-image { min-height: 38rem; }
.dialog-copy { padding: clamp(2.5rem, 5vw, 5rem); align-self: center; }
.dialog-copy h2 { margin: 0 0 1.5rem; font-size: clamp(2.2rem, 4vw, 4rem); line-height: .98; letter-spacing: -.045em; font-weight: 370; }
.dialog-copy > p:not(.dialog-type) { color: var(--muted); }
.dialog-copy ul { margin: 1.5rem 0 2rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dialog-copy li { padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .86rem; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-contact { display: none; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-intro { max-width: 46rem; }
}

@media (max-width: 760px) {
  .site-header { height: 5rem; }
  .brand { width: 8rem; height: 3.4rem; }
  .menu-toggle { display: grid; gap: .38rem; z-index: 3; padding: .7rem; border: 0; background: none; color: var(--ink); }
  .menu-toggle span:not(.sr-only) { display: block; width: 1.5rem; border-top: 1px solid; }
  .site-nav { display: none; position: fixed; inset: 0; padding: 8rem var(--pad) 3rem; background: var(--white); flex-direction: column; gap: 1rem; }
  .site-nav a { font-size: clamp(2.2rem, 10vw, 4rem); letter-spacing: -.04em; }
  .menu-open .site-nav { display: flex; }
  .hero { min-height: 100svh; }
  .hero-copy { padding-top: 8rem; padding-bottom: 8rem; }
  .hero h1 { max-width: 13ch; font-size: clamp(3rem, 11vw, 5rem); }
  .hero-visual img { object-position: 60% center; }
  .hero-visual figcaption { left: var(--pad); right: auto; bottom: 1.5rem; }
  .space-guide,
  .section-heading,
  .feature-story,
  .materials,
  .faq { grid-template-columns: 1fr; }
  .guide-result { grid-column: 1; padding: 2rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .section-heading { gap: 1.5rem; }
  .product-card,
  .product-card:nth-child(4n + 2),
  .product-card:nth-child(4n + 3) { grid-column: span 6; margin-top: 0; }
  .product-card button { grid-template-columns: 1fr; }
  .product-copy { padding-bottom: .4rem; }
  .product-action { justify-self: start; align-self: auto; padding-top: 0; }
  .feature-story-image,
  .materials-image { min-height: 65vw; }
  .materials-image { order: 1; }
  .materials-copy { order: 2; }
  .inspiration-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .inspiration-grid figure:first-child { grid-row: auto; grid-column: 1 / -1; }
  .inspiration-grid figure:first-child img { aspect-ratio: 16 / 9; }
  .faq { gap: 2.5rem; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .brand--footer,
  .site-footer > a:last-child { justify-self: center; }
}

@media (max-width: 520px) {
  :root { --radius-lg: 24px; --radius-md: 18px; --radius-sm: 12px; }
  .space-guide, .feature-story, .materials, .faq, .contact { margin-left: .65rem; margin-right: .65rem; }
  .contact, .space-guide, .faq { padding-left: 1.2rem; padding-right: 1.2rem; }
  .contact-form-panel { padding: 1.3rem; }
  .hero-copy { padding-top: 8rem; padding-bottom: 8rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card,
  .product-card:nth-child(4n + 2),
  .product-card:nth-child(4n + 3) { grid-column: 1; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); scrollbar-width: none; }
  .filter { flex: 0 0 auto; }
  .inspiration-grid { grid-template-columns: 1fr; }
  .inspiration-grid figure:first-child { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--wide { grid-column: auto; }
  .form-bottom { align-items: stretch; flex-direction: column; }
  .form-submit { width: 100%; }
  .contact-details div { grid-template-columns: 1fr; gap: .3rem; }
  .product-dialog[open] { grid-template-columns: 1fr; overflow-y: auto; }
  .dialog-image { min-height: 35svh; }
  .dialog-copy { padding: 2.5rem 1.4rem; }
}

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

@media print {
  .site-header, .site-footer, .filters, .dialog-close { display: none !important; }
  .hero { min-height: 85vh; }
  .section-pad { padding: 3rem; }
  .product-card { break-inside: avoid; }
}

/* Translucent navigation separates menu text from the content underneath. */
.site-header .brand-tagline { color: var(--white); }
.site-header .brand-mark { mix-blend-mode: normal; }
.site-header .brand-mark img { filter: url(#kott-transparent); }
.site-header.is-scrolled, .menu-open .site-header { background: rgba(255,254,250,.94); color: var(--ink); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-scrolled .brand-tagline, .menu-open .brand-tagline { color: var(--ink); }
.site-header.is-scrolled .brand-mark, .menu-open .brand-mark { mix-blend-mode: normal; }
.site-header.is-scrolled .brand-mark img, .menu-open .brand-mark img { filter: url(#kott-transparent); }
.site-header .menu-toggle { color: inherit; }
.room-notes { padding: var(--section) var(--pad); }
.room-notes > h2 { max-width: 23ch; margin: 0 auto 3.5rem; text-align: center; text-wrap: balance; font-size: clamp(2.5rem,4.5vw,4.7rem); font-weight: 370; line-height: 1.03; letter-spacing: -.045em; }
.room-notes-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.room-notes figure { margin: 0; }
.room-notes img { aspect-ratio: 5/4; border-radius: var(--radius-lg); }
.room-notes figcaption { color: var(--muted); font-size: .75rem; margin-top: .75rem; }
.room-note { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.room-note:first-child { padding-top: 0; }
.room-note h3 { font-size: 1.55rem; font-weight: 450; margin: 0 0 .65rem; }
.room-note p { color: var(--muted); margin: 0; max-width: 42ch; }
.room-notes .outline-button { display: inline-block; margin-top: 2rem; text-decoration: none; }
@media(max-width:760px) { .room-notes-grid { grid-template-columns: 1fr; } }

.brand-mark img { filter: url(#kott-transparent); }

.menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

@media (max-width:760px) { .section-heading p { justify-self: start; } .hero-actions { max-width: 28rem; margin-left: auto; margin-right: auto; } }

.collection-notes { padding: 0 var(--pad) var(--section); }
.collection-notes h2 { max-width: 22ch; margin: 0 auto 3rem; text-align: center; font-size: clamp(2rem,3.5vw,3.8rem); line-height: 1.1; letter-spacing: -.045em; font-weight: 400; }
.collection-notes-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
.collection-notes article { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.collection-notes h3 { margin: 0 0 1rem; font-weight: 500; font-size: 1.3rem; }
.collection-notes p { color: var(--muted); font-size: .92rem; }
.collection-notes a { color: var(--red-dark); font-size: .8rem; text-underline-offset: .25rem; }
@media(max-width:760px) { .collection-notes-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Compact contact tools and a preview-only language selector. */
.site-header { grid-template-columns: 1fr auto 1fr; gap: 1.5rem; }
.header-actions { display: flex; align-items: center; justify-self: end; gap: 1rem; }
.language-switcher { position: relative; font-size: .75rem; }
.language-switcher summary { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border-radius: 50%; cursor: pointer; list-style: none; white-space: nowrap; font-weight: 500; letter-spacing: .06em; transition: background .2s ease; }
.language-switcher summary:hover, .language-switcher[open] summary { background: rgba(217,211,201,.18); }
.language-switcher summary::-webkit-details-marker { display: none; }
.language-panel { position: absolute; top: calc(100% + .5rem); right: 0; width: 4.5rem; padding: .4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 .75rem 2rem rgba(39,44,41,.15); }
.language-current, .language-panel button { display: flex; justify-content: center; width: 100%; min-height: 44px; align-items: center; padding: .65rem; text-align: center; border: 0; border-radius: 10px; font: inherit; }
.language-current { background: var(--sand); color: var(--red-dark); }
.language-panel button { background: transparent; color: var(--muted); cursor: not-allowed; }
.language-panel p { margin: .5rem .75rem; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.whatsapp-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; color: inherit; }
.whatsapp-link:hover { background: rgba(217,211,201,.16); }
@media(max-width:1100px) { .header-actions { gap: .65rem; } .header-contact { display: none; } }
@media(max-width:760px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: .5rem; }
  .header-actions { grid-column: 2; grid-row: 1; gap: .4rem; }
  .menu-toggle { grid-column: 3; grid-row: 1; }
  .language-panel { right: -.85rem; }
  .menu-open .header-actions { visibility: hidden; }
}
@media(max-width:380px) { .site-header .brand { width: 6.5rem; } .site-header .brand-tagline { font-size: .62rem; } }

/* Photo-aligned slats simulate closing; only the scene darkens, never the copy. */
.hero-light-control { display: inline-flex; gap: .25rem; margin: 1.25rem auto 0; padding: .25rem; border: 1px solid rgba(255,254,250,.28); border-radius: 999px; background: rgba(24,20,19,.5); }
.hero-light-control[hidden] { display: none; }
.hero-light-control button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--white); font: inherit; font-size: .75rem; cursor: pointer; }
.hero-light-control button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.hero-light-control svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.blind-scene { position: absolute; pointer-events: none; overflow: hidden; clip-path: url(#hero-blind-mask); }
.blind-window { position: absolute; inset: 0 0 auto; height: 79.8%; display: grid; grid-template-rows: repeat(45,1fr); perspective: 1600px; }
.blind-slat { position: relative; opacity: 0; background: linear-gradient(180deg,#252525 0%,#101010 22%,#181818 65%,#080808 100%); border-top: 1px solid rgba(255,255,255,.035); transform: rotateX(80deg); transform-origin: center; backface-visibility: hidden; transition: transform 2.6s cubic-bezier(.4,0,.2,1), opacity 2.6s ease; }

.hero.is-night .blind-slat { opacity: 1; transform: rotateX(0deg) scaleY(1.1); }
@media(prefers-reduced-motion:reduce) { .blind-slat { transition: none; } }

.product-image img[src$="roman-neutral.jpg"] { object-position: center 15%; }
.dialog-image[src$="roman-neutral.jpg"] { object-position: center 35%; }

/* White hero typography stays legible without tinting the photograph. */
.hero h1 { line-height: 1.06; }
.hero h1 span { background: none; padding: 0; }
.hero h1, .hero .hero-intro, .hero-copy > p:not(.hero-intro) {
  color: #fff;
  background: none;
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  text-shadow: 0 2px 4px #171313, 0 0 12px rgba(23,19,19,.85);
  transition: color 2.6s ease, -webkit-text-stroke-color 2.6s ease, text-shadow 2.6s ease;
}
.hero .hero-intro, .hero-copy > p:not(.hero-intro) { font-weight: 500; -webkit-text-stroke-width: 0; }
.hero.is-night h1, .hero.is-night .hero-intro, .hero.is-night .hero-copy > p:not(.hero-intro) {
  color: #fff; -webkit-text-stroke-color: transparent; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
@media(prefers-reduced-motion:reduce) { .hero h1, .hero .hero-intro, .hero-copy > p:not(.hero-intro) { transition: none; } }

/* Mobile reading and touch targets, preserving the approved palette. */
@media (max-width: 760px) {
  .site-header .menu-toggle { position: relative; width: 44px; height: 44px; padding: 10px; align-content: center; justify-content: center; }
  .menu-toggle span:not(.sr-only) { transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only) { position: absolute; left: 10px; top: 21px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .menu-open .site-header .brand { position: relative; z-index: 2; }
  .site-nav { overflow-y: auto; }
  .button, .outline-button { min-height: 48px; font-size: .9375rem; letter-spacing: 0; }
  .filter { min-height: 44px; font-size: .875rem; }
  .section-kicker, .dialog-type { font-size: .8125rem; letter-spacing: .045em; }
  .product-description, .dialog-copy li, .collection-notes p { font-size: .9375rem; line-height: 1.6; }
  .product-action, .collection-notes a { font-size: .875rem; }
  .product-copy { gap: .6rem; }
  .product-action { padding-bottom: 1.1rem; }
  .dialog-close { width: 44px; height: 44px; color: var(--ink); }
  .hero-light-control button { font-size: .875rem; }
  .hero-visual figcaption, .inspiration-grid figcaption { font-size: .8125rem; line-height: 1.45; }
  .source-note { text-align: left; font-size: .8125rem; }
  .contact-details dt, .contact-details small { font-size: .875rem; }
  .contact-details a { display: inline-flex; align-items: center; min-height: 44px; }
  .form-field label, .interest-options legend { font-size: .875rem; }
  .form-field label small { font-size: .8125rem; }
  .interest-options span { display: flex; align-items: center; min-height: 44px; font-size: .875rem; }
  .form-field input, .form-field select, .form-field textarea { border-color: #81867e; background: #f5f4f0; }
  .form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); opacity: 1; }
  .form-bottom p, .form-demo-note { font-size: .8125rem; line-height: 1.6; }
  .site-footer { font-size: .8125rem; }
  .site-footer > a:last-child { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(2.5rem, 12vw, 2.85rem); }
  .hero-copy > p:not(.hero-intro) { font-size: 1rem; }
  .contact-form-panel { padding: 1rem; }
  .form-heading { grid-template-columns: 1fr; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .menu-toggle span:not(.sr-only) { transition: none; } }
@media (max-width: 520px) {
  .filters { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; gap: .5rem; }
}

/* Approved option 1: a local gradient behind the copy, in day mode only. */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 12% -15% 8%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.65) 0%, rgba(0,0,0,.4) 40%, transparent 72%);
  pointer-events: none;
  transition: opacity 2.6s;
}
.hero.is-night .hero-copy::before { opacity: 0; }
@media (max-width: 760px) {
  .hero-copy::before {
    inset: 9% -30% 9%;
    background: radial-gradient(ellipse, rgba(0,0,0,.7), rgba(0,0,0,.38) 48%, transparent 74%);
  }
}
@media (prefers-reduced-motion: reduce) { .hero-copy::before { transition: none; } }

/* A shorter homepage, with the full content available on dedicated pages. */
.home-collections .product-grid { margin-top: 2.5rem; gap: 1.4rem; }
.home-collections .product-card,
.home-collections .product-card:nth-child(n) { grid-column: span 3; margin-top: 0; }
.home-collections .product-card button { grid-template-columns: 1fr; height: 100%; }
.home-collections .product-image,
.home-collections .product-card:nth-child(n) .product-image { aspect-ratio: 4 / 3; }
.home-collections .product-copy { padding: 1.2rem; }
.home-collections .product-name { font-size: 1.35rem; }
.home-collections .product-action { padding: 0 1.2rem 1.2rem; }
.section-actions { display: flex; justify-content: center; margin-top: 2rem; }
.home-guide { gap: 2rem 4rem; padding-top: 4rem; padding-bottom: 4rem; }
.home-guide .guide-result { padding-left: 1.5rem; }
.guide-more { grid-column: 1 / -1; display: flex; gap: 1rem 2rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.guide-more a { color: var(--red-dark); text-underline-offset: .3rem; min-height: 44px; display: inline-flex; align-items: center; }
.home-inspiration .inspiration-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; margin-top: 2.5rem; }
.home-inspiration .inspiration-grid figure:first-child { grid-column: auto; grid-row: auto; }
.home-inspiration .inspiration-grid img,
.home-inspiration .inspiration-grid figure:first-child img { min-height: 0; aspect-ratio: 16 / 10; }
.page-intro { padding: 10rem var(--pad) 3rem; max-width: 75rem; }
.page-intro h1 { font-size: clamp(2.6rem,5.5vw,5.6rem); font-weight: 370; line-height: 1.05; letter-spacing: -.045em; margin: 1.5rem 0; text-wrap: balance; }
.page-intro p { max-width: 55ch; color: var(--muted); font-size: 1.1rem; }
.back-home { color: var(--red-dark); text-underline-offset: .3rem; display: inline-flex; align-items: center; min-height: 44px; }
.inner-page .collections { padding-top: 2rem; }
.inner-page .collections .section-heading { display: none; }
.inner-page .collections .filters { margin-top: 0; }
.inner-page .room-notes { padding-top: 2rem; }
.automation-details h2 { font-size: clamp(2rem,3.5vw,3.4rem); font-weight: 370; line-height: 1.1; letter-spacing: -.035em; }
.automation-details > .button { margin-top: 2rem; }
.related-pages { margin: 3rem var(--pad); padding-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--line); }
.related-pages a { color: var(--red-dark); text-underline-offset: .3rem; min-height: 44px; display: inline-flex; align-items: center; }
.language-switcher--mobile { display: none; }
@media (max-width: 1100px) and (min-width: 521px) {
  .home-collections .product-card:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 760px) {
  .site-nav a { font-size: clamp(1.75rem,8vw,2rem); font-weight: 370; line-height: 1.1; letter-spacing: -.045em; min-height: 48px; display: flex; align-items: center; }
  .site-nav { gap: .8rem; padding-bottom: 7rem; }
  .header-actions .language-switcher--header { display: none; }
  .language-switcher--mobile { display: block; position: fixed; right: max(1rem,env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 25; color: var(--ink); }
  .language-switcher--mobile summary { width: 48px; height: 48px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 3px 16px rgba(0,0,0,.12); }
  .language-switcher--mobile .language-panel { top: auto; bottom: calc(100% + .5rem); right: 0; }
  .site-footer { padding-bottom: 6rem; }
  .home-guide { padding-top: 3rem; padding-bottom: 3rem; }
  .home-guide .guide-result { padding-left: 0; }
  .page-intro { padding-top: 7rem; }
  .related-pages { gap: .4rem 1.2rem; }
}
@media (max-width: 520px) {
  .home-collections .product-card:nth-child(n) { grid-column: 1; }
  .home-collections .product-image,
  .home-collections .product-card:nth-child(n) .product-image { aspect-ratio: 16 / 9; }
  .home-inspiration .inspiration-grid { grid-template-columns: 1fr; }
  .home-inspiration .inspiration-grid img { aspect-ratio: 16 / 9; }
}

/* Native swipe gallery, shared by the homepage and inspiration page. */
.gallery-track { display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; margin-top:2.5rem; padding:0 0 1rem; scrollbar-width:thin; scrollbar-color:var(--sand) transparent; }
.gallery-track figure { flex:0 0 calc((100% - 1.25rem)/2); min-width:0; margin:0; scroll-snap-align:start; }
.gallery-photo { display:block; position:relative; overflow:hidden; border-radius:var(--radius-md); }
.gallery-photo img { aspect-ratio:16/10; height:auto; object-fit:cover; }
.gallery-expand { position:absolute; right:1rem; bottom:1rem; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--white); color:var(--ink); font-size:1.35rem; }
.gallery-track figcaption { padding:.85rem .2rem; font-size:.9rem; color:var(--muted); }
.gallery-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.gallery-toolbar p { color:var(--muted); font-size:.85rem; margin:0; }
.gallery-toolbar>div { display:flex; gap:.5rem; }
.gallery-toolbar button,.gallery-modal-bar button,.gallery-close { width:48px; height:48px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--ink); font:inherit; font-size:1.3rem; cursor:pointer; }
.gallery-toolbar button:disabled { opacity:.35; cursor:default; }
.gallery-dialog { width:min(1400px,96vw); max-width:96vw; height:92dvh; max-height:92dvh; padding:1rem; border:0; border-radius:var(--radius-md); background:transparent; color:#fff; overflow:hidden; }
.gallery-dialog::backdrop { background:rgba(0,0,0,.85); }
.gallery-dialog[open] { display:flex; flex-direction:column; }
.gallery-close { position:absolute; top:1rem; right:1rem; z-index:1; }
.gallery-stage { min-height:0; flex:1; display:flex; align-items:center; justify-content:center; touch-action:pan-y pinch-zoom; }
.gallery-stage img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius-md); }
.gallery-modal-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; }
.gallery-caption { margin:0; text-align:center; font-size:.9rem; }
@media(max-width:760px) { .gallery-track figure { flex-basis:88%; } .gallery-track { gap:.85rem; } .gallery-toolbar p { max-width:14rem; } .gallery-dialog { padding:.7rem; height:90dvh; } .gallery-caption { font-size:.8rem; } }

/* Quiet horizontal controls centered on the photographs. */
.inspiration-gallery { position:relative; container-type:inline-size; margin-top:2.5rem; }
.inspiration-gallery .gallery-track { margin-top:0; }
.gallery-toolbar button,.gallery-modal-bar button { position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:grid; place-items:center; background:transparent; border:0; color:rgba(255,255,255,.85); border-radius:12px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.gallery-toolbar button { top:calc((100cqw - 1.25rem) * .15625); }
[data-gallery-step="-1"],[data-photo-step="-1"] { left:.5rem; }
[data-gallery-step="1"],[data-photo-step="1"] { right:.5rem; }
.gallery-toolbar button:hover,.gallery-modal-bar button:hover { color:#fff; }
.gallery-toolbar button:focus-visible,.gallery-modal-bar button:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.gallery-toolbar button:disabled { opacity:.2; }
.gallery-toolbar svg,.gallery-modal-bar svg,.gallery-expand svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.gallery-modal-bar { justify-content:center; }
.gallery-expand { background:transparent; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.gallery-expand svg { width:23px; height:23px; }
@media(max-width:760px) { .gallery-toolbar button { top:27.5cqw; } [data-gallery-step="-1"],[data-photo-step="-1"] { left:.15rem; } [data-gallery-step="1"],[data-photo-step="1"] { right:.15rem; } }

/* Keep collection actions aligned independently of copy length. */
.home-collections .product-grid { align-items:stretch; }
.home-collections .product-card button { grid-template-rows:auto 1fr auto; }
.home-collections .product-copy { padding:1.2rem 0; }
.home-collections .product-action { align-self:end; justify-self:start; padding:0 0 1.2rem; }

/* Reserve a quiet toolbar above the enlarged photograph. */
.gallery-dialog { padding-top:3.75rem; }
.gallery-close { top:.25rem; right:.5rem; display:grid; place-items:center; background:transparent; border:0; border-radius:12px; color:rgba(255,255,255,.75); }
.gallery-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.gallery-close:hover { color:#fff; }
.gallery-close:focus, .gallery-close:focus-visible { outline:none; box-shadow:none; }
.gallery-close:focus-visible svg { color:#fff; stroke-width:2; filter:drop-shadow(0 0 3px rgba(255,255,255,.5)); }
@media(max-width:760px) { .gallery-dialog { padding-top:3.5rem; } .gallery-close { top:.15rem; right:.15rem; } }

@media(max-width:760px) {
  .gallery-close { top:var(--photo-close-top,.15rem); right:var(--photo-close-right,.15rem); }
}