.hero__text {
  font-size: var(--text-l);
line-height: 1.5;
}
.hero__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: color-mix(in oklab, var(--white) 88%, transparent);
}
.hero__rating {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-s);
font-weight: 500;
line-height: 1.4;

@media (width <= 999px) {
  order: 1;
}
}
.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 0;

  /* Mobile crop on the person (photo 113A0583) */
  @media (width <= 768px) {
    object-position: 27% 50%;
  }

  /* Desktop parallax while the next section covers the hero */
  @media (width > 999px) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      inset-block-start: -10%;
      block-size: 120%;
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
    }
  }
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero {
  position: sticky;
inset-block-start: 0;
z-index: 0;
overflow: clip;
isolation: isolate;
justify-content: flex-end;
min-block-size: 100svh;
padding-block-end: var(--space-xl);
background-color: var(--primary);
color: var(--white);

&::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to bottom, color-mix(in oklab, var(--neutral-ultra-dark) 50%, transparent) 0%, transparent 20%, transparent 30%, color-mix(in oklab, var(--neutral-ultra-dark) 60%, transparent) 62%, color-mix(in oklab, var(--neutral-ultra-dark) 90%, transparent) 100%),
    linear-gradient(to right, color-mix(in oklab, var(--neutral-ultra-dark) 55%, transparent) 0%, transparent 65%);
}

@media (width <= 768px) {
  &::before {
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--neutral-ultra-dark) 55%, transparent) 0%, transparent 16%, transparent 25%, color-mix(in oklab, var(--neutral-ultra-dark) 75%, transparent) 50%, color-mix(in oklab, var(--neutral-ultra-dark) 92%, transparent) 75%);
  }
}

/* Sticky hero: following sections scroll over it */
& ~ * {
  position: relative;
  z-index: 1;
}

/* Zero specificity: sections with their own background keep it */
:where(& ~ *) {
  background-color: var(--body-bg-color);
}

& + * {
  box-shadow: 0 -1.5rem 3rem color-mix(in oklab, var(--neutral-ultra-dark) 18%, transparent);
}
}
.hero__heading {
  display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width <= 999px) {
  gap: var(--space-xs);
}
}
.hero__aside {
  display: flex;
flex-direction: column;
gap: var(--space-s);
padding-block-end: var(--space-xs);

@media (width <= 999px) {
  padding-block-end: 0;
}
}
.hero__cta {
  align-self: start;

@media (width <= 999px) {
  order: 2;
}

@media (width <= 768px) {
  --btn-width: 100%;
  align-self: stretch;
}
}
.hero__container {
  display: grid;
grid-template-columns: 1fr 22.5rem;
align-items: end;
gap: var(--space-l);

@media (width <= 999px) {
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
}
.hero__title {
  display: block;
font-size: var(--h1);
font-weight: var(--heading-font-weight);
line-height: 0.9;
letter-spacing: -0.045em;
text-wrap: balance;
}
.hero__stars {
  color: var(--accent);
font-size: 1.15em;
letter-spacing: 0.1em;
}
.firsts__container {
  display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-m);
text-align: center;

@media (width > 999px) {
  gap: var(--space-l);
}
}
.firsts {
  position: relative;

@media (width > 999px) {
  padding-block: var(--section-space-l);
}
}
.firsts__seo {
  position: relative;
z-index: 1;
font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--text-dark-muted);
}
.firsts__image {
  inline-size: 100%;
block-size: 100%;
object-fit: cover;

&:first-child {
  grid-row: span 2;
  object-position: 50% 30%;
}

@media (width > 999px) {
  position: absolute;
  inline-size: 13.75rem;

  &:nth-child(1) {
    inset-block-start: 28%;
    inset-inline-start: var(--gutter);
    block-size: 20.625rem;
  }

  &:nth-child(2) {
    inset-block-start: 13%;
    inset-inline-end: var(--gutter);
    block-size: 9.1875rem;
  }

  &:nth-child(3) {
    inset-block-end: 13%;
    inset-inline-end: var(--gutter);
    inline-size: 12.5rem;
    block-size: 8.375rem;
  }
}
}
.firsts__lines {
  --line-muted: color-mix(in oklab, var(--base-light), var(--neutral-ultra-dark) 8%);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
font-size: var(--h3);
line-height: 1.15;
letter-spacing: -0.04em;

@media (width > 999px) {
  margin-block-start: calc(var(--space-l) * -1 + var(--space-m));
  font-size: var(--h2);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
}
.firsts__gallery {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-xs);
  inline-size: 100%;
  max-inline-size: 40rem;

  @media (width > 999px) {
    display: contents;
    block-size: 13.75rem;
  }
}
.firsts__line {
  display: block;
font-weight: 500;
color: var(--line-muted);

&[data-active] {
  font-weight: var(--heading-font-weight);
  color: var(--primary);
}

/* Wipe stagger */
&:nth-child(2) { --fx-delay: 0.15s; }
&:nth-child(3) { --fx-delay: 0.3s; }
&:nth-child(4) { --fx-delay: 0.45s; }
}
.firsts__text {
  position: relative;
z-index: 1;
max-inline-size: 35rem;
font-size: var(--text-l);
line-height: 1.55;
color: var(--text-dark);
}
.kitchens {
  background-color: var(--white);
}
.kitchens__media {
  display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xs);
align-content: start;
}
.kitchens__container {
  display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.kitchens__list {
  display: flex;
flex-direction: column;
gap: var(--section-space-m);
padding: 0;
list-style: none;
}
.kitchens__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--text-dark-muted);
}
.kitchens__heading {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.kitchens__image {
  inline-size: 100%;
block-size: auto;
aspect-ratio: 3 / 2;
object-fit: cover;

@media (width <= 768px) {
  .kitchens__feature > & {
    aspect-ratio: 4 / 3;
  }

  .kitchens__media > & {
    display: none;
  }
}
}
.kitchens__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--primary);
white-space: pre-line;
}
.kitchens__head {
  padding-block-end: var(--space-xl);
border-block-end: 1px solid var(--base-light);
display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-l);
}
}
.kitchens__lead {
  max-inline-size: 21.25rem;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark-muted);

@media (width > 999px) {
  padding-block-end: var(--space-xs);
}
}
.kitchens__item {
  display: grid;
gap: var(--space-m);

@media (width > 999px) {
  grid-template-columns: 5fr 3fr;
  gap: var(--space-xl);

  &:nth-child(even) {
    grid-template-columns: 3fr 5fr;

    .kitchens__media {
      order: 2;
    }
  }
}
}
.kitchens__highlight {
  padding-block: var(--space-xs);
border-block-end: 1px solid var(--base-light);
font-size: var(--text-m);
line-height: 1.45;
color: var(--text-dark);
}
.kitchens__price {
  display: flex;
flex-direction: column;
gap: 0.125rem;
}
.kitchens__body {
  display: flex;
flex-direction: column;
gap: var(--space-m);

@media (width > 999px) {
  justify-content: space-between;
  padding-block: 0.5rem;
}
}
.kitchens__excerpt {
  font-size: var(--text-l);
line-height: 1.5;
color: var(--text-dark);
}
.kitchens__name {
  text-wrap: balance;
}
.kitchens__intro {
  font-size: var(--text-m);
color: var(--text-dark-muted);
}
.kitchens__highlights {
  padding: 0;
list-style: none;
border-block-start: 1px solid var(--base-light);
}
.kitchens__footer {
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: end;
gap: var(--space-s);
}
.kitchens__text {
  display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width <= 768px) {
  gap: var(--space-xs);
}
}
.kitchens__price-value {
  font-size: calc(var(--h4) * 1.4);
font-weight: var(--heading-font-weight);
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--primary);
}
.kitchens__link {
  --btn-font-weight: 500;
}
.kitchens__price-label {
  font-size: var(--text-s);
color: var(--text-dark-muted);
}
.kitchens__feature {
  position: relative;
grid-column: 1 / -1;
}
.kitchens__video {
  --btn-text-transform: none;
--btn-letter-spacing: normal;
--btn-font-weight: 500;
--btn-line-height: 1.2;
--btn-text-align: start;
position: absolute;
inset-block-end: var(--space-s);
inset-inline-start: var(--space-s);
display: flex;
align-items: center;
gap: var(--space-xs);
block-size: 3rem;
padding-block: 0;
padding-inline: 0.4375rem 1.25rem;
border: 0;
border-radius: 999px;
background-color: var(--white);
color: var(--neutral-ultra-dark);
font: inherit;
font-size: var(--text-s);
font-weight: 500;
cursor: pointer;
transition: background-color var(--transition-duration) var(--transition-timing);

&:hover {
  background-color: var(--base-ultra-light);
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (width <= 768px) {
  inset-block-end: var(--space-xs);
  inset-inline-start: var(--space-xs);
  block-size: 2.5rem;
  padding-inline: 0.375rem 0.875rem;
}
}
.kitchens__video-icon {
  display: grid;
place-items: center;
flex-shrink: 0;
inline-size: 2.125rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--primary);

&::before {
  content: "";
  inline-size: 0.6875rem;
  block-size: 0.8125rem;
  margin-inline-start: 0.125rem;
  background-color: var(--white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (width <= 768px) {
  inline-size: 1.75rem;

  &::before {
    inline-size: 0.625rem;
    block-size: 0.75rem;
  }
}
}
.process {
  overflow-x: clip;
background-color: var(--primary);
color: var(--white);
}
.process__container {
  display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "heading" "lead" "steps" "nav" "cta";
gap: var(--space-l);

@media (width > 999px) {
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  grid-template-rows: 1fr auto auto;
  grid-template-areas: "heading lead" "heading cta" "steps steps";
  column-gap: var(--space-l);
  row-gap: var(--space-s);
}
}
.process__heading {
  grid-area: heading;
display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  align-self: end;
}
}
.process__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--primary-light);
}
.process__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--white);

@media (width > 999px) {
  white-space: pre-line;
}
}
.process__lead {
  grid-area: lead;
margin-block-start: calc(var(--space-s) - var(--space-l));
font-size: var(--text-l);
line-height: 1.5;
color: var(--primary-light);

@media (width > 999px) {
  align-self: end;
  margin-block-start: 0;
}
}
.process__steps {
  grid-area: steps;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 18.125rem;
gap: var(--space-xs);
counter-reset: step;
margin-inline: calc(var(--gutter) * -1);
padding: 0 var(--gutter);
list-style: none;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
overscroll-behavior-inline: contain;

&::-webkit-scrollbar {
  display: none;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (width > 999px) {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
  margin-block-start: calc(var(--space-xl) - var(--space-s));
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}
}
.process__step {
  display: flex;
flex-direction: column;
gap: var(--space-s);
scroll-snap-align: start;
counter-increment: step;

@media (width > 999px) {
  gap: var(--space-m);

  &:nth-child(even) {
    padding-block-start: var(--space-xl);
  }
}
}
.process__image {
  inline-size: 100%;
block-size: auto;
aspect-ratio: 6 / 7;
object-fit: cover;

@media (width > 999px) {
  aspect-ratio: 3 / 4;

  .process__step:nth-child(even) & {
    aspect-ratio: 8 / 9;
  }
}
}
.process__marker {
  display: flex;
align-items: center;
gap: var(--space-xs);

&::before {
  content: counter(step);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--neutral-ultra-dark);
  font-size: var(--text-m);
  font-weight: 600;
  line-height: 1;
}

&::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background-color: color-mix(in oklab, var(--primary-light) 40%, transparent);
}

@media (width <= 768px) {
  &::before {
    inline-size: 2.5rem;
  }
}
}
.process__step-title {
  margin-block-end: calc(var(--space-xs) - var(--space-s));
font-size: var(--h5);
line-height: 1.25;
letter-spacing: normal;
color: var(--white);
}
.process__step-text {
  font-size: var(--text-m);
line-height: 1.55;
color: var(--primary-light);
}
.process__nav {
  grid-area: nav;
display: flex;
justify-content: space-between;
align-items: center;

@media (width > 999px) {
  display: none;
}
}
.process__dots {
  display: flex;
gap: 0.375rem;
}
.process__dot {
  inline-size: 0.5rem;
block-size: 0.25rem;
border-radius: 2px;
background-color: color-mix(in oklab, var(--primary-light) 50%, transparent);
transition: inline-size var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing);

.process__dots:not(:has([data-active])) > &:first-child,
&[data-active] {
  inline-size: 1.5rem;
  background-color: var(--accent);
}
}
.process__hint {
  font-size: var(--text-s);
color: var(--primary-light);
}
.process__cta {
  grid-area: cta;
justify-self: start;

@media (width <= 999px) {
  --btn-width: 100%;
  justify-self: stretch;
}

@media (width > 999px) {
  align-self: start;
}
}
.details__container {
  display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.details__head {
  display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-l);
}
}
.details__heading {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.details__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--text-dark-muted);
}
.details__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--primary);

@media (width > 999px) {
  white-space: pre-line;
}
}
.details__lead {
  max-inline-size: 21.25rem;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark-muted);

@media (width > 999px) {
  padding-block-end: 0.5rem;
}
}
.details__grid {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xs);
padding: 0;
list-style: none;

@media (width > 999px) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, 17.125rem) 23.75rem;
}
}
.details__tile {
  position: relative;
overflow: clip;
aspect-ratio: 4 / 5;
border-radius: var(--radius);
background-color: var(--base-light);

&:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 7 / 6;
}

@media (width > 999px) {
  aspect-ratio: auto;

  &:nth-child(1) {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    aspect-ratio: auto;
  }

  &:nth-child(2) {
    grid-column: 8 / -1;
    grid-row: 1;
  }

  &:nth-child(3) {
    grid-column: 8 / -1;
    grid-row: 2;
  }

  &:nth-child(4) {
    grid-column: 1 / 5;
    grid-row: 3;
  }

  &:nth-child(5) {
    grid-column: 5 / 9;
    grid-row: 3;
  }
}
}
.details__image {
  position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: 0;
}
.details__caption {
  position: absolute;
inset-block-end: var(--space-xs);
inset-inline: var(--space-xs);
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.625rem 0.75rem;
border-radius: var(--radius);
background-color: var(--white);

.details__tile:first-child & {
  inset-inline-end: auto;
}

@media (width > 999px) {
  inset-block-end: var(--space-s);
  inset-inline: var(--space-s) auto;
  padding: 0.875rem 1.125rem;
}
}
.details__tile-title {
  font-size: var(--text-s);
font-weight: 600;
line-height: 1.3;
color: var(--primary);

@media (width > 999px) {
  font-size: var(--text-m);
  line-height: 1.4;
}
}
.details__tile-text {
  font-size: var(--text-xs);
line-height: 1.35;
color: var(--text-dark-muted);

.details__tile:not(:first-child) & {
  display: none;
}

@media (width > 999px) {
  font-size: var(--text-s);

  .details__tile:not(:first-child) & {
    display: block;
  }
}
}
.details__colors {
  grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-m) var(--space-s);
border-radius: var(--radius);
background-color: var(--white);

@media (width > 999px) {
  grid-column: 9 / -1;
  grid-row: 3;
  justify-content: space-between;
  padding: var(--space-m);
}
}
.details__colors-title {
  font-size: var(--h4);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--primary);
}
.details__swatches {
  --swatch-line: color-mix(in oklab, var(--primary) 18%, transparent);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.5rem;
padding: 0;
list-style: none;

@media (width > 999px) {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block-start: 1px solid var(--swatch-line);
}
}
.details__swatch {
  display: flex;
flex-direction: column;
gap: 0.5rem;

@media (width > 999px) {
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--swatch-line);
}
}
.details__chip {
  block-size: 3.5rem;
border: 1px solid color-mix(in oklab, var(--primary) 16%, transparent);
border-radius: var(--radius);
background: var(--swatch);

&[data-swatch="polarweiss"] { --swatch: #F2EDEA; }
&[data-swatch="jasmin"] { --swatch: #F6E7DA; }
&[data-swatch="manhattan"] { --swatch: #B1B1AF; }
&[data-swatch="arzano"] { --swatch: #6A6567; }
&[data-swatch="ulme"] { --swatch: linear-gradient(100deg, #D8B187, #CEA375); }

@media (width > 999px) {
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
}
}
.details__swatch-name {
  font-size: var(--text-xs);
line-height: 1.3;
color: var(--text-dark);

@media (width > 999px) {
  font-size: var(--text-m);
  line-height: 1.4;
}
}
.compare {
  background-color: var(--primary);
color: var(--white);
}
.compare__container {
  display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "heading" "lead" "grid" "cta";
gap: var(--space-l);

@media (width > 999px) {
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  grid-template-rows: 1fr auto auto;
  grid-template-areas: "heading lead" "heading cta" "grid grid";
  column-gap: var(--space-l);
  row-gap: var(--space-s);
}
}
.compare__heading {
  grid-area: heading;
display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  align-self: end;
}
}
.compare__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--primary-light);
}
.compare__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--white);

@media (width > 999px) {
  white-space: pre-line;
}
}
.compare__lead {
  grid-area: lead;
margin-block-start: calc(var(--space-s) - var(--space-l));
font-size: var(--text-l);
line-height: 1.5;
color: var(--primary-light);

@media (width > 999px) {
  align-self: end;
  margin-block-start: 0;
}
}
.compare__grid {
  grid-area: grid;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xs);
padding: 0;
list-style: none;

@media (width > 999px) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, 27.5rem);
  margin-block-start: calc(var(--space-xl) - var(--space-s));
}
}
.compare__card {
  position: relative;
grid-column: 1 / -1;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: clip;
aspect-ratio: 3 / 2;
padding: var(--space-s);
border-radius: var(--radius);
background-color: var(--primary-dark);
order: 1;

&::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, transparent 25%, color-mix(in oklab, var(--neutral-ultra-dark) 92%, transparent) 100%);
}

&:nth-child(n + 3) {
  order: 3;
}

@media (width > 999px) {
  aspect-ratio: auto;
  padding: var(--space-m);

  &::after {
    background-image: linear-gradient(to bottom, transparent 30%, color-mix(in oklab, var(--neutral-ultra-dark) 62%, transparent) 62%, color-mix(in oklab, var(--neutral-ultra-dark) 92%, transparent) 100%);
  }

  &:nth-child(1) { grid-column: 1 / 6; grid-row: 1; }
  &:nth-child(2) { grid-column: 9 / -1; grid-row: 1; }
  &:nth-child(3) { grid-column: 1 / 5; grid-row: 2; }
  &:nth-child(4) { grid-column: 5 / 10; grid-row: 2; }
}
}
.compare__image {
  position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: 0;
}
.compare__card-body {
  position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.375rem;

@media (width > 999px) {
  gap: 0.5rem;
}
}
.compare__card-before {
  font-size: var(--text-xs);
line-height: 1.3;
color: color-mix(in oklab, var(--white) 80%, transparent);

@media (width > 999px) {
  font-size: var(--text-s);
  line-height: 1.45;
}
}
.compare__card-title {
  font-size: var(--h4);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--white);
text-wrap: balance;
}
.compare__stat {
  display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-s);
min-block-size: 15rem;
padding: 1.125rem;
border-radius: var(--radius);
background-color: var(--white);
color: var(--primary);
order: 2;

@media (width > 999px) {
  min-block-size: 0;
  padding: var(--space-m);

  &[data-stat="weeks"] { grid-column: 6 / 9; grid-row: 1; }
  &[data-stat="austria"] { grid-column: 10 / -1; grid-row: 2; }
}
}
.compare__stat-before {
  font-size: var(--text-xs);
line-height: 1.4;
color: var(--text-dark-muted);

@media (width > 999px) {
  font-size: var(--text-s);
  line-height: 1.45;
}
}
.compare__stat-body {
  display: flex;
flex-direction: column;
gap: 0.25rem;

@media (width > 999px) {
  gap: var(--space-xs);
}
}
.compare__stat-number {
  font-size: clamp(7.5rem, 2.5rem + 13vw, 13.75rem);
font-weight: var(--heading-font-weight);
line-height: 0.82;
letter-spacing: -0.05em;
}
.compare__stat-label {
  font-size: var(--text-m);
font-weight: var(--heading-font-weight);
line-height: 1.3;

@media (width > 999px) {
  font-size: var(--h4);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
}
.compare__stat-claim {
  font-size: clamp(2.125rem, 0.5rem + 4.5vw, 4.5rem);
font-weight: var(--heading-font-weight);
line-height: 0.95;
letter-spacing: -0.045em;
}
.compare__cta {
  grid-area: cta;
justify-self: start;

@media (width <= 999px) {
  --btn-width: 100%;
  justify-self: stretch;
}

@media (width > 999px) {
  align-self: start;
}
}
.living {
  background-color: var(--white);
}
.living__container {
  display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.living__head {
  display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-l);
}
}
.living__heading {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.living__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--text-dark-muted);
}
.living__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--primary);

@media (width > 999px) {
  white-space: pre-line;
}
}
.living__lead {
  max-inline-size: 21.25rem;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark-muted);

@media (width <= 999px) {
  max-inline-size: 40rem;
}

@media (width > 999px) {
  padding-block-end: 0.5rem;
}
}
.living__grid {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xs);
padding: 0;
list-style: none;

@media (width > 999px) {
  grid-template-columns: 1.3fr 1fr 1fr;
  block-size: 32.5rem;
}
}
.living__tile {
  position: relative;
display: flex;
align-items: flex-end;
overflow: clip;
aspect-ratio: 5 / 6;
padding: 0.875rem;
border-radius: var(--radius);
background-color: var(--base-light);

&::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, transparent 55%, color-mix(in oklab, var(--neutral-ultra-dark) 55%, transparent) 100%);
}

&:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
  padding: 1.125rem;
}

@media (width > 999px) {
  aspect-ratio: auto;
  padding: var(--space-s);

  &:first-child {
    grid-column: auto;
    aspect-ratio: auto;
    padding: var(--space-s);
  }
}
}
.living__image {
  position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: 0;
}
.living__label {
  position: relative;
z-index: 1;
font-size: var(--text-m);
line-height: 1.25;
letter-spacing: normal;
color: var(--white);
text-shadow: 0 1px 12px color-mix(in oklab, var(--neutral-ultra-dark) 55%, transparent);

.living__tile:first-child & {
  font-size: var(--h4);
}

@media (width > 999px) {
  font-size: var(--h4);
  line-height: 1.15;
}
}
.showroom__container {
  display: flex;
flex-direction: column;
gap: var(--space-l);

@media (width > 999px) {
  display: grid;
  grid-template-columns: 26.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro gallery" "info gallery";
  column-gap: var(--space-xl);
  row-gap: var(--space-l);
}
}
.showroom__intro {
  grid-area: intro;
display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  gap: var(--space-m);
}
}
.showroom__seo {
  margin-block-end: -0.5rem;
font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--text-dark-muted);
}
.showroom__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--primary);
}
.showroom__text {
  font-size: var(--text-l);
line-height: 1.5;
color: var(--text-dark);
}
.showroom__gallery {
  grid-area: gallery;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xs);

@media (width > 999px) {
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  block-size: 40rem;
}
}
.showroom__image {
  inline-size: 100%;
block-size: auto;
aspect-ratio: 8 / 7;
object-fit: cover;
background-color: var(--base-light);

&:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 35 / 24;
}

@media (width > 999px) {
  block-size: 100%;
  aspect-ratio: auto;

  &:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: auto;
  }
}
}
.showroom__info {
  grid-area: info;
align-self: end;
}
.showroom__row {
  display: flex;
justify-content: space-between;
gap: var(--space-s);
padding-block: 0.875rem;
border-block-end: 1px solid var(--base-light);
font-size: var(--text-m);
line-height: 1.3;

@media (width > 999px) {
  padding-block: 1rem;
}
}
.showroom__label {
  flex-shrink: 0;
color: var(--text-dark-muted);
}
.showroom__value {
  margin: 0;
text-align: end;
color: var(--text-dark);
}
.showroom__list {
  border-block-start: 1px solid var(--base-light);
}
.team {
  overflow-x: clip;
background-color: var(--white);
}
.team__container {
  display: flex;
flex-direction: column;
gap: var(--space-l);

@media (width > 999px) {
  gap: var(--space-xl);
}
}
.team__head {
  display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-l);
}
}
.team__heading {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.team__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--text-dark-muted);
}
.team__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--primary);
}
.team__lead {
  max-inline-size: 23.75rem;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark-muted);

@media (width <= 999px) {
  max-inline-size: 40rem;
}

@media (width > 999px) {
  padding-block-end: 0.5rem;
}
}
.team__members {
  display: grid;
grid-auto-flow: column;
grid-auto-columns: 16.875rem;
gap: var(--space-xs);
margin-inline: calc(var(--gutter) * -1);
padding: 0 var(--gutter);
list-style: none;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
overscroll-behavior-inline: contain;

&::-webkit-scrollbar {
  display: none;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Builder renders a wrapper around loop items */
& > :not(.team__member) {
  display: contents;
}

/* One row: 4 columns fill the container, below the minimum width the row scrolls */
@media (width > 999px) {
  --cols: 4;
  --col-min: 17.5rem;

  grid-auto-columns: max(var(--col-min), (100% - (var(--cols) - 1) * var(--space-m)) / var(--cols));
  gap: var(--space-m);
  margin-inline: 0;
  padding: 0;
  scroll-padding-inline: 0;
}
}
.team__member {
  display: flex;
flex-direction: column;
gap: 0.875rem;
scroll-snap-align: start;

@media (width > 999px) {
  gap: var(--space-s);
}
}
.team__image {
  inline-size: 100%;
block-size: auto;
aspect-ratio: 27 / 32;
object-fit: cover;
object-position: 50% 30%;
background-color: var(--base-light);

@media (width > 999px) {
  aspect-ratio: 24 / 25;
  object-position: 50% 50%;
}
}
.team__info {
  display: flex;
flex-direction: column;
gap: 0.125rem;

@media (width > 999px) {
  gap: 0.25rem;
}
}
.team__name {
  font-size: var(--h5);
line-height: 1.25;
letter-spacing: normal;
color: var(--primary);
}
.team__position {
  font-size: var(--text-m);
line-height: 1.4;
color: var(--text-dark-muted);
}
.team__review {
  display: flex;
flex-direction: column;
gap: var(--space-s);
padding-block-start: var(--space-m);
border-block-start: 1px solid var(--base-light);

@media (width > 999px) {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  padding-block-start: var(--space-l);
}
}
.team__quote {
  max-inline-size: 53.75rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.team__quote-text {
  font-size: var(--text-l);
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--text-dark);

@media (width > 999px) {
  font-size: var(--h4);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
}
.team__rating {
  display: flex;
flex-direction: column;
gap: var(--space-s);
order: -1;

@media (width > 999px) {
  flex-shrink: 0;
  gap: 0.375rem;
  order: 0;
}
}
.team__score {
  font-size: var(--h4);
font-weight: var(--heading-font-weight);
line-height: 1.15;
color: var(--primary);
}
.team__source {
  font-size: var(--text-s);
line-height: 1.45;
color: var(--text-dark-muted);

@media (width > 999px) {
  white-space: pre-line;
}
}
.team__footer {
  display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-s);
}
.team__actions {
  display: flex;
flex-shrink: 0;
gap: 0.5rem;
}
.team__action {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  aspect-ratio: 1;
  border: 1px solid var(--base-light);
  border-radius: 50%;
  color: var(--primary);
  transition:
    background-color var(--transition-duration) var(--transition-timing),
    border-color var(--transition-duration) var(--transition-timing),
    color var(--transition-duration) var(--transition-timing);

  &::before {
    content: '';
    inline-size: 1.125rem;
    aspect-ratio: 1;
    background-color: currentColor;
    mask: var(--icon) center / contain no-repeat;
  }

  &[data-action='phone'] {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M13.832%2016.568a1%201%200%200%200%201.213-.303l.355-.465A2%202%200%200%201%2017%2015h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202A18%2018%200%200%201%202%204a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v3a2%202%200%200%201-.8%201.6l-.468.351a1%201%200%200%200-.292%201.233%2014%2014%200%200%200%206.392%206.384'%2F%3E%3C%2Fsvg%3E");
  }

  &[data-action='mail'] {
    --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm22%207-8.991%205.727a2%202%200%200%201-2.009%200L2%207'%2F%3E%3Crect%20x%3D'2'%20y%3D'4'%20width%3D'20'%20height%3D'16'%20rx%3D'2'%2F%3E%3C%2Fsvg%3E");
  }

  &:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--white);
  }

  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
.faq__container {
  display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "intro" "list" "note";
gap: var(--space-l);

@media (width > 999px) {
  grid-template-columns: 26.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro list" "note list";
  column-gap: var(--space-xl);
  row-gap: var(--space-s);
}
}
.faq__intro {
  grid-area: intro;
display: flex;
flex-direction: column;
gap: var(--space-s);
}
.faq__seo {
  font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--text-dark-muted);
}
.faq__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--primary);
}
.faq__note {
  grid-area: note;
align-self: start;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark-muted);
}
.faq__phone {
  color: var(--primary);
font-weight: 600;
text-decoration: none;
white-space: nowrap;

&:hover {
  color: var(--primary);
  text-decoration: underline;
}
}
.faq__list {
  grid-area: list;
display: flex;
flex-direction: column;
border-block-start: 1px solid var(--base-light);

/* Builder renders a wrapper around loop items */
& > :not(.faq__item) {
  display: contents;
}
}
.faq__item {
  border-block-end: 1px solid var(--base-light);
}
.faq__question-heading {
  font-size: var(--text-l);
line-height: 1.4;
letter-spacing: normal;

@media (width > 999px) {
  font-size: var(--h5);
  line-height: 1.33;
}
}
.faq__question {
  /* Override ACSS global button styles */
--btn-text-transform: none;
--btn-text-align: start;
--btn-letter-spacing: normal;
--btn-font-weight: 600;
--btn-font-style: normal;
--btn-line-height: inherit;
--btn-text-decoration: none;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-s);
inline-size: 100%;
padding-block: 1.25rem;
padding-inline: 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
text-align: start;
color: var(--primary);
cursor: pointer;

&[aria-expanded="true"] {
  padding-block-end: 0.625rem;
}

&[aria-expanded="true"] .faq__icon::after {
  rotate: 0deg;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (width > 999px) {
  align-items: center;
  padding-block: 1.75rem;

  &[aria-expanded="true"] {
    padding-block-end: 0.75rem;
  }
}
}
.faq__icon {
  --size: 1.125rem;
position: relative;
flex-shrink: 0;
inline-size: var(--size);
block-size: var(--size);
margin-block-start: 0.25rem;
color: var(--primary);

&::before,
&::after {
  content: "";
  position: absolute;
  inset-inline: 0.15em;
  inset-block-start: calc(50% - 1px);
  block-size: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transition: rotate var(--transition-duration) var(--transition-timing);
}

&::after {
  rotate: 90deg;
}

@media (width > 999px) {
  --size: 1.25rem;
  margin-block-start: 0;
}
}
.faq__answer {
  display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition-duration) var(--transition-timing);

.faq__item:has([data-accordion-button][aria-expanded="true"]) & {
  grid-template-rows: 1fr;
}
}
.faq__answer-inner {
  min-block-size: 0;
overflow: hidden;
}
.faq__answer-text {
  max-inline-size: 40rem;
padding-block-end: 1.25rem;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark);

@media (width > 999px) {
  padding-block-end: 1.75rem;
}
}
.footer {
  position: relative;
z-index: 1;
padding: 0;
background-color: var(--neutral-ultra-dark);
color: var(--primary-light);
}
.footer__container {
  max-inline-size: calc(var(--content-width) + var(--gutter) * 2);
padding-block: var(--space-l);
padding-inline: var(--gutter);
gap: var(--space-m);

@media (width > 999px) {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
}
.footer__brand {
  display: flex;
align-items: center;
gap: var(--space-m);
}
.footer__logo {
  display: block;
flex-shrink: 0;

img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 0;
}

&[data-logo="edelmann"] {
  inline-size: 4.5rem;
}

&[data-logo="dan"] {
  inline-size: 2.25rem;
}

@media (width > 999px) {
  &[data-logo="edelmann"] {
    inline-size: 5.0625rem;
  }

  &[data-logo="dan"] {
    inline-size: 2.5rem;
  }
}
}
.footer__copy {
  order: 3;
font-size: var(--text-xs);
line-height: 1.3;

@media (width > 999px) {
  order: 0;
  font-size: var(--text-s);
}
}
.footer__nav {
  order: 2;

@media (width > 999px) {
  order: 0;
}
}
.footer__links {
  display: flex;
flex-wrap: wrap;
gap: var(--space-s) var(--space-m);
padding: 0;
list-style: none;
}
.footer__link {
  font-size: var(--text-s);
line-height: 1.3;
color: var(--primary-light);
text-decoration: none;

&:hover {
  color: var(--white);
  text-decoration: underline;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.footer__contact {
  position: relative;
z-index: 1;
inline-size: 100%;
padding-block: var(--section-space-m);
background-color: var(--primary);
color: var(--white);
scroll-margin-block-start: 0;
}
.contact__container {
  display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "intro" "form" "info";
gap: var(--space-l);
max-inline-size: calc(var(--content-width) + var(--gutter) * 2);
padding-inline: var(--gutter);

@media (width > 999px) {
  grid-template-columns: 30rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro form" "info form";
  column-gap: var(--space-xl);
}
}
.contact__intro {
  grid-area: intro;
display: flex;
flex-direction: column;
gap: var(--space-s);

@media (width > 999px) {
  gap: var(--space-m);
}
}
.contact__seo {
  margin-block-end: -0.5rem;
font-size: var(--text-m);
font-weight: 500;
line-height: 1.45;
letter-spacing: normal;
color: var(--primary-light);
}
.contact__title {
  display: block;
font-size: var(--h2);
font-weight: var(--heading-font-weight);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--white);
}
.contact__text {
  font-size: var(--text-l);
line-height: 1.5;
color: var(--primary-light);
}
.contact__info {
  grid-area: info;
align-self: end;
}
.contact__list {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.contact__row {
  display: flex;
flex-direction: column;
gap: 0.125rem;
}
.contact__term {
  font-size: var(--text-s);
color: var(--primary-light);
}
.contact__value {
  margin: 0;
font-size: var(--text-l);
font-weight: 600;
line-height: 1.35;
color: var(--white);

@media (width > 999px) {
  font-size: var(--h5);
}
}
.contact__link {
  color: var(--white);
text-decoration: none;

&:hover {
  color: var(--white);
  text-decoration: underline;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.contact__form {
  --field-border: color-mix(in oklab, var(--base-light), var(--neutral) 25%);
grid-area: form;
display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-m) var(--space-s);
border-radius: var(--radius);
background-color: var(--white);
color: var(--text-dark);

@media (width > 999px) {
  padding: var(--space-l);
}
}
.contact__pair {
  display: grid;
gap: var(--space-s);

@media (width > 999px) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
}
.contact__field {
  display: flex;
flex-direction: column;
gap: 0.375rem;

@media (width > 999px) {
  gap: 0.5rem;
}
}
.contact__label {
  padding: 0;
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-dark);
}
.contact__input {
  block-size: 3.25rem;
padding-inline: 0.875rem;
border: 1px solid var(--field-border);
border-radius: var(--radius);
background-color: var(--white);
font: inherit;
font-size: var(--text-m);
color: var(--text-dark);

&:focus-visible {
  border-color: var(--primary);
  outline: 2px solid color-mix(in oklab, var(--primary) 25%, transparent);
  outline-offset: 0;
}
}
.contact__textarea {
  min-block-size: 6.25rem;
padding: 0.75rem 0.875rem;
border: 1px solid var(--field-border);
border-radius: var(--radius);
background-color: var(--white);
font: inherit;
font-size: var(--text-m);
color: var(--text-dark);
resize: vertical;

&:focus-visible {
  border-color: var(--primary);
  outline: 2px solid color-mix(in oklab, var(--primary) 25%, transparent);
  outline-offset: 0;
}

@media (width > 999px) {
  min-block-size: 7.5rem;
}
}
.contact__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;

  @media (width > 999px) {
    gap: 0.625rem;
  }
}
.contact__pills {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

  /* Builder renders a wrapper around loop items */
  & > :not(.contact__choice) {
    display: contents;
  }
}
.contact__choice {
  position: relative;
display: flex;
align-items: center;
block-size: 2.5rem;
padding-inline: 0.875rem;
border: 1px solid var(--field-border);
border-radius: 999px;
font-size: var(--text-s);
color: var(--text-dark);
cursor: pointer;
transition: background-color var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing);

&:hover {
  border-color: var(--primary);
}

&:has(:checked) {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
  font-weight: 500;
}

&:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (width > 999px) {
  block-size: 2.75rem;
  padding-inline: 1.125rem;
}
}
.contact__radio {
  position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.contact__upload {
  position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
border: 1px dashed var(--field-border);
border-radius: var(--radius);
cursor: pointer;

&:hover {
  border-color: var(--primary);
}

&:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (width > 999px) {
  gap: 1rem;
  padding: 1.125rem 1.25rem;
}
}
.contact__upload-icon {
  flex-shrink: 0;
inline-size: 1.25rem;
aspect-ratio: 1;
background-color: var(--primary);
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2016V4M12%204L7%209M12%204L17%209M4%2015V19C4%2019.6%204.4%2020%205%2020H19C19.6%2020%2020%2019.6%2020%2019V15'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;

@media (width > 999px) {
  inline-size: 1.375rem;
}
}
.contact__upload-text {
  display: flex;
flex-direction: column;
gap: 0.125rem;
}
.contact__upload-title {
  font-size: var(--text-s);
font-weight: 500;
line-height: 1.3;
}
.contact__upload-hint {
  font-size: var(--text-xs);
line-height: 1.3;
color: var(--text-dark-muted);
}
.contact__file {
  position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.contact__consent {
  display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: var(--text-xs);
line-height: 1.45;
color: var(--text-dark-muted);
cursor: pointer;

@media (width > 999px) {
  font-size: var(--text-s);
}
}
.contact__checkbox {
  flex-shrink: 0;
inline-size: 1.25rem;
block-size: 1.25rem;
margin: 0;
accent-color: var(--primary);
}
.contact__consent-link {
  color: var(--primary);
text-decoration: underline;
}
.contact__submit {
  --btn-width: 100%;
margin-block-start: 0.25rem;

&:disabled {
  opacity: 0.6;
  cursor: wait;
}
}
.header {
  --header-fg: var(--neutral-ultra-dark);
--header-icon: var(--primary);
--header-line: var(--base-light);
--header-height: 4.25rem;
position: relative;
z-index: 50;
padding-inline: var(--gutter);
border-block-end: 1px solid var(--header-line);
background-color: var(--base-ultra-light);
color: var(--header-fg);

html:has(.hero) & {
  --header-fg: var(--white);
  --header-icon: var(--white);
  --header-line: color-mix(in oklab, var(--white) 25%, transparent);
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  background-color: transparent;
}

&[data-header-state],
html:has(.hero) &[data-header-state] {
  --header-fg: var(--neutral-ultra-dark);
  --header-icon: var(--primary);
  --header-line: transparent;
  --header-height: 3.5rem;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  background-color: color-mix(in oklab, var(--white) 96%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--primary) 10%, transparent), 0 8px 24px color-mix(in oklab, var(--primary) 8%, transparent);
  translate: 0 -100%;
  transition: translate 0.3s var(--transition-timing);
}

&[data-header-state="pinned"],
html:has(.hero) &[data-header-state="pinned"] {
  translate: 0 0;
}

@media (width > 999px) {
  --header-height: 5.5rem;

  &[data-header-state] {
    --header-height: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  &[data-header-state] {
    transition: none;
  }
}
}
.header__bar {
  display: flex;
inline-size: 100%;
max-inline-size: var(--content-width);
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
block-size: var(--header-height);
}
.header__logo {
  display: block;
flex-shrink: 0;
inline-size: 4.5rem;

img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 0;
}

img[data-logo="dark"] {
  display: none;
}

.header:not([data-header-state]) & img[data-logo="light"] {
  html:not(:has(.hero)) & {
    display: none;
  }
}

.header:not([data-header-state]) & img[data-logo="dark"] {
  html:not(:has(.hero)) & {
    display: block;
  }
}

.header[data-header-state] & {
  inline-size: 3.9375rem;

  img[data-logo="light"] {
    display: none;
  }

  img[data-logo="dark"] {
    display: block;
  }
}

@media (width > 999px) {
  inline-size: 6.1875rem;

  .header[data-header-state] & {
    inline-size: 5.0625rem;
  }
}
}
.header__menu-logo {
  display: block;
inline-size: 4.5rem;

img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 0;
}

&:focus-visible {
  outline-style: none;
}
}
.header__nav {
  @media (width <= 999px) {
  display: none;
}
}
.header__nav-list {
  display: flex;
gap: 2.5rem;
padding: 0;
list-style: none;
}
.header__nav-link {
  position: relative;
display: inline-block;
padding-block: 0.375rem;
font-size: var(--text-m);
line-height: 1.2;
color: var(--header-fg);
text-decoration: none;

&::before {
  content: "";
  position: absolute;
  inset-inline: 50%;
  inset-block-end: 0;
  block-size: 1.5px;
  background-color: currentColor;
  transition: inset-inline 0.35s ease-out;
  pointer-events: none;
}

&:hover::before,
&:focus-visible::before,
&[aria-current]::before {
  inset-inline: 0;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  &::before {
    transition: none;
  }
}

&:hover {
  color: var(--header-fg);
}
}
.header__cta {
  --btn-padding-block: 0.8125rem;
--btn-padding-inline: 1.375rem;
--btn-min-width: 0;
font-size: var(--text-s);

@media (width <= 999px) {
  --btn-display: none;
}
}
.header__actions {
  display: flex;
align-items: center;
gap: 0.5rem;

@media (width > 999px) {
  display: none;
}
}
.header__icon-button {
  display: grid;
place-items: center;
inline-size: 2.5rem;
aspect-ratio: 1;
border: 1px solid var(--header-line);
border-radius: 50%;
background-color: var(--white);
color: var(--header-icon);

&::before {
  content: "";
  inline-size: 1.125rem;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M3.5%207l8.5%206%208.5-6'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

html:has(.hero) .header:not([data-header-state]) & {
  border-color: color-mix(in oklab, var(--white) 50%, transparent);
  background-color: transparent;
}

.header[data-header-state] & {
  inline-size: 2.25rem;
  border-color: var(--base-light);

  &::before {
    inline-size: 1rem;
  }
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

&:hover {
  color: var(--header-icon);
}
}
.header__burger {
  /* Override ACSS global button styles */
--btn-text-transform: none;
--btn-letter-spacing: normal;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.4375rem;
inline-size: 2.5rem;
block-size: 2.5rem;
padding: 0 0.5625rem;
border: 0;
background: none;
color: var(--header-fg);
cursor: pointer;

&::before,
&::after {
  content: "";
  display: block;
  block-size: 2px;
  border-radius: 1px;
  background-color: currentColor;
}

&::after {
  align-self: flex-end;
  inline-size: 0.875rem;
}

.header[data-header-state] & {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding-inline: 0.5rem;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.header__menu {
  --menu-line: color-mix(in oklab, var(--primary-light) 25%, transparent);
position: fixed;
inset: 0;
inline-size: 100%;
max-inline-size: none;
block-size: 100dvh;
max-block-size: none;
margin: 0;
padding: 0;
border: 0;
background-color: var(--primary);
color: var(--white);
overflow-y: auto;
overscroll-behavior: contain;

&[open] {
  display: flex;
  flex-direction: column;
  animation: header-menu-in 0.35s var(--transition-timing);
}

&::backdrop {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  &[open] {
    animation: none;
  }
}

@keyframes header-menu-in {
  from { translate: 100% 0; }
  to { translate: 0 0; }
}
}
.header__menu-top {
  display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
block-size: 4.25rem;
padding-inline: var(--gutter);
border-block-end: 1px solid var(--menu-line);
}
.header__close {
  /* Override ACSS global button styles */
--btn-text-transform: none;
--btn-letter-spacing: normal;
--btn-font-weight: 500;
display: flex;
align-items: center;
gap: 0.625rem;
block-size: 2.5rem;
padding: 0 0.375rem 0 1rem;
border: 0;
border-radius: 999px;
background-color: color-mix(in oklab, var(--white) 12%, transparent);
color: var(--white);
font: inherit;
font-size: var(--text-s);
font-weight: 500;
cursor: pointer;

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.header__close-icon {
  display: grid;
place-items: center;
inline-size: 1.75rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--white);

&::before {
  content: "";
  inline-size: 0.6875rem;
  aspect-ratio: 1;
  background-color: var(--neutral-ultra-dark);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%205l14%2014M19%205L5%2019'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
}
.header__menu-nav {
  flex: 1;
padding: 1rem var(--gutter) 0;
}
.header__menu-list {
  padding: 0;
list-style: none;
}
.header__menu-item {
  display: flex;
flex-direction: column;
gap: 0.875rem;
padding-block: 1rem;
border-block-end: 1px solid var(--menu-line);

&:first-child {
  padding-block-end: 1.25rem;
}
}
.header__menu-link {
  font-size: 2.125rem;
font-weight: var(--heading-font-weight);
line-height: 1.18;
letter-spacing: -0.03em;
color: var(--white);
text-decoration: none;
transition: color var(--transition-duration) var(--transition-timing);

&:hover,
&[aria-current] {
  color: var(--accent);
}

.header__menu-item:first-child > & {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);

  &::after {
    content: "";
    flex-shrink: 0;
    inline-size: 1.125rem;
    block-size: 2px;
    margin-inline-end: 0.125rem;
    border-radius: 1px;
    background-color: var(--accent);
  }
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
}
.header__kitchens {
  display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 0;
list-style: none;

/* Builder renders a wrapper around loop items */
& > :not(.header__kitchen) {
  display: contents;
}
}
.header__kitchen-link {
  display: flex;
align-items: center;
gap: 0.875rem;
color: var(--white);
text-decoration: none;

&:hover {
  color: var(--white);
}

&:hover .header__kitchen-name {
  color: var(--accent);
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.header__kitchen-image {
  flex-shrink: 0;
inline-size: 3.5rem;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 3px;
}
.header__kitchen-text {
  display: flex;
flex-direction: column;
}
.header__kitchen-name {
  font-size: var(--text-m);
font-weight: 600;
line-height: 1.3;
transition: color var(--transition-duration) var(--transition-timing);
}
.header__kitchen-price {
  font-size: var(--text-s);
line-height: 1.3;
color: var(--primary-light);
}
.header__menu-footer {
  display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem var(--gutter) 1.75rem;
}
.header__menu-cta {
  --btn-width: 100%;
}
.header__menu-call {
  display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
block-size: 3.375rem;
border: 1px solid color-mix(in oklab, var(--white) 50%, transparent);
border-radius: var(--radius);
color: var(--white);
font-size: var(--text-m);
font-weight: 500;
text-decoration: none;

&::before {
  content: "";
  inline-size: 1.0625rem;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%203h4l2%205-2.5%201.5a11%2011%200%200%200%206%206L16%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%205a2%202%200%200%201%202-2z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

&:hover {
  color: var(--white);
}
}
.header__menu-meta {
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
padding-block-start: 0.375rem;
font-size: var(--text-xs);
line-height: 1.3;
}
.header__menu-address {
  color: var(--primary-light);
}
.header__menu-rating {
  font-weight: 500;
color: var(--white);
}
.soft-focus {
  .fx-word {
  display: inline-block;
}

&[data-fx="ready"] .fx-word {
  opacity: 0;
}

&[data-fx="in"] .fx-word {
  animation: fx-soft-focus var(--fx-duration, 1s) var(--fx-ease, cubic-bezier(0.22, 1, 0.36, 1)) calc(var(--fx-delay, 0s) + var(--i) * var(--fx-stagger, 0.09s)) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.flip-up {
  .fx-word {
  display: inline-block;
  white-space: nowrap;
  perspective: 600px;
}

.fx-char {
  display: inline-block;
  transform-origin: 50% 100% -0.3em;
  backface-visibility: hidden;
}

&[data-fx="ready"] .fx-char {
  opacity: 0;
}

&[data-fx="in"] .fx-char {
  animation: fx-flip-up var(--fx-duration, 0.8s) var(--fx-ease, cubic-bezier(0.22, 1, 0.36, 1)) calc(var(--fx-delay, 0s) + var(--i) * var(--fx-stagger, 0.025s)) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.line-rise {
  .fx-line {
  display: block;
  overflow: clip;
  padding-block: 0.08em;
  margin-block: -0.08em;
}

.fx-line-inner {
  display: block;
  transform-origin: 0 100%;
}

&[data-fx="ready"] .fx-line-inner {
  translate: 0 110%;
}

&[data-fx="in"] .fx-line-inner {
  animation: fx-line-rise var(--fx-duration, 1.1s) var(--fx-ease, cubic-bezier(0.22, 1, 0.36, 1)) calc(var(--fx-delay, 0s) + var(--i) * var(--fx-stagger, 0.14s)) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.ink-fill {
  .fx-line {
  display: block;
}

.fx-line-inner {
  display: block;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

&[data-fx="in"] .fx-line-inner {
  animation: fx-ink-fill var(--fx-duration, 1.3s) cubic-bezier(0.65, 0, 0.35, 1) calc(var(--fx-delay, 0.2s) + var(--i) * var(--fx-stagger, 0.22s)) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.accent-wipe {
  /* Zero specificity: positioned elements (e.g. absolute captions) keep their position */
:where(&) {
  position: relative;
}

&::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--fx-wipe-color, var(--accent));
  scale: 0 1;
  pointer-events: none;
}

&[data-fx="ready"] {
  clip-path: inset(0 100% 0 0);
}

&[data-fx="in"] {
  animation: fx-wipe-reveal var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

&[data-fx="in"]::after {
  animation: fx-wipe-bar var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.compare__stat-figure {
  display: flex;
align-items: baseline;
gap: 0.25rem;
}
.compare__stat-prefix {
  font-size: var(--h5);
font-weight: var(--heading-font-weight);
line-height: 1;
letter-spacing: -0.01em;
}
.white-wipe {
  /* Zero specificity: positioned elements (e.g. absolute captions) keep their position */
:where(&) {
  position: relative;
}

&::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--fx-wipe-color, var(--white));
  scale: 0 1;
  pointer-events: none;
}

&[data-fx="ready"] {
  clip-path: inset(0 100% 0 0);
}

&[data-fx="in"] {
  animation: fx-wipe-reveal var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

&[data-fx="in"]::after {
  animation: fx-wipe-bar var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.base-wipe {
  /* Zero specificity: positioned elements (e.g. absolute captions) keep their position */
:where(&) {
  position: relative;
}

&::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--fx-wipe-color, var(--base));
  scale: 0 1;
  pointer-events: none;
}

&[data-fx="ready"] {
  clip-path: inset(0 100% 0 0);
}

&[data-fx="in"] {
  animation: fx-wipe-reveal var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

&[data-fx="in"]::after {
  animation: fx-wipe-bar var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.primary-wipe {
  /* Zero specificity: positioned elements (e.g. absolute captions) keep their position */
:where(&) {
  position: relative;
}

&::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--fx-wipe-color, var(--primary));
  scale: 0 1;
  pointer-events: none;
}

&[data-fx="ready"] {
  clip-path: inset(0 100% 0 0);
}

&[data-fx="in"] {
  animation: fx-wipe-reveal var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

&[data-fx="in"]::after {
  animation: fx-wipe-bar var(--fx-duration, 0.9s) cubic-bezier(0.77, 0, 0.18, 1) var(--fx-delay, 0s) both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  &:not([data-fx]) {
    visibility: hidden;
    animation: fx-fallback 0s 2s forwards;
  }
}
}
.copyright-footer {
  /* Footer reveal: pinned under the contact block, content drifts up (--reveal from footer-reveal.js, hook data-footer-reveal) */
position: sticky;
inset-block-end: 0;
z-index: 0;
background-color: var(--neutral-ultra-dark);

& > * {
  translate: 0 calc((1 - var(--reveal, 1)) * 1.75rem);
  opacity: calc(0.2 + 0.8 * var(--reveal, 1));
}
}
.team__slider {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.team__nav {
  display: flex;
justify-content: flex-end;
gap: 0.5rem;

/* Both arrows disabled = everything visible */
&:not(:has(:enabled)) {
  display: none;
}
}
.team__arrow {
  display: grid;
place-items: center;
inline-size: 3rem;
aspect-ratio: 1;
padding: 0;
border: 1px solid var(--base-light);
border-radius: 50%;
background: none;
color: var(--primary);
cursor: pointer;
transition:
  background-color var(--transition-duration) var(--transition-timing),
  border-color var(--transition-duration) var(--transition-timing),
  color var(--transition-duration) var(--transition-timing),
  opacity var(--transition-duration) var(--transition-timing);

&::before {
  content: '';
  inline-size: 1.25rem;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h14M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

&[data-slider-prev]::before {
  scale: -1 1;
}

&:hover:enabled {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
}

&:disabled {
  opacity: 0.35;
  cursor: default;
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.footer__top {
  order: 4;
display: grid;
place-items: center;
inline-size: 2.75rem;
aspect-ratio: 1;
border: 1px solid color-mix(in oklab, var(--primary-light) 40%, transparent);
border-radius: 50%;
color: var(--primary-light);
transition:
  background-color var(--transition-duration) var(--transition-timing),
  border-color var(--transition-duration) var(--transition-timing),
  color var(--transition-duration) var(--transition-timing);

&::before {
  content: '';
  inline-size: 1.25rem;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm5%2012%207-7%207%207'%2F%3E%3Cpath%20d%3D'M12%2019V5'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

&:hover {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--neutral-ultra-dark);
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (width > 999px) {
  order: 0;
}
}
.video-modal {
  inline-size: min(70rem, 100% - var(--gutter) * 2);
max-inline-size: none;
max-block-size: calc(100dvh - var(--space-m) * 2);
margin: auto;
/* Room for the close button focus ring (overflow auto clips) */
padding: 0.375rem;
overflow: visible auto;
border: 0;
background: none;
color: var(--white);
opacity: 0;
transition: opacity 0.3s ease, overlay 0.3s allow-discrete, display 0.3s allow-discrete;

&[open] {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

/* Dialog itself gets focus on open (autofocus) – no ring around the whole modal */
&:focus {
  outline: none;
}

&::backdrop {
  background-color: color-mix(in oklab, var(--neutral-ultra-dark) 85%, transparent);
  backdrop-filter: blur(0.5rem);
}

/* No page scroll behind the open modal */
:root:has(&[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  transition: none;
}
}
.video-modal__close {
  --btn-text-transform: none;
--btn-letter-spacing: normal;
--btn-font-weight: 500;
--btn-line-height: 1.2;
--btn-text-align: start;
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
z-index: 1;
display: flex;
align-items: center;
gap: 0.625rem;
block-size: 2.75rem;
padding-block: 0;
padding-inline: 1rem 0.375rem;
border: 0;
border-radius: 999px;
background-color: color-mix(in oklab, var(--white) 12%, transparent);
color: var(--white);
font-size: var(--text-s);
cursor: pointer;
transition: background-color var(--transition-duration) var(--transition-timing);

&::after {
  content: '';
  inline-size: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231A2326'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M18%206%206%2018M6%206l12%2012'%2F%3E%3C%2Fsvg%3E") center / 1rem no-repeat;
}

&:hover {
  background-color: color-mix(in oklab, var(--white) 20%, transparent);
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.video-modal__panel {
  display: flex;
flex-direction: column;
gap: var(--space-s);

&[hidden] {
  display: none;
}
}
.video-modal__head {
  display: flex;
flex-direction: column;
justify-content: center;
min-block-size: 2.75rem;
padding-inline-end: 9rem;
}
.video-modal__title {
  font-size: var(--h4);
font-weight: var(--heading-font-weight);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--white);
text-wrap: balance;
}
.video-modal__video {
  display: block;
inline-size: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
background-color: var(--neutral-ultra-dark);
object-fit: cover;
}
.video-modal__footer {
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-s);
padding-block-start: 0.75rem;
}
.video-modal__more {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
.video-modal__more-label {
  font-size: var(--text-s);
line-height: 1.4;
color: var(--primary-light);
}
.video-modal__thumbs {
  display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;

/* Builder renders a wrapper around loop items */
& > :not(li) {
  display: contents;
}
}
.video-modal__thumb-item {
  &[hidden] {
  display: none;
}
}
.video-modal__thumb {
  --btn-text-transform: none;
--btn-letter-spacing: normal;
--btn-font-weight: 500;
--btn-line-height: 1.2;
--btn-text-align: start;
display: flex;
align-items: center;
gap: 0.75rem;
padding-block: 0.375rem;
padding-inline: 0.375rem 1rem;
border: 0;
border-radius: var(--radius);
background-color: color-mix(in oklab, var(--white) 10%, transparent);
color: var(--white);
cursor: pointer;
transition: background-color var(--transition-duration) var(--transition-timing);

&:hover {
  background-color: color-mix(in oklab, var(--white) 18%, transparent);
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.video-modal__thumb-image {
  flex-shrink: 0;
inline-size: 3.75rem;
block-size: 2.75rem;
object-fit: cover;
border-radius: 2px;
}
.video-modal__thumb-text {
  display: flex;
flex-direction: column;
gap: 0.125rem;
}
.video-modal__thumb-name {
  font-size: var(--text-s);
font-weight: 600;
line-height: 1.2;
}
.video-modal__thumb-time {
  font-size: var(--text-xs);
line-height: 1.2;
color: var(--primary-light);
}
.video-modal__actions {
  display: flex;
flex-wrap: wrap;
gap: 0.75rem;

@media (width <= 768px) {
  inline-size: 100%;

  & > * {
    flex: 1 1 auto;
  }
}
}
.video-modal__link {
  display: inline-flex;
justify-content: center;
align-items: center;
min-block-size: 3.25rem;
padding-inline: 1.5rem;
border: 1px solid var(--white);
border-radius: var(--radius);
color: var(--white);
font-size: var(--text-m);
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition:
  background-color var(--transition-duration) var(--transition-timing),
  color var(--transition-duration) var(--transition-timing);

/* Hidden until the kitchen has its own page */
&[href="#"],
&[href=""] {
  display: none;
}

&:hover {
  background-color: var(--white);
  color: var(--neutral-ultra-dark);
}

&:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
}
.video-modal__cta {
  white-space: nowrap;
}
.contact__status {
  margin: 0;
font-size: var(--text-s);
font-weight: 500;

&:empty {
  display: none;
}

.contact__form[data-state="error"] & {
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
  background-color: color-mix(in oklab, var(--white) 14%, transparent);
}

.contact__form[data-state="success"] & {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--success, #1a7f37);
  border-radius: var(--radius-s);
  font-size: var(--text-m);
  font-weight: 400;
  text-align: center;
  color: var(--success-dark, #1a7f37);
}
}
.kitchens__price-badge {
  padding: 0.25em 0.75em;
border-radius: 999px;
background-color: var(--accent);
color: var(--neutral-ultra-dark);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.02em;
}
.kitchens__price-meta {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
.kitchens__price-old {
  font-size: var(--text-m);
color: var(--text-dark-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.kitchens__price-note {
  margin-block-start: 0.125rem;
font-size: var(--text-xs);
color: var(--text-dark-muted);
}
.cookie-banner {
  position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: 1000;
inline-size: min(32rem, 100%);
max-block-size: calc(100dvh - var(--space-m));
margin-inline: auto;
overflow-y: auto;
padding: var(--space-s) var(--space-m) var(--space-m);
border: 1px solid var(--base-light);
border-block-end: 0;
border-radius: var(--radius) var(--radius) 0 0;
background-color: var(--white);
color: var(--text-dark);
/* Dim the page while open (huge spread shadow – scrolling and clicks stay possible) */
--cookie-banner-overlay: rgb(0 0 0 / 0.5);
box-shadow: 0 -0.75rem 2.5rem -1rem rgb(0 0 0 / 0.3), 0 0 0 100vmax var(--cookie-banner-overlay);
opacity: 0;
translate: 0 100%;
transition: translate 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s ease;

&[data-state="open"] {
  opacity: 1;
  translate: 0 0;
}

&[hidden] {
  display: none;
}

@media (width <= 768px) {
  border-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
  transition: none;
}
}
.cookie-banner__title {
  margin: 0 0 0.375rem;
font-size: var(--text-m);
font-weight: 600;
line-height: 1.2;
color: var(--primary);
}
.cookie-banner__text {
  margin: 0;
font-size: var(--text-s);
line-height: 1.45;
color: var(--text-dark-muted);
}
.cookie-banner__link {
  color: var(--primary);
text-decoration: underline;
text-underline-offset: 0.15em;

&:hover {
  color: var(--primary);
  text-decoration-thickness: 2px;
}
}
.cookie-banner__options {
  display: grid;
gap: var(--space-xs);
margin-block-start: var(--space-s);
padding: 0;
border: 0;

&[hidden] {
  display: none;
}
}
.cookie-banner__option {
  display: grid;
grid-template-columns: auto 1fr;
gap: 0.125rem 0.625rem;
align-items: start;
padding: var(--space-xs) var(--space-s);
border: 1px solid var(--base-light);
border-radius: var(--radius);
cursor: pointer;

&:has(:disabled) {
  cursor: default;
}
}
.cookie-banner__checkbox {
  grid-row: span 2;
inline-size: 1.125rem;
block-size: 1.125rem;
margin: 0.125rem 0 0;
accent-color: var(--primary);
}
.cookie-banner__option-name {
  font-size: var(--text-s);
font-weight: 600;
color: var(--text-dark);
}
.cookie-banner__option-text {
  font-size: var(--text-xs);
line-height: 1.4;
color: var(--text-dark-muted);
}
.cookie-banner__actions {
  display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-block-start: var(--space-s);

& > * {
  flex: 1 1 0;
  min-inline-size: max-content;
}

& > .btn--accent {
  flex-basis: 100%;
  padding: 0.625em 1em;
  line-height: 1.2;
}

/* Secondary actions smaller than the main button */
& > :not(.btn--accent) {
  padding: 0.5em 1em;
  font-size: var(--text-s);
  line-height: 1.2;
}

& > [hidden] {
  display: none;
}
}
.cookie-banner__settings {
  white-space: nowrap;
}
.footer__social-link {
  display: inline-flex;
padding: 0.25rem;
margin: -0.25rem;
border-radius: var(--radius);

&::before {
  content: "";
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background-color: currentColor;
  mask: var(--social-icon) center / contain no-repeat;
}

&[data-social="instagram"] {
  --social-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D'20'%20height%3D'20'%20x%3D'2'%20y%3D'2'%20rx%3D'5'%20ry%3D'5'%2F%3E%3Cpath%20d%3D'M16%2011.37A4%204%200%201%201%2012.63%208%204%204%200%200%201%2016%2011.37z'%2F%3E%3Cline%20x1%3D'17.5'%20x2%3D'17.51'%20y1%3D'6.5'%20y2%3D'6.5'%2F%3E%3C%2Fsvg%3E");
}

&[data-social="facebook"] {
  --social-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%202h-3a5%205%200%200%200-5%205v3H7v4h3v8h4v-8h3l1-4h-4V7a1%201%200%200%201%201-1h3z'%2F%3E%3C%2Fsvg%3E");
}
}