/* ============================================================
   ARAB WOOD INDUSTRY — arabwood.ae
   Light editorial system · 8px grid · single file, multi-page

   PALETTE (brand guide — no colour outside this set):
     Pure White        #FFFFFF   page ground
     Deep Forest Green #2F3628   dark bands, primary buttons, headings
     Warm Gold         #E6C48E   the single accent
     Charcoal Black    #1B1914   body text, footer

   TYPE (brand guide):
     Poppins            — primary: UI, body, labels, buttons
     Cormorant Garamond — display: titles and accent text
   ============================================================ */

:root{
  /* brand */
  --white:#FFFFFF;
  --green:#2F3628;
  --gold:#E6C48E;
  --black:#1B1914;

  /* grounds — white, or green/charcoal at set opacities */
  --bg:#FFFFFF;
  --bg-tint:rgba(47,54,40,.035);   /* whisper of green on white  */
  --bg-tint-2:rgba(47,54,40,.06);
  --bg-dark:#2F3628;               /* deep forest green band     */
  --bg-black:#1B1914;              /* charcoal — footer          */

  /* ink on white */
  --ink:#1B1914;
  --ink-70:rgba(27,25,20,.72);
  --ink-50:rgba(27,25,20,.52);
  --ink-30:rgba(27,25,20,.32);
  --gold-ink:#8A6A34;              /* gold, darkened only where it must read as text on white */

  /* ink on green */
  --on-dark:#FFFFFF;
  --on-dark-70:rgba(255,255,255,.72);
  --on-dark-50:rgba(255,255,255,.5);

  /* hairlines + elevation */
  --line:rgba(27,25,20,.12);
  --line-soft:rgba(27,25,20,.07);
  --line-gold:rgba(230,196,142,.55);
  --line-dark:rgba(255,255,255,.14);
  --sh-1:0 1px 2px rgba(27,25,20,.03), 0 10px 30px -18px rgba(27,25,20,.16);
  --sh-2:0 2px 4px rgba(27,25,20,.03), 0 28px 60px -28px rgba(27,25,20,.22);
  --sh-3:0 40px 90px -40px rgba(27,25,20,.32);

  /* 8px grid */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px; --s20:160px;

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  --container:1280px;
  --gutter:clamp(24px,4vw,64px);
  --edge:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  --header-h:80px;
  --header-h-solid:64px;

  --ease:cubic-bezier(.22,1,.36,1);
  --font-body:'Poppins',system-ui,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;background:var(--white)}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.7;font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:clamp(80px,9vw,136px)}
.section--tight{padding-block:clamp(56px,6vw,88px)}
.section--bone{background:var(--white)}
.section--sand{background:var(--white)}
.section--green{background:var(--white)}  /* the green now lives in the panel inside, not the band */
.stack-1{display:grid;gap:var(--s1)}
.stack-2{display:grid;gap:var(--s2)}
.stack-3{display:grid;gap:var(--s3)}
.stack-4{display:grid;gap:var(--s4)}

/* ---------- Type ---------- */
.display,.h1,.h2,.h3{font-family:var(--font-display);font-weight:400;color:var(--green)}
.h1{line-height:1.05;font-size:clamp(2.5rem,4.8vw,4rem);letter-spacing:-.01em}
.h2{line-height:1.12;font-size:clamp(2rem,3.4vw,3rem)}
.h3{line-height:1.2;font-size:clamp(1.3rem,2vw,1.6rem);font-weight:500}
.h1 em,.h2 em,.h3 em,.display em{font-style:italic;color:var(--gold-ink)}
.lead{font-size:1.0625rem;line-height:1.8;color:var(--ink-70);max-width:62ch;font-weight:300}
.body{color:var(--ink-70);line-height:1.85;max-width:66ch;font-weight:300}

.eyebrow{
  font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  color:var(--gold-ink);display:flex;align-items:center;gap:var(--s2);
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow--center{justify-content:center}

.section-head{display:grid;gap:var(--s2);margin-bottom:var(--s10);max-width:660px}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}
.section-head--split{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:var(--s4)}
.section-head p{color:var(--ink-50)}

/* on green bands, the whole scale flips to white + gold */
.section--green .h1,.section--green .h2,.section--green .h3,
.on-dark .h1,.on-dark .h2,.on-dark .h3{color:var(--on-dark)}
.section--green .h1 em,.section--green .h2 em,.on-dark .h1 em,.on-dark .h2 em{color:var(--gold)}
.section--green .eyebrow,.on-dark .eyebrow,.eyebrow--gold{color:var(--gold)}
.section--green .lead,.section--green .body,.section--green .section-head p,
.on-dark .lead,.on-dark .body{color:var(--on-dark-70)}

.text-link{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);padding-bottom:6px;border-bottom:1px solid var(--line-gold);
  transition:gap .35s var(--ease),color .3s,border-color .3s;
}
.text-link:hover{gap:14px;color:var(--gold-ink);border-color:var(--gold)}
.section--green .text-link,.on-dark .text-link{color:var(--gold);border-color:rgba(230,196,142,.4)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  padding:16px 32px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .35s,color .35s,border-color .35s;
}
.btn:hover{transform:translateY(-2px)}
/* primary: forest green, gold type */
.btn--gold{background:var(--green);color:var(--gold);border-color:var(--green)}
.btn--gold:hover{background:var(--black);color:var(--gold);box-shadow:0 18px 36px -16px rgba(47,54,40,.5)}
/* secondary on white: hairline */
.btn--outline,.btn--green{background:transparent;color:var(--green);border-color:var(--line)}
.btn--outline:hover,.btn--green:hover{border-color:var(--green);background:var(--green);color:var(--gold)}
/* on a green band: gold fill, or white hairline */
.section--green .btn--gold,.on-dark .btn--gold,.cta .btn--gold{background:var(--gold);color:var(--green);border-color:var(--gold)}
.section--green .btn--gold:hover,.on-dark .btn--gold:hover,.cta .btn--gold:hover{background:var(--white);color:var(--green);box-shadow:0 18px 36px -16px rgba(230,196,142,.5)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{background:var(--white);color:var(--green);border-color:var(--white)}
.btn--block{width:100%}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:2000;background:var(--green);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);
  transition:opacity .8s var(--ease),visibility .8s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader img{width:96px;animation:breathe 1.8s ease-in-out infinite}
.preloader__bar{width:160px;height:1px;background:rgba(230,196,142,.2);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:40%;background:var(--gold);animation:load 1.2s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.5}}

/* ---------- Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:height .45s var(--ease),background .45s var(--ease),border-color .45s,box-shadow .45s;
}
.hdr.is-solid{
  height:var(--header-h-solid);
  background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:var(--line-soft);
}
.hdr__inner{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.hdr__logo{display:flex;align-items:center;flex:none}
.hdr__logo img{height:32px;width:auto;transition:height .45s var(--ease)}
.hdr.is-solid .hdr__logo img{height:28px}
.hdr__nav{display:flex;align-items:center;gap:2px}
/* over the green hero panel the nav is white; once solid it is charcoal on white */
.hdr__link{
  position:relative;padding:10px 16px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);transition:color .3s var(--ease);
}
.hdr__link::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);transform:scale(.85);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.hdr__link::after{
  content:"";position:absolute;left:50%;bottom:5px;width:0;height:1px;background:var(--gold);
  transform:translateX(-50%);transition:width .4s var(--ease);
}
.hdr__link:hover{color:var(--white)}
.hdr__link:hover::before{transform:scale(1);opacity:1}
.hdr__link:hover::after,.hdr__link.is-active::after{width:18px}
.hdr__link.is-active{color:var(--gold)}
.hdr.is-solid .hdr__link{color:var(--ink-70)}
.hdr.is-solid .hdr__link::before{background:rgba(47,54,40,.06)}
.hdr.is-solid .hdr__link:hover{color:var(--green)}
.hdr.is-solid .hdr__link.is-active{color:var(--green);font-weight:500}
.hdr.is-solid .hdr__link.is-active::after{background:var(--gold)}
.hdr__actions{display:flex;align-items:center;gap:var(--s2);flex:none}
.hdr__cta{
  padding:12px 24px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.4);
  font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  transition:.35s var(--ease);
}
.hdr__cta:hover{background:var(--gold);border-color:var(--gold);color:var(--green);transform:translateY(-2px)}
.hdr.is-solid .hdr__cta{border-color:var(--green);color:var(--green)}
.hdr.is-solid .hdr__cta:hover{background:var(--green);color:var(--gold);border-color:var(--green)}
.burger{display:none;flex-direction:column;gap:5px;padding:10px;margin-right:-10px}
.burger span{display:block;width:24px;height:1.5px;background:var(--gold);transition:.4s var(--ease)}
.hdr.is-solid .burger span{background:var(--green)}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:999;background:var(--green);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s1);
  padding:var(--s16) var(--gutter) var(--s8);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .5s var(--ease),visibility .5s,transform .5s var(--ease);
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer a{
  font-family:var(--font-display);font-size:2rem;color:var(--white);
  padding-block:var(--s1);border-bottom:1px solid var(--line-dark);
  display:flex;justify-content:space-between;align-items:baseline;
  transition:color .3s,padding-left .4s var(--ease);
}
.drawer a span{font-family:var(--font-body);font-size:.6875rem;letter-spacing:.2em;color:rgba(230,196,142,.6)}
.drawer a:hover,.drawer a.is-active{color:var(--gold);padding-left:var(--s1)}
.drawer__foot{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- Pages ---------- */
.page{display:none}
.page.is-active{display:block;animation:pageIn .7s var(--ease) both}
/* craft page pins a section; transformed ancestors break position:fixed pinning */
#page-craft.is-active{animation:none}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.page-top{
  padding-top:calc(var(--header-h) + var(--s16));padding-bottom:var(--s10);
  background:var(--white);position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);
}
.page-top__inner{display:grid;gap:var(--s3);max-width:820px;position:relative;z-index:2}
.page-top .h1{max-width:16ch;color:var(--green)}
.page-top .h1 em{color:var(--gold-ink)}
.page-top .lead{color:var(--ink-70)}
.page-top__crumb{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50)}
.page-top__crumb b{color:var(--green);font-weight:500}
.page-top::after{
  content:"";position:absolute;right:-160px;bottom:-200px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,54,40,.05),transparent 65%);pointer-events:none;
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ---------- HERO — one full-bleed slider, minimal text over the image ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--green);display:flex;align-items:flex-end}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 8s linear}
.hero__slide.is-active{opacity:1}
.hero__slide.is-active img{transform:scale(1)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,25,20,.45) 0%,rgba(27,25,20,.05) 30%,rgba(27,25,20,.72) 100%);
}
.hero__inner{
  position:relative;z-index:3;width:100%;max-width:var(--container);margin:0 auto;
  padding:0 var(--gutter) clamp(48px,6vw,88px);
}
.hero .eyebrow{color:var(--gold)}
.hero__title{
  font-family:var(--font-display);font-weight:400;color:var(--white);
  font-size:clamp(2.75rem,6vw,5.25rem);line-height:1.02;letter-spacing:-.015em;
  margin-block:var(--s3) var(--s4);max-width:15ch;
}
.hero__title em{font-style:italic;color:var(--gold)}
.hero__line{display:block;overflow:hidden}
.hero__line>span{display:block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.hero.is-in .hero__line>span{transform:none}
.hero__line:nth-child(2)>span{transition-delay:.12s}
.hero__ctas{display:flex;gap:var(--s2);flex-wrap:wrap}
.hero__ctas .btn--gold{background:var(--gold);color:var(--green);border-color:var(--gold)}
.hero__ctas .btn--gold:hover{background:var(--white)}
.hero__ui{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter) clamp(20px,2.5vw,32px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
}
.hero__caption{display:grid;gap:4px;font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero__caption b{font-family:var(--font-display);font-size:1.0625rem;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.9)}
.hero__dots{display:flex;gap:var(--s1);flex:none}
.hero__dot{position:relative;width:44px;height:2px;background:rgba(255,255,255,.3);overflow:hidden;border-radius:2px}
.hero__dot::after{content:"";position:absolute;inset:0;width:0;background:var(--gold);border-radius:2px}
.hero__dot.is-active::after{animation:dotFill var(--slide-dur,6s) linear forwards}
.hero__dot:hover{background:rgba(255,255,255,.55)}
@keyframes dotFill{from{width:0}to{width:100%}}
.hero.is-paused .hero__dot.is-active::after{animation-play-state:paused}

/* ---------- Figures ---------- */
.fig{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--bg-tint-2);box-shadow:var(--sh-1)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fig--4x5{aspect-ratio:4/5}
.fig--1x1{aspect-ratio:1/1}
.fig--3x2{aspect-ratio:3/2}
.fig--16x7{aspect-ratio:16/7}
.fig--tall{aspect-ratio:3/4}
a.fig:hover img{transform:scale(1.05)}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split--wide-left{grid-template-columns:1.1fr .9fr}
.split--wide-right{grid-template-columns:.9fr 1.1fr}
.split__media{position:relative}
.split__copy{display:grid;gap:var(--s3);align-content:start}
.split__copy .btn{justify-self:start;margin-top:var(--s2)}
.badge{
  position:absolute;left:calc(var(--s4) * -1);bottom:calc(var(--s4) * -1);
  background:var(--green);padding:var(--s4);border-radius:var(--r-md);width:200px;box-shadow:var(--sh-3);
}
.badge b{display:block;font-family:var(--font-display);font-size:2.75rem;font-weight:500;color:var(--gold);line-height:1}
.badge span{display:block;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-70);margin-top:var(--s1);line-height:1.6}

/* ---------- Cards — deep forest green boxes on white ---------- */
.card{
  background:var(--green);border:1px solid var(--green);border-radius:var(--r-lg);
  padding:var(--s5);display:grid;gap:var(--s2);align-content:start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(47,54,40,.45)}
/* the icon is green — so it needs a white chip to sit on inside the green box */
.card__icon{
  width:56px;height:56px;padding:10px;margin-bottom:var(--s2);
  background:var(--white);border-radius:var(--r-md);display:grid;place-items:center;
  transition:background .45s var(--ease);
}
.card:hover .card__icon{background:var(--gold)}
.card__icon svg{width:100%;height:100%}
.card h3{font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:var(--white)}
.card p{font-size:.9375rem;color:var(--on-dark-70);line-height:1.75}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}

/* ---------- Service tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;display:block;box-shadow:var(--sh-1)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,25,20,.88) 0%,rgba(27,25,20,.05) 62%)}
.tile__label{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:2;display:grid;gap:4px}
.tile__label i{font-style:normal;font-size:.625rem;letter-spacing:.22em;color:var(--gold)}
.tile__label h3{font-family:var(--font-display);font-size:1.375rem;font-weight:500;color:var(--white);line-height:1.2}
.tile__label em{
  font-style:normal;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.tile:hover .tile__label em{opacity:1;transform:none}

/* ---------- Service rows ---------- */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding-block:var(--s10);border-bottom:1px solid var(--line-soft)}
.srow:last-child{border-bottom:none}
.srow:nth-child(even) .srow__media{order:2}
.srow__copy{display:grid;gap:var(--s2);align-content:start}
.srow__num{font-family:var(--font-display);font-size:3rem;color:var(--gold-ink);line-height:1;font-weight:500}
.srow__list{display:grid;gap:var(--s1);margin-top:var(--s2)}
.srow__list li{display:flex;gap:var(--s2);font-size:.9375rem;color:var(--ink-50);align-items:baseline}
.srow__list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-ink);flex:none;transform:translateY(-2px)}

/* ---------- Stats — green panel on white ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--green);border-radius:var(--r-xl);padding:clamp(32px,4vw,56px) var(--s5);
}
.stats>div{padding:var(--s2) var(--s4);border-right:1px solid var(--line-dark);display:grid;gap:var(--s1)}
.stats>div:last-child{border-right:none}
.stats b{font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,3.6vw,3.5rem);color:var(--gold);line-height:1}
.stats b i{font-style:normal;font-size:.5em;vertical-align:super}
.stats span{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-50);line-height:1.7}

/* ---------- Banner ---------- */
.banner{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.banner__img{aspect-ratio:16/7;min-height:440px}
.banner__img img{width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(47,54,40,.94) 0%,rgba(47,54,40,.6) 48%,rgba(47,54,40,.12) 100%)}
.banner__copy{position:absolute;left:clamp(24px,5vw,72px);top:50%;transform:translateY(-50%);z-index:2;max-width:520px;display:grid;gap:var(--s3)}
.banner__copy h2{font-family:var(--font-display);font-size:clamp(1.9rem,3.2vw,2.75rem);color:var(--white);font-weight:400;line-height:1.14}
.banner__copy p{color:var(--on-dark-70);line-height:1.8;font-size:.9375rem}
.banner__copy .eyebrow{color:var(--gold)}
.banner__copy .btn{justify-self:start;background:var(--gold);color:var(--green);border-color:var(--gold)}
.banner__copy .btn:hover{background:var(--white)}

/* ---------- Gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s8);justify-content:center}
.filter{
  padding:10px 22px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);
  transition:.35s var(--ease);
}
.filter:hover{border-color:var(--green);color:var(--green)}
.filter.is-active{background:var(--green);border-color:var(--green);color:var(--gold);font-weight:500}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.gitem{
  position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in;display:block;
  aspect-ratio:4/3;box-shadow:var(--sh-1);animation:gIn .6s var(--ease) both;
}
.gitem--tall{aspect-ratio:3/4}
@keyframes gIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gitem:hover img{transform:scale(1.06)}
.gitem__veil{
  position:absolute;inset:0;background:linear-gradient(0deg,rgba(47,54,40,.9),rgba(47,54,40,0) 58%);
  opacity:0;transition:opacity .5s var(--ease);display:flex;align-items:flex-end;padding:var(--s4);
}
.gitem:hover .gitem__veil{opacity:1}
.gitem__veil div{display:grid;gap:4px;transform:translateY(8px);transition:transform .5s var(--ease)}
.gitem:hover .gitem__veil div{transform:none}
.gitem__veil i{font-style:normal;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.gitem__veil h3{font-family:var(--font-display);font-size:1.375rem;color:var(--white);font-weight:500}

.lb{
  position:fixed;inset:0;z-index:1500;background:rgba(27,25,20,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:var(--s8) var(--s6);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:min(1100px,92vw);max-height:78vh;border-radius:var(--r-md);box-shadow:var(--sh-3);object-fit:contain}
.lb__cap{text-align:center;color:var(--on-dark-50);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;margin-top:var(--s3)}
.lb__close{position:absolute;top:var(--s4);right:var(--s4);width:44px;height:44px;border-radius:50%;border:1px solid var(--line-dark);color:var(--white);display:grid;place-items:center;font-size:1.25rem;transition:.3s}
.lb__close:hover{background:var(--gold);color:var(--green);border-color:var(--gold)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--line-dark);color:var(--white);display:grid;place-items:center;transition:.3s}
.lb__nav:hover{background:var(--gold);color:var(--green);border-color:var(--gold)}
.lb__nav--prev{left:var(--s4)}
.lb__nav--next{right:var(--s4)}

/* ---------- Projects ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;display:block;aspect-ratio:16/11;box-shadow:var(--sh-1)}
.pcard--feature{grid-column:span 2;aspect-ratio:16/7}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard:hover img{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,25,20,.85) 0%,rgba(27,25,20,0) 58%)}
.pcard__meta{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3)}
.pcard__meta div{display:grid;gap:4px}
.pcard__meta i{font-style:normal;font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.pcard__meta h3{font-family:var(--font-display);font-size:1.5rem;color:var(--white);font-weight:500}
.pcard__arrow{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;
  color:var(--white);flex:none;transform:translateX(-6px);opacity:0;transition:.45s var(--ease);
}
.pcard:hover .pcard__arrow{transform:none;opacity:1;background:var(--gold);border-color:var(--gold);color:var(--green)}

.pd-cover{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/8;min-height:380px;box-shadow:var(--sh-2)}
.pd-cover img{width:100%;height:100%;object-fit:cover}
.pd-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);border-block:1px solid var(--line-soft);padding-block:var(--s5)}
.pd-facts div{display:grid;gap:6px}
.pd-facts span{font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.pd-facts b{font-weight:400;font-size:1rem;color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{padding:8px 18px;border-radius:var(--r-pill);background:var(--bg-tint);border:1px solid var(--line-soft);font-size:.75rem;letter-spacing:.08em;color:var(--ink-70)}

/* ---------- Products ---------- */
.prod{
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--white);
  display:grid;grid-template-rows:auto 1fr;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
}
.prod:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-gold)}
.prod__img{aspect-ratio:4/3;overflow:hidden}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.prod:hover .prod__img img{transform:scale(1.05)}
.prod__body{padding:var(--s4);display:grid;gap:var(--s2);align-content:start}
.prod__body i{font-style:normal;font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.prod__body h3{font-family:var(--font-display);font-size:1.375rem;font-weight:500;color:var(--green)}
.prod__body p{font-size:.9375rem;color:var(--ink-50);line-height:1.7}
.spec{display:grid;gap:6px;margin-top:var(--s1);padding-top:var(--s2);border-top:1px solid var(--line-soft)}
.spec div{display:flex;justify-content:space-between;gap:var(--s2);font-size:.8125rem}
.spec dt{color:var(--ink-50)}
.spec dd{color:var(--green);text-align:right}

/* ---------- Timeline ---------- */
.tline{display:grid;position:relative;padding-left:var(--s6)}
.tline::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:1px;background:var(--line)}
.tline__item{display:grid;gap:var(--s1);padding-block:var(--s4);position:relative}
.tline__item::before{
  content:"";position:absolute;left:calc(var(--s6) * -1);top:calc(var(--s4) + 8px);
  width:15px;height:15px;border-radius:50%;background:var(--white);border:1px solid var(--line-gold);
}
.tline__item::after{
  content:"";position:absolute;left:calc(var(--s6) * -1 + 4px);top:calc(var(--s4) + 12px);
  width:7px;height:7px;border-radius:50%;background:var(--gold-ink);transform:scale(0);
  transition:transform .5s var(--ease) .2s;
}
.tline__item.is-in::after{transform:scale(1)}
.tline__item b{font-family:var(--font-display);font-size:1.75rem;font-weight:500;color:var(--gold-ink);line-height:1}
.tline__item h3{font-size:1rem;font-weight:500;color:var(--green)}
.tline__item p{font-size:.9375rem;color:var(--ink-50);line-height:1.75;max-width:56ch}

/* ---------- The Craft — white section, green stage panel ---------- */
.craft{background:var(--white);position:relative}
.craft__pin{min-height:100vh;display:flex;align-items:center;padding-block:var(--s10)}
.craft__layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:center;width:100%}
.craft__left{display:grid;gap:var(--s3);align-content:center}
.craft__left .eyebrow{color:var(--gold-ink)}
.craft__left .h2{color:var(--green)}
.craft__left .h2 em{color:var(--gold-ink)}
.craft__steps{display:grid;gap:4px;margin-top:var(--s2)}
.craft__steps li{
  display:flex;gap:var(--s2);padding:var(--s2);border-radius:var(--r-sm);
  border:1px solid transparent;opacity:.45;
  transition:opacity .5s var(--ease),border-color .5s,background .5s;
}
.craft__steps li.is-active{opacity:1;border-color:var(--line-gold);background:rgba(230,196,142,.12)}
.craft__steps b{font-family:var(--font-display);font-size:1.375rem;color:var(--gold-ink);font-weight:500;line-height:1.3;flex:none}
.craft__steps h3{color:var(--green);font-size:.9375rem;font-weight:500}
.craft__steps p{color:var(--ink-50);font-size:.8125rem;line-height:1.6;margin-top:2px}
.craft__progress{height:2px;background:var(--line);margin-top:var(--s3);overflow:hidden;border-radius:2px}
.craft__progress span{display:block;height:100%;width:0;background:var(--gold-ink)}
/* the animation is drawn in gold on green — it keeps its own green stage */
.craft__stage{background:var(--green);border-radius:var(--r-xl);padding:clamp(16px,2.5vw,40px)}
#craftSvg{width:100%;height:auto;max-height:70vh}

/* ---------- Configurator ---------- */
.config{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-xl);
  padding:clamp(24px,3.5vw,56px);box-shadow:var(--sh-2);
}
.config__stage{background:radial-gradient(78% 78% at 50% 40%,#FFFFFF 0%,rgba(47,54,40,.08) 100%);border-radius:var(--r-lg);padding:clamp(16px,2vw,32px)}
#cfgSvg{width:100%;height:auto}
#cfgSvg .wood{fill:url(#fHalifax);transition:fill .6s var(--ease)}
#cfgSvg[data-finish="gladstone"] .wood{fill:url(#fGladstone)}
#cfgSvg[data-finish="cognac"] .wood{fill:url(#fCognac)}
#cfgSvg[data-finish="sandoak"] .wood{fill:url(#fSandOak)}
.config__panel{display:grid;gap:var(--s2);align-content:center}
.dots{display:flex;gap:var(--s2);margin-top:var(--s2)}
.dot{width:44px;height:44px;border-radius:50%;padding:4px;border:1px solid transparent;transition:border-color .3s,transform .35s var(--ease)}
.dot i{display:block;width:100%;height:100%;border-radius:50%;background:var(--c)}
.dot:hover{transform:scale(1.08)}
.dot.is-active{border-color:var(--green)}
.dot-name{font-size:.8125rem;color:var(--ink-50);letter-spacing:.06em}
.config__btns{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s2)}

/* ---------- Testimonials — green text boxes ---------- */
.quote{
  background:var(--green);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(47,54,40,.45)}
.quote__mark{font-family:var(--font-display);font-size:3.5rem;color:var(--gold);line-height:.6;height:24px}
.quote p{color:var(--on-dark-70);line-height:1.9;font-size:.9375rem;font-style:italic}
.quote__who{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line-dark);display:grid;gap:2px}
.quote__who b{font-size:.9375rem;font-weight:500;color:var(--white)}
.quote__who span{font-size:.8125rem;color:var(--on-dark-50)}

/* ---------- CTA — green panel on white ---------- */
.cta{background:var(--white);padding-block:clamp(48px,5vw,72px)}
.cta__inner{
  position:relative;z-index:2;max-width:var(--container);margin:0 auto;
  background:var(--green);border-radius:var(--r-xl);overflow:hidden;
  padding:clamp(56px,7vw,96px) var(--gutter);
  display:grid;gap:var(--s3);justify-items:center;text-align:center;
}
.cta__inner::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(520px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(230,196,142,.14),transparent 62%);pointer-events:none;
}
.cta__inner > *{position:relative;z-index:2}
.cta .eyebrow{color:var(--gold)}
.cta h2{font-family:var(--font-display);font-size:clamp(2.25rem,4.4vw,3.5rem);color:var(--white);font-weight:400;max-width:18ch;line-height:1.1}
.cta h2 em{font-style:italic;color:var(--gold)}
.cta__btns{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-top:var(--s1)}
.page > section:last-child{padding-bottom:clamp(40px,4.5vw,64px)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px)}
.info-list{display:grid}
.info-list li{display:grid;gap:2px;padding-block:var(--s3);border-bottom:1px solid var(--line-soft)}
.info-list li:first-child{padding-top:0}
.info-list span{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.info-list a,.info-list p{font-size:1.0625rem;color:var(--green);font-weight:400;transition:color .3s}
.info-list a:hover{color:var(--gold-ink)}
.hours{display:grid;gap:var(--s1)}
.hours div{display:flex;justify-content:space-between;gap:var(--s3);font-size:.9375rem;padding-block:6px;border-bottom:1px dashed var(--line-soft)}
.hours dt{color:var(--ink-50)}
.hours dd{color:var(--green)}
.form{
  background:var(--white);border:1px solid var(--line-soft);border-top:2px solid var(--gold);
  border-radius:var(--r-lg);padding:clamp(24px,3vw,48px);box-shadow:var(--sh-2);
  display:grid;gap:var(--s3);align-content:start;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.field{display:grid;gap:var(--s1)}
.field label{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--green)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.9375rem;color:var(--ink);font-weight:300;
  padding:14px 18px;border:1px solid var(--line);background:var(--bg-tint);
  border-radius:var(--r-xs);outline:none;resize:vertical;width:100%;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-30)}
.field select option{background:var(--white);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);background:var(--white);box-shadow:0 0 0 4px rgba(47,54,40,.08)}
.form__status{font-size:.875rem;text-align:center;color:var(--green);min-height:1.2em}
.map{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--sh-1);height:clamp(320px,42vw,480px)}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.4) contrast(1.02)}

/* ---------- Footer (charcoal) ---------- */
.footer{background:var(--green);color:var(--on-dark-50)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s8);padding-block:clamp(56px,6vw,80px) var(--s6);border-bottom:1px solid var(--line-dark)}
.footer__brand{display:grid;gap:var(--s2);align-content:start}
.footer__brand img{height:40px;width:auto;justify-self:start}
.footer__brand p{font-size:.875rem;line-height:1.85;max-width:34ch}
.footer__col{display:grid;gap:var(--s1);align-content:start}
.footer__col h4{color:var(--white);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;margin-bottom:var(--s1)}
.footer__col a,.footer__col span{font-size:.9375rem;transition:color .3s,padding-left .3s var(--ease)}
.footer__col a:hover{color:var(--gold);padding-left:4px}
.footer__bar{padding-block:var(--s3)}
.footer__bar .container{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:.8125rem;color:rgba(255,255,255,.35)}

/* ---------- WhatsApp ---------- */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:800;width:56px;height:56px;border-radius:50%;
  background:var(--green);color:var(--gold);display:grid;place-items:center;box-shadow:var(--sh-2);
  transition:transform .4s var(--ease),background .3s,color .3s;
}
.fab:hover{transform:translateY(-3px) scale(1.04);background:var(--gold);color:var(--green)}
.fab svg{width:26px;height:26px}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .grid-4,.tiles{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--s5) 0}
  .stats>div{border-right:none;border-bottom:1px solid var(--line-dark);padding-bottom:var(--s3)}
  .stats>div:nth-last-child(-n+2){border-bottom:none;padding-bottom:0}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .pd-facts{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
}
@media (max-width:1024px){
  :root{--header-h:72px}
  .hdr__nav,.hdr__cta{display:none}
  .burger{display:flex}
  .hero{height:auto;min-height:88svh}
  .hero__inner{padding-bottom:clamp(72px,12vw,110px)}
  .hero__ui{flex-direction:row;align-items:center}
  .split,.split--wide-left,.split--wide-right,.contact-grid,.config,.craft__layout{grid-template-columns:1fr}
  .split__media{order:-1}
  .badge{left:var(--s3);bottom:calc(var(--s3) * -1)}
  .srow{grid-template-columns:1fr;gap:var(--s5);padding-block:var(--s8)}
  .srow:nth-child(even) .srow__media,.srow__media{order:-1}
  .gallery,.grid-3{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:1fr}
  .pcard--feature{grid-column:auto;aspect-ratio:16/10}
  .section-head--split{grid-template-columns:1fr;align-items:start}
  .banner__img{min-height:540px}
  .banner::after{background:linear-gradient(0deg,rgba(47,54,40,.95) 0%,rgba(47,54,40,.35) 75%)}
  .banner__copy{top:auto;bottom:var(--s5);left:var(--s5);right:var(--s5);transform:none;max-width:none}
  .craft__pin{min-height:auto;padding-block:var(--s10);display:block}
  .craft__steps p{display:none}
  .craft__steps li{align-items:center;padding:10px 12px}
  #craftSvg{max-height:52vh;margin-top:var(--s5)}
}
@media (max-width:720px){
  .grid-4,.grid-3,.grid-2,.tiles,.gallery,.form__row,.pd-facts{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr;gap:var(--s5)}
  .drawer a{font-size:1.625rem}
  .lb__nav{width:40px;height:40px}
  .lb__nav--prev{left:8px}
  .lb__nav--next{right:8px}
  .badge{width:168px;padding:var(--s3)}
  .page-top{padding-top:calc(var(--header-h) + var(--s10))}
  .hero__caption b{font-size:1.05rem}
  .hero__dot{width:32px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__line>span{transform:none}
  .hero__slide img{transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- The Craft 2.0 — 3D stage ---------- */
.craft__stage{position:relative}
#craft3d{display:block;width:100%;height:clamp(420px,64vh,640px);border-radius:calc(var(--r-xl) - 10px)}
.craft3d__hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:rgba(230,196,142,.7);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;pointer-events:none}
.craft__stage.is-fallback #craft3d,.craft__stage.is-fallback .craft3d__hint{display:none}
.craft__stage.is-fallback::after{content:"Interactive 3D view is unavailable on this device — the five steps are listed alongside.";display:grid;place-items:center;min-height:280px;padding:24px;color:var(--gold-soft,#d8bd8c);font-size:.9375rem;text-align:center}
@media (max-width:1024px){#craft3d{height:clamp(320px,46vh,460px)}}