/* =========================================================
   Wilson Woodworking
   Design language: vintage sign shop / lumber catalogue.
   Built from the shop's own cues — the heraldic seal, the
   black metal corner brackets on his planters, engraved
   plates, and hanging price tags.
   ========================================================= */

:root{
  /* Woods */
  --bark:        #150e07;
  --walnut:      #26180d;
  --walnut-2:    #33210f;
  --umber:       #4a2e17;
  --redwood:     #8a3a17;
  --rust:        #a8481f;
  --cedar:       #c07a45;

  /* Metal */
  --brass:       #c9a227;
  --brass-lt:    #e8cd7c;
  --brass-dk:    #7d6112;
  --iron:        #191309;

  /* Outdoors */
  --forest:      #1f3320;
  --forest-2:    #2c4630;
  --sage:        #7d9070;

  /* Papers */
  --kraft:       #d8c2a0;
  --parchment:   #efe4d2;
  --linen:       #faf4ea;
  --bone:        #f6eddf;

  /* Ink */
  --ink:         #221708;
  --ink-soft:    #5c442b;
  --on-dark:     #f1e5d1;
  --on-dark-2:   #c2ab8c;

  --r-sm: 2px;
  --r-md: 3px;

  --wrap: 1180px;
  --ease: cubic-bezier(.4,.14,.3,1);

  /* Paper tooth for the light sections (procedural — no asset needed). */
  --tex-paper:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='320' height='320' filter='url(%23p)'/></svg>");

  /* Real plank wall — every timber surface on the site is this one photo,
     tinted by whatever gradient is stacked on top of it. */
  --tex-planks: url("assets/img/wood-planks.jpg");
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:"Lora", Georgia, serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--rust); }

h1,h2,h3{
  font-family:"Bevan", Georgia, serif;
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.005em;
  margin:0 0 .5em;
  text-wrap:balance;
}
p{ margin:0 0 1.15em; text-wrap:pretty; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.wrap{ width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brass); color:var(--bark);
  padding:.75rem 1.25rem; font-family:"Oswald",sans-serif; font-weight:600;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; }

/* ═══ Shared ornaments ═══════════════════════════════════ */

/* Sign-painter kicker */
.kicker{
  font-family:"Oswald", sans-serif; font-weight:500;
  font-size:.76rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rust); margin:0 0 1.1rem;
}
.titleblock--light .kicker,
.section--timber .kicker,
.section--forest .kicker{ color:var(--brass); }

/* Hand-lettered accent */
.script{
  font-family:"Yellowtail", cursive; font-weight:400;
  font-size:1.5rem; line-height:1.3; color:var(--brass-lt);
  letter-spacing:.01em;
}

/* Catalogue rule with a diamond */
.rule{ display:flex; align-items:center; gap:.6rem; margin:1.2rem 0 1.5rem; color:var(--rust); }
.rule i{ display:block; height:2px; background:currentColor; opacity:.4; flex:none; }
.rule i:first-child{ width:56px; }
.rule i:last-child{ width:16px; }
.rule b{ display:block; width:7px; height:7px; background:currentColor; transform:rotate(45deg); flex:none; }
.rule--light{ color:var(--brass); }
.rule--tight{ margin:1rem 0; }
.titleblock--center .rule{ justify-content:center; }
.titleblock--center .rule i:last-child{ width:56px; }

/* The black corner brackets from his planter boxes */
.bracket{
  position:absolute; width:20px; height:20px; pointer-events:none;
  border:3px solid var(--iron); opacity:.85;
}
.bracket--tl{ top:-3px; left:-3px; border-right:0; border-bottom:0; }
.bracket--br{ bottom:-3px; right:-3px; border-left:0; border-top:0; }

/* Small stamped chip */
.chip{
  display:inline-block;
  font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--forest-2); border:1px solid rgba(44,70,48,.4);
  padding:.35rem .6rem;
}

/* ═══ Buttons ════════════════════════════════════════════ */
.btn{
  display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.9rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.95rem 1.9rem; border:0; border-radius:var(--r-sm);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .2s, color .2s;
}
.btn--primary{
  background:linear-gradient(180deg, var(--rust), var(--redwood) 55%, #6f2d11);
  color:#fdf3e4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 4px 0 -1px #4d1e0a,
    0 12px 26px rgba(0,0,0,.32);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.3), 0 6px 0 -1px #4d1e0a, 0 16px 32px rgba(0,0,0,.38); }
.btn--primary:active{ transform:translateY(1px); }

.btn--ghost{
  background:transparent; color:var(--brass-lt);
  border:2px solid rgba(201,162,39,.55);
}
.btn--ghost:hover{ background:rgba(201,162,39,.14); border-color:var(--brass); color:#fff6e2; }

.btn--tag{
  background:transparent; color:var(--on-dark);
  border:1.5px solid rgba(241,229,209,.4);
  padding:.75rem 1.4rem; font-size:.82rem;
}
.btn--tag:hover{ background:rgba(241,229,209,.12); border-color:var(--on-dark); }
.btn--tag-gold{
  background:linear-gradient(180deg,var(--brass-lt),var(--brass) 60%,#a4820f);
  color:var(--bark); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 -1px #6d5410;
  text-shadow:none;
}
.btn--tag-gold:hover{ background:linear-gradient(180deg,#f4dc98,var(--brass-lt) 60%,var(--brass)); }
.btn--block{ display:block; width:100%; }

/* ═══ Sections & surfaces ════════════════════════════════ */
.section{ position:relative; isolation:isolate; padding:clamp(4.5rem,9vw,7.5rem) 0; }

.section--parchment{ background:var(--parchment); }
.section--linen{ background:var(--linen); }
.section--parchment::before,
.section--linen::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--tex-paper); background-size:320px 320px;
  opacity:.5; mix-blend-mode:multiply;
}

/* Dark timber wall — real planks under a brown veil */
.section--timber{
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(74,47,23,.5) 0%, transparent 62%),
    linear-gradient(180deg, rgba(38,24,13,.85) 0%, rgba(19,12,6,.92) 100%),
    var(--tex-planks) top center/1400px auto repeat;
  color:var(--on-dark);
}

/* The same boards, painted forest green */
.section--forest{
  background:
    linear-gradient(180deg, rgba(31,51,32,.93) 0%, rgba(21,35,24,.955) 100%),
    var(--tex-planks) top center/1400px auto repeat;
  color:var(--on-dark);
}

/* Saw-cut edge biting up into a light section */
.sawn-top{ padding-top:calc(clamp(4.5rem,9vw,7.5rem) + 20px); }
.sawn-top::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:20px; z-index:1;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='20'><polygon points='13,0 26,20 0,20' fill='%23faf4ea'/></svg>") 0 0/26px 20px repeat-x;
}

.titleblock{ max-width:44rem; margin-bottom:3.4rem; }
.titleblock h2{ font-size:clamp(1.85rem,3.9vw,2.9rem); margin-bottom:0; }
.titleblock__lede{ font-size:1.06rem; color:var(--ink-soft); margin:0; }
.titleblock--light h2{ color:var(--on-dark); text-shadow:0 2px 0 rgba(0,0,0,.45); }
.titleblock--light .titleblock__lede{ color:var(--on-dark-2); }
.titleblock--center{ margin-inline:auto; text-align:center; }
.lede{ font-size:1.06rem; }
.section--timber .lede{ color:var(--on-dark-2); }

/* ═══ Nav ════════════════════════════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(19,12,6,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 0 var(--brass-dk), 0 14px 30px rgba(0,0,0,.4);
}
.nav__inner{
  width:min(100% - 2.6rem, 1300px); margin-inline:auto;
  display:flex; align-items:center; gap:1.3rem; padding:.8rem 0;
}

.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto; }
.brand__seal{
  display:block; width:48px; height:48px; border-radius:50%; flex:none;
  padding:2px; background:linear-gradient(150deg,var(--brass-lt),var(--brass-dk));
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.brand__seal img{ width:100%; height:100%; border-radius:50%; }
.brand__seal--lg{ width:64px; height:64px; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:"Bevan",serif; font-size:1.3rem; color:var(--brass-lt);
  text-transform:uppercase; letter-spacing:.03em;
  text-shadow:0 2px 0 rgba(0,0,0,.55);
}
.brand__sub{
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-2); margin-top:.38rem;
}

.nav__links{ display:flex; align-items:center; gap:.1rem; }
.nav__links a{
  position:relative; padding:.5rem .78rem; text-decoration:none;
  font-family:"Oswald",sans-serif; font-weight:400;
  font-size:.82rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--on-dark); transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:.78rem; right:.78rem; bottom:.28rem; height:2px;
  background:var(--brass); transform:scaleX(0); transition:transform .25s var(--ease);
}
.nav__links a:hover{ color:var(--brass-lt); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{
  background:linear-gradient(180deg,var(--rust),var(--redwood));
  color:#fdf3e4 !important; padding:.62rem 1.15rem !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 -1px #4d1e0a;
}
.nav__cta::after{ display:none !important; }
.nav__cta:hover{ background:linear-gradient(180deg,#bb5326,var(--rust)); }

.nav__phone{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--brass-lt); font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.95rem; letter-spacing:.05em;
  padding-left:1.1rem; border-left:1px solid rgba(201,162,39,.3);
}
.nav__phone svg{ width:16px; height:16px; fill:currentColor; }
.nav__phone:hover{ color:#fff; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav__toggle span{ display:block; width:26px; height:2.5px; background:var(--brass-lt); transition:transform .3s var(--ease), opacity .2s; }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ═══ Hero ═══════════════════════════════════════════════ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(8rem,14vw,11rem) 0 clamp(7.5rem,12vw,10.5rem);
  background:
    radial-gradient(85% 65% at 76% 16%, rgba(168,72,31,.30) 0%, transparent 60%),
    radial-gradient(70% 60% at 6% 96%, rgba(31,51,32,.5) 0%, transparent 65%),
    linear-gradient(166deg, rgba(58,36,16,.74) 0%, rgba(33,21,11,.86) 45%, rgba(17,11,5,.93) 100%),
    var(--tex-planks) top center/1400px auto repeat;
  color:var(--on-dark);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.5) 100%);
}

.hero__inner{
  position:relative; z-index:2;
  width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}

.script--hero{ display:block; margin:0 0 .35rem; font-size:clamp(1.35rem,2.2vw,1.75rem); }

.hero__title{
  margin:0; font-size:clamp(2.5rem,5.9vw,4.6rem); line-height:.98;
  text-transform:none;
}
.hero__line1, .hero__line2{ display:block; }
.hero__line1{
  color:#f6ebd8;
  text-shadow:0 2px 0 rgba(0,0,0,.6), 0 3px 2px rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.09);
}
.hero__line2{
  color:var(--brass-lt);
  text-shadow:0 2px 0 rgba(0,0,0,.6), 0 3px 2px rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.12);
}
.hero__lede{ font-size:clamp(1.02rem,1.4vw,1.14rem); color:#dcc9ad; max-width:33rem; margin-bottom:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.2rem; }

.hero__marks{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#b49b7c;
}
.hero__marks li{ display:flex; align-items:center; gap:.6rem; }
.hero__marks li+li::before{
  content:""; width:5px; height:5px; background:var(--brass); transform:rotate(45deg); opacity:.8;
}

/* Framed print hung on the wall */
.hero__art{ position:relative; justify-self:center; width:100%; max-width:392px; }
.hanger{ position:absolute; top:-46px; left:50%; transform:translateX(-50%); width:2px; height:46px; background:linear-gradient(180deg,rgba(201,162,39,.15),rgba(201,162,39,.55)); }
.hanger__nail{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #f0d894, var(--brass) 45%, #6d5410);
  box-shadow:0 3px 6px rgba(0,0,0,.6);
}

.frame{
  position:relative; margin:0;
  padding:10px;
  background:
    linear-gradient(150deg, rgba(96,61,31,.5), rgba(50,30,14,.68) 60%, rgba(74,46,23,.55)),
    var(--tex-planks) center/cover;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,255,255,.12),
    0 26px 60px rgba(0,0,0,.55);
}
.frame__mat{
  padding:6px; background:var(--bone);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.frame__mat img{ width:100%; height:auto; display:block; }
.frame--hero{ transform:rotate(-1.2deg); }
.frame--hero .frame__mat img{ aspect-ratio:540/690; object-fit:cover; object-position:center 40%; }

/* Hanging price tag */
.pricetag{
  position:absolute; left:-30px; bottom:44px; width:136px;
  padding:2.1rem .7rem 1rem; text-align:center;
  transform:rotate(-5deg);
  clip-path:polygon(50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.6));
  background:
    linear-gradient(170deg, rgba(88,56,28,.74), rgba(56,34,16,.84) 60%, rgba(38,22,10,.89)),
    var(--tex-planks) center/cover;
}
.pricetag__hole{
  position:absolute; top:1.15rem; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%;
  background:var(--bark);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.14);
}
.pricetag__label{
  display:block; font-family:"Oswald",sans-serif; font-weight:400;
  font-size:.57rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
}
.pricetag__amt{
  display:block; font-family:"Bevan",serif; font-size:1.9rem; line-height:1.2; color:var(--bone);
  text-shadow:0 2px 0 rgba(0,0,0,.65);
}

/* Treeline — height tracks the slice scale so tree tops never clip. */
.treeline{ position:absolute; left:0; right:0; bottom:-1px; height:clamp(80px, 9vw, 200px); z-index:2; }
.treeline svg{ width:100%; height:100%; display:block; }
.treeline__front use, .treeline__ground{ fill:var(--parchment); }
.treeline__back use{ fill:var(--parchment); opacity:.28; }

/* ═══ Creed ribbon ═══════════════════════════════════════ */
.ribbon{
  background:linear-gradient(180deg,#8a3a17,#6f2d11);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.16);
}
.ribbon__inner{
  width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.9rem 1.6rem; padding:1.05rem 0;
  font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.82rem; letter-spacing:.24em; text-transform:uppercase;
  color:#fbeedb; text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.ribbon__inner i{ display:block; width:6px; height:6px; background:var(--brass-lt); transform:rotate(45deg); flex:none; }

/* ═══ Catalogue (services) ═══════════════════════════════ */
.catalog{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 3.4rem;
}
.catalog__item{
  display:grid; grid-template-columns:auto 1fr auto; gap:0 1.3rem;
  align-items:start; padding:1.9rem 0;
  border-top:1px solid rgba(74,46,23,.26);
  transition:background .25s var(--ease);
}
.catalog__item:hover{ background:rgba(168,72,31,.05); }
.catalog__no{
  font-family:"Bevan",serif; font-size:2.1rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(138,58,23,.55);
  padding-top:.1rem;
}
.catalog__body h3{ font-size:1.16rem; margin-bottom:.45rem; color:var(--umber); }
.catalog__body p{ font-size:.95rem; color:var(--ink-soft); margin-bottom:.8rem; }
.catalog__art{
  width:42px; height:42px; flex:none; opacity:.55;
  fill:none; stroke:var(--rust); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.catalog__note{ text-align:center; margin:2.8rem 0 0; color:var(--ink-soft); }
.catalog__note a{ font-weight:600; }

/* ═══ Gallery ════════════════════════════════════════════ */
.filters{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2rem; }
.filter{
  background:rgba(241,229,209,.05);
  border:1.5px solid rgba(201,162,39,.32);
  color:var(--on-dark-2); cursor:pointer;
  font-family:"Oswald",sans-serif; font-weight:400;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.62rem 1.15rem; border-radius:var(--r-sm);
  transition:all .22s var(--ease);
}
.filter:hover{ color:var(--brass-lt); border-color:var(--brass); }
.filter.is-active{
  background:linear-gradient(180deg,var(--brass-lt),var(--brass) 65%,#a4820f);
  border-color:transparent; color:var(--bark); font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 -1px #6d5410;
}

.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(238px,1fr));
  grid-auto-rows:186px; gap:1.15rem;
}
.tile{
  margin:0; position:relative; overflow:hidden; cursor:zoom-in;
  grid-row:span 2; background:#1c1108;
  border:7px solid var(--bone);
  box-shadow:0 12px 26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile--tall{ grid-row:span 3; }
.tile--sm{ grid-row:span 1; }
.tile--wide{ grid-column:span 2; }
.tile--sign img{ object-position:center 62%; }

.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .75s var(--ease); }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 44%, rgba(12,7,2,.9) 100%);
  opacity:.85; transition:opacity .3s var(--ease);
}
.tile:hover{ transform:translateY(-5px); border-color:#fff; box-shadow:0 20px 44px rgba(0,0,0,.7); }
.tile:hover img{ transform:scale(1.07); }
.tile:hover::after{ opacity:.96; }

.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem 1.05rem;
  transform:translateY(6px); transition:transform .3s var(--ease);
}
.tile:hover figcaption{ transform:translateY(0); }
.tile figcaption strong{
  display:block; font-family:"Bevan",serif; font-weight:400;
  font-size:.94rem; line-height:1.25; color:#fbf1de;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}
.tile figcaption span{
  display:block; margin-top:.25rem;
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-lt);
}
.tile--sm figcaption{ padding:.7rem .8rem; }
.tile--sm figcaption strong{ font-size:.8rem; }
.tile--sm figcaption span{ font-size:.58rem; }
.tile.is-hidden{ display:none; }
.grid__empty{ text-align:center; color:var(--on-dark-2); margin-top:2rem; }

/* ═══ Craft ══════════════════════════════════════════════ */
.craft{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4.2rem); align-items:center; }
.craft__media{ margin:0; position:relative; }
.craft__media .frame{ transform:rotate(-1.1deg); }
.craft__cap{
  position:absolute; right:-8px; bottom:-20px; max-width:72%;
  background:linear-gradient(180deg,var(--forest-2),var(--forest));
  color:var(--on-dark-2);
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.7rem 1.05rem; transform:rotate(-1.1deg);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.craft__copy h2{ color:var(--umber); }
.craft__copy .lede{ color:var(--ink-soft); }

/* Engraved brass-riveted spec plate */
.plate{
  position:relative; margin:2.2rem 0 0;
  display:grid; gap:1.3rem;
  padding:2rem 2.1rem;
  background:
    linear-gradient(165deg, rgba(43,27,12,.90), rgba(26,16,7,.94)),
    var(--tex-planks) center/cover;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.25), 0 16px 34px rgba(0,0,0,.3);
}
.plate__rivet{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #f0d894, var(--brass) 45%, #5d470c);
  box-shadow:0 1px 2px rgba(0,0,0,.8);
}
.plate__rivet--tl{ top:10px; left:10px; }
.plate__rivet--tr{ top:10px; right:10px; }
.plate__rivet--bl{ bottom:10px; left:10px; }
.plate__rivet--br{ bottom:10px; right:10px; }
.plate dt{
  font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-lt); margin-bottom:.3rem;
  text-shadow:0 1px 1px rgba(0,0,0,.7);
}
.plate dd{ margin:0; font-size:.94rem; color:#cbb597; }

/* ═══ Options ════════════════════════════════════════════ */
.options{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:1.2rem;
}
.options li{
  position:relative; padding:1.6rem 1.5rem;
  background:rgba(0,0,0,.18);
  border-top:2px solid var(--brass);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.16);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.options li:hover{ background:rgba(0,0,0,.3); transform:translateY(-3px); }
.options svg{ width:30px; height:30px; margin-bottom:.85rem; fill:none; stroke:var(--brass); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.options h3{
  font-family:"Oswald",sans-serif; font-weight:500; font-size:.94rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); margin-bottom:.4rem;
}
.options p{ margin:0; font-size:.92rem; color:var(--on-dark-2); }

.delivery{
  margin-top:1.8rem; display:flex; align-items:center; gap:1.5rem;
  padding:1.5rem 1.8rem;
  background:rgba(201,162,39,.1);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.34);
}
.delivery svg{ width:58px; height:38px; flex:none; fill:none; stroke:var(--brass-lt); stroke-width:1.7; stroke-linejoin:round; }
.delivery h3{
  font-family:"Oswald",sans-serif; font-weight:500; font-size:1rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); margin-bottom:.25rem;
}
.delivery p{ margin:0; font-size:.93rem; color:var(--on-dark-2); }

/* ═══ Pricing — hanging tags ═════════════════════════════ */
.tags{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(268px,1fr));
  gap:1.6rem; align-items:stretch;
}
.tagcard{ position:relative; padding-top:52px; display:flex; flex-direction:column; }
.tagcard::before{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:2px; height:46px;
  background:linear-gradient(180deg, rgba(120,90,50,.25), rgba(120,90,50,.8));
}
.tagcard::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #f0d894, var(--brass) 45%, #6d5410);
  box-shadow:0 3px 6px rgba(0,0,0,.35);
}
.tagcard__body{
  position:relative; text-align:center;
  flex:1; display:flex; flex-direction:column;
  padding:3.4rem 1.5rem 2rem;
  clip-path:polygon(50% 0, 100% 11%, 100% 100%, 0 100%, 0 11%);
  filter:drop-shadow(0 16px 26px rgba(30,18,8,.4));
  background:
    linear-gradient(172deg, rgba(78,49,24,.80), rgba(50,30,14,.87) 55%, rgba(34,20,9,.91)),
    var(--tex-planks) center/cover;
}
.tagcard__hole{
  position:absolute; top:1.5rem; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--parchment);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55);
}
.tagcard h3{
  font-size:1.14rem; line-height:1.3; color:var(--bone); margin-bottom:1.1rem;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.tagcard__from{
  margin:0; font-family:"Oswald",sans-serif; font-weight:400;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
}
.tagcard__amt{
  margin:.15rem 0 1.3rem; font-family:"Bevan",serif; font-size:3.1rem; line-height:1;
  color:var(--bone); text-shadow:0 3px 0 rgba(0,0,0,.55);
}
.tagcard__amt--word{ font-size:1.9rem; }
.tagcard ul{ flex:1; list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.55rem; align-content:start; text-align:left; }
.tagcard .btn{ align-self:center; }
.tagcard li{
  position:relative; padding-left:1.35rem; font-size:.89rem; color:#cfba9c; line-height:1.5;
}
.tagcard li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; background:var(--brass); transform:rotate(45deg);
}

.tagcard--feature .tagcard__body{
  padding-top:4rem;
  background:
    linear-gradient(172deg, rgba(96,62,30,.76), rgba(62,38,17,.85) 55%, rgba(44,27,12,.89)),
    var(--tex-planks) center/cover;
  box-shadow:inset 0 0 0 2px rgba(201,162,39,.4);
  filter:drop-shadow(0 22px 34px rgba(30,18,8,.5));
}
.tagcard--feature .tagcard__amt{ color:var(--brass-lt); }
.tagcard__flag{
  display:inline-block; margin-bottom:.9rem;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  color:var(--bark); font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.36rem .8rem;
}

/* Redwood upgrade */
.upgrade{
  margin-top:2rem; display:flex; align-items:center; gap:1.5rem;
  padding:1.5rem 1.8rem;
  background:rgba(168,72,31,.09);
  box-shadow:inset 0 0 0 1px rgba(138,58,23,.35);
}
.upgrade__badge{
  flex:none; display:grid; place-items:center; min-width:104px; padding:.75rem 1rem;
  background:linear-gradient(180deg,var(--rust),var(--redwood));
  color:#fdf3e4; font-family:"Bevan",serif; font-size:1.45rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 0 -1px #4d1e0a;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.upgrade h3{ font-size:1.12rem; color:var(--umber); margin-bottom:.2rem; }
.upgrade p{ margin:0; font-size:.95rem; color:var(--ink-soft); }

/* Add-on list */
.addons{
  position:relative; margin-top:1.6rem; padding:2rem 2.1rem 1.5rem;
  background:var(--bone); box-shadow:inset 0 0 0 1px rgba(74,46,23,.2);
}
.addons__title{
  font-family:"Oswald",sans-serif; font-weight:500; font-size:.92rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--forest-2);
  margin-bottom:1.2rem; padding-bottom:.8rem;
  border-bottom:2px solid rgba(44,70,48,.25);
}
.addons__list{ list-style:none; margin:0; padding:0; columns:2; column-gap:2.8rem; }
.addons__list li{
  break-inside:avoid; display:flex; align-items:baseline; gap:.6rem;
  padding:.62rem 0; border-bottom:1px dotted rgba(74,46,23,.3);
}
.addons__list li span{ flex:1; font-size:.94rem; }
.addons__list li em{ display:block; font-style:italic; font-size:.79rem; color:var(--ink-soft); opacity:.85; }
.addons__list li b{ font-family:"Bevan",serif; font-weight:400; font-size:1rem; color:var(--rust); white-space:nowrap; }
.addons__inc{
  font-family:"Oswald",sans-serif !important; font-weight:500; font-size:.64rem !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--forest-2) !important;
  border:1px solid rgba(44,70,48,.4); padding:.3rem .55rem;
}
.prices__note{ margin:2.4rem auto 0; max-width:46rem; text-align:center; font-size:.95rem; color:var(--ink-soft); }

/* ═══ Testimonials — taped notes ═════════════════════════ */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(288px,1fr)); gap:2rem 1.6rem; }
.quote{
  position:relative; margin:0; display:flex; flex-direction:column;
  padding:2.4rem 1.7rem 1.6rem;
  background:var(--kraft);
  background-image:var(--tex-paper); background-size:320px 320px; background-blend-mode:multiply;
  box-shadow:0 10px 24px rgba(60,40,20,.2);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
/* Tilt lives in a custom property so the reveal transition can compose with
   it — a bare `transform: rotate()` here would be cancelled by .is-in. */
.quote{ --tilt:0deg; transform:rotate(var(--tilt)); }
.quote:nth-child(1){ --tilt:-.9deg; }
.quote:nth-child(2){ --tilt:.5deg; }
.quote:nth-child(3){ --tilt:-.4deg; }
.js .quote.reveal.is-in{ transform:rotate(var(--tilt)); }
.quote:hover,
.js .quote.reveal.is-in:hover{ transform:rotate(0deg) translateY(-5px); box-shadow:0 18px 36px rgba(60,40,20,.28); }
.quote__tape{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-1.5deg);
  width:96px; height:24px;
  background:rgba(246,237,223,.62);
  box-shadow:0 1px 3px rgba(60,40,20,.22);
}
.quote blockquote{
  flex:1; margin:0 0 1.2rem; font-style:italic;
  font-size:.99rem; line-height:1.75; color:#4a3620;
}
.quote figcaption{ padding-top:.9rem; border-top:1px solid rgba(74,46,23,.28); }
.quote figcaption strong{
  display:block; font-family:"Yellowtail",cursive; font-weight:400;
  font-size:1.5rem; line-height:1.2; color:var(--umber);
}
.quote figcaption span{
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}

/* ═══ About ══════════════════════════════════════════════ */
.about{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about__copy h2{ color:var(--on-dark); text-shadow:0 2px 0 rgba(0,0,0,.45); }
.about__copy p{ color:var(--on-dark-2); font-size:1.02rem; }
.about__sig{ margin-top:2rem; padding-top:1.3rem; border-top:1px solid rgba(201,162,39,.25); }
.about__sig .script{ display:block; font-size:2.1rem; }
.about__role{
  display:block; font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-2);
}

.creed{
  position:relative; text-align:center; padding:2.4rem 1.9rem 2rem;
  background:rgba(0,0,0,.26);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.3), 0 18px 40px rgba(0,0,0,.35);
}
.creed__seal{
  display:block; width:76px; height:76px; margin:0 auto 1.2rem; padding:3px; border-radius:50%;
  background:linear-gradient(150deg,var(--brass-lt),var(--brass-dk));
  box-shadow:0 8px 20px rgba(0,0,0,.55);
}
.creed__seal img{ width:100%; height:100%; border-radius:50%; }
.creed__motto{
  font-family:"Bevan",serif; font-size:1.22rem; line-height:1.3; color:var(--brass-lt);
  margin:0; text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.creed blockquote{ margin:0 0 1.2rem; }
.creed blockquote p{ font-style:italic; font-size:1.02rem; line-height:1.65; color:var(--on-dark); margin-bottom:.6rem; }
.creed cite{
  font-style:normal; font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.creed__family{ margin:0; padding-top:1.1rem; border-top:1px solid rgba(201,162,39,.22); font-size:1.5rem; }

/* ═══ FAQ ════════════════════════════════════════════════ */
.faq{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.faq .titleblock{ margin-bottom:0; position:sticky; top:7rem; }
.faq__list{ border-top:2px solid rgba(74,46,23,.3); }
.faq__list details{ border-bottom:1px solid rgba(74,46,23,.22); }
.faq__list summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.25rem 2.8rem 1.25rem 0;
  font-family:"Bevan",serif; font-size:1.02rem; line-height:1.4; color:var(--umber);
  transition:color .2s;
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary:hover{ color:var(--rust); }
.faq__list summary::after{
  content:""; position:absolute; right:.5rem; top:1.5rem;
  width:11px; height:11px;
  border-right:2.5px solid var(--rust); border-bottom:2.5px solid var(--rust);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.faq__list details[open] summary::after{ transform:rotate(-135deg); top:1.85rem; }
.faq__list details p{ margin:0 0 1.4rem; padding-right:2.8rem; font-size:.97rem; color:var(--ink-soft); }

/* ═══ Contact ════════════════════════════════════════════ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact__intro h2{ color:var(--on-dark); text-shadow:0 2px 0 rgba(0,0,0,.45); }

.contact__cards{ display:grid; gap:.7rem; margin-top:1.8rem; }
.ccard{
  display:flex; align-items:center; gap:1rem;
  padding:.95rem 1.2rem; text-decoration:none; color:var(--on-dark);
  background:rgba(0,0,0,.24);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.2);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s;
}
.ccard:hover{ transform:translateX(5px); background:rgba(0,0,0,.36); box-shadow:inset 0 0 0 1px var(--brass); }
.ccard--static, .ccard--static:hover{ cursor:default; transform:none; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px rgba(201,162,39,.2); }
.ccard svg{ width:23px; height:23px; flex:none; color:var(--brass); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ccard svg .solid{ fill:currentColor; stroke:none; }
.ccard span{ display:flex; flex-direction:column; min-width:0; font-family:"Oswald",sans-serif; font-weight:300; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); }
.ccard strong{
  font-family:"Bevan",serif; font-weight:400; font-size:.94rem; line-height:1.35;
  letter-spacing:0; text-transform:none; color:var(--on-dark); overflow-wrap:anywhere; margin-bottom:.15rem;
}

.hours, .areas{
  margin-top:1.2rem; padding:1.4rem 1.5rem 1.2rem;
  background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px rgba(201,162,39,.2);
}
.hours h3, .areas h3{
  font-family:"Oswald",sans-serif; font-weight:500; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:.9rem;
}
.hours dl{ margin:0; display:grid; }
.hours dl div{ display:flex; justify-content:space-between; gap:1rem; padding:.48rem 0; border-bottom:1px dotted rgba(201,162,39,.25); }
.hours dt{ font-size:.92rem; color:var(--on-dark-2); }
.hours dd{ margin:0; font-family:"Oswald",sans-serif; font-weight:400; font-size:.92rem; color:var(--on-dark); }
.hours__closed{ color:var(--on-dark-2) !important; font-weight:300 !important; }
.hours__note{ margin:.85rem 0 0; font-size:.84rem; color:var(--on-dark-2); }

.areas ul{ list-style:none; margin:0 0 .85rem; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.areas li{
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark); border:1px solid rgba(201,162,39,.32); padding:.36rem .6rem;
}
.areas p{ margin:0; font-size:.84rem; color:var(--on-dark-2); }

/* Order form on kraft paper */
.form{
  position:relative; padding:2.3rem 2.1rem 2.6rem;
  background:var(--kraft);
  background-image:var(--tex-paper); background-size:320px 320px; background-blend-mode:multiply;
  box-shadow:0 22px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(74,46,23,.25);
}
.form::before{
  content:""; position:absolute; inset:9px; border:1px solid rgba(74,46,23,.28); pointer-events:none;
}
.form__head{ margin-bottom:1.6rem; padding-bottom:1rem; border-bottom:2px solid rgba(74,46,23,.3); }
.form__no{
  margin:0 0 .3rem; font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--rust);
}
.form h3{ font-size:1.5rem; color:var(--umber); margin:0; }

.field{ margin-bottom:1.15rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{
  display:block; font-family:"Oswald",sans-serif; font-weight:500;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.4rem;
}
.field .hint{ text-transform:none; letter-spacing:.02em; font-weight:300; opacity:.8; }
.field input, .field select, .field textarea{
  width:100%; padding:.62rem .1rem; color:var(--ink);
  font-family:"Lora",serif; font-size:1rem; line-height:1.5;
  background:transparent; border:0; border-bottom:1.5px solid rgba(74,46,23,.42);
  border-radius:0; transition:border-color .2s, box-shadow .2s;
}
.field select{ padding-left:0; }
.field textarea{ resize:vertical; border:1.5px solid rgba(74,46,23,.42); padding:.6rem .7rem; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--rust); box-shadow:0 2px 0 -1px var(--rust);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(92,68,43,.55); }
.field input:user-invalid{ border-color:#a3300f; }
.form .btn{ margin-top:.7rem; }
.form__note{ margin:1rem 0 0; font-size:.84rem; color:var(--ink-soft); text-align:center; }
.form__note.is-sent{ color:var(--forest-2); font-weight:600; }

/* ═══ Footer ═════════════════════════════════════════════ */
.foot{
  position:relative; isolation:isolate; padding:3.4rem 0 1.7rem;
  background:
    linear-gradient(180deg, rgba(30,20,10,.92), rgba(18,12,6,.955)),
    var(--tex-planks) top center/1400px auto repeat;
  color:var(--on-dark-2);
  border-top:2px solid var(--brass-dk);
}
.foot__inner{
  display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:2rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(201,162,39,.2);
}
.foot__brand{ display:flex; align-items:center; gap:.9rem; }
.foot__name{
  margin:0 0 .25rem; font-family:"Bevan",serif; font-size:1.2rem;
  color:var(--brass-lt); text-transform:uppercase; letter-spacing:.02em;
}
.foot__tag{ margin:0; font-family:"Oswald",sans-serif; font-weight:300; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.foot__links{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem 1rem; align-content:start; }
.foot__links a, .foot__contact a{
  color:var(--on-dark-2); text-decoration:none;
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; transition:color .2s;
}
.foot__links a:hover, .foot__contact a:hover{ color:var(--brass-lt); }
.foot__contact{ display:grid; gap:.45rem; align-content:start; }
.foot__contact a{ text-transform:none; letter-spacing:.04em; font-size:.84rem; }
.foot__legal{
  margin:1.4rem 0 0; text-align:center;
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(194,171,140,.55);
}

/* ═══ Lightbox ═══════════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:300;
  background:rgba(12,7,3,.96);
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:2.5rem 1rem; animation:fade .25s var(--ease);
}
.lb[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.lb__stage{ margin:0; max-width:min(92vw,880px); text-align:center; }
.lb__stage img{
  max-width:100%; max-height:74vh; width:auto; margin-inline:auto;
  border:8px solid var(--bone);
  box-shadow:0 30px 80px rgba(0,0,0,.75);
}
.lb__stage figcaption{
  margin-top:1.1rem; font-family:"Bevan",serif; font-size:1.06rem; color:var(--on-dark);
}
.lb__stage figcaption em{
  display:block; margin-top:.3rem; font-style:normal;
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
.lb__close, .lb__nav{
  background:rgba(241,229,209,.08); color:var(--on-dark);
  border:1px solid rgba(201,162,39,.35); cursor:pointer;
  display:grid; place-items:center; transition:background .2s, transform .2s, color .2s;
}
.lb__close{ position:absolute; top:1.2rem; right:1.4rem; width:44px; height:44px; font-size:1.9rem; line-height:1; }
.lb__nav{ width:52px; height:52px; font-size:2.1rem; line-height:1; flex:none; }
.lb__close:hover, .lb__nav:hover{ background:var(--brass); color:var(--bark); transform:scale(1.06); }

/* ═══ Preview notice ═════════════════════════════════════ */
.preview{
  position:fixed; left:1rem; bottom:1rem; z-index:150;
  display:flex; align-items:flex-start; gap:.75rem;
  max-width:min(28rem, calc(100vw - 2rem));
  background:rgba(21,14,7,.97);
  border:1px solid rgba(201,162,39,.5);
  padding:.85rem 1rem;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  animation:previewIn .5s .8s var(--ease) both;
}
@keyframes previewIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.preview svg{ width:20px; height:20px; flex:none; margin-top:.1rem; fill:none; stroke:var(--brass); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.preview p{ margin:0; font-size:.8rem; line-height:1.5; color:var(--on-dark-2); }
.preview strong{ color:var(--brass-lt); }
.preview button{
  flex:none; width:26px; height:26px; margin:-.15rem -.3rem 0 0;
  background:none; border:0; cursor:pointer; color:var(--on-dark-2);
  font-size:1.4rem; line-height:1; transition:color .2s;
}
.preview button:hover{ color:var(--brass-lt); }
.preview[hidden]{ display:none; }

/* ═══ Reveal ═════════════════════════════════════════════ */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ═══ Responsive ═════════════════════════════════════════ */
@media (max-width:1140px){
  .nav__links a{ padding:.45rem .55rem; font-size:.76rem; }
  .nav__phone{ display:none; }
}

@media (max-width:960px){
  .catalog{ grid-template-columns:1fr; gap:0; }
}

@media (max-width:900px){
  html{ scroll-padding-top:78px; }
  .nav{ background:rgba(19,12,6,.95); backdrop-filter:blur(10px); }
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(15,10,5,.99); padding:.8rem 1.3rem 1.4rem;
    border-top:1px solid rgba(201,162,39,.25);
    box-shadow:0 22px 40px rgba(0,0,0,.5);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .38s var(--ease), opacity .28s var(--ease), padding .38s var(--ease);
  }
  .nav.is-open .nav__links{ max-height:30rem; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:.85rem .4rem; font-size:.92rem; border-bottom:1px solid rgba(201,162,39,.12); }
  .nav__links a::after{ display:none; }
  .nav__cta{ text-align:center; margin-top:.8rem; border-bottom:0 !important; }

  .hero__inner{ grid-template-columns:1fr; gap:3.2rem; }
  .hero__art{ max-width:320px; }
  .hanger{ display:none; }
  .treeline{ height:104px; }

  .craft, .about, .contact, .faq{ grid-template-columns:1fr; }
  .craft__media{ order:2; max-width:560px; }
  .faq .titleblock{ position:static; margin-bottom:2.2rem; }
  .creed{ max-width:520px; }
  .addons__list{ columns:1; }
  .grid{ grid-auto-rows:158px; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .brand__name{ font-size:1.05rem; }
  .brand__sub{ font-size:.5rem; letter-spacing:.16em; }
  .brand__seal{ width:40px; height:40px; }
  .hero{ padding-top:7rem; }
  .hero__actions .btn{ width:100%; }
  .pricetag{ left:-10px; bottom:26px; width:116px; }
  .pricetag__amt{ font-size:1.6rem; }
  .ribbon__inner{ font-size:.7rem; letter-spacing:.18em; gap:.6rem 1rem; }
  .catalog__item{ grid-template-columns:auto 1fr; }
  .catalog__art{ display:none; }
  .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:128px; gap:.65rem; }
  .tile{ border-width:5px; }
  .tile--wide{ grid-row:span 2; }
  .upgrade, .delivery{ flex-direction:column; text-align:center; gap:1rem; }
  .field-row{ grid-template-columns:1fr; }
  .form, .addons{ padding:1.7rem 1.3rem 1.4rem; }
  .foot__inner{ grid-template-columns:1fr; text-align:center; }
  .foot__brand{ flex-direction:column; text-align:center; }
  .foot__links, .foot__contact{ justify-items:center; }
  .lb__nav{ width:42px; height:42px; font-size:1.7rem; }
  .preview{ left:.6rem; right:.6rem; bottom:.6rem; max-width:none; }
  .preview p{ font-size:.75rem; }
}

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

@media print{
  .nav, .lb, .filters, .treeline, .preview{ display:none !important; }
  .faq__list details p{ display:block !important; }
  body{ background:#fff; color:#000; }
  .hero, .section--timber, .section--forest, .foot{ background:#fff !important; color:#000 !important; }
}