/* ══════════════════════════════════════════════════════════
   CASAN STEPS — warm, dark, workshop-luxury
   Display: Fraunces  ·  Text: Archivo
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:      #12100D;
  --ink-2:    #191510;
  --panel:    #1D1811;
  --bark:     #2A2218;
  --line:     rgba(233,214,178,.13);
  --line-2:   rgba(233,214,178,.26);

  --brass:    #C9A063;
  --brass-hi: #E7CB96;
  --ember:    #B85C38;

  --cream:    #F3EBDB;
  --sand:     #A3957C;
  --sand-dim: #7C715E;

  --pg: clamp(20px, 5.2vw, 92px);          /* page gutter */
  --maxw: 1440px;

  --f-disp: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.68,.16,1);
}

/* ─── reset ─── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--f-text);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.62;
  font-weight:350;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; font-family:var(--f-disp); font-weight:400; letter-spacing:-.022em; line-height:1.03 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
::selection{ background:var(--brass); color:var(--ink) }

:focus-visible{ outline:2px solid var(--brass-hi); outline-offset:3px; border-radius:2px }

.skip{
  position:fixed; top:10px; left:10px; z-index:999;
  padding:10px 16px; background:var(--brass); color:var(--ink);
  border-radius:2px; font-weight:600; transform:translateY(-160%);
}
.skip:focus{ transform:none }

/* ─── film grain (fixed, non-interactive) ─── */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── type helpers ─── */
.h2{
  font-size:clamp(2.15rem,5.4vw,4.5rem);
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 100;
}
.h2 .ital,.ital{ font-style:italic; color:var(--brass-hi) }

.eyebrow,.label{
  font-family:var(--f-text);
  font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--sand);
}
.label{ display:flex; align-items:center; gap:14px; margin-bottom:26px }
.label span{
  color:var(--brass); font-variant-numeric:tabular-nums;
  padding-right:14px; border-right:1px solid var(--line-2);
}
.label em{ font-style:normal }

/* ─── buttons ─── */
.btn{
  --bg:var(--brass); --fg:#1A1408;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border:1px solid transparent; border-radius:2px;
  background:var(--bg); color:var(--fg);
  font-size:.83rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,var(--brass-hi),var(--brass) 55%,#B98B49);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(201,160,99,.6) }
.btn:hover::after{ transform:none }
.btn:active{ transform:translateY(0) }
.btn--lg{ padding:17px 34px; font-size:.86rem }
.btn--sm{ padding:11px 18px; font-size:.72rem }
.btn--full{ width:100% }
.btn--ghost{
  --bg:transparent; --fg:var(--cream);
  border-color:var(--line-2);
}
.btn--ghost::after{ background:rgba(201,160,99,.1) }
.btn--ghost:hover{ color:var(--brass-hi); border-color:var(--brass); box-shadow:none }
.ico{ width:1.05em; height:1.05em; fill:currentColor; flex:none }

/* ══════════════════ NAV ══════════════════ */
.nav{
  position:fixed; inset:0 0 auto; z-index:800;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(18,16,13,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:16px var(--pg);
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto }
.brand__mark{ width:30px; height:30px; flex:none; fill:var(--brass) }
.brand__mark--lg{ width:44px; height:44px }
.brand__rail{ fill:none; stroke:var(--brass); stroke-width:1.6; opacity:.45 }
.brand__txt{ display:flex; flex-direction:column; line-height:1 }
.brand__name{
  font-family:var(--f-disp); font-size:1.06rem; font-weight:600;
  letter-spacing:.13em; color:var(--cream);
}
.brand__sub{
  font-size:.56rem; font-weight:600; letter-spacing:.42em;
  color:var(--brass); margin-top:4px;
}

.nav__links{ display:flex; gap:clamp(14px,1.9vw,32px) }
.nav__links a{
  position:relative; font-size:.78rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sand);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--cream) }
.nav__links a:hover::after{ transform:none; transform-origin:left }

.nav__act{ display:flex; align-items:center; gap:14px }
.lang{ display:flex; align-items:center; gap:7px; padding-right:12px; border-right:1px solid var(--line) }
.lang__b{
  background:none; border:0; padding:2px 1px; cursor:pointer;
  font-size:.71rem; font-weight:600; letter-spacing:.14em; color:var(--sand-dim);
  transition:color .3s var(--ease);
}
.lang__b:hover{ color:var(--cream) }
.lang__b.is-on{ color:var(--brass-hi) }
.lang__sep{ width:1px; height:11px; background:var(--line-2) }

.tel{
  display:flex; align-items:center; gap:8px;
  font-size:.83rem; font-weight:500; letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
.tel:hover{ color:var(--brass-hi) }
.tel .ico{ color:var(--brass) }

.burger{ display:none; width:38px; height:38px; background:none; border:1px solid var(--line-2); border-radius:2px; cursor:pointer; position:relative }
.burger span{
  position:absolute; left:10px; width:18px; height:1.5px; background:var(--cream);
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:15px }
.burger span:nth-child(2){ top:21px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg) }

.mobnav{
  display:none; flex-direction:column; gap:2px;
  padding:8px var(--pg) 26px;
  background:rgba(18,16,13,.97); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.mobnav a{
  padding:15px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-disp); font-size:1.5rem; color:var(--cream);
}
.mobnav__cta{ margin-top:18px; border:0 !important; color:var(--brass-hi) !important }

/* ══════════════════ HERO ══════════════════ */
.hero{ position:relative; padding-top:clamp(120px,15vh,180px); overflow:hidden }
.hero__glow{
  position:absolute; top:-18%; right:-8%; width:70vw; height:70vw; max-width:1000px; max-height:1000px;
  background:radial-gradient(circle at 50% 50%, rgba(201,160,99,.17), rgba(201,160,99,.05) 42%, transparent 68%);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pg);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,72px); align-items:center;
  padding-bottom:clamp(56px,8vw,110px);
}
.hero__h1{
  display:flex; flex-direction:column;
  font-size:clamp(2.9rem,7.4vw,6.6rem);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 144;
  margin:20px 0 26px; letter-spacing:-.035em;
}
.hero__h1 .ital{ margin-left:.06em }
.hero__sub{ max-width:50ch; color:#CFC2A9; font-size:clamp(1rem,.5vw + .92rem,1.16rem) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 30px }

.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chips li{
  padding:7px 15px; border:1px solid var(--line); border-radius:100px;
  font-size:.72rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--sand); background:rgba(233,214,178,.03);
}

.hero__art{ position:relative }
.shot--hero{
  aspect-ratio:4/5.1; border-radius:3px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85), 0 0 0 1px var(--line);
}
.shot__tag{
  position:absolute; left:16px; bottom:16px; z-index:2;
  padding:7px 13px; background:rgba(18,16,13,.72); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:2px;
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
}
.spec{
  position:absolute; left:clamp(-70px,-4vw,-20px); bottom:clamp(-34px,-3vw,-20px); z-index:3;
  max-width:290px; padding:22px 24px;
  background:linear-gradient(150deg,var(--bark),var(--ink-2));
  border:1px solid var(--line-2); border-radius:3px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.spec::before{
  content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--brass);
}
.spec__k{
  display:block; font-size:.64rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin-bottom:9px;
}
.spec__v{ font-size:.9rem; line-height:1.55; color:#CFC2A9 }

/* marquee */
.marquee{
  border-block:1px solid var(--line); background:rgba(233,214,178,.022);
  overflow:hidden; padding:15px 0; user-select:none;
}
.marquee__t{ display:flex; align-items:center; gap:26px; width:max-content; animation:slide 46s linear infinite }
.marquee__t span{
  font-family:var(--f-disp); font-size:clamp(1.1rem,2.1vw,1.7rem); font-style:italic;
  color:var(--sand-dim); white-space:nowrap;
}
.marquee__t i{ width:5px; height:5px; border-radius:50%; background:var(--brass); opacity:.55; flex:none }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ══════════════════ SECTION SHELL ══════════════════ */
.sec{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(72px,10vw,150px) var(--pg);
}
.sec__head{ margin-bottom:clamp(40px,5vw,72px) }
.sec__head--split{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,64px); align-items:end;
}
.sec__lede{ color:#BFB29A; max-width:46ch; padding-bottom:6px }

/* ══════════════════ WORK ══════════════════ */
.wgrid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.wcard{
  position:relative; padding:clamp(24px,2.6vw,38px);
  background:linear-gradient(165deg,rgba(233,214,178,.05),rgba(233,214,178,.012));
  border:1px solid var(--line); border-radius:3px;
  transition:border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.wcard::before{
  content:""; position:absolute; top:-1px; left:-1px; width:0; height:2px;
  background:var(--brass); transition:width .55s var(--ease);
}
.wcard:hover{ transform:translateY(-4px); border-color:var(--line-2); background:linear-gradient(165deg,rgba(233,214,178,.075),rgba(233,214,178,.02)) }
.wcard:hover::before{ width:56px }
.wcard__n{
  display:block; font-family:var(--f-disp); font-size:.82rem; font-weight:600;
  letter-spacing:.22em; color:var(--brass); margin-bottom:20px;
}
.wcard h3{ font-size:clamp(1.35rem,2.1vw,1.85rem); margin-bottom:12px; font-variation-settings:"SOFT" 16 }
.wcard p{ color:#B4A78F; font-size:.95rem }

.wcard--a{ grid-column:1 / 7 }
.wcard--b{ grid-column:7 / 13 }
.wcard--c{ grid-column:1 / 5 }
.wcard--d{ grid-column:5 / 9 }
.wshot{
  grid-column:9 / 13; min-height:230px; border-radius:3px;
  border:1px solid var(--line);
}

/* ══════════════════ WOODS ══════════════════ */
.sec--woods{ max-width:none; width:100% }
.sec--woods::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(201,160,99,.08), transparent 55%),
    var(--ink-2);
  border-block:1px solid var(--line);
}
.sec--woods > *{ max-width:var(--maxw); margin-inline:auto }

.woods{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr));
  gap:clamp(16px,1.8vw,26px);
}
.wood{
  padding:0 0 26px; border-top:1px solid var(--line);
  transition:transform .5s var(--ease);
}
.wood:hover{ transform:translateY(-5px) }
.wood__sw{
  position:relative; height:clamp(150px,17vw,210px); margin:16px 0 20px;
  border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28), 0 18px 34px -22px rgba(0,0,0,.9);
  background-image:
    repeating-linear-gradient(91deg, transparent 0 2px, rgba(58,36,16,.16) 2px 3px, transparent 3px 11px, rgba(58,36,16,.09) 11px 12px, transparent 12px 19px),
    repeating-linear-gradient(89deg, var(--w1) 0 26px, var(--w2) 26px 41px, var(--w1) 41px 74px),
    linear-gradient(168deg, var(--w1), var(--w2));
}
.wood__sw::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(18,16,13,0) 52%, rgba(18,16,13,.42));
}
.wood h3{ font-size:1.5rem; margin-bottom:9px; font-variation-settings:"SOFT" 14 }
.wood p{ color:#B4A78F; font-size:.92rem }

.wood[data-wood="oak"]     .wood__sw{ --w1:#D8C09A; --w2:#C0A177 }
.wood[data-wood="maple"]   .wood__sw{ --w1:#EBDDC2; --w2:#DCC8A5 }
.wood[data-wood="hickory"] .wood__sw{ --w1:#DCC095; --w2:#7A5231 }
.wood[data-wood="walnut"]  .wood__sw{ --w1:#6D4831; --w2:#3B2719 }
.wood[data-wood="pine"]    .wood__sw{ --w1:#E6C58E; --w2:#CFA05C }
.wood[data-wood="pine"] .wood__sw{
  background-image:
    radial-gradient(ellipse 22px 13px at 68% 34%, #8C5E2A, #B98546 42%, transparent 72%),
    radial-gradient(ellipse 15px 9px at 24% 71%, #8C5E2A, #B98546 44%, transparent 74%),
    repeating-linear-gradient(91deg, transparent 0 2px, rgba(58,36,16,.16) 2px 3px, transparent 3px 11px, rgba(58,36,16,.09) 11px 12px, transparent 12px 19px),
    repeating-linear-gradient(89deg, var(--w1) 0 26px, var(--w2) 26px 41px, var(--w1) 41px 74px),
    linear-gradient(168deg, var(--w1), var(--w2));
}
.wood--ask .wood__sw{
  display:grid; place-items:center;
  background-image:none;
  background:repeating-linear-gradient(135deg, rgba(201,160,99,.07) 0 9px, transparent 9px 18px), var(--bark);
  border:1px dashed var(--line-2);
}
.wood--ask .wood__sw::after{ display:none }
.wood--ask svg{ width:34px; height:34px; fill:none; stroke:var(--brass); stroke-width:1.4 }

/* ══════════════════ PROCESS — the staircase ══════════════════ */
.stair{ position:relative; max-width:1060px; margin-inline:auto }
.tread{
  position:relative;
  width:clamp(280px, 72%, 720px);
  margin-left:calc(var(--i) * 9%);
  margin-bottom:30px;
  padding:26px clamp(22px,2.4vw,34px);
  background:linear-gradient(150deg, rgba(233,214,178,.06), rgba(233,214,178,.015));
  border:1px solid var(--line);
  border-left:2px solid var(--brass);
  border-radius:2px;
  display:flex; gap:clamp(18px,2.4vw,32px); align-items:flex-start;
  box-shadow:0 26px 50px -34px rgba(0,0,0,.95);
  transition:transform .45s var(--ease), border-color .45s var(--ease);
}
.tread:hover{ transform:translateX(6px); border-color:var(--line-2); border-left-color:var(--brass-hi) }
/* the riser connecting each tread to the one above */
.tread::before{
  content:""; position:absolute; left:-2px; top:-31px; width:2px; height:31px;
  background:linear-gradient(var(--brass), rgba(201,160,99,.15));
}
.tread:first-child::before{ display:none }
.tread__n{
  font-family:var(--f-disp); font-size:clamp(1.8rem,3.4vw,2.9rem);
  color:var(--brass); opacity:.42; line-height:1; flex:none;
  font-variant-numeric:tabular-nums; font-style:italic;
}
.tread h3{ font-size:clamp(1.3rem,2vw,1.75rem); margin-bottom:9px }
.tread p{ color:#B4A78F; font-size:.95rem; max-width:52ch }

.proc__cta{
  margin-top:clamp(44px,5vw,70px); padding-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
}
.proc__cta p{
  font-family:var(--f-disp); font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2.1rem); color:var(--cream); max-width:20ch;
}

/* ══════════════════ GALLERY ══════════════════ */
.gal{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(80px,9vw,124px);
  gap:clamp(10px,1.2vw,16px);
}
.gal figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 18px 15px;
  background:linear-gradient(to top, rgba(18,16,13,.9), transparent);
  font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--cream);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gal .shot:hover figcaption{ opacity:1; transform:none }
.gal__1{ grid-area:1 / 1 / 4 / 6 }
.gal__2{ grid-area:1 / 6 / 3 / 13 }
.gal__3{ grid-area:3 / 6 / 6 / 10 }
.gal__4{ grid-area:4 / 1 / 6 / 6 }
.gal__5{ grid-area:3 / 10 / 6 / 13 }
.gal__6{ grid-area:6 / 1 / 9 / 13 }

/* ── photo slot: real photo on top, milled-wood fill underneath ── */
.shot{
  position:relative; margin:0; overflow:hidden; border-radius:3px;
  background-color:var(--bark);
  background-image:
    var(--src, none),
    linear-gradient(178deg, rgba(18,16,13,0) 46%, rgba(18,16,13,.5)),
    repeating-linear-gradient(93deg, transparent 0 3px, rgba(30,18,8,.2) 3px 4px, transparent 4px 13px, rgba(30,18,8,.12) 13px 14px, transparent 14px 23px),
    repeating-linear-gradient(89deg, #3E3122 0 34px, #4B3A27 34px 52px, #3E3122 52px 92px),
    linear-gradient(160deg, #4A3927, #2A2016);
  background-size:cover, auto, auto, auto, auto;
  background-position:center;
  background-repeat:no-repeat, repeat, repeat, repeat, no-repeat;
  box-shadow:inset 0 0 0 1px var(--line);
}
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(18,16,13,.45);
}

/* ══════════════════ PROOF ══════════════════ */
.sec--proof{ max-width:none; width:100% }
.sec--proof::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink-2); border-block:1px solid var(--line);
}
.proof{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,3vw,52px);
}
.quote{ margin:0; position:relative; padding-top:34px }
.quote::before{
  content:"“"; position:absolute; top:-14px; left:-6px;
  font-family:var(--f-disp); font-size:5rem; color:var(--brass); opacity:.32; line-height:1;
}
.quote p{
  font-family:var(--f-disp); font-size:clamp(1.08rem,1.5vw,1.32rem);
  line-height:1.42; color:var(--cream); font-variation-settings:"SOFT" 22;
}
.quote cite{
  display:block; margin-top:18px; font-style:normal;
  font-size:.68rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--sand-dim);
}

/* ══════════════════ FAQ ══════════════════ */
.faq{ max-width:940px }
.q{ border-top:1px solid var(--line) }
.q:last-child{ border-bottom:1px solid var(--line) }
.q summary{
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:26px 0; cursor:pointer; list-style:none;
  font-family:var(--f-disp); font-size:clamp(1.12rem,1.9vw,1.5rem); color:var(--cream);
  transition:color .3s var(--ease);
}
.q summary::-webkit-details-marker{ display:none }
.q summary:hover{ color:var(--brass-hi) }
.q summary i{
  position:relative; width:15px; height:15px; flex:none;
}
.q summary i::before,.q summary i::after{
  content:""; position:absolute; background:var(--brass); transition:transform .4s var(--ease);
}
.q summary i::before{ top:7px; left:0; width:15px; height:1.5px }
.q summary i::after{ left:6.75px; top:0; width:1.5px; height:15px }
.q[open] summary i::after{ transform:scaleY(0) }
.q[open] summary{ color:var(--brass-hi) }
.q p{ padding:0 60px 28px 0; color:#B4A78F; max-width:66ch; animation:fadein .5s var(--ease) }
@keyframes fadein{ from{ opacity:0; transform:translateY(-6px) } }

/* ══════════════════ CONTACT ══════════════════ */
.sec--contact{ max-width:none; width:100%; overflow:hidden }
.sec--contact::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(201,160,99,.13), transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--line);
}
.ct{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(34px,5vw,90px); align-items:start;
}
.ct__lede{ color:#BFB29A; margin-top:22px; max-width:42ch }
.ct__rail{ margin-top:38px; border-top:1px solid var(--line) }
.ct__row{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px;
  padding:18px 2px; border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease), border-color .4s var(--ease);
}
a.ct__row:hover{ padding-left:12px; border-bottom-color:var(--brass) }
.ct__k{ font-size:.68rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--sand-dim) }
.ct__v{
  font-family:var(--f-disp); font-size:clamp(1.02rem,1.6vw,1.36rem); color:var(--cream);
  overflow-wrap:anywhere;
}
a.ct__row:hover .ct__v{ color:var(--brass-hi) }

.ct__form{
  padding:clamp(26px,3vw,44px);
  background:linear-gradient(158deg, rgba(233,214,178,.055), rgba(233,214,178,.012));
  border:1px solid var(--line-2); border-radius:3px;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.95);
}
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.fld{ display:block; margin-bottom:14px }
.fld > span{
  display:block; margin-bottom:8px;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sand);
}
.fld input,.fld select,.fld textarea{
  width:100%; padding:13px 14px;
  background:rgba(18,16,13,.55); border:1px solid var(--line-2); border-radius:2px;
  font-size:.95rem; font-family:var(--f-text);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fld textarea{ resize:vertical; min-height:104px }
.fld select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9A063' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
}
.fld select option{ background:var(--bark); color:var(--cream) }
.fld input:hover,.fld select:hover,.fld textarea:hover{ border-color:rgba(201,160,99,.45) }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--brass); background:rgba(18,16,13,.8);
  box-shadow:0 0 0 3px rgba(201,160,99,.13);
}
.fld input:user-invalid,.fld textarea:user-invalid{ border-color:var(--ember) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.fnote{ margin-top:14px; font-size:.78rem; color:var(--sand-dim); text-align:center }
.fmsg{
  margin-top:16px; padding:0; font-size:.88rem; text-align:center;
  max-height:0; overflow:hidden; transition:max-height .45s var(--ease), padding .45s var(--ease);
}
.fmsg.is-on{ max-height:200px; padding:14px 16px; border-radius:2px }
.fmsg.ok{ background:rgba(201,160,99,.13); border:1px solid var(--brass); color:var(--brass-hi) }
.fmsg.err{ background:rgba(184,92,56,.14); border:1px solid var(--ember); color:#E0A78E }
.btn[data-busy="1"]{ opacity:.6; pointer-events:none }

/* ══════════════════ FOOTER ══════════════════ */
.foot{ border-top:1px solid var(--line); background:var(--ink) }
.foot__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(52px,6vw,84px) var(--pg) clamp(34px,4vw,52px);
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,52px);
}
.foot__tag{ margin-top:20px; max-width:32ch; color:var(--sand); font-size:.92rem }
.foot__col{ display:flex; flex-direction:column; gap:11px }
.foot__col h4{
  font-family:var(--f-text); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:6px;
}
.foot__col a,.foot__col span{ font-size:.9rem; color:var(--sand); transition:color .3s var(--ease) }
.foot__col a:hover{ color:var(--brass-hi) }
.foot__col em{ font-style:normal; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sand-dim) }
.foot__base{
  max-width:var(--maxw); margin-inline:auto;
  padding:22px var(--pg) 26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.76rem; letter-spacing:.06em; color:var(--sand-dim);
}

/* ══════════════════ MOBILE CALL BAR ══════════════════ */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:850;
  display:none; gap:1px;
  background:var(--line-2);
  border-top:1px solid var(--line-2);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.callbar.is-on{ transform:none }
.callbar__a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 10px;
  font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.callbar__a--tel{ background:var(--ink-2); color:var(--cream) }
.callbar__a--quote{ background:var(--brass); color:#1A1408 }

/* ══════════════════ REVEAL ══════════════════ */
.reveal{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; will-change:auto }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s }
.d4{ transition-delay:.32s } .d5{ transition-delay:.4s }  .d6{ transition-delay:.48s }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:44px }
  .hero__art{ max-width:560px; margin-inline:auto; width:100% }
  .spec{ left:auto; right:0; bottom:-26px; max-width:270px }
  .sec__head--split{ grid-template-columns:1fr; align-items:start }
  .ct{ grid-template-columns:1fr }
  .wcard--a,.wcard--b{ grid-column:span 12 }
  .wcard--c,.wcard--d{ grid-column:span 6 }
  .wshot{ grid-column:span 12; min-height:200px }
  .foot__in{ grid-template-columns:1fr 1fr }
}

@media (max-width:860px){
  .nav__links{ display:none }
  .tel span{ display:none }
  .nav .btn--sm{ display:none }
  .burger{ display:block }
  .nav.is-open .mobnav{ display:flex }
  .nav.is-open{ background:rgba(18,16,13,.97); backdrop-filter:blur(14px) }
  .callbar{ display:flex }
  body{ padding-bottom:0 }
  .foot__base{ padding-bottom:88px }
  .tread{ width:100%; margin-left:0; padding-left:22px }
  .tread::before{ display:none }
  .gal{ grid-auto-rows:auto; display:flex; flex-direction:column }
  .gal .shot{ aspect-ratio:4/3 }
  .gal figcaption{ opacity:1; transform:none }
}

@media (max-width:620px){
  .wcard--c,.wcard--d{ grid-column:span 12 }
  .f2{ grid-template-columns:1fr }
  .foot__in{ grid-template-columns:1fr; gap:32px }
  .hero__h1{ font-size:clamp(2.6rem,11vw,3.6rem) }
  .spec{ position:relative; right:auto; bottom:auto; margin-top:18px; max-width:none }
  .proc__cta{ flex-direction:column; align-items:flex-start }
  .q p{ padding-right:0 }
}

/* ══════════════════ MOTION PREFERENCES ══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none }
}