/* ============================================================================
   UNILIGHTS · HOME PAGE CONCEPT · light edition
   Reference: craftaforms.com  ·  editorial, generous whitespace, hairline rules,
   numbered codes, arrow links, imagery carries all the colour.
   Single file, zero dependencies.  >> PROD marks production notes.
   ========================================================================= */

/* ---------- 1. TOKENS --------------------------------------------------- */
:root{
  --paper:#FAF9F6;          /* warm white, never pure #fff. pure white glares  */
  --sand:#F1EEE7;           /* alternating band                                */
  --ink:#171613;
  --ink-2:#605D55;          /* body copy                                       */
  --ink-3:#8E8A80;          /* labels                                          */
  --hair:rgba(23,22,19,.13);
  --hair-2:rgba(23,22,19,.22);
  --accent:#A8752F;         /* warm bronze. used sparingly, never as fill      */

  --sans:'Futura','Avenir Next','Century Gothic','Questrial',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  --gut:clamp(20px,4.6vw,72px);
  /* held at 1360 deliberately. the source photography tops out around 1400px,
     so every image is displayed at roughly half its pixel width and stays
     crisp on a Retina screen instead of going soft. */
  --maxw:1360px;
  --sec:clamp(74px,9.6vw,152px);        /* vertical section rhythm            */
  --e:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.65,.02,.25,1);

  /* THE LOGO SLOT. height drives everything, ratio holds the box.            */
  --brand-ratio:6.24;
  --brand-h:17px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 2. TYPE ----------------------------------------------------- */
.lbl{font-size:10.5px; letter-spacing:.215em; text-transform:uppercase;
     color:var(--ink-3); margin:0; line-height:1.5}
.h1{margin:0; font-weight:400; letter-spacing:-.024em; line-height:1.06;
    font-size:clamp(31px,5.15vw,70px)}
.h2{margin:0; font-weight:400; letter-spacing:-.019em; line-height:1.1;
    font-size:clamp(25px,3.2vw,43px); text-wrap:balance}
.h3{margin:0; font-weight:400; letter-spacing:-.012em; line-height:1.22;
    font-size:clamp(19px,1.9vw,26px)}
.dim{color:var(--ink-3)}
.body{margin:0; color:var(--ink-2); font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.78}
.rule{height:1px; background:var(--hair); border:0; margin:0}

/* arrow link. the arrow steps forward and a hairline draws underneath. */
.al{display:inline-flex; align-items:center; gap:9px; position:relative;
    font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; padding-bottom:7px}
.al svg{width:13px;height:13px;transition:transform .45s var(--e); flex:0 0 auto}
.al::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--e)}
.al:hover svg{transform:translateX(6px)}
.al:hover::after{transform:scaleX(1); transform-origin:0 50%}

.btn{display:inline-flex; align-items:center; gap:11px; border-radius:100px;
  padding:14px 26px; font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  border:1px solid var(--hair-2); transition:.42s var(--e)}
.btn svg{width:12px;height:12px;transition:transform .45s var(--e)}
.btn:hover{border-color:var(--ink)}
.btn:hover svg{transform:translateX(5px)}
.btn.solid{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn.solid:hover{background:#000}

/* ---------- 3. SCROLL REVEALS ------------------------------------------ */
/* one class, one observer. transform and opacity only, so it never repaints. */
.rv{opacity:0; transform:translateY(22px);
    transition:opacity .95s var(--e), transform .95s var(--e);
    transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1; transform:none}
/* Image reveal. A curtain slides up off the picture while the picture itself
   settles from 1.16 back to 1.
   NOTE: do not put clip-path on .fig itself. A self clipped element reports a
   zero intersection rect, so the observer can never see it and the reveal
   never fires. The curtain is a child, so the observed box stays intact. */
.fig{position:relative; overflow:hidden; background:var(--sand)}
.fig::after{content:""; position:absolute; inset:0; z-index:2; background:var(--paper);
  transition:transform 1.15s var(--e2); transition-delay:calc(var(--i,0)*90ms)}
.sec.sand .fig::after{background:var(--sand)}
.fig.in::after{transform:translateY(-101%)}
.fig img{width:100%; height:100%; object-fit:cover; transform:scale(1.16);
  transition:transform 1.7s var(--e2); transition-delay:calc(var(--i,0)*90ms)}
.fig.in img{transform:scale(1)}
/* headline lines mask upward */
.ln{display:block; overflow:hidden}
.ln > span{display:block; transform:translateY(105%);
  transition:transform 1.05s var(--e2); transition-delay:calc(var(--i,0)*95ms)}
.rv.in .ln > span, .ln.in > span{transform:none}

/* ---------- 4. LOADER --------------------------------------------------- */
#ld{position:fixed; inset:0; z-index:200; background:var(--paper);
  display:grid; place-items:center; gap:0; transition:opacity .7s ease .15s, visibility .7s}
#ld.done{opacity:0; visibility:hidden}
#ld .m{color:var(--ink); height:22px; width:calc(22px*var(--brand-ratio)); opacity:0;
  animation:fin .8s var(--e) .1s forwards}
#ld .m svg{width:100%;height:100%}
#ld .bar{position:absolute; left:0; top:0; height:1px; width:100%; background:var(--hair)}
#ld .bar i{display:block; height:100%; width:0; background:var(--ink);
  animation:fill 1.15s var(--e2) forwards}
@keyframes fin{to{opacity:1}}
@keyframes fill{to{width:100%}}

/* ---------- 5. HEADER --------------------------------------------------- */
.hd{position:fixed; inset:0 0 auto 0; z-index:90; padding:22px 0;
  transition:background-color .5s ease, padding .5s var(--e), border-color .5s ease;
  border-bottom:1px solid transparent}
.hd.stuck{background:rgba(250,249,246,.86); backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom-color:var(--hair); padding:15px 0}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; gap:26px}
.hd.stuck .brand{--brand-h:15px}
.brand{display:block; color:var(--ink); flex:0 0 auto;
  height:var(--brand-h); width:calc(var(--brand-h)*var(--brand-ratio))}
.brand svg,.brand img{width:100%;height:100%;object-fit:contain;display:block}
.nav{display:flex}
/* WordPress menus arrive as a <ul>, the static preview used bare links.
   both shapes land on the same flex row. */
.nav-list{display:flex; gap:clamp(18px,2.3vw,38px); margin:0; padding:0; list-style:none}
.nav-list li{margin:0}
.nav a{position:relative; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); padding:5px 0; transition:color .3s}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--e)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1); transform-origin:0 50%}
@media (max-width:720px){.nav{gap:16px} .nav a{font-size:10px; letter-spacing:.12em}}
@media (max-width:440px){.nav a:nth-child(3){display:none}}

/* ---------- 6. HERO ----------------------------------------------------- */
.hero{padding:clamp(140px,19vh,214px) 0 0}
.hero-top{display:grid; justify-items:center; text-align:center; gap:clamp(22px,2.4vw,30px)}
/* the statement is short now, so it gets to be genuinely large */
.hero .h1{max-width:16ch; font-size:clamp(38px,7vw,96px); line-height:1.02;
  letter-spacing:-.032em}
.kicker{margin:0; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3)}

/* the six capability codes, straight off the Craftaforms category row */
.codes{margin-top:clamp(46px,6vw,84px); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(6,1fr)}
/* the Explore line is taken out of flow, so the row keeps the same tight height
   whether it is showing or not. in flow it reserved a band of dead space. */
.codes a{position:relative; padding:20px 20px 38px 0; border-right:1px solid var(--hair);
  display:grid; gap:8px; align-content:start; overflow:hidden}
.codes a:last-child{border-right:0}
.codes .c{font-size:10.5px; letter-spacing:.2em; color:var(--ink-3);
  transition:color .4s ease}
.codes .n{font-size:clamp(13px,1.05vw,15.5px); letter-spacing:-.005em; line-height:1.3}
.codes .go{position:absolute; left:0; bottom:14px;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:6px; opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--e), transform .45s var(--e)}
.codes .go svg{width:11px;height:11px}
.codes a::before{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--e)}
.codes a:hover::before{transform:scaleX(1)}
.codes a:hover .c{color:var(--accent)}
.codes a:hover .go{opacity:1; transform:none}
/* the banner's own timer, drawn on the divider above each column */
.codes a .pg{position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--accent); z-index:2}
.codes a.live .pg{width:100%; transition:width 5.2s linear}
.codes a.live .c{color:var(--accent)}
.codes.taken a .pg{display:none}
@media (max-width:1000px){.codes{grid-template-columns:repeat(3,1fr)}
  .codes a:nth-child(3){border-right:0}
  .codes a:nth-child(n+4){border-top:1px solid var(--hair)}}
@media (max-width:600px){.codes{grid-template-columns:repeat(2,1fr)}
  .codes a{padding:16px 14px 18px 0}
  .codes a:nth-child(2n){border-right:0}
  .codes a:nth-child(n+3){border-top:1px solid var(--hair)}}
/* no hover on touch, so the Explore line would only reserve dead space */
@media (hover:none),(pointer:coarse){.codes .go{display:none} .codes a{padding-bottom:20px}}

/* ---------- 6b. THE INTERACTIVE BANNER ---------------------------------
   Six frames, one per capability. It advances on its own until you touch it,
   then the capability row drives it. The cursor carries a warm light across
   the picture, which is the one place on a white page where a lighting brand
   can actually demonstrate itself without going dark. */
.banner{position:relative; margin:clamp(36px,4.4vw,64px) auto 0; max-width:1100px;
  aspect-ratio:1500/866; overflow:hidden; background:var(--sand); isolation:isolate}
.banner::after{content:""; position:absolute; inset:0; z-index:5; background:var(--paper);
  transition:transform 1.15s var(--e2)}
.banner.in::after{transform:translateY(-101%)}
.bstack{position:absolute; inset:0; will-change:transform;
  transition:transform .9s var(--e), filter 1.7s var(--e) .3s;
  filter:brightness(.84) saturate(.8)}          /* lights come up on reveal */
.banner.in .bstack{filter:none}
/* THE TORCH.
   Each frame is the same photograph twice. The bottom copy is graded to look
   like the room with the scheme switched off, flat and grey and cool. The top
   copy is the real installed photograph, masked to the beam. So the pointer is
   not brightening a picture, it is lighting the room.
   The mask is a fixed gradient that is moved and resized rather than
   regenerated, which keeps it off the paint path. */
.bframe{position:absolute; inset:0; opacity:0; transform:scale(1.07);
  transition:opacity 1s var(--e), transform 1.7s var(--e2)}
.bframe.on{opacity:1; transform:scale(1)}
/* both layers read the same --s, so the photograph is embedded once per frame
   rather than twice. two <img> tags with the same data URI would double the
   file weight for nothing. */
/* --s is set inline per frame and MUST be an absolute URL. A relative url()
   inside a custom property resolves against this stylesheet, not the page, so
   a relative path would 404. get_template_directory_uri() is always absolute,
   which is why this is safe in the theme. */
.bframe > span{position:absolute; inset:0; display:block;
  background-image:var(--s); background-size:cover; background-position:center}
/* the unlit grade is a judgement call. Too dead and the banner becomes a grey
   slab on a cream page and the whole design goes cold. This sits far enough
   down that the beam clearly restores warmth, colour and detail, while the
   frame still reads as a photograph rather than a fault. */
.bframe .unlit{filter:brightness(.68) saturate(.24) contrast(.90)}
.bframe .lit{
  --bw:2600px; --bh:2600px;              /* opens wide, then closes to a beam */
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,#000 30%,
      rgba(0,0,0,.42) 58%,transparent 86%);
          mask-image:radial-gradient(closest-side,#000 0%,#000 30%,
      rgba(0,0,0,.42) 58%,transparent 86%);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-size:var(--bw) var(--bh);  mask-size:var(--bw) var(--bh);
  -webkit-mask-position:calc(var(--px,50%) - var(--bw)/2) calc(var(--py,50%) - var(--bh)/2);
          mask-position:calc(var(--px,50%) - var(--bw)/2) calc(var(--py,50%) - var(--bh)/2);
  transition:-webkit-mask-size 1.5s var(--e), mask-size 1.5s var(--e);
}
.banner.armed[data-beam="spot"]  .lit{--bw:360px;  --bh:360px}
.banner.armed[data-beam="flood"] .lit{--bw:760px;  --bh:760px}
.banner.armed[data-beam="wash"]  .lit{--bw:1120px; --bh:360px}

/* a little warmth in the pool so it reads as a source, not a hole */
.bglow{position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  opacity:0; transition:opacity .8s ease;
  background:radial-gradient(circle 260px at var(--px,50%) var(--py,50%),
    rgba(255,206,150,.30) 0%, rgba(255,206,150,.07) 46%, transparent 70%)}
.banner.armed .bglow{opacity:1}
/* touch has no pointer, so it gets the installed photograph, whole */
@media (hover:none),(pointer:coarse){
  .bframe .lit{-webkit-mask-image:none; mask-image:none}
  .bframe .unlit{display:none}
  .bglow{display:none}
}

/* one bar along the foot: who it is on the left, what the beam is on the right */
.bbar{position:absolute; z-index:3; inset:auto 0 0 0; color:#FAF9F6;
  padding:clamp(15px,1.9vw,26px); display:flex; align-items:flex-end;
  justify-content:space-between; gap:18px;
  background:linear-gradient(0deg,rgba(20,19,16,.68),rgba(20,19,16,.18) 58%,transparent)}
.bcap{display:flex; align-items:baseline; gap:6px 15px; flex-wrap:wrap; min-width:0;
  transition:opacity .26s ease, transform .26s var(--e)}
.bcap.swap{opacity:0; transform:translateY(5px)}
.bcap .bn{font-size:clamp(14px,1.3vw,18px); letter-spacing:-.01em}
.bcap .bl{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.78}
.bcap .bgo{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px; opacity:.8;
  border-bottom:1px solid rgba(250,249,246,.4); padding-bottom:3px; transition:opacity .3s}
.bcap .bgo svg{width:10px;height:10px; transition:transform .4s var(--e)}
.bcap .bgo:hover{opacity:1}
.bcap .bgo:hover svg{transform:translate(3px,-3px)}

/* beam selector. this is what specifying a luminaire actually is. */
.beam{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.beam button{padding:6px 11px; border-radius:100px; color:rgba(250,249,246,.62);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  transition:color .3s, background-color .3s}
.beam button:hover{color:#FAF9F6}
.beam button[aria-pressed="true"]{color:#171613; background:rgba(250,249,246,.94)}
@media (max-width:640px){.beam{display:none} .bbar{padding:13px}}

/* honest label, and the instruction, in one line */
.bnote{margin:14px auto 0; max-width:1100px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3)}
@media (hover:none),(pointer:coarse){.bnote{display:none}}

.bcursor{position:fixed; z-index:95; left:0; top:0; pointer-events:none;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:11px 17px; border-radius:100px; background:var(--ink); color:var(--paper);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.78);
  transition:opacity .35s ease, transform .45s var(--e)}
.bcursor svg{width:11px;height:11px}
.bcursor.on{opacity:1; transform:translate3d(-50%,-50%,0) scale(1)}
@media (hover:none),(pointer:coarse){.bcursor,.bglow,.bshade{display:none}}
@media (max-width:780px){.banner{aspect-ratio:4/3}}

/* ---------- 7. MARQUEE -------------------------------------------------- */
.mq{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:19px 0; overflow:hidden; margin-top:clamp(56px,7vw,104px)}
.mq-track{display:flex; gap:0; width:max-content; animation:mq 58s linear infinite}
.mq-track span{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); padding:0 26px; white-space:nowrap}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 8. GENERIC SECTION ----------------------------------------- */
.sec{padding:var(--sec) 0}
.sec.sand{background:var(--sand)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  flex-wrap:wrap; margin-bottom:clamp(38px,4.6vw,66px)}
.sec-head .l{display:grid; gap:18px}

/* ---------- 9. REACH + STATS ------------------------------------------- */
.reach{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(30px,4.4vw,76px);
  align-items:start}
.stats{margin-top:clamp(46px,5.4vw,80px); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 22px 4px 0; border-right:1px solid var(--hair)}
.stat:last-child{border-right:0}
.stat .n{font-size:clamp(30px,3.9vw,56px); line-height:1; letter-spacing:-.028em;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:2px}
.stat .n small{font-size:.4em; letter-spacing:0; color:var(--accent)}
.stat .k{margin-top:13px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.7}
@media (max-width:900px){
  .reach{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(n+3){border-top:1px solid var(--hair); margin-top:22px}
}

/* ---------- 10. SELECTED WORK ------------------------------------------ */
/* editorial grid. cards take different spans and offsets so it never reads
   like a product listing. */
.work{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(26px,3.4vw,54px)}
.card{grid-column:span 6; display:grid; gap:0}
.card.a{grid-column:1/8}
.card.b{grid-column:8/13; margin-top:clamp(0px,7vw,104px)}
.card.c{grid-column:1/6}
.card.d{grid-column:6/13; margin-top:clamp(0px,4vw,58px)}
.card.e{grid-column:1/7}
.card.f{grid-column:7/13; margin-top:clamp(0px,5vw,74px)}
.card .fig{aspect-ratio:9/6.4}
.card .fig img{transition:transform 1.6s var(--e2), filter .7s ease}
.card:hover .fig img{transform:scale(1.045)}
.card .meta{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding-top:19px; border-top:1px solid var(--hair); margin-top:19px}
.card .meta .t{display:grid; gap:7px}
.card .idx{font-size:10.5px; letter-spacing:.2em; color:var(--ink-3)}
.card .nm{font-size:clamp(17px,1.55vw,23px); letter-spacing:-.012em; line-height:1.25}
.card .loc{font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3)}
.card .arw{width:34px;height:34px;border:1px solid var(--hair-2); border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  transition:background-color .42s var(--e), border-color .42s var(--e), color .42s var(--e)}
.card .arw svg{width:12px;height:12px; transition:transform .42s var(--e)}
.card:hover .arw{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.card:hover .arw svg{transform:translate(3px,-3px)}
@media (max-width:860px){
  .work{grid-template-columns:1fr; gap:44px}
  .card,.card.a,.card.b,.card.c,.card.d,.card.e,.card.f{grid-column:1/-1; margin-top:0}
}

/* ---------- 11. CAPABILITIES ------------------------------------------- */
/* hairline rows. the row indents on hover and a preview follows the cursor. */
.caps{border-top:1px solid var(--hair)}
.cap{position:relative; display:grid;
  grid-template-columns:60px minmax(0,.95fr) minmax(0,1.05fr) 40px;
  gap:clamp(14px,2.6vw,40px); align-items:center;
  padding:clamp(20px,2.5vw,32px) 0; border-bottom:1px solid var(--hair);
  transition:padding-left .55s var(--e)}
.cap:hover{padding-left:clamp(8px,1.5vw,26px)}
.cap::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--e)}
.cap:hover::after{transform:scaleX(1)}
.cap .no{font-size:10.5px; letter-spacing:.2em; color:var(--ink-3); transition:color .4s}
.cap:hover .no{color:var(--accent)}
.cap .ttl{font-size:clamp(20px,2.5vw,34px); letter-spacing:-.016em; line-height:1.16}
.cap .dsc{font-size:14px; line-height:1.72; color:var(--ink-2); max-width:46ch}
.cap .arw{justify-self:end; opacity:.35; transition:opacity .4s, transform .45s var(--e)}
.cap .arw svg{width:15px;height:15px}
.cap:hover .arw{opacity:1; transform:translateX(5px)}
@media (max-width:980px){
  .cap{grid-template-columns:52px minmax(0,1fr)}
  .cap .dsc{grid-column:2/3; margin-top:9px}
  .cap .arw{display:none}          /* the whole row is the tap target on touch */
}
/* the cursor preview. desktop and fine pointers only. */
#peek{position:fixed; left:0; top:0; z-index:80; width:280px; height:200px;
  pointer-events:none; opacity:0; transform:translate3d(-50%,-50%,0) scale(.86);
  transition:opacity .4s ease, transform .5s var(--e); overflow:hidden;
  box-shadow:0 22px 60px rgba(23,22,19,.18)}
#peek img{width:100%;height:100%;object-fit:cover}
#peek.on{opacity:1; transform:translate3d(-50%,-50%,0) scale(1)}
@media (hover:none),(pointer:coarse),(max-width:980px){#peek{display:none}}

/* ---------- 12. PROCESS (tabs, no pinning) ----------------------------- */
.proc{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(30px,5vw,88px)}
.tabs{display:grid; align-content:start; border-top:1px solid var(--hair)}
.tab{position:relative; display:flex; align-items:baseline; gap:16px; text-align:left;
  padding:16px 0; border-bottom:1px solid var(--hair); color:var(--ink-3);
  transition:color .4s ease}
.tab .tn{font-size:10.5px; letter-spacing:.2em; flex:0 0 auto}
.tab .tt{font-size:clamp(14px,1.15vw,17px); letter-spacing:-.005em}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab .prog{position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent)}
.tab[aria-selected="true"] .prog{width:100%; transition:width 6s linear}
.panel{display:none; gap:22px}
.panel.on{display:grid; animation:pin .7s var(--e)}
@keyframes pin{from{opacity:0; transform:translateY(14px)}to{opacity:1;transform:none}}
.panel .big{font-size:clamp(58px,9vw,132px); line-height:.86; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(23,22,19,.30)}
.panel .body{max-width:56ch}
@media (max-width:860px){.proc{grid-template-columns:1fr}}

/* ---------- 13. QUALITY ------------------------------------------------- */
.qual{display:grid; grid-template-columns:minmax(0,.85fr) 1fr; gap:clamp(30px,5.4vw,96px);
  align-items:center}
.qual .fig{aspect-ratio:86/106}
.qual .r{display:grid; gap:clamp(22px,2.8vw,38px)}
.warranty{display:flex; align-items:flex-start; gap:18px}
.warranty .num{font-size:clamp(78px,10.5vw,158px); line-height:.8; letter-spacing:-.05em}
.warranty .u{display:grid; gap:2px; padding-top:8px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3)}
.specs{display:grid; gap:0; border-top:1px solid var(--hair)}
.specs div{display:grid; grid-template-columns:minmax(0,150px) 1fr; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--hair); align-items:baseline}
.specs dt{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.specs dd{margin:0; font-size:14.5px; color:var(--ink-2)}
@media (max-width:860px){.qual{grid-template-columns:1fr} .qual .fig{aspect-ratio:4/3}}

/* ---------- 14. SECTORS ------------------------------------------------- */
.sectors{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair)}
.sectors a{position:relative; padding:clamp(24px,3vw,40px) 24px clamp(24px,3vw,40px) 0;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  display:grid; gap:11px; align-content:start; transition:padding-left .5s var(--e)}
.sectors a:hover{padding-left:16px}
.sectors a:nth-child(3n){border-right:0}
.sectors .s-n{font-size:clamp(18px,1.9vw,25px); letter-spacing:-.012em}
.sectors .s-c{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.sectors a::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--e)}
.sectors a:hover::after{transform:scaleX(1)}
@media (max-width:760px){.sectors{grid-template-columns:repeat(2,1fr)}
  .sectors a:nth-child(3n){border-right:1px solid var(--hair)}
  .sectors a:nth-child(2n){border-right:0}}

/* ---------- 15. STAY IN TOUCH + FOOTER --------------------------------- */
.touch{display:grid; grid-template-columns:1fr minmax(0,520px); gap:clamp(30px,5vw,86px);
  align-items:end}
.field{display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--hair-2);
  padding-bottom:13px; transition:border-color .4s}
.field:focus-within{border-color:var(--ink)}
.field input{flex:1; min-width:0; border:0; background:none; font:inherit; font-size:15px;
  color:var(--ink); padding:0; outline:none}
.field input::placeholder{color:var(--ink-3)}
.field button{display:inline-flex; align-items:center; gap:8px; font-size:11px;
  letter-spacing:.17em; text-transform:uppercase; white-space:nowrap}
.field button svg{width:12px;height:12px; transition:transform .45s var(--e)}
.field button:hover svg{transform:translate(4px,-4px)}
@media (max-width:800px){.touch{grid-template-columns:1fr}}

.ft{border-top:1px solid var(--hair); padding:clamp(56px,6.4vw,92px) 0 30px}
.ft-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(26px,3.4vw,54px);
  padding-bottom:clamp(46px,5.4vw,78px)}
.ft-grid h4{margin:0 0 18px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400}
.ft-grid p{margin:0; font-size:14px; line-height:1.75; color:var(--ink-2)}
.ft-grid ul{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.ft-grid li a{font-size:14px; color:var(--ink-2); transition:color .3s}
.ft-grid li a:hover{color:var(--ink)}
/* display:block matters. an inline span gives the SVG no box and the logo blows
   out of its column on narrow screens. */
.ft-brand{display:block; color:var(--ink); height:26px;
  width:calc(26px*var(--brand-ratio)); max-width:100%; margin-bottom:22px}
.ft-brand svg{width:100%;height:100%;display:block}
.ft-btm{display:flex; align-items:center; justify-content:space-between; gap:22px;
  flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--hair);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr}}

/* ---------- 16. ACCESSIBILITY ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none} .fig::after{display:none} .fig img{transform:none}
  .ln>span{transform:none} #ld{display:none} .mq-track{animation:none}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}