/* ===========================================================================
   REDEX — full aluminium security doors
   ---------------------------------------------------------------------------
   Palette and type follow the printed catalogue: near-black, champagne gold
   sampled from the cover, a light serif for display against a geometric sans
   for everything functional.

   The recurring 45° diagonal comes from two places at once — the slashes
   through the D of the logo, and the diagonal timber inlay on the doors
   themselves. It marks the active finish and divides the sections.
   ========================================================================= */

:root{
  --void:     #0B0B0C;
  --panel:    #131315;
  --panel-2:  #1A1A1D;
  --line:     #26262A;
  --line-2:   #333338;
  --gold:     #D7B071;
  --wa:       #25D366;   /* WhatsApp brand green */
  --wa-dk:    #1DA851;
  --gold-2:   #A98659;
  --gold-dim: rgba(215,176,113,.18);
  --silver:   #C9CED6;   /* brushed steel — the hardware on every door   */
  --silver-2: #8E949E;
  --silver-3: rgba(201,206,214,.16);
  /* the two metals together, used on section edges and rules */
  --metal: linear-gradient(90deg, var(--gold) 0%, #E4D3B4 18%,
                           var(--silver) 46%, var(--silver-2) 68%, transparent 100%);
  --chalk:    #F1EFEA;
  --ash:      #9B968D;
  --ash-2:    #6E6A64;

  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --max: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--chalk);
  font:300 clamp(.95rem,.4vw + .87rem,1.03rem)/1.7 'Poppins',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ width:min(100% - var(--gut)*2, var(--max)); margin-inline:auto; }
section[id]{ scroll-margin-top:78px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100;
       background:var(--gold); color:var(--void); padding:.7rem 1rem; }
.skip:focus{ left:0; }

:where(a,button,input,select,textarea):focus-visible{
  outline:1px solid var(--gold); outline-offset:3px;
}

/* the diagonal, used as a rule and as the active marker */
.hatch{
  background-image:repeating-linear-gradient(45deg,
    var(--gold-dim) 0 1px, transparent 1px 7px);
}

/* ── type ────────────────────────────────────────────────────────────── */
.eyebrow{
  font:400 .68rem/1 'Poppins',sans-serif;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.2rem;
}
.secthead{ max-width:52ch; margin:0 0 2.8rem; }
.secthead__title{
  font:300 clamp(2rem,4.6vw,3.2rem)/1.08 'Cormorant Garamond',Georgia,serif;
  letter-spacing:.005em; margin:0 0 .8rem; color:var(--chalk);
}
.secthead__title em{ font-style:italic; color:var(--gold); }
.secthead__note{ margin:0; color:var(--ash); max-width:52ch; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--chalk); --bd:var(--line-2);
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.6rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font:500 .74rem/1 'Poppins',sans-serif;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease),
                            border-color .2s var(--ease);
}
.btn--gold{ --bg:var(--gold); --fg:#17140E; --bd:var(--gold); }
.btn--gold:hover{ --bg:#E5C489; --bd:#E5C489; }
/* WhatsApp keeps its own green — people scan for it */
.btn--wa{ --bg:var(--wa); --fg:#05270F; --bd:var(--wa); }
.btn--wa:hover{ --bg:var(--wa-dk); --bd:var(--wa-dk); }
.btn--line{ --bd:var(--silver-2); --fg:var(--silver); }
.btn--line:hover{ --bd:var(--silver); --fg:#F2F4F7; background:rgba(201,206,214,.07); }
.btn--full{ width:100%; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--void) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--metal); opacity:.7;
}
.topbar__in{ display:flex; align-items:center; gap:1.6rem; height:68px; }
.brand{ margin-right:auto; display:flex; }
.brand img{ height:26px; width:auto; }
.topnav{ display:flex; gap:1.8rem; }
.topnav a{
  font:400 .78rem/1 'Poppins',sans-serif; letter-spacing:.06em;
  text-decoration:none; color:var(--ash); padding:.4rem 0;
  border-bottom:1px solid transparent;
}
.topnav a:hover{ color:var(--silver); border-bottom-color:var(--silver); }
.topbar__cta{ padding:.6rem 1.1rem; }

/* ── mobile menu ─────────────────────────────────────────────────────── */
.navtoggle{
  display:none; width:42px; height:38px; flex:none;
  border:1px solid var(--line-2); background:transparent; cursor:pointer;
  padding:0; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.navtoggle span{
  display:block; width:18px; height:1px; background:var(--silver);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.navtoggle:hover{ border-color:var(--silver-2); }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .navtoggle{ display:flex; }
  .brand img{ height:22px; }
  .topbar__cta{ font-size:.68rem; padding:.55rem .9rem; }
  .topbar__in{ gap:.7rem; }
  .topnav{
    display:none;
    position:absolute; top:100%; left:0; right:0; z-index:41;
    flex-direction:column; gap:0;
    padding:.2rem var(--gut) .9rem;
    background:var(--void);           /* solid — the hero showed through */
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(0,0,0,.5);
  }
  .topnav.is-open{ display:flex; }
  .topnav::after{
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:var(--metal); opacity:.6;
  }
  .topnav a{
    padding:.95rem .2rem; font-size:.95rem; color:var(--chalk);
    border-bottom:1px solid var(--line);
  }
  .topnav a:last-child{ border-bottom:0; }
  .topnav a:hover{ color:var(--gold); border-bottom-color:var(--line); }
}
@media (prefers-reduced-motion:reduce){ .navtoggle span{ transition:none; } }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{ padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); }
.hero__in{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1.05fr .95fr; align-items:center;
}
.hero__title{
  font:300 clamp(2.4rem,5.6vw,4.1rem)/1.06 'Cormorant Garamond',Georgia,serif;
  margin:0 0 1.2rem;
}
.hero__title em{ font-style:italic; color:var(--gold); }
.hero__lede{ margin:0 0 2rem; max-width:40ch; color:var(--ash); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.2rem; }
.hero__values{
  margin:0; padding-top:1.2rem; border-top:1px solid var(--line);
  font:400 .66rem/1 'Poppins',sans-serif;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ash-2);
}

.hero__stage{ margin:0; }
.stage{
  position:relative; aspect-ratio:5/6; overflow:hidden;
  max-height:min(60vh,560px); margin-inline:auto;
  border:1px solid var(--line); background:var(--panel);
}
.stage__img{ width:100%; height:100%; object-fit:contain; transition:opacity .24s var(--ease); }
.stage__tag{
  position:absolute; left:0; bottom:0; display:flex; gap:.7rem; align-items:baseline;
  background:color-mix(in srgb, var(--void) 88%, transparent);
  border-top:1px solid var(--line); border-right:1px solid var(--line);
  padding:.55rem .95rem;
  font:400 .7rem/1 'Poppins',sans-serif; letter-spacing:.18em; text-transform:uppercase;
}
.stage__tag b{ font-weight:500; color:var(--gold); }
.stage__tag i{ font-style:normal; color:var(--silver); letter-spacing:.1em; }

@media (max-width:900px){
  /* On a phone the hero reads top to bottom: what we do, the headline, the
     explanation, then the door with its swatches, then the buttons.
     `display:contents` lets the copy block's children join the same flex
     order as the stage, which is a sibling of their parent. */
  .hero__in{ display:flex; flex-direction:column; gap:0; align-items:stretch; }
  .hero__copy{ display:contents; }
  .hero .eyebrow { order:1; }
  .hero__title   { order:2; font-size:clamp(2.1rem,9vw,3rem); }
  .hero__lede    { order:3; margin-bottom:1.7rem; }
  .hero__stage   { order:4; max-width:400px; width:100%;
                   margin:0 auto 1.9rem; }
  .hero__actions { order:5; }
  .hero__values  { order:6; margin-top:1.9rem; }
  .stage{ max-height:46vh; }
}

/* ── the finish rail ─────────────────────────────────────────────────── */
.chips{ display:flex; gap:.45rem; }
.chip{
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  padding:.55rem .6rem .6rem;
  background:var(--panel); border:1px solid var(--line); cursor:pointer;
  font:400 .64rem/1.2 'Poppins',sans-serif; letter-spacing:.07em;
  color:var(--ash); text-align:left;
  transition:border-color .18s var(--ease), color .18s var(--ease),
             transform .18s var(--ease), background .18s var(--ease);
}
.chip__paint{
  display:block; width:100%; height:22px;
  border:1px solid rgba(255,255,255,.14); background:var(--c);
}
.chip:hover{ transform:translateY(-2px); border-color:var(--silver-2); color:var(--silver); }
.chip[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold); background:var(--panel-2); }
/* the diagonal marks the live choice */
.chip[aria-pressed="true"]::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2.1em; pointer-events:none;
  background-image:repeating-linear-gradient(45deg,
    var(--gold-dim) 0 1px, transparent 1px 8px);
}
.chips--hero{ margin-top:.6rem; }
@media (prefers-reduced-motion:reduce){ .chip:hover{ transform:none; } }

/* ── why ─────────────────────────────────────────────────────────────── */
.why{
  border-block:1px solid var(--line); background:var(--panel);
  padding:clamp(2.4rem,5vw,3.6rem) 0; position:relative;
}
.why::before, .built::before, .contact::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--metal); opacity:.85;
}
.about{
  margin:0 0 2.2rem; max-width:62ch;
  font:300 clamp(1.02rem,1.4vw,1.22rem)/1.75 'Poppins',sans-serif;
  color:var(--chalk);
}
.reasons{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.6rem 2.4rem;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); padding-top:1.8rem;
}
@media (max-width:820px){ .reasons{ grid-template-columns:1fr; gap:1.2rem; } }
.reason{ padding:0 0 0 1.5rem; position:relative; }
.reason::before{
  content:''; position:absolute; left:0; top:.42rem;
  width:8px; height:8px; border-left:1px solid var(--gold); border-top:1px solid var(--gold);
  rotate:45deg;
}
.reason b{
  display:block; font-weight:500; font-size:.95rem; line-height:1.4;
  letter-spacing:.01em; color:var(--gold);
}
.reason span{ display:block; font-size:.86rem; color:var(--ash); margin-top:.4rem; line-height:1.7; }

/* ── range ───────────────────────────────────────────────────────────── */
.range{ padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem); }
.toolbar{
  position:sticky; top:68px; z-index:30;
  background:color-mix(in srgb, var(--void) 94%, transparent);
  backdrop-filter:blur(10px);
  border-block:1px solid var(--line); margin-bottom:2.2rem;
}
.toolbar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.6rem; padding:.75rem 0; flex-wrap:wrap;
}
.filters{ display:flex; gap:.4rem; flex-wrap:wrap; }
.filter{
  padding:.5rem .95rem; border:1px solid var(--line); background:transparent;
  color:var(--ash); cursor:pointer;
  font:400 .72rem/1 'Poppins',sans-serif; letter-spacing:.1em;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.filter:hover{ color:var(--chalk); border-color:var(--line-2); }
.filter[aria-pressed="true"]{ color:var(--gold); border-color:var(--gold); }

.rails{ display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; }
.finishbar{ display:flex; align-items:center; gap:.9rem; }
.finishbar__label{
  font:400 .64rem/1 'Poppins',sans-serif;
  letter-spacing:.24em; text-transform:uppercase; color:var(--silver-2); white-space:nowrap;
}
.chips--global{ width:min(330px,50vw); }
.chips--global .chip{ padding:.35rem .45rem .45rem; font-size:.58rem; }
.chips--global .chip__paint{ height:15px; }

/* size chips carry a code and a leaf count instead of a colour swatch */
.chips--size{ width:min(300px,46vw); }
.chip__code{
  display:block; font:500 .82rem/1 'Poppins',sans-serif;
  letter-spacing:.14em; color:var(--silver);
}
.chip[aria-pressed="true"] .chip__code{ color:var(--gold); }
.chips--size .chip{ padding:.42rem .5rem .48rem; gap:.3rem; }
.chips--size .chip__name{ font-size:.56rem; letter-spacing:.04em; }
.chips--lb.chips--size{ width:auto; }

@media (max-width:760px){
  .toolbar{ position:static; }
  .rails{ width:100%; gap:1.1rem; }
  /* Stack the label above its rail. Side by side, "Frame & leaf" is wider
     than the space it had and ran underneath the swatches. */
  .finishbar{ width:100%; flex-direction:column; align-items:flex-start; gap:.5rem; }
  .finishbar__label{ width:auto; white-space:normal; }
  .chips--global, .chips--size{ width:100%; }
}

/* ── grid ────────────────────────────────────────────────────────────── */
.grid{
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(3,1fr);      /* ten designs */
}
/* Ten cards in three columns leaves the last one alone on its row. Centre it
   so the grid reads as deliberate rather than broken.
   Only while unfiltered: :nth-child still counts cards hidden by a filter, so
   without .is-all this pins S100 (the 10th card) to column 2 on its own. */
@media (min-width:901px){
  .grid.is-all > .card:last-child:nth-child(3n + 1){ grid-column: 2; }
}
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
.card{
  border:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column;
  transition:border-color .2s var(--ease);
}
.card:hover{ border-color:var(--silver-2); }
.card.is-hidden{ display:none; }

.card__view{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; position:relative; aspect-ratio:5/6; overflow:hidden;
}
.card__img{
  width:100%; height:100%; object-fit:contain;   /* whole door, never cropped */
  transition:opacity .22s var(--ease);
}

.card__body{ padding:.8rem .9rem .9rem; border-top:1px solid var(--line); }
.card__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.card__code{
  margin:0; font:500 1rem/1 'Poppins',sans-serif;
  letter-spacing:.2em; color:var(--silver);
}
.card__series{
  font:400 .6rem/1 'Poppins',sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash-2);
}
.card .chips{ margin-top:.7rem; gap:.3rem; }
.card .chip{ padding:.3rem .3rem .35rem; gap:.32rem; }
.card .chip__paint{ height:16px; }
.card .chip__name{ font-size:.55rem; }

.grid__empty{ color:var(--ash); padding:2rem 0; }

/* Photo disclaimer. Deliberately quiet — it should be findable when a customer
   questions a finish, not compete with the doors themselves. */
.refnote{
  margin:1.6rem 0 0; font-size:.72rem; line-height:1.6;
  color:var(--ash-2); letter-spacing:.01em;
}
.refnote--lb{ margin:.9rem 0 0; }

@media (max-width:560px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:.65rem; }
  .card__body{ padding:.55rem .55rem .6rem; }
  .card__code{ font-size:.82rem; letter-spacing:.14em; }
  .card__series{ display:none; }
  .card .chip{ padding:.22rem .18rem .26rem; }
  .card .chip__name{ font-size:.48rem; letter-spacing:.02em; }
  .card .chip__paint{ height:13px; }
}

/* ── how it's built ──────────────────────────────────────────────────── */
.built{
  padding:clamp(3rem,6vw,5.5rem) 0; position:relative;
  border-block:1px solid var(--line); background:var(--panel);
}
.features{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(3,1fr);      /* 3 x 2 — six items, no orphan cells */
  border:1px solid var(--line);
}
@media (max-width:940px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; } }
.feature{ background:var(--panel); padding:1.5rem 1.4rem; }
.feature__n{
  display:block; font:400 .64rem/1 'Poppins',sans-serif;
  letter-spacing:.2em; color:var(--silver-2); margin-bottom:.9rem;
}
.feature__t{
  margin:0 0 .5rem;
  font:400 1.28rem/1.2 'Cormorant Garamond',Georgia,serif; color:var(--chalk);
}
.feature p{ margin:0; font-size:.88rem; color:var(--ash); line-height:1.65; }

/* ── sizes ───────────────────────────────────────────────────────────── */
.sizes{ padding:clamp(3rem,6vw,5.5rem) 0; }
.sizewrap{ display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.sizecard{ border:1px solid var(--line); overflow:hidden; }
.sizecard__h{
  display:flex; align-items:baseline; gap:.8rem;
  padding:.9rem 1.1rem; border-bottom:1px solid var(--line); background:var(--panel);
}
.sizecard__h b{
  font:500 .9rem/1 'Poppins',sans-serif; letter-spacing:.2em; color:var(--gold);
}
.sizecard{ position:relative; }
.sizecard::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--metal);
}
.sizecard__h span{ font-size:.76rem; color:var(--ash-2); }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:.6rem 1.1rem; text-align:left; font-size:.84rem; }
th{
  font:400 .62rem/1 'Poppins',sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-2); border-bottom:1px solid var(--line);
  padding-block:.7rem;
}
td{ border-bottom:1px solid var(--line); color:var(--ash); }
tbody tr:last-child td{ border-bottom:0; }
td:first-child{ color:var(--chalk); letter-spacing:.12em; font-weight:500; }

.swings{ margin-top:2.2rem; border-top:1px solid var(--line); padding-top:1.4rem; }
.swings__label{
  margin:0 0 .9rem; font:400 .64rem/1 'Poppins',sans-serif;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ash-2);
}
.swings__list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem;
}
.swings__list li{
  border:1px solid var(--line); padding:.45rem .9rem;
  font-size:.78rem; color:var(--ash);
}

/* ── contact ────────────────────────────────────────────────────────────
   No form. The client takes enquiries on WhatsApp, so the page gives that
   one action the whole width and the only gold button below the fold.     */
.contact{
  padding:clamp(3.5rem,7vw,6rem) 0;
  border-top:1px solid var(--line); background:var(--panel);
  position:relative; overflow:hidden;
}
.contact::before{                              /* the house diagonal, quietly */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:repeating-linear-gradient(45deg,
    var(--gold-dim) 0 1px, transparent 1px 22px);
  mask-image:linear-gradient(to bottom right, rgba(0,0,0,.5), transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom right, rgba(0,0,0,.5), transparent 62%);
}
.contact__in{ position:relative; text-align:center; }
.contact .secthead{ margin-inline:auto; margin-bottom:1.2rem; }
.contact .eyebrow{ margin-bottom:1rem; }
.contact__lede{
  color:var(--ash); margin:0 auto 2.4rem; max-width:46ch;
}

.wa{
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.1rem 2.4rem; text-decoration:none;
  background:var(--wa); color:#05270F; border:1px solid var(--wa);
  transition:background .2s var(--ease);
}
.wa:hover{ background:var(--wa-dk); }
.wa svg{ width:26px; height:26px; flex:none; }
.wa__txt{ text-align:left; }
.wa__lab{
  display:block; font:500 .66rem/1 'Poppins',sans-serif;
  letter-spacing:.22em; text-transform:uppercase; opacity:.72;
}
.wa__num{
  display:block; margin-top:.28rem;
  font:500 1.22rem/1 'Poppins',sans-serif; letter-spacing:.06em;
}
.contact__or{
  margin:1.5rem 0 0; font-size:.82rem; color:var(--ash-2);
}
.contact__or a{ color:var(--ash); }
.contact__or a:hover{ color:var(--gold); }

.details{
  margin:3.2rem auto 0; padding-top:2.2rem; border-top:1px solid var(--line);
  display:grid; gap:2rem; grid-template-columns:repeat(3,1fr); text-align:left;
}
.details div{ display:block; }
.details dt{
  font:400 .62rem/1.6 'Poppins',sans-serif;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2);
  margin-bottom:.5rem;
}
.details dd{ margin:0; font-size:.92rem; color:var(--ash); line-height:1.7; }
.details a{ text-decoration:none; border-bottom:1px solid var(--line-2); color:var(--chalk); }
.details a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

@media (max-width:820px){
  .details{ grid-template-columns:1fr; gap:1.6rem; text-align:center; }
  .wa{ width:100%; justify-content:center; padding-inline:1.2rem; }
}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:1.8rem 0; position:relative; }
.foot::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--metal); opacity:.55;
}
.foot__in{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.foot__mark{ height:30px; width:auto; opacity:.7; }
.foot__txt p{ margin:0; font-size:.76rem; color:var(--ash-2); line-height:1.6; }
.foot__yr{ margin-left:auto; font-size:.76rem; color:var(--ash-2); }

/* ── enlarged view ───────────────────────────────────────────────────── */
.lb{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:var(--gut); }
.lb[hidden]{ display:none; }
.lb__scrim{ position:absolute; inset:0; background:rgba(5,5,6,.86); backdrop-filter:blur(4px); }
.lb__panel{
  position:relative; z-index:1;
  width:min(980px,100%); max-height:min(90vh,880px);
  background:var(--panel); border:1px solid var(--line-2);
  display:grid; grid-template-columns:1fr 340px; overflow:hidden;
}
.lb__x{
  position:absolute; top:.3rem; right:.4rem; z-index:3;
  width:36px; height:36px; border:0; background:transparent; color:var(--ash);
  font-size:1.7rem; line-height:1; cursor:pointer;
}
.lb__x:hover{ color:var(--gold); }

.lb__stage{ position:relative; background:#fff; min-height:0; }
.lb__img{ width:100%; height:100%; object-fit:contain; transition:opacity .22s var(--ease); }
.lb__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:40px; height:56px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--void) 80%, transparent);
  color:var(--chalk); font-size:1.6rem; line-height:1; cursor:pointer;
}
.lb__nav:hover{ border-color:var(--silver); color:var(--silver); }
.lb__nav--prev{ left:.6rem; }
.lb__nav--next{ right:.6rem; }

.lb__side{
  padding:1.7rem 1.4rem 1.4rem; border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem; overflow:auto;
}
.lb__series{
  margin:0; font:400 .62rem/1 'Poppins',sans-serif;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.lb__code{
  margin:0; font:500 1.7rem/1 'Poppins',sans-serif; letter-spacing:.22em;
  background:linear-gradient(100deg, #DDE2E8, #FFFFFF 42%, #AEB5BE);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block; padding-right:.22em;
}
.lb__note{ margin:.2rem 0 .8rem; color:var(--ash); font-size:.88rem; }
.lb__label{
  margin:.7rem 0 .1rem; font:400 .62rem/1 'Poppins',sans-serif;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ash-2);
}
.chips--lb{ flex-wrap:wrap; }
/* most designs now offer one panel colour — stop a lone chip stretching */
#lbPanels .chip{ flex:0 1 156px; max-width:180px; }
.lb__hint{ margin:.5rem 0 0; font-size:.72rem; color:var(--ash-2); line-height:1.6; }

.spec{ margin:1.2rem 0 1.4rem; border-top:1px solid var(--line); }
.spec div{
  display:flex; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--line); padding:.5rem 0;
}
.spec dt{
  font:400 .6rem/1.4 'Poppins',sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--silver-2);
}
.spec dd{ margin:0; font-size:.8rem; text-align:right; color:var(--ash); }
.lb__side .btn{ margin-top:auto; }

@media (max-width:820px){
  /* The side column is taller than the popup, and with an `auto` row it was
     squeezing the image row down to nothing. Give the stage a fixed share
     and let the details scroll underneath it. */
  .lb__panel{
    grid-template-columns:1fr;
    grid-template-rows:40vh minmax(0,1fr);
    height:min(92vh,900px);
  }
  .lb__stage{ min-height:0; overflow:hidden; }
  .lb__img{ height:100%; }
  .lb__side{
    border-left:0; border-top:1px solid var(--line);
    padding:1.1rem; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .lb__code{ font-size:1.35rem; }
  .lb__nav{ width:34px; height:46px; }
  .lb__side .btn{ margin-top:1.2rem; }
}