/* Editorial corrections added after the initial build. */
.slide--awards .hero-heading{
  font-size:clamp(42px,4.2vw,70px);
  line-height:1.04;
  max-width:740px;
}
.award__lead{max-width:620px}

/* Immersive entry, built from the original twin-door treatment. */
.gate{background:var(--ink);perspective:1400px}
.gate__door{
  position:absolute;
  top:-50vh;
  left:0;
  right:0;
  width:100%;
  max-width:none;
  height:150vh;
  object-fit:cover;
  transition:1.45s cubic-bezier(.6,0,.2,1);
}
.gate__door--left{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
.gate__door--right{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
.gate__door--left{transform-origin:left center}
.gate__door--right{transform-origin:right center}
.gate__door.move-left{transform:translateX(-50%) rotateY(-20deg) scale(1.1);transition-delay:.08s}
.gate__door.move-right{transform:translateX(50%) rotateY(20deg) scale(1.1);transition-delay:.08s}
.gate__content{top:68vh;top:68dvh;bottom:auto;inset-inline:0;transition:opacity .35s ease,transform .45s cubic-bezier(.6,0,.2,1);transform:translateY(-50%);opacity:1}
.gate__content.disappear{transform:translateY(calc(-50% + 42px));opacity:0}
.gate__enter{transition:.35s ease-in}
.gate.is-opening .gate__enter{transform:translateY(20px);opacity:0}
.gate:after{transition:opacity .8s ease .55s}
.gate.is-opening:after{opacity:0}
.gate.is-opening{background:transparent;transition:background .8s ease .85s}

/* Staged entry, so the showroom lands first and everything else arrives
   onto it: the photograph settles, then the header drops in, then the hero
   copy rises. Fill mode is `both`, so the pre-delay state comes from the
   keyframes rather than a standing opacity:0 -- if the animation never runs
   (JS blocked, reduced motion) the content is simply visible. */
body.site-entering>main{
  animation:site-arrive 1.15s cubic-bezier(.18,.85,.25,1) .42s both;
}
body.site-entering>.announce,
body.site-entering>.hdr,
body.site-entering>footer{opacity:0}
@keyframes site-arrive{
  from{opacity:0;transform:scale(.9);filter:blur(5px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}

@keyframes hom-drop{
  from{opacity:0;transform:translateY(-100%)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes hom-rise{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
body.site-entered>.announce{animation:hom-drop .7s cubic-bezier(.22,.9,.28,1) both}
body.site-entered>.hdr{animation:hom-drop .7s cubic-bezier(.22,.9,.28,1) .09s both}
body.site-entered .slide--showroom .slide__content>h1{animation:hom-rise .85s cubic-bezier(.22,.9,.28,1) .42s both}
body.site-entered .slide--showroom .slide__content>.btn{animation:hom-rise .85s cubic-bezier(.22,.9,.28,1) .58s both}

@media(max-width:827px){
  .gate{width:200vw;left:-50vw}
  .gate__door{top:-25vh}
  .gate__content{width:95vw;left:50%;top:70vh;top:70dvh;transform:translate(-50%,-50%)}
  .gate__content.disappear{transform:translate(-50%,calc(-50% + 42px))}
}

@media(prefers-reduced-motion:reduce){
  .gate__door,.gate__content,.gate:after{transition:none}
  body.site-entering>.announce,
  body.site-entering>.hdr,
  body.site-entering>main,
  body.site-entering>footer{animation:none;opacity:1}
  body.site-entered>.announce,
  body.site-entered>.hdr,
  body.site-entered .slide--showroom .slide__content>*{animation:none;opacity:1;transform:none}
}

/* Keep the Why House of Marko image editorial, not poster-like. */
.split__media{
  aspect-ratio:5/4;
  height:clamp(360px,38vw,500px);
  max-height:500px;
}

@media(max-width:700px){
  .slide--awards .hero-heading{font-size:clamp(38px,10vw,54px)}
  .split__media{height:clamp(300px,88vw,440px);max-height:440px}
}

/* ============================================================
   RESPONSIVE CORRECTIONS
   ============================================================ */

/* --- 1. Award seal: keep content inside the circle at every size ---
   The seal is round but its content was laid out in a square box, so at
   small sizes the caption crossed the ring. Constraining content to the
   square inscribed in the circle (side = d / sqrt(2)) makes it safe at
   any diameter, and the rings now scale with the seal instead of being
   fixed pixel values. */
.award__seal{
  --seal:150px;
  width:var(--seal);
  height:var(--seal);
  font-size:calc(var(--seal) * .207);
  box-shadow:
    inset 0 0 0 calc(var(--seal) * .047) var(--ink),
    inset 0 0 0 calc(var(--seal) * .060) var(--gold);
}
.award__seal small{
  max-width:calc(var(--seal) * .707);
  margin-inline:auto;
  font-size:max(8px, calc(var(--seal) * .062));
  line-height:1.16;
  letter-spacing:.1em;
}

/* --- 2. Hero legibility ---
   The showroom photo is bright at the foot of the bed, exactly where the
   supporting copy sits. A deeper falloff plus a soft shadow keeps the
   text readable without flattening the image. */
/* The old shade laid a 50% wash across the whole left half plus a vertical
   ramp to 76%, which is what was flattening the showroom. Replaced with two
   vertical scrims only: one at the very top for the overlaid header, one at
   the bottom for the copy. Between 38% and 60% of the frame there is no
   overlay at all, so the room itself reads clean. */
.slide--showroom .slide__shade{
  background:linear-gradient(180deg,
    rgba(8,31,44,.50) 0%,
    rgba(8,31,44,.43) 13%,
    rgba(8,31,44,.24) 21%,
    rgba(8,31,44,.04) 32%,
    rgba(8,31,44,0)   42%,
    rgba(8,31,44,0)   54%,
    rgba(8,31,44,.12) 63%,
    rgba(8,31,44,.30) 73%,
    rgba(8,31,44,.47) 84%,
    rgba(8,31,44,.56) 100%);
}
@media(max-width:880px){
  /* copy runs the full width here, so the side wash has to reach further */
  .slide--showroom .slide__shade{
    background:linear-gradient(180deg,
      rgba(8,31,44,.60) 0%,
      rgba(8,31,44,.30) 10%,
      rgba(8,31,44,.05) 24%,
      rgba(8,31,44,0)   42%,
      rgba(8,31,44,0)   58%,
      rgba(8,31,44,.30) 76%,
      rgba(8,31,44,.60) 92%,
      rgba(8,31,44,.72) 100%);
  }
}
.slide--showroom .slide__content h1{
  text-shadow:0 1px 3px rgba(5,19,27,.42), 0 2px 24px rgba(5,19,27,.55);
}

/* --- 3. Awards slide should grow, never scroll inside itself ---
   It used to be overflow:visible so the content could grow past a fixed
   slide height. main.js now sizes the track to the active slide, so each
   slide is exactly as tall as its content and clipping is the safe default:
   nothing inside a slide can ever paint over its neighbour in the track. */
.slide--awards{overflow:hidden}
.carousel{overflow:hidden}

@media(max-width:1080px){
  /* --- 4. Burger sits at the far right ---
     The nav is taken out of flow at this width, so its margin-left:auto
     no longer pushed anything. The action group carries it instead. */
  .hdr__act{margin-left:auto}
  .burger{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:46px;
    min-height:46px;
    padding:0;
  }
  .burger i{margin:0}

  /* --- 5. Comfortable mobile menu targets --- */
  .nav{
    padding:6px var(--pad-x) 16px;
    gap:0 18px;
    max-height:calc(100dvh - var(--hdr-h));
    overflow-y:auto;
    box-shadow:0 16px 30px rgba(8,31,44,.09);
  }
  .nav a{
    display:flex;
    align-items:center;
    min-height:56px;
    padding:0;
    font-size:14px;
    letter-spacing:.09em;
    border-bottom:1px solid var(--line);
  }
  .nav a:active{color:var(--gold-text)}
  .nav .nav__cta{
    grid-column:1 / -1;
    justify-content:center;
    margin-top:14px;
    min-height:54px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--porcelain);
    /* .nav a{font-size:13px} outranks .btn{font-size:14px} here (0,1,1 vs
       0,1,0), so this CTA quietly inherited the nav link size instead of
       the button size. Restated explicitly. */
    font-size:14px;
  }
}

@media(max-width:520px){
  .nav{grid-template-columns:1fr}
  .nav a{min-height:54px}
}

@media(max-width:700px){
  .awards__layout{padding-top:60px;padding-bottom:64px}
}

@media(max-width:360px){
  .logo{width:158px}
  .announce{font-size:11px}
}

/* The in-menu CTA only exists for the mobile menu. */
.nav__cta{display:none}
@media(max-width:1080px){.nav.is-open .nav__cta{display:flex}}

/* --- 6. Short viewports (phone held in landscape) ---
   The carousel clamps to 88vh, which at ~375px tall is not enough for the
   six award categories. Let it grow from content instead of clipping. */
@media(max-height:560px) and (min-width:701px){
  .carousel,.carousel__track{height:auto;min-height:min(100vh,430px)}
  .slide{min-height:min(100vh,430px)}
  .awards__layout{
    grid-template-columns:96px minmax(0,1fr);
    gap:26px;
    padding-block:46px;
  }
  .slide--awards .hero-heading{font-size:clamp(27px,3.4vw,38px)}
  .award__lead{font-size:15px;margin-top:8px}
  .award__chips{margin:14px 0 10px}
  .award__chips div{padding-block:6px}
  .award__chips span{font-size:11.5px}
  .slide--awards q{font-size:15px;margin:10px 0}
  .slide__content{padding-bottom:clamp(64px,9vw,100px)}
}

/* --- 7. Tap targets that were text-height only --- */
.logo{display:flex;align-items:center;min-height:44px}
@media(max-width:880px){
  .quote__copy li a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .quote__copy li{padding-bottom:8px}
}

/* --- 8. Gallery captions over bright photography ---
   Several project shots are high-key, and the original scrim topped out
   around 40% alpha where the caption sits. Deepening the lower half puts
   the text on at least .75 alpha, which clears AA even over pure white. */
.gallery figcaption{
  padding:52px 18px 16px;
  background:linear-gradient(180deg,
    rgba(8,31,44,0)   0%,
    rgba(8,31,44,.30) 34%,
    rgba(8,31,44,.76) 68%,
    rgba(8,31,44,.92) 100%);
  text-shadow:0 1px 10px rgba(5,19,27,.45);
}
.gallery figcaption small{color:var(--gold);opacity:.95}


/* ============================================================
   AWARDS SLIDE
   ============================================================
   Consolidated. This section previously held two competing layouts
   whose selectors fought on specificity, so the slide rendered as
   neither. One layout now, matching the markup in index.html.

   Why this slide is light while the rest of the carousel is dark:
   the Australian Women's Small Business Champion Awards mark is
   supplied as a transparent PNG whose lower 38% (the wordmark) is 63%
   black pixels. It cannot be recoloured, since it is an award mark, so
   it needs a light ground to be legible at all. Rather than sit it on
   a plate, the whole slide goes light. That also earns its keep
   editorially: between two photographic slides, the awards read as a
   certificate rather than as another banner.

   The trophy itself is only 7% dark and carries copper (#DEAAA0) that
   sits close to the brass in this palette. Its silver figure is cool
   (hue ~218), the one cool note on the site, but it is contained
   inside a third-party mark where a viewer reads it as a logo. */

.slide--awards{background:var(--ink)}
/* No photograph behind this one. Even at 7% the showroom shot ghosted
   badly enough to swallow the silver figure and the pale parts of the
   award mark. A calm ground is what a certificate wants anyway. */
.slide--awards .slide__award-bg{
  background:linear-gradient(148deg, var(--ink) 0%, var(--ink-2) 100%);
  opacity:1;
}

.slide--awards .awards__layout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:stretch;
  /* the row fills the slide so the light panel reads as a full-height split
     rather than a floating block; the copy re-centres itself inside it */
  align-content:stretch;
  gap:clamp(48px,7vw,104px);
  /* the carousel now sits under the overlaid header, so this slide's centred
     content (and the full-height trophy) has to start below it */
  padding-top:calc(var(--announce-h) + var(--hdr-h) + clamp(14px,2vw,30px));
  padding-bottom:clamp(40px,5vw,64px);
  color:var(--ink);
}
.awards__body{min-width:0;max-width:820px;align-self:center}

.slide--awards .eyebrow{color:var(--gold-text)}
.slide--awards .hero-heading{
  max-width:none;
  color:var(--ink);
  font-size:clamp(34px,2.9vw,50px);
  line-height:1.04;
}
.slide--awards .award__lead{
  margin-top:12px;
  max-width:52ch;
  color:var(--navy-text);
  font-size:clamp(14px,1vw,16px);
}

/* One credential only now: the national trophy, matched to the height
   of the copy beside it so it never runs past the "Book a showroom
   visit" button. CSS alone can't bind one grid column's height to a
   sibling's content-driven height without forcing a circular layout (see
   git history: a grid-stretch attempt here made the trophy match the
   full slide height instead, overshooting whenever the copy was short).
   main.js measures .awards__body and writes the result to --mark-h. */
/* The award mark is a transparent PNG whose wordmark is 63% black pixels, so
   it needs a light ground. Rather than a floating plate, the whole left
   column is a light panel that bleeds off the left edge of the viewport,
   with the copy on navy to its right. The bleed is done with a negative
   margin cancelled by equal padding, so the panel widens without moving the
   trophy: that keeps the split edge locked to the real column boundary at
   every width instead of guessing a percentage. It starts below the header
   band, so the overlaid header stays on navy across its full width and can
   keep one single text colour. */
/* No panel any more. The supplied lockup carried a black wordmark that had
   to sit on light, which is the only reason a light panel ever existed, and
   that wordmark repeated verbatim what the copy beside it already says. Using
   the sculpture on its own (6.6% dark pixels) lets navy be the single ground
   across the whole slide: no split, no shelf under the header, no second
   header colour to manage. The award is still named in full in the copy. */
.awards__marks{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* supplied as a transparent PNG, so it needs no plate on a light ground */
.award__mark{flex:none;line-height:0}
.slide .award__mark picture{position:static;inset:auto;display:block}
/* The lockup is supplied as a single reversed PNG: the sculpture keeps its
   copper and silver, and the wordmark is already knocked out to white, so it
   sits directly on navy with no panel, no filter and no split. */
.slide .award__mark picture img{
  position:static;
  inset:auto;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* one group per awarding body */
.award__group{margin-top:clamp(20px,2.2vw,30px)}
.award__body-title{
  font-family:var(--body);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--gold-text);
  margin:0 0 6px;
  padding-top:14px;
  border-top:1px solid rgba(8,31,44,.10);
}
.slide--awards .award__chips{
  grid-template-columns:1fr;
  margin:0;
  border-top:0;
}
.slide--awards .award__chips div{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:baseline;
  gap:4px 18px;
  padding:5px 0;
  border:0;
}
.slide--awards .award__chips b{
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-text);
}
.slide--awards .award__chips span{
  font:400 clamp(15px,1.05vw,18px)/1.3 var(--display);
  color:var(--ink);
}
/* styles.css dims the 3rd chip onward to porcelain for the dark slide
   (.award__chips div:nth-child(n+3) b, specificity 0-2-2). On this light
   ground that made the "Finalist x4" label invisible, so it is beaten
   here rather than left to chance. */
.slide--awards .award__chips div:nth-child(n+3) b,
.slide--awards .award__chips .is-quiet b{color:var(--navy-text)}
.award__chips .is-quiet span{
  font-family:var(--body);
  font-size:13.5px;
  line-height:1.45;
  color:var(--navy-text);
}

.slide--awards q{
  display:block;
  max-width:50ch;
  margin:clamp(20px,2.2vw,28px) 0 0;
  font:400 clamp(15px,1.1vw,18px)/1.45 var(--display);
  color:var(--navy-text);
  font-style:italic;
}
/* gold on cream is far too weak; the primary dark button is the right call */
.slide--awards .btn--gold{
  margin-top:22px;
  background:var(--ink);
  border-color:var(--ink);
  color:var(--porcelain);
}
.slide--awards .btn--gold:hover{background:var(--gold);border-color:var(--gold)}

/* the carousel controls sit on light here */
/* The dots used to sit on the left and the arrows on the right, held apart
   by space-between. With the dots gone the arrows were the only child left,
   so space-between parked them on the left, directly under the hero button.
   They belong on the right. */
.carousel__controls{justify-content:flex-end}

@media(max-width:1080px){
  .slide--awards .award__chips div{grid-template-columns:132px minmax(0,1fr)}
  .awards__marks{gap:18px}
}

@media(max-width:700px){
  .slide--awards .awards__layout{
    grid-template-columns:minmax(0,1fr);
    align-content:center;
    gap:0;
    /* must clear the overlaid header here too, otherwise the light panel
       slides up behind it and the white header text lands on white */
    padding-block:calc(var(--announce-h) + var(--hdr-h) + 18px) 70px;
  }
  .awards__marks{
    grid-row:1;grid-column:1 / -1;
    /* a lone mark in a full-width band reads better centred than pinned
       left with a wide empty stretch beside it */
    justify-content:center;
    padding-top:0;
  }
  .award__mark{width:clamp(150px,40vw,200px)}
  .awards__body{grid-row:2;grid-column:1 / -1;margin-top:22px}
  .slide--awards .hero-heading{font-size:clamp(34px,9.2vw,46px)}
  .slide--awards .award__chips div{
    grid-template-columns:1fr;
    gap:3px;
    padding:11px 0 12px;
  }
  .slide--awards .award__chips span{font-size:16px}
  .award__chips .is-quiet span{font-size:13px}
  .slide--awards q{font-size:15px}
}

@media(max-height:560px) and (min-width:701px){
  .slide--awards .awards__layout{padding-block:34px;gap:22px}
  .slide--awards .hero-heading{font-size:clamp(27px,3.2vw,40px)}
  .slide--awards .award__lead{font-size:14px;margin-top:8px}
  .award__group{margin-top:12px}
  .award__body-title{margin-bottom:6px;padding-top:8px}
  .slide--awards .award__chips div{padding:6px 0 7px}
  .slide--awards .award__chips span{font-size:14px}
  .award__mark{width:clamp(115px,11vw,150px)}
  .slide--awards q{display:none}
  .slide--awards .btn--gold{margin-top:14px}
}

/* The carousel controls are shared by every slide, so they have to flip
   when the light awards slide is showing. main.js sets .is-light. */
.carousel.is-light .arrows button{
  border-color:rgba(8,31,44,.28);
  color:var(--ink);
}
.carousel.is-light .arrows button:hover{
  border-color:var(--ink);
  background:rgba(8,31,44,.06);
}

/* --- 9. Alfresco slide legibility ---
   The new photo has bright sky and pale gable trim exactly where the
   eyebrow and heading sit, top-left. Same lateral-scrim approach as the
   showroom slide, but stronger at the top since the sky is brighter
   there than the showroom's bedding was at the bottom. */
/* Was a 76% navy wash across the left third plus a vertical ramp on top of
   it, which read as a heavy blue cast over the whole photograph. Same
   treatment as the showroom now: vertical scrims only, nothing at all
   through the middle band, so the pergola and the garden stay true. The
   bottom scrim starts higher than the showroom's because this slide carries
   a heading, a two-line paragraph and two buttons. */
.slide--alfresco .slide__shade{
  background:linear-gradient(180deg,
    rgba(8,31,44,.52) 0%,
    rgba(8,31,44,.44) 13%,
    rgba(8,31,44,.22) 22%,
    rgba(8,31,44,.04) 33%,
    rgba(8,31,44,0)   42%,
    rgba(8,31,44,.14) 51%,
    rgba(8,31,44,.31) 62%,
    rgba(8,31,44,.41) 74%,
    rgba(8,31,44,.45) 100%);
}


/* the sitewide .eyebrow{color:var(--gold-text)} rule (added for the light
   awards slide) was also winning here, on a dark hero slide, where brass-ink
   reads as near-invisible. Dark carousel slides keep the gold eyebrow. */
.slide--alfresco .eyebrow{color:var(--gold-light)}

@media(max-width:880px){
  /* copy runs full width here too */
  .slide--alfresco .slide__shade{
    background:linear-gradient(180deg,
      rgba(8,31,44,.54) 0%,
      rgba(8,31,44,.30) 12%,
      rgba(8,31,44,.06) 26%,
      rgba(8,31,44,0)   40%,
      rgba(8,31,44,.12) 52%,
      rgba(8,31,44,.38) 66%,
      rgba(8,31,44,.58) 82%,
      rgba(8,31,44,.68) 100%);
  }
}

/* --- 10. Alfresco slide framing ---
   The photo is a wide interior-of-a-pergola shot: roofline and sky sit
   in the top half, the lounge/dining/fire pit in the bottom half. Object
   position keeps the furniture in frame; on tall mobile viewports the
   default centred crop showed mostly ceiling and sky, so it drops
   further down there. */
.slide--alfresco>img{object-position:center 78%}
@media(max-width:700px){
  .slide--alfresco>img{object-position:center 88%}
}


/* ============================================================
   FULL-BLEED HERO + OVERLAID HEADER
   ============================================================
   The carousel is pulled up by the height of the announce bar plus the
   header (styles.css), so the showroom photograph starts at the very top
   of the page and runs the full viewport. The header therefore floats on
   the photograph instead of sitting above it, and only turns solid once
   the visitor scrolls past the hero. */

.hdr:not(.is-stuck){
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
  box-shadow:none;
}
.hdr:not(.is-stuck) .nav a,
.hdr:not(.is-stuck) .logo{
  color:#fff;
  text-shadow:0 1px 14px rgba(5,19,27,.55);
}
/* the wordmark is navy artwork, so it is knocked out to white over the photo */
.hdr:not(.is-stuck) .logo img{filter:brightness(0) invert(1)}
.hdr:not(.is-stuck) .nav a:hover{color:#fff;opacity:.72}
.hdr:not(.is-stuck) .burger i{background:#fff}
.hdr:not(.is-stuck) .hdr__act .btn{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.62);
  color:#fff;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  text-shadow:none;
}
.hdr:not(.is-stuck) .hdr__act .btn:hover{
  background:#fff;
  border-color:#fff;
  color:var(--ink);
}

/* The awards slide is a light cream ground, so while it is the active
   slide and the header has not stuck yet, the knocked-out white treatment
   would be invisible. main.js sets .hero-light on <body> to flip it back. */
body.hero-light .hdr:not(.is-stuck) .nav a,
body.hero-light .hdr:not(.is-stuck) .logo{color:var(--ink);text-shadow:none}
body.hero-light .hdr:not(.is-stuck) .logo img{filter:none}
body.hero-light .hdr:not(.is-stuck) .nav a:hover{color:var(--gold-text);opacity:1}
body.hero-light .hdr:not(.is-stuck) .burger i{background:var(--ink)}
body.hero-light .hdr:not(.is-stuck) .hdr__act .btn{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Hero copy: shorter line, smaller call to action, more room for the room. */
/* bottom inset now lives in the shared --hero-inset-b token, see the
   HERO BASELINE section at the end of this file */
/* the hero headline runs 20% under the global h1 scale: with the supporting
   line gone it carries the frame on its own and wants less weight, not more */
.slide--showroom .slide__content h1{font-size:clamp(40px,5.9vw,77px)}
.slide--showroom .slide__content .btn{margin-top:26px}

@media(max-width:880px){
  :root{--hdr-h:88px}
}
@media(max-width:700px){
  :root{--hdr-h:80px}
}


/* On phones the track let every slide stretch to the tallest one (the awards
   slide), so the showroom hero came out ~1150px on an 812px screen and its
   headline fell below the fold on landing. Each slide now owns its height and
   main.js sizes the track to whichever slide is showing, so the hero is
   exactly one screen and the awards slide is still free to grow. */
@media(max-width:700px){
  .carousel__track{align-items:flex-start}
  /* with the track no longer stretching its children, .slide__content's
     height:100% has no definite parent height to resolve against and
     collapses to its own content, pinning the copy to the top of the frame.
     Making the slide a flex column and letting the copy flex to fill keeps
     it bottom-aligned without relying on percentage height. */
  .slide{display:flex;flex-direction:column}
  .slide__content{flex:1 1 auto}
}


/* ============================================================
   AWARDS SLIDE ON NAVY
   ============================================================ */
.slide--awards .awards__layout{color:#fff}
.slide--awards .eyebrow{color:var(--gold-light)}
.slide--awards .hero-heading{color:#fff}
.slide--awards .award__lead{color:rgba(255,255,255,.80)}
.award__body-title{
  color:var(--gold-light);
  border-top-color:rgba(255,255,255,.18);
}
.slide--awards .award__chips b{color:var(--gold-light)}
.slide--awards .award__chips span{color:#fff}
.slide--awards .award__chips div:nth-child(n+3) b,
.slide--awards .award__chips .is-quiet b{color:rgba(255,255,255,.62)}
.award__chips .is-quiet span{color:rgba(255,255,255,.74)}
.slide--awards .btn--gold{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}
.slide--awards .btn--gold:hover{
  background:#fff;
  border-color:#fff;
  color:var(--ink);
}

@media(max-width:700px){
  /* stacked on phones: the panel becomes a full-width band at the top */
}





/* This photo is brightest exactly where the copy sits (the pale sofa on the
   left), but a lateral wash strong enough to fix that tinted the whole
   image blue. Contrast is carried at glyph level instead: a tight shadow
   plus a wider halo reads against the sofa while leaving the pergola, the
   garden and the sky completely untouched. */
.slide--alfresco .slide__content .eyebrow,
.slide--alfresco .slide__content .hero-heading,
.slide--alfresco .slide__content>p:not(.eyebrow){
  text-shadow:0 1px 2px rgba(5,19,27,.62), 0 2px 20px rgba(5,19,27,.72);
}


.award__mark{width:clamp(180px,16vw,270px);max-width:100%}
.slide .award__mark picture img{max-width:100%}

@media(max-width:700px){
  /* stacked: the panel is a full-width band, so the rule goes underneath it */
}

/* ============================================================
   PULL QUOTE
   ============================================================
   Carried over from the WordPress: full-bleed photograph, dimmed, with the
   line set in Tangerine and a heavy rule down its left edge. Faithful to the
   original in type, colour and structure; the responsive behaviour is what
   changed.

   Deviations, and why:
   - The original dims the photo 45% and sets the quote in the steel
     (#ADC0C6), which measures 1.52:1 over the bright parts of that interior.
     The quote is near-white here, which reaches 3.38:1 at a 55% navy-tinted
     dim: lighter type let the overlay come back down, so more of the room
     shows than a darker treatment would have allowed. A glyph-level shadow
     carries the rest, since Tangerine is a very fine script.
   - The original sets 95px/105px and 10px flat, which does not survive a
     phone. Both scale here, and the line-height is a ratio so the script's
     ascenders keep their air at every size.
   - No background-attachment:fixed. It is what the blinds site uses for this
     block, but it janks on iOS and buys nothing at this height. */

.pullquote{
  position:relative;
  overflow:hidden;
  padding-block:clamp(88px,13vw,150px);
  background:var(--ink);
}
.pullquote__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(8,31,44,.55), rgba(8,31,44,.55)),
    image-set(url('assets/quote/interior-quote.webp') type('image/webp'),
              url('assets/quote/interior-quote.jpg') type('image/jpeg'))
      center / cover no-repeat;
}
.pullquote__in{
  position:relative;
  border-left:clamp(4px,0.7vw,10px) solid var(--sand);
  padding-left:clamp(18px,2.6vw,38px);
  max-width:min(var(--max), 1180px);
}
.pullquote blockquote{
  margin:0;
  font-family:'Tangerine', var(--display), cursive;
  font-weight:700;
  font-size:clamp(46px,7.4vw,95px);
  line-height:1.14;
  letter-spacing:.4px;
  /* near-white, but carrying a whisper of the brand steel so it still
     belongs to the palette rather than reading as a detached pure white */
  color:#ECF1F2;
  text-shadow:0 1px 2px rgba(5,19,27,.5), 0 2px 22px rgba(5,19,27,.6);
  max-width:22ch;
}
.pullquote cite{
  display:block;
  margin-top:clamp(20px,2.6vw,34px);
  font-family:var(--body);
  font-style:normal;
  font-size:clamp(15px,1.3vw,19px);
  font-weight:400;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 1px 14px rgba(5,19,27,.55);
}

@media(prefers-reduced-motion:reduce){
  .pullquote__bg{background-attachment:scroll}
}


/* ============================================================
   HERO BASELINE
   The three carousel slides each grew their own bottom inset:
   the showroom sat 58px off the floor, the alfresco slide kept the
   original 142px, and the awards copy was vertically centred inside a
   full-height row, so its button landed 177px up. Cycling the carousel
   made the call to action jump. One token now sets the distance from
   the bottom of the frame to the last element on every slide, so the
   copy holds a single baseline as the slides change.
   ============================================================ */

:root{--hero-inset-b:clamp(52px,6.5vh,86px)}

.slide__content{padding-bottom:var(--hero-inset-b)}

/* The awards slide is a grid, not the flex column the other two use, so it
   reaches the same baseline by ending its row instead of centring in it.
   The trophy panel still stretches the full height beside it. */
.slide--awards .awards__layout{padding-bottom:var(--hero-inset-b)}
.awards__body{align-self:end}

@media(max-width:700px){
  :root{--hero-inset-b:clamp(56px,8vh,84px)}
  /* Below this width the awards slide scrolls rather than filling one
     screen, so its column has no fixed floor to sit on: bottom-aligning it
     would open a dead band above the trophy. It stays centred and only
     matches the inset. */
  .slide--awards .awards__layout{align-content:center}
  .awards__body{align-self:auto}
}

@media(max-height:560px) and (min-width:701px){
  /* A phone in landscape has no spare height: the award copy is taller than
     the room left under the header, so it centres and the inset tightens. */
  :root{--hero-inset-b:46px}
  .awards__body{align-self:center}
}