/* ==========================================================================
   In-Work Supports — site styles
   PATH Employment Services

   Built from the PATH Brand Style Guide, with two documented corrections:
   PATH Blue #1f80c4 is 4.25:1 on white and fails WCAG AA for normal-size text,
   and white ON PATH Blue is also 4.25:1. So PATH Blue is used only for large
   type, fills, icons and rules; --blue-text and --blue-deep carry everything
   at body size. tools/check_contrast.py enforces this and fails the build on a
   regression.
   ========================================================================== */

/* ---------- font: self-hosted, no third-party request ---------- */
@font-face{
  font-family:"DM Sans";
  src:url("../assets/fonts/dm-sans-variable.woff2") format("woff2");
  font-weight:100 1000;      /* one variable file covers every weight */
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  /* --- brand --- */
  --blue:        #1f80c4;  /* logo blue. Large type >=24px, fills, rules, icons ONLY */
  --blue-text:   #14618f;  /* 6.70:1 on white, 5.94:1 on cream. Links, buttons, small UI */
  --blue-deep:   #0f4c76;  /* 9.07:1 with white. Dark surfaces */
  --ink:         #000000;  /* body text, per the style guide */
  --ink-muted:   #595959;  /* 7.00:1. Meta lines, review dates */
  --cream:       #f4f1ec;  /* Soft Cream */
  --white:       #ffffff;

  /* --- secondary palette: FILLS with black type, never text on white --- */
  --coral:  #de6e5b;   /* the "Need work?" route */
  --orange: #e89b4a;   /* calls to action */
  --mint:   #6bbf8e;
  --teal:   #5db8b3;
  --purple: #a874cf;

  /* --- surfaces --- */
  --bg:          var(--white);
  --bg-alt:      var(--cream);
  --border:      #d9d5cf;
  --border-firm: #767676;   /* 3:1 on white — input borders, 1.4.11 */

  /* --- type --- */
  --font: "DM Sans", Manrope, Avenir, Arial, Helvetica, sans-serif;
  --fs-base: 1.125rem;                                 /* 18px floor for this audience */
  --fs-sm:   1rem;
  --fs-xs:   0.875rem;
  --fs-h4:   1.125rem;
  --fs-h3:   clamp(1.25rem, 0.5vw + 1.1rem, 1.4rem);
  --fs-h2:   clamp(1.5rem,  1vw   + 1.2rem, 1.9rem);
  --fs-h1:   clamp(1.9rem,  2vw   + 1.3rem, 2.6rem);
  --fs-hero: clamp(2.2rem,  3vw   + 1.4rem, 3.2rem);
  --lh-body: 1.6;
  --lh-tight: 1.2;
  --measure: 68ch;      /* 50–75 characters */

  /* --- space (one scale, no magic numbers) --- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  /* --- layout --- */
  --maxw: 1140px;
  --maxw-prose: 44rem;
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10);
  --shadow-md: 0 6px 20px rgba(0,0,0,.13);

  /* --- z-index scale, so nothing is invented inline --- */
  --z-header: 50;
  --z-a11y-btn: 90;
  --z-a11y-panel: 91;
  --z-skip: 200;
}

/* Breakpoints used in this file, named once here for reference:
   --bp-sm 40rem (640px) · --bp-md 48rem (768px) · --bp-lg 64rem (1024px)
   Only these three. Do not add a fourth without a reason.                    */

/* ==========================================================================
   2. Reset and base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  text-align:left;          /* never justified — 1.4.8 and dyslexia guidance */
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:var(--lh-tight);margin:0 0 var(--s-3)}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700;margin-top:var(--s-7)}
h3{font-size:var(--fs-h3);font-weight:700;margin-top:var(--s-5)}
h4{font-size:var(--fs-h4);font-weight:700}
p,ul,ol,dl{margin:0 0 var(--s-4)}
p,li{max-width:var(--measure)}
ul,ol{padding-left:1.4em}
li+li{margin-top:var(--s-2)}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--border);margin:var(--s-6) 0}
:target{scroll-margin-top:6rem}

/* Links are underlined by default. This is deliberate: it removes the need for
   link colour to hit 3:1 against surrounding body text, and it is what low-
   vision and cognitive-accessibility guidance asks for. */
a{color:var(--blue-text);text-decoration:underline;text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}

/* One focus style everywhere. 3px solid at 3:1 against both states. */
:focus-visible{
  outline:3px solid var(--blue-deep);
  outline-offset:2px;
  border-radius:2px;
}
/* Only suppress the default ring where we replace it — never blanket-remove. */
:focus:not(:focus-visible){outline:none}

/* ==========================================================================
   3. Utilities
   ========================================================================== */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s-4)}
.prose{max-width:var(--maxw-prose)}
.section{padding:var(--s-7) 0}
.section--alt{background:var(--bg-alt)}
.lead{font-size:1.2rem;max-width:60ch}
.muted{color:var(--ink-muted)}
.center{text-align:center}
.stack > * + *{margin-top:var(--s-4)}

/* Visually hidden, but revealed on focus. theHUB's version never becomes
   visible, which makes its skip link undiscoverable — fixed here. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip-link{
  position:absolute;top:0;left:0;z-index:var(--z-skip);
  background:var(--blue-deep);color:var(--white);
  padding:var(--s-3) var(--s-4);
  text-decoration:underline;font-weight:700;
  transform:translateY(-120%);
}
.skip-link:focus{transform:translateY(0)}

/* ==========================================================================
   4. The brand lockup
   The name is SVG text stretched with textLength to exactly the logo width,
   so it aligns at every size. The logo file itself is never modified.
   ========================================================================== */
.lockup{display:inline-block;width:var(--lockup-w,200px);text-decoration:none;flex:0 0 auto}
.lockup img{width:100%}
.lockup svg{display:block;width:100%;height:auto;margin-top:.05em}
.lockup .lockup__name{fill:var(--ink)}
/* On dark surfaces the logo needs a light backing: the primary file is a JPEG
   with no transparency. Replace with the Reversed variant when Canva supplies it. */
.lockup--plaque{background:var(--white);padding:var(--s-3);border-radius:var(--radius)}

/* ==========================================================================
   5. Header and navigation
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--white);border-bottom:2px solid var(--blue);
}
/* The header may be wider than the reading column: it has to carry the logo,
   six links and the Contact action on one line. Body text stays at --maxw so
   line length is unaffected. */
.site-header .container{max-width:1320px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
     padding:var(--s-3) 0}
.nav__toggle{
  display:none;align-items:center;gap:var(--s-2);
  min-height:44px;padding:var(--s-2) var(--s-3);
  font:inherit;font-weight:700;color:var(--blue-text);
  background:var(--white);border:2px solid var(--blue-text);border-radius:var(--radius);
  cursor:pointer;
}
.nav__list{display:flex;flex-wrap:wrap;gap:var(--s-1);list-style:none;margin:0;padding:0}
.nav__list li{margin:0;max-width:none}
.nav__list a{
  display:block;padding:var(--s-2) var(--s-2);
  min-height:44px;line-height:1.7;          /* 44px touch target */
  font-size:1.0625rem;                      /* 17px, the most that still fits one line */
  white-space:nowrap;                       /* never break a label mid-item */
  color:var(--ink);text-decoration:none;border-radius:var(--radius);
  border-bottom:3px solid transparent;
}
.nav__list a:hover{background:var(--cream);text-decoration:underline}
.nav__list a[aria-current="page"]{border-bottom-color:var(--blue);font-weight:700}

/* The Contact us action, kept visually apart from the section links. */
.nav__cta{flex:0 0 auto;padding:var(--s-2) var(--s-4);white-space:nowrap}
.nav__cta[aria-current="page"]{background:var(--blue-deep)}

@media (max-width:68rem){
  .nav{flex-wrap:wrap}
  .nav__cta{order:2;margin-left:auto}
  .nav__list{order:3}
  .nav__toggle{display:inline-flex}
  .nav__list{
    display:none;flex-direction:column;width:100%;
    padding-bottom:var(--s-3);gap:0;
  }
  .nav__list.is-open{display:flex}
  .nav__list a{border-bottom:1px solid var(--border);border-radius:0}
}

/* ---- phones ----------------------------------------------------------
   Below 30rem the header cannot fit the lockup, the Menu button and the
   Contact action on one line: at 320px there are only 288px of usable width
   and those three need about 330px. Forcing them side by side pushed the
   whole page wider than the viewport, which cut off body text on the right -
   a WCAG 1.4.10 Reflow failure, not just an ugly header.

   So the lockup and Menu share row one, and Contact becomes a full-width
   button on row two. It also gives Contact a much bigger tap target, which
   is the right outcome on a phone anyway.                                  */
@media (max-width:30rem){
  .nav{gap:var(--s-2);padding:var(--s-2) 0}
  .lockup{--lockup-w:150px}
  .nav__toggle{margin-left:auto}
  .nav__cta{flex:0 0 100%;order:4;margin:var(--s-2) 0 0;width:100%}
  .nav__list{order:5}
  .hero{padding:var(--s-6) 0}
  .site-header .container,.container{padding:0 var(--s-3)}
}


/* ==========================================================================
   6. Buttons
   Buttons use --blue-text, not PATH Blue: white on PATH Blue is 4.25:1 and
   fails for a normal-size label.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:var(--s-3) var(--s-5);
  font:inherit;font-weight:700;text-decoration:none;text-align:center;
  border:2px solid transparent;border-radius:var(--radius);cursor:pointer;
}
.btn--primary{background:var(--blue-text);color:var(--white)}
.btn--primary:hover{background:var(--blue-deep);text-decoration:underline}
.btn--cta{background:var(--orange);color:var(--ink);border-color:var(--ink)}
.btn--cta:hover{background:#d98b36;text-decoration:underline}
.btn--outline{background:var(--white);color:var(--blue-text);border-color:var(--blue-text)}
.btn--outline:hover{background:var(--cream);text-decoration:underline}

/* ==========================================================================
   7. Cards and the three front doors
   ========================================================================== */
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.card{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s-5);
}
.card h3{margin-top:0}
.card p{max-width:none}
.card__footer{margin-top:auto;padding-top:var(--s-4)}
/* The front door a counsellor points at when someone starts work. */
.card--feature{border:3px solid var(--blue);background:var(--cream)}

/* "Start here" badge. Real text in the markup rather than a CSS pseudo-element,
   so a screen reader announces it and it survives high-contrast mode. Orange
   with black type is 9.2:1 - the secondary palette works as a fill, never as
   text on white. */
.card--start{position:relative;padding-top:var(--s-7)}
.start-badge{
  position:absolute;top:-1rem;left:var(--s-5);
  margin:0;padding:var(--s-2) var(--s-4);
  background:var(--orange);color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;
  font-weight:700;font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.08em;
}
.card--start h2{margin-top:0}
.card__lede{font-size:1.15rem}
@media (max-width:30rem){
  .start-badge{left:var(--s-4);font-size:var(--fs-xs)}
}
/* The whole card is clickable, but the link text stays the accessible name. */
.card--link{position:relative}
.card--link:hover{box-shadow:var(--shadow-md)}
.card--link a::after{content:"";position:absolute;inset:0}

/* Section colour-coding lives on the icon only. The style guide allows exactly
   this ("secondary colors may color-code icon sets per program") while capping
   accents at two per piece — so page furniture stays blue/black/white/cream. */
.card__icon{
  width:3rem;height:3rem;border-radius:var(--radius);
  display:grid;place-items:center;margin-bottom:var(--s-3);
  font-size:1.5rem;color:var(--ink);
}
.i-coral{background:var(--coral)}   .i-orange{background:var(--orange)}
.i-mint{background:var(--mint)}     .i-teal{background:var(--teal)}
.i-purple{background:var(--purple)} .i-blue{background:var(--blue)}
.i-cream{background:var(--cream);border:1px solid var(--border)}

/* ==========================================================================
   8. Hero
   ========================================================================== */
.hero{background:var(--blue-deep);color:var(--white);padding:var(--s-8) 0}
.hero h1{font-size:var(--fs-hero);margin-bottom:var(--s-4)}
.hero p{font-size:1.25rem;max-width:52ch;color:var(--white)}
.hero__lead{font-size:1.5rem;font-weight:700;margin-bottom:var(--s-3)}
.hero__promise{max-width:46ch}

/* Emphasis on the stop/start contrast. Bold AND coloured, never colour alone:
   the plain secondary palette fails contrast on this dark blue (orange is
   3.98:1, mint 4.09:1), so this is a lightened tint of PATH Orange at 5.65:1. */
.hero .mark{
  font-style:normal;font-weight:700;
  color:#f3c48a;
}

/* The phone number, tappable, inside the sentence. */
.hero__call{
  display:inline-flex;align-items:center;gap:.4em;
  white-space:nowrap;font-weight:700;
  color:var(--white);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:2px;
}
.hero__call:hover{background:rgba(255,255,255,.14);border-radius:4px}
.hero__call-icon{width:1em;height:1em;flex:0 0 auto}
.hero a{color:var(--white)}

/* ==========================================================================
   9. The "Need work?" route — the persistent, same-place-every-page block
   ========================================================================== */
.needwork{
  background:var(--coral);color:var(--ink);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:var(--s-6) 0;
}
.needwork h2{margin-top:0}
.needwork a{color:var(--ink)}
.needwork .btn--cta{background:var(--white);border-color:var(--ink)}



/* ==========================================================================
   9b. The persistent "Need work?" rail

   Present on every page. On wide screens it sits in a sticky right-hand
   column; below 64rem it becomes a full-width block at the top of the page,
   where a reader in a hurry sees it first.

   It is a real grid column, NOT a fixed overlay. A fixed panel would cover
   content at 400% zoom and can obscure the focused element (WCAG 2.4.11),
   which is exactly the wrong trade on a site for people with disabilities.
   ========================================================================== */
.with-rail{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
.with-rail__main{min-width:0}   /* never let a wide child stretch the track */
@media (min-width:68rem){
  .with-rail{grid-template-columns:minmax(0,1fr) 17rem;align-items:start}
  .with-rail__main{grid-column:1;grid-row:1}
  /* The WHOLE rail sticks, as one block. Sticking only the first card made it
     a positioned element, which then painted over the contact card beneath it
     as the page scrolled. Capped and scrollable so nothing inside can ever
     become unreachable on a short window. */
  .rail{
    grid-column:2;grid-row:1;
    position:sticky;top:6.5rem;
    max-height:calc(100vh - 8rem);
    overflow-y:auto;
    padding-right:2px;              /* room for the focus ring when it scrolls */
  }
  .rail__inner{position:static}
}
.rail{margin:0}
.rail__inner{
  background:var(--coral);color:var(--ink);
  border:3px solid var(--ink);border-radius:var(--radius);
  padding:var(--s-5);
}
.rail h2{margin:0 0 var(--s-2);font-size:var(--fs-h3)}
.rail p{margin:0 0 var(--s-4);max-width:none;font-size:var(--fs-sm)}
.rail ul{list-style:none;margin:0 0 var(--s-4);padding:0}
.rail li{margin:0 0 var(--s-2);max-width:none}
.rail li a{
  display:block;padding:var(--s-2) var(--s-3);min-height:44px;line-height:1.5;
  background:var(--white);color:var(--ink);border:2px solid var(--ink);
  border-radius:var(--radius);text-decoration:underline;font-weight:700;
}
.rail li a:hover{background:var(--cream)}
.rail .btn{width:100%;background:var(--ink);color:var(--white);border-color:var(--ink)}
.rail .btn:hover{background:#333}

/* the contact card beneath the Need work? block */
.rail__contact{
  background:var(--cream);border:2px solid var(--ink);
  border-radius:var(--radius);padding:var(--s-5);margin-top:var(--s-4);
}
.rail__contact h2{margin:0 0 var(--s-2);font-size:var(--fs-h3)}
.rail__contact p{margin:0 0 var(--s-3);max-width:none;font-size:var(--fs-sm)}
.rail__contact .big{font-size:1.15rem;font-weight:700;display:block;margin-bottom:var(--s-2)}
.rail__contact ul{list-style:none;margin:var(--s-3) 0 0;padding:0}
.rail__contact li{margin:0 0 var(--s-2);max-width:none;font-size:var(--fs-sm)}
/* the email address is longer than the rail is wide */
.rail__contact li a{display:block;overflow-wrap:anywhere;padding:var(--s-2) var(--s-3);
  min-height:44px;background:var(--white);border:2px solid var(--ink);
  border-radius:var(--radius);font-weight:700}
.rail__contact li a:hover{background:var(--cream)}

/* ==========================================================================
   9c. Placeholder banner — AI-drafted articles awaiting the team's version
   ========================================================================== */
.draft-banner{
  background:#fff4d6;border:3px solid #8a5a00;border-radius:var(--radius);
  padding:var(--s-4) var(--s-5);margin:0 0 var(--s-6);
}
.draft-banner h2{margin:0 0 var(--s-2);font-size:var(--fs-h3);color:#6b4600}
.draft-banner p{margin:0;max-width:none}
.draft-badge{
  display:inline-block;background:#8a5a00;color:var(--white);
  padding:.15em .6em;border-radius:4px;font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* ==========================================================================
   9d. Article page furniture
   ========================================================================== */
.article{max-width:var(--maxw-prose)}
.article__meta{color:var(--ink-muted);font-size:var(--fs-sm);margin-bottom:var(--s-5)}
.short-answer{
  background:var(--cream);border-left:6px solid var(--blue);
  padding:var(--s-5);border-radius:var(--radius);margin-bottom:var(--s-6);
}
.short-answer h2{margin-top:0}
.short-answer p{font-size:1.2rem;margin-bottom:0}
.steps li{margin-bottom:var(--s-3)}
.script{
  background:var(--white);border:2px solid var(--blue-text);
  border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin:0 0 var(--s-4);
}
.script figcaption{font-weight:700;margin-bottom:var(--s-2)}
.script blockquote{margin:0;font-size:1.15rem}
.script blockquote p{margin:0;max-width:none}
.script blockquote p::before{content:"“"}
.script blockquote p::after{content:"”"}
.know-this{
  background:var(--cream);border:2px solid var(--ink);
  border-radius:var(--radius);padding:var(--s-5);margin:var(--s-6) 0;
}
.know-this h2{margin-top:0}
.reviewed{color:var(--ink-muted);font-size:var(--fs-sm);margin-top:var(--s-6)}
/* Phone and email big enough to read across a desk, or off a counsellor's screen. */
.big-contact{font-size:1.4rem;font-weight:700;overflow-wrap:anywhere}

/* ==========================================================================
   11b2. "You got a job" — the offer of help, and the check-in expectation
   ========================================================================== */
.offer{
  background:var(--cream);border:3px solid var(--blue);
  border-radius:var(--radius);padding:var(--s-6);margin:0 0 var(--s-6);
}
.offer h2{margin-top:0}
.offer__lead{font-size:1.3rem;font-weight:700;max-width:42ch}
.offer #offer-contact{display:grid;grid-template-columns:8rem 1fr;
                      gap:var(--s-5);align-items:center;margin-top:var(--s-4)}
.offer__photo{width:8rem;height:8rem;border-radius:50%;object-fit:cover;
              border:4px solid var(--blue)}
.offer__body p{margin:0 0 var(--s-2);max-width:none}
@media (max-width:40rem){
  .offer #offer-contact{grid-template-columns:1fr}
  .offer__photo{width:6.5rem;height:6.5rem}
}

/* Setting the expectation before the first call lands. */
.expect{
  background:var(--white);border:2px solid var(--ink);
  border-radius:var(--radius);padding:var(--s-6);margin:var(--s-6) 0;
}
.expect h2{margin-top:0}

.checklist{list-style:none;padding-left:0}
.checklist li{position:relative;padding-left:2rem;margin-bottom:var(--s-3)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:1.1rem;height:1.1rem;border-radius:3px;
  background:var(--mint);border:2px solid var(--ink);
}

/* ==========================================================================
   11b3. "Things we can often help with" tiles, and the milestone list
   ========================================================================== */
.help-tiles{
  list-style:none;padding:0;margin:var(--s-5) 0 var(--s-5);
  display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
}
.help-tile{
  max-width:none;margin:0;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s-5);text-align:center;
}
.help-tile img{width:5.5rem;height:5.5rem;margin:0 auto var(--s-3)}
.help-tile h3{margin:0 0 var(--s-2);font-size:var(--fs-h4)}
.help-tile p{max-width:none;margin:0;font-size:var(--fs-sm)}

/* The first-year milestones. A numbered list rather than a decorative
   timeline, so it still reads in order on a screen reader and in print. */
.milestones{
  list-style:none;padding:0;margin:var(--s-5) 0;
  display:grid;gap:var(--s-3);
}
.milestones li{
  max-width:none;margin:0;
  display:grid;grid-template-columns:7.5rem 1fr;gap:var(--s-4);
  align-items:baseline;
  padding:var(--s-3) var(--s-4);
  background:var(--cream);border-left:6px solid var(--blue);
  border-radius:var(--radius);
}
.milestones__when{font-weight:700;font-size:1.15rem;color:var(--blue-text)}
.milestones__what{color:var(--ink)}
@media (max-width:40rem){
  .milestones li{grid-template-columns:1fr;gap:var(--s-1)}
}

/* Where an article came from. */
.from-issue{color:var(--ink-muted);font-size:var(--fs-sm);margin-bottom:var(--s-5)}

/* A column: prose in the author's voice. Slightly larger type and a little
   more leading than a how-to, because it is read straight through. */
.byline{display:flex;align-items:center;gap:var(--s-4);margin:0 0 var(--s-4)}
.byline__photo{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover;
               border:3px solid var(--blue);flex:0 0 auto}
.byline__text{display:flex;flex-direction:column}
.byline__name{font-weight:700;font-size:1.05rem}
.byline__role{color:var(--blue-text);font-size:var(--fs-sm)}
.byline--sm{gap:var(--s-3);margin:0}
.byline--sm .byline__photo{width:3rem;height:3rem;border-width:2px}
.byline--sm .byline__name{font-size:var(--fs-sm)}
.byline--sm .byline__role{font-size:var(--fs-xs)}
.column__byline{
  font-weight:700;color:var(--blue-text);
  margin:0 0 var(--s-2);
}
.column > p{font-size:1.15rem;line-height:1.7}

/* A standout paragraph inside a column. Larger and set off with a PATH Blue
   rule on cream, rather than the italic the style guide suggests for pull
   quotes: italic is harder to read for dyslexic readers, and the size, colour
   and rule already do the job of making it stand out. */
.column > p.pullquote{
  font-size:1.45rem;line-height:1.5;font-weight:500;
  background:var(--cream);border-left:6px solid var(--blue);
  border-radius:var(--radius);
  padding:var(--s-5) var(--s-6);
  margin:var(--s-6) 0;
  max-width:none;
}
@media (max-width:40rem){
  .column > p.pullquote{font-size:1.25rem;padding:var(--s-4) var(--s-5)}
}

/* Video above the article. Sized by aspect ratio so it never causes layout
   shift while it loads, and it reflows down to a narrow screen. */
.video{margin:0 0 var(--s-6);max-width:none}
.video video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--ink);border-radius:var(--radius);
}
.video figcaption{
  margin-top:var(--s-3);color:var(--ink-muted);font-size:var(--fs-sm);
  max-width:var(--measure);
}
.column > p:first-of-type{font-size:1.25rem}

/* ==========================================================================
   11c. "Who to contact, and what for"
   Photo beside the route, small — the full-size portraits are further down.
   ========================================================================== */
.route{
  display:grid;grid-template-columns:7rem 1fr;gap:var(--s-5);align-items:start;
  background:var(--cream);border-left:6px solid var(--blue);
  border-radius:var(--radius);padding:var(--s-5);margin:0 0 var(--s-5);
}
.route__photo{width:7rem;height:7rem;border-radius:50%;object-fit:cover;
              border:3px solid var(--blue)}
.route__body{min-width:0}
.route__body h3{margin-top:0}
.route__body p{max-width:none}
.route__who{font-weight:700;color:var(--blue-text);margin-bottom:var(--s-2)}
@media (max-width:40rem){
  .route{grid-template-columns:1fr}
  .route__photo{width:6rem;height:6rem}
}
/* Routes with no named owner have no photo, so they get a single column. */
.route:not(:has(.route__photo)){grid-template-columns:1fr}

/* ==========================================================================
   11. Contact block
   ========================================================================== */
.contact-card{
  background:var(--cream);border-left:6px solid var(--blue);
  padding:var(--s-5);border-radius:var(--radius);margin:var(--s-5) 0;
}
.contact-card h3{margin-top:0}
.contact-card dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:0}
.contact-card dt{font-weight:700}
.contact-card dd{margin:0}


/* ==========================================================================
   11b. The team
   Square photos, so the supplied 1:1 portraits are never cropped oddly.
   ========================================================================== */
/* Deliberately large: a counsellor shows this page to a client so they will
   recognise the person who calls them. Small thumbnails defeat the purpose. */
.team-grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
           margin:var(--s-6) 0}
.team-card{background:var(--white);border:1px solid var(--border);
           border-radius:var(--radius);overflow:hidden;padding-bottom:var(--s-5)}
.team-card__photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
                  border-bottom:4px solid var(--blue)}
.team-card__name{font-size:var(--fs-h3);margin:var(--s-4) var(--s-5) 0}
.team-card__role{color:var(--blue-text);font-weight:700;margin:0 var(--s-5) var(--s-3)}
.team-card p{margin-left:var(--s-5);margin-right:var(--s-5);max-width:none}
.team-card__mail{margin-top:var(--s-4)}
/* A compact strip for the home page */
.team-strip{display:flex;flex-wrap:wrap;gap:var(--s-5);margin:var(--s-5) 0}
.team-strip figure{margin:0;width:10rem;text-align:center}
.team-strip img{width:10rem;height:10rem;border-radius:50%;object-fit:cover;
                border:4px solid var(--blue)}
.team-strip figcaption{margin-top:var(--s-2);font-weight:700;font-size:var(--fs-sm)}
.team-strip .role{display:block;font-weight:400;color:var(--ink-muted);font-size:var(--fs-xs)}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer{background:var(--blue-deep);color:var(--white);padding:var(--s-7) 0 var(--s-5)}
.site-footer a{color:var(--white)}
.site-footer h2,.site-footer h3{color:var(--white);margin-top:0}
.footer__grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.footer__list{list-style:none;padding:0;margin:0}
.footer__list li{margin-top:var(--s-2);max-width:none}
.footer__bottom{
  margin-top:var(--s-6);padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.35);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;
  font-size:var(--fs-sm);
}
.footer__bottom p{max-width:none;margin:0}

/* ==========================================================================
   13. Accessibility preference panel (first-party, NOT an overlay)
   Stores preferences in localStorage on the reader's own device. Nothing is
   transmitted. See docs/about/accessibility.
   ========================================================================== */
.a11y-btn{
  position:fixed;left:var(--s-4);bottom:var(--s-4);z-index:var(--z-a11y-btn);
  min-height:44px;min-width:44px;padding:var(--s-2) var(--s-4);
  font:inherit;font-weight:700;
  background:var(--blue-deep);color:var(--white);
  border:2px solid var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow-md);cursor:pointer;
}
.a11y-panel{
  position:fixed;left:var(--s-4);bottom:calc(var(--s-4) + 3.5rem);
  z-index:var(--z-a11y-panel);width:min(22rem,calc(100vw - 2rem));
  background:var(--white);color:var(--ink);
  border:2px solid var(--blue-deep);border-radius:var(--radius);
  padding:var(--s-5);box-shadow:var(--shadow-md);
}
.a11y-panel[hidden]{display:none}
.a11y-panel h2{margin:0 0 var(--s-4);font-size:var(--fs-h3)}
.a11y-group{border:0;padding:0;margin:0 0 var(--s-4)}
.a11y-group legend{font-weight:700;padding:0;margin-bottom:var(--s-2)}
.a11y-opt{
  min-height:44px;padding:var(--s-2) var(--s-3);margin:0 var(--s-2) var(--s-2) 0;
  font:inherit;background:var(--white);color:var(--ink);
  border:2px solid var(--border-firm);border-radius:var(--radius);cursor:pointer;
}
.note-small{color:var(--ink-muted);font-size:var(--fs-sm)}

/* Section status while the team writes the real pages. */
.coming-soon{
  display:inline-block;background:var(--cream);
  border:2px dashed var(--border-firm);border-radius:var(--radius);
  padding:var(--s-4) var(--s-6);margin:0 0 var(--s-4);
  font-size:1.3rem;font-weight:700;
}
.a11y-opt[aria-pressed="true"]{
  background:var(--blue-deep);color:var(--white);border-color:var(--blue-deep);
}

/* Reader preferences, applied on <html> */
html[data-text-size="large"]  {font-size:112.5%}
html[data-text-size="xlarge"] {font-size:131.25%}
html[data-contrast="high"]{
  --ink:#000; --ink-muted:#000; --border:#000; --border-firm:#000;
  --bg-alt:#fff; --cream:#fff; --blue-text:#0b3d5c; --blue-deep:#062a40;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .contact-card{border:2px solid #000}
html[data-underline="on"] a{text-decoration:underline !important}

/* ==========================================================================
   14. Motion
   scroll-behavior is included deliberately: theHUB's reduced-motion block only
   zeroes animation/transition duration, so smooth scrolling still applies to
   readers who asked for less motion.
   ========================================================================== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}
html[data-motion="reduce"]{scroll-behavior:auto}
html[data-motion="reduce"] *{
  animation-duration:.001ms !important;transition-duration:.001ms !important;
}

/* ==========================================================================
   15. Print — every article is its own printable one-pager
   ========================================================================== */
@media print{
  .site-header,.site-footer,.a11y-btn,.a11y-panel,.needwork,.no-print,.nav{display:none !important}
  body{font-size:12pt;color:#000;background:#fff}
  .container{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  /* Show destinations, but not for in-page anchors, which would be noise. */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;word-break:break-all}
  .contact-card{border:1pt solid #000;background:#fff}
  h1,h2,h3{page-break-after:avoid}
  /* Deliberately NOT page-break-inside:avoid on .section — it pushes whole
     sections to new pages and leaves half-empty sheets. */
  .card,.contact-card{page-break-inside:avoid}
  .print-only{display:block !important}
}
.print-only{display:none}

/* ==========================================================================
   16. The holding page
   The public front door while the rest of the site is written. No nav bar:
   there are only two places to go, and a nav full of "Coming soon" sections
   would be a worse experience than none.
   ========================================================================== */
body.holding{background:var(--cream)}
.holding__inner{
  max-width:52rem;margin:0 auto;
  padding:var(--s-8) 0 var(--s-7);
}
.holding__mark{--lockup-w:280px;display:block;margin:0 auto var(--s-7)}
.holding h1{font-size:var(--fs-hero);margin-bottom:var(--s-4)}
.holding .lead{font-size:1.3rem}
.holding__grid{margin:var(--s-6) 0 var(--s-7)}
.holding__grid .card{background:var(--white)}
.holding__grid h2{margin:0 0 var(--s-2);font-size:var(--fs-h3)}
.holding__contact{
  background:var(--white);border:2px solid var(--ink);
  border-radius:var(--radius);padding:var(--s-6);
}
.holding__contact h2{margin-top:0}
.holding__lines{line-height:2.1;margin-bottom:0}
.holding__more{
  margin-top:var(--s-7);padding-top:var(--s-5);
  border-top:1px solid var(--border);
}
.holding__more h2{margin-top:0;font-size:var(--fs-h3);color:var(--ink-muted)}
.holding__more p{color:var(--ink-muted)}
.holding__foot{
  margin-top:var(--s-7);padding-top:var(--s-5);
  border-top:1px solid var(--border);
  font-size:var(--fs-sm);
}
.holding__foot p{margin:0 0 var(--s-2);max-width:none}
@media (max-width:30rem){
  .holding__inner{padding:var(--s-6) 0 var(--s-6)}
  .holding__mark{--lockup-w:210px}
}

/* ==========================================================================
   17. Standalone mode
   Set by window.IWS_MINIMAL on the finished pages while the rest of the site
   is behind the holding page. Hides wayfinding that would lead a reader into
   sections that only say "Coming soon".
   ========================================================================== */
.iws-minimal nav[aria-label="Breadcrumb"],
.iws-minimal .related{display:none}
.iws-minimal .with-rail{grid-template-columns:minmax(0,1fr)}
.site-header--minimal .nav{justify-content:space-between}
.nav__back{
  display:inline-flex;align-items:center;gap:.4em;
  min-height:44px;padding:var(--s-2) var(--s-4);
  font-weight:700;font-size:var(--fs-sm);white-space:nowrap;
  color:var(--blue-text);background:var(--white);
  border:2px solid var(--blue-text);border-radius:var(--radius);
  text-decoration:none;
}
.nav__back:hover{background:var(--cream);text-decoration:underline}
.site-footer--minimal{padding:var(--s-6) 0}
.site-footer--minimal p{max-width:none;margin:0 0 var(--s-2);font-size:var(--fs-sm)}
@media (max-width:30rem){
  .site-header--minimal .nav{flex-wrap:nowrap;gap:var(--s-2)}
  .nav__back{padding:var(--s-2) var(--s-3)}
}