/* ===== TGH CARPENTRY — JOINERY WORKSHOP THEME =====
   workshop-dusk body  : #171310
   sawdust-cream text  : #F2EBDD
   brass-caliper accent: #C9963E
   bench-panel         : #221B13
   plinth-deep         : #0F0B07
   planed-oak          : #D9B98C
   pencil-graphite     : #A9A29A
   chisel-steel        : #8E979E
   resin-amber         : #A05C28
   hairline            : #362C20
   Motif: JOINERY WORKSHOP rendered purely with CSS. */

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

html{scroll-behavior:smooth}

body{
  font-size:16px;
  line-height:1.7;
  font-family:"Georgia","Times New Roman",serif;
  background-color:#171310;
  color:#F2EBDD;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

a{color:#C9963E;text-decoration:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.no-scroll-reveal,.rev-visible{opacity:1;transform:none;pointer-events:auto}

/* Reveal states handled by .js only; default visible */
.reveal{}

.js .reveal{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
.js .reveal.is-hidden{opacity:0;transform:translateY(22px)}
.js .reveal.rev-visible{opacity:1;transform:none}

/* ============ NAVIGATION — TRY SQUARE HEADER ============ */
.trysquare{
  position:relative;
  z-index:50;
  background-color:#0F0B07;
  border-bottom:1px solid #362C20;
  padding:14px 0;
}
.trysquare .ts-inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* L-shaped square mark = steel vertical stock + brass ruled blade */
.trysquare .ts-mark{display:flex;align-items:center;gap:0;flex:0 0 auto}
.trysquare .ts-stock{
  width:10px;height:52px;background-color:#8E979E;
  border-radius:2px 0 0 2px;
  box-shadow:inset -3px 0 0 #6b747b;
  position:relative;
}
.trysquare .ts-stock::after{
  content:"";position:absolute;top:6px;bottom:6px;left:2px;
  width:2px;background-color:#171310;opacity:.55;
}
.trysquare .ts-blade{
  width:150px;height:14px;background-color:#C9963E;
  border-radius:0 3px 3px 0;
  box-shadow:inset 0 -3px 0 #8a6427;
  position:relative;
}
.trysquare .ts-blade::before,.trysquare .ts-blade::after,
.trysquare .ts-tick{content:none}
.trysquare .ts-blade .tick{
  position:absolute;top:2px;bottom:2px;width:1px;background-color:#171310;
}
.trysquare .ts-brand{margin-left:14px;display:flex;flex-direction:column;line-height:1.1}
.trysquare .ts-brand strong{
  font-size:20px;letter-spacing:.16em;color:#F2EBDD;font-weight:700;
}
.trysquare .ts-brand strong em{font-style:normal;color:#C9963E}
.trysquare .ts-brand span{font-size:11px;letter-spacing:.34em;color:#A9A29A;text-transform:uppercase}

/* Timber rail of links */
.trysquare .ts-rail{
  margin-left:auto;display:flex;align-items:center;
  background-color:#D9B98C;border-radius:2px;
  padding:7px 10px;position:relative;flex-wrap:wrap;
}
.trysquare .ts-rail::before,.trysquare .ts-rail::after{
  content:"";position:absolute;top:0;bottom:0;width:2px;background-color:#f0e2cc;
}
.trysquare .ts-rail::before{left:-2px;border-radius:2px}
.trysquare .ts-rail::after{right:-2px;border-radius:2px}
.trysquare .ts-msg{color:#c9a46a;font-weight:700}
.trysquare .ts-rail a{
  color:#171310;font-weight:700;font-size:14.5px;letter-spacing:.02em;
  padding:7px 14px;text-transform:uppercase;position:relative;
}
.trysquare .ts-rail a.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;
  background-color:#C9963E;border-radius:1px;
}
.trysquare .ts-dowel{color:#171310;font-size:14px;opacity:.55;user-select:none}
.trysquare .ts-toggle{
  display:none;margin-left:auto;background-color:#171310;color:#C9963E;
  border:1px solid #C9963E;font-size:22px;line-height:1;padding:8px 14px;
  border-radius:3px;cursor:pointer;
}
@media (max-width:840px){
  .trysquare .ts-toggle{display:block}
  .trysquare .ts-rail{
    display:none;width:100%;margin-left:0;justify-content:center;
    background-color:#D9B98C;flex-direction:row;flex-wrap:wrap;
  }
  .trysquare .ts-rail.ts-open{display:flex}
  .trysquare .ts-inner{justify-content:space-between}
}

/* ============ HERO — WORKBENCH TOP ============ */
.workbench-section{position:relative}
.workbench-scene .wb-rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;
  padding:18px 0;
}
.workbench-scene .wb-static-ar{
  background-color:#221B13;border:1px solid #362C20;border-top:3px solid #8E979E;
  padding:22px;min-height:150px;display:flex;align-items:flex-end;
  box-shadow:inset 0 0 0 1px #171310;
}
.workbench-scene .wb-endedge::before{content:unset}

/* Actually build the workbench visual */
.wb-tools{position:relative;cursor:default}
.wb-benchtop{
  height:88px;background-color:#8a6a41;position:relative;border-radius:3px;
  box-shadow:inset 0 8px 0 #9c7a4c,inset 0 -8px 0 #6f5133;
  background-image:repeating-linear-gradient(90deg,#8a6a41 0 30px,#825f39 30px 60px);
  overflow:hidden;
}
.wb-benchtop::before{
  content:"";position:absolute;right:-4px;top:6px;bottom:6px;width:14px;
  background-color:#b29674;
  border-radius:3px 0 0 3px;
}
.wb-benchtop::after{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:6px;
  background-color:#C9963E;border-radius:3px;
}
.wb-board{height:26px;background-color:#a07b45;margin:26px 0;border-radius:2px;
  background-image:repeating-linear-gradient(90deg,#a07b45 0 40px,#946b3a 40px 80px);}
.wb-gauge{height:8px;width:56%;background-color:#C9963E;margin:10px 0;border-radius:2px}
.wb-curl{height:14px;width:120px;background-color:#D9B98C;border-radius:50% 0 50% 0;opacity:.5}
.wb-timbers{border-top:1px solid #362C20;padding:14px 0;display:flex;gap:10px}
.wb-plank{flex:1;border-radius:2px}

/* HERO BODY layout */
.wb-crow{position:relative;display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:center;min-height:72vh;padding:40px 0}
@media (max-width:900px){.wb-crow{grid-template-columns:1fr;min-height:0}}

.hero-graph{order:2}
.hero-copy{order:1}
@media (max-width:900px){.hero-graph{order:1}.hero-copy{order:2}}

.wb-kicker{
  display:flex;align-items:center;gap:12px;color:#C9963E;text-transform:uppercase;
  letter-spacing:.28em;font-size:13px;font-weight:700;margin-bottom:16px;
}
.wb-kicker .rule{height:2px;width:46px;background-color:#C9963E}
.hero-copy h1{
  font-size:58px;line-height:1.02;color:#F2EBDD;font-weight:700;letter-spacing:.01em;
}
@media (max-width:700px){.hero-copy h1{font-size:40px}}
.hero-copy h1 .brass{color:#C9963E}
.hero-copy h1 .thin{font-weight:400;color:#D9B98C}
.hero-copy .hero-sub{margin:20px 0 26px;font-size:19px;color:#C9C0B2;max-width:560px}
.hero-copy .hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:15px 26px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:14px;border-radius:2px;
}
.btn-brass{background-color:#C9963E;color:#171310;border:1px solid #C9963E;
  box-shadow:inset 0 -3px 0 #8a6427}
.btn-brass:hover{background-color:#d8a956}
.btn-cream{background-color:#171310;color:#F2EBDD;border:1px solid #F2EBDD}
.btn-cream:hover{background-color:#F2EBDD;color:#171310}

/* workbench illustration via pure CSS */
.wb-graphic{position:relative;max-width:520px;width:100%;margin:0 auto 0 auto}
.wb-graphic .bench{
  position:relative;height:220px;
}
.wb-graphic .bench .top{
  position:absolute;left:0;right:0;top:34px;height:56px;
  background-color:#9c7a4c;border-radius:3px;
  box-shadow:inset 0 10px 0 #b28d58,inset 0 -6px 0 #6b4e30;
  overflow:hidden;
}
.wb-graphic .bench .top::after{
  content:"";position:absolute;left:-6px;top:0;bottom:0;width:12px;background-color:#C9963E;border-radius:2px;
}
.wb-graphic .bench .top::before{
  content:"";position:absolute;right:-2px;top:-8px;bottom:-8px;width:6px;
  background-color:#C9963E;box-shadow:2px -2px 0 0 #956d2f;border-radius:2px;
}
.wb-graphic .bench .legs{position:absolute;left:40px;right:40px;top:0;bottom:0;
  display:flex;justify-content:space-between;}
.wb-graphic .bench .legs i{width:26px;height:150px;background-color:#6b4e30;align-self:flex-end;border-radius:3px}
.wb-graphic .bench .apron{position:absolute;left:0;right:0;top:14px;height:16px;
  width:60%;margin:24px 20%;background-color:#7a5a36;border-radius:2px;
}

/* vise + clamped dovetail */
.vise{position:absolute;left:8px;top:-4px;width:96px;height:96px}
.vise .jaw{position:absolute;top:24px;height:40px;left:0;width:40px;background-color:#2c241a;border:1px solid #171310}
.vise .screw{position:absolute;left:2px;top:30px;width:52px;height:10px;background-color:#8E979E;border-radius:2px}
.vise .cap{position:absolute;left:-14px;top:24px;width:16px;height:40px;background-color:#15100b;border-radius:2px}
.dovetail-clamp{position:absolute;left:44px;top:34px;width:78px;height:48px;
  background-image:linear-gradient(90deg,#D9B98C 0 14px,#9c7a4c 14px 16px,#D9B98C 16px 30px,#9c7a4c 30px 32px,#D9B98C 32px 46px,#9c7a4c 46px 48px,#D9B98C 48px 62px,#9c7a4c 62px 64px,#D9B98C 64px 78px);
  border-radius:2px 2px 0 0;box-shadow:0 -4px 0 0 #8a6b3f;
}
.plane{position:absolute;right:96px;top:24px;width:96px;height:30px;
  background-color:#b98a4a;border-radius:2px;box-shadow:inset 0 3px 0 #cf9f5c;
  transform:rotate(-6deg);}
.plane::after{content:"";position:absolute;right:-14px;top:8px;width:26px;height:12px;
  background-color:#171310;border-radius:2px;}
.shavings-right{position:absolute;right:60px;top:66px;width:40px;height:8px;background-color:#8a683c;border-radius:0 0 8px 8px}
.trysq-lean{position:absolute;right:-6px;top:10px;width:40px;height:120px;
  background:#8E979E linear-gradient(90deg,transparent 0 34px,#171310 34px 36px,transparent 36px);
  transform:rotate(12deg);border-radius:3px;transform-origin:bottom;box-shadow:inset -4px 0 0 #6b747b;}
.trysq-lean::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background-color:#C9963E}
.mark-gauge-strip{position:absolute;left:170px;top:70px;width:120px;height:7px;background-color:#C9963E;border-radius:2px;transform:rotate(-2deg)}
.under-stack{position:absolute;left:0;right:0;top:150px;height:70px;display:flex;flex-direction:column;gap:7px}
.under-stack .s1{height:30px;width:70%;background:#9c7a4c repeating-linear-gradient(90deg,#9c7a4c 0 20px,#8a6a41 20px 40px);border-radius:2px}
.under-stack .s2{height:22px;width:82%;background:#8a6a41 repeating-linear-gradient(90deg,#8a6a41 0 18px,#7a5a36 18px 36px);border-radius:2px;align-self:flex-end}
.shadow-zone{position:absolute;left:-20px;right:-20px;bottom:-40px;height:80px;pointer-events:none}
.curl-scatter{position:absolute;border-radius:60% 40% 40% 60%;background-color:#D9B98C;opacity:.38}

/* ============ SECTION COMMON ============ */
.sect{padding:84px 0}
.sect-kicker{display:inline-flex;align-items:center;gap:10px;color:#C9963E;
  text-transform:uppercase;letter-spacing:.24em;font-size:12.5px;font-weight:700;margin-bottom:14px}
.sect-kicker .rr{width:2px;height:16px;background-color:#C9963E}
.sect h2.sec-head{font-size:40px;line-height:1.08;color:#F2EBDD;font-weight:700;margin-bottom:14px}
@media (max-width:700px){.sect h2.sec-head{font-size:30px}}
.sect .lede{max-width:720px;color:#C9C0B2;font-size:17px}
.sect .lede a{color:#C9963E;border-bottom:1px dotted #C9963E}

.sect-band{background-color:#221B13}
.sect-deep{background-color:#0F0B07}
.rule-hl{height:1px;background-color:#362C20;border:0;margin:0}

/* ============ SECTION — JOINT SAMPLES ============ */
.jointsamples{margin-top:0}
.jsamples-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px;
  align-items:start;
}
.jsamples-grid .sp-2{transform:translateY(50px)}
@media (max-width:820px){
  .jsamples-grid{grid-template-columns:1fr}
  .jsamples-grid .sp-2{transform:none}
}
.sample-card{position:relative;background-color:#221B13;border:1px solid #362C20;
  border-top:0;padding:0 0 26px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.25);}
.sample-card::before{
  content:"";position:absolute;top:10px;right:10px;width:10px;height:10px;
  background-color:#C9963E;transform:rotate(8deg);border-radius:1px;box-shadow:0 1px 1px #171310;
}
.sample-card .joint-head{height:74px;display:flex;align-items:center;justify-content:center;background-color:#0F0B07;border-bottom:1px solid #362C20}
/* Dovetail joint */
.j-joint{display:flex;align-items:center;gap:0}
.j-joint .pin{width:30px;height:44px}
.j-joint .p1{background-color:#9c7a4c;clip-path:polygon(0 0,100% 8%,100% 92%,0 100%)}
.j-joint .p2{background-color:#b88b4e;clip-path:polygon(0 8%,100% 0,100% 100%,0 92%)}
.j-joint .p3{background-color:#9c7a4c;clip-path:polygon(0 0,100% 8%,100% 92%,0 100%)}
/* Mortise + tenon */
.jomo{display:flex;gap:8px}
.jomo .mt{width:36px;height:44px;background-color:#b88b4e;border:2px solid #171310;border-right:0}
.jomo .te{width:20px;height:44px;background-color:#d9b027;position:relative}
.jomo .te::after{content:"";position:absolute;top:0;bottom:0;left:18px;width:4px;background-color:#171310}
/* finger box */
.jfinger{display:flex;gap:6px;background-color:#9c7a4c;padding:6px}
.jfinger i{width:18px;background-color:#b88b4e}
.jfinger i:nth-child(even){background-color:#cf9e54}
/* mitre */
.jmitre{width:60px;height:60px;position:relative;background-color:#b88b4e}
.jmitre::before{content:"";position:absolute;left:2px;top:2px;right:2px;bottom:2px;
  background:linear-gradient(135deg,#9c7a4c 49.6%,#171310 50%,#171310 50.4%,#b88b4e 50.4%);
}
/* tongue groove */
.jtg{display:flex;gap:0}
.jtg div{width:40px;height:46px;background-color:#b88b4e;border:2px solid #171310}
.jtg div:first-child{border-right:0}
.jtg div:last-child{border-left:0}
/* bridle */
.jbridle{display:flex}
.jbridle .side{width:34px;height:46px;background-color:#b88b4e;border:2px solid #171310;
  border-right:0;}
.jbridle .cross{height:46px;width:34px;background-color:#9c7a4c;
  border-top:2px solid #171310;position:relative}
.jbridle .cross i{position:absolute;top:0;bottom:0;width:6px;background-color:#b88b4e}
.jbridle .cross i:first-child{left:4px}
.jbridle .cross i:last-child{right:4px}

.sample-card h3{font-size:20px;color:#C9963E;padding:18px 24px 8px;line-height:1.25}
.sample-card p{color:#C9C0B2;padding:0 24px;font-size:15.5px}
.sample-card .more{display:inline-block;margin:14px 24px 0;font-size:14px;color:#F2EBDD;
  border-bottom:1px solid #C9963E;font-weight:700}
.sample-card .more em{color:#C9963E;font-style:normal}

/* ============ ACCENT — COMMISSIONS BOOK ============ */
.book-band{background-color:#C9963E;color:#171310;padding:38px 0;position:relative;overflow:hidden}
.book-band .bb-grid{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
@media (max-width:860px){.book-band .bb-grid{grid-template-columns:1fr;gap:18px}}
.book-glyph{width:64px;height:64px;border:2px solid #171310;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1}
.book-band h2{font-size:30px;font-weight:700;line-height:1.15;color:#171310}
.book-band p{color:#3a2a12;margin-top:6px;font-size:16.5px}
.book-band .btn-cream-ink{background-color:#171310;color:#C9963E;border:1px solid #171310;
  padding:14px 24px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;border-radius:2px}

/* ============ PROCESS ============ */
.process-rows{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:860px){.process-rows{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.process-rows{grid-template-columns:1fr}}
.step-card{background-color:#171310;border:1px solid #362C20;border-top:3px solid #8E979E;padding:22px;position:relative}
.step-card .st-num{font-size:44px;color:#C9963E;line-height:1;font-weight:700}
.step-card h3{color:#F2EBDD;margin:10px 0 8px;font-size:18px}
.step-card p{color:#C9C0B2;font-size:15px}

/* ============ FOOTER — TIMBER RACK ============ */
.timberrack{background-color:#0F0B07;border-top:1px solid #362C20;position:relative}
.timberrack .rack-top{height:46px;background-color:#0F0B07;border-bottom:1px solid #362C20;
  display:flex;gap:10px;align-items:flex-end;padding:0 24px;overflow:hidden}
.timberrack .rack-top i{display:inline-block;width:40px;background-color:#C9963E;border-radius:2px 2px 0 0;box-shadow:0 -3px 0 0 #8a6427}
.timberrack .rt-layout{padding:56px 0 40px}
.tr-grid{display:grid;grid-template-columns:1.3fr 1fr 1.4fr;gap:40px}
@media (max-width:840px){.tr-grid{grid-template-columns:1fr;gap:28px}}
.tr-brand .tb{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tr-brand h3{color:#F2EBDD;font-size:20px;letter-spacing:.14em}
.tr-brand h3 em{font-style:normal;color:#C9963E}
.tr-brand .mission{color:#C9C0B2;font-size:15px;max-width:320px}
.tr-head{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#C9963E;margin-bottom:16px}
.tr-links{list-style:none}
.tr-links li{margin-bottom:10px}
.tr-links a{color:#C9C0B2}
.tr-links a:hover{color:#C9963E}
.tr-contact p{color:#C9C0B2;margin-bottom:10px}
.tr-contact p a{color:#C9C0B2}
.tr-contact p a:hover{color:#C9963E}
.tr-contact .phone{color:#F2EBDD;font-weight:700;font-size:18px;letter-spacing:.02em}
.tr-contact .addr{color:#C9C0B2}

.sawdust-strip{border-top:1px solid #362C20;padding:18px 0;text-align:center}
.sawdust-strip .sd{color:#D9B98C;font-size:9px;letter-spacing:.5em;margin-bottom:10px;user-select:none}
.sawdust-strip p{color:#A9A29A;font-size:13.5px;letter-spacing:.04em}
.sawdust-strip p a{color:#C9C0B2}

/* footer footer small square mark reused */
.ts-sm{display:inline-flex;align-items:center;vertical-align:middle}
.ts-sm i:first-child{width:7px;height:26px;background-color:#8E979E;border-radius:1px 0 0 1px}
.ts-sm i:last-child{width:52px;height:8px;background-color:#C9963E;border-radius:0 2px 2px 0}

/* ============ CONTACT FORM ============ */
.contact-form .cf-row{margin-bottom:18px}
.contact-form label{display:block;margin-bottom:6px;color:#F2EBDD;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;background-color:#171310;color:#F2EBDD;border:1px solid #362C20;
  padding:13px 15px;font-family:"Georgia","Times New Roman",serif;font-size:16px;
  border-radius:2px;
}
.contact-form input:focus,
.contact-form textarea:focus{outline:none;border-color:#C9963E;box-shadow:0 0 0 1px #C9963E}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#8E979E}
.form-status{background-color:#171310;border-left:3px solid #C9963E;color:#E9E0CF;
  padding:12px 16px;margin-bottom:16px;font-size:14.5px}

/* ============ FAQ ACCORDION (used where needed) ============ */
.accordion{background-color:#171310;border:1px solid #362C20;margin-bottom:12px}
.accordion .acc-head{cursor:pointer;padding:16px 20px;color:#F2EBDD;font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.accordion .acc-head .acc-glyph{color:#C9963E;font-weight:700}
.accordion .acc-body{padding:0 20px 18px;color:#C9C0B2;font-size:15px}
.accordion.open .acc-head{color:#C9963E}

/* Back to top */
.top-link{display:block;text-align:right;margin-top:14px}
.top-link a{color:#A9A29A;font-size:13px}
.top-link a:hover{color:#C9963E}

/* responsive contact grid */
@media (max-width:900px){
  #form .wb-crow,#form .wb-crow .reveal{grid-template-columns:1fr !important}
}