/* ==========================================================================
   Arc — the journey layer
   Shared chrome (nav active state, footer columns), the six-stage progress
   strip, and the delivery fork. Palette and type come from css/arc.css; this
   file adds no new colours.
   ========================================================================== */

/* ---------------------------------------------------------------- anchor offset
   The header is `position: sticky`, so an in-page jump to #start or #how used
   to land with the section heading tucked underneath it. Every anchor target
   reserves the header's height plus a little air. Journey pages also carry the
   progress strip, which needs its own allowance on top. */

.sec[id], section[id], [id].jump-target { scroll-margin-top: 76px; }
body:has(.jstrip-wrap) .sec[id],
body:has(.jstrip-wrap) section[id] { scroll-margin-top: 122px; }

/* ---------------------------------------------------------------- nav state */

.navlinks a.is-current,
.mobilenav a.is-current { color: var(--ink); border-bottom-color: var(--ink); }

.mobilenav-cta {
  background: var(--forest);
  color: var(--paper) !important;
  font-weight: 500;
}
.mobilenav a.mobilenav-cta:hover { background: var(--forest-hi); }

/* ---------------------------------------------------------------- footer */

.ftr-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 54px);
  padding-bottom: clamp(30px, 4vw, 54px);
  margin-bottom: clamp(26px, 3vw, 40px);
  border-bottom: var(--hair) solid var(--rule-2);
}
.ftr-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ftr-h {
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--t-xs);
  margin-bottom: 3px;
}
.ftr-col a { font-size: var(--t-sm); color: var(--ink-70); border-bottom-color: transparent; }
.ftr-col a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ftr-plain { font-size: var(--t-sm); color: var(--ink-70); }

@media (max-width: 860px) {
  .ftr-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .ftr-nav { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------------------------------------------------------------- progress strip
   Sticks under the header on every journey page, on all three properties.
   This is the single element that makes three subdomains read as one site, so
   it has to survive 360px without wrapping into a mess: below 720px the step
   labels drop away and the numbers carry the meaning. */

.jstrip-wrap {
  position: sticky;
  /* sits directly beneath the sticky header rather than under it — the header
     is 62px of min-height plus its hairline border */
  top: 63px;
  z-index: 40;
  background: var(--paper-2);
  border-bottom: var(--hair) solid var(--rule);
}
.jstrip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.jstrip-list::-webkit-scrollbar { display: none; }

.jstep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 11px 0;
  margin-right: 16px;
  white-space: nowrap;
  color: var(--ink-70);
  font-size: var(--t-sm);
  border-bottom: var(--member) solid transparent;
  position: relative;
  flex: 0 0 auto;
}
/* hairline separator drawn as a pseudo-element so it never inherits the
   active underline colour */
.jstep::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: var(--hair);
  background: var(--rule);
}
.jstep:last-child { margin-right: 0; }
.jstep:last-child::after { display: none; }

.jstep-n {
  font-size: var(--t-xs);
  color: var(--ink-50);
  letter-spacing: 0.04em;
}
.jstep-l { letter-spacing: -0.01em; }
.jstep-opt {
  font-size: var(--t-xs);
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jstep.is-done { color: var(--forest); }
.jstep.is-done .jstep-n { color: var(--forest); }
.jstep.is-active {
  color: var(--ink);
  border-bottom-color: var(--forest);
  font-weight: 500;
}
.jstep.is-active .jstep-n { color: var(--ink); }
.jstep.is-ahead { color: var(--ink-50); }
.jstep.is-ahead .jstep-n { color: var(--rule); }

@media (max-width: 720px) {
  .jstep-l, .jstep-opt { display: none; }
  .jstep.is-active .jstep-l { display: inline; }
  .jstep { padding: 10px 12px 10px 0; margin-right: 12px; gap: 6px; }
}

/* ---------------------------------------------------------------- the fork
   Stage 2. Two cards, deliberately equal weight — the whole point is that
   neither is the upsell. */

.fork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 860px) { .fork { grid-template-columns: 1fr; } }

.forkcard {
  display: flex;
  flex-direction: column;
  border: var(--hair) solid var(--rule);
  background: var(--paper-2);
  padding: clamp(22px, 2.6vw, 38px);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.forkcard:hover {
  border-color: var(--ink);
  background: var(--paper);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .forkcard { transition: none; }
  .forkcard:hover { transform: none; }
}

.forkcard .fk-kicker {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-50);
}
.forkcard h3 {
  font-size: var(--t-xl);
  margin: 14px 0 12px;
  max-width: 22ch;
}
.forkcard .fk-lede { color: var(--ink-70); font-size: var(--t-base); }
.forkcard ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: var(--hair) solid var(--rule-2);
  padding-top: 18px;
}
.forkcard li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 10px;
  font-size: var(--t-sm);
  color: var(--ink-70);
  line-height: 1.5;
}
.forkcard li::before {
  content: "";
  width: 7px;
  height: 7px;
  border: var(--hair) solid var(--ink-50);
  margin-top: 6px;
}
.forkcard .fk-who {
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--hair) solid var(--rule-2);
  font-size: var(--t-sm);
  color: var(--ink);
}
.forkcard .fk-who strong { font-weight: 500; }
.forkcard .fk-go {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--forest);
}
.forkcard:hover .fk-go { gap: 14px; }
/* .arw carries no intrinsic size — every consumer in css/arc.css sizes it
   itself. Without this the fork arrows rendered at their container width. */
.forkcard .fk-go .arw { width: 15px; height: 9px; flex: 0 0 auto; }
.optnote .arw { width: 15px; height: 9px; flex: 0 0 auto; }

/* pushes the CTA to the card floor so both cards align regardless of copy
   length — unequal bullet counts otherwise leave one arrow floating */
.forkcard .fk-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------- how it works
   The six stages in plain language. Three columns on desktop reading left to
   right in two rows, so the whole process is visible without scrolling. */

.howsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px) clamp(22px, 3vw, 52px);
  counter-reset: none;
}
@media (max-width: 980px) { .howsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .howsteps { grid-template-columns: 1fr; gap: 24px; } }

.howsteps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding-top: 18px;
  border-top: var(--member) solid var(--ink);
}
.howsteps li.is-optional { border-top-style: dashed; border-top-width: var(--hair); border-top-color: var(--rule); }

.hs-n { font-size: var(--t-sm); color: var(--ink-50); letter-spacing: 0.04em; padding-top: 2px; }
.howsteps h3 {
  font-size: var(--t-lg);
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hs-opt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-50);
  font-weight: 400;
  letter-spacing: 0.1em;
}
.howsteps p { font-size: var(--t-sm); color: var(--ink-70); line-height: 1.6; }
.howsteps a { color: var(--forest); text-decoration: none; border-bottom: var(--hair) solid var(--rule); }
.howsteps a:hover { border-bottom-color: var(--forest); }

/* ---------------------------------------------------------------- optional-step
   The skip affordance. Elements must read as genuinely optional or it becomes
   a wall in front of the enquiry. */

.optnote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 20px;
  border: var(--hair) dashed var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-70);
}
.optnote strong { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- systems table
   Three rows explaining the four arms. Built as a grid rather than a <table>
   so it can collapse to stacked cards on a phone without the usual
   table-reflow contortions. */

.systable { border-top: var(--member) solid var(--ink); }

.syst-head,
.syst-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: clamp(18px, 2.4vw, 44px);
}
.syst-head {
  padding: 12px 0;
  border-bottom: var(--hair) solid var(--rule);
}
.syst-head span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-50);
}
.syst-row {
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-bottom: var(--hair) solid var(--rule-2);
}
.syst-row.is-decision { background: var(--paper-2); }

.syst-c1 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.syst-n { font-size: var(--t-xs); color: var(--ink-50); letter-spacing: 0.04em; }
.syst-row h3 { font-size: var(--t-lg); margin: 0; }
.syst-row h3 a { text-decoration: none; border-bottom: var(--hair) solid var(--rule); }
.syst-row h3 a:hover { border-bottom-color: var(--ink); }
.syst-row p { font-size: var(--t-sm); color: var(--ink-70); line-height: 1.6; }
.syst-row p strong { color: var(--ink); font-weight: 500; }
.syst-c2 a { color: var(--forest); text-decoration: none; border-bottom: var(--hair) solid var(--rule); }
.syst-c2 a:hover { border-bottom-color: var(--forest); }

.syst-tag {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-50);
  border: var(--hair) solid var(--rule);
  padding: 3px 8px;
}
.syst-tag.is-req { color: var(--paper); background: var(--forest); border-color: var(--forest); }

/* is-decision has a paper-2 fill, which a full-bleed row would clip at the
   wrap edges — pad it in instead of bleeding out */
.syst-row.is-decision { padding-inline: clamp(14px, 1.6vw, 22px); }

@media (max-width: 880px) {
  .syst-head { display: none; }
  .syst-row { grid-template-columns: 1fr; gap: 12px; }
  .syst-row.is-decision { padding-inline: clamp(14px, 3vw, 20px); }
}

/* ---------------------------------------------------------------- carried state
   Shown when a visitor arrives at a stage with earlier choices in tow, so the
   journey visibly remembers them. */

.carried {
  border: var(--hair) solid var(--rule);
  background: var(--paper-2);
  padding: clamp(18px, 2vw, 26px);
}
.carried-h {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-50);
  margin-bottom: 14px;
}
.carried-list { display: flex; flex-direction: column; gap: 0; }
.carried-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: var(--hair) solid var(--rule-2);
  font-size: var(--t-sm);
}
.carried-row:first-child { border-top: none; }
.carried-row dt { color: var(--ink-50); margin: 0; }
.carried-row dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  .carried-row { grid-template-columns: 1fr; gap: 3px; }
}
.carried-note {
  margin: 14px 0 0;
  font-size: var(--t-sm);
  color: var(--ink-50);
}
.carried-note a { color: var(--forest); }

/* ---------------------------------------------------------------- site questions
   enquiry.html. Reuses the .sp-opt option styling from css/site-pathways.css,
   but presents all four questions at once and gates none of them. */

.sq { padding: clamp(28px, 3.4vw, 46px) 0; border-top: var(--hair) solid var(--rule); }
.sq:first-of-type { border-top: var(--member) solid var(--ink); }
.sq-head { margin-bottom: clamp(16px, 2vw, 22px); }
.sq-n {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-50);
  margin-bottom: 8px;
}
.sq-head h3 { font-size: var(--t-xl); margin: 0; max-width: 22ch; }
.sq-sub {
  margin: 10px 0 0;
  font-size: var(--t-sm);
  color: var(--ink-70);
  max-width: 62ch;
  line-height: 1.6;
}
.sq-sub-label {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-50);
  margin: 22px 0 10px;
}
.sq-clear { margin: clamp(24px, 3vw, 34px) 0 0; }

/* ---------------------------------------------------------------- pack preview
   Sits inside .sec.book, which is ink-on-paper inverted, so this panel has to
   set its own light-on-dark values rather than inherit the paper ones. */

.packsheet {
  border: var(--hair) solid #2b3133;
  background: #1b2022;
  padding: clamp(18px, 2vw, 26px);
}
.packsheet-h {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8f9493;
  margin-bottom: 14px;
}
.packsheet .carried-row { border-top-color: #2b3133; }
.packsheet .carried-row dt { color: #8f9493; }
.packsheet .carried-row dd { color: var(--paper); }
.packsheet-empty {
  margin: 0;
  font-size: var(--t-sm);
  color: #b9bcbb;
  line-height: 1.6;
}

/* A page that opens straight into content instead of a hero doesn't need the
   full --sec-y (168px at desktop) above the first heading — it reads as a
   loading gap rather than composure. */
.sec-open { padding-block-start: clamp(40px, 5vw, 76px); }