@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root{
  --bg: #0b0b09;
  --panel: #17160f;
  --panel-2: #1e1c14;
  --cream: #eae3d3;
  --cream-dim: #cfc6ae;
  --gold: #d6a93c;
  --gold-dim: #a9863a;
  --red: #a92c1f;
  --muted: #9c9686;
  --line: rgba(234,227,211,0.12);
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono','Courier New', monospace;
  --body: 'Inter', -apple-system, sans-serif;
  --maxw: 1200px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.5px;
  line-height:1.02;
  text-transform:uppercase;
}
.claw-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:14px;
  border:1px solid var(--line);
  padding:12px 18px;
}
.claw-tag svg{width:22px; height:22px; flex:none;}

/* ---------- Top nav ---------- */
.topbar{
  background:#050504;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:500;
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  min-height:78px;
}
.brand{
  display:flex; flex-direction:column; text-decoration:none; line-height:1.05;
}
.brand .b-name{
  font-family:var(--display);
  font-size:26px;
  color:var(--cream);
  letter-spacing:0.5px;
}
.brand .b-sub{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
  margin-top:2px;
}
.nav-links{
  display:flex; align-items:center; gap:20px;
  list-style:none;
}
.nav-links a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--cream-dim);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color:var(--gold);
  border-color:var(--gold);
}
.nav-right{display:flex; align-items:center; gap:16px;}
.nav-phone{
  text-align:right;
  font-family:var(--mono);
  white-space:nowrap;
}
.nav-phone .np-label{
  font-size:9.5px; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; display:block;
}
.nav-phone a{
  font-size:16px; font-weight:600; text-decoration:none; color:var(--cream);
}
.btn-gold{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold);
  color:#181510;
  font-family:var(--mono);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  padding:13px 22px;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-gold:hover{transform:translateY(-2px); background:#e8bc55;}
.btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:var(--mono);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  padding:12px 22px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-outline:hover{transform:translateY(-2px); background:rgba(214,169,60,0.1);}

.hamburger{
  display:none;
  width:40px; height:40px;
  border:1px solid var(--line);
  background:transparent;
  align-items:center; justify-content:center;
  cursor:pointer;
  flex:none;
}
.hamburger span, .hamburger::before, .hamburger::after{
  content:'';
  display:block;
  width:20px; height:2px;
  background:var(--cream);
  position:relative;
}
.hamburger{flex-direction:column; gap:5px;}
.hamburger span{display:block; width:20px; height:2px; background:var(--cream);}

.mobile-panel{
  display:none;
  flex-direction:column;
  background:#0d0c09;
  border-bottom:1px solid var(--line);
  padding:10px 28px 22px;
}
.mobile-panel a{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:14px;
  color:var(--cream-dim);
  text-decoration:none;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.mobile-panel a[aria-current="page"]{color:var(--gold);}
.mobile-panel .btn-gold{margin-top:16px; justify-content:center;}
.mobile-panel .nav-phone{margin-top:14px; text-align:left;}

body.nav-open .mobile-panel{display:flex;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:#0b0b09;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-grid{
  max-width:var(--maxw); margin:0 auto; padding:64px 28px 56px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px;
  align-items:center;
}
.hero h1{font-size:clamp(38px,5.2vw,58px); color:var(--cream);}
.hero h1 .accent{color:var(--gold);}
.hero .lede{
  font-family:var(--mono);
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:14px;
  margin-top:14px;
}
.hero p.desc{
  margin-top:16px;
  color:var(--cream-dim);
  font-size:16px;
  max-width:46ch;
}
.hero .cta-row{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
.hero-photo{
  position:relative;
  border:1px solid var(--line);
  min-height:260px;
  overflow:hidden;
}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}

.hero.compact .hero-grid{padding:48px 28px 40px; grid-template-columns:1fr; }
.hero.compact .desc{max-width:70ch;}

/* ---------- Stat / feature strip ---------- */
.strip{
  background:#101008;
  border-bottom:1px solid var(--line);
}
.strip .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.strip-item{
  padding:26px 24px;
  border-left:1px solid var(--line);
  display:flex; gap:14px; align-items:flex-start;
}
.strip-item:first-child{border-left:none;}
.strip-item svg{width:26px; height:26px; flex:none; color:var(--gold); margin-top:2px;}
.strip-item h4{
  font-family:var(--body); font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:0.5px; color:var(--cream);
}
.strip-item p{font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4;}

/* ---------- Sections ---------- */
.section{padding:64px 0;}
.section.tight{padding:44px 0;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head h2{font-size:clamp(28px,3.6vw,40px); color:var(--cream);}
.section-head .eyebrow{margin-bottom:10px; display:block;}
.section.on-panel{background:var(--panel);}

/* card grid generic */
.grid{display:grid; gap:22px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-6{grid-template-columns:repeat(6,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}

.service-card{
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.service-card .sc-photo{
  aspect-ratio:4/3; overflow:hidden; position:relative; background:#000;
}
.service-card .sc-photo img{width:100%; height:100%; object-fit:cover; opacity:0.75;}
.service-card .sc-icon{
  position:absolute; left:16px; bottom:-22px;
  width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:#161307;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--panel);
}
.service-card .sc-icon svg{width:20px; height:20px;}
.service-card .sc-body{padding:32px 20px 22px;}
.service-card h3{font-family:var(--body); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:0.3px; color:var(--cream);}
.service-card p{font-size:13.5px; color:var(--muted); margin-top:10px; line-height:1.5;}
.service-card .learn{
  margin-top:16px; display:inline-block;
  font-family:var(--mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}

/* checklist card (cream panel) */
.info-card{
  background:var(--cream);
  color:#1c1a13;
  padding:32px;
  border:1px solid rgba(0,0,0,0.06);
}
.info-card h3{font-family:var(--body); font-weight:800; text-transform:uppercase; font-size:19px; color:#1c1a13;}
.check-list{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px;}
.check-list li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#2c2a20;}
.check-list li svg{width:16px; height:16px; color:var(--gold-dim); flex:none; margin-top:3px;}
.info-card .divider{height:1px; background:rgba(0,0,0,0.12); margin:22px 0;}
.info-card .strapline{font-family:var(--display); font-size:22px; display:flex; align-items:center; gap:10px;}

/* process steps */
.steps{
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  border-top:1px solid var(--line);
}
.step{
  padding:30px 18px; border-left:1px solid var(--line); position:relative;
}
.step:first-child{border-left:none;}
.step .num{
  width:34px; height:34px; border-radius:50%; background:var(--gold); color:#161307;
  font-family:var(--body); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.step h4{font-family:var(--body); font-weight:700; text-transform:uppercase; font-size:13.5px; color:var(--cream); letter-spacing:0.3px;}
.step p{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5;}
.step .yg{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:11px; color:var(--cream-dim);}
.step .yg b{display:block; font-family:var(--mono); letter-spacing:1px; color:var(--gold); font-size:9.5px; text-transform:uppercase; margin-bottom:4px;}

/* two-panel story/expect (about) */
.split-panel{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;
  background:var(--cream); color:#1c1a13;
  border:1px solid rgba(0,0,0,0.06);
}
.split-panel > div{padding:34px 30px;}
.split-panel .sp-photo{padding:0; position:relative; min-height:220px; overflow:hidden;}
.split-panel .sp-photo img{width:100%; height:100%; object-fit:cover;}
.split-panel h3{font-family:var(--body); font-weight:800; text-transform:uppercase; font-size:16px;}
.split-panel p{font-size:13.5px; color:#3a3728; margin-top:12px; line-height:1.55;}

/* reviews */
.review-card{
  background:var(--panel); border:1px solid var(--line); padding:22px;
  display:flex; flex-direction:column; gap:10px;
}
.review-card .rc-top{display:flex; justify-content:space-between; align-items:baseline;}
.review-card .rc-name{font-family:var(--body); font-weight:700; text-transform:uppercase; font-size:14px; color:var(--cream);}
.review-card .rc-date{font-family:var(--mono); font-size:10.5px; color:var(--muted);}
.review-card .stars{color:var(--gold); font-size:13px; letter-spacing:2px;}
.review-card p{font-size:13px; color:var(--cream-dim); line-height:1.55; flex:1;}
.review-card .verified{
  font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:6px;
}
.review-card .job-tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.5px; color:var(--muted); text-transform:uppercase;
}
.review-card .owner-reply{
  margin-top:2px; padding:10px 12px; background:rgba(0,0,0,0.18); border-left:2px solid var(--gold);
}
.review-card .owner-reply b{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-bottom:4px;
}
.review-card .owner-reply p{
  font-size:12px; color:var(--cream-dim); line-height:1.5;
}
.review-card.archived{opacity:0.72;}
.review-card.archived .rc-date{color:var(--gold-dim);}

/* CTA bar */
.cta-bar{
  background:var(--cream); color:#1c1a13;
  border-top:1px solid var(--line);
  padding:26px 0;
}
.cta-bar .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-bar h3{font-family:var(--display); font-size:24px; letter-spacing:0.3px;}
.cta-bar h3 .accent{color:var(--red);}
.cta-bar .cta-right{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.cta-bar .cta-phone{font-family:var(--mono); font-weight:700; font-size:16px;}

/* forms */
.contact-layout{
  display:grid; grid-template-columns:1.3fr 0.9fr; gap:40px; align-items:start;
}
.form-card{
  background:var(--panel); border:1px solid var(--line); padding:34px;
}
.form-card h2{font-family:var(--body); font-weight:800; text-transform:uppercase; font-size:22px; color:var(--cream);}
.form-card .fc-sub{color:var(--gold); font-family:var(--mono); font-size:12.5px; margin-top:8px; text-transform:uppercase; letter-spacing:0.5px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
.field{display:flex; flex-direction:column;}
.field.full{grid-column:1/-1;}
label{font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
input, textarea{
  background:#0e0d09; border:1px solid var(--line); color:var(--cream);
  padding:13px 14px; font-family:var(--body); font-size:14px;
  outline:none; resize:vertical;
}
input:focus, textarea:focus{border-color:var(--gold);}
textarea{min-height:110px;}
.form-card form > .field.full{margin-top:22px;}
.form-card .submit-row{margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.form-card .privacy-note{
  display:flex; gap:10px; align-items:flex-start; margin-top:24px; font-size:12.5px; color:var(--muted);
}
.form-card .privacy-note svg{width:16px; height:16px; color:var(--gold); flex:none; margin-top:2px;}

.thankyou{display:none; text-align:center; padding:50px 20px;}
.thankyou.show{display:block;}
.thankyou svg{width:52px; height:52px; color:var(--gold); margin:0 auto 18px;}
.thankyou h2{font-family:var(--body); font-weight:800; text-transform:uppercase; font-size:22px;}
.thankyou p{color:var(--cream-dim); margin-top:12px; font-size:14px; max-width:44ch; margin-left:auto; margin-right:auto;}
.form-card.submitted form{display:none;}

.contact-methods{display:flex; flex-direction:column; gap:0;}
.cm-card{background:var(--panel); border:1px solid var(--line); padding:26px;}
.cm-card h3{font-family:var(--body); font-weight:800; text-transform:uppercase; font-size:15px; color:var(--cream); margin-bottom:18px;}
.cm-row{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
.cm-row:first-of-type{border-top:none; padding-top:0;}
.cm-row .cm-icon{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.cm-row .cm-icon svg{width:18px; height:18px; color:var(--cream);}
.cm-row .cm-label{font-family:var(--mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gold);}
.cm-row .cm-value{font-weight:700; font-size:15px; margin-top:3px;}
.cm-row .cm-value a{text-decoration:none;}
.cm-row .cm-note{font-size:12px; color:var(--muted); margin-top:3px;}
.cm-card + .cm-card{margin-top:22px;}
.cm-list{list-style:none; display:flex; flex-direction:column; gap:12px;}
.cm-list li{display:flex; gap:10px; font-size:13px; color:var(--cream-dim);}
.cm-list li svg{width:15px; height:15px; color:var(--gold); flex:none; margin-top:3px;}

/* service area specific */
.area-layout{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.area-card{background:var(--panel); border:1px solid var(--line); padding:28px;}
.area-card h3{font-family:var(--mono); font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.area-card ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.area-card ul li{display:flex; gap:10px; align-items:center; font-size:14px;}
.area-card ul li svg{width:15px; height:15px; color:var(--gold); flex:none;}
.area-card ul.extended li{color:var(--muted);}
.area-card ul.extended li svg{color:var(--muted);}
.map-block{
  border:1px solid var(--line); background:radial-gradient(circle at center, rgba(214,169,60,0.35), rgba(214,169,60,0.05) 45%, transparent 70%), #14140f;
  min-height:280px; display:flex; align-items:center; justify-content:center; position:relative;
}
.map-block .crest{
  width:64px; height:64px; border-radius:50%; background:#0b0b09; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.map-block .crest svg{width:28px; height:28px; color:var(--gold);}

/* founder / apparel floating badges */
.founder-badge{
  position:fixed; bottom:22px; right:22px; z-index:600;
  display:flex; align-items:center; gap:10px;
  background:rgba(15,15,12,0.94); border:1px solid rgba(214,169,60,0.5);
  border-radius:40px; padding:8px 16px 8px 8px; text-decoration:none; color:#eae3d3;
  font-family:var(--mono); box-shadow:0 4px 18px rgba(0,0,0,0.5);
  transition:transform .15s ease, border-color .15s ease;
}
.founder-badge:hover{transform:translateY(-2px); border-color:#d6a93c;}
.founder-badge img{width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:top center; border:2px solid #d6a93c; display:block;}
.founder-badge .fb-text{display:flex; flex-direction:column; line-height:1.25;}
.founder-badge .fb-name{font-size:12px; font-weight:600; letter-spacing:0.5px; color:#fff;}
.founder-badge .fb-role{font-size:9.5px; letter-spacing:1.5px; color:#d6a93c; text-transform:uppercase;}

.apparel-badge{
  position:fixed; bottom:22px; left:22px; z-index:600;
  display:flex; align-items:center;
  background:rgba(15,15,12,0.94); border:1px solid rgba(122,33,25,0.6);
  border-radius:40px; padding:10px 18px; text-decoration:none;
  font-family:var(--mono); box-shadow:0 4px 18px rgba(0,0,0,0.5);
  transition:transform .15s ease, border-color .15s ease;
}
.apparel-badge:hover{transform:translateY(-2px); border-color:#a92c1f;}
.apparel-badge .ab-text{display:flex; flex-direction:column; line-height:1.25;}
.apparel-badge .ab-name{font-size:12px; font-weight:600; letter-spacing:0.5px; color:#fff;}
.apparel-badge .ab-role{font-size:9.5px; letter-spacing:1px; color:#d6a93c; text-transform:uppercase;}

footer.site-foot{
  background:#050504; border-top:1px solid var(--line);
  padding:26px 0 100px;
  text-align:center;
}
footer.site-foot p{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.5px;}

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
  .nav-links, .nav-right .nav-phone{display:none;}
  .hamburger{display:flex;}
}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{order:-1; min-height:220px;}
  .strip .wrap{grid-template-columns:repeat(2,1fr);}
  .strip-item{border-left:none; border-top:1px solid var(--line); padding:22px 4px;}
  .strip-item:nth-child(1),.strip-item:nth-child(2){border-top:none;}
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-6{grid-template-columns:repeat(3,1fr);}
  .steps{grid-template-columns:repeat(3,1fr);}
  .step{border-top:1px solid var(--line);}
  .step:nth-child(1),.step:nth-child(2),.step:nth-child(3){border-top:none;}
  .step:nth-child(3n+1){border-left:none;}
  .split-panel{grid-template-columns:1fr;}
  .split-panel .sp-photo{min-height:240px;}
  .contact-layout{grid-template-columns:1fr;}
  .area-layout{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}

@media (max-width:640px){
  .wrap{padding:0 18px;}
  .topbar-inner{padding:0 18px; min-height:66px;}
  .brand .b-name{font-size:20px;}
  .nav-right .btn-gold{padding:10px 14px; font-size:11px;}
  .hero-grid{padding:38px 18px 34px; gap:28px;}
  .hero h1{font-size:32px;}
  .section{padding:44px 0;}
  .grid.cols-3, .grid.cols-4{grid-template-columns:1fr 1fr;}
  .grid.cols-6{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .step:nth-child(3n+1){border-left:1px solid var(--line);}
  .step:nth-child(odd){border-left:none;}
  .step:nth-child(1),.step:nth-child(2){border-top:none;}
  .cta-bar .wrap{flex-direction:column; align-items:flex-start;}
  .founder-badge .fb-text{display:none;}
  .founder-badge{padding:6px; bottom:14px; right:14px;}
  .apparel-badge{padding:8px 12px; bottom:14px; left:14px;}
  .apparel-badge .ab-name{font-size:10px;}
  .form-card{padding:22px;}
  .info-card{padding:24px;}
  footer.site-foot{padding-bottom:120px;}
}

@media (max-width:420px){
  .grid.cols-3, .grid.cols-4, .grid.cols-6{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
}