/* ==========================================================================
   Cross Driven Construction — interior page components.
   site.css holds the tokens, chrome and homepage; this holds everything the
   other pages add. Both are loaded on every page.
   ========================================================================== */

/* ---------- interior page hero ---------- */
.pagehero{
  position:relative;
  background:var(--ink-raised);
  border-bottom:1px solid var(--line-soft);
  isolation:isolate;
}
.pagehero--image{ background:#2a2724; }
.pagehero__media{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08);
}
.pagehero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(18,17,16,.72) 0%,rgba(18,17,16,.93) 78%,rgba(18,17,16,.97) 100%);
}
.pagehero__inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,4vw,40px); flex-wrap:wrap;
  padding-block:clamp(38px,6vw,60px);
}
.pagehero__content{ display:flex; flex-direction:column; gap:12px; max-width:660px; }
.pagehero__content .lede{ max-width:56ch; }

@media (min-width:760px){
  .pagehero--image .pagehero__scrim{
    background:linear-gradient(90deg,rgba(18,17,16,.96) 0%,rgba(18,17,16,.9) 52%,rgba(18,17,16,.32) 100%);
  }
}

/* ---------- jump bar (remodel) ---------- */
.jumpbar{
  position:sticky; top:var(--header-h); z-index:50;
  background:var(--ink-panel);
  border-bottom:1px solid var(--line);
}
.jumpbar__inner{
  display:flex; align-items:center; gap:8px;
  padding-block:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.jumpbar__inner::-webkit-scrollbar{ display:none; }
.jumpbar__label{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  flex:none; margin-right:4px;
}
.jumpbar__link{
  flex:none;
  padding:9px 14px;
  font-size:13px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line-card);
  white-space:nowrap;
}
.jumpbar__link:hover{ color:var(--on-yellow); background:var(--yellow); border-color:var(--yellow); }

/* ---------- alternating service rows ---------- */
.svcrow + .svcrow{ border-top:1px solid var(--line); }
.svcrow__inner{
  display:grid; gap:clamp(22px,4vw,44px);
  grid-template-columns:1fr;
  align-items:center;
}
.svcrow__text{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.svcrow__head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.svcrow__price{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-yellow); background:var(--yellow);
  padding:5px 10px;
}
.svcrow__text .lede{ max-width:54ch; }
.svcrow__media img{ width:100%; height:auto; }
.svcrow__placeholder{
  width:100%; aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg,var(--ink-raised) 0 12px,var(--ink-panel) 12px 24px);
  border:1px solid var(--line-soft);
}
@media (min-width:900px){
  .svcrow__inner{ grid-template-columns:1fr 1fr; }
  .svcrow--flip .svcrow__text{ order:2; }
  .svcrow--flip .svcrow__media{ order:1; }
}

.pointlist{ display:flex; flex-direction:column; gap:10px; }
.pointlist__item{
  position:relative;
  padding-left:22px;
  font-size:clamp(14px,1.9vw,15px); line-height:1.6; color:var(--muted);
  text-wrap:pretty;
}
.pointlist__item::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:2px; background:var(--yellow);
}

/* ---------- design band ---------- */
.designband{ background:var(--ink-raised); border-block:1px solid var(--line-soft); }
.designband__inner{
  display:grid; gap:clamp(18px,3vw,40px);
  grid-template-columns:1fr;
}
.designband__inner .lede{ max-width:62ch; }
@media (min-width:900px){ .designband__inner{ grid-template-columns:0.8fr 1.2fr; } }

/* ---------- process ---------- */
.process{
  display:grid; gap:14px;
  grid-template-columns:1fr;
  margin-top:clamp(20px,3vw,28px);
}
.process__step{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 16px;
  background:var(--ink-raised);
  border-left:3px solid var(--yellow);
}
.process__n{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; color:var(--yellow);
}
.process__title{ font-family:var(--black); font-size:17px; text-transform:uppercase; }
.process__body{ font-size:14px; line-height:1.6; color:var(--muted); text-wrap:pretty; }
@media (min-width:640px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .process{ grid-template-columns:repeat(5,1fr); } }

.services__rule--dark{ background:var(--yellow); }

/* ---------- CTA band eyebrow ---------- */
.callblock__eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-yellow-quiet); margin-bottom:8px;
}

/* ---------- chips (filters + form choices) ---------- */
.filterbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:16px;
}
.filterbar__label{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  margin-right:4px;
}
.filterbar__count{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  margin-bottom:16px;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; position:relative; }
.chip__input{
  position:absolute; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer;
}
.chip__face,
.chip--button .chip__face{
  display:inline-flex; align-items:center;
  min-height:44px; padding:10px 16px;
  font-size:14px; font-weight:600;
  color:var(--warm);
  background:transparent;
  border:1.5px solid var(--line-strong);
  transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover .chip__face,
.chip--button:hover .chip__face{ border-color:var(--yellow); color:var(--text); }
.chip__input:checked + .chip__face,
.chip--button.is-on .chip__face{
  background:var(--yellow); border-color:var(--yellow); color:var(--on-yellow);
}
.chip__input:focus-visible + .chip__face{
  outline:3px solid var(--yellow); outline-offset:2px;
}
.chip--button{ padding:0; border:0; background:none; }

/* ---------- gallery ---------- */
.grid-gallery{
  display:grid; gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .grid-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grid-gallery{ grid-template-columns:repeat(3,1fr); } }

.shot{ margin:0; background:var(--ink-raised); display:flex; flex-direction:column; }
.shot picture{ display:block; overflow:hidden; }
.shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s ease; }
.shot:hover img{ transform:scale(1.03); }
.shot__cap{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px 16px;
  border-top:1px solid var(--line-card);
}
.shot__title{ font-weight:700; font-size:15px; }
.shot__place{ font-size:13px; color:var(--muted); }
.shot__tag{
  align-self:flex-start; margin-top:6px;
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow);
}
.shot[hidden]{ display:none; }
.grid-gallery__empty{
  padding:36px 0; color:var(--muted);
  font-size:clamp(15px,2vw,17px);
}

/* ---------- job map page ---------- */
.mapbox--tall{ height:clamp(360px,64vh,620px); }
.mapscope{
  margin-top:12px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.mapnote{ margin-top:8px; max-width:62ch; }

/* ---------- about ---------- */
.storyrow{
  display:grid; gap:clamp(18px,3vw,40px);
  grid-template-columns:1fr;
}
.storyrow__body{ display:flex; flex-direction:column; gap:16px; max-width:64ch; }
@media (min-width:900px){ .storyrow{ grid-template-columns:0.8fr 1.2fr; } }

.crew--full{ grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .crew--full{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .crew--full{ grid-template-columns:repeat(5,1fr); } }
@media (min-width:1100px){ .crew--full{ grid-template-columns:repeat(6,1fr); } }

.strip--flush{ margin-top:clamp(24px,4vw,34px); border-bottom:0; }

.creds{
  display:grid; gap:14px;
  grid-template-columns:1fr;
  margin-top:clamp(20px,3vw,26px);
}
.cred{
  padding:18px 16px;
  background:var(--ink-raised);
  border-top:3px solid var(--yellow);
  display:flex; flex-direction:column; gap:6px;
}
.cred__label{
  font-family:var(--black); font-size:16px; text-transform:uppercase; color:var(--text);
}
@media (min-width:640px){ .creds{ grid-template-columns:repeat(2,1fr); } }
/* Six items: three across beats four-plus-two. */
@media (min-width:1000px){ .creds{ grid-template-columns:repeat(3,1fr); } }

/* ---------- careers roles ---------- */
.roles{ display:flex; flex-direction:column; }
.role{ border-top:1px solid var(--line-card); }
.role:last-child{ border-bottom:1px solid var(--line-card); }
.role__summary{
  display:flex; align-items:center; gap:14px;
  padding:18px 4px; cursor:pointer;
  list-style:none;
  min-height:56px;
}
.role__summary::-webkit-details-marker{ display:none; }
.role__summary:hover .role__title{ color:var(--yellow); }
.role__summary:focus-visible{ outline:3px solid var(--yellow); outline-offset:-3px; }
.role__title{
  flex:1;
  font-family:var(--black); font-size:clamp(17px,2.6vw,21px);
  text-transform:uppercase; color:var(--text);
}
.role__exp{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}
.role__toggle{
  position:relative; flex:none; width:16px; height:16px;
}
.role__toggle::before,
.role__toggle::after{
  content:""; position:absolute; background:var(--yellow);
  transition:opacity .15s ease;
}
.role__toggle::before{ left:0; top:7px; width:16px; height:2px; }
.role__toggle::after{ left:7px; top:0; width:2px; height:16px; }
.role[open] .role__toggle::after{ opacity:0; }
/* Must stay display:none while closed. Setting display:flex unconditionally
   overrides the UA rule that hides a closed <details>, which left the pay
   ranges on screen -- the exact thing this accordion exists to prevent. */
.role__body{ display:none; }
.role[open] .role__body{
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  padding:0 4px 22px;
  max-width:66ch;
}
.role__pay{
  font-family:var(--black); font-size:clamp(20px,3.4vw,26px);
  color:var(--yellow);
}

/* ---------- forms ---------- */
.applyrow,
.quoterow{
  display:grid; gap:clamp(26px,4vw,44px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:1000px){
  .applyrow{ grid-template-columns:1.4fr 0.9fr; }
  .quoterow{ grid-template-columns:1.35fr 0.9fr; }
}

.form{ display:flex; flex-direction:column; gap:clamp(20px,3vw,28px); }
.form__hp{ position:absolute; left:-9999px; }
.form__row{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:560px){ .form__row{ grid-template-columns:repeat(2,1fr); } }

.field{ display:flex; flex-direction:column; gap:7px; border:0; padding:0; margin:0; min-width:0; }
.field__label{
  font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  padding:0;
}
.field__req,
.field__opt{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; margin-left:6px;
}
.field__req{ color:var(--yellow); }
.field__opt{ color:var(--line-bold); }
.field__input{
  width:100%; min-height:50px;
  padding:13px 14px;
  font-family:var(--font); font-size:16px;   /* 16px stops iOS zooming on focus */
  color:var(--text);
  background:var(--ink);
  border:1.5px solid var(--line-strong);
  border-radius:0;
}
textarea.field__input{ min-height:auto; resize:vertical; line-height:1.55; }
.field__input::placeholder{ color:var(--dim); }
.field__input:focus{ outline:3px solid var(--yellow); outline-offset:1px; border-color:var(--yellow); }
.field__file{
  font-size:14px; color:var(--muted);
  padding:12px 0;
}
.field__file::file-selector-button{
  font:inherit; font-weight:700;
  margin-right:12px; padding:11px 16px;
  color:var(--on-yellow); background:var(--yellow);
  border:0; cursor:pointer;
}
.field__help{ font-size:13px; color:var(--dim); text-wrap:pretty; }

.step{ border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:12px; }
.step__head{ display:flex; align-items:baseline; gap:12px; padding:0; }
.step__n{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.1em; color:var(--yellow);
}
.step__q{
  font-family:var(--black); font-size:clamp(18px,2.8vw,22px);
  text-transform:uppercase; color:var(--text);
}

.rangecard{
  display:flex; flex-direction:column; gap:4px;
  padding:16px 18px; margin-top:4px;
  background:var(--ink-raised);
  border-left:3px solid var(--yellow);
}
.rangecard__label{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.rangecard__value{
  font-family:var(--black); font-size:clamp(24px,4vw,30px); color:var(--yellow);
}
.rangecard__note{ font-size:14px; color:var(--muted); text-wrap:pretty; }

.form__submit{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-top:4px;
}

/* ---------- side panels ---------- */
.applyrow__aside,
.quoterow__aside{ display:flex; flex-direction:column; gap:14px; }
.panel{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:20px 18px;
  background:var(--ink-panel);
  border:1px solid var(--line-card);
}
.panel__h{
  font-family:var(--black); font-size:16px;
  text-transform:uppercase; color:var(--text);
}
.panel__phone{
  font-family:var(--black); font-size:clamp(22px,3.6vw,28px);
  color:var(--yellow); letter-spacing:-.01em;
}
.numlist{ display:flex; flex-direction:column; gap:12px; counter-reset:n; }
.numlist__item{
  position:relative; counter-increment:n;
  padding-left:32px;
  font-size:14px; line-height:1.6; color:var(--muted); text-wrap:pretty;
}
.numlist__item::before{
  content:counter(n);
  position:absolute; left:0; top:0;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--on-yellow); background:var(--yellow);
}

/* ---------- quote page header ---------- */
.quotehead{ background:var(--ink-raised); border-bottom:1px solid var(--line-soft); }
.quotehead__inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-block:clamp(30px,5vw,48px);
}
.quotehead__phone{
  font-family:var(--black); font-size:clamp(22px,3.6vw,30px);
  color:var(--yellow); letter-spacing:-.01em;
}

/* ---------- privacy prose ---------- */
.prose{ display:flex; flex-direction:column; gap:30px; margin-top:clamp(26px,4vw,36px); }
.prose section{ display:flex; flex-direction:column; gap:10px; max-width:68ch; }
.prose h2{
  font-family:var(--black); font-size:clamp(17px,2.6vw,20px);
  text-transform:uppercase; color:var(--text);
}
.prose p{ font-size:clamp(15px,2vw,16px); line-height:1.7; color:var(--muted); text-wrap:pretty; }
.prose__updated{
  margin-top:34px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--dim);
}

/* ---------- thanks ---------- */
.thanks__inner{
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  min-height:46vh; justify-content:center;
  max-width:56ch;
}

/* ---------- careers benefits ---------- */
.benefits__h{
  margin-top:clamp(30px,5vw,44px);
  margin-bottom:clamp(14px,2vw,18px);
  color:var(--text);
}
.benefits__note{ margin-top:16px; max-width:62ch; }

/* ---------- per-town pages (prototype) ---------- */
.streets{
  display:grid; gap:0 clamp(18px,3vw,40px);
  grid-template-columns:1fr;
}
.streets__item{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--line-card);
}
.streets__name{ font-size:clamp(14px,2vw,15px); color:var(--warm); }
.streets__n{
  font-family:var(--mono); font-size:12px; color:var(--yellow);
  font-variant-numeric:tabular-nums;
}
@media (min-width:640px){ .streets{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .streets{ grid-template-columns:repeat(3,1fr); } }

/* ---------- service area list (job map page) ---------- */
.areas__h{ margin-top:clamp(30px,5vw,44px); margin-bottom:14px; color:var(--text); }
.areas{
  display:flex; flex-wrap:wrap; gap:8px 0;
  font-size:clamp(14px,2vw,15px);
}
.areas__item{ color:var(--muted); }
.areas__item::after{ content:"\00b7"; margin:0 10px; color:var(--line-bold); }
.areas__item:last-child::after{ content:none; }
.areas__item a{ color:var(--yellow); font-weight:600; }
.areas__item a:hover{ color:var(--text); }

.cred__link{
  align-self:flex-start; margin-top:4px;
  font-size:13px; font-weight:600;
  border-bottom:1px solid currentColor;
}

/* ---------- crew group photo ---------- */
.crewshot{
  margin:0 0 clamp(22px,3.5vw,32px);
  background:var(--ink-panel);
  border:1px solid var(--line-soft);
}
.crewshot img{ width:100%; height:auto; display:block; }

/* ---------- mission and verses (about) ---------- */
.missionband{ background:var(--ink-raised); border-block:1px solid var(--line-soft); }
.missionband__inner{
  display:grid; gap:clamp(18px,3vw,40px);
  grid-template-columns:1fr;
}
.missionband__body{ display:flex; flex-direction:column; gap:22px; }
.missionband__body .lede{ max-width:62ch; }
.verse{
  display:flex; flex-direction:column; gap:8px;
  padding-left:18px;
  border-left:2px solid var(--yellow);
  max-width:60ch;
}
.verse__text{
  font-size:clamp(15px,2vw,17px); line-height:1.6; color:var(--warm);
  text-wrap:pretty;
}
.verse__ref{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--yellow);
}
@media (min-width:900px){ .missionband__inner{ grid-template-columns:0.8fr 1.2fr; } }