/* ==========================================================================
   Arc project pathway — page styles

   Adapted from the Arc Project Pathway handoff package. Two deliberate
   changes were made during integration:

   1. SCOPED. Every selector is prefixed with `.pw` (the wrapper class on the
      pathway <main>). The handoff styled bare elements — h1, p, summary,
      input, dialog — which would otherwise restyle every other Arc page,
      since all pages share one CSS cache.

   2. RE-TOKENISED. The handoff shipped its own :root palette. It turned out
      to be numerically identical to the site palette already in arc.css
      (paper #f7f5ef, ink #14181a, forest #22332c, tan #b08d57), so the local
      tokens are now aliases onto the site's variables instead of a second
      source of truth. Change a colour in arc.css and this page follows.

   The handoff's own header, footer, theme toggle, mobile menu, enquiry
   dialog and preview form are NOT here: the page uses the shared Arc chrome
   from partials/, and its consultation buttons go to the real contact flow.
   ========================================================================== */

.pw {
  /* Aliases onto the site palette in arc.css — not new colours.
     --paper, --ink and --forest are NOT redeclared: arc.css already defines
     those exact names on :root, so they inherit in. Redeclaring them as
     `--paper: var(--paper)` would be a self-reference, which CSS treats as
     invalid at computed-value time. Only the renamed tokens are mapped. */
  --surface: var(--paper-2);
  --muted: var(--ink-70);
  --line: var(--rule);
  --line-soft: var(--rule-2);
  --focus: var(--tan);

  /* tones this page adds: a warmer fill, and the three decision states */
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --sand: #e9e4d8;
  --green: #36583f;
  --amber: #775518;
  --red: #8b4138;

  --font-body: var(--sans);
  --font-mono: var(--mono);

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + .5vw, 1.4rem);
  --text-xl: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem);
  --text-hero: clamp(2.8rem, 1.5rem + 3.2vw, 4.4rem);

  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  font-size: var(--text-base);
  line-height: 1.65;
}

/* The handoff's reset (base.css) is deliberately not shipped — arc.css
   already resets the document. These are the few resets the page relies on
   that the site's reset does not provide, kept inside the scope. */
.pw *, .pw *::before, .pw *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pw ul, .pw ol { list-style: none; }
.pw button { cursor: pointer; font: inherit; color: inherit; }
.pw a { color: inherit; text-decoration: none; }
.pw img { display: block; max-width: 100%; height: auto; }
.pw h1, .pw h2, .pw h3, .pw h4 { line-height: 1.14; font-weight: 500; text-wrap: balance; }
.pw p { max-width: 72ch; text-wrap: pretty; }
.pw :focus-visible { outline: 2px solid var(--tan); outline-offset: 5px; }

/* Carried over from the handoff's base.css, which is otherwise not shipped:
   the selection tint, and a motion guard. arc.css already handles reduced
   motion for the site's own animations; this covers the transitions this
   page adds, in keeping with the brief's restrained motion. */
.pw ::selection { background: var(--sand); color: var(--ink); }

/* Deep links (#planning and friends) must clear the shared sticky header,
   which measures 63px at desktop and mobile and 74px around the 768px
   breakpoint. The handoff took its global value from base.css and only
   overrode it below 680px, so without this the anchors land underneath the
   header at desktop. Unscoped on purpose: only this page loads this file. */
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  .pw *, .pw *::before, .pw *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Secondary navigation. Not from the handoff: the handoff carried its section
   links in its own page header, which the shared Arc header replaces. The
   links are still useful on a five-stage page, so they sit here instead. */
.pw-subnav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.pw-subnav-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
}
.pw-subnav-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: auto;
}
.pw-subnav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.pw-subnav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 640px) {
  .pw-subnav-in { padding: var(--space-3) var(--space-4); gap: var(--space-2) var(--space-4); }
  .pw-subnav-label { width: 100%; margin-right: 0; }
}

.pw .container { width:min(100% - var(--gutter)*2,1180px);margin-inline:auto }
.pw h2 { font-size:var(--text-xl);letter-spacing:-.045em;font-weight:500 }
.pw h3 { font-size:var(--text-lg);font-weight:500;letter-spacing:-.025em }
.pw p { color:var(--muted) }
.pw .eyebrow { font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:.075em;line-height:1.8;color:var(--muted) }
.pw .button { display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:48px;padding:var(--space-3) var(--space-5);border:1px solid var(--forest);background:var(--forest);color:var(--paper);font-size:var(--text-sm);font-weight:500;line-height:1.5;text-align:left;border-radius:0 }
.pw .button:hover { background:#2e453b;border-color:#2e453b;color:#f7f5ef }
.pw .button:active,.pw .text-link:active { transform:translateY(1px) }
.pw .button span,.pw .text-link>span { font-size:var(--text-lg);font-weight:400 }
.pw .text-link { display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:44px;border:0;border-bottom:1px solid var(--line);background:none;font-size:var(--text-sm);color:var(--muted) }
.pw .text-link:hover { color:var(--ink);border-color:var(--ink) }
.pw .hero { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-16);padding-block:var(--space-20) var(--space-16) }
.pw .hero .eyebrow { margin-bottom:var(--space-6) }
.pw h1 { font-size:var(--text-hero);line-height:1.06;letter-spacing:-.055em;font-weight:500 }
.pw .hero-description { font-size:var(--text-lg);line-height:1.6;margin-top:var(--space-6);max-width:44ch }
.pw .hero-buttons { display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-top:var(--space-8) }
.pw .trust-line { font-size:var(--text-xs);margin-top:var(--space-5) }
.pw .trust-line>span { margin-right:var(--space-2) }
.pw .hero-visual { min-width:0 }
.pw .hero-visual img { width:100%;aspect-ratio:1.37;object-fit:cover;object-position:center;background:var(--surface);border:1px solid var(--line) }
.pw .hero-visual figcaption { font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);line-height:1.8;letter-spacing:.04em;margin-top:var(--space-3) }
.pw .site-check { display:grid;grid-template-columns:230px 1fr;gap:var(--space-12);padding-block:var(--space-8);border-top:1px solid var(--line);border-bottom:1px solid var(--line) }
.pw .site-check-label { padding-top:var(--space-1) }
.pw .check-line { display:block;width:40px;height:2px;background:var(--focus);margin-top:var(--space-4) }
.pw .site-check h2 { font-size:var(--text-lg);letter-spacing:-.02em;margin-bottom:var(--space-3) }
.pw .site-check>div>p { max-width:78ch;font-size:var(--text-sm) }
.pw summary { display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);cursor:pointer;list-style:none }
.pw summary::-webkit-details-marker { display:none }
.pw .plus { width:16px;height:16px;flex-shrink:0;position:relative;color:var(--muted) }
.pw .plus::before,.pw .plus::after { content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:currentColor }
.pw .plus::after { transform:rotate(90deg);transition:transform .2s }
.pw details[open]>summary .plus::after { transform:rotate(0) }
.pw summary:hover .plus { color:var(--ink) }
.pw .compact-detail { margin-top:var(--space-3) }
.pw .compact-detail>summary { font-size:var(--text-sm);min-height:44px;max-width:290px;color:var(--ink) }
.pw .detail-copy { padding-block:var(--space-4);max-width:75ch }
.pw .detail-copy h3 { margin-bottom:var(--space-4) }
.pw .detail-copy p+p { margin-top:var(--space-4) }
.pw .pathway-section { padding-block:var(--space-16) var(--space-8) }
.pw .section-heading { display:flex;justify-content:space-between;align-items:end;gap:var(--space-8);margin-bottom:var(--space-8) }
.pw .section-heading h2 { margin-top:var(--space-3) }
.pw .section-heading p:not(.eyebrow) { margin-top:var(--space-3);font-size:var(--text-sm) }
.pw .expand-all { flex-shrink:0 }
.pw .stage-stack { border-bottom:1px solid var(--line) }
.pw .stage-dropdown { border-top:1px solid var(--line);scroll-margin-top:var(--space-4) }
.pw .stage-summary { padding:var(--space-6) var(--space-5);min-height:114px;display:grid;grid-template-columns:44px 1fr 170px 16px;gap:var(--space-6);align-items:center }
.pw .stage-summary:hover { background:var(--surface) }
.pw .stage-number { font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted);align-self:center }
.pw .stage-summary-copy { display:block }
.pw .stage-name { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-lg);font-weight:500;line-height:1.35;letter-spacing:-.02em }
.pw .stage-short { display:block;font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-2) }
.pw .stage-preview { font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);line-height:1.7 }
.pw .gateway-label { font-family:var(--font-mono);font-size:var(--text-xs);border:1px solid var(--line);padding:var(--space-1) var(--space-2);letter-spacing:0;font-weight:400;white-space:nowrap }
.pw .planning-stage { background:var(--surface) }
.pw .planning-stage>summary:hover { background:var(--sand) }
.pw .stage-body { padding:0 var(--space-12) var(--space-8) 88px;max-width:1060px }
.pw .stage-body>h3 { margin-bottom:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line-soft) }
.pw .stage-body>p { max-width:75ch }
.pw .stage-details { margin-top:var(--space-5);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft) }
.pw .stage-details>summary { min-height:56px;font-size:var(--text-sm);font-weight:500;padding-block:var(--space-3) }
.pw .list-lines { color:var(--muted);padding-bottom:var(--space-4) }
.pw .list-lines li { position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-5);font-size:var(--text-sm) }
.pw .list-lines li::before { content:"";position:absolute;left:0;top:20px;width:5px;height:1px;background:var(--muted) }
.pw .outcome { display:flex;gap:var(--space-3);align-items:start;font-size:var(--text-sm);margin-top:var(--space-5);color:var(--ink) }
.pw .outcome strong { font-weight:500 }
.pw .outcome>span:first-child { font-size:var(--text-lg);line-height:1.2 }
.pw .decisions { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6) }
.pw .decision { padding-top:var(--space-4);border-top:1px solid var(--line) }
.pw .decision-label { display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.8 }
.pw .decision-label i { width:5px;height:5px;background:currentColor;flex-shrink:0 }
.pw .green { color:var(--green) }
.pw .amber { color:var(--amber) }
.pw .red { color:var(--red) }
.pw .decision h4 { font-size:var(--text-base);margin-block:var(--space-3);font-weight:500 }
.pw .decision p { font-size:var(--text-sm) }
.pw .professional-note { margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line-soft);font-size:var(--text-sm) }
.pw .journey-section { padding-bottom:var(--space-12) }
.pw .journey-disclosure { border:1px solid var(--line) }
.pw .journey-disclosure>summary { padding:var(--space-5) var(--space-6);background:var(--surface);min-height:92px }
.pw .disclosure-title { display:block;font-size:var(--text-lg);font-weight:500;line-height:1.4;margin-top:var(--space-2);letter-spacing:-.025em }
.pw .journey-layout { display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-16);padding:var(--space-8) }
.pw .journey-intro p { margin-top:var(--space-4);font-size:var(--text-sm) }
.pw .journey-intro .text-link { margin-top:var(--space-5) }
.pw .journey-flow>li { position:relative;margin-bottom:var(--space-6) }
.pw .journey-flow>li:not(:last-child)::after { content:"↓";position:absolute;left:17px;bottom:-27px;color:var(--muted) }
.pw .flow-stage { display:flex;align-items:center;gap:var(--space-4);padding-block:var(--space-3) }
.pw .flow-num { display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);flex-shrink:0;font-family:var(--font-mono);font-size:var(--text-xs) }
.pw .flow-stage a { font-size:var(--text-sm);font-weight:500;display:inline-block;min-height:44px;padding-block:var(--space-3) }
.pw .flow-stage a:hover { text-decoration:underline;text-underline-offset:4px }
.pw .flow-stage p { font-size:var(--text-sm) }
.pw .flow-gate { padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);border:1px solid var(--line);line-height:1.8 }
.pw .decision-gate { background:var(--sand) }
.pw .journey-flow>li:last-child { margin-bottom:0 }
.pw .roles { padding-block:var(--space-8) var(--space-12) }
.pw .section-note { font-size:var(--text-sm);color:var(--muted) }
.pw .roles-grid { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) }
.pw .role-dropdown { border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-self:start }
.pw .role-dropdown>summary { padding:var(--space-5) 0;min-height:94px }
.pw .role-dropdown .list-lines { padding-top:var(--space-2);padding-right:var(--space-6) }
.pw .roles-note { font-size:var(--text-xs);margin-top:var(--space-5);max-width:none }
.pw .faq-section { display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-16);padding-block:var(--space-8) var(--space-16) }
.pw .faq-intro h2 { margin-top:var(--space-3) }
.pw .faq-intro>p:not(.eyebrow) { font-size:var(--text-sm);margin-top:var(--space-6) }
.pw .faq-list { border-top:1px solid var(--line) }
.pw .faq-list details { border-bottom:1px solid var(--line) }
.pw .faq-list summary { font-size:var(--text-base);min-height:76px;padding-block:var(--space-5);line-height:1.5 }
.pw .faq-list details>p { font-size:var(--text-sm);padding:0 var(--space-8) var(--space-5) 0 }
.pw .contact-section { padding-block:var(--space-12);background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line) }
.pw .contact-layout { display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-16) }
.pw .contact-layout h2 { font-size:var(--text-xl);margin-top:var(--space-3) }
.pw .contact-layout>div>p:not(.eyebrow) { font-size:var(--text-base) }
.pw .contact-buttons { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-6) }
.pw .contact-layout .contact-note { font-size:var(--text-xs);margin-top:var(--space-4) }
.pw .inline-link { display:inline;color:var(--muted);border-bottom:1px solid var(--line);padding-block:var(--space-1) }
.pw .inline-link:hover { color:var(--ink);border-color:var(--ink) }
.pw input,.pw select { width:100%;display:block;margin-top:var(--space-2);padding:var(--space-3);background:var(--paper);border:1px solid var(--line);border-radius:0;font-size:var(--text-base);min-height:48px;outline-offset:2px }
.pw input::placeholder,.pw textarea::placeholder { color:var(--muted);opacity:1;font-size:var(--text-sm) }
.pw #resource-action { margin-top:var(--space-6) }
@media(max-width:960px) {
.pw .hero { gap:var(--space-8);padding-block:var(--space-12) }
.pw .hero-description { font-size:var(--text-base) }
.pw .hero-visual img { aspect-ratio:1 }
.pw .site-check { grid-template-columns:170px 1fr;gap:var(--space-8) }
.pw .stage-summary { grid-template-columns:32px 1fr 16px;gap:var(--space-5) }
.pw .stage-preview { display:none }
.pw .stage-body { padding-left:var(--space-16);padding-right:var(--space-8) }
.pw .decisions { gap:var(--space-4) }
.pw .journey-layout { gap:var(--space-8) }
.pw .faq-section,.pw .contact-layout { gap:var(--space-8) }
.pw .section-note { display:none }
}
@media(max-width:680px) {
html { scroll-padding-top:94px }
.pw .hero { grid-template-columns:1fr;gap:var(--space-8);padding-top:var(--space-10);padding-bottom:var(--space-8) }
.pw .hero .eyebrow { margin-bottom:var(--space-5);font-size:var(--text-xs);letter-spacing:.025em }
.pw h1 { font-size:clamp(2.65rem,8.8vw,3.9rem) }
.pw h1 br { display:none }
.pw .hero-description { font-size:var(--text-base);margin-top:var(--space-5) }
.pw .hero-buttons { margin-top:var(--space-6);gap:var(--space-3) }
.pw .hero-buttons .button { width:100% }
.pw .hero-visual img { aspect-ratio:1.55 }
.pw .hero-visual figcaption { font-size:var(--text-xs);letter-spacing:0 }
.pw .trust-line { font-size:var(--text-xs);margin-top:var(--space-4) }
.pw .site-check { grid-template-columns:1fr;gap:var(--space-4);padding-block:var(--space-6) }
.pw .site-check-label { display:flex;align-items:center;gap:var(--space-4) }
.pw .check-line { width:24px;margin:0;order:-1 }
.pw .site-check h2 { font-size:var(--text-lg) }
.pw .site-check>div>p { font-size:var(--text-sm) }
.pw .pathway-section { padding-top:var(--space-10);padding-bottom:var(--space-6) }
.pw .section-heading { flex-direction:column;align-items:start;gap:var(--space-4);margin-bottom:var(--space-5) }
.pw .section-heading h2 { margin-top:var(--space-2) }
.pw .stage-summary { padding:var(--space-5) var(--space-3);grid-template-columns:24px 1fr 16px;gap:var(--space-3);min-height:106px }
.pw .stage-name { font-size:var(--text-base);letter-spacing:-.01em;gap:var(--space-2) }
.pw .stage-short { font-size:var(--text-sm);line-height:1.6;margin-top:var(--space-1) }
.pw .gateway-label { font-size:var(--text-xs);padding:0 var(--space-2) }
.pw .stage-number { align-self:start;padding-top:var(--space-1) }
.pw .stage-body { padding:0 var(--space-4) var(--space-6) }
.pw .stage-body>h3 { padding-top:var(--space-5) }
.pw .stage-body>h3 br { display:none }
.pw .decisions { grid-template-columns:1fr;gap:var(--space-5) }
.pw .journey-section { padding-bottom:var(--space-8) }
.pw .journey-disclosure>summary { padding:var(--space-4) }
.pw .disclosure-title { font-size:var(--text-base) }
.pw .journey-layout { grid-template-columns:1fr;padding:var(--space-5);gap:var(--space-6) }
.pw .journey-intro { padding-bottom:var(--space-4);border-bottom:1px solid var(--line-soft) }
.pw .roles { padding-block:var(--space-6) var(--space-8) }
.pw .roles-grid { grid-template-columns:1fr;gap:var(--space-4) }
.pw .role-dropdown>summary { padding-block:var(--space-4) }
.pw .role-dropdown .eyebrow { font-size:var(--text-xs);letter-spacing:0 }
.pw .roles-note { font-size:var(--text-xs) }
.pw .faq-section { grid-template-columns:1fr;gap:var(--space-6);padding-block:var(--space-6) var(--space-10) }
.pw .faq-intro>p:not(.eyebrow) { margin-top:var(--space-4) }
.pw .faq-list summary { font-size:var(--text-sm);min-height:72px }
.pw .contact-section { padding-block:var(--space-8) }
.pw .contact-layout { grid-template-columns:1fr;gap:var(--space-5) }
.pw .contact-buttons { gap:var(--space-4);margin-top:var(--space-5) }
}