@font-face{
  font-family:"Salmod";
  src:url("../fonts/salmod-light.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Salmond";
  src:url("../fonts/salmond-semibold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#000;
  --text:#f3f3f3;
  --muted:#c2c2c2;
  --line:#1f1f1f;
  --tone-a:#070705;
  --tone-b:#0a0d0a;
  --tone-c:#0c0a08;
  --tone-d:#0a0a0f;
  --tone-e:#0b0b0b;
  --header-bg:#000;
  --button-text:#fff;
  --primary-button-bg:#fff;
  --primary-button-text:#000;
  --body-font:"Salmod", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-font:"Salmond", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --logo-width:320px;
  --base-font-size:18px;
  --cursor-size:75px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body-font);
  background:var(--bg);
  color:var(--text);
  font-size:var(--base-font-size);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

.hero{background:var(--tone-a)}
.buckets{background:var(--tone-b)}
.quote-row{background:var(--tone-c)}
.rows{background:transparent}
.service-row:nth-child(odd){background:var(--tone-d)}
.service-row:nth-child(even){background:var(--tone-b)}
.site-footer{background:var(--tone-e)}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--header-bg);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.bar{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
}

.iconbtn{
  width:46px;
  height:46px;
  border:1px solid #fff;
  background:transparent;
  color:var(--text);
  display:grid;
  place-items:center;
  border-radius:6px;
}

.burger{width:20px;height:14px;position:relative}
.burger:before,.burger:after,.burger i{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--text);
  border-radius:2px;
}
.burger:before{top:0}
.burger i{top:6px}
.burger:after{bottom:0}

.logo{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo img{
  width:100%;
  max-width:var(--logo-width);
  max-height:96px;
  padding:13px;
  object-fit:contain;
}

.drawer{position:fixed;inset:0;pointer-events:none;z-index:60}
.drawer .backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .25s ease;
}
.drawer nav{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:min(340px,88vw);
  background:#000;
  border-right:1px solid rgba(255,255,255,.10);
  transform:translateX(-102%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.drawer.open{pointer-events:auto}
.drawer.open .backdrop{opacity:1}
.drawer.open nav{transform:translateX(0)}

.menuitems{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:10px;
}

.menuitems a{
  display:block;
  font-family:var(--heading-font);
  font-weight:600;
  color:#fff;
  padding:14px 12px;
  border-radius:12px;
  line-height:1.45;
  font-size:18px;
}
.menuitems a:hover{background:#0e0e0e}

.menucta{
  margin-top:auto;
  padding:10px;
  border-top:1px solid rgba(255,255,255,.10);
}
.menucta a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-family:var(--heading-font);
  font-weight:600;
  font-size:16px;
}

.hero{
  height:40vh;
  min-height:280px;
  max-height:520px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.hero video,.hero .fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.05);
  transform:translateZ(0);
}
.hero .fallback{
  background:center/cover no-repeat;
  display:none;
}
.hero .fallback.is-visible{display:block}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.76))}
.hero .content{position:absolute;inset:0;display:flex;align-items:flex-end;padding:26px 16px}
.hero h1{
  margin:0;
  font-family:var(--heading-font);
  font-size:clamp(26px,3.2vw,40px);
  letter-spacing:.02em;
}
.hero p{
  margin:10px 0 0;
  color:var(--muted);
  max-width:62ch;
  line-height:1.65;
  font-size:18px;
}
.hero .cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 34px;
  min-height:56px;
  border-radius:9px;
  border:0;
  background:url("../wood-001.avif") center/cover no-repeat;
  color:var(--button-text);
  text-shadow:0 1px 0 #000;
  font-family:var(--heading-font);
  font-weight:600;
  font-size:16px;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn.primary{
  background:var(--primary-button-bg);
  color:var(--primary-button-text);
  border:1px solid var(--primary-button-bg);
  text-shadow:none;
}

.buckets{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.bucket{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  display:block;
  isolation:isolate;
  border-right:1px solid rgba(255,255,255,.10);
}
.bucket:last-child{border-right:0}
.bucket .img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  transition:transform 4200ms cubic-bezier(.14,.8,.12,1);
  will-change:transform;
}
.bucket:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 34%, rgba(0,0,0,.45) 62%, rgba(0,0,0,.78) 82%, rgba(0,0,0,.92) 100%);
  opacity:0;
  transition:opacity 900ms ease;
  z-index:2;
}
.bucket .shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.80));
  z-index:1;
}
.bucket .inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px 18px;
  z-index:3;
}
.bucket h2{
  margin:0;
  font-family:var(--heading-font);
  font-size:clamp(20px,2.4vw,32px);
}
.bucket p{
  margin:10px 0 0;
  color:var(--muted);
  max-width:38ch;
  line-height:1.65;
  font-size:18px;
}
.bucket .links{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  font-family:var(--heading-font);
  font-weight:600;
  font-size:14px;
}
@media (hover:hover){
  .bucket:hover .img{transform:scale(1.22)}
  .bucket:hover:after{opacity:1}
}

.quote-row{
  padding:60px 0 40px;
  background:var(--tone-c);
}
.philo-quote{
  position:relative;
  margin:0 auto;
  padding:34px 18px;
  border:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(6px);
}
.philo-quote p{
  margin:0;
  font-family:var(--heading-font);
  font-weight:600;
  font-size:clamp(22px,2.8vw,40px);
  line-height:1.32;
  letter-spacing:.01em;
  text-align:center;
}
.philo-quote .qmark{
  position:absolute;
  font-family:var(--heading-font);
  font-weight:600;
  font-size:190px;
  line-height:1;
  color:rgba(255,255,255,.08);
  user-select:none;
  pointer-events:none;
}
.philo-quote .qmark.left{left:-18px;top:0}
.philo-quote .qmark.right{right:-14px;bottom:-110px}

.rows{border-bottom:1px solid rgba(255,255,255,.10)}
.service-row{
  display:grid;
  grid-template-columns:1fr 2fr;
  align-items:stretch;
  width:100%;
}
.service-row.alt{grid-template-columns:2fr 1fr}
.service-row.alt .sr-img{order:2}
.service-row.alt .sr-content{order:1}
.sr-img{
  width:100%;
  aspect-ratio:1/1;
  background:#000 center/cover no-repeat;
}
.sr-content{
  position:relative;
  padding:34px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.sr-content:before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--content-bg-image) center/cover no-repeat;
  opacity:.45;
  z-index:0;
}
.service-row.alt .sr-content:before{opacity:.65}
.sr-content > *{
  position:relative;
  z-index:1;
  max-width:72ch;
}
.sr-content h3{
  margin:0 0 12px;
  font-family:var(--heading-font);
  font-size:clamp(22px,2.6vw,34px);
  letter-spacing:.01em;
}
.sr-content p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:19px;
}
.service-row.align-left .sr-content{text-align:left;align-items:flex-start}
.service-row.align-center .sr-content{text-align:center;align-items:center}
.service-row.align-right .sr-content{text-align:right;align-items:flex-end}

.site-footer{
  position:relative;
  border-top:1px solid rgba(255,255,255,.10);
  color:#f3f3f3;
}
.footerbg{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
  filter:saturate(1.05) contrast(1.05);
}
.footerinner{
  position:relative;
  padding:48px 40px 26px;
}
.footer-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:flex-start;
  width:100%;
  gap:24px;
}
.footer-left{justify-self:start;max-width:520px}
.footer-center{justify-self:center;display:flex;align-items:center;margin-top:2px}
.footer-right{justify-self:end}
.footertitle{
  font-family:var(--heading-font);
  font-weight:600;
  font-size:24px;
  margin:0;
}
.footertext{margin:0;color:rgba(255,255,255,.80);line-height:1.75;font-size:18px}
.footersocial{
  display:flex;
  gap:16px;
  margin-top:14px;
}
.footersocial a{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  font-size:16px;
  opacity:.9;
}
.footer-inquiry{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--heading-font);
  font-weight:600;
  font-size:16px;
  border:1px solid #fff;
  border-radius:999px;
  padding:14px 22px;
}
.footer-inquiry:hover{
  background:#fff;
  color:#000;
}
.footerlinks{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  font-family:var(--heading-font);
  font-weight:600;
}
.footerlinks a{
  display:flex;
  align-items:center;
  gap:10px;
}
.fineprint{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  justify-content:center;
  gap:6px;
  font-size:14px;
  opacity:.75;
}

.page-content{
  padding:48px 16px;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{opacity:1;transform:translateY(0)}

body.cursor-effects-enabled,
body.cursor-effects-enabled *{
  cursor:none;
}

#saw-cursor{
  position:fixed;
  top:0;
  left:0;
  width:var(--cursor-size);
  height:var(--cursor-size);
  background:center/contain no-repeat;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:9999;
  filter:drop-shadow(0 0 6px rgba(0,0,0,0.95)) drop-shadow(0 0 12px rgba(0,0,0,0.85)) drop-shadow(0 0 28px rgba(255,255,255,0.35)) drop-shadow(0 0 28px rgba(255,255,255,0.15));
}
#saw-cursor.spin{animation:sawspin .5s linear infinite}
@keyframes sawspin{to{transform:translate(-50%,-50%) rotate(-360deg)}}

#sawdust{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:0;
  pointer-events:none;
  z-index:9998;
}
.sawdust-particle{
  position:absolute;
  width:6px;
  height:3px;
  background:rgba(255,230,160,.95);
  border-radius:999px;
  box-shadow:0 0 10px rgba(255,200,120,.7);
  animation:sawdust-fly .75s linear forwards;
}
@keyframes sawdust-fly{
  to{
    transform:translate(var(--dx, -140px), var(--dy, -90px)) scale(var(--sc, .2)) rotate(var(--rot, -35deg));
    opacity:0;
  }
}

header .iconbtn, header .iconbtn *,
.drawer, .drawer *,
.site-footer, .site-footer *{
  cursor:auto !important;
}

.phonebtn i{font-size:22px;line-height:1}

@media (max-width:900px){
  body{font-size:20px}
  .buckets{grid-template-columns:1fr}
  .bucket{border-right:0;border-top:1px solid rgba(255,255,255,.10)}
  .bucket:first-child{border-top:0}
  .bucket h2{font-size:clamp(22px,6vw,30px)}
  .bucket p{font-size:20px}
  .hero{min-height:320px}
  .hero h1{font-size:clamp(28px,7vw,40px)}
  .hero p{font-size:20px}
  .service-row,.service-row.alt{grid-template-columns:1fr}
  .service-row.alt .sr-img,.service-row.alt .sr-content{order:0}
  .sr-content{padding:30px 16px}
  .sr-content h3{font-size:clamp(24px,6.5vw,34px)}
  .sr-content p{font-size:20px}
  .quote-row{padding:88px 0}
  .philo-quote p{font-size:clamp(24px,6.2vw,34px)}
  .philo-quote .qmark{font-size:220px}
  .footer-row{grid-template-columns:1fr;text-align:center}
  .footer-left,.footer-right{justify-self:center}
  .footerlinks{align-items:center}
  .footersocial{justify-content:center}
  .footertext{font-size:20px}
  .fineprint{font-size:15px}
}