:root{
  --bone:#FAF8F3; --paper:#F2ECE1; --linen:#EAE1D1; --ink:#2A231C; --umber:#6E5B45;
  --gold:#C19864; --gold-deep:#8F6A2E; --dark:#231C15; --shell:#F6F4F1;
  --line:rgba(42,35,28,.16); --line-soft:rgba(42,35,28,.09);
  --serif:"Cormorant Garamond",'Iowan Old Style',Georgia,serif;
  --sans:"Figtree",'Avenir Next','Segoe UI',system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-weight:300;
     font-size:17px;line-height:1.65;margin:0;padding:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.06;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.lbl{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.serif-it{font-style:italic}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.16em;
     text-transform:uppercase;padding:15px 26px;border:1px solid currentColor;background:none;color:var(--ink);cursor:pointer}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn-solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-light{color:#F6F1E7;border-color:rgba(246,241,231,.55)}
.btn-light:hover{background:#F6F1E7;color:var(--dark)}

/* ---------- chrome ---------- */
.utility{background:var(--dark);color:#D9CDB8;font-size:12px;letter-spacing:.09em;
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:9px var(--pad)}
.utility span{white-space:nowrap}
body{overflow-x:clip}
header{position:sticky;top:0;z-index:40;background:var(--bone);border-bottom:1px solid var(--line-soft)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px var(--pad) 13px}
.mark{display:block;flex:0 0 auto}
.mark img{height:42px;width:auto;display:block}
@media(max-width:760px){.mark img{height:30px}}
nav{display:flex;gap:24px;flex-wrap:nowrap}
nav a{font-size:15.5px;letter-spacing:.01em;padding-bottom:4px;border-bottom:1px solid transparent;white-space:nowrap}
nav a:hover{border-bottom-color:var(--gold)}
.hbar .btn{padding:14px 24px;font-size:12px;white-space:nowrap}
.cta-short{display:none}
/* step the nav down before it wraps and pushes the header taller */
@media(max-width:1380px){nav{gap:17px}nav a{font-size:14px}}
@media(max-width:1180px){nav{gap:13px}nav a{font-size:13px}.hbar .btn{padding:12px 18px;font-size:11px}}
@media(max-width:1080px){nav{display:none}.hbar .btn{padding:14px 24px;font-size:12px}}
@media(max-width:760px){
  .hbar{gap:12px}
  .cta-long{display:none}
  .cta-short{display:inline}
  .hbar .btn{padding:11px 15px;font-size:10.5px;letter-spacing:.12em}
  .utility{gap:0 18px;font-size:11px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--dark)}
.hero-img{width:100%;aspect-ratio:16/9;height:auto;max-height:88vh;object-fit:cover;object-position:center;display:block}
.hero-still{display:none}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-still{display:block}}
@keyframes bloom{from{opacity:.25}to{opacity:.95}}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(24,18,12,.82) 0%,rgba(24,18,12,.55) 28%,rgba(24,18,12,0) 56%)}
.hero-copy{position:absolute;left:var(--pad);bottom:clamp(40px,7vw,78px);max-width:min(560px,68vw);color:#F7F2E8}
.hero-copy .lbl{color:#E3CFA6;display:block;margin-bottom:16px}
.hero-copy h1{font-size:clamp(44px,6.4vw,80px);color:#FBF7EF}
.hero-copy p{margin-top:16px;font-size:17px;color:rgba(247,242,232,.84);max-width:46ch;text-wrap:pretty}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media(max-width:1100px){
  .hero-scrim{background:
    linear-gradient(0deg,rgba(24,18,12,.90) 0%,rgba(24,18,12,.62) 34%,rgba(24,18,12,0) 72%),
    linear-gradient(90deg,rgba(24,18,12,.62) 0%,rgba(24,18,12,.3) 40%,rgba(24,18,12,0) 78%)}
  .hero-copy{max-width:none;right:var(--pad)}
}

/* ---------- generic section ---------- */
section{padding:clamp(60px,8vw,112px) var(--pad)}
.inner{max-width:1240px;margin:0 auto}
.sec-title{font-size:clamp(33px,4.2vw,52px)}

/* ---------- why ---------- */
.why{background:var(--bone)}
.why-top{display:grid;gap:26px;max-width:1240px;margin:0 auto}
@media(min-width:900px){.why-top{grid-template-columns:1.05fr 1fr;gap:64px;align-items:end}}
.why-top p{color:var(--umber);font-size:18px;max-width:52ch}
.pillars{display:grid;gap:0;max-width:1240px;margin:56px auto 0;border-top:1px solid var(--line)}
@media(min-width:820px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{padding:30px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:820px){
  .pillar{padding:34px 34px 34px 0;border-bottom:0;border-right:1px solid var(--line-soft)}
  .pillar:last-child{border-right:0;padding-right:0}
  .pillar+.pillar{padding-left:34px}
}
.pillar .lbl{color:var(--gold-deep);display:block;margin-bottom:11px}
.pillar h3{font-size:26px;margin-bottom:9px}
.pillar p{font-size:15.5px;color:var(--umber)}

/* ---------- categories ---------- */
.cats{background:var(--paper)}
.cats-grid{display:grid;gap:34px;max-width:1240px;margin:0 auto}
/* grid children default to min-width:auto and refuse to shrink below their
   content, which overflows the viewport on a phone */
.cats-grid>*{min-width:0}
.why-top>*{min-width:0}
.vendors .inner>*{min-width:0}
.showroom .inner>*{min-width:0}
@media(min-width:960px){.cats-grid{grid-template-columns:330px minmax(0,1fr);gap:56px;align-items:start}}
.rail{position:sticky;top:96px}
.rail p{margin-top:18px;color:var(--umber);font-size:15.5px;max-width:34ch}
.rail ul{list-style:none;margin:30px 0 0;padding:0}
.rail li{border-top:1px solid var(--line-soft)}
.rail li:last-child{border-bottom:1px solid var(--line-soft)}
.rail a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;
  font-size:15.5px;letter-spacing:.01em}
.rail a span{color:var(--gold-deep);transition:transform .18s ease}
.rail a:hover{color:var(--gold-deep)}
.rail a:hover span{transform:translateX(5px)}
.track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;
  /* the arrows are the affordance here, so the bar itself is hidden */
  scrollbar-width:none;-ms-overflow-style:none}
.track::-webkit-scrollbar{width:0;height:0;display:none}
.card{flex:0 0 clamp(230px,30vw,300px);scroll-snap-align:start}
.card-media{position:relative}
.card-media img{aspect-ratio:2/3;object-fit:cover;width:100%}
.card-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(24,18,12,.62),rgba(24,18,12,0) 42%)}
.card .cap{position:absolute;z-index:1;left:16px;bottom:15px;color:#FBF7EF;font-family:var(--sans);font-weight:500;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 14px rgba(20,14,8,.85)}
.card p{font-size:14.5px;color:var(--umber);margin-top:14px;line-height:1.5}
.track-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.track-nav button{width:40px;height:40px;border:1px solid var(--line);background:none;color:var(--ink);
  cursor:pointer;font-size:15px;line-height:1}
.track-nav button:hover{background:var(--ink);color:var(--paper)}

/* ---------- ways to begin ---------- */
.begin{background:var(--paper)}
.begin-head{max-width:46ch;margin:0 auto 46px;text-align:center}
.begin-head p{color:var(--umber);margin-top:16px}
.ways{display:grid;gap:2px;max-width:1240px;margin:0 auto}
@media(min-width:760px){.ways{grid-template-columns:1fr 1fr}}
.way{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:var(--dark)}
.way img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.6) brightness(.82);
  transform:scale(1.01);
  transition:filter .7s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.way::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(24,18,12,.86) 0%,rgba(24,18,12,.42) 42%,rgba(24,18,12,.06) 78%);
  transition:opacity .6s ease}
.way:hover img{filter:grayscale(0) brightness(1);transform:scale(1.06)}
.way:hover::after{opacity:.72}
.way-copy{position:absolute;z-index:1;left:clamp(22px,3vw,40px);right:clamp(22px,3vw,40px);
  bottom:clamp(22px,3vw,38px);color:#F7F2E8}
.way-copy .lbl{display:block;color:#E3CFA6;margin-bottom:12px}
.way-copy h3{font-size:clamp(25px,2.5vw,32px);color:#FBF7EF}
.way-copy .rule{display:block;height:1px;background:var(--gold);margin:14px 0 0;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.way:hover .rule{transform:scaleX(1)}
.way-copy p{font-size:15px;color:rgba(247,242,232,.82);margin-top:14px;max-width:34ch}
.way-go{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#E3CFA6}
.way-go span{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.way:hover .way-go span{transform:translateX(6px)}
/* touch devices never hover, so show the images in full colour there */
@media(hover:none){.way img{filter:none;transform:none}}

/* ---------- vendors ---------- */
.vendors .inner{display:grid;gap:36px}
@media(min-width:900px){.vendors .inner{grid-template-columns:1fr 1fr;gap:72px;align-items:center}}
.vendors p{color:var(--umber);margin-top:18px;max-width:50ch}
.vlogos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vlogo{border:1px solid var(--line);padding:34px 26px;text-align:center;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:150px}
/* fixed height, auto width — a flex parent will otherwise stretch the mark and distort it */
.vlogo img{height:30px;width:auto;max-width:100%;display:block;flex:0 0 auto}
.vlogo img[alt="Lutron"]{height:26px}
.vlogo-wide{grid-column:1/-1}
.vlogo img[alt="Coulisse"]{height:24px}
.vlogo i{display:block;font-style:normal;color:var(--gold-deep);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;font-family:var(--sans)}
.vlogo:hover{border-color:var(--gold)}

.fab-head{text-align:center;max-width:46ch;margin:0 auto 52px}
.fab-head p{color:var(--umber);margin-top:16px}

/* ---------- editorial full-bleed (work) ---------- */
.bleed{position:relative;background:var(--dark);padding:0}
.bleed img{width:100%;height:clamp(420px,62vh,620px);object-fit:cover}
.bleed .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,18,12,.84) 0%,rgba(24,18,12,.5) 34%,rgba(24,18,12,0) 62%)}
.bleed .copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);
  max-width:min(500px,70vw);color:#F7F2E8}
.bleed .copy .lbl{color:#E3CFA6;display:block;margin-bottom:14px}
.bleed .copy h2{font-size:clamp(28px,3.8vw,46px);color:#FBF7EF}
.bleed .copy p{margin-top:14px;color:rgba(247,242,232,.82);font-size:16px;max-width:38ch}
.bleed .copy .btn{margin-top:26px}
.bleed .arrows{position:absolute;right:var(--pad);bottom:30px;display:flex;gap:8px}
.bleed .arrows button{width:40px;height:40px;border:1px solid rgba(246,241,231,.4);background:none;
  color:#F7F2E8;cursor:pointer;font-size:15px}
.bleed .arrows button:hover{background:#F7F2E8;color:var(--dark)}

.bleed{position:relative;background:var(--dark);overflow:hidden}
.bleed .slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.bleed .slide.is-active{opacity:1;visibility:visible;position:relative;
  transition:opacity 1.1s ease,visibility 0s}
.bleed .slide img{width:100%;height:clamp(420px,62vh,620px);object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 7s linear}
.bleed .slide.is-active img{transform:scale(1)}
.bleed .copy .btn{margin-top:26px}
.dots{position:absolute;left:var(--pad);bottom:26px;display:flex;gap:9px;z-index:2}
.dot{width:26px;height:2px;border:0;padding:0;cursor:pointer;background:rgba(247,242,232,.32);
  transition:background .35s ease,width .35s ease}
.dot.is-active{background:var(--gold);width:44px}

/* ---------- showroom ---------- */
.showroom .inner{display:grid;gap:34px}
@media(min-width:900px){.showroom .inner{grid-template-columns:1fr 1fr;gap:64px;align-items:center}}
.showroom p{color:var(--umber);margin-top:16px}
.addr{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft);display:grid;gap:5px;font-size:15.5px}
.addr .lbl{color:var(--gold-deep);margin-bottom:5px}
.showroom .btn{margin-top:26px}

/* ---------- process ---------- */
.process{background:var(--linen)}
.process .fab-head{margin-bottom:56px}
.steps{display:grid;gap:36px;max-width:1240px;margin:0 auto}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr);gap:44px}}
@media(min-width:1080px){.steps{grid-template-columns:repeat(4,1fr);gap:34px}}
.step em{font-style:normal;font-family:var(--sans);font-weight:300;font-size:34px;color:var(--gold);
  display:block;line-height:1;font-variant-numeric:tabular-nums}
.step .lbl{display:block;margin:15px 0 10px;color:var(--gold-deep)}
.step p{font-size:15px;color:var(--umber)}

/* ---------- journal ---------- */
.journal .jhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;margin-bottom:38px}
.posts{display:grid;gap:30px}
@media(min-width:760px){.posts{grid-template-columns:repeat(3,1fr);gap:26px}}
.post{border-top:1px solid var(--line);padding-top:18px}
.post-media{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--linen);margin-bottom:17px}
.post-img{display:block;width:100%;height:100%;object-fit:cover}
.post .lbl{color:var(--gold-deep)}
.post h3{font-size:24px;margin:11px 0 9px}
.post p{font-size:14.5px;color:var(--umber)}
.post:hover h3{color:var(--gold-deep)}
/* a brightness lift rather than a scale — .post cannot take overflow:hidden without clipping the
   gold hover hairline its ::after draws at top:-1px, and an unclipped scale would spill the image
   over the label beneath it */
.post-img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.post:hover .post-img,.post:focus-visible .post-img{transform:scale(1.06)}

/* ---------- closing ---------- */
.closing{background:var(--dark);color:#F6F1E7;text-align:center}
.closing h2{font-size:clamp(35px,5.2vw,64px);color:#FBF7EF}
.closing p{color:rgba(246,241,231,.72);margin:18px auto 0;max-width:44ch}
.closing .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#CDBFA8;padding:0 var(--pad) 40px;font-size:14px}
.flogo{max-width:1240px;margin:0 auto;padding-top:52px}
.flogo img{height:40px;width:auto;display:block}
@media(max-width:760px){.flogo img{height:30px}}
.fgrid{max-width:1240px;margin:0 auto;display:grid;gap:34px;padding-top:40px;margin-top:38px;
  border-top:1px solid rgba(246,241,231,.14)}
@media(min-width:760px){.fgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.fgrid{grid-template-columns:repeat(6,1fr);gap:22px}}
.fgrid h3{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#E3CFA6;margin:0 0 15px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fgrid a:hover{color:#F6F1E7}
.fbot{max-width:1240px;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(246,241,231,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#9A8C78}

/* ---------- foliage shadows + drapery light ----------
   Decorative only: pointer-events none, sits under content, stops under reduced motion.
   Four plates, one per section — no asset is ever used twice on the page.

   Each plate was generated with the foliage ENTERING the frame from one or two edges, so those
   edges carry a hard cut. A cut is only invisible when it sits ON the section boundary, so every
   plate is pushed past its entry edge by more than the animation's peak travel and the section
   clips it. Masks fade the FREE edges only — never the entry edge, which must stay solid into
   the frame. overflow:clip, not hidden: it clips layout as well as paint but is not a scroll
   container, so the sticky rail in .cats still sticks.

   The FREE edges must never meet that clip. A plate is sized from its HEIGHT (width derives from
   aspect-ratio) and capped to a fraction of the section, so its free edges always land inside the
   box and the mask's fade finishes in open ground. Sizing from width instead lets a tall plate
   overrun a short section — the left frond ran 121px past the bottom of a 446px section and the
   clip cut straight across the leaf. Cap is a percentage AND a px ceiling: the percentage saves
   short sections, the ceiling keeps the plate from ballooning on very tall ones. */
.foliage{position:relative;isolation:isolate;overflow:clip}
.foliage > *{position:relative;z-index:1}
.foliage::before,.foliage::after{content:"";position:absolute;z-index:0;display:none;
  pointer-events:none;background-repeat:no-repeat;background-size:contain;
  opacity:.17;will-change:transform;
  /* Every plate is cut top and bottom regardless of its artwork. Adjacent sections share a
     background here, so a cut sitting ON a horizontal section boundary is NOT hidden — it reads
     as a straight line across the leaf. Only the viewport's left and right edges hide a cut. */
  --vfade:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* --- entry-edge geometry. OUT is the overhang: > peak translate (18px) + rotation swing. --- */
.foliage::before,.foliage::after{--out:-52px}

/* left edge: the whole left border is cut, so it rides outside and pivots about its midpoint */
.b-left::before{display:block;left:var(--out);top:10%;
  height:min(78%,645px);width:auto;aspect-ratio:2/3;background-position:left center;transform-origin:0% 50%;
  -webkit-mask-image:radial-gradient(126% 106% at 0% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade);
          mask-image:radial-gradient(126% 106% at 0% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade)}

/* right edge, upper. Its plate's own cuts are top+right; the right one rides off the viewport
   and the top one is faded out by --vfade, so the pivot sits on the right edge mid-height. */
.a-tr::after{display:block;right:var(--out);top:8%;left:auto;
  height:min(80%,600px);width:auto;aspect-ratio:2/3;background-position:right top;transform-origin:100% 50%;
  -webkit-mask-image:radial-gradient(126% 106% at 100% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade);
          mask-image:radial-gradient(126% 106% at 100% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade)}

/* left edge, lower */
.b-bl::before,.a-bl::after{display:block;left:var(--out);bottom:8%;
  height:min(80%,308px);width:auto;aspect-ratio:4/3;background-position:left bottom;transform-origin:0% 50%;
  -webkit-mask-image:radial-gradient(126% 106% at 0% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade);
          mask-image:radial-gradient(126% 106% at 0% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade)}


/* Mirrored right-hand slots. A left-cut plate flipped becomes a right-cut plate, which is how
   the right corners are filled without reusing an asset. background-position and the mask stay
   in UNMIRRORED space (cut on the box's left) because the transform mirrors them along with the
   pixels; only the box anchor moves to the right edge. The origin stays at 50% across the
   flip axis so the mirror happens in place instead of throwing the box a full width sideways. */
.a-tl-r::after{display:block;right:var(--out);top:8%;left:auto;--flip:-1;
  height:min(80%,600px);width:auto;aspect-ratio:2/3;background-position:left top;transform-origin:50% 50%;
  -webkit-mask-image:radial-gradient(126% 106% at 0% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade);
          mask-image:radial-gradient(126% 106% at 0% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 95%),var(--vfade)}

/* one plate per slot — four distinct shapes, staggered left / right / skip / left / right so no
   two consecutive sections carry foliage on the same side. A box wider than its plate would
   letterbox it under background-size:contain and leave the plate's own edges floating INSIDE
   the frame, so every box is cut to its plate's native ratio. */
.s-a::before{background-image:url("/hp/frond-a.webp")}
.s-i::before{background-image:url("/hp/frond-i.webp")}
.s-c::after{background-image:url("/hp/frond-c.webp")}
.s-e::after{background-image:url("/hp/frond-e.webp")}
/* A box wider than its plate letterboxes it under background-size:contain, which leaves the
   plate's own edges floating INSIDE the frame — the exact fault we are fixing. Every box is
   therefore cut to its plate's native ratio so plate edge and box edge are the same line. */

/* three wind strengths; the heavier ones go on the big loose leaves.
   scaleX is a variable so the flip is a property of the slot, not of the keyframes. */
@keyframes swayA{
  0%  {transform:scaleX(var(--flip,1)) rotate(-1.9deg) translate3d(-10px,4px,0) scale(1.00)}
  28% {transform:scaleX(var(--flip,1)) rotate(.9deg)   translate3d(14px,-9px,0) scale(1.03)}
  55% {transform:scaleX(var(--flip,1)) rotate(-1.2deg) translate3d(-6px,7px,0)  scale(1.015)}
  78% {transform:scaleX(var(--flip,1)) rotate(1.5deg)  translate3d(18px,-5px,0) scale(1.035)}
  100%{transform:scaleX(var(--flip,1)) rotate(-.4deg)  translate3d(-12px,2px,0) scale(1.01)}
}
@keyframes swayB{
  0%  {transform:scaleX(var(--flip,1)) rotate(1.6deg)  translate3d(8px,-4px,0)  scale(1.00)}
  32% {transform:scaleX(var(--flip,1)) rotate(-1.1deg) translate3d(-13px,8px,0) scale(1.028)}
  61% {transform:scaleX(var(--flip,1)) rotate(1.3deg)  translate3d(10px,-7px,0) scale(1.012)}
  100%{transform:scaleX(var(--flip,1)) rotate(-.6deg)  translate3d(-7px,5px,0)  scale(1.02)}
}
@keyframes gustA{
  0%  {transform:scaleX(var(--flip,1)) rotate(-2.4deg) translate3d(-9px,4px,0)  scale(1.00)}
  22% {transform:scaleX(var(--flip,1)) rotate(1.6deg)  translate3d(11px,-7px,0) scale(1.03)}
  44% {transform:scaleX(var(--flip,1)) rotate(-1.8deg) translate3d(-6px,6px,0)  scale(1.02)}
  70% {transform:scaleX(var(--flip,1)) rotate(2.1deg)  translate3d(12px,-5px,0) scale(1.035)}
  100%{transform:scaleX(var(--flip,1)) rotate(-1.1deg) translate3d(-8px,3px,0)  scale(1.03)}
}
@keyframes gustB{
  0%  {transform:scaleX(var(--flip,1)) rotate(2.2deg)  translate3d(8px,-4px,0)  scale(1.00)}
  26% {transform:scaleX(var(--flip,1)) rotate(-1.7deg) translate3d(-11px,7px,0) scale(1.028)}
  58% {transform:scaleX(var(--flip,1)) rotate(2.0deg)  translate3d(9px,-6px,0)  scale(1.025)}
  100%{transform:scaleX(var(--flip,1)) rotate(-1.3deg) translate3d(-7px,4px,0)  scale(1.045)}
}

/* A palm frond hangs off a base and pivots there — it does not grow or drift. The shared sway
   keyframes pulse scale() and translate the plate up to 13px, which on a frond reads as the whole
   leaf sliding around. This is rotation about the entry corner (its base) plus a little skewY so
   the tip whips slightly behind the base, no scale at all. Keyframes are unevenly spaced and the
   loop is seamless rather than `alternate`, so it does not swing like a metronome. */
@keyframes frond{
  0%  {transform:rotate(-.9deg)  skewY(.35deg)  translate3d(0,0,0)}
  17% {transform:rotate(.35deg)  skewY(-.15deg) translate3d(-2px,1px,0)}
  31% {transform:rotate(-.25deg) skewY(.2deg)   translate3d(1px,-1px,0)}
  48% {transform:rotate(1.15deg) skewY(-.4deg)  translate3d(-3px,2px,0)}
  63% {transform:rotate(.2deg)   skewY(-.05deg) translate3d(-1px,1px,0)}
  79% {transform:rotate(-.55deg) skewY(.25deg)  translate3d(1px,-1px,0)}
  100%{transform:rotate(-.9deg)  skewY(.35deg)  translate3d(0,0,0)}
}
.foliage::before{animation:swayA 16s ease-in-out infinite alternate}
.foliage::after{animation:swayB 21s ease-in-out infinite alternate}
.gust::before{animation:gustA 13s ease-in-out infinite alternate}
.gust::after{animation:gustB 15s ease-in-out infinite alternate}
.slow::before{animation-duration:27s}
.slow::after{animation-duration:31s}
.frond::after{animation:frond 19s ease-in-out infinite}

/* sheer drapery drifting across the ground */
.sheer{position:relative;isolation:isolate;overflow:hidden}
.sheer > *{position:relative;z-index:1}
.sheer::before{content:"";position:absolute;inset:-10% -30%;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(97deg,
    rgba(42,35,28,.030) 0px, rgba(42,35,28,.030) 2px,
    rgba(255,255,255,0) 2px, rgba(255,255,255,0) 26px);
  animation:drift 30s ease-in-out infinite alternate;will-change:transform}
.sheer::after{content:"";position:absolute;inset:-20% -20%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 18%,rgba(193,152,100,.13),rgba(193,152,100,0) 62%);
  animation:glow 26s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) skewX(0deg)}
  50%{transform:translate3d(38px,-14px,0) skewX(.9deg)}
  100%{transform:translate3d(-26px,11px,0) skewX(-.6deg)}
}
@keyframes glow{0%{opacity:.5}100%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .foliage::before,.foliage::after,.sheer::before,.sheer::after{animation:none!important}
  .post-img{transition:none!important;transform:none!important}
}
@media(max-width:760px){
  .foliage::before,.foliage::after{opacity:.10}
  .sheer::before{opacity:.35}
}

/* ---------- motion ----------
   Reveals fail OPEN: nothing is hidden until JS has confirmed IntersectionObserver
   and that the reader has not asked for reduced motion. No JS, no observer, or
   reduced motion all leave the page fully visible. */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal-fade{opacity:0;transition:opacity .9s ease}
.reveal-fade.is-in{opacity:1}

/* nav: underline wipes in from the left rather than snapping on */
nav a{position:relative;border-bottom:0;padding-bottom:6px;transition:color .25s ease}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .34s cubic-bezier(.22,.61,.36,1)}
nav a:hover{color:var(--gold-deep)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- hero on phones ----------
   `.hero-img` is locked to 16/9, which is 219px tall at 390px wide, while the hero copy is ~400px.
   The copy is absolutely positioned, so it overflowed the hero upwards and sat behind the sticky
   header and the utility bar — measured at 220px of the headline hidden on a 390px phone, and the
   homepage was doing the same thing.

   Below 760px the three layers are stacked in a single grid cell instead: the copy is back in
   flow and sets the height, and the media stretches to whatever that is. The hero can no longer
   be shorter than the words in it. */
@media(max-width:760px){
  .hero{display:grid}
  .hero>*{grid-area:1/1;min-width:0}
  .hero-img{width:100%;height:100%;aspect-ratio:auto;max-height:none;min-height:100%;
    object-fit:cover;object-position:center}
  .hero-scrim{position:relative;inset:auto;
    background:linear-gradient(0deg,rgba(24,18,12,.92) 0%,rgba(24,18,12,.68) 42%,rgba(24,18,12,.18) 100%)}
  .hero-copy{position:relative;left:auto;right:auto;bottom:auto;align-self:end;max-width:none;
    padding:clamp(150px,40vw,260px) var(--pad) clamp(30px,8vw,46px)}
  .hero-copy h1{font-size:clamp(38px,10.5vw,52px)}
  .hero-copy p{font-size:16px}
  .hero-actions{gap:10px;margin-top:24px}
  .hero-actions .btn{flex:1 1 100%;text-align:center}
}

/* buttons: the fill sweeps up instead of flicking on */
.btn{position:relative;overflow:hidden;z-index:0;transition:color .3s ease,border-color .3s ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.btn:hover{background:none;color:var(--bone)}
.btn:hover::before{transform:translateY(0)}
.btn-solid::before{background:var(--bone)}
.btn-solid:hover{color:var(--ink)}
.btn-light::before{background:#F6F1E7}
.btn-light:hover{color:var(--dark);border-color:#F6F1E7}
/* The approved block still sets an instant `background` on these two hover states, and background
   is not in the transition list. The result was a hover that snapped on and only animated on the
   way out — the wipe was being masked on entry. Hand the fill back to ::before entirely. */
.btn-solid:hover{background:var(--ink)}
.btn-light:hover{background:none}

/* category cards: the image eases in, the caption steps up */
.card-media{overflow:hidden}
.card-media img{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-media img{transform:scale(1.045)}
.card .cap{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.card:hover .cap{transform:translateY(-4px)}
.card p{transition:color .3s ease}
.card:hover p{color:var(--ink)}

/* rail links: label and arrow travel together */
.rail a{transition:color .25s ease,padding-left .3s cubic-bezier(.22,.61,.36,1)}
.rail a:hover{padding-left:6px}

/* vendor tiles lift slightly */
.vlogo{transition:border-color .3s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.vlogo:hover{transform:translateY(-3px)}

/* journal: a gold rule draws across the top on hover */
.post{position:relative}
.post::after{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.post:hover::after{transform:scaleX(1)}

/* track arrows */
.track-nav button,.bleed .arrows button{transition:background .28s ease,color .28s ease,transform .28s ease}
.track-nav button:hover,.bleed .arrows button:hover{transform:translateY(-2px)}

/* ---------- above-the-fold entrance ----------
   Pure CSS on load, so it runs with or without JS. Reduced motion collapses both the
   duration and the delay, so nothing sits invisible waiting for a timer. */
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes heroSettle{from{transform:scale(1.045)}to{transform:scale(1)}}

.hero-copy h1 .l1,.hero-copy h1 .l2{display:block}

.utility{animation:heroFade .7s ease both}
.mark{animation:heroRise .8s cubic-bezier(.22,.61,.36,1) both .08s}
nav a{animation:heroFade .7s ease both calc(.22s + var(--i,0)*.05s)}
.hbar .btn{animation:heroRise .8s cubic-bezier(.22,.61,.36,1) both .42s}

.hero-img{animation:heroSettle 2.4s cubic-bezier(.22,.61,.36,1) both}
.hero-scrim{animation:heroFade 1.2s ease both}
.hero-copy .lbl{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both .30s}
.hero-copy h1 .l1{animation:heroRise 1s cubic-bezier(.22,.61,.36,1) both .42s}
.hero-copy h1 .l2{animation:heroRise 1s cubic-bezier(.22,.61,.36,1) both .54s}
.hero-copy p{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both .70s}
.hero-actions .btn:first-child{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both .84s}
.hero-actions .btn:last-child{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both .94s}

@media(prefers-reduced-motion:reduce){
  *{animation-delay:0ms!important}
  .hero-img{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-fade{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =====================================================================
   PAGE COMPONENTS — added for the inner-page build, 2026-09-22.
   Everything above this line is the approved homepage system, untouched.
   ===================================================================== */

/* ---------- compact page hero ---------- */
.phero{position:relative;background:var(--dark);overflow:hidden}
.phero img,.phero video{width:100%;height:clamp(440px,72vh,820px);object-fit:cover;display:block;
  animation:heroSettle 2.4s cubic-bezier(.22,.61,.36,1) both}
/* .big is the enlarged treatment, rolled out page by page as each one gets its hero video.
   Sized like the homepage hero rather than the compact inner-page band. */
/* 16:9 on desktop, but a 16:9 box on a 390px phone is only 219px tall — shorter than the
   band it replaced. min-height holds it up and object-fit crops the sides. */
.phero.big img,.phero.big video{height:auto;aspect-ratio:16/9;max-height:86vh;
  min-height:clamp(380px,62vh,560px)}
.phero video{background:var(--dark)}
.phero .still{display:none}
@media(prefers-reduced-motion:reduce){
  .phero video{display:none}
  .phero .still{display:block}
}
.phero .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(24,18,12,.86) 0%,rgba(24,18,12,.5) 38%,rgba(24,18,12,.06) 72%)}

@media(max-width:900px){
  .phero .scrim{background:linear-gradient(0deg,rgba(24,18,12,.92) 0%,rgba(24,18,12,.52) 54%,rgba(24,18,12,.08) 90%)}
}
.phero .copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,5vw,56px);
  color:#F7F2E8;max-width:min(680px,84vw)}
.phero .lbl{display:block;color:#E3CFA6;margin-bottom:13px;
  animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both .18s}
.phero h1{font-size:clamp(37px,5.2vw,66px);color:#FBF7EF;
  animation:heroRise 1s cubic-bezier(.22,.61,.36,1) both .28s}
.phero p{margin-top:15px;font-size:17px;color:rgba(247,242,232,.84);max-width:48ch;text-wrap:pretty;
  animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both .44s}

/* ---------- text-only page header ---------- */
.thead{background:var(--paper);padding-bottom:clamp(38px,5vw,58px)}
.thead .inner{max-width:1240px}
.thead h1{font-size:clamp(37px,5vw,64px)}
.thead .lbl{display:block;color:var(--gold-deep);margin-bottom:14px}
.thead p{color:var(--umber);font-size:18px;max-width:50ch;margin-top:16px}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:13px var(--pad);border-bottom:1px solid var(--line-soft);background:var(--bone);
  font-size:13px;color:var(--umber)}
.crumbs .inner{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs i{font-style:normal;color:rgba(42,35,28,.3)}

/* ---------- section tints ---------- */
.t-paper{background:var(--paper)}
.t-linen{background:var(--linen)}
.t-shell{background:var(--shell)}
.t-dark{background:var(--dark);color:#E9E0D1}
.t-dark h2,.t-dark h3{color:#FBF7EF}
.t-dark p{color:rgba(246,241,231,.74)}

/* ---------- lede ---------- */
.lede .inner{display:grid;gap:24px}
@media(min-width:900px){.lede .inner{grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}}
.lede .inner>*{min-width:0}
.lede p{color:var(--umber);font-size:18px;max-width:54ch}
.lede p+p{margin-top:15px}

/* ---------- generic image / text split ---------- */
.split .inner{display:grid;gap:34px}
@media(min-width:900px){.split .inner{grid-template-columns:1fr 1fr;gap:64px;align-items:center}}
.split .inner>*{min-width:0}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split.wide img{aspect-ratio:3/2}
.split p{color:var(--umber);margin-top:16px}
.split p+p{margin-top:14px}
.split .btn{margin-top:26px}
@media(min-width:900px){.split.flip .inner>.imgcell{order:2}}

/* ---------- product grid ---------- */
.prods{display:grid;gap:36px 26px;max-width:1240px;margin:0 auto}
@media(min-width:700px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.prods{grid-template-columns:repeat(3,1fr)}}
.prods>*{min-width:0}
.prod{display:block;border-top:1px solid var(--line)}
.prod .pm{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--linen);margin-top:18px}
.prod .pm img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.prod:hover .pm img,.prod:focus-visible .pm img{transform:scale(1.05)}
.prod h3{font-size:25px;margin:17px 0 8px}
.prod:hover h3{color:var(--gold-deep)}
.prod p{font-size:14.5px;color:var(--umber);line-height:1.55}
.prod .go{display:inline-flex;align-items:center;gap:8px;margin-top:13px;color:var(--gold-deep);
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.prod .go i{font-style:normal;transition:transform .3s ease}
.prod:hover .go i{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.prod .pm img{transition:none!important;transform:none!important}}

/* ---------- spec rows ---------- */
.specs{max-width:1240px;margin:0 auto;border-top:1px solid var(--line)}
.spec{display:grid;gap:10px;padding:28px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:820px){.spec{grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start}}
.spec .lbl{color:var(--gold-deep)}
.spec p{color:var(--umber);font-size:15.5px;max-width:66ch}
.spec .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.spec .opts span{border:1px solid var(--line);padding:7px 13px;font-size:13px;color:var(--ink)}

/* ---------- swatches (placeholder tiles until real fabric shots land) ---------- */
/* Centred, not grid: auto-fill lays down more tracks than there are swatches, so eight
   tiles pack to the left and the empty tracks sit as dead space on the right. Row counts
   divide 8 exactly at every breakpoint, so no row is ever left half-full. */
.swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 16px;
  max-width:1240px;margin:0 auto}
.sw{flex:0 0 138px}
@media(max-width:1180px){.sw{flex:0 0 calc(25% - 12px)}}
@media(max-width:520px){.sw{flex:0 0 calc(50% - 8px)}}
.sw img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border:1px solid var(--line);background:var(--linen)}
.sw b{display:block;font-family:var(--sans);font-weight:400;font-size:12.5px;color:var(--umber);margin-top:9px}

/* ---------- gallery ---------- */
.gal{display:grid;gap:14px;max-width:1240px;margin:0 auto}
@media(min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* ---------- FAQ ---------- */
.faqs{max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
.faqs details{border-bottom:1px solid var(--line-soft)}
.faqs summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;
  gap:22px;font-family:var(--serif);font-size:23px;line-height:1.26;color:var(--ink)}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:hover{color:var(--gold-deep)}
.faqs summary i{font-style:normal;color:var(--gold-deep);font-size:19px;flex:0 0 auto;
  transition:transform .3s ease;line-height:1.4}
.faqs details[open] summary i{transform:rotate(45deg)}
.faqs p{color:var(--umber);font-size:15.5px;padding-bottom:24px;max-width:72ch}

/* ---------- article ---------- */
.artwrap{max-width:720px;margin:0 auto}
.artmeta{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:13px;color:var(--umber);
  padding-bottom:20px;margin-bottom:34px;border-bottom:1px solid var(--line-soft)}
.artmeta .lbl{color:var(--gold-deep)}
.prose{font-size:18px;line-height:1.72}
.prose p+p{margin-top:22px}
.prose .stand{font-size:21px;line-height:1.62;color:var(--umber)}
.prose h2{font-size:clamp(27px,3.2vw,36px);margin:52px 0 16px}
.prose h3{font-size:24px;margin:38px 0 12px}
.prose ul{margin:20px 0;padding-left:19px;color:var(--umber)}
.prose li+li{margin-top:9px}
.prose a:not(.btn){border-bottom:1px solid var(--gold);color:var(--gold-deep)}
.pquote{margin:46px 0;padding:0;border-left:1px solid var(--gold);padding-left:28px}
.pquote p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,31px);line-height:1.32;
  color:var(--ink)}
.pfig{margin:46px 0}
.pfig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pfig figcaption{font-size:13px;color:var(--umber);margin-top:11px}

/* ---------- forms ---------- */
.form{max-width:780px;margin:0 auto;display:grid;gap:22px}
.form .two{display:grid;gap:22px}
@media(min-width:700px){.form .two{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px;min-width:0}
.field>span{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep)}
.field input,.field select,.field textarea{font-family:var(--sans);font-weight:300;font-size:16px;
  color:var(--ink);background:#fff;border:1px solid var(--line);padding:14px 15px;width:100%;border-radius:0}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);
  outline-offset:0;border-color:var(--gold)}
.checks{display:flex;flex-wrap:wrap;gap:9px}
.checks label{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  padding:10px 14px;font-size:14px;cursor:pointer;color:var(--ink)}
.checks input{accent-color:var(--gold-deep);width:15px;height:15px}
.checks label:hover{border-color:var(--gold)}
.form .note{font-size:13px;color:var(--umber)}
.form .btn{justify-self:start}
.formdone{border:1px solid var(--gold);background:var(--paper);padding:30px;max-width:780px;margin:0 auto}
.formdone h2{font-size:27px;margin-bottom:10px}
.formdone p{color:var(--umber)}

/* ---------- contact detail rail ---------- */
.detail{display:grid;gap:28px;max-width:1240px;margin:0 auto}
@media(min-width:820px){.detail{grid-template-columns:repeat(3,1fr);gap:44px}}
.detail>div{border-top:1px solid var(--line);padding-top:20px}
.detail .lbl{display:block;color:var(--gold-deep);margin-bottom:12px}
.detail p,.detail a{font-size:15.5px;color:var(--umber);display:block}
.detail a:hover{color:var(--gold-deep)}
.detail strong{font-weight:400;color:var(--ink)}

/* ---------- vendor blocks ---------- */
.vblock{max-width:1240px;margin:0 auto;display:grid;gap:30px;
  padding:clamp(38px,5vw,60px) 0;border-top:1px solid var(--line)}
@media(min-width:900px){.vblock{grid-template-columns:290px minmax(0,1fr);gap:64px;align-items:start}}
.vblock>*{min-width:0}
.vmark{border:1px solid var(--line);background:#fff;min-height:152px;display:flex;
  align-items:center;justify-content:center;padding:30px 26px}
.vmark img{height:32px;width:auto;max-width:100%;flex:0 0 auto;display:block}
.vmark img[alt="Lutron"]{height:27px}
.vmark img[alt="Coulisse"]{height:26px}
.vmark em{font-style:italic;font-family:var(--serif);font-size:30px;color:var(--ink);letter-spacing:.02em}
.vblock h2{font-size:clamp(28px,3.2vw,40px)}
.vblock .lbl{display:block;color:var(--gold-deep);margin-bottom:12px}
.vblock p{color:var(--umber);margin-top:14px;max-width:62ch}
.vtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.vtags span{border:1px solid var(--line);padding:7px 13px;font-size:13px;color:var(--ink)}
.vblock .btn{margin-top:24px}

/* ---------- blog ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips a{border:1px solid var(--line);padding:9px 15px;font-size:13px}
.chips a:hover,.chips a.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.feat{display:grid;gap:28px;max-width:1240px;margin:0 auto}
@media(min-width:900px){.feat{grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}}
.feat>*{min-width:0}
.feat .fm{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--linen)}
.feat .fm img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.feat:hover .fm img{transform:scale(1.04)}
.feat .lbl{color:var(--gold-deep)}
.feat h2{font-size:clamp(29px,3.6vw,44px);margin:14px 0 13px}
.feat p{color:var(--umber)}
@media(prefers-reduced-motion:reduce){.feat .fm img{transition:none!important;transform:none!important}}

/* ---------- pagination ---------- */
.pager{display:flex;gap:9px;justify-content:center;margin-top:52px}
.pager a,.pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-size:14px}
.pager a:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pager .on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pager .off{color:rgba(42,35,28,.3)}

/* ---------- section heading helpers ---------- */
.shead{max-width:46ch;margin:0 auto 48px;text-align:center}
.shead p{color:var(--umber);margin-top:16px}
.shead .lbl{display:block;color:var(--gold-deep);margin-bottom:14px}
.t-dark .shead .lbl{color:#E3CFA6}
.lhead{max-width:1240px;margin:0 auto 42px;display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;flex-wrap:wrap}
.lhead .lbl{display:block;color:var(--gold-deep);margin-bottom:12px}
.lbl-b{display:block;color:var(--gold-deep);margin-bottom:14px}
.t-dark .lbl-b{color:#E3CFA6}

/* ---------- mobile navigation ----------
   The desktop nav hides below 1080px. On a one-page site that was survivable;
   across eight pages it left a phone with no way through the site at all. */
.burger{display:none;width:42px;height:42px;padding:0;border:1px solid var(--line);background:none;
  cursor:pointer;flex:0 0 auto;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:17px;height:1px;background:var(--ink);transition:transform .3s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobnav{display:none;border-top:1px solid var(--line-soft);background:var(--bone);
  padding:6px var(--pad) 26px}
.mobnav ul{list-style:none;margin:0;padding:0}
.mobnav li{border-bottom:1px solid var(--line-soft)}
.mobnav a{display:block;padding:15px 0;font-size:17px}
.mobnav a:hover{color:var(--gold-deep)}
.mobnav .foot{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14px;color:var(--umber)}
.mobnav .foot a{display:inline;padding:0;font-size:14px;color:var(--gold-deep)}
@media(max-width:1080px){
  .burger{display:flex}
  .mobnav.is-open{display:block}
}

/* ---------- gallery: masonry + lightbox ----------
   CSS columns rather than grid: the images are deliberately mixed portrait, landscape and
   square, and columns pack them by height without anyone having to hand-assign row spans.
   Every tile carries width/height attributes so the column heights are right before the
   images load — without them the masonry reflows as each one arrives. */
.gal-masonry{column-count:4;column-gap:14px;max-width:1240px;margin:0 auto}
@media(max-width:1080px){.gal-masonry{column-count:3}}
@media(max-width:720px){.gal-masonry{column-count:2;column-gap:10px}}
.gal-item{display:block;width:100%;padding:0;border:0;background:var(--linen);cursor:zoom-in;
  position:relative;overflow:hidden;margin:0 0 14px;break-inside:avoid;-webkit-column-break-inside:avoid}
@media(max-width:720px){.gal-item{margin-bottom:10px}}
.gal-item img{width:100%;height:auto;display:block;
  transition:transform .9s cubic-bezier(.22,.61,.36,1),filter .5s ease}
.gal-item::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(0deg,rgba(24,18,12,.62),rgba(24,18,12,0) 46%);transition:opacity .4s ease}
.gal-item .cap{position:absolute;z-index:1;left:14px;bottom:12px;color:#FBF7EF;opacity:0;
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
  text-shadow:0 1px 14px rgba(20,14,8,.85)}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.045)}
.gal-item:hover::after,.gal-item:focus-visible::after{opacity:1}
.gal-item:hover .cap,.gal-item:focus-visible .cap{opacity:1;transform:none}
/* touch devices never hover, so the labels just sit there */
@media(hover:none){
  .gal-item::after{opacity:1}
  .gal-item .cap{opacity:1;transform:none}
  .gal-item img{transform:none}
}
@media(prefers-reduced-motion:reduce){.gal-item img{transition:none!important;transform:none!important}}

.gal-cta{text-align:center;margin-top:44px}

/* gallery filter bar. The buttons carry aria-pressed rather than a class alone, so a screen
   reader gets the state and not just the styling. A hidden tile stays in the DOM — data-i has to
   keep pointing at the same entry in REGENCY_GALLERY — so it is display:none, not removed. */
.gal-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:1240px;margin:0 auto 34px}
.gal-filter button{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--umber);background:transparent;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:10px 19px;
  transition:color .3s ease,border-color .3s ease,background-color .3s ease}
.gal-filter button:hover{color:var(--ink);border-color:rgba(42,35,28,.34)}
.gal-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.gal-filter .n{opacity:.55;margin-left:7px;letter-spacing:.06em}
.gal-item[hidden]{display:none}
.gal-empty{text-align:center;color:var(--umber);padding:40px 0}
@media(max-width:720px){
  .gal-filter{gap:6px;margin-bottom:26px}
  .gal-filter button{padding:9px 14px;font-size:11px;letter-spacing:.1em}
}

/* ---------- lightbox ---------- */
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;overflow:hidden}
/* opaque, not 94%: the header is near-white, and even 6% transmission let the wordmark
   and nav read straight through the backdrop. */
dialog.lb::backdrop{background:#16110C}
body.lb-open{overflow:hidden}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(48px,7vh,80px) clamp(52px,8vw,110px)}
.lb-stage figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:16px}
.lb-stage img{max-width:100%;max-height:calc(100vh - clamp(150px,20vh,200px));width:auto;height:auto;
  object-fit:contain;display:block;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lb-stage figcaption{color:#E9E0D1;font-size:14.5px;text-align:center;max-width:62ch}
.lb-stage figcaption b{display:block;font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:#E3CFA6;margin-bottom:7px}
.lb-btn{position:absolute;z-index:2;background:none;border:1px solid rgba(246,241,231,.4);
  color:#F7F2E8;cursor:pointer;width:46px;height:46px;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0}
.lb-btn:hover{background:#F7F2E8;color:var(--dark)}
.lb-prev{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb-close{right:clamp(10px,2vw,26px);top:clamp(10px,2vh,26px)}
.lb-count{position:absolute;z-index:2;left:clamp(14px,2vw,28px);top:clamp(16px,2vh,30px);
  color:rgba(233,224,209,.72);font-size:12.5px;letter-spacing:.1em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:720px){
  .lb-stage{padding:64px 14px 96px}
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-btn{width:40px;height:40px}
}

/* ---------- product carousel (inner product pages) ----------
   Collection pages get the masonry; a single product does not have enough variety to justify
   one, so its shots run as a horizontal track instead. Slides open the same lightbox. */
.pcar-wrap{max-width:1240px;margin:0 auto}
.pcar{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.pcar::-webkit-scrollbar{width:0;height:0;display:none}
.pcar-item{flex:0 0 clamp(272px,62vw,620px);scroll-snap-align:start;display:block;padding:0;border:0;
  background:var(--linen);cursor:zoom-in;position:relative;overflow:hidden}
.pcar-item img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.pcar-item::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(0deg,rgba(24,18,12,.58),rgba(24,18,12,0) 48%);transition:opacity .4s ease}
.pcar-item .cap{position:absolute;z-index:1;left:15px;bottom:13px;right:15px;color:#FBF7EF;opacity:0;
  font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.01em;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
  text-shadow:0 1px 14px rgba(20,14,8,.85)}
.pcar-item:hover img,.pcar-item:focus-visible img{transform:scale(1.04)}
.pcar-item:hover::after,.pcar-item:focus-visible::after{opacity:1}
.pcar-item:hover .cap,.pcar-item:focus-visible .cap{opacity:1;transform:none}
@media(hover:none){.pcar-item::after{opacity:1}.pcar-item .cap{opacity:1;transform:none}.pcar-item img{transform:none}}
@media(prefers-reduced-motion:reduce){.pcar-item img{transition:none!important;transform:none!important}}
.pcar-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.pcar-foot .track-nav{margin-top:0}

/* ---------- masonry packing ----------
   CSS columns balance by splitting content, and these tiles carry break-inside:avoid, so with
   mixed portrait and landscape it leaves one column hundreds of pixels short. The script below
   distributes tiles shortest-column-first instead. The columns rule stays as the no-JS
   fallback; .is-packed switches to the flex columns the script builds. */
.gal-masonry.is-packed{display:flex;column-count:auto;gap:14px;align-items:flex-start}
@media(max-width:720px){.gal-masonry.is-packed{gap:10px}}
.gal-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
@media(max-width:720px){.gal-col{gap:10px}}
.gal-masonry.is-packed .gal-item{margin:0}


/* ---------- landing page (/lp/) ----------
   A paid-traffic page: one conversion path, no nav, no outbound links. It reuses the site's
   sections wholesale and only adds the pieces a landing page needs that the site does not have. */
.lp-head .hbar{gap:16px}
.lp-tel{margin-left:auto;font-size:15px;letter-spacing:.01em;white-space:nowrap;
  border-bottom:1px solid transparent}
.lp-tel:hover{border-bottom-color:var(--gold)}
@media(max-width:600px){.lp-tel{display:none}}

/* trust strip, directly under the hero */
.lp-trust{background:var(--dark);color:#EFE7D9;padding:16px var(--pad)}
.lp-trust .inner{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:10px 30px;font-size:13.5px;color:#CFC3AD}
.lp-trust b{font-weight:500;color:#F6F1E7}
@media(max-width:900px){.lp-trust .inner{justify-content:flex-start;gap:8px 22px;font-size:12.5px}}

/* the six categories, as plain tiles — no links, nothing to click but the CTA */
.lp-cats .shead{margin-bottom:clamp(26px,3vw,40px)}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);
  max-width:1240px;margin:0 auto}
@media(max-width:980px){.lp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lp-grid{grid-template-columns:1fr}}
.lp-cat img{width:100%;height:230px;object-fit:cover;background:var(--linen)}
.lp-cat h3{font-size:25px;margin:15px 0 5px}
.lp-cat p{margin:0;color:var(--umber);font-size:15px}

/* the form section: copy left, form right, collapsing to one column */
.lp-book .inner{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,4vw,64px);align-items:stretch}
.lp-book-copy{display:flex;flex-direction:column}
@media(max-width:980px){.lp-book .inner{grid-template-columns:1fr}}
.lp-book-copy p{color:var(--umber);max-width:46ch}
.lp-ticks{list-style:none;margin:24px 0 0;padding:0}
.lp-ticks li{position:relative;padding-left:26px;margin-bottom:11px;font-size:16px}
.lp-ticks li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-left:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(-45deg) translateY(-2px)}
/* the display serif has a deep descender, so 16px of linebox gap still reads as touching —
   this is set against the INK, not the boxes */
.lp-book-copy .sec-title + p{margin-top:26px}
.lp-or{margin-top:26px;font-size:15px}

/* showroom map, balancing the empty lower left of the form section */
/* The copy column is a flex column and the map is pushed to its foot, so the card's bottom edge
   lands on the form's. The image absorbs whatever slack the row has. */
.lp-map{margin-top:clamp(26px,3vw,38px);border:1px solid var(--line-soft);background:var(--bone);
  display:flex;flex-direction:column;flex:1 1 auto;min-height:258px}
/* The image is taken out of the flow inside a flexing box. Left in it, its intrinsic height
   dictated the column and pushed the whole row taller than the form instead of filling it. */
.lp-map-img{flex:1 1 auto;position:relative;min-height:200px;overflow:hidden}
.lp-map-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.34) contrast(.93) brightness(1.03)}
.lp-map-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:16px 40px;padding:20px 22px}
.lp-map-attr{flex:0 0 auto;padding:0 22px 16px;margin:0;font-size:11px;color:var(--umber);opacity:.75}
.lp-map-foot .lbl{display:block;color:var(--gold-deep);margin-bottom:7px}
.lp-map-foot p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.lp-or a{border-bottom:1px solid var(--gold);white-space:nowrap}
.lp-form{background:var(--bone);padding:clamp(22px,3vw,36px);border:1px solid var(--line-soft)}

/* footer: contact details only */
.lp-foot{background:var(--dark);color:#CFC3AD;padding:clamp(40px,5vw,62px) var(--pad) 30px}
.lp-foot .flogo img{height:34px;width:auto}
.lp-foot-grid{max-width:1240px;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:10px 34px;
  font-size:14px}
.lp-foot-grid a{border-bottom:1px solid transparent}
.lp-foot-grid a:hover{border-bottom-color:var(--gold)}
.lp-foot .fbot{max-width:1240px}

/* --- journal listing -------------------------------------------------------- */
.posts .post[hidden]{display:none}
.chips a{cursor:pointer}
.jcount{font:500 11px/1 Figtree,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--umber);opacity:.75}
.lhead .jcount{margin-top:10px;display:block}

/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* SMS consent. Carrier registration requires the box to be unticked by default and the terms
   readable beside it, so this is deliberately not a one-line checkbox. */
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:26px 0 4px;cursor:pointer}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold-deep);flex:none}
.consent span{font-size:13px;line-height:1.6;color:var(--umber)}
.consent a{color:var(--gold-deep);border-bottom:1px solid var(--line)}
.consent a:hover{border-color:var(--gold)}

/* Category carousel bleeds to the right edge of the viewport on wide screens, so a card is never
   sliced mid-way by the content column with empty page beside it (client note 2026-09-29). */
@media(min-width:960px){
  .cats .track{margin-right:calc(-1 * (var(--pad) + max(0px, (100vw - 2 * var(--pad) - 1240px) / 2)))}
}

/* a two-pillar set fills the row instead of leaving an empty third column */
@media(min-width:820px){.pillars:has(>.pillar:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}}

/* looping clips standing in for a photo (motorized shades page) */
.loop-vid{display:block;width:100%;object-fit:cover;object-position:0% 50%;background:var(--linen)}
.split .loop-vid{aspect-ratio:4/5}
.split.wide .loop-vid{aspect-ratio:3/2}
.pcar-item .loop-vid{aspect-ratio:3/2}

/* vendor trademark credit under the footer bar (Lutron's required wording) */
.tm{max-width:1240px;margin:14px auto 0;font-size:11px;line-height:1.5;color:#9A8C78}

/* two-card product row (motorization parent: shades + drapery lead, blinds is a text link) */
.prods.two{max-width:1040px}
@media(min-width:700px){.prods.two{grid-template-columns:repeat(2,1fr)}}
.prods.two .pm{aspect-ratio:3/2}

/* the hidden attribute must win over component display rules (.form is display:grid, so a
   submitted form stayed on screen above its own thank-you panel) */
[hidden]{display:none!important}