/* ==========================================================================
   INTERSTYLE — Brand page sections
   Hero · About · Products · Brands · Locations · Contact · Product modal
   Shared by both brand pages; accent colour comes from the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — copy across the top, landscape photography filling the rest
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--nav-h) + 1.25rem) 0 0;
  overflow: hidden;
  background: var(--is-white);
}

.hero__grid {
  --hero-line: rgba(16, 24, 32, 0.03);
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  var(--hero-line) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, var(--hero-line) 0 1px, transparent 1px 60px);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: 0 var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
}

/* Wide screens: title left, supporting copy right, so the band fills the
   full width instead of leaving the right half empty. */
@media (min-width: 62rem) {
  .hero__content {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 0.98;
  color: var(--ink);
}
.hero__title em { font-style: italic; color: var(--accent); }

.hero__desc {
  max-width: 32rem;
  margin: 0 0 1.75rem;
  font-size: 0.93rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--muted);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-bottom: 1.75rem;
}
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
}
.stat__l {
  margin-top: 0.25rem;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Star rating: grey stars with accent stars clipped to --pct on top, so a
   4.5 rating shows four and a half. */
.stars {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--stone-dark);
}
.stars::before { content: "★★★★★"; }
.stars::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pct, 100%);
  overflow: hidden;
  color: var(--accent);
}

/* Short viewports: tighten the copy so the hero stays near one screen. */
@media (max-height: 700px) {
  .hero { padding-top: calc(var(--nav-h) + 0.75rem); }
  .hero__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .hero__desc  { margin-bottom: 1.1rem; }
  .stats { gap: 1.1rem; margin-bottom: 1.1rem; }
  .hero__content { padding-bottom: 1rem; }
  .hero__media { min-height: clamp(6rem, 18vh, 20rem); }
}

/* Landscape photography, full width, taking every pixel the copy leaves. */
.hero__media {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: clamp(10rem, 30vh, 34rem);
  margin: 0;
  overflow: hidden;
  background: var(--stone);
}
/* Home's hero (the dusk showroom) is 7:5, but on desktop the band is a wide
   strip of about 2.6:1, so only half the photo's height shows. Centred, that
   half is sky and tree canopy and the ground floor falls away. Anchor the crop
   low so both floors stay in the band. On phones the band is near-square and
   the crop is taken from the sides, so this has no effect there. */
.theme-home-page .hero__media img { object-position: 50% 85%; }

.hero__media img {
  /* Pinned to the figure rather than sized with height: 100%. The figure gets
     its height from `flex`, and Safari treats a percentage height inside a
     flexed box as unknown — the photo fell back to its own proportions,
     overflowed, and showed only its top (the ceiling). Absolute sizing is
     resolved from the figure's box in every browser. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fade in rather than animating transform: the parallax owns `transform`,
     and the two would fight over the same property. */
  opacity: 0;
  animation: hero-media-in 1.1s var(--ease-brand) 0.15s forwards;
}

@keyframes hero-media-in { to { opacity: 1; } }

/* The scale gives the parallax headroom so shifting never exposes an edge. */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero__media img { opacity: 1; animation: none; }
  [data-parallax] { transform: none !important; }
}

/* Dark hero variant (Interstyle Home) */
.hero--dark { background: var(--surface-dark); }
.hero--dark .hero__grid { --hero-line: rgba(255, 255, 255, 0.05); }
.hero--dark .hero__title { color: var(--is-white); }
.hero--dark .hero__desc  { color: var(--on-dark-2); }
.hero--dark .stat__n     { color: var(--is-white); }
.hero--dark .stat__l     { color: var(--on-dark-3); }

/* --------------------------------------------------------------------------
   2. About
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  margin-top: 3rem;
}
@media (min-width: 62rem) {
  /* `start` keeps the copy directly under the section title; the media column
     then stretches to match, so the carousel fills the same height. */
  .about { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.about__body { max-width: 34rem; }   /* keeps line length readable on wide screens */

.about__body p {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--muted);
}

.statboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--stone-dark);
}
.statbox { padding: clamp(1.25rem, 3vw, 1.8rem); background: var(--surface-dark); }
.statbox__n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
}
.statbox__l {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}

/* The media column is the carousel alone, stretched to the height of the copy
   beside it — no letterboxing, no dead space. */
.about__media { display: flex; flex-direction: column; container-type: inline-size; }

/* --------------------------------------------------------------------------
   3. Carousel (about media + product modal share this)
   -------------------------------------------------------------------------- */

.carousel {
  position: relative;
  overflow: hidden;
  background: var(--is-black);
}
/* A steady 3:2 frame, close to the photographs' own proportions (1.38–1.64).
   It used to stretch to the height of the copy beside it and fall back to
   50vw below that, so the same photo showed almost square on a wide screen
   and letterboxed on a narrow one, changing shape as the window resized. */
.about__carousel { flex: none; aspect-ratio: 3 / 2; }

/* Thumbnails under the carousel: one row, equal widths, filling the space the
   picture leaves beside the longer copy column. */
.about__thumbs {
  display: grid;
  /* site.js sets the column count: one row up to six thumbnails, two rows
     beyond that (ten photos on Interstyle read as 5 + 5, twenty on Home as
     10 + 10). */
  grid-template-columns: repeat(var(--thumb-cols, 5), minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
/* Under 480px of carousel (phones, and the two-column layout around 1024px)
   ten across would be slivers too small to tap, so Home's twenty drop to
   5 per row. The container is .about__media, which also stops the thumbnails
   from widening the About column past the photo. */
@container (max-width: 479px) {
  .about__thumbs {
    grid-template-columns: repeat(var(--thumb-cols-narrow, var(--thumb-cols, 5)), minmax(0, 1fr));
  }
}
/* width: 100% makes each thumbnail take its column's width. Without it the
   3:2 shape and the 44px tap height set the width instead (66px), and ten of
   them ran past the photo. */
.about__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 2px solid transparent;
  background: var(--stone);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-inout);
}
.about__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-inout);
}
.about__thumb.is-active { border-color: var(--accent); }
.about__thumb.is-active img { opacity: 1; }
@media (hover: hover) {
  .about__thumb:hover img { opacity: 1; }
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease-inout);
}
.carousel__slide.is-active { opacity: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Near-square and portrait photos in the pop-up (site.js adds .is-fit): the
   whole picture, over a softened, enlarged copy of itself so the frame is
   filled without cropping the product. */
.carousel__slide.is-fit { overflow: hidden; background: var(--is-black); }
.carousel__slide.is-fit::before {
  content: "";
  position: absolute;
  inset: -2.5rem;
  background: var(--slide-bg) center / cover no-repeat;
  filter: blur(24px) brightness(0.8);
}
.carousel__slide.is-fit img { position: relative; object-fit: contain; }

/* Awaiting artwork: hide the broken image, show the studio placeholder. */
.carousel__slide.is-missing { background: var(--stone); }
.carousel__slide.is-missing img { display: none; }
.carousel__slide.is-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(16,24,32,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(16,24,32,.05) 0 1px, transparent 1px 40px);
}
.carousel__slide.is-missing::after {
  content: "Image awaiting upload";
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

.carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 44px;
  min-height: 44px;
  transform: translateY(-50%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-inout),
              color      var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout);
}
.carousel__nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--is-white);
}
.carousel__nav--prev { left: 0.8rem; }
.carousel__nav--next { right: 0.8rem; }
.carousel__nav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.25; }

/* The row stays inside the photo: in a long gallery (Soft Furniture has 29)
   the dots shrink a little on a phone instead of running off the edge. */
.carousel__dots {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.carousel__dot {
  flex: 0 1 7px;
  min-width: 0;
  height: 7px;
  pointer-events: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--is-white);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--dur-fast) linear;
}
@supports (aspect-ratio: 1) {
  .carousel__dot { height: auto; aspect-ratio: 1; }
}
.carousel__dot.is-active { opacity: 1; }

.carousel__count {
  position: absolute;
  top: 0.8rem; right: 1rem;
  z-index: 5;
  padding: 0.15rem 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Placeholder slide, shown until real photography is supplied. */
.carousel__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.8rem;
  background: var(--stone);
  text-align: center;
}
.carousel__ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(16,24,32,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(16,24,32,.05) 0 1px, transparent 1px 40px);
}
.carousel__ph span {
  position: relative;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dark);
  line-height: 2;
}

/* --------------------------------------------------------------------------
   4. Products
   -------------------------------------------------------------------------- */

.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 3rem;
  background: var(--stone);
}
@media (min-width: 40rem) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .products { grid-template-columns: repeat(3, 1fr); } }

.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 0;
  background: var(--is-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-inout);
}
.product__ic {
  margin-bottom: 1.1rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--stone-dark);
  transition: color var(--dur-base) var(--ease-inout);
}
.product__nm {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ink);
  transition: color var(--dur-base) var(--ease-inout);
}
.product__ds {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
  transition: color var(--dur-base) var(--ease-inout);
}
.product__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--dur-base) var(--ease-inout);
}
.product__cta svg { width: 1.2em; fill: none; stroke: currentColor; stroke-width: 1; transition: transform var(--dur-base) var(--ease-brand); }

.product:hover,
.product:focus-visible { background: var(--surface-dark); }
.product:hover .product__nm,  .product:focus-visible .product__nm  { color: var(--is-white); }
.product:hover .product__ds,  .product:focus-visible .product__ds  { color: var(--on-dark-2); }
.product:hover .product__ic,  .product:focus-visible .product__ic  { color: var(--accent); }
.product:hover .product__cta, .product:focus-visible .product__cta { color: var(--is-white); }
.product:hover .product__cta svg { transform: translateX(0.3em); }

/* --------------------------------------------------------------------------
   5. Brand partners
   -------------------------------------------------------------------------- */

.brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: var(--stone);
}
@media (min-width: 40rem) { .brands { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .brands { grid-template-columns: repeat(5, 1fr); } }
.brand {
  display: grid;
  place-items: center;
  min-height: 6.9rem;
  padding: clamp(1.25rem, 3vw, 2rem) 1.5rem;
  background: var(--is-white);
  transition: background var(--dur-fast) var(--ease-inout);
}
.brand:hover { background: var(--cream); }
.brand img {
  max-width: min(8.125rem, 100%);
  max-height: 3.125rem;
  width: auto;
  object-fit: contain;
  /* Several logo files have a solid white background (Gala, Alumácer, Living
     Ceramics, Ecoceramic, AstralPool). Multiply turns that white into the
     tile's own colour, so no box shows on the cream hover. */
  mix-blend-mode: multiply;
  transition: transform var(--dur-base) var(--ease-brand);
}
.brand:hover img { transform: scale(1.07); }
.brand--lg img { max-width: 10rem; max-height: 3.75rem; }

/* Febal Casa reads small against the other three marks, so it carries 15% more
   than the shared brand--lg size. Targeted rather than widening brand--lg,
   which Chakra, Ezpeleta and Porte Imic also use. */
.brands--home .brand[data-brand="Febal Casa"] img {
  max-width: 11.5rem;
  max-height: 4.3125rem;
}

/* A logo file that has not been supplied yet shows the brand name instead of
   a broken image, so the grid stays complete. */
.brand.is-missing img { display: none; }
.brand.is-missing::after {
  content: attr(data-brand);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

/* Very wide wordmarks (Porcelanosa is ~9.5:1) need more width or they read
   far smaller than the squarer marks beside them. */
.brand--wide img { max-width: min(12.5rem, 100%); max-height: 3.75rem; }

/* --------------------------------------------------------------------------
   6. Locations
   -------------------------------------------------------------------------- */

.locations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 3.5rem;
  background: var(--on-dark-line);
}
@media (min-width: 40rem) { .locations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .locations { grid-template-columns: repeat(3, 1fr); } }
.location {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface-dark);
  transition: background var(--dur-fast) var(--ease-inout);
}
.location:hover { background: var(--surface-dark-raise); }

/* Hover: a showroom or product card lifts toward you. `scale` is its own
   property, so it never fights the entrance slide on `transform`. (The grids
   themselves carry the scroll parallax, set in site.js.) */
@media (hover: hover) {
  .locations .location[data-inview],
  .products .product[data-inview] {
    position: relative;
    transition-property: opacity, transform, background-color, scale, box-shadow;
    transition-duration: var(--dur-slow), var(--dur-slow), var(--dur-fast), var(--dur-base), var(--dur-base);
    transition-timing-function: var(--ease-brand), var(--ease-brand), var(--ease-inout), var(--ease-brand), var(--ease-brand);
  }
  .locations .location:hover,
  .products .product:hover {
    z-index: 2;
    scale: 1.045;
  }
  .locations .location:hover { box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45); }
  .products .product:hover   { box-shadow: 0 1.5rem 3rem rgba(16, 24, 32, 0.28); }
}

.location__n {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--is-grey);                 /* guideline grey: readable, still quiet */
}
.location__cy {
  margin-top: 0.4rem;
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
}
.location__ct {
  margin: 0.15rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--is-white);
}
.location__ad {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--on-dark-3);
}
.location__ph {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--on-dark-2);
  transition: color var(--dur-fast) var(--ease-inout);
}
.location__ph:hover { color: var(--accent); }
.location__ph svg { width: 0.9em; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* --------------------------------------------------------------------------
   7. Contact
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin-top: 3rem;
}
@media (min-width: 62rem) {
  .contact { grid-template-columns: 1fr 1.15fr; align-items: start; }
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  margin-top: 1.75rem;
}
.contact__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  background: var(--accent-wash);
}
.contact__icon svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.contact__lbl {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__val { font-size: 0.83rem; line-height: 1.7; color: var(--ink); }
a.contact__val:hover { color: var(--accent); }

.form {
  padding: clamp(1.5rem, 4vw, 2.8rem);
  background: var(--stone);
}
.form__ttl {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--ink);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 26rem) { .form__row { grid-template-columns: 1fr; gap: 0; } }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--stone-dark);
  border-radius: 0;
  background: var(--is-white);
  font-family: var(--font-brand);
  font-size: 0.87rem;
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-inout);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { height: 6.5rem; resize: vertical; }
.field label span { color: var(--accent); }

/* Validation styling only bites after a submit attempt, so nothing looks
   wrong before the visitor has typed anything. */
.form.is-validated .field input:invalid,
.form.is-validated .field select:invalid,
.form.is-validated .field textarea:invalid {
  /* Shorthand, not `border-color`: the longhand alone was not overriding the
     base `border` shorthand on these controls. */
  border: 1px solid var(--accent);
  background: var(--accent-wash);
}

.form__note {
  margin: 0.9rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}

.form__result {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--is-white);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
}
.form__result--error { border-left-color: #B3261E; }

.form .btn { width: 100%; justify-content: center; background: var(--surface-dark); }
.form .btn:hover { background: var(--accent); }
.form .btn.is-sent { background: #2D6A4F; }
.form .btn[disabled] { cursor: default; opacity: 1; }

/* --------------------------------------------------------------------------
   7b. Client reviews (Google) — four cards in a row on desktop; on phones and
       tablets the cards become a swipeable row
   -------------------------------------------------------------------------- */

.reviews { margin-top: 3rem; }

.reviews__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 1rem;
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reviews__list::-webkit-scrollbar { display: none; }
@media (min-width: 40rem) { .reviews__list { grid-auto-columns: 46%; } }
@media (min-width: 62rem) {
  .reviews__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--cream);
  scroll-snap-align: start;
}
/* A large, quiet quotation mark in the corner. */
.review::before {
  content: "\201C";
  position: absolute;
  top: 0.6rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
}
.review__text {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.9vw + 0.9rem, 1.35rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}
.review__by {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--stone-dark);
}
.review__name { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.review__src {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* "See other reviews" swaps in the next set. */
@keyframes review-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}
.review.is-swapped { animation: review-in var(--dur-base) var(--ease-brand) both; }
.review.is-swapped:nth-child(2) { animation-delay: 80ms; }
.review.is-swapped:nth-child(3) { animation-delay: 160ms; }
.review.is-swapped:nth-child(4) { animation-delay: 240ms; }

@media (hover: hover) {
  .reviews .review {
    transition-property: opacity, transform, scale, box-shadow;
    transition-duration: var(--dur-slow), var(--dur-slow), var(--dur-base), var(--dur-base);
    transition-timing-function: var(--ease-brand);
  }
  .reviews .review:hover {
    z-index: 2;
    scale: 1.03;
    box-shadow: 0 1.5rem 3rem rgba(16, 24, 32, 0.12);
  }
}

.reviews__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-inout);
}
.reviews__more svg { transition: transform var(--dur-base) var(--ease-brand); }
.reviews__more:hover { color: var(--ink); }
.reviews__more:hover svg { transform: translateX(0.3em); }

/* --------------------------------------------------------------------------
   8. Product modal — carousel + info
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(16, 24, 32, 0.9);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-inout),
              visibility 0s linear var(--dur-base);
}
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.modal__box {
  display: flex;
  flex-direction: column;
  /* Sized purely in viewport units: a rem cap made the dialog shrink to a
     small island on large monitors. */
  width: 92vw;
  height: 88vh;
  height: 88dvh;                 /* iOS: the visible height, not the height behind its toolbars */
  background: var(--is-white);
  overflow: hidden;
  transform: translateY(1.5rem) scale(0.98);
  transition: transform var(--dur-base) var(--ease-brand);
}
.modal.is-open .modal__box { transform: none; }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--stone);
}
.modal__lbl {
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal__ttl {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 300;
  color: var(--ink);
}
.modal__close {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  min-width: 46px; min-height: 46px;
  border: 1px solid var(--stone);
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout);
}
.modal__close:hover { background: var(--accent); border-color: var(--accent); color: var(--is-white); }

/* Phones (and phones on their side): a full-screen sheet rather than a
   floating box, so the photography gets every pixel. Safe-area padding keeps
   the notch and home indicator clear. */
@media (max-width: 40rem), (max-height: 32rem) {
  .modal { padding: 0; }
  .modal__box {
    width: 100%;
    height: 100%;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  }
  .modal__head { padding-top: 1rem; padding-bottom: 1rem; }
}

.modal__body {
  display: grid;
  /* minmax(0, …): a long thumbnail strip used to stretch this column to its
     full scroll width (860px on a 380px phone), pushing the photo and text
     off the side. max-content rows: `auto` rows collapsed the gallery to
     zero height, so the text slid up over the photograph. */
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 52rem) {
  .modal__body {
    grid-template-columns: minmax(0, 1.5fr) minmax(21rem, 1fr);
    grid-auto-rows: auto;
    overflow: hidden;
  }
  .modal__info { overflow-y: auto; overscroll-behavior: contain; }
}

/* Gallery column: the stage takes every pixel the thumbnails don't. */
.modal__gallery {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--stone);
}

.modal__stage {
  position: relative;
  /* `flex: none` matters: inside the flex column the stage was shrinking to
     zero height on phones, which hid the gallery entirely. */
  flex: none;
  aspect-ratio: 4 / 3;
  max-height: 62vh;              /* phones on their side: leave room for the thumbnails */
  max-height: 62dvh;
  background: var(--stone);
  touch-action: pan-y;           /* horizontal swipes change the photo (site.js) */
}
@media (min-width: 52rem) {
  .modal__stage { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; max-height: none; }
}

.modal__thumbs {
  display: flex;
  flex: none;
  gap: 5px;
  padding: 0.6rem;
  background: #F5F5F4;
  overflow-x: auto;
}
.modal__thumb {
  flex: none;
  width: clamp(5rem, 7vw, 7rem); height: clamp(3.25rem, 4.6vw, 4.5rem);
  padding: 0;
  border: 2px solid transparent;
  background: var(--stone);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-inout);
}
.modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal__thumb.is-active { border-color: var(--accent); }

/* Info column */
.modal__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0;             /* the sticky enquiry bar supplies the bottom edge */
  border-left: 1px solid var(--stone);
}
@media (max-width: 51.99rem) { .modal__info { border-left: 0; border-top: 1px solid var(--stone); } }

.modal__desc {
  margin: 0 0 1.5rem;
  font-size: 0.87rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--muted);
}
.modal__sub {
  margin: 0 0 0.75rem;
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.modal__features { margin: 0 0 1.75rem; padding: 0; list-style: none; }
.modal__features li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.55rem;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}
.modal__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  background: var(--accent);
}
/* Longer write-ups: supporting paragraphs, the named ranges, and a short
   details table (finishes, spaces, brands). */
.modal__more { margin: -0.5rem 0 1.75rem; }
.modal__more p {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink);
}
.modal__more p:last-child { margin-bottom: 0; }

.modal__ranges {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--stone);
}
.modal__ranges li {
  padding: 0.9rem 0 0.95rem;
  border-bottom: 1px solid var(--stone);
}
.modal__range-nm {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.modal__range-tx {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
}

.modal__specs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  margin: 0 0 2rem;
}
.modal__specs dt {
  padding-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal__specs dd { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink); }
@media (max-width: 26rem) {
  .modal__specs { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .modal__specs dd { margin-bottom: 0.8rem; }
}

/* The enquiry button stays in reach while the write-up scrolls beneath it. */
.modal__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: auto;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--is-white);
  border-top: 1px solid var(--stone);
}
@media (max-width: 51.99rem) {
  .modal__foot .btn { width: 100%; justify-content: center; }
}
.modal__note {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--stone-dark);
}

body.is-locked { overflow: hidden; }


/* --------------------------------------------------------------------------
   Interstyle Home — three partner brands rather than fifteen
   -------------------------------------------------------------------------- */

.brands--home { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .brands--home { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .brands--home { grid-template-columns: repeat(4, 1fr); } }
.brands--home .brand { min-height: 8.75rem; }

/* Four showrooms sit better as a 2x2 than as a row of three plus an orphan. */
@media (min-width: 62rem) {
  .locations--home { grid-template-columns: repeat(2, 1fr); }
}

/* Hero photography that has not been supplied yet: show the studio
   placeholder rather than a broken image. */
.hero__media.is-missing img { display: none; }
.hero__media.is-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(16,24,32,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(16,24,32,.05) 0 1px, transparent 1px 40px);
}
.hero__media.is-missing::after {
  content: "Photography awaiting upload";
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

/* ==========================================================================
   Readability pass — supporting text
   Descriptive copy is ~3px larger than before, and set in solid ink on light
   surfaces and solid white on dark ones, instead of mid-grey tints.
   ========================================================================== */

/* --- Light surfaces: black ------------------------------------------------ */
.hero__desc,
.section__intro,
.about__body p,
.product__ds,
.contact__val,
.modal__desc,
.modal__features li {
  color: var(--ink);
}

.hero__desc     { font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem); }
.section__intro { font-size: clamp(1rem, 0.3vw + 0.92rem, 1.1rem); }
.about__body p  { font-size: clamp(1rem, 0.3vw + 0.92rem, 1.1rem); }
.product__ds    { font-size: 1rem; line-height: 1.7; }
.contact__val   { font-size: 1rem; }
.modal__desc    { font-size: clamp(1rem, 0.3vw + 0.92rem, 1.075rem); }
.modal__features li { font-size: 1rem; }

/* Small uppercase labels: a little larger, and solid rather than grey. */
.stat__l,
.contact__lbl,
.field label,
.form__note,
.modal__sub {
  color: var(--ink);
}
.stat__l      { font-size: 0.75rem; }
.contact__lbl { font-size: 0.72rem; }
.field label  { font-size: 0.72rem; }
.form__note   { font-size: 0.8rem; }
.modal__sub   { font-size: 0.72rem; }

/* --- Dark surfaces: white ------------------------------------------------- */
.hero--dark .hero__desc,
.hero--dark .stat__l,
.section--dark .section__intro,
.location__ad,
.location__ph,
.statbox__l,
.footer__tag,
.footer__col a,
.product:hover .product__ds,
.product:focus-visible .product__ds {
  color: var(--is-white);
}

.location__ad { font-size: 1rem; }
.location__ph { font-size: 0.95rem; }
.statbox__l   { font-size: 0.72rem; }
.footer__tag  { font-size: 0.95rem; }
.footer__col a { font-size: 0.95rem; }
.footer__col a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Pop-up copy — larger, and at Regular weight. Montserrat Light (300) has
   strokes thin enough that solid black still renders as grey on screen.
   -------------------------------------------------------------------------- */

.modal__desc {
  font-size: clamp(1.1rem, 0.35vw + 1rem, 1.25rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
}

.modal__sub {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink);
  margin-bottom: 1rem;
}

.modal__features li {
  font-size: clamp(1.05rem, 0.25vw + 0.98rem, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  padding-left: 1.4rem;
  margin-bottom: 0.7rem;
}

.modal__features li::before {
  width: 7px;
  height: 7px;
  top: 0.62em;
}

/* Location cards: phone and email stack; a second address sits tight under the first. */
.location__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.location__ad + .location__ad { margin-top: -0.45rem; }
.location__ph { word-break: break-word; }

/* "Get directions" — the card's call to action, so it takes the accent and
   the small uppercase voice of the eyebrows rather than the contact style. */
.location__map {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease-inout);
}
.location__map + .location__map { margin-top: 0; }
.location__map svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--dur-base) var(--ease-brand);
}
.location__map:hover { color: var(--is-white); }
.location__map:hover svg { transform: translateY(-0.15rem); }
@media (pointer: coarse) { .location__map { min-height: 44px; } }

/* Showrooms with more than one address: each marked with a small accent dot
   (orange on Interstyle, gold on Interstyle Home). */
.location__list {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}
.location__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--is-white);
}
.location__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}