/* Sub-page sections (product pages, coving profiles, Adare Manor case study, privacy).
   Builds on the tokens and components in site.css. */

.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:var(--fs-small);color:var(--graphite);margin-bottom:1.5rem}
.crumbs a:hover{color:var(--red)}
.crumbs span[aria-current]{color:var(--ink)}
.crumbs--light,.crumbs--light span[aria-current]{color:var(--on-dark-2)}
.crumbs--light a:hover{color:var(--bone)}

/* ---- product hero ---- */
.ph{padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,96px)}
.ph__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,88px);align-items:center}
.ph h1{font-size:var(--fs-h1);margin-top:1rem;text-wrap:balance}
.ph .lead{margin-top:1rem;max-width:42ch}
.ph__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.ph__media{aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.ph__media img{width:100%;height:100%;object-fit:cover}
.ph--text{padding-bottom:var(--section)}

/* ---- body + side list ---- */
.pd{padding:clamp(48px,6vw,96px) 0;border-top:1px solid var(--rule)}
.pd__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,6vw,96px)}
.pd h2{font-size:var(--fs-h3)}
.pd__body p{font-size:var(--fs-lead);color:var(--graphite);margin-top:1rem;max-width:60ch}
.pd__side h3{font-size:1.5rem;margin-bottom:1rem}
.ticks{list-style:none}
.ticks li{padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--rule);position:relative}
.ticks li::before{content:"";position:absolute;left:.1rem;top:1.05rem;width:.6rem;height:.6rem;border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);border-bottom-left-radius:100%}  /* a cove in section: the quarter-round where wall meets ceiling */

/* ---- gallery ---- */
.pg{padding-bottom:clamp(48px,6vw,96px)}
.pg__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,1.6vw,24px)}
.pg figure{aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.pg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pg figure:hover img{transform:scale(1.04)}

/* ---- how it works ---- */
.steps-band{background:var(--paper);padding:clamp(56px,7vw,112px) 0}
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:2rem}
.steps3 li{border-top:1px solid var(--ink);padding-top:1rem}
.steps3 b{font-weight:400;font-size:var(--fs-small);color:var(--red)}
.steps3 h3{font-size:1.5rem;margin:.5rem 0 .5rem}
.steps3 p{color:var(--graphite)}

/* ---- reviews ---- */
.pr{padding:clamp(56px,7vw,112px) 0}
.pr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(32px,6vw,112px);max-width:1080px}
.pr blockquote{font-family:var(--quote);font-weight:300;font-size:var(--fs-24);line-height:1.3}
.pr figcaption{margin-top:1rem;font-size:var(--fs-small);color:var(--graphite);display:flex;gap:.5rem;align-items:center}

/* ---- FAQ ---- */
.faq{padding:clamp(48px,6vw,96px) 0;border-top:1px solid var(--rule)}
.faq__grid{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,80px)}
.faq h2{font-size:var(--fs-h3)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;font-size:var(--fs-24);line-height:1.25;letter-spacing:-.02em;transition:color .25s var(--ease),padding-left .35s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red);padding-left:.5rem}
.faq summary::after{content:"+";color:var(--red);font-size:1.5rem;line-height:1;transition:transform .38s var(--ease)}
.faq details[open]:not(.is-closing) summary::after{transform:rotate(45deg)}
.faq details[open]:not(.is-closing) summary{color:var(--ink)}
.faq details p{color:var(--graphite);font-size:var(--fs-lead);line-height:1.5;padding:0 0 1.5rem;max-width:58ch;overflow:hidden}

/* ---- CTA band ---- */
.cta-band{background:var(--red);color:var(--bone);padding:clamp(56px,7vw,112px) 0}
.cta-band__inner{display:grid;grid-template-columns:1.2fr 1fr auto;gap:clamp(20px,4vw,64px);align-items:end}
.cta-band h2{font-size:var(--fs-h2)}
.cta-band p{color:var(--on-red);font-size:var(--fs-lead)}

/* ---- related ---- */
.related{padding:clamp(56px,7vw,112px) 0}
.related__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);margin-top:1.5rem}
.related a{display:block}
.related__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.related__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.related a:hover img{transform:scale(1.04)}
.related__name{display:flex;justify-content:space-between;margin-top:1rem;font-size:1rem}
.related a:hover .related__name{color:var(--red)}

/* ---- sticky enquire (phones) ---- */
.sticky-enquire{display:none}

/* ---- coving profiles ---- */
.profiles{padding:clamp(56px,7vw,112px) 0;border-top:1px solid var(--rule)}
.profiles h2{font-size:var(--fs-h2);margin-top:1rem}
.profiles .lead{margin-top:1rem;max-width:56ch}
.profiles__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(28px,4vw,56px)}
.profile{display:flex;flex-direction:column;scroll-margin-top:110px}
.profile__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.profile__img img{width:100%;height:100%;object-fit:cover}
.profile__meta{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--ink)}
.profile__meta h3{font-size:1.5rem}
.profile__meta span{font-size:var(--fs-small);color:var(--graphite)}
.profile__spec{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0 1rem;font-size:.875rem}
.profile__spec dt{color:var(--graphite);font-size:var(--fs-small)}
.profile .btn{margin-top:auto;justify-content:center}
.profile:target .profile__img{outline:2px solid var(--red);outline-offset:4px}

/* ---- Adare case study ---- */
.case-hero{position:relative;color:var(--bone);padding:clamp(72px,10vw,150px) 0 0;
  background:#0B0B0B url(../assets/adare-ballroom.jpg) center 35%/cover no-repeat}
.case-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,11,11,.94) 0%,rgba(11,11,11,.64) 45%,rgba(11,11,11,.3) 100%)}
.case-hero > *{position:relative}
.case-hero .eyebrow{color:var(--on-dark-2)}
.case-hero h1{font-size:var(--fs-hero);margin-top:1rem}
.case-hero h1 .accent{color:#B8984D}
.case-hero .lead{color:var(--on-dark);margin-top:1rem;max-width:46ch}
.case-hero__stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,6vw,96px);border-top:1px solid rgba(255,254,247,.4)}
.case-hero__stats li{padding:1rem 1rem 1.5rem 0}
.case-hero__stats b{display:block;font-weight:300;font-size:var(--fs-stat)}
.case-hero__stats span{font-size:var(--fs-small);color:var(--on-dark-2)}

/* ---- privacy / prose ---- */
.prose{max-width:760px}
.prose h1{font-size:var(--fs-h3)}
.prose h2{font-size:1.5rem;margin:2rem 0 .5rem}
.prose p{color:var(--graphite);font-size:1.125rem}
.prose a{color:var(--ink);border-bottom:1px solid var(--rule)}
.prose .note{margin-top:1rem;font-size:var(--fs-small);color:var(--red)}

/* ---- responsive ---- */
@media (max-width:1100px){
  .profiles__grid{grid-template-columns:repeat(2,1fr)}
  .related__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ph__grid,.pd__grid,.faq__grid,.cta-band__inner{grid-template-columns:1fr}
  .ph__media{aspect-ratio:4/3;order:-1}
  .steps3{grid-template-columns:1fr}
  .cta-band__inner .btn{justify-self:start}
  .sticky-enquire{display:inline-flex;position:fixed;left:var(--gutter);right:var(--gutter);bottom:16px;z-index:40;justify-content:center;box-shadow:var(--shadow-3)}
  .subpage footer.site{padding-bottom:96px}
}
@media (max-width:560px){
  .profiles__grid{grid-template-columns:1fr}
  .case-hero__stats{grid-template-columns:1fr}
}

/* ================= Product page (gallery + style picker) ================= */
.pdp{padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,112px)}
.pdp__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:start}
.pdp__gallery{position:sticky;top:calc(var(--bar-h) + 38px + 20px)}
.pdp__main{aspect-ratio:1/1;overflow:hidden;background:var(--paper)}
.pdp__main img{width:100%;height:100%;object-fit:cover;transition:opacity .25s var(--ease)}
.pdp__thumbs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:12px}
.thumb{display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--paper);outline:1px solid transparent;outline-offset:2px;transition:outline-color .2s,opacity .2s;opacity:.7}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover,.thumb.is-active{opacity:1}
.thumb.is-active{outline-color:var(--ink)}
.pdp__info h1{font-size:var(--fs-h3);margin-top:.5rem;text-wrap:balance}
.pdp__price{margin-top:1rem;font-size:1.25rem}
.pdp__price small{font-size:var(--fs-small);color:var(--graphite)}
.pdp__lede{margin-top:1rem;color:var(--graphite);font-size:1.125rem;max-width:48ch}
.pdp__opt{border:0;margin-top:1.5rem;min-width:0}
.pdp__opt legend{font-size:var(--fs-small);color:var(--graphite);margin-bottom:.75rem}
.pdp__opt legend b{color:var(--ink);font-weight:500}
.pdp__size{margin-left:.5rem;padding:.25rem .5rem;border:1px solid var(--rule);border-radius:999px;font-size:.75rem}
.pdp__size:empty{display:none}
.swatches{list-style:none;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}

.swatches--named{grid-template-columns:repeat(4,1fr)}
.swatch{display:flex;flex-direction:column;gap:.5rem;width:100%;text-align:left}
.swatch__img{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper);outline:1px solid var(--rule);outline-offset:0;transition:outline .2s,outline-offset .2s}
/* coving: tile shows the clean silhouette; name + size sit underneath */
.swatches--named .swatch__img{aspect-ratio:1;background:#fff;padding:10%}
.swatches--named .swatch__img img{object-fit:contain}
.swatches--named .swatch__name{font-size:.875rem;color:var(--ink);margin-top:.25rem}
.swatch__size{font-size:.75rem;color:var(--graphite);margin-top:-.25rem}
/* dimensioned profile laid over the render, bottom-right */
.pdp__main{position:relative}
.pdp__dims{position:absolute;right:14px;bottom:14px;width:clamp(120px,30%,210px);padding:8px 12px;border-radius:var(--radius);
  background:rgba(255,254,247,.9);backdrop-filter:blur(8px);box-shadow:var(--shadow-2)}
.pdp__dims img{width:100%;height:auto;display:block;transition:opacity .25s var(--ease)}
.swatch__img img{width:100%;height:100%;object-fit:cover}
.swatch__name{font-size:.75rem;line-height:1.25;color:var(--graphite)}
.swatches:not(.swatches--named) .swatch__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.swatch:hover .swatch__img{outline-color:var(--ash)}
.swatch[aria-pressed="true"] .swatch__img{outline:2px solid var(--ink);outline-offset:2px}
.swatch[aria-pressed="true"] .swatch__name{color:var(--ink)}
.pdp__note{margin-top:.75rem;font-size:.75rem;color:var(--graphite)}
.pdp__row{display:grid;grid-template-columns:auto 1fr;gap:1.5rem}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:999px;height:48px}
.stepper button{width:44px;height:100%;font-size:1.25rem}
.stepper button:hover{color:var(--red)}
.stepper input{width:3.2rem;border:0;background:transparent;text-align:center;font:inherit;font-size:1rem;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:999px;padding:3px;height:48px}
.seg label{position:relative;display:flex}
.seg input{position:absolute;opacity:0}
.seg span{display:flex;align-items:center;padding:0 1rem;border-radius:999px;font-size:.875rem;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}
.seg input:checked + span{background:var(--ink);color:var(--bone)}
.seg input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
.pdp__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.pdp__ctas .btn--primary{flex:1;justify-content:center;min-width:220px}
/* trust line: drawn ticks (same mark as the "Where it works" list), the Google rating as its own linked item */
.pdp__trust{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 0;margin-top:1rem;font-size:var(--fs-small);color:var(--graphite)}
.pdp__trust li{display:flex;align-items:center;padding:0 1rem;border-left:1px solid var(--rule);line-height:1.25}
.pdp__trust li:first-child{padding-left:0;border-left:0}
.pdp__trust-tick::before{content:"";width:.6rem;height:.32rem;margin:0 .5rem .25rem 0;border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);transform:rotate(-45deg);flex:none}
.pdp__trust li:last-child{flex-basis:100%;padding-left:0;border-left:0;margin-top:.25rem}
.pdp__trust a{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink)}
.pdp__trust a:hover{color:var(--red)}
.pdp__trust .stars{font-size:.75rem;letter-spacing:.12em}
.pdp__acc.faq{padding:0;border-top:0;margin-top:2rem}

/* ================= Collection / about / projects / contact / 404 ================= */
.ph--slim{padding-bottom:clamp(24px,3vw,40px)}
.ph--slim h1{font-size:var(--fs-h1);margin-top:.75rem}
.products--page{padding-top:clamp(16px,2vw,32px)}
.about-split{padding:clamp(40px,5vw,80px) 0}
.about-split__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,88px);align-items:center}
.about-split figure{aspect-ratio:4/5;overflow:hidden}
.about-split img{width:100%;height:100%;object-fit:cover}
.about-split p{color:var(--graphite);margin-top:1rem;font-size:1.125rem;max-width:56ch}
.about-split .lead{color:var(--ink);margin-top:0}
/* same content and order as the homepage hero strip: award logo with Finalist, then the linked Google rating */
.projects{padding:clamp(24px,3vw,48px) 0 clamp(56px,7vw,112px)}
.project--feature{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.project__img{display:block;aspect-ratio:16/10;overflow:hidden}
.project__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.project--feature:hover .project__img img{transform:scale(1.03)}
.project__body{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.project__title{font-family:var(--display);font-weight:300;font-size:var(--fs-h2);line-height:1;letter-spacing:-.02em}
.project__text{color:var(--graphite);font-size:var(--fs-lead)}
.projects__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(48px,6vw,96px)}
.projects__list .project{border-top:1px solid var(--ink);padding-top:1rem;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.projects__list h3{font-size:1.875rem}
.projects__list p{color:var(--graphite)}
.projects__list blockquote{font-family:var(--quote);font-size:1.125rem;line-height:1.25}
.projects__list cite{display:block;margin-top:.5rem;font-style:normal;font-size:var(--fs-small);color:var(--graphite)}
.contact--page{padding-top:clamp(16px,2vw,32px)}
.contact--page select{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.5rem 0;border-radius:0}
.contact--page select:disabled{color:var(--ash);border-bottom-color:var(--rule)}
.nf{min-height:50vh}
.nf h1{font-size:var(--fs-h1);margin-top:1rem}
.nf .lead{margin-top:1rem}
.nf .ph__ctas{margin-top:2rem}

@media (max-width:1100px){
}
@media (max-width:900px){
  .pdp__grid,.about-split__grid,.project--feature{grid-template-columns:1fr}
  .pdp__gallery{position:static}
  .projects__list{grid-template-columns:1fr}
  .pdp__row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .seg span{padding:0 .75rem;font-size:.875rem}
  .swatches--named{grid-template-columns:repeat(3,1fr);gap:8px 8px}
  .swatches--named .swatch__name{font-size:.75rem}
}

/* weight rule: card-level headings at 400 */

/* phones: even 4-up style grid; trust line stacks without dividers (kept last so it wins over the base rules) */
@media (max-width:560px){
  .swatches:not(.swatches--named){grid-template-columns:repeat(4,1fr)}
  .pdp__trust{flex-direction:column;align-items:flex-start;gap:.5rem}
  .pdp__trust li{padding:0;border-left:0}
}

/* ================= Product gallery + lightbox ================= */
.gal{padding:var(--section) 0;border-top:1px solid var(--rule)}
.gal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.gal__head h2{font-size:var(--fs-h3);margin-top:1rem}
.gal__count{font-size:var(--fs-small);color:var(--graphite)}
/* grid + lightbox styles live in site.css (from index.html), shared with the homepage coving section */

/* ---- "How many lengths?" calculator (coving, cornice) ---- */
.calc{margin-top:1.5rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
.calc summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;cursor:pointer;list-style:none;font-weight:500}
.calc summary::-webkit-details-marker{display:none}
.calc summary small{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);font-weight:400}
.calc summary::after{content:"+";font-size:1.25rem;font-weight:300;line-height:1;transition:transform .25s var(--ease)}
.calc[open] summary::after{transform:rotate(45deg)}
.calc{transition:border-radius .25s var(--ease)}
.calc:not([open]){border-radius:3rem}   /* a pill while closed, like the stepper and service toggle above it; a panel once open */
.calc:not([open]) summary{padding-inline:1.5rem;border-radius:3rem}
.calc summary small{margin-left:auto}
.calc__body{padding:0 1.25rem 1.25rem}
.calc__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.calc__head p{font-size:var(--fs-small);color:var(--graphite);max-width:36ch}
.seg--sm{height:38px}
.seg--sm span{padding:0 .75rem;font-size:var(--fs-small)}
.calc__rooms{list-style:none;margin-top:1rem}
.calc__rooms li{display:grid;grid-template-columns:4.5rem 1fr auto 1fr 2rem;align-items:end;gap:.75rem;padding:.5rem 0}
.calc__room{font-size:var(--fs-small);color:var(--ink);font-weight:500;padding-bottom:.6rem}
.calc__x{padding-bottom:.6rem;color:var(--graphite)}
.calc .field input{width:100%;-moz-appearance:textfield}
.calc .field input::-webkit-inner-spin-button,.calc .field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.calc .field label{font-size:var(--fs-small)}
.calc__del{width:2rem;height:2rem;font-size:1.125rem;color:var(--graphite);border-radius:999px}
.calc__del:hover{color:var(--red)}
.calc__add{margin-top:.5rem;font-size:var(--fs-small);font-weight:500;border-bottom:1px solid currentColor}
.calc__add:hover{color:var(--red)}
.calc__extra{margin-top:1.5rem;max-width:16rem}
.calc__extra small{color:var(--graphite);margin-left:.25rem}
.calc__hint{font-size:var(--fs-small);color:var(--graphite)}
/* the unit sits inside each field, so a bare 0 is never ambiguous */
.calc__in{position:relative}
.calc__in input{padding-right:2rem}
.calc__unit{position:absolute;right:0;bottom:.6rem;font-size:var(--fs-small);color:var(--graphite);pointer-events:none}
/* the answer is a card of its own, not another ruled line under the inputs */
.calc__out{display:grid;grid-template-columns:1fr;gap:.25rem 1rem;margin-top:1.5rem;padding:1rem 1.25rem;background:var(--bone);border:1px solid var(--rule);border-radius:var(--radius)}
.calc__n{font-size:var(--fs-small);color:var(--graphite)}
.calc__n small{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.calc__n b{font-size:var(--fs-stat);font-weight:300;letter-spacing:-.02em;color:var(--ink);margin-right:.15em}
.calc__n span{color:var(--ink);font-size:1rem}
.calc__sum{font-size:var(--fs-small);color:var(--graphite);max-width:48ch}
.calc__out .btn{justify-self:start;margin-top:.75rem}
.calc__out .btn:disabled{opacity:.4;pointer-events:none}
.calc__note{margin-top:1rem;font-size:var(--fs-small);color:var(--graphite)}
.stepper{transition:box-shadow .3s var(--ease)}
.stepper.is-set{box-shadow:0 0 0 3px rgba(153,22,21,.25)}
@media (max-width:560px){
  .calc__rooms li{grid-template-columns:1fr auto 1fr 2rem}
  .calc__room{grid-column:1/-1;padding-bottom:0}
  .calc__out{grid-template-columns:1fr}
  .calc__out .btn{grid-column:1;grid-row:auto;justify-content:center;margin-top:.75rem}
}

/* lightbox caption: profile name + size, with a button that picks that profile */
.lightbox__cap{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);display:flex;align-items:center;gap:1rem;
  padding:.6rem .6rem .6rem 1.1rem;border-radius:999px;background:var(--bone);color:var(--ink);box-shadow:var(--shadow-3);white-space:nowrap}
.lightbox__cap[hidden]{display:none}
.lightbox__name{font-weight:500}
.lightbox__pick{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:999px;background:var(--red);color:var(--bone);font-size:.875rem;font-weight:500}
.lightbox__pick:hover{background:var(--red-700)}
.lightbox__pick[hidden]{display:none}
@media (max-width:560px){
  .lightbox__cap{bottom:76px;flex-direction:column;gap:.5rem;border-radius:var(--radius);padding:.75rem 1rem;white-space:normal;text-align:center}
}

/* /products/: Interior and Exterior as two headed groups (anchors for the menu's Interior / Exterior links) */
.products__group{font-size:var(--fs-h3);margin-top:clamp(40px,5vw,72px);padding-top:1rem;border-top:1px solid var(--ink);scroll-margin-top:calc(var(--bar-h) + 24px)}
.products__group:first-child{margin-top:0}
.products__group + .cards{margin-top:clamp(20px,2.5vw,32px)}

/* ---- bespoke profiles (coving, cornice) ---- */
.bespoke{background:var(--paper);padding:clamp(64px,8vw,128px) 0}
.bespoke__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.bespoke__draw{aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(24px,5vw,64px)}
.bespoke__draw:has(svg){padding:clamp(8px,2vw,24px)}
.bespoke__draw img{width:100%;height:100%;object-fit:contain}
.bespoke h2{margin-top:1rem;font-size:var(--fs-h3)}
.bespoke .lead{margin-top:1rem;max-width:52ch}
.bespoke .ticks{margin-top:1.75rem}
.bespoke__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
@media (max-width:820px){.bespoke__grid{grid-template-columns:1fr}}

/* ---- touch: phones and tablets (keep last) ---- */
@media (max-width:1024px),(pointer:coarse){
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs{align-items:center;margin-bottom:.75rem}
  .seg--sm{height:44px}
  .calc__del{width:44px;height:44px}
  .calc__add{min-height:44px;border-bottom:0;text-decoration:underline;text-underline-offset:4px}
  .calc input{min-height:48px}
  .pdp__trust a{min-height:44px}
  .stepper input{height:100%}
}
@media (max-width:560px){.faq summary{font-size:var(--fs-20)}}

/* ---- showroom page ---- */
/* video header: 60% of the screen, full bleed; the poster still shows until the video is supplied */
/* slides up under the transparent nav, as the homepage hero does; 60% of the screen including the nav */
.sr-hero{position:relative;margin-top:calc(-1 * var(--bar-h) - 1px);height:60svh;min-height:420px;max-height:760px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:var(--bone)}
.sr-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sr-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top right,rgba(11,11,11,.7) 0%,rgba(11,11,11,.35) 45%,rgba(11,11,11,.05) 80%),linear-gradient(to bottom,rgba(11,11,11,.35) 0,rgba(11,11,11,0) 140px)}   /* plus a light shade at the top so the cream nav text reads */
.sr-hero__copy{position:relative;z-index:2;width:100%;padding-bottom:clamp(28px,4vw,56px)}
.sr-hero .eyebrow{color:var(--on-dark-2)}
.sr-hero h1{font-size:var(--fs-h1);margin-top:.75rem;max-width:14ch}
.sr-hero h1 .accent{color:var(--bone)}
/* header video controls: a two-way toggle between the clips, and a round pause button */
.sr-hero__ctrl{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(28px,4vw,56px);display:flex;align-items:center;gap:.5rem}
.sr-hero__seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid rgba(255,254,247,.5);background:rgba(11,11,11,.25);backdrop-filter:blur(6px)}
.sr-hero__seg button{min-height:38px;padding:0 1rem;border-radius:999px;color:var(--bone);font-size:var(--fs-small);transition:background .25s var(--ease),color .25s}
.sr-hero__seg button[aria-checked="true"]{background:var(--bone);color:var(--ink)}
.sr-hero__seg button:focus-visible,.sr-hero__pause:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.sr-hero__pause{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,254,247,.5);background:rgba(11,11,11,.25);backdrop-filter:blur(6px)}
.sr-hero__pause span{width:10px;height:12px;border-left:3px solid var(--bone);border-right:3px solid var(--bone)}
.sr-hero__pause.is-paused span{width:0;height:0;border-left:11px solid var(--bone);border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.sr-hero__pause:hover,.sr-hero__seg:hover{background:rgba(11,11,11,.45)}
.sr-intro{padding:clamp(48px,6vw,96px) 0 clamp(32px,4vw,56px)}
.sr-intro__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,88px);align-items:start}
.sr-intro .lead{max-width:40ch;color:var(--ink)}
.sr-facts div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.sr-facts div:first-child{padding-top:0}
.sr-facts dt{color:var(--graphite)}
.sr-facts dd{text-align:right}
.sr-see{padding:clamp(32px,4vw,64px) 0 clamp(56px,7vw,112px)}
.sr-see h2,.sr-board h2{font-size:var(--fs-h3);margin-top:1rem}
.sr-see__list{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(28px,4vw,56px)}
.sr-see__list li{counter-increment:s}
.sr-see__list li::before{content:"0" counter(s);display:block;font-size:var(--fs-small);color:var(--red);margin-bottom:.75rem}
.sr-see__list h3{font-size:var(--fs-20);font-weight:400}
.sr-see__list p{margin-top:.5rem;color:var(--graphite)}
.sr-board{background:var(--paper);padding:clamp(56px,7vw,112px) 0}
.sr-board__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,88px);align-items:center}
.sr-board .ticks{margin-top:1.5rem}
.sr-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.showroom__board{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.showroom__board li{background:var(--bone);padding:12px;display:flex;flex-direction:column;gap:.5rem;font-size:var(--fs-small)}
.showroom__board img{width:100%;aspect-ratio:1;object-fit:contain}
@media (max-width:900px){.sr-intro__grid,.sr-board__grid{grid-template-columns:1fr}.sr-see__list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sr-see__list{grid-template-columns:1fr}.showroom__board{grid-template-columns:repeat(2,1fr)}.sr-hero{min-height:360px}.sr-hero__ctrl{top:calc(var(--bar-h) + 1rem);bottom:auto}}
.sr-hero__dir{margin-top:1.5rem}
.sr-intro__dir{grid-column:2;justify-self:start;margin-top:1.5rem}
@media (max-width:900px){.sr-intro__dir{grid-column:1}}

.steps3 h3,.pd__side h3,.profile__meta h3,.projects__list h3,.prose h2,.case-hero__stats b{font-weight:400}

/* ---- About page: the trust facts as one open row, no boxes or rules ---- */
.trust-row{padding:clamp(48px,6vw,88px) 0}
.trust-row ul{list-style:none;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.trust-row li,.trust-row li > a,.trust-row__award div{display:flex;flex-direction:column;gap:.4rem;color:inherit}
.trust-row .trust-row__award{flex-direction:row;align-items:center;gap:1rem}
.trust-row__award img{height:48px;width:auto;filter:brightness(0);opacity:.75}
.trust-row b{font-family:var(--display);font-weight:300;font-size:clamp(2.25rem,3.6vw,3.25rem);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.trust-row b i{font-style:normal;font-size:.5em;vertical-align:.45em;margin-right:.3em}
.trust-row span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.trust-row a:hover span{color:var(--red)}
@media (max-width:760px){.trust-row ul{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1rem}.trust-row .trust-row__award{grid-column:1/-1}}