/* ==========================================================================
   RIG RESCUE — SECONDARY PAGES  (What We Fix · Service Area · Contact)

   Loads on top of core.css + roadside.css. It introduces NO new colour, face,
   radius, easing or glow language: every value below is a token, and every
   component is either an existing one (.sec, .sec-head, .fd, .area-card,
   .reality-*) or a quieter relative of one that already exists.

   The only new element is .phead — the page banner. It is deliberately a
   short, quiet cousin of .rhero: same night ground, same signage type, same
   amber lamp, no full-height stage, so these pages read as supporting
   documents rather than competing campaign pages.
   ========================================================================== */

/* ---- page head ---------------------------------------------------------- */
.phead{
  position:relative;
  padding:clamp(24px,3.6vh,42px) var(--gutter) clamp(44px,7vh,86px);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
  isolation:isolate;
}
.phead::before{
  content:"";
  position:absolute;left:-10%;right:-10%;top:-60%;height:190%;z-index:-1;
  background:
    radial-gradient(32% 42% at 82% 46%, rgba(255,160,20,.07), transparent 70%),
    linear-gradient(180deg,#05060A 0%, #08090E 56%, rgba(11,13,17,0) 100%);
}
.phead-k{margin-bottom:20px}
.phead-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.9rem,7.2vw,6.2rem);
  line-height:.88;letter-spacing:.004em;
  margin-left:-.03em;
}
.phead-sub{margin-top:22px;color:var(--dim);max-width:36em}
.phead-cta{display:flex;align-items:center;gap:clamp(18px,3vw,30px);margin-top:34px;flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .phead-k{opacity:0;animation:fadein .6s ease-out .15s forwards}
  .phead .hl-in{transform:translateY(108%);animation:landline .8s var(--ease-land) forwards}
  .phead .hl:nth-child(2) .hl-in{animation-delay:.12s}
  .phead-sub,.phead-cta{opacity:0;animation:fadein .8s ease-out .55s forwards}
}

/* ---- boundary block: what Rig Rescue does not do ------------------------- */
/* Reuses the reality grid's two-column logic. The honest line is not a
   negative-space afterthought — it is a section with a border, like any other. */
.bound{border-top:1px solid var(--hair);margin-top:clamp(44px,6vh,80px);padding-top:clamp(28px,4vh,46px)}
.bound-h{
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
}
.bound-list{list-style:none;margin-top:20px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 clamp(24px,3vw,54px)}
.bound-list li{
  display:flex;align-items:baseline;gap:12px;
  padding:13px 0;border-top:1px solid var(--hair);
  color:var(--dim);font-size:15px;
}
.bound-list li::before{
  content:"";width:9px;height:1px;flex:0 0 9px;background:var(--dimmer);
  transform:translateY(-4px);
}
.bound-note{margin-top:22px;color:var(--dim);font-size:14.5px;max-width:44em}

/* ---- contact: the line, then everything that makes the call useful ------- */
.ct-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,5vw,88px);align-items:start;
}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr}}

.ct-line{
  display:block;
  font-family:var(--disp);font-weight:800;letter-spacing:.01em;line-height:.88;
  font-size:clamp(3.2rem,8.4vw,7rem);
  color:var(--amber);text-shadow:var(--glow-text);
}
.ct-line:hover{color:var(--amber-hi)}
.ct-sep{color:var(--amber-deep)}
.ct-under{
  margin-top:18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);
}
.ct-mail{margin-top:30px}
.ct-mail a{
  font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--dim);
  border-bottom:1px solid var(--hair);padding-bottom:5px;
  transition:color .12s var(--ease-switch), border-color .12s var(--ease-switch);
}
.ct-mail a:hover{color:var(--amber);border-color:var(--amber)}

/* what to have ready — a checklist, in the readout voice */
.ct-ready{margin-top:6px}
.ct-ready h3,.ct-where h3{
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
}
.ct-ready ol{list-style:none;counter-reset:ready;margin-top:18px}
.ct-ready li{
  counter-increment:ready;
  display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--hair);
  color:var(--paper);font-size:15.5px;
}
.ct-ready li:last-child{border-bottom:1px solid var(--hair)}
.ct-ready li::before{
  content:counter(ready,decimal-leading-zero);
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--amber-deep);
}
/* The <b> is its own grid item, so it must be told to sit in the text column —
   left to auto-placement it drops into the 34px counter column and wraps one
   word per line. */
.ct-ready li b{
  grid-column:2;
  display:block;color:var(--dim);font-weight:400;font-size:14px;margin-top:4px;
  max-width:34em;
}

.ct-where{margin-top:clamp(34px,5vh,58px)}
.ct-where ul{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:0 26px}
.ct-where li{
  display:flex;align-items:center;gap:10px;padding:11px 0;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);
}

@media (max-width:900px){
  .ct-mail a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- fault index on its own page ---------------------------------------- */
/* The roadside page shows the index beside a schematic. Standing alone it gets
   the full measure, so the symptom line is readable without the drawing. */
.rrx-fix .fault-index{margin-top:clamp(30px,4vh,52px)}
.rrx-fix .fd-grid{margin-top:clamp(30px,4vh,52px)}

/* ==========================================================================
   RR-02 · LOCATION PAGES
   Same components as everywhere else. Only two new shapes: a numbered dispatch
   list and a "read next" list. Both reuse existing tokens.
   ========================================================================== */

/* the roadside hero is a flex column, so the answer block needs its own gutter */
.rhero .rr-quick-answer{margin-left:var(--gutter);margin-right:var(--gutter)}
@media (max-width:820px){
  .rhero .rr-quick-answer{margin-left:calc(var(--gutter) * 0.5);margin-right:calc(var(--gutter) * 0.5)}
}
.phead .rr-quick-answer{max-width:74ch}

/* ---- dispatch steps ------------------------------------------------------ */
.rr-steps{list-style:none;counter-reset:rrstep;margin-top:clamp(28px,4vh,48px)}
.rr-steps li{
  counter-increment:rrstep;
  display:grid;grid-template-columns:56px 1fr;gap:0 20px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--hair);
}
.rr-steps li:last-child{border-bottom:1px solid var(--hair)}
.rr-steps li::before{
  content:counter(rrstep,decimal-leading-zero);
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--amber);
}
.rr-steps li b{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.05;color:var(--paper);
}
.rr-steps li span{grid-column:2;display:block;margin-top:8px;color:var(--dim);font-size:15px;max-width:56ch}
@media (max-width:560px){
  .rr-steps li{grid-template-columns:40px 1fr;gap:0 14px}
}

/* ---- read next — these are the route buttons, so they must LOOK pressable -- */
.rr-next{list-style:none;margin-top:clamp(26px,4vh,44px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.6vw,20px)}
.rr-next li{display:flex}
.rr-next a{
  position:relative;display:block;width:100%;
  padding:22px 52px 24px 22px;
  background:var(--n2);
  border:1px solid var(--hair);
  border-left:3px solid var(--amber-deep);
  transition:border-color .14s var(--ease-switch), background .14s var(--ease-switch);
}
.rr-next a::after{
  content:"→";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:17px;color:var(--amber-deep);
  transition:color .14s var(--ease-switch), transform .14s var(--ease-switch);
}
.rr-next-l{
  display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.05;color:var(--paper);
}
.rr-next-n{display:block;margin-top:9px;color:var(--dim);font-size:14.5px;line-height:1.5;max-width:44ch}
.rr-next a:hover{background:var(--n3);border-color:rgba(255,176,0,.45);border-left-color:var(--amber)}
.rr-next a:hover .rr-next-l{color:var(--amber)}
.rr-next a:hover::after{color:var(--amber);transform:translateY(-50%) translateX(3px)}
.rr-next a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* the emergency band that follows the roadside hero */
.rr-band{border-top:1px solid var(--hair)}
.rr-band .rr-quick-answer{margin-top:0}

/* location pages reuse the contact checklist shape */
.rr-site .ct-ready ol{margin-top:0}

/* ---- narrow-phone typography ---------------------------------------------
   The location H1s are longer than the two-word secondary-page headings, and
   .hl has overflow:hidden for the landing animation — so an over-wide line is
   silently CLIPPED rather than wrapped. Below 430px the display size becomes
   viewport-relative so the longest headline ("ROADSIDE TRUCK REPAIR.") still
   fits inside the gutter at 360px. */
@media (max-width:430px){
  .phead-h{font-size:8.4vw}
}
@media (max-width:360px){
  .phead-h{font-size:8.2vw}
}

/* ---- load-out stage on phones -------------------------------------------
   .bay is a grid; its items default to min-width:auto, so the column could not
   shrink below its content and pushed the document ~82px wider than a 390px
   viewport. body{overflow-x:hidden} meant nobody could scroll to it, but the
   overflow was real. Letting the items shrink removes it at source. */
@media (max-width:820px){
  .rs .bay,.rs .bay > *{min-width:0}
  .rs .bay-art{max-width:100%}
}

/* ---- journey / load-out stages on phones ---------------------------------
   The roadside page's drawn SVG scenes are laid out in a wide coordinate space
   and clipped by their stage. On narrow viewports a little of that geometry
   still reached the document box (~82px). It was never scrollable — body has
   overflow-x:hidden — but overflow-x:clip contains it at the section instead
   of relying on the body rule. clip does not create a scroll container, so
   position:sticky inside the journey keeps working. */
@media (max-width:900px){
  .rs .run,.rs .loadout,.rs .where,.rs .sec{overflow-x:clip}
}