/* ==========================================================================
   Alpha Petroleum - reusable service-page components
   ServiceSituationSelector · CapabilityExplorer · ServiceProcessTimeline
   Data-driven, progressive-enhancement components. All content is authored in
   the page HTML; this stylesheet and components.js only add presentation and
   interaction. Everything degrades to a readable static page with no JS.
   Uses the tokens defined in site.css (colors, fonts, radii, spacing).
   ========================================================================== */

/* Progressive enhancement flag: components.js sets .js on <html> as early as
   possible. Interactive collapsing only happens when JS is present, so a
   no-JS visitor sees every panel, capability, and timeline step in full. */

/* ---- shared section intro for a component block ---- */
.cmp-intro{max-width:72ch;margin-bottom:clamp(26px,3vw,40px)}
.cmp-intro .eyebrow{display:block;margin-bottom:.9em}
.cmp-note{font-size:.9rem;line-height:1.55;font-family:var(--body)}
.sec--light .cmp-note{color:var(--t-on-light-mute)}
.sec--dark .cmp-note,.sec--ink2 .cmp-note{color:var(--t-on-dark-mute)}

/* ==========================================================================
   1. ServiceSituationSelector
   Radio-card fieldset -> reveals a matching result panel. On a dark section.
   ========================================================================== */
.ssel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;align-items:start}
@media(max-width:880px){.ssel{grid-template-columns:1fr;gap:24px}}

.ssel__form{border:0;margin:0;padding:0;min-width:0}
.ssel__legend{font-family:var(--disp);font-weight:800;font-size:1.15rem;color:#fff;padding:0;margin-bottom:16px;line-height:1.25}
.ssel__opts{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.ssel__opt{position:relative}
.ssel__opt input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.ssel__opt label{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--ink-3);border:1px solid var(--line-dark);color:#E7E9EC;
  font-family:var(--body);font-size:1rem;font-weight:500;line-height:1.35;
  padding:15px 18px;border-radius:11px;cursor:pointer;min-height:56px;
  transition:border-color .2s,background .2s,transform .15s}
.ssel__opt label:hover{border-color:var(--red);background:#202329}
.ssel__opt label .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel-soft);flex:none}
/* selected state: not colour alone - border, fill, weight and a check glyph */
.ssel__opt input:checked+label{border-color:var(--red);background:#23181a;font-weight:600}
.ssel__opt input:checked+label .tag{color:var(--red-hot)}
.ssel__opt input:checked+label .tick{opacity:1;transform:scale(1)}
.ssel__opt label .tick{opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s;
  flex:none;width:20px;height:20px;border-radius:50%;background:var(--red);
  display:inline-grid;place-items:center}
.ssel__opt label .tick svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none}
.ssel__opt input:focus-visible+label{outline:2px solid #fff;outline-offset:2px}

/* result column */
.ssel__result{background:#0A0B0D;border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);min-height:100%;position:relative}
.ssel__reshead{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-soft);margin-bottom:8px}
/* when JS is active we hide all but the active panel; without JS all show */
.js .ssel__panel{display:none}
.js .ssel__panel.is-active{display:block}
.ssel__panel{animation:cmp-fade .35s ease}
.ssel__panel h3{font-family:var(--disp);font-weight:900;font-size:1.4rem;color:#fff;
  line-height:1.15;margin:0 0 .5em}
.ssel__panel>p{color:#D6D9DD;font-size:1rem;line-height:1.6;margin:0 0 1.1em}
.ssel__sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-hot);margin:1.2em 0 .6em}
.ssel__panel ul{list-style:none;margin:0 0 .4em;padding:0;display:flex;flex-direction:column;gap:8px}
.ssel__panel ul li{position:relative;padding-left:1.5em;color:#E7E9EC;font-size:.96rem;line-height:1.5}
.ssel__panel ul li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;
  border-radius:2px;background:var(--red)}
.ssel__panel ul.ssel__links li::before{background:transparent;border:2px solid var(--red);top:.45em;
  width:8px;height:8px;border-radius:50%}
.ssel__panel ul.ssel__links a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(224,51,63,.6)}
.ssel__panel ul.ssel__links a:hover{text-decoration-color:var(--red-hot)}
.ssel__cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:1.4em}
/* the pre-selection hint that JS shows first; hidden without JS since panels show */
.ssel__hint{display:none}
.js .ssel__hint{display:block}
.js .ssel__hint.is-active~*{}
/* no-JS heading that separates stacked panels */
.ssel__panel>.ssel__pnlabel{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-hot);margin-bottom:10px}
.js .ssel__panel>.ssel__pnlabel{display:none}
.ssel__panel+.ssel__panel{margin-top:26px;padding-top:26px;border-top:1px solid var(--line-dark)}
.js .ssel__panel+.ssel__panel{margin-top:0;padding-top:0;border-top:0}

@keyframes cmp-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==========================================================================
   2. CapabilityExplorer
   Native <details> accordion cards on a light section. Zero-JS friendly.
   ========================================================================== */
.capx{display:flex;flex-direction:column;gap:12px;max-width:900px}
.capx__item{background:var(--paper);border:1px solid var(--line-light);border-radius:var(--r);
  overflow:hidden}
.capx__item[open]{border-color:var(--red)}
.capx__sum{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;cursor:pointer;list-style:none;
  font-family:var(--disp);font-weight:700;font-size:1.12rem;color:var(--t-on-light)}
.capx__sum::-webkit-details-marker{display:none}
.capx__sum:hover{color:var(--red)}
.capx__item summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.capx__sum .capx__ico{flex:none;width:24px;height:24px;position:relative}
.capx__sum .capx__ico::before,.capx__sum .capx__ico::after{content:"";position:absolute;
  background:var(--red);border-radius:2px;transition:transform .3s}
.capx__sum .capx__ico::before{width:14px;height:2px;top:11px;left:5px}
.capx__sum .capx__ico::after{width:2px;height:14px;top:5px;left:11px}
.capx__item[open] .capx__sum .capx__ico::after{transform:scaleY(0)}
.capx__body{padding:0 22px 22px}
.capx__body p{color:var(--t-on-light);font-size:1rem;line-height:1.65;margin:0 0 .9em;max-width:74ch}
.capx__body .capx__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--maroon);margin:1.1em 0 .5em}
.capx__body ul{list-style:none;margin:0 0 .4em;padding:0;display:flex;flex-direction:column;gap:7px;max-width:74ch}
.capx__body ul li{position:relative;padding-left:1.5em;color:var(--t-on-light);font-size:.98rem;line-height:1.55}
.capx__body ul li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:2px;background:var(--red)}
.capx__body .capx__rel a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.capx__body .capx__rel a:hover{color:var(--red)}
.capx__cta{margin-top:22px}

/* ==========================================================================
   3. ServiceProcessTimeline
   Two pathways switched by a button/tab group. Vertical ordered lists.
   ========================================================================== */
.sptl__tabs{display:inline-flex;gap:6px;background:var(--paper-2);border:1px solid var(--line-light);
  border-radius:999px;padding:5px;margin-bottom:30px;max-width:100%;flex-wrap:wrap}
.sptl__tab{font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--t-on-light-mute);
  background:none;border:0;border-radius:999px;padding:.7em 1.3em;cursor:pointer;
  transition:background .2s,color .2s;min-height:44px}
.sptl__tab:hover{color:var(--t-on-light)}
.sptl__tab[aria-selected="true"]{background:var(--ink);color:#fff}
.sptl__tab:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.sptl__pathwrap{max-width:820px}
/* both pathways in HTML; JS hides the inactive one. No-JS shows both with headings. */
.js .sptl__path{display:none}
.js .sptl__path.is-active{display:block}
.sptl__path>h3.sptl__phead{font-family:var(--disp);font-weight:800;font-size:1.3rem;
  color:var(--t-on-light);margin:0 0 1em}
.js .sptl__path>h3.sptl__phead{display:none}
.sptl__steps{list-style:none;counter-reset:sptl;margin:0;padding:0;position:relative}
.sptl__steps li{position:relative;padding:0 0 26px 60px}
.sptl__steps li:last-child{padding-bottom:0}
/* connecting rail */
.sptl__steps li::before{counter-increment:sptl;content:counter(sptl);
  position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:#fff;font-family:var(--mono);font-weight:600;font-size:.95rem;
  display:grid;place-items:center;z-index:1}
.sptl__steps li::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;
  background:var(--line-light)}
.sptl__steps li:last-child::after{display:none}
.sptl__path--urgent .sptl__steps li::before{background:var(--red)}
.sptl__step-h{font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--t-on-light);
  margin:.35em 0 .4em;line-height:1.25}
.sptl__step-b{color:var(--t-on-light-mute);font-size:.98rem;line-height:1.6;margin:0 0 .6em;max-width:64ch}
.sptl__step-meta{font-size:.9rem;color:var(--t-on-light-mute);max-width:64ch;line-height:1.55}
.sptl__step-meta b{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--maroon);font-weight:600;display:block;margin-bottom:2px}
.sptl__end{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:520px){
  .sptl__steps li{padding-left:52px}
  .sptl__steps li::before{width:36px;height:36px}
  .sptl__steps li::after{left:17px;top:36px}
}

/* reduced motion: kill component transitions/animations */
@media(prefers-reduced-motion:reduce){
  .ssel__panel{animation:none}
  .capx__sum .capx__ico::before,.capx__sum .capx__ico::after,
  .ssel__opt label,.sptl__tab{transition:none}
}

/* ==========================================================================
   Spacing refinements (additive) - give the situation-selector result area
   and the other components proper breathing room. Nothing here changes
   layout structure; it only adjusts vertical rhythm and hides the intro
   hint once a real result is shown so it cannot collide with the heading.
   ========================================================================== */

/* 1 + 2. Once a result panel is active, hide the placeholder instruction so
   it stops crowding the result heading. JS already drops .is-active from the
   hint on a match (components.js); this makes the CSS honour that state. */
.js .ssel__hint:not(.is-active){display:none}

/* Breathing room under the "Your pathway" label and the intro hint. */
.ssel__result{padding:clamp(24px,2.6vw,34px)}
.ssel__reshead{margin-bottom:18px}
.ssel__hint{margin:0;line-height:1.65;color:#C9CDD3}

/* 3. Clear separation above the result heading and between its sub-sections. */
.js .ssel__panel.is-active{margin-top:2px}
.ssel__panel h3{margin:0 0 .7em;padding-top:.1em}
.ssel__panel>p{margin:0 0 1.3em}
.ssel__sub{margin:1.7em 0 .7em}
.ssel__panel ul{margin:0 0 .5em}
.ssel__panel ul.ssel__links{margin-bottom:.2em}
.ssel__cta{margin-top:1.8em}

/* 4a. Capability explorer: a little more rhythm inside open cards. */
.capx__body{padding:2px 22px 26px}
.capx__body p{margin:0 0 1.05em}
.capx__body .capx__label{margin:1.4em 0 .6em}
.capx__body ul{margin:0 0 .6em}
.capx__cta{margin-top:26px}

/* 4b. Process timeline: consistent step spacing and end rhythm. */
.sptl__steps li{padding-bottom:30px}
.sptl__step-h{margin:.45em 0 .5em}
.sptl__step-b{margin:0 0 .7em}
.sptl__step-meta{margin-top:.2em}
.sptl__end{margin-top:32px}

/* ==========================================================================
   Reusable in-container text + image pairing (svc-duo)
   Standard content width (sits inside .container), balanced two columns so a
   text block never leaves a large empty half. Copy uses the site's standard
   .prose typography. Image side fills with approved photography. This is the
   pattern for text+image sections across the service pages.
   ========================================================================== */
.svc-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px);align-items:stretch}
.svc-duo__copy{min-width:0;align-self:center}
.svc-duo__copy>.prose{max-width:none}
.svc-duo__media{min-width:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(8,9,11,.6);align-self:stretch}
.svc-duo__media img{display:block;width:100%;height:100%;min-height:340px;
  object-fit:cover;object-position:center}
.svc-duo--rev .svc-duo__copy{order:2}
/* centered content column: balances whitespace for single-column blocks
   (capability accordion, process timeline) so they are not left-hugging. */
.cmp-center{max-width:960px;margin-inline:auto}
/* lists placed inside a duo column run as a single column at full column width */
.svc-duo .trustlist,.svc-duo .checklist{grid-template-columns:1fr;max-width:none}
.svc-duo .cmp-intro{max-width:none;margin-bottom:20px}
@media(max-width:820px){
  .svc-duo{grid-template-columns:1fr;gap:24px}
  .svc-duo__copy,.svc-duo--rev .svc-duo__copy{order:2}
  .svc-duo__media{order:1}
  .svc-duo__media img{min-height:0;aspect-ratio:16/10}
}

/* Checklist: CSS columns instead of a fixed-row grid so items pack tightly with
   even vertical rhythm and no ragged rows or dead gaps. Higher specificity than
   the page-level .checklist grid rule so it wins regardless of load order. */
ul.checklist{display:block;column-count:3;column-gap:34px;grid-template-columns:none;max-width:none}
ul.checklist li{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 12px}
@media(max-width:820px){ul.checklist{column-count:2}}
@media(max-width:560px){ul.checklist{column-count:1}}