/* ==========================================================================
   WOOD CROPS - "Blueprint Editorial" design system
   Architecture - Construction - Interiors - Furniture - Electrical - Plumbing
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens */
:root{
  --ink:        #12100D;
  --ink-2:      #1A1713;
  --ink-3:      #262119;
  --bone:       #F5F1E8;
  --bone-2:     #EAE3D5;
  --bone-3:     #DCD3C1;
  --brass:      #B7832F;
  --brass-2:    #D8AC5C;
  --brass-3:    #F0D9A8;
  --clay:       #9C4A24;
  --stone:      #8C8578;
  --line:       rgba(18,16,13,.14);
  --line-d:     rgba(245,241,232,.14);

  --ff-display: "Fraunces", "Times New Roman", serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:    "DM Mono", ui-monospace, SFMono-Regular, monospace;

  --shell:      1320px;
  --gut:        clamp(20px, 5vw, 72px);
  --sp:         clamp(72px, 10vw, 150px);
  --r:          2px;

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

  /* textures: used as automatic fallback when a photo is missing */
  --tex-wood:
    radial-gradient(38% 26% at 72% 30%, rgba(240,217,168,.16), transparent 68%),
    repeating-linear-gradient(97deg,
      #2a2118 0 3px, #34291d 3px 7px, #241c14 7px 11px, #3d3021 11px 14px, #2a2118 14px 19px),
    radial-gradient(120% 90% at 30% 10%, rgba(216,172,92,.22), transparent 60%);
  --tex-concrete:
    repeating-linear-gradient(135deg, rgba(245,241,232,.038) 0 1px, transparent 1px 13px),
    linear-gradient(140deg, #40392F 0%, #262119 52%, #14120F 100%),
    radial-gradient(85% 65% at 22% 4%, rgba(240,217,168,.16), transparent 62%);
  --tex-blueprint:
    linear-gradient(0deg, rgba(245,241,232,.055) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(245,241,232,.055) 1px, transparent 1px) 0 0/34px 100%;
}

/* -------------------------------------------------- 2. Reset */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--ff-body);
  background:var(--bone);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--brass); color:#fff; }

/* -------------------------------------------------- 3. Layout helpers */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.shell-wide{ width:100%; max-width:1680px; margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:var(--sp); position:relative; }
.sec-tight{ padding-block:clamp(52px,7vw,96px); }
.ink{ background:var(--ink); color:var(--bone); }
.ink .lede{ color:rgba(245,241,232,.66); }
.bone2{ background:var(--bone-2); }
.blueprint::before{
  content:""; position:absolute; inset:0; background-image:var(--tex-blueprint);
  pointer-events:none; opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);
  mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* -------------------------------------------------- 4. Typography */
.eyebrow{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.65; }
.eyebrow.no-rule::before{ display:none; }

.h-xl{ font-family:var(--ff-display); font-weight:300; font-size:clamp(44px,8.2vw,112px); line-height:.94; letter-spacing:-.025em; }
.h-lg{ font-family:var(--ff-display); font-weight:300; font-size:clamp(33px,5.2vw,66px); line-height:1.04; letter-spacing:-.02em; }
.h-md{ font-family:var(--ff-display); font-weight:400; font-size:clamp(24px,3vw,38px); line-height:1.16; letter-spacing:-.015em; }
.h-sm{ font-family:var(--ff-display); font-weight:400; font-size:clamp(20px,2.2vw,26px); line-height:1.24; }
.ital{ font-style:italic; color:var(--brass); }
.lede{ font-size:clamp(16px,1.35vw,18.5px); line-height:1.75; color:rgba(18,16,13,.66); max-width:58ch; }
.small{ font-size:14px; line-height:1.7; color:rgba(18,16,13,.62); }
.ink .small{ color:rgba(245,241,232,.55); }
.mono{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.rule{ height:1px; background:var(--line); border:0; }
.ink .rule{ background:var(--line-d); }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:44px; }

/* -------------------------------------------------- 5. Buttons */
.btn{
  --bg:var(--ink); --fg:var(--bone);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 28px; background:var(--bg); color:var(--fg);
  font-family:var(--ff-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border-radius:var(--r); overflow:hidden; isolation:isolate; text-decoration:none;
  transition:color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:focus{ outline:none; }
.btn:focus-visible{ outline:2px solid var(--brass-2); outline-offset:3px; }
.btn span, .btn svg{ position:relative; z-index:2; }
.btn svg{ width:15px; height:15px; flex-shrink:0; transition:transform .4s var(--ease); }
.btn::after{
  content:""; position:absolute; inset:0; z-index:1; background:var(--brass);
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:#fff; }
.btn:hover svg{ transform:translateX(4px); }

.btn--brass{ --bg:var(--brass); --fg:#fff; }
.btn--brass::after{ background:var(--ink); }

.btn--ghost{
  --bg:transparent; --fg:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(18,16,13,.25);
}
.ink .btn--ghost, .cta .btn--ghost, .phero .btn--ghost{
  --fg:var(--bone);
  box-shadow:inset 0 0 0 1.5px rgba(245,241,232,.4);
  background:rgba(245,241,232,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{ color:#fff; }
.ink .btn--ghost:hover, .cta .btn--ghost:hover, .phero .btn--ghost:hover{
  --fg:#fff;
  box-shadow:inset 0 0 0 1.5px var(--brass);
}

.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }

.link-u{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding-bottom:6px;
  border-bottom:1px solid var(--line); transition:border-color .3s, color .3s, gap .3s;
}
.ink .link-u{ border-color:var(--line-d); }
.link-u:hover{ color:var(--brass); border-color:var(--brass); gap:16px; }

/* Inline link inside running text (not a CTA - keeps the sentence reading as a sentence) */
.ilink{ color:var(--brass-ink); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; transition:color .3s; }
.ilink:hover{ color:var(--clay); }
.ink .ilink{ color:var(--brass-2); }

/* -------------------------------------------------- 6. Media frames */
.media{
  position:relative; overflow:hidden; background-color:#211b14;
  background-image:var(--img,none);
  background-size:cover; background-position:center; border-radius:var(--r);
  display:block;
}
.media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; transition:transform .8s var(--ease); z-index:0;
}
.media:hover img{
  transform:scale(1.05);
}
.media::before{
  content:""; position:absolute; inset:14px; z-index:2; pointer-events:none;
  border:1px solid rgba(245,241,232,.15);
}
.media[data-cap]::after{
  content:attr(data-cap); position:absolute; left:16px; bottom:14px; z-index:3;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(245,241,232,.88); text-shadow:0 1px 8px rgba(0,0,0,.85);
}

/* -------------------------------------------------- 7. Header */
.site-head{
  position:fixed; inset:0 0 auto; z-index:80;
  padding-block:18px; color:var(--bone);
  transition:background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,9,7,.8), rgba(10,9,7,0));
  transition:opacity .4s;
}
.site-head.is-stuck{ background:rgba(16,14,11,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding-block:11px; box-shadow:0 1px 0 var(--line-d); }
.site-head.is-stuck::before{ opacity:0; }
.head-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; gap:13px; position:relative; z-index:90; }
.brand-mark{ width:42px; height:42px; flex:none; transition:transform .7s var(--ease); }
.brand-img{ width:46px; height:46px; flex:none; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); transition:transform .4s var(--ease); }
.brand:hover .brand-mark{ transform:rotate(90deg); }
.brand:hover .brand-img{ transform:scale(1.08); }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-txt b{ font-family:var(--ff-display); font-weight:500; font-size:19px; letter-spacing:.09em; }
.brand-txt i{ font-style:normal; font-family:var(--ff-mono); font-size:8.5px; letter-spacing:.2em; color:var(--brass-2); margin-top:6px; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,32px); }
.nav a.nl{
  position:relative; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(245,241,232,.78); padding-block:6px; transition:color .3s;
}
.nav a.nl::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--brass-2);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out);
}
.nav a.nl:hover{ color:#fff; }
.nav a.nl:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a.nl.is-active{ color:var(--brass-2); }
.nav a.nl.is-active::after{ transform:scaleX(1); }
.nav .btn{ padding:12px 20px; }

.burger{ display:none; width:44px; height:44px; position:relative; z-index:90; }
.burger i{ position:absolute; left:10px; width:24px; height:1.5px; background:var(--bone); transition:.4s var(--ease); }
.burger i:nth-child(1){ top:17px; }
.burger i:nth-child(2){ top:25px; width:15px; }
body.is-open .burger i:nth-child(1){ top:21px; transform:rotate(45deg); }
body.is-open .burger i:nth-child(2){ top:21px; width:24px; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--bone);
  padding:110px var(--gut) 40px; display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .75s var(--ease-out); overflow-y:auto;
  visibility:hidden;
}
body.is-open .drawer{ clip-path:inset(0 0 0 0); visibility:visible; }
body.is-open{ overflow:hidden; }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  font-family:var(--ff-display); font-size:clamp(28px,7.5vw,44px); font-weight:300;
  padding-block:16px; border-bottom:1px solid var(--line-d); display:flex; align-items:baseline; gap:16px;
  transition:padding-left .4s var(--ease), color .3s;
}
.drawer nav a em{ font-family:var(--ff-mono); font-style:normal; font-size:11px; color:var(--brass); }
.drawer nav a:hover{ color:var(--brass-2); padding-left:12px; }
.drawer-foot{ display:grid; gap:4px; }

/* -------------------------------------------------- 8. Hero (home) */
.hero{ position:relative; background:var(--ink); color:var(--bone); overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr; min-height:100svh; align-items:stretch;
}
.hero-copy{ padding:clamp(120px,15vh,190px) clamp(24px,4vw,64px) 0 var(--gut); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:3; }
.hero-copy .h-xl{ margin-top:24px; }
.hero-copy .h-xl em{ display:block; font-style:italic; color:var(--brass-2); }
.hero-copy .lede{ margin-top:26px; max-width:44ch; }
.hero-copy .btn-row{ margin-top:38px; }
.hero-art{ position:relative; }
.hero-art .media{ position:absolute; inset:0; border-radius:0; }
.hero-art::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(18,16,13,.35) 32%, transparent 62%);
}
.hero-art::after{
  content:""; position:absolute; inset:auto 0 0 0; height:36%; z-index:2;
  background:linear-gradient(0deg, var(--ink), transparent);
}
.hero-rail{
  position:absolute; left:calc(var(--gut) * .32); top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(245,241,232,.35); z-index:4;
}
.hero-badges{
  position:relative; z-index:5; border-top:1px solid var(--line-d);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.hero-badges div{ padding:26px clamp(16px,2vw,32px); display:flex; gap:14px; align-items:flex-start; }
.hero-badges div + div{ border-left:1px solid var(--line-d); }
.hero-badges svg{ width:24px; height:24px; color:var(--brass-2); flex:none; margin-top:3px; }
.hero-badges b{ display:block; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-2); }
.hero-badges span{ font-size:13.5px; color:rgba(245,241,232,.62); }
.hero-scroll{
  position:absolute; right:var(--gut); bottom:clamp(120px,16vh,170px); z-index:6;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(245,241,232,.5); display:flex; align-items:center; gap:12px;
}
.hero-scroll::after{ content:""; width:52px; height:1px; background:rgba(245,241,232,.35); position:relative; overflow:hidden; }

/* -------------------------------------------------- 9. Marquee */
.marquee{ background:var(--brass); color:#fff; padding-block:15px; overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:0; animation:slide 34s linear infinite; }
.marquee span{
  font-family:var(--ff-display); font-style:italic; font-size:clamp(18px,2vw,26px);
  padding-inline:26px; display:inline-flex; align-items:center; gap:26px;
}
.marquee span::after{ content:""; width:7px; height:7px; background:#fff; border-radius:50%; opacity:.8; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* -------------------------------------------------- 10. Section head */
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(20px,4vw,64px); align-items:end; }
.sec-head .lede{ padding-bottom:8px; }
.sec-head + *{ margin-top:clamp(40px,5vw,72px); }

/* -------------------------------------------------- 11. Service index rows */
.svc-list{ border-top:1px solid var(--line); }
.ink .svc-list{ border-color:var(--line-d); }
.svc{ border-bottom:1px solid var(--line); position:relative; }
.ink .svc{ border-color:var(--line-d); }
.svc-head{
  width:100%; display:grid; grid-template-columns:78px minmax(0,1.05fr) minmax(0,1.2fr) 52px;
  gap:clamp(12px,2vw,36px); align-items:center; padding-block:clamp(22px,2.6vw,34px);
  text-align:left; transition:padding-left .45s var(--ease);
}
.svc-num{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; color:var(--brass); }
.svc-title{ font-family:var(--ff-display); font-weight:400; font-size:clamp(23px,3.1vw,42px); line-height:1.08; letter-spacing:-.02em; transition:color .35s; }
.svc-title small{ display:block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-top:9px; }
.svc-desc{ font-size:15px; line-height:1.7; color:rgba(18,16,13,.6); }
.ink .svc-desc{ color:rgba(245,241,232,.58); }
.svc-plus{ justify-self:end; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; position:relative; transition:.45s var(--ease); }
.ink .svc-plus{ border-color:var(--line-d); }
.svc-plus::before,.svc-plus::after{ content:""; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); background:currentColor; }
.svc-plus::before{ width:13px; height:1.5px; }
.svc-plus::after{ width:1.5px; height:13px; transition:transform .45s var(--ease); }
.svc:hover .svc-head{ padding-left:14px; }
.svc:hover .svc-title{ color:var(--brass); }
.svc:hover .svc-plus{ background:var(--brass); border-color:var(--brass); color:#fff; transform:rotate(90deg); }
.svc.is-open .svc-plus{ background:var(--brass); border-color:var(--brass); color:#fff; }
.svc.is-open .svc-plus::after{ transform:translate(-50%,-50%) scaleY(0); }
.svc.is-open .svc-title{ color:var(--brass); }
.svc-body{ height:0; overflow:hidden; transition:height .55s var(--ease-out); }
.svc-inner{
  display:grid; grid-template-columns:78px minmax(0,1.05fr) minmax(0,1.2fr); gap:clamp(12px,2vw,36px);
  padding-bottom:clamp(26px,3vw,44px);
}
.svc-inner .media{ grid-column:2; aspect-ratio:16/10; }
.svc-tags{ grid-column:3; display:grid; gap:0; align-content:start; }
.svc-tags li{
  display:flex; align-items:center; gap:14px; padding-block:12px; border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.ink .svc-tags li{ border-color:var(--line-d); }
.svc-tags li::before{ content:""; width:5px; height:5px; background:var(--brass); transform:rotate(45deg); flex:none; }
.svc-tags .link-u{ margin-top:22px; }
.ribbon{
  position:absolute; top:clamp(18px,2.4vw,30px); right:76px; z-index:2;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--brass); color:#fff; padding:5px 11px; border-radius:100px;
}

/* -------------------------------------------------- 12. Stats */
.stats{ display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line-d); }
.stats li{ padding:clamp(26px,3vw,40px) clamp(14px,1.6vw,26px); position:relative; }
.stats li + li{ border-left:1px solid var(--line-d); }
.stat-n{ font-family:var(--ff-display); font-weight:300; font-size:clamp(34px,4.4vw,58px); line-height:1; color:var(--brass-2); letter-spacing:-.02em; }
.stat-l{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:rgba(245,241,232,.6); margin-top:14px; }
.stats--light{ border-color:var(--line); }
.stats--light li + li{ border-left-color:var(--line); }
.stats--light .stat-n{ color:var(--brass); }
.stats--light .stat-l{ color:rgba(18,16,13,.6); }

/* -------------------------------------------------- 13. Split feature (factory) */
.split{ display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(30px,5vw,84px); }
.split--rev .split-art{ order:2; }
.split-art{ position:relative; }
.split-art .media{ aspect-ratio:4/3.1; }
.split-art .stamp{
  position:absolute; right:-28px; bottom:-28px; width:clamp(110px,13vw,152px); height:clamp(110px,13vw,152px);
  background:var(--brass); color:#fff; border-radius:50%; display:grid; place-content:center; text-align:center;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.9;
  box-shadow:0 20px 50px rgba(18,16,13,.28);
}
.split-art .stamp b{ display:block; font-family:var(--ff-display); font-size:26px; letter-spacing:0; line-height:1.1; margin-bottom:4px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border:1px solid var(--line);
  border-radius:100px; font-size:12.5px; letter-spacing:.02em;
}
.ink .chip{ border-color:var(--line-d); }
.chip::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass); }

/* -------------------------------------------------- 14. Projects */
.filters{ display:flex; flex-wrap:wrap; gap:9px; }
.filters button{
  padding:10px 18px; border:1px solid var(--line); border-radius:100px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:.35s var(--ease);
}
.filters button:hover{ border-color:var(--brass); color:var(--brass); }
.filters button.is-on{ background:var(--ink); color:var(--bone); border-color:var(--ink); }

.pgrid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,26px); }
.pcard{ position:relative; overflow:hidden; display:block; grid-column:span 4; }
.pcard--w6{ grid-column:span 6; }
.pcard--w8{ grid-column:span 8; }
.pcard--w12{ grid-column:span 12; }
.pcard .media{ aspect-ratio:4/3.2; transition:transform 1.1s var(--ease-out), filter .6s; }
.pcard--w8 .media,.pcard--w12 .media{ aspect-ratio:16/8.4; }
.pcard::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,10,8,.86) 0%, rgba(12,10,8,.15) 46%, transparent 70%);
  opacity:.72; transition:opacity .5s;
}
.pcard:hover .media{ transform:scale(1.05); }
.pcard:hover::after{ opacity:.95; }
.pcard-meta{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(18px,2vw,30px); color:var(--bone); }
.pcard-meta em{
  font-style:normal; font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-2);
}
.pcard-meta h3{ font-family:var(--ff-display); font-weight:400; font-size:clamp(19px,2vw,28px); margin-top:9px; line-height:1.18; }
.pcard-meta p{ font-size:13.5px; color:rgba(245,241,232,.66); max-height:0; opacity:0; overflow:hidden; transition:.55s var(--ease-out); }
.pcard:hover .pcard-meta p{ max-height:80px; opacity:1; margin-top:9px; }
.pcard.is-hidden{ display:none; }

/* -------------------------------------------------- 15. Process */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.ink .process, .ink .process li{ background:var(--line-d); }
.process li{ background:var(--bone); padding:clamp(26px,3vw,40px) clamp(20px,2.2vw,32px); position:relative; }
.ink .process li{ background:var(--ink); }
.process b{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; color:var(--brass); }
.process h3,.process h4{ font-family:var(--ff-display); font-weight:400; font-size:clamp(20px,2.1vw,26px); margin:16px 0 12px; }
.process p{ font-size:14.5px; color:rgba(18,16,13,.62); }
.ink .process p{ color:rgba(245,241,232,.58); }

/* -------------------------------------------------- 16. Value / icon cards */
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.vgrid li{ background:var(--bone); padding:clamp(28px,3vw,42px); }
.bone2 .vgrid li{ background:var(--bone-2); }
.vgrid svg{ width:30px; height:30px; color:var(--brass); }
.vgrid h3,.vgrid h4{ font-family:var(--ff-display); font-weight:400; font-size:22px; margin:22px 0 10px; }
.vgrid p{ font-size:14.5px; color:rgba(18,16,13,.62); }

/* -------------------------------------------------- 17. Quote */
.quote{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px); align-items:start; }
.quote .qmark{ font-family:var(--ff-display); font-size:clamp(70px,9vw,130px); line-height:.7; color:var(--brass); }
.quote blockquote{ font-family:var(--ff-display); font-weight:300; font-size:clamp(23px,3.1vw,42px); line-height:1.32; letter-spacing:-.015em; }

/* -------------------------------------------------- 18. CTA band */
.cta{ position:relative; background:var(--ink-2); color:var(--bone); overflow:hidden; }
.cta .media{ position:absolute; inset:0; border-radius:0; opacity:.3; }
.cta .shell{ position:relative; z-index:2; text-align:center; display:grid; justify-items:center; gap:24px; }

/* -------------------------------------------------- 19. Footer */
.foot{ background:var(--ink); color:var(--bone); padding-top:clamp(56px,7vw,90px); position:relative; }
.foot-top{ display:grid; grid-template-columns:1.25fr 1fr 1fr 1.1fr; gap:clamp(26px,3vw,50px); padding-bottom:56px; }
.foot h5,.foot .foot-h{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-2); margin-bottom:22px; }
.foot li{ margin-bottom:11px; }
.foot a{ color:rgba(245,241,232,.7); font-size:14.5px; transition:color .3s, padding-left .3s; }
.foot a:hover{ color:var(--brass-2); padding-left:5px; }
.foot .brand{ margin-bottom:20px; }
.foot-bar{ border-top:1px solid var(--line-d); padding-block:22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
.foot-bar p{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,241,232,.45); }
.socials{ display:flex; gap:10px; }
.socials a{ width:38px; height:38px; border:1px solid var(--line-d); border-radius:50%; display:grid; place-content:center; transition:.35s var(--ease); }
.socials a:hover{ background:var(--brass); border-color:var(--brass); color:#fff; padding:0; }
.socials svg{ width:15px; height:15px; }

/* -------------------------------------------------- 20. Page hero (inner) */
.phero{ background:var(--ink); color:var(--bone); position:relative; overflow:hidden; padding:clamp(140px,19vh,210px) 0 clamp(56px,7vw,92px); }
.phero .media{ position:absolute; inset:0; border-radius:0; opacity:.32; }
.phero .shell{ position:relative; z-index:3; }
.phero .lede{ margin-top:22px; }
.crumb{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,241,232,.45); margin-bottom:26px; }
.crumb a:hover{ color:var(--brass-2); }
.crumb span{ color:var(--brass-2); }

/* -------------------------------------------------- 21. Forms */
.form{ display:grid; gap:20px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ position:relative; }
.field label{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:9px; }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:12px 0; font-size:15.5px; transition:border-color .35s;
}
.field select{ -webkit-appearance:none; appearance:none; border-radius:0; cursor:pointer; }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-color:var(--brass); }
.field .err{ font-size:12px; color:var(--clay); margin-top:7px; display:none; }
.field.has-err .err{ display:block; }
.field.has-err input,.field.has-err textarea,.field.has-err select{ border-color:var(--clay); }
.form-note{ font-size:12.5px; color:rgba(18,16,13,.55); }
.form-ok{
  display:none; padding:18px 20px; background:rgba(183,131,47,.1); border-left:2px solid var(--brass);
  font-size:14.5px;
}
.form-ok.is-on{ display:block; }

/* contact info list */
.cinfo li{ display:grid; grid-template-columns:44px 1fr; gap:18px; padding-block:22px; border-bottom:1px solid var(--line); }
.cinfo svg{ width:20px; height:20px; color:var(--brass); margin-top:5px; }
.cinfo b{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:6px; }
.cinfo p, .cinfo a{ font-size:15.5px; line-height:1.6; }
.cinfo a:hover{ color:var(--brass); }

.map{ position:relative; min-height:340px; background:var(--ink-2); overflow:hidden; border-radius:var(--r); }
.map::before{ content:""; position:absolute; inset:0; background-image:var(--tex-blueprint); opacity:.6; }
.map-pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:var(--bone);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.map-pin i{ display:block; width:14px; height:14px; border-radius:50%; background:var(--brass); margin:0 auto 16px; position:relative; }
.map-pin i::after{ content:""; position:absolute; inset:-14px; border:1px solid var(--brass); border-radius:50%; animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:1 } 100%{ transform:scale(1.5); opacity:0 } }

/* accordion (faq) */
.faq{ border-top:1px solid var(--line); }
.faq li{ border-bottom:1px solid var(--line); }
.faq button{ width:100%; display:flex; justify-content:space-between; gap:24px; align-items:center; text-align:left; padding-block:22px; font-family:var(--ff-display); font-size:clamp(18px,2vw,23px); font-weight:400; }
.faq button i{ font-style:normal; color:var(--brass); font-family:var(--ff-mono); font-size:19px; transition:transform .4s var(--ease); }
.faq li.is-open button i{ transform:rotate(45deg); }
.faq-a{ height:0; overflow:hidden; transition:height .5s var(--ease-out); }
.faq-a p{ padding-bottom:24px; max-width:76ch; color:rgba(18,16,13,.66); font-size:15px; }

/* -------------------------------------------------- 22. WhatsApp float */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:60; width:54px; height:54px; border-radius:50%;
  background:#1FA855; color:#fff; display:grid; place-content:center;
  box-shadow:0 14px 34px rgba(31,168,85,.38); transition:transform .4s var(--ease);
}
.wa:hover{ transform:scale(1.08) rotate(6deg); }
.wa svg{ width:26px; height:26px; }

/* -------------------------------------------------- 23. Reveal */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s } .rv-d2{ transition-delay:.18s } .rv-d3{ transition-delay:.27s }
.rv-d4{ transition-delay:.36s } .rv-d5{ transition-delay:.45s } .rv-d6{ transition-delay:.54s }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* -------------------------------------------------- 24. Responsive */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:1fr; min-height:auto; }
  .hero-copy{ padding:clamp(130px,20vh,170px) var(--gut) 52px; }
  .hero-art{ min-height:56vh; }
  .hero-art::before{ background:linear-gradient(0deg, rgba(18,16,13,.9), rgba(18,16,13,.2)); }
  .hero-rail,.hero-scroll{ display:none; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .stats li:nth-child(3n+1){ border-left:0; }
  .stats li:nth-child(n+4){ border-top:1px solid var(--line-d); }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:repeat(2,1fr); }
  .vgrid{ grid-template-columns:repeat(2,1fr); }
  .pcard,.pcard--w6,.pcard--w8{ grid-column:span 6; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .sec-head{ grid-template-columns:1fr; align-items:start; }
  .split{ grid-template-columns:1fr; }
  .split--rev .split-art{ order:0; }
  .svc-head{ grid-template-columns:44px 1fr 44px; }
  .svc-desc{ display:none; }
  .svc-inner{ grid-template-columns:44px 1fr; }
  .svc-inner .media{ grid-column:2; }
  .svc-tags{ grid-column:2; }
  .ribbon{ right:66px; }
  .f2{ grid-template-columns:1fr; }
  .quote{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hero-badges{ grid-template-columns:1fr; }
  .hero-badges div + div{ border-left:0; border-top:1px solid var(--line-d); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats li:nth-child(odd){ border-left:0; }
  .stats li:nth-child(n+3){ border-top:1px solid var(--line-d); }
  .process,.vgrid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .pcard,.pcard--w6,.pcard--w8,.pcard--w12{ grid-column:span 12; }
  .split-art .stamp{ right:14px; bottom:-20px; }
  .brand-txt i{ display:none; }
}

/* -------------------------------------------------- 25. Additions */
.hero-badges > div:first-child{ padding-left:var(--gut); }
.hero-badges > div:last-child{ padding-right:var(--gut); }
.svc-tags li.act{ border-bottom:0; padding-top:24px; }
.svc-tags li.act::before{ display:none; }
.pcard--w4{ grid-column:span 4; }

/* pricing / spec table */
.spec{ width:100%; border-collapse:collapse; }
.hint-swipe{ display:none; }
@media (max-width:760px){
  .spec{ min-width:640px; }
  .hint-swipe{ display:flex; align-items:center; gap:10px; margin-bottom:14px; color:var(--brass); }
}
.spec th,.spec td{ text-align:left; padding:18px 14px; border-bottom:1px solid var(--line); font-size:14.8px; vertical-align:top; }
.spec th{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); border-bottom-color:var(--line); }
.spec td:first-child{ font-family:var(--ff-display); font-size:19px; padding-left:0; }
.spec th:first-child{ padding-left:0; }

/* service detail block */
.sblock{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4.5vw,76px); align-items:center; padding-block:clamp(48px,6vw,88px); border-bottom:1px solid var(--line); scroll-margin-top:110px; }
.sblock:last-child{ border-bottom:0; }
.sblock--rev .sblock-art{ order:2; }
.sblock-art{ position:relative; }
.sblock-art .media{ aspect-ratio:4/3.2; }
.sblock-art .idx{
  position:absolute; left:-10px; top:-34px; font-family:var(--ff-display); font-weight:300;
  font-size:clamp(64px,9vw,128px); line-height:1; color:var(--brass); opacity:.28; letter-spacing:-.04em;
}
.sblock ul.svc-tags{ margin-top:26px; }
@media (max-width:900px){
  .sblock{ grid-template-columns:1fr; }
  .sblock--rev .sblock-art{ order:0; }
  .sblock-art .idx{ left:auto; right:8px; top:-26px; }
}

/* -------------------------------------------------- 26. SEO / a11y structure */
.h1-seo{ margin:0; font-size:1rem; font-weight:inherit; line-height:inherit; }
.h1-seo .h1-kicker{ display:flex; font-weight:400; }
.h1-seo .h-xl{ display:block; margin-top:18px; }
.hero-copy .h1-seo .h-xl{ margin-top:24px; }
.skip{
  position:fixed; left:12px; top:-60px; z-index:200; padding:12px 18px; background:var(--brass); color:#fff;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:top .25s;
}
.skip:focus{ top:12px; }

/* footer credit */
.foot-bar .credit a{ color:rgba(245,241,232,.75); border-bottom:1px solid rgba(216,172,92,.4); padding:0 0 1px; transition:color .3s, border-color .3s; }
.foot-bar .credit a:hover{ color:var(--brass-2); border-color:var(--brass-2); padding-left:0; }
.foot-bar .heart{ color:var(--brass-2); }

/* ==========================================================================
   27. READABILITY LAYER
   Dark sections (.ink, heroes, CTAs, footer) get light text; gold text on the
   cream backgrounds uses a deeper "brass ink" that passes WCAG AA (≥4.5:1).
   ========================================================================== */
:root{
  --brass-ink:  #7A5415;   /* gold text on cream  — 5.6:1 on bone, 4.9:1 on bone-2 */
  --brass-btn:  #93661B;   /* gold fills behind white text — 5.0:1 */
  --on-dark:    rgba(245,241,232,.86);
  --on-dark-2:  rgba(245,241,232,.72);
}

/* --- gold text on light backgrounds */
.eyebrow, .ital, .accent, .svc-title small, .stats--light .stat-n, .process b, .field label,
.cinfo b, .faq button i, .spec th, .hint-swipe, .quote .qmark, .link-u:hover, .cinfo a:hover,
.filters button:hover, .svc:hover .svc-title, .svc.is-open .svc-title{ color:var(--brass-ink); }
.vgrid svg, .cinfo svg{ color:var(--brass-ink); }

/* --- …and back to bright gold wherever the background is dark */
:is(.ink,.phero,.cta,.hero,.foot,.drawer) :is(.eyebrow,.ital,.accent,.svc-title small,.process b,.spec th,.hint-swipe,.quote .qmark,.link-u:hover),
:is(.ink,.phero,.cta,.hero) .svc:hover .svc-title,
:is(.ink,.phero,.cta,.hero) .svc.is-open .svc-title{ color:var(--brass-2); }

/* --- body copy on dark backgrounds (was inheriting the dark cream-section colour) */
:is(.ink,.phero,.cta,.hero,.foot) .lede{ color:var(--on-dark); }
:is(.ink,.phero,.cta,.hero,.foot) .small{ color:var(--on-dark-2); }
.ink .svc-desc, .ink .process p{ color:var(--on-dark-2); }
.stat-l{ color:var(--on-dark-2); }
.stats--light .stat-l{ color:rgba(18,16,13,.72); }
.hero-badges span{ color:var(--on-dark-2); }
.crumb{ color:rgba(245,241,232,.66); }
.hero-rail{ color:rgba(245,241,232,.5); }
.foot a{ color:rgba(245,241,232,.8); }
.foot-bar p{ color:rgba(245,241,232,.62); }

/* --- body copy on light backgrounds: a touch darker */
.lede{ color:rgba(18,16,13,.74); }
.small, .form-note{ color:rgba(18,16,13,.7); }
.svc-desc, .process p, .vgrid p{ color:rgba(18,16,13,.72); }
.faq-a p{ color:rgba(18,16,13,.74); }

/* --- photo-backed sections: scrim between photo and text, plus a soft shadow */
.phero::after, .cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,16,13,.62) 0%, rgba(18,16,13,.42) 45%, rgba(18,16,13,.78) 100%);
}
.phero .shell{ z-index:3; }
.cta .shell{ z-index:3; }
.phero .shell, .cta .shell, .hero-copy{ text-shadow:0 1px 22px rgba(0,0,0,.45); }
.hero-copy .lede{ color:var(--on-dark); }

/* --- gold fills that carry white text */
.btn--brass, .ribbon, .split-art .stamp, .skip{ --bg:var(--brass-btn); background:var(--brass-btn); }

/* --- scroll reveal can never leave content invisible */
html:not(.js) .rv{ opacity:1; transform:none; }
@media print{ .rv{ opacity:1 !important; transform:none !important; } }
.hero .btn--ghost{
  --fg:var(--bone); color:var(--bone);
  box-shadow:inset 0 0 0 1.5px rgba(245,241,232,.4);
  background:rgba(245,241,232,.05);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero .btn--ghost:hover{ --fg:#fff; box-shadow:inset 0 0 0 1.5px var(--brass); }

/* ==========================================================================
   28. REAL-WORK GALLERY + LIGHTBOX
   ========================================================================== */
.gfilters{ margin-bottom:clamp(26px,3vw,40px); }
.ggrid{ column-count:3; column-gap:clamp(12px,1.4vw,22px); }
.gcard{ break-inside:avoid; margin:0 0 clamp(12px,1.4vw,22px); position:relative; background:var(--ink-2); border-radius:var(--r); overflow:hidden; }
.gcard.is-hidden{ display:none; }
.gbtn{ display:block; width:100%; padding:0; cursor:zoom-in; overflow:hidden; }
.gbtn img, .gcard video{ display:block; width:100%; height:auto; transition:transform .9s var(--ease-out), filter .5s; }
.gbtn:hover img{ transform:scale(1.04); filter:brightness(1.05); }
.gbtn:focus-visible{ outline:2px solid var(--brass-2); outline-offset:-4px; }
.gcard figcaption{
  padding:12px 14px 14px; color:var(--bone); font-family:var(--ff-display); font-size:16px; line-height:1.3;
}
.gcard figcaption em{
  display:block; font-style:normal; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-2); margin-bottom:5px;
}
.gcard--video video{ background:#000; }
@media (max-width:1000px){ .ggrid{ column-count:2; } }
@media (max-width:520px){ .ggrid{ column-count:1; } }

.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(10,9,7,.94);
  display:grid; grid-template-columns:64px 1fr 64px; align-items:center; padding:24px 12px;
}
.lightbox[hidden]{ display:none; }
.lb-fig{ margin:0; display:grid; justify-items:center; gap:14px; max-height:100%; }
.lb-fig img{ max-width:100%; max-height:calc(100vh - 110px); width:auto; height:auto; object-fit:contain; border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb-fig figcaption{ color:rgba(245,241,232,.86); font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.lb-nav, .lb-close{
  color:var(--bone); width:52px; height:52px; border-radius:50%; border:1px solid rgba(245,241,232,.25);
  font-size:30px; line-height:1; display:grid; place-content:center; transition:background .3s, border-color .3s;
}
.lb-nav:hover, .lb-close:hover{ background:var(--brass-btn); border-color:var(--brass-btn); }
.lb-close{ position:absolute; top:16px; right:16px; font-size:28px; }
body.lb-open{ overflow:hidden; }
@media (max-width:640px){
  .lightbox{ grid-template-columns:1fr; padding:70px 10px 90px; }
  .lb-nav{ position:absolute; bottom:22px; }
  .lb-prev{ left:calc(50% - 64px); } .lb-next{ right:calc(50% - 64px); }
}

/* ==========================================================================
   29. BEDS & MATTRESSES PAGE
   ========================================================================== */
.mgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.mcard{ background:var(--ink-2); border:1px solid var(--line-d); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.mcard .media{ aspect-ratio:4/3; border-radius:0; }
.mcard .media img{ transition:transform 1s var(--ease-out); }
.mcard:hover .media img{ transform:scale(1.05); }
.mcard-body{ padding:clamp(20px,2.2vw,30px); }
.mcard-no{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; color:var(--brass-2); }
.mcard h3{ font-family:var(--ff-display); font-weight:400; font-size:clamp(22px,2.2vw,28px); margin:10px 0 10px; color:var(--bone); }
.mcard p{ font-size:15px; color:var(--on-dark-2); }
@media (max-width:900px){ .mgrid{ grid-template-columns:1fr; } }

.svc-tags li .tag-link{ color:var(--brass-ink); border-bottom:1px solid currentColor; transition:color .3s; }
.ink .svc-tags li .tag-link{ color:var(--brass-2); }
.svc-tags li .tag-link:hover{ color:var(--ink); }
.ink .svc-tags li .tag-link:hover{ color:var(--bone); }
.phero .btn-row{ margin-top:26px; }

/* header: 6 links + button must stay on one line down to the 900px mobile breakpoint */
.nav a.nl, .nav .btn, .brand-txt b, .brand-txt i{ white-space:nowrap; }
@media (max-width:1200px){
  .nav{ gap:clamp(12px,1.4vw,20px); }
  .nav a.nl{ font-size:10.5px; letter-spacing:.12em; }
  .nav .btn{ padding:11px 14px; letter-spacing:.12em; }
}
@media (max-width:1040px){
  .brand-txt i{ display:none; }
  .nav .btn span{ font-size:10.5px; }
}

/* ==========================================================================
   30. INTERIOR SERVICE CARDS (services.html#interior-services)
   ========================================================================== */
.igrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.icard{ background:var(--bone); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; scroll-margin-top:110px; }
.icard .media{ aspect-ratio:4/3.4; border-radius:0; }
.icard .media img{ transition:transform 1s var(--ease-out); }
.icard:hover .media img{ transform:scale(1.05); }
.icard-body{ padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; flex:1; }
.icard-tag{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-ink); }
.icard h3{ font-family:var(--ff-display); font-weight:400; font-size:clamp(22px,2.2vw,28px); line-height:1.15; margin:10px 0 10px; }
.icard p{ font-size:15px; color:rgba(18,16,13,.74); }
.icard-feats{ display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 22px; }
.icard-feats li{ font-size:12px; padding:5px 11px; border:1px solid var(--line); border-radius:100px; color:rgba(18,16,13,.8); }
.icard .link-u{ margin-top:auto; align-self:flex-start; }
@media (max-width:1100px){ .igrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .igrid{ grid-template-columns:1fr; } }

/* ==========================================================================
   31. GALLERY GRID (replaces the multi-column masonry, which left columns empty)
   ========================================================================== */
.ggrid{ column-count:auto; columns:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.gcard{ margin:0; display:flex; flex-direction:column; }
.gbtn{ aspect-ratio:4/3.4; }
.gbtn img{ width:100%; height:100%; object-fit:cover; }
.gcard--video{ grid-row:span 2; }
.gcard--video video{ width:100%; height:100%; flex:1; min-height:0; object-fit:cover; }
.gcard figcaption{ flex:none; }
@media (max-width:1200px){ .ggrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px){ .ggrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .ggrid{ grid-template-columns:1fr; } .gcard--video{ grid-row:auto; } .gcard--video video{ aspect-ratio:9/14; height:auto; } }

/* ==========================================================================
   32. FREE ESTIMATE — footer band + floating button/pop-up
   ========================================================================== */
.foot-est{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,64px); align-items:center;
  padding:clamp(28px,3.4vw,44px); margin-bottom:clamp(48px,6vw,80px);
  background:var(--ink-2); border:1px solid var(--line-d); border-radius:var(--r); scroll-margin-top:110px;
}
.foot-est .foot-h{ margin-bottom:12px; }
.foot-est-title{ font-family:var(--ff-display); font-weight:300; font-size:clamp(24px,2.8vw,36px); line-height:1.15; color:var(--bone); letter-spacing:-.01em; }
.foot-est .small{ margin-top:12px; }

.est-form{ display:grid; grid-template-columns:1fr 1fr auto; gap:14px 16px; align-items:end; }
.est-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.est-field label{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-2); }
.est-field input{
  width:100%; padding:13px 14px; font-size:15.5px; color:var(--bone);
  background:rgba(245,241,232,.06); border:1px solid rgba(245,241,232,.22); border-radius:var(--r);
  transition:border-color .3s, background .3s;
}
.est-field input::placeholder{ color:rgba(245,241,232,.45); }
.est-field input:focus{ outline:0; border-color:var(--brass-2); background:rgba(245,241,232,.1); }
.est-err{ display:none; font-size:12px; color:#F2A57E; }
.est-field.has-err .est-err{ display:block; }
.est-field.has-err input{ border-color:#F2A57E; }
.est-submit{ justify-content:center; white-space:nowrap; height:50px; }
.est-ok{ grid-column:1 / -1; font-size:14px; color:var(--brass-3); min-height:0; }
.est-ok:empty{ display:none; }

/* floating button (bottom-left; WhatsApp stays bottom-right) */
.est-fab{
  position:fixed; left:22px; bottom:22px; z-index:60; display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:100px; background:var(--brass-btn); color:#fff;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 14px 34px rgba(18,16,13,.35); transition:transform .4s var(--ease), opacity .35s, background .3s;
}
.est-fab svg{ width:18px; height:18px; }
.est-fab:hover, .est-fab.is-open{ background:var(--ink); }
.est-fab:focus-visible{ outline:2px solid var(--brass-2); outline-offset:3px; }
.est-fab.is-away{ opacity:0; transform:translateY(14px); pointer-events:none; }

.est-pop{
  position:fixed; left:22px; bottom:86px; z-index:61; width:min(360px, calc(100vw - 44px));
  padding:26px 22px 22px; background:var(--ink); color:var(--bone);
  border:1px solid var(--line-d); border-radius:6px; box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.est-pop[hidden]{ display:none; }
.est-pop-title{ font-family:var(--ff-display); font-size:24px; line-height:1.2; }
.est-pop-sub{ font-size:14px; color:var(--on-dark-2); margin:6px 0 18px; }
.est-pop-close{ position:absolute; top:10px; right:12px; width:36px; height:36px; font-size:26px; line-height:1; color:var(--bone); border-radius:50%; }
.est-pop-close:hover{ background:rgba(245,241,232,.1); }
.est-form--compact{ grid-template-columns:1fr; }
.est-form--compact .est-submit{ width:100%; }

@media (max-width:980px){
  .foot-est{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .est-form{ grid-template-columns:1fr; }
  .est-submit{ width:100%; }
  .est-fab{ left:14px; bottom:16px; padding:13px 16px; }
  .est-pop{ left:14px; bottom:76px; width:calc(100vw - 28px); }
}
@media print{ .est-fab, .est-pop{ display:none !important; } }

/* ==========================================================================
   33. CLIENT REVIEWS (hidden until assets/js/reviews.js has entries)
   ========================================================================== */
#reviews[hidden]{ display:none; }
.rev-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.rev-card{ margin:0; background:var(--bone-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:16px; }
.rev-stars{ display:flex; gap:3px; }
.rev-stars svg{ width:17px; height:17px; }
.rev-stars .on svg{ fill:var(--brass-ink); }
.rev-stars .off svg{ fill:none; stroke:var(--brass-ink); stroke-width:1.4; }
.rev-card blockquote{ font-family:var(--ff-display); font-weight:300; font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--ink); flex:1; }
.rev-card blockquote::before{ content:"\201C"; color:var(--brass-ink); margin-right:2px; }
.rev-card blockquote::after{ content:"\201D"; color:var(--brass-ink); margin-left:2px; }
.rev-card figcaption{ display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--line); padding-top:14px; }
.rev-card figcaption b{ font-weight:600; font-size:15px; }
.rev-card figcaption span{ font-size:13.5px; color:rgba(18,16,13,.7); }
.rev-card figcaption em{ font-style:normal; font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-ink); margin-top:4px; }
@media (max-width:1000px){ .rev-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .rev-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   34. MAILER FORM STATES
   ========================================================================== */
.hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.est-submit.is-busy, .btn.is-busy{ opacity:.7; cursor:progress; }
.status-wa{ color:#7FE0A4; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.form-ok .status-wa{ color:#1C7A45; }
.form-ok.is-err{ border-left-color:var(--clay); background:rgba(156,74,36,.08); }