/* =========================================================
   PRACTICAL SPACE CABINETRY — subpage components (v2)
   Dark "Joinery Engine" system. Requires styles.css tokens.
   ========================================================= */

/* ---------- page hero (compact, dark) ---------- */
.page-hero{position:relative;padding:calc(82px + clamp(56px,9vw,120px)) 0 clamp(44px,6vw,80px);overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 85% -20%, rgba(224,123,51,.13), transparent 55%);}
.page-hero .crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute);margin-bottom:1.6rem;display:block;}
.page-hero .crumb a{color:var(--bone-soft);}
.page-hero .crumb a:hover{color:var(--cu);}
.page-hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);letter-spacing:-.035em;line-height:.94;max-width:20ch;}
.page-hero .lede{margin-top:1.6rem;}
.page-hero .ph-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,72px);align-items:end;}
.page-hero .ph-side{font-family:var(--mono);font-size:.74rem;line-height:2;color:var(--bone-soft);text-align:right;}
.page-hero .ph-side b{color:var(--cu);font-weight:700;}
.page-hero .rule{margin-top:clamp(36px,5vw,64px);}

/* ---------- generic split (media + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,84px);align-items:center;}
.split.rev > .split-media{order:2;}
.split-media{position:relative;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;background:var(--bg-2);}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.2s var(--ease);}
.split-media:hover img{transform:scale(1.04);}
.split-media .fig{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--bone);background:rgba(20,16,9,.6);backdrop-filter:blur(6px);border:1px solid var(--line);padding:.3rem .6rem;border-radius:999px;text-transform:uppercase;}
.split-body .hud{margin-bottom:1rem;}
.split-body h2,.split-body h3{margin:.6rem 0 1rem;}
.split-body .lede{max-width:48ch;}

/* mono spec chips under a service block */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem;}
.chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-soft);border:1px solid var(--line-2);border-radius:999px;padding:.42rem .8rem;}
.chip b{color:var(--cu);font-weight:400;}

/* ---------- service block (alternating) ---------- */
.svc{padding-block:clamp(48px,7vw,100px);border-top:1px solid var(--line);}
.svc:first-of-type{border-top:0;}
.svc .n{font-family:var(--mono);font-size:.8rem;color:var(--cu);display:block;margin-bottom:.8rem;}

/* ---------- data / spec table ---------- */
.spec-table{border:1px solid var(--line);border-radius:4px;overflow:hidden;display:grid;}
.spec-table .tr{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:15px 20px;border-top:1px solid var(--line);background:var(--bg-2);}
.spec-table .tr:first-child{border-top:0;}
.spec-table .tk{font-size:.94rem;color:var(--bone-soft);}
.spec-table .tv{font-family:var(--mono);font-size:.78rem;color:var(--cu);text-align:right;white-space:nowrap;align-self:center;}

/* ---------- process timeline ---------- */
.tl{position:relative;display:grid;gap:0;margin-top:clamp(30px,4vw,56px);}
.tl::before{content:"";position:absolute;left:calc(clamp(44px,6vw,80px)/2);top:0;bottom:0;width:1px;background:linear-gradient(var(--cu),var(--line-2));opacity:.5;}
.tl-step{position:relative;display:grid;grid-template-columns:clamp(44px,6vw,80px) 1fr;gap:clamp(16px,3vw,40px);padding-block:clamp(28px,4vw,52px);border-top:1px solid var(--line);}
.tl-step:first-child{border-top:0;}
.tl-step .dot{position:relative;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--cu);justify-self:center;margin-top:.5rem;box-shadow:0 0 16px rgba(224,123,51,.45);}
.tl-step .s{font-family:var(--mono);font-size:.78rem;color:var(--cu);display:block;margin-bottom:.5rem;}
.tl-step h3{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:.7rem;}
.tl-step p{color:var(--bone-soft);max-width:62ch;}
.tl-step .tl-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);margin-top:.8rem;}
.tl-step .tl-media{margin-top:1.4rem;max-width:560px;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;}
.tl-step .tl-media img{aspect-ratio:16/9;object-fit:cover;width:100%;}

/* ---------- portfolio filter + masonry ---------- */
.pf-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,4vw,44px);}
.pf-filter button{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-soft);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:.55rem 1.1rem;cursor:pointer;transition:color .25s,border-color .25s,background .25s;}
.pf-filter button:hover{color:var(--bone);border-color:var(--line-3);}
.pf-filter button.active{color:#1a0e04;background:var(--cu);border-color:var(--cu);}
.pf-masonry{columns:3;column-gap:20px;}
.pf{position:relative;display:block;break-inside:avoid;margin-bottom:20px;border-radius:5px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);}
.pf img{width:100%;transition:transform 1s var(--ease),filter .5s;filter:saturate(.94) brightness(.94);}
.pf:hover img{transform:scale(1.04);filter:saturate(1) brightness(1);}
.pf .pf-meta{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(transparent,rgba(20,16,9,.94));}
.pf .pf-meta .t{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.015em;}
.pf .pf-meta .m{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cu);margin-top:3px;}
.pf.hide{display:none;}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.faq-item{border-top:1px solid var(--line);background:var(--bg-2);}
.faq-item:first-child{border-top:0;}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.4rem;text-align:left;background:transparent;border:0;padding:22px 24px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;transition:color .25s;}
.faq-q:hover{color:var(--cu);}
.faq-q::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--cu);transition:transform .35s var(--ease);flex:none;}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-a p{padding:0 24px 22px;margin:0;color:var(--bone-soft);max-width:70ch;}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute);margin-bottom:.55rem;}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:3px;color:var(--bone);
  font-family:var(--sans);font-size:16px;padding:.9rem 1rem;transition:border-color .25s,background .25s;appearance:none;}
.field textarea{min-height:150px;resize:vertical;}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E07B33' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cu);background:var(--bg-3);}
.field input::placeholder,.field textarea::placeholder{color:var(--bone-mute);}
.form-note{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--bone-mute);margin-top:1rem;}

/* ---------- contact info panel ---------- */
.info-card{border:1px solid var(--line-2);border-radius:5px;background:var(--bg-2);padding:clamp(26px,3.5vw,40px);}
.info-card + .info-card{margin-top:18px;}
.info-card h3{font-size:1.2rem;margin-bottom:1rem;}
.info-row{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:.55rem 0;align-items:baseline;}
.info-row .ik{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cu);min-width:74px;}
.info-row a{color:var(--bone);border-bottom:1px solid transparent;transition:border-color .2s;}
.info-row a:hover{border-bottom-color:var(--cu);}

/* ---------- value / feature grid ---------- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.val-card{background:var(--bg);padding:30px 26px;transition:background .3s;}
.val-card:hover{background:var(--bg-2);}
.val-card .vi{font-family:var(--mono);font-size:.72rem;color:var(--cu);display:block;margin-bottom:1rem;}
.val-card h3{font-size:1.2rem;margin-bottom:.6rem;}
.val-card p{font-size:.92rem;color:var(--bone-soft);margin:0;}

/* ---------- photo strip / duo ---------- */
.duo{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;}
.duo .ph{border:1px solid var(--line-2);border-radius:5px;overflow:hidden;}
.duo .ph img{width:100%;height:100%;object-fit:cover;}

/* ---------- band (full-bleed accent strip) ---------- */
.band{background:var(--bg-2);border-block:1px solid var(--line);padding-block:clamp(52px,7vw,96px);}

/* ---------- quote/testimonial ---------- */
.pull{border-left:2px solid var(--cu);padding:6px 0 6px clamp(20px,3vw,36px);max-width:60ch;}
.pull p{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.25;letter-spacing:-.015em;color:var(--bone);}
.pull cite{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute);font-style:normal;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .page-hero .ph-grid{grid-template-columns:1fr;}
  .page-hero .ph-side{text-align:left;}
  .split{grid-template-columns:1fr;}
  .split.rev > .split-media{order:0;}
  .pf-masonry{columns:2;}
  .vals{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .duo{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pf-masonry{columns:1;}
}