/* ==========================================================================
   BathCraft - inner page styles
   Additive only. Loaded AFTER style.css and never modifies it, so the
   homepage is unaffected. Reuses the same tokens (gold --clay-500,
   navy --slate-900) and the same component vocabulary as the homepage.
   ========================================================================== */

/* ---------- Active nav state ---------- */
.nav-links a.is-active{color:var(--clay-500);}
.nav-links a.is-active::after{width:100%;}

/* ---------- Inner page hero ---------- */
.page-hero{
  position:relative;
  background:linear-gradient(160deg,var(--slate-900) 0%,var(--moss-700) 60%,#0B1425 100%);
  color:var(--cream);
  padding:96px 0 84px;
}
.page-hero .eyebrow{color:var(--clay-500);}
.page-hero .eyebrow::before{background:var(--clay-500);}
.page-hero h1{
  color:var(--cream);
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.06;
  max-width:15ch;
  margin-bottom:20px;
}
.page-hero p.lead{
  font-size:17.5px;
  color:#AEB6BE;
  max-width:620px;
}
.page-hero .strata{margin-top:56px;}
.crumb{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8892A0;
  margin-bottom:26px;
}
.crumb a{color:#8892A0;}
.crumb a:hover{color:var(--clay-500);}
.crumb span{color:var(--clay-500);}

/* ---------- Generic prose / story ---------- */
.prose p{font-size:16.5px; color:#4B5563; margin-bottom:20px; max-width:70ch;}
.prose p.big{font-size:19px; color:#232D38;}
.prose p:last-child{margin-bottom:0;}
.pull{
  font-family:var(--font-display);
  font-size:22px;
  font-style:italic;
  color:var(--slate-800);
  border-left:2px solid var(--clay-500);
  padding-left:24px;
  margin:36px 0;
  max-width:60ch;
}

/* ---------- Two-column split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split.narrow-right{grid-template-columns:1.15fr 0.85fr;}
.split.narrow-left{grid-template-columns:0.85fr 1.15fr;}

/* ---------- Numbers strip ---------- */
.numbers{background:var(--slate-900); color:var(--cream); padding:70px 0;}
.numbers-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
.numbers-item{background:var(--slate-900); padding:34px 26px; text-align:center;}
.numbers-item .n{font-family:var(--font-display); font-size:40px; font-weight:600; color:var(--clay-500); line-height:1;}
.numbers-item .l{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#9AA4AF; margin-top:12px;}

/* ---------- Filter tabs (portfolio) ---------- */
.filter-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.filter-tabs button{
  padding:9px 18px; border:1px solid var(--line); background:transparent;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  border-radius:2px; color:var(--slate-800); transition:all .18s ease;
}
.filter-tabs button:hover{border-color:var(--clay-500); color:var(--clay-600);}
.filter-tabs button.active{background:var(--slate-900); color:var(--cream); border-color:var(--slate-900);}

/* ---------- Portfolio detail cards ---------- */
.pf-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px;}
.pf-card{border:1px solid var(--line); background:var(--cream); display:flex; flex-direction:column;}
.pf-card .img-ph{aspect-ratio:16/10;}
.pf-body{padding:30px 28px 32px;}
.pf-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.pf-tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--clay-500); color:var(--clay-600); padding:4px 9px;
}
.pf-tag.solid{background:var(--slate-900); border-color:var(--slate-900); color:var(--cream);}
.pf-card h3{font-size:20px; margin-bottom:18px;}
.pf-line{margin-bottom:14px;}
.pf-line:last-child{margin-bottom:0;}
.pf-line b{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--clay-500); margin-bottom:5px; font-weight:600;
}
.pf-line p{font-size:14.5px; color:#4B5563;}

/* ---------- Included / affects lists ---------- */
.incl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px;}
.incl-grid li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:#232D38; padding:12px 0; border-bottom:1px solid var(--line);}
.incl-grid li::before{content:"✓"; color:var(--clay-500); flex-shrink:0; font-weight:700;}
.affects-list li{
  display:flex; gap:16px; align-items:flex-start; font-size:15.5px; color:#232D38;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.affects-list li .k{font-family:var(--font-mono); font-size:12px; color:var(--clay-500); flex-shrink:0; padding-top:3px; min-width:28px;}

/* ---------- Standalone services table ---------- */
.svc-table{width:100%; border-collapse:collapse; border:1px solid var(--line);}
.svc-table th{
  text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--cream); background:var(--slate-900); padding:16px 22px; font-weight:600;
}
.svc-table td{padding:18px 22px; border-top:1px solid var(--line); font-size:15px; color:#232D38;}
.svc-table td.price{font-family:var(--font-display); font-weight:600; color:var(--clay-600); white-space:nowrap;}
.svc-table tr:nth-child(even) td{background:var(--stone-100);}

/* ---------- Who it's for ---------- */
.who-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.who-item{background:var(--stone-50); padding:30px 28px; display:flex; gap:16px; align-items:flex-start;}
.who-item .tick{
  width:26px; height:26px; border-radius:50%; background:var(--clay-500); color:var(--slate-900);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:700;
}
.who-item p{font-size:15px; color:#232D38;}

/* ---------- Contact cards ---------- */
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.cc-card{border:1px solid var(--line); background:var(--cream); padding:34px 30px; display:flex; flex-direction:column;}
.cc-icon{
  width:46px; height:46px; border:1px solid var(--clay-500); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--clay-500); margin-bottom:22px;
}
.cc-card h3{font-size:19px; margin-bottom:10px;}
.cc-card p{font-size:14.5px; color:#4B5563; flex:1; margin-bottom:20px;}
.cc-value{font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--slate-900); margin-bottom:20px;}

/* ---------- Hours + map ---------- */
.hours-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); max-width:520px;}
.hours-item{background:var(--stone-50); padding:22px 24px;}
.hours-item .d{font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--clay-500); margin-bottom:7px;}
.hours-item .t{font-size:15.5px; color:#232D38; font-weight:600;}
.map-embed{border:1px solid var(--line); overflow:hidden; line-height:0; background:var(--stone-100);}
.map-embed iframe{width:100%; height:420px; border:0; display:block;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--slate-900); color:var(--cream); padding:76px 0;}
.cta-band .inner{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.cta-band h2{color:var(--cream); font-size:clamp(26px,3.4vw,38px); max-width:18ch;}
.cta-band p{color:#9AA4AF; font-size:16px; margin-top:12px; max-width:52ch;}
.cta-band .acts{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Section rhythm ---------- */
.sec{padding:100px 0;}
.sec.tight{padding:76px 0;}
.sec.light{background:var(--stone-50);}
.sec.mid{background:var(--stone-100);}
.sec.dark{background:var(--slate-900); color:var(--cream);}
.sec.dark h2,.sec.dark h3{color:var(--cream);}
.sec.dark .section-head p{color:#AEB6BE;}
.sec.dark .eyebrow{color:var(--clay-500);}
.sec.dark .eyebrow::before{background:var(--clay-500);}
.sec.dark .prose p{color:#AEB6BE;}

/* ---------- Honeypot (bots fill it, humans never see it) ---------- */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- Notice / pending flag ---------- */
.notice{
  display:flex; gap:12px; align-items:flex-start; border:1px dashed var(--clay-500);
  padding:16px 20px; font-size:13.5px; color:#4B5563; background:rgba(201,162,39,0.06);
  margin-top:28px; max-width:70ch;
}
.notice b{color:var(--clay-600);}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .split,.split.narrow-right,.split.narrow-left{grid-template-columns:1fr; gap:38px;}
  .pf-grid{grid-template-columns:1fr;}
  .numbers-grid{grid-template-columns:repeat(2,1fr);}
  .contact-cards{grid-template-columns:1fr; max-width:460px;}
  .incl-grid{grid-template-columns:1fr;}
  .who-grid{grid-template-columns:1fr;}
  .cta-band .inner{flex-direction:column; align-items:flex-start;}
}
@media (max-width:680px){
  .page-hero{padding:64px 0 56px;}
  .sec{padding:70px 0;}
  .sec.tight{padding:56px 0;}
  .numbers-grid{grid-template-columns:1fr;}
  .hours-grid{grid-template-columns:1fr;}
  .svc-table th,.svc-table td{padding:13px 14px; font-size:13.5px;}
  .cta-band .acts .btn{width:100%;}
}

/* ---------- Responsive additions ---------- */
@media (max-width:680px){
  .page-hero h1{font-size:clamp(26px,7vw,34px); max-width:none;}
  .page-hero p.lead{font-size:15.5px;}
  .cta-band{padding:56px 0;}
  .cta-band .acts{flex-direction:column; align-items:stretch; width:100%;}
  .cta-band .acts .bc-btn{width:100%;}
  .pf-body{padding:24px 20px 26px;}
  .pf-card h3{font-size:18px;}
  .filter-tabs{gap:8px; margin-bottom:30px;}
  .filter-tabs button{padding:8px 13px; font-size:11.5px;}
  .cc-card{padding:28px 22px;}
  .map-embed iframe{height:300px;}
  .prose p{font-size:15.5px;}
  .prose p.big{font-size:17px;}
  .pull{font-size:18px; padding-left:18px; margin:28px 0;}
}