/* ═══════════════════════════════════════════════════════════════════════════
   AL LUBB WOOD & INTERIORS
   1 tokens · 2 reset · 3 primitives · 4 header · 5 hero · 6 about
   7 services · 8 capability · 9 projects · 10 process · 11 cta
   12 contact · 13 footer · 14 motion · 15 responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. font — self-hosted Montserrat (variable 300–600, latin), no third-party request ── */
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("fonts/montserrat-latin.woff2") format("woff2");
}

/* ── 1. tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme: dark;

  /* surface */
  --bg:      #121212;
  --bg-alt:  #2a2a2a;
  --panel:   #343434;
  --panel-2: #3e3e3e;
  --ftr:     #1c1c1c;

  /* ink */
  --hi:      #ffffff;   /* headings */
  --tx:      #d9d9d9;   /* body */
  --dim:     #a6a6a6;   /* meta, labels */

  /* brass */
  --br:      #c9a55c;
  --br-lt:   #e3c47f;
  --on-br:   #121212;

  /* lines */
  --ln:      rgba(255,255,255,.12);
  --ln-2:    rgba(255,255,255,.07);

  /* type */
  --dsp: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ui:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* rhythm */
  --gut: clamp(20px, 4vw, 64px);
  --max: 1400px;
  --sec: clamp(72px, 9vw, 150px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);
}

/* ── 2. reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--ui); font-weight:300; font-size:16px; line-height:1.64;
  font-feature-settings:"kern","liga","calt";
  overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.lock{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
h1,h2,h3,h4{ margin:0; font-weight:500; color:var(--hi); }
table{ border-collapse:collapse; width:100%; }
::selection{ background:rgba(201,165,92,.30); color:#fff; }
:focus-visible{ outline:1px solid var(--br); outline-offset:3px; }

.skip{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--br); color:var(--on-br); padding:10px 16px; font-size:13px;
  transition:top .25s var(--ease);
}
.skip:focus{ top:16px; }

/* ── 3. primitives ─────────────────────────────────────────────────────── */
.sec{ padding:var(--sec) 0; border-top:1px solid var(--ln-2); }
.sec--alt{ background:var(--bg-alt); }

/* charcoal sections: faint diagonal fret pattern that fades out across the section */
.sec--alt, .cta{ position:relative; isolation:isolate; }
.sec--alt::before, .cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cdefs%3E%3Cpattern id='k' width='10' height='10' patternUnits='userSpaceOnUse' patternTransform='rotate(45) scale(2.828427)'%3E%3Cpath d='M0 9.5H10M9 9.5V1H2V7H7V3H4.5V5' fill='none' stroke='%23121212' stroke-width='.7' stroke-linecap='square'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='40' height='40' fill='url(%23k)'/%3E%3C/svg%3E") 0 0 / 60px 60px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 100% 0%, #000 0%, rgba(0,0,0,.35) 40%, transparent 72%);
          mask-image:radial-gradient(ellipse 80% 100% at 100% 0%, #000 0%, rgba(0,0,0,.35) 40%, transparent 72%);
}
.projects::before{
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 0% 100%, #000 0%, rgba(0,0,0,.35) 40%, transparent 72%);
          mask-image:radial-gradient(ellipse 80% 100% at 0% 100%, #000 0%, rgba(0,0,0,.35) 40%, transparent 72%);
}
.cta::before{
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 60% 100% at 50% 50%, transparent 20%, #000 100%);
          mask-image:radial-gradient(ellipse 60% 100% at 50% 50%, transparent 20%, #000 100%);
}

.grid{
  width:min(100% - calc(var(--gut) * 2), var(--max));
  margin-inline:auto;
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(24px,3vw,40px);
}
.sec__aside{ grid-column:1 / 4; }
.sec__body{ grid-column:4 / 13; }

/* small caps label with a leading rule */
.rule{
  display:flex; align-items:center; gap:12px; margin:0;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--br);
}
.rule i{ display:block; width:clamp(18px,3vw,34px); height:1px; background:var(--br); opacity:.55; }
.rule--d{ position:sticky; top:120px; color:var(--br); }
.rule--d i{ background:var(--br); }
.rule--c{ justify-content:center; }

/* display type */
.dsp{
  font-family:var(--dsp); font-weight:500;
  font-size:clamp(29px,3.8vw,54px); line-height:1.18; letter-spacing:-.02em;
  color:var(--hi); margin:0 0 clamp(26px,3vw,44px); text-wrap:balance;
}
.dsp--sm{ font-size:clamp(25px,3vw,40px); }
.dsp em{ font-style:normal; font-weight:300; color:var(--br-lt); }

.lead{ font-size:clamp(17px,1.35vw,20px); line-height:1.62; color:var(--hi); font-weight:300; }
.sec__note{ margin-top:22px; font-size:14px; color:var(--dim); max-width:32ch; }

/* buttons + text links */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; background:var(--br); color:var(--on-br);
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{ background:var(--br-lt); }
.btn--lg{ padding:19px 40px; }
.btn--full{ width:100%; }

.lnk{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--hi);
  padding-bottom:5px; position:relative;
}
.lnk i{ width:16px; height:1px; background:currentColor; transition:width .4s var(--ease); }
.lnk::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.25; transform-origin:right; transform:scaleX(1);
  transition:transform .45s var(--ease);
}
.lnk:hover{ color:var(--br-lt); }
.lnk:hover i{ width:28px; }
.lnk:hover::after{ transform:scaleX(0); }

/* ── 4. header ─────────────────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90;
  background:var(--bg); border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.hdr.is-on{ border-bottom-color:var(--ln-2); }
.hdr__in{
  width:min(100% - calc(var(--gut) * 2), var(--max)); margin-inline:auto;
  height:clamp(72px,7vw,96px); display:flex; align-items:center; gap:28px;
  transition:height .4s var(--ease);
}
.hdr.is-on .hdr__in{ height:72px; }
.hdr__logo img{ height:clamp(50px,4.8vw,64px); width:auto; mix-blend-mode:screen; }

.nav{ display:flex; gap:clamp(16px,2.2vw,34px); margin-inline:auto; }
.nav a{
  position:relative; display:flex; align-items:baseline; gap:7px;
  font-size:13px; letter-spacing:.04em; color:var(--tx);
  padding:10px 0; transition:color .3s;
}
.nav a span{ font-size:10px; letter-spacing:.1em; color:var(--dim); transition:color .3s; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:var(--br);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--hi); }
.nav a:hover span{ color:var(--br); }
.nav a:hover::after{ transform:scaleX(1); }

.hdr__end{ display:flex; align-items:center; gap:18px; margin-left:auto; }

.burger{ display:none; width:44px; height:44px; padding:14px 10px; margin-right:-10px; }
.burger span{ display:block; height:1px; background:var(--hi); transition:transform .4s var(--ease), opacity .3s; }
.burger span:first-child{ margin-bottom:6px; }
.burger.is-on span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger.is-on span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.drawer{
  position:fixed; z-index:89; inset:0 0 auto; padding:calc(clamp(72px,7vw,96px) + 20px) var(--gut) 34px;
  background:var(--bg); border-bottom:1px solid var(--ln);
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--slow);
}
.drawer.is-on{ clip-path:inset(0 0 0 0); }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  display:flex; align-items:baseline; gap:14px; padding:16px 0;
  border-bottom:1px solid var(--ln-2);
  font-family:var(--dsp); font-weight:500; font-size:23px; letter-spacing:-.01em; color:var(--hi);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.drawer nav a span{ font-family:var(--ui); font-size:10px; letter-spacing:.2em; color:var(--br); }
.drawer.is-on nav a{ opacity:1; transform:none; }
.drawer.is-on nav a:nth-child(1){ transition-delay:.06s }
.drawer.is-on nav a:nth-child(2){ transition-delay:.11s }
.drawer.is-on nav a:nth-child(3){ transition-delay:.16s }
.drawer.is-on nav a:nth-child(4){ transition-delay:.21s }
.drawer.is-on nav a:nth-child(5){ transition-delay:.26s }
.drawer.is-on nav a:nth-child(6){ transition-delay:.31s }
.drawer__end{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:26px; font-size:14px; color:var(--dim); }
.drawer__end a:hover{ color:var(--br); }

/* ── 5. hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; isolation:isolate;
  padding:calc(clamp(72px,7vw,96px) + 40px) 0 0;
}
.hero__plate{ position:absolute; inset:0; background:#121212; }
.hero__vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* one shared grade so the separate clips read as a single film */
  filter:brightness(1.08) contrast(1.06) saturate(.88);
  opacity:0; transition:opacity 2.2s ease-in-out;
}
.hero__vid.is-live{ opacity:1; }
.hero__vid.is-top{ z-index:1; }
/* one slow drift across the whole reel — it does not restart per clip */
.hero__reel{ position:absolute; inset:0; animation:drift 48s ease-in-out infinite alternate; will-change:transform; }
@keyframes drift{ from{ transform:scale(1.02) } to{ transform:scale(1.09) translate3d(-1%,0,0) } }
.hero__wash{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,18,18,.62) 0%, rgba(18,18,18,.05) 30%, rgba(18,18,18,.48) 72%, var(--bg) 100%),
    linear-gradient(95deg, rgba(18,18,18,.80) 0%, rgba(18,18,18,.42) 34%, rgba(18,18,18,0) 66%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__in{
  position:relative; width:min(100% - calc(var(--gut) * 2), var(--max));
  margin:auto auto 0; padding-bottom:clamp(30px,4vw,52px);
}
.hero__in .rule{ color:var(--br-lt); margin-bottom:clamp(18px,2vw,26px); }
.hero__in .rule i{ background:var(--br-lt); }

.hero__h{
  text-shadow:0 2px 40px rgba(6,5,4,.55);
  font-family:var(--dsp); font-weight:500;
  font-size:clamp(33px,5.9vw,84px); line-height:1.12; letter-spacing:-.025em;
  color:#fff; margin:0 0 clamp(26px,3vw,44px);
}
.hero__h em{ font-style:normal; font-weight:300; color:var(--br-lt); }
/* headline: plays once on load, then stays put over the whole reel */
.msk{ display:block; padding-bottom:.04em; }
.msk > span{ display:block; }
.js .msk > span{ opacity:0; transform:translateY(14px); filter:blur(6px); }
body.ready .msk > span{ animation:rise 1.1s var(--slow) forwards; }
body.ready .msk:nth-child(1) > span{ animation-delay:0s }
body.ready .msk:nth-child(2) > span{ animation-delay:.12s }
body.ready .msk:nth-child(3) > span{ animation-delay:.24s }
@keyframes rise{ to{ opacity:1; transform:none; filter:blur(0) } }

.hero__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(24px,4vw,60px); flex-wrap:wrap; }
.hero__sub{ max-width:46ch; font-size:clamp(15px,1.15vw,17px); color:rgba(255,255,255,.94); margin:0; }
.hero__act{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); }
.lnk--lt{ color:#fff; }

.hero__meta{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  /* its own scrim: the strip sits over the brightest part of the footage */
  background:linear-gradient(180deg, rgba(18,18,18,.55), rgba(18,18,18,.94) 55%, var(--bg));
  padding-inline:var(--gut);
}
.hero__meta::before{
  content:""; position:absolute; inset:0 var(--gut) auto; height:1px; background:var(--ln);
}
.hero__meta li{ padding:20px 22px 26px 0; }
.hero__meta b{ display:block; font-size:13px; font-weight:500; color:var(--hi); letter-spacing:.01em; }
.hero__meta span{ font-size:12.5px; color:var(--dim); }

/* ── 6. about ──────────────────────────────────────────────────────────── */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px); }
.cols .lead{ margin:0; }

.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,32px);
  margin-top:clamp(44px,5vw,76px); padding-top:clamp(26px,3vw,38px); border-top:1px solid var(--ln);
}
.facts dt{
  font-family:var(--dsp); font-weight:500; font-size:clamp(34px,3.9vw,52px); line-height:1.1; letter-spacing:-.02em; color:var(--br);
  font-variant-numeric:tabular-nums;
}
.facts dd{ margin:10px 0 0; font-size:12.5px; letter-spacing:.06em; color:var(--dim); }

/* ── 7. services index ─────────────────────────────────────────────────── */
/* services: horizontal card slider */
.svc__head{
  width:min(100% - calc(var(--gut) * 2), var(--max)); margin:0 auto clamp(30px,4vw,54px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
}
.svc__head .dsp{ margin:18px 0 14px; }
.svc__note{ margin:0; max-width:52ch; color:var(--tx); }
.svc__nav{ display:flex; align-items:center; gap:10px; }
.svc__count{ margin-right:12px; font-size:12px; letter-spacing:.14em; color:var(--dim); }
.svc__count b{ font-weight:500; color:var(--hi); }
/* big round side buttons over the slider, sized for thumbs */
/* slider: cards in the middle, round buttons in the side margins */
.svc__wrap{
  --side:clamp(64px, 6vw, 92px);   /* room for the buttons */
  position:relative; width:min(100%, calc(var(--max) + var(--side) * 2)); margin-inline:auto;
  padding-inline:var(--side);
}
.svc__btn{
  position:absolute; z-index:3; top:50%; translate:0 -50%;
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:#1b1b1b; border:1px solid rgba(255,255,255,.16); color:var(--hi);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:background .3s, color .3s, border-color .3s, opacity .35s, scale .25s var(--ease);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.svc__btn--prev{ left:calc((var(--side) - 56px) / 2); }
.svc__btn--next{ right:calc((var(--side) - 56px) / 2); }
.svc__btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svc__btn:hover:not(:disabled){ background:var(--br); border-color:var(--br); color:var(--on-br); }
.svc__btn:active:not(:disabled){ scale:.92; }
.svc__btn:disabled{ opacity:.25; cursor:default; }

.svc{
  --gap:clamp(16px,2vw,28px);
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - var(--gap) * 2) / 3);   /* 3 cards in view */
  gap:var(--gap); padding:10px 0 22px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; cursor:grab;
}
.svc::-webkit-scrollbar{ display:none; }
.svc.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.svc.is-drag a{ pointer-events:none; }

.card{ scroll-snap-align:start; }
.card a{
  display:flex; flex-direction:column; height:100%;
  background:#1b1b1b; border:1px solid var(--ln); border-radius:14px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.card__img{ margin:0; aspect-ratio:4 / 3; overflow:hidden; background:var(--panel); }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--slow); user-select:none; }
.card__body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:22px 22px 24px; }
.card__top{ display:flex; align-items:center; justify-content:space-between; }
.card__tag{ padding:5px 11px; border-radius:6px; background:var(--panel-2); font-size:11.5px; letter-spacing:.04em; color:var(--tx); }
.card__n{ font-size:12px; letter-spacing:.14em; color:var(--br); }
.card h3{ margin-top:6px; font-size:clamp(19px,1.6vw,22px); line-height:1.3; letter-spacing:-.01em; transition:color .35s; }
.card p{ flex:1; margin:0; font-size:14px; line-height:1.62; color:var(--dim); }
.card__cta{ display:inline-flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--br); }
.card__cta i{ width:16px; height:1px; background:currentColor; transition:width .4s var(--ease); }
.card a:hover{ transform:translateY(-6px); border-color:rgba(201,165,92,.45); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.card a:hover .card__img img{ transform:scale(1.06); }
.card a:hover h3{ color:var(--br-lt); }
.card a:hover .card__cta i{ width:28px; }

.svc__bar{
  position:relative; overflow:hidden; height:2px; background:var(--ln);
  width:min(100% - clamp(64px, 6vw, 92px) * 2, var(--max)); margin:clamp(14px,2vw,26px) auto 0;
}
.svc__bar i{ position:absolute; inset:0 auto 0 0; width:30%; background:var(--br); transition:transform .25s linear; }

/* ── 8. capability accordion ───────────────────────────────────────────── */
.acc{ border-top:1px solid var(--ln); }
.acc__i{ border-bottom:1px solid var(--ln); }
.acc__b{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(20px,2.2vw,28px) 0; text-align:left;
  font-family:var(--dsp); font-weight:500; font-size:clamp(18px,1.8vw,24px); line-height:1.35; letter-spacing:-.015em; color:var(--hi);
  transition:color .3s;
}
.acc__b:hover{ color:var(--br-lt); }
.acc__b i{ position:relative; width:18px; height:18px; flex:none; }
.acc__b i::before, .acc__b i::after{
  content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:var(--br);
  transition:transform .45s var(--slow);
}
.acc__b i::after{ transform:rotate(90deg); }
.acc__i.is-open .acc__b i::after{ transform:rotate(0); }
.acc__p{ overflow:hidden; transition:height .5s var(--slow); }
.js .acc__p{ height:0; }
.acc__c{ padding:0 0 clamp(24px,3vw,34px); }

/* even grid so every row lines up on both edges */
.chips{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.chips li{
  display:flex; align-items:center; min-height:48px;
  font-size:13px; line-height:1.4; color:var(--tx); padding:10px 16px;
  border:1px solid var(--ln); background:var(--panel);
  transition:border-color .3s, color .3s, background .3s;
}
.chips li:hover{ border-color:var(--br); color:var(--br-lt); background:var(--panel-2); }

/* ── 9. projects table ─────────────────────────────────────────────────── */
.tbl{ font-size:15px; }
.tbl th{
  text-align:left; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); padding:0 18px 14px 0; border-bottom:1px solid var(--ln);
}
.tbl td{
  padding:clamp(16px,1.8vw,22px) 18px clamp(16px,1.8vw,22px) 0;
  border-bottom:1px solid var(--ln-2); color:var(--dim); vertical-align:baseline;
  transition:color .35s;
}
.tbl td b{
  font-family:var(--dsp); font-weight:500; font-size:clamp(16px,1.45vw,20px); line-height:1.3; letter-spacing:-.01em; color:var(--hi);
  transition:color .35s;
}
.tbl td:last-child{ text-align:right; padding-right:0; font-variant-numeric:tabular-nums; }
.tbl tbody tr{ transition:background .35s var(--ease); }
.tbl tbody tr:hover{ background:var(--panel); }
.tbl tbody tr:hover td{ color:var(--tx); }
.tbl tbody tr:hover td b{ color:var(--br-lt); }
.projects .lnk{ margin-top:clamp(28px,3vw,40px); }

/* ── 10. process ───────────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,36px); }
.steps li{ padding-top:22px; border-top:1px solid var(--ln); }
.steps__n{ font-family:var(--dsp); font-weight:500; font-size:13px; letter-spacing:.14em; color:var(--br); }
.steps h3{ font-family:var(--dsp); font-weight:500; font-size:clamp(17px,1.5vw,20px); line-height:1.35; letter-spacing:-.01em; margin:10px 0 10px; }
.steps p{ margin:0; font-size:14px; color:var(--dim); }

.specs{ margin-top:clamp(50px,6vw,86px); }
.specs__h{
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
  padding-bottom:16px; border-bottom:1px solid var(--ln);
}
.specs dl > div{
  display:grid; grid-template-columns:minmax(150px,1fr) 3fr; gap:clamp(16px,3vw,44px);
  padding:20px 0; border-bottom:1px solid var(--ln-2);
}
.specs dt{ font-size:14px; color:var(--hi); }
.specs dd{ font-size:14px; color:var(--dim); }

/* ── 11. cta ───────────────────────────────────────────────────────────── */
.cta{
  padding:clamp(70px,9vw,130px) 0; text-align:center;
  border-top:1px solid var(--ln-2);
  background:var(--bg-alt);
}
.cta__in{ width:min(100% - calc(var(--gut) * 2), 900px); margin-inline:auto; }
.cta .dsp{ margin-top:22px; }

/* ── 12. contact ───────────────────────────────────────────────────────── */
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; }
.det{ margin-top:clamp(30px,3.4vw,46px); border-top:1px solid var(--ln); }
.det > div{ display:grid; grid-template-columns:minmax(120px,.7fr) 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--ln-2); }
.det dt{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.det dd{ margin:0; min-width:0; font-size:15px; color:var(--hi); overflow-wrap:anywhere; }
.det a:hover{ color:var(--br-lt); }

.frm{ display:grid; gap:clamp(18px,2vw,24px); }
.frm__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,24px); }
.fld{ display:grid; gap:8px; }
.fld label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.fld label span{ letter-spacing:0; text-transform:none; color:#8c8c8c; }
.fld input, .fld select, .fld textarea{
  font-family:inherit; font-size:15px; font-weight:300; color:var(--hi);
  background:transparent; border:0; border-bottom:1px solid var(--ln);
  padding:10px 0; outline:none; resize:vertical; border-radius:0;
  transition:border-color .35s var(--ease);
}
.fld input::placeholder, .fld textarea::placeholder{ color:#7a7a7a; }
.fld input:focus, .fld select:focus, .fld textarea:focus{ border-bottom-color:var(--br); }
.fld select option{ background:var(--panel); }
.fld .bad{ border-bottom-color:#b8563d; }
.frm__note{ margin:0; font-size:12.5px; color:var(--dim); }
.frm__note a{ color:var(--br); }
.frm__note.bad{ color:#c4674c; }

/* ── 13. footer ────────────────────────────────────────────────────────── */
.ftr{ background:#ffffff; border-top:1px solid rgba(0,0,0,.1); padding:clamp(56px,6vw,90px) 0 22px; }
.ftr__top, .ftr__cols, .ftr__base{
  width:min(100% - calc(var(--gut) * 2), var(--max)); margin-inline:auto;
}
.ftr__top{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;
  padding-bottom:clamp(34px,4vw,54px); border-bottom:1px solid rgba(0,0,0,.1);
}
.ftr__name{ margin:0; font-family:var(--dsp); font-weight:500; font-size:clamp(24px,2.9vw,38px); letter-spacing:-.02em; color:#000; line-height:1.2; }
.ftr__name em{ font-style:normal; font-weight:300; color:var(--br); }
.ftr__blurb{ margin:0; max-width:44ch; font-size:15px; font-weight:500; color:#000; }

.ftr__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px); padding:clamp(34px,4vw,54px) 0; }
.ftr__h{ font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--br); margin-bottom:16px; }
.ftr__cols a, .ftr__cols span{ display:block; font-size:15px; font-weight:500; color:#000; padding:5px 0; transition:color .3s, transform .3s var(--ease); }
.ftr__cols a:hover{ color:var(--br); transform:translateX(3px); }

.ftr__base{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid rgba(0,0,0,.1); font-size:13.5px; font-weight:500; color:#000;
}
.ftr__base a{ display:inline-flex; align-items:center; gap:9px; transition:color .3s; }
.ftr__base a i{ width:14px; height:1px; background:currentColor; }
.ftr__base a:hover{ color:var(--br); }

.wa{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:52px; height:52px; display:grid; place-items:center;
  background:#25d366; color:#fff; border-radius:50%;   /* WhatsApp brand green */
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .3s;
}
.wa.is-on{ opacity:1; transform:none; pointer-events:auto; }
.wa.is-on.is-away{ opacity:0; pointer-events:none; }   /* stays out of the way while the form is being filled in */
.wa:hover{ background:#1ebe5b; transform:scale(1.06); }
.wa svg{ width:26px; height:26px; fill:currentColor; }

/* ── 14. motion ────────────────────────────────────────────────────────── */
.js .rv{ opacity:0; transform:translateY(16px); }
.js .rv.in{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }

/* ── 15. responsive ────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .chips{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .svc{ grid-auto-columns:calc((100% - var(--gap)) / 2); }
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr__end .lnk{ display:none; }
  .sec__aside{ grid-column:1 / 13; margin-bottom:8px; }
  .sec__body{ grid-column:1 / 13; }
  .rule--d{ position:static; }
  .sec__note{ max-width:56ch; }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .facts{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .hero__meta{ grid-template-columns:repeat(2,1fr); }
  .hero__meta li{ padding-right:12px; }
  .contact__grid{ grid-template-columns:1fr; }
  .ftr__cols{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .chips{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .chips li{ padding:10px 12px; font-size:12.5px; }
  .chips li:last-child:nth-child(odd){ grid-column:1 / -1; }
  .cols{ grid-template-columns:1fr; }
  .svc{ grid-auto-columns:100%; }
  /* slide effect: cards shrink + fade as they leave the centre, photo drifts for depth (driven by --d/--a from script.js) */
  .card a{
    transform:translateY(calc(var(--a, 0) * 14px)) scale(calc(1 - var(--a, 0) * .1));
    opacity:calc(1 - var(--a, 0) * .55);
    transition:border-color .4s;
    will-change:transform, opacity;
  }
  .card__img img{ transform:translateX(calc(var(--d, 0) * -16%)) scale(1.22); transition:none; }
  .card__body{ transform:translateX(calc(var(--d, 0) * 24px)); }
  .svc__wrap{ --side:54px; }
  .svc__btn{ width:42px; height:42px; }
  .svc__btn--prev{ left:6px; }
  .svc__btn--next{ right:6px; }
  .svc__btn svg{ width:18px; height:18px; }
  .svc__bar{ width:calc(100% - 108px); }
  .tbl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tbl tr{ display:grid; grid-template-columns:1fr auto; gap:2px 14px; padding:16px 0; border-bottom:1px solid var(--ln-2); }
  .tbl td{ padding:0; border:0; }
  .tbl td:first-child{ grid-column:1 / 2; }
  .tbl td:nth-child(2){ grid-column:1 / 2; font-size:13.5px; }
  .tbl td:nth-child(3){ grid-column:1 / 2; font-size:13.5px; }
  .tbl td:last-child{ grid-row:1; grid-column:2; }
  .frm__row{ grid-template-columns:1fr; }
  .fld input, .fld select, .fld textarea{ font-size:16px; }
  .ftr__cols a, .ftr__cols span{ padding:9px 0; }
  .ftr__base{ padding-right:64px; }
  .drawer__end a{ padding:8px 0; }
  .lnk{ padding-top:10px; padding-bottom:10px; }
  .ftr__base a{ padding:12px 0; }
  .specs dl > div{ grid-template-columns:1fr; gap:6px; }
  .ftr__cols{ grid-template-columns:1fr; }
  .ftr__top{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px){
  .steps{ grid-template-columns:1fr; }
  .hero__meta{ grid-template-columns:1fr; }
  .hero__meta li{ padding:14px 0; border-bottom:1px solid var(--ln-2); }
  .hero__act{ flex-direction:column; align-items:flex-start; gap:18px; width:100%; }
  .btn{ width:100%; }
  .det > div{ grid-template-columns:1fr; gap:4px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; }
  .js .rv{ opacity:1; transform:none; }
  .js .msk > span{ transform:none; opacity:1; filter:none; }
  .hero__reel{ animation:none; }
  .hero__vid{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS PAGE  (projects.html)
   ═══════════════════════════════════════════════════════════════════════════ */


/* page head */
.phead{ padding:calc(clamp(72px,7vw,96px) + clamp(52px,7vw,104px)) 0 clamp(40px,5vw,70px); }
.phead__in{ width:min(100% - calc(var(--gut) * 2), var(--max)); margin-inline:auto; }
.phead .rule{ margin-bottom:clamp(20px,2.4vw,30px); }
.phead .rule a:hover{ color:var(--br); }
.phead .lead{ max-width:62ch; }

/* filter bar */
.gal{ padding:0 0 clamp(60px,8vw,120px); }
.gal__bar{
  position:sticky; top:72px; z-index:40;
  width:min(100% - calc(var(--gut) * 2), var(--max)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:16px 0; margin-bottom:clamp(30px,4vw,54px);
  background:var(--bg); border-top:1px solid var(--ln); border-bottom:1px solid var(--ln);
}
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.fchip{
  padding:8px 16px; border:1px solid var(--ln); background:transparent;
  font-size:12.5px; letter-spacing:.04em; color:var(--tx);
  transition:border-color .3s, color .3s, background .3s;
}
.fchip:hover{ border-color:var(--br); color:var(--br-lt); }
.fchip.is-on{ background:var(--br); border-color:var(--br); color:var(--on-br); }
.filters__count{ margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

/* project entry */
.list{ width:min(100% - calc(var(--gut) * 2), var(--max)); margin-inline:auto; }
.prj{ padding:clamp(34px,4vw,56px) 0; border-bottom:1px solid var(--ln-2); scroll-margin-top:var(--scroll-off,170px); }
.prj:first-child{ padding-top:0; }
.prj.is-target .prj__n{ color:var(--br); }
.prj__head{
  display:grid; grid-template-columns:56px minmax(240px,1fr) 1.25fr;
  gap:clamp(16px,2.5vw,40px); align-items:start; margin-bottom:clamp(24px,3vw,38px);
}
.prj__n{ font-size:12px; letter-spacing:.14em; color:var(--dim); padding-top:10px; }
.prj h2{ font-family:var(--dsp); font-weight:500; font-size:clamp(21px,2.2vw,30px); line-height:1.25; letter-spacing:-.02em; }
.prj__meta{ margin:10px 0 0; font-size:12.5px; letter-spacing:.06em; color:var(--br); }
.prj__sum{ margin:0; font-size:15px; color:var(--dim); max-width:60ch; }

/* photographs */
.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.2vw,16px); }
.shot{
  position:relative; display:block; padding:0; overflow:hidden; background:var(--panel);
  border:1px solid var(--ln-2); aspect-ratio:4/3;
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--slow), opacity .4s; }
.shot:hover img{ transform:scale(1.04); }
.shot__cap{
  position:absolute; inset:auto 0 0; padding:26px 14px 12px; text-align:left;
  font-size:12px; color:#f4efe7;
  background:linear-gradient(180deg, transparent, rgba(8,7,6,.85));
  opacity:0; transition:opacity .4s var(--ease);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap{ opacity:1; }

/* frames held for photographs not yet supplied */
.shot--wait{
  display:grid; place-items:center; cursor:default;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px),
    var(--panel);
  border:1px solid var(--ln-2);
}
.shot--wait .shot__mark{
  position:absolute; inset:12px; border:1px solid var(--ln-2); pointer-events:none;
}
.shot--wait .shot__mark::before, .shot--wait .shot__mark::after{
  content:""; position:absolute; width:14px; height:14px; border:1px solid var(--br); opacity:.5;
}
.shot--wait .shot__mark::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.shot--wait .shot__mark::after{ right:-1px; bottom:-1px; border-width:0 1px 1px 0; }
.shot__wait{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.shots__note{ margin:16px 0 0; font-size:13px; color:var(--dim); }
.shots__note a{ color:var(--br); border-bottom:1px solid rgba(201,165,92,.35); }
.shots__note a:hover{ color:var(--br-lt); }

.gal__empty{
  width:min(100% - calc(var(--gut) * 2), var(--max)); margin-inline:auto;
  padding:40px 0; font-size:14px; color:var(--dim);
}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:clamp(20px,5vw,60px);
  background:rgba(6,6,5,.94); backdrop-filter:blur(6px);
  animation:lbIn .3s var(--ease);
}
.lb[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }
.lb__fig{ margin:0; max-width:min(1200px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; }
.lb__fig img{ max-width:100%; max-height:78vh; object-fit:contain; margin-inline:auto; }
.lb__fig figcaption{ font-size:13px; color:var(--tx); text-align:center; }
.lb__x{
  position:absolute; top:18px; right:22px; width:44px; height:44px;
  font-size:30px; line-height:1; color:var(--tx); transition:color .3s;
}
.lb__x:hover{ color:var(--br-lt); }
.lb__nav{
  position:absolute; top:50%; width:52px; height:52px; transform:translateY(-50%);
  border:1px solid var(--ln); color:var(--tx); transition:border-color .3s, color .3s;
}
.lb__nav::before{
  content:""; position:absolute; top:50%; left:50%; width:10px; height:10px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
}
.lb__nav--p{ left:clamp(10px,2vw,28px); }
.lb__nav--p::before{ transform:translate(-30%,-50%) rotate(-135deg); }
.lb__nav--n{ right:clamp(10px,2vw,28px); }
.lb__nav--n::before{ transform:translate(-70%,-50%) rotate(45deg); }
.lb__nav:hover{ border-color:var(--br); color:var(--br-lt); }

@media (max-width:900px){
  .prj__head{ grid-template-columns:40px 1fr; }
  .prj__sum{ grid-column:2 / 3; }
  .shots{ grid-template-columns:repeat(2,1fr); }
  .gal__bar{ top:72px; }
}
@media (max-width:560px){
  .shots{ grid-template-columns:1fr; }
  .prj__none{ flex-direction:column; align-items:flex-start; }
  .lb__nav{ width:42px; height:42px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT MANAGER  (admin.html)
   ═══════════════════════════════════════════════════════════════════════════ */
.adminbody{ background:var(--bg); }

/* lock screen */
.lock{ min-height:100svh; display:grid; place-items:center; padding:var(--gut); }
.lock[hidden]{ display:none; }
.lock__box{
  width:min(100%, 400px); display:grid; gap:18px;
  padding:clamp(28px,4vw,44px); border:1px solid var(--ln); background:var(--panel);
}
.lock__logo{ height:44px; width:auto; mix-blend-mode:screen; margin-bottom:6px; }
.lock__box h1{ font-family:var(--dsp); font-weight:500; font-size:25px; letter-spacing:-.015em; line-height:1.25; }
.lock__sub{ margin:-8px 0 4px; font-size:14px; color:var(--dim); }
.lock__err{ margin:0; font-size:13px; color:#c4674c; }

/* shell */
.adm[hidden]{ display:none; }
.adm__bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:16px var(--gut); background:var(--bg); border-bottom:1px solid var(--ln);
}
.adm__brand{ display:flex; align-items:center; gap:14px; }
.adm__brand img{ height:38px; width:auto; mix-blend-mode:screen; }
.adm__brand span{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.adm__acts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.adm__acts .btn{ padding:12px 22px; }

.adm__warn{
  margin:0; padding:16px var(--gut); font-size:13px; line-height:1.7; color:var(--dim);
  background:var(--bg-alt); border-bottom:1px solid var(--ln-2);
}
.adm__warn b{ color:var(--br); font-weight:500; }

.adm__main{ padding:clamp(28px,4vw,52px) var(--gut) 90px; max-width:1100px; }
.adm__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.adm__head .dsp{ margin:0; }
.adm__list{ display:grid; gap:20px; }

/* project card */
.ecard{ display:grid; gap:18px; padding:clamp(20px,2.4vw,30px); border:1px solid var(--ln); background:var(--panel); }
.ecard__top{ display:flex; align-items:center; gap:16px; }
.ecard__n{ font-size:12px; letter-spacing:.14em; color:var(--dim); }
.ecard__title{
  flex:1; font-family:var(--dsp); font-weight:500; font-size:clamp(18px,1.8vw,23px); letter-spacing:-.015em; color:var(--hi);
  background:transparent; border:0; border-bottom:1px solid var(--ln); padding:8px 0; outline:none;
  transition:border-color .3s;
}
.ecard__title:focus{ border-bottom-color:var(--br); }
.ecard__del{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); transition:color .3s; }
.ecard__del:hover{ color:#c4674c; }
.ecard__row{ display:grid; grid-template-columns:1.2fr 1.2fr .6fr; gap:16px; }
.ecard__lab{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.ecard__lab span{ letter-spacing:0; text-transform:none; opacity:.7; margin-left:8px; }
.ecard__shots{ display:grid; gap:12px; }

/* thumbnails */
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.thumb{ position:relative; margin:0; border:1px solid var(--ln-2); background:var(--bg-alt); }
.thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.thumb__cap{
  width:100%; font-size:12px; color:var(--tx); background:transparent;
  border:0; border-top:1px solid var(--ln-2); padding:9px 10px; outline:none;
}
.thumb__cap:focus{ border-top-color:var(--br); }
.thumb__x{
  position:absolute; top:6px; right:6px; width:26px; height:26px; font-size:18px; line-height:1;
  background:rgba(8,7,6,.78); color:var(--tx); border:1px solid var(--ln-2); transition:color .3s, border-color .3s;
}
.thumb__x:hover{ color:#c4674c; border-color:#c4674c; }
.thumb__tag{
  position:absolute; top:6px; left:6px; padding:3px 8px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; background:var(--br); color:var(--on-br);
}
.thumb--add{
  display:grid; place-items:center; min-height:130px; cursor:pointer; text-align:center;
  border-style:dashed; color:var(--dim); font-size:13px; transition:border-color .3s, color .3s;
}
.thumb--add:hover{ border-color:var(--br); color:var(--br-lt); }

/* publish dialog */
.pub{
  position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:var(--gut);
  background:rgba(6,6,5,.92); backdrop-filter:blur(6px);
}
.pub[hidden]{ display:none; }
.pub__box{
  position:relative; width:min(100%, 640px); max-height:88vh; overflow:auto;
  padding:clamp(26px,4vw,44px); background:var(--panel); border:1px solid var(--ln);
}
.pub__box .dsp{ margin-bottom:10px; }
.pub__box > p{ font-size:14px; color:var(--dim); }
.pub__steps{ display:grid; gap:12px; margin:24px 0; }
.pub__steps li{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:18px 20px; border:1px solid var(--ln-2); background:var(--bg-alt);
}
.pub__steps b{ display:block; font-size:14px; font-weight:500; color:var(--hi); }
.pub__steps span{ font-size:13px; color:var(--dim); }
.pub__steps .fchip:disabled{ opacity:.4; cursor:not-allowed; }
.pub__help{ padding:18px 20px; border-left:1px solid var(--br); background:var(--bg-alt); }
.pub__help b{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--br); margin-bottom:8px; }
.pub__help p{ margin:0; font-size:13.5px; color:var(--dim); }
.pub__help code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--tx); }

@media (max-width:700px){
  .ecard__row{ grid-template-columns:1fr; }
  .adm__bar{ flex-direction:column; align-items:flex-start; }
}

/* change-password dialog */
.pw__fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0; }
.pw__msg{ margin:14px 0 0; font-size:13.5px; color:var(--dim); }
.pw__msg.is-bad{ color:#c4674c; }
.pw__msg.is-good{ color:var(--br-lt); }
#pwManual{ margin-top:20px; }
#pwLines{
  margin:0 0 12px; padding:12px 14px; overflow-x:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--tx);
  background:var(--bg); border:1px solid var(--ln-2); white-space:pre;
}
.pub__box .pub__help + .pub__help{ margin-top:14px; }
@media (max-width:560px){ .pw__fields{ grid-template-columns:1fr; } }