/* Section rebuild. Built on the PFMR tokens in styles.css only;
   nothing from site.css or the direction files. Each section is added here once James locks it. */

:root{
  --wrap:1200px;
  --gutter:clamp(16px,4vw,32px);
  --head-h:76px;                           /* the sticky header bar */
  --ink:var(--pfmr-charcoal-500);
  --edge:1.5px solid var(--ink);          /* the border on cards, controls and badges */
  --hard:4px;                              /* hard offset shadow, controls */
  --hard-lg:8px;                           /* hard offset shadow, cards and panels */
  --hard-btn:var(--pfmr-charcoal-500);    /* behind buttons */
  --hard-card:var(--pfmr-mint-500);       /* behind cards and panels */
  --mark:var(--pfmr-mint-300);             /* highlight behind display type */
  --mark-soft:color-mix(in oklch,var(--pfmr-mint-500) 32%,var(--pfmr-cream-500)); /* highlight behind body copy */
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); /* Lucide check */
  --icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); /* Lucide arrow-right */
  --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211F29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); /* Lucide plus, charcoal, used as a background */
  --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211F29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); /* Lucide minus, charcoal, used as a background */
  --icon-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E"); /* Lucide download */
  --icon-merge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M6 21V9a9 9 0 0 0 9 9'/%3E%3C/svg%3E"); /* Lucide git-merge */
  --icon-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); /* Lucide x */
}

.v2-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
.v2 *,.v2 *::before,.v2 *::after,.v2-head *,.v2-head *::before,.v2-head *::after,.foot *,.foot *::before,.foot *::after,.close *,.close *::before,.close *::after{box-sizing:border-box} /* the header, closing band and footer also sit on the offer, contact and agent pages, which are not .v2 yet */

.v2-skip{position:absolute;left:-9999px;top:12px;z-index:11;background:var(--surface-white);color:var(--ink);padding:10px 14px;border:var(--edge);border-radius:var(--radius-sm)}
.v2-skip:focus{left:12px}

/* Text fills its line. The brand base balances headings and the earlier pretty wrapping still broke lines early, leaving space on the
   right (James, 23 and 24 October 2026), so headings, paragraphs and list items wrap normally. The hero H1 sets its own breaks. */
.v2 :is(h2,h3,h4,h5,p,li,dd){text-wrap:wrap}

/* Controls */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-h-lg);padding:0 22px;border:var(--edge);border-radius:var(--radius-sm);font:600 16px/1 var(--font-body);text-decoration:none;white-space:nowrap;
  box-shadow:var(--hard) var(--hard) 0 var(--hard-btn);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.v2-btn--primary{background:var(--accent);color:var(--on-accent)}
.v2-btn--primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.v2-btn:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--hard-btn)}
.v2-btn:active{transform:translate(var(--hard),var(--hard));box-shadow:0 0 0 var(--hard-btn)}
.v2-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring),var(--hard) var(--hard) 0 var(--hard-btn)}
.v2-btn--sm{min-height:var(--control-h-md);padding:0 16px;font-size:15px}

.v2-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:600 16px/1 var(--font-body);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.v2-link:hover{color:var(--accent-text)}
.v2-link svg{flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.v2-link:hover svg{transform:translateY(2px)}
.v2-link:focus-visible,.v2-nav a:focus-visible,.v2-brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:2px}

/* Highlights */
.v2-mark{background:linear-gradient(transparent 0 58%,var(--mark) 58% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.04em;margin-inline:-.04em}
.v2-mark--soft{background:var(--mark-soft);padding:.02em .08em;margin-inline:-.08em;border-radius:var(--radius-xs);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Availability badge */
.v2-status{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 12px;border:var(--edge);border-radius:var(--radius-xs);background:var(--surface-white);font:500 14px/1.2 var(--font-body);color:var(--ink)}
.v2-status__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--pfmr-mint-500);box-shadow:0 0 0 3px color-mix(in oklch,var(--pfmr-mint-500) 28%,transparent)}

/* Header */
.v2-head{position:sticky;top:0;z-index:10;background:var(--surface-page);border-bottom:1px solid var(--border-subtle)} /* stays on screen as you scroll (James, 24 October 2026) */
html:has(.v2-head){scroll-padding-top:calc(var(--head-h) + 1px)} /* in-page links land below the header and its rule */
.v2-head__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--head-h)}
.v2-brand{display:block;line-height:0}
.v2-brand img{height:30px;width:auto}
.v2-nav{display:flex;align-items:center;gap:32px}
.v2-nav a:not(.v2-btn){color:var(--ink);font:500 15px/1 var(--font-body);text-decoration:none;padding-block:8px;
  background:linear-gradient(var(--accent) 0 0) 0 100%/0 2px no-repeat} /* the hover underline is a background, so it can draw in left to right */
.v2-nav a:not(.v2-btn):hover{background-size:100% 2px}
.v2-nav .v2-btn{margin-left:8px}
.v2-toggle{display:none;align-items:center;gap:10px;min-height:40px;padding:0 14px;border:var(--edge);border-radius:var(--radius-sm);background:var(--surface-white);color:var(--ink);font:600 15px/1 var(--font-body);cursor:pointer}
.v2-toggle__bars{position:relative;width:16px;height:2px;background:currentColor}
.v2-toggle__bars::before,.v2-toggle__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.v2-toggle__bars::before{top:-5px}.v2-toggle__bars::after{top:5px}
.v2-toggle[aria-expanded="true"] .v2-toggle__bars{background:transparent} /* open, the three bars cross into an X */
.v2-toggle[aria-expanded="true"] .v2-toggle__bars::before{transform:translateY(5px) rotate(45deg)}
.v2-toggle[aria-expanded="true"] .v2-toggle__bars::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:860px){
  .js .v2-toggle{display:inline-flex}
  .js .v2-nav{display:none}
  .js .v2-nav.is-open{display:flex;position:absolute;z-index:5;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:var(--surface-page);border-bottom:var(--edge)}
  .js .v2-nav.is-open a:not(.v2-btn){padding-block:16px;border-bottom:1px solid var(--border-subtle);font-size:17px;background:none} /* rows run the full width, so the phone menu keeps a plain underline */
  .js .v2-nav.is-open a:not(.v2-btn):hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
  .js .v2-nav.is-open .v2-btn{margin:20px 0 0;min-height:var(--control-h-lg)}
  .no-js .v2-nav{flex-wrap:wrap;gap:16px}
}

/* Hero (locked 23 October 2026, take B): a framed panel with a mint hard shadow, the P crop inside it, and a ruled bar for who it is for and the actions */
.hero{padding-block:clamp(32px,5vw,64px) clamp(56px,8vw,104px)}
.hero__panel{position:relative;isolation:isolate;overflow:hidden;padding:clamp(24px,5vw,64px);background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card)}
.hero__panel::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-30%;right:-9%;height:96%;aspect-ratio:380/505;background:var(--pfmr-navy-500);opacity:.04;
  -webkit-mask:url("/static/assets/logo-monogram-p.png") center/contain no-repeat;mask:url("/static/assets/logo-monogram-p.png") center/contain no-repeat}
.hero__title{margin:28px 0 0;font:700 clamp(40px,6vw,76px)/1.02 var(--font-display);letter-spacing:-0.025em;color:var(--ink)}
.hero__title .v2-mark{background-repeat:no-repeat;background-size:100% 100%;animation:v2-mark-in 750ms cubic-bezier(.6,0,.3,1) 350ms both} /* the marker sweeps in left to right on load, like a highlighter (James, 24 October 2026) */
@keyframes v2-mark-in{from{background-size:0% 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.hero__title .v2-mark{animation:none}}
.hero__lede{margin:28px 0 0;font:400 clamp(19px,1.7vw,22px)/1.5 var(--font-body);color:var(--text-secondary)}
.hero__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--border-default)}
.hero__who{flex:1 1 320px;margin:0;font:400 15px/1.5 var(--font-body);color:var(--text-muted)}
.hero__actions{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
@media (max-width:640px){
  .hero__br{display:none}
  .hero__panel{box-shadow:6px 6px 0 var(--hard-card)}
  .hero__panel::before{display:none} /* on a phone the crop would sit behind the small copy */
  .hero__actions{width:100%}
  .hero__actions .v2-btn{width:100%}
}

/* Section heading and tag */
.v2-h2{margin:0 0 clamp(24px,3vw,36px);font:700 clamp(30px,3.6vw,44px)/1.1 var(--font-display);letter-spacing:-0.02em;color:var(--ink)}
.v2-tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:var(--radius-xs);background:var(--mark-soft);color:var(--ink);font:600 13px/1.2 var(--font-body);white-space:nowrap}

/* Offer cards (locked 23 October 2026, take B, prices off): header strip, story and inclusions, price bar */
.offers__list{display:grid;gap:clamp(32px,4vw,48px)}
.offer{display:flex;flex-direction:column;background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card);overflow:hidden}
.offer__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:20px clamp(20px,3vw,32px);border-bottom:1px solid var(--border-default)}
.offer__num{font:500 14px/1 var(--font-mono);color:var(--pfmr-navy-500)}
.offer__title{flex:1 1 auto;margin:0;font:600 clamp(20px,2vw,24px)/1.25 var(--font-display);letter-spacing:-0.01em;color:var(--ink)}
.offer__body{display:grid;gap:28px;padding:clamp(24px,3vw,36px) clamp(20px,3vw,32px)}
.offer__promise{margin:0;font:500 clamp(20px,1.8vw,23px)/1.35 var(--font-display);letter-spacing:-0.01em;color:var(--ink)}
.offer__for{margin:16px 0 0;font:400 15px/1.5 var(--font-body);color:var(--text-muted)}
.offer__label{margin:0 0 12px;font:600 14px/1.3 var(--font-body);color:var(--ink)}
.offer__list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.offer__list li{position:relative;padding-left:28px;font:400 16px/1.45 var(--font-body);color:var(--text-secondary)}
.offer__list li::before{content:"";position:absolute;left:0;top:.16em;width:18px;height:18px;background:var(--pfmr-navy-500);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.offer__bar{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:auto;padding:20px clamp(20px,3vw,32px);background:var(--surface-raised);border-top:1px solid var(--border-default)}
.offer__price{display:flex;flex-direction:column;gap:6px;margin:0}
.offer__fig{font:700 clamp(26px,2.4vw,32px)/1 var(--font-display);letter-spacing:-0.02em;color:var(--ink)}
.offer__unit{font:400 13px/1.3 var(--font-body);color:var(--text-muted)}
.offer__facts{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0}
.offer__facts dt{font:600 13px/1.3 var(--font-body);color:var(--text-muted)}
.offer__facts dd{margin:2px 0 0;font:500 15px/1.35 var(--font-body);color:var(--ink)}
.offer__bar .v2-btn{margin-left:auto}

/* Two cards side by side on wide screens, rows aligned across both with subgrid (locked take B) */
@media (min-width:861px){
  .v2 .offers__list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:clamp(24px,3vw,40px);row-gap:0}
  .v2 .offer{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .v2 .offer__body{display:contents}
  .v2 .offer__story{padding:clamp(24px,3vw,32px) clamp(20px,3vw,32px) 28px}
  .v2 .offer__incl{padding:24px clamp(20px,3vw,32px) 32px;border-top:1px solid var(--border-subtle)}
  .v2 .offer__head{align-content:start}
  .v2 .offer__head .v2-tag{order:1;margin-left:auto}
  .v2 .offer__title{order:2;flex-basis:100%}
  .v2 .offer__bar{flex-direction:column;align-items:stretch;gap:20px}
  .v2 .offer__bar .v2-btn{margin-left:0}
}

/* Three cards (24 October 2026, James): the business operations and people function reviews side by side, rows aligned by subgrid;
   AI work redesign, which builds on either review, across the full width below, its story and inclusions side by side */
@media (min-width:861px){
  .v2 .offers__list{grid-template-rows:repeat(4,auto) auto}
  .v2 .offer--wide{grid-column:1/-1;grid-row:5;margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"head head" "story incl" "bar bar"}
  .v2 .offer--wide .offer__head{grid-area:head}
  .v2 .offer--wide .offer__story{grid-area:story}
  .v2 .offer--wide .offer__incl{grid-area:incl;border-top:0;border-left:1px solid var(--border-subtle)}
  .v2 .offer--wide .offer__bar{grid-area:bar;flex-direction:row;align-items:center}
  .v2 .offer--wide .offer__bar .v2-btn{margin-left:auto}
}

@media (max-width:860px){
  .offer{box-shadow:6px 6px 0 var(--hard-card)}
  .offer__bar{flex-direction:column;align-items:stretch;gap:20px}
  .offer__bar .v2-btn{margin-left:0;width:100%}
}

/* How we work (locked 23 October 2026, take E on mint): the lower compartment of the hero card. The hero panel loses its
   bottom padding and corners, and this panel carries on below it in mint, so the two read as one card with one shadow. */
.hero{padding-bottom:0}
.hero__panel{border-radius:var(--radius-md) var(--radius-md) 0 0}
.how{margin-bottom:0} /* the next section's own padding sets the gap */
.how__panel{position:relative;background:var(--pfmr-mint-500);color:var(--ink);border:var(--edge);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card)}
.how__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:clamp(24px,4vw,40px) clamp(24px,5vw,64px) 0}
.how__title{margin:0;font:700 clamp(22px,2.2vw,28px)/1.15 var(--font-display);letter-spacing:-0.02em;color:var(--ink)}
.how .v2-mark--soft,.how .v2-tag{background:var(--surface-white);color:var(--ink)}
.how__body{display:grid;gap:28px;padding:20px clamp(24px,5vw,64px) clamp(32px,4vw,56px)}
.how__story p{margin:0;font:400 clamp(17px,1.5vw,19px)/1.6 var(--font-body);color:var(--ink)}
.how__story p+p{margin-top:16px}
.how__get{padding-top:20px;border-top:1.5px solid var(--ink)}
.how__label{margin:0 0 14px;font:600 14px/1.3 var(--font-body)}
.how__list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.how__list li{position:relative;padding-left:24px;font:400 16px/1.45 var(--font-body);color:var(--ink)}
.how__list li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;background:var(--ink);border-radius:1px}
@media (min-width:861px){
  .how__body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0}
  .how__story{padding-right:clamp(24px,4vw,56px)}
  .how__get{padding:0 0 0 clamp(24px,4vw,48px);border-top:0;border-left:1.5px solid var(--ink)}
}
@media (max-width:640px){.how__panel{box-shadow:6px 6px 0 var(--hard-card)}}

/* Where the work stalls (locked 23 October 2026, take C): six scene cards, three across, each tagged with the engagement that deals with it */
.stalls__intro{margin-bottom:clamp(28px,3vw,40px)}
.stalls__intro .v2-h2{margin-bottom:16px}
.stalls__lede{margin:0;font:400 clamp(17px,1.5vw,19px)/1.55 var(--font-body);color:var(--text-secondary)}
.v2-inline-cta{color:var(--ink);text-decoration:underline dotted var(--pfmr-rust-500);text-decoration-thickness:2px;text-underline-offset:3px} /* a link in running text that starts a conversation: rust, as every action on the site is */
.v2-inline-cta:hover{color:var(--pfmr-rust-500)}
.v2-inline-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
.stalls__list{display:grid;gap:clamp(16px,2vw,24px);margin:0;padding:0;list-style:none}
.stall{position:relative;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--surface-white);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} /* the brand hairline at rest; the charcoal edge only comes with a hard shadow */
.stall__icon{transition:transform var(--dur-base) var(--ease-out)}
.stall .stall__tag::before{content:"";position:absolute;inset:0;border-radius:var(--radius-md)} /* the whole stall card opens its tag's link; scoped so other tags stay their own size */
@media (hover:hover){
  .stall:hover{transform:translate(-3px,-3px);border-color:var(--ink);box-shadow:6px 6px 0 var(--hard-card)}
  .stall:hover .stall__icon{transform:translate(-3px,-3px)} /* the icon moves a little further than the card: a light parallax */
}
.stall:focus-within{border-color:var(--ink);box-shadow:6px 6px 0 var(--hard-card)}
/* Other work we take on (locked take B): three groups in columns, line icons, a short line under each name */
.wider__groups{display:grid;gap:32px}
.wider__title{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border-default);font:600 clamp(17px,1.6vw,19px)/1.3 var(--font-display);color:var(--ink)}
.wider__list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.wi{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.wi--plain{grid-template-columns:minmax(0,1fr)}
.wi__icon{color:var(--pfmr-navy-500);line-height:0}
.wi__icon svg{width:24px;height:24px}
.wi__name{display:block;font:600 15px/1.3 var(--font-body);color:var(--ink)}
.wi__line{display:block;margin-top:3px;font:400 14px/1.45 var(--font-body);color:var(--text-secondary)}
.wider .wider__more{margin-top:16px} /* beats the margin-top:auto on .stall__tag */
@media (min-width:861px){.wider__groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}}
@media (prefers-reduced-motion:reduce){.stall:hover,.stall:hover .stall__icon{transform:none}}
.stall__title{margin:0;font:600 clamp(18px,1.6vw,21px)/1.3 var(--font-display);letter-spacing:-0.01em;color:var(--ink)}
.stall__desc{margin:6px 0 0;font:400 16px/1.5 var(--font-body);color:var(--text-secondary)}
.stall__tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;padding:5px 9px;border-radius:var(--radius-xs);background:var(--mark-soft);color:var(--ink);font:600 13px/1.2 var(--font-body);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out)}
.stall__tag::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon-arrow) center/contain no-repeat;mask:var(--icon-arrow) center/contain no-repeat}
.stall__tag:hover{background:var(--pfmr-mint-300);color:var(--ink)}
.stall__tag:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* Icon tile, locked as style A: a mint square, charcoal edge, charcoal icon and charcoal hard shadow */
.stall__icon{display:inline-grid;place-items:center;flex:none;width:56px;height:56px;background:var(--pfmr-mint-500);border:var(--edge);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.stall__icon svg{width:28px;height:28px}
@media (min-width:641px){.stalls__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1001px){.stalls__list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Visually hidden, for chart data tables */
.v2-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Worked examples (locked, take B): text beside a chart card, each built from an offer's own method and labelled illustrative */
.examples__intro{margin-bottom:clamp(32px,4vw,48px)}
.examples__intro .v2-h2{margin-bottom:16px}
.examples__lede{margin:0;font:400 clamp(17px,1.5vw,19px)/1.55 var(--font-body);color:var(--text-secondary)}
.examples__list{display:grid;gap:clamp(56px,7vw,96px)}
.example{display:grid;gap:28px;align-items:center}
.example[hidden]{display:none}
.example__label{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.example__num{font:500 14px/1 var(--font-mono);color:var(--pfmr-navy-500)}
.example__title{margin:0;font:700 clamp(24px,2.6vw,34px)/1.15 var(--font-display);letter-spacing:-0.02em;color:var(--ink)}
.example__body{margin:14px 0 20px;font:400 clamp(17px,1.5vw,19px)/1.6 var(--font-body);color:var(--text-secondary)}
@media (min-width:861px){.example{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,72px)}}

/* Chart card: the point of each chart in rust, context in navy-300 (navy-500 is too dark to read as a data colour) */
.chart{--chart-ctx:var(--pfmr-navy-300);--chart-point:var(--pfmr-mint-500);margin:0;background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card);overflow:hidden}
.chart__head{padding:14px 20px;border-bottom:1px solid var(--border-default);font:600 14px/1.3 var(--font-body);color:var(--ink)}
.chart__body{position:relative;padding:20px}
.chart__note{margin:0;padding:12px 20px;border-top:1px solid var(--border-subtle);background:var(--surface-raised);font:400 13px/1.45 var(--font-body);color:var(--text-muted)}
.chart__svg{display:block;width:100%;height:auto}
@media (max-width:640px){.chart__body:has(.chart__svg){overflow-x:auto}.chart__svg{min-width:500px}} /* keeps chart labels at full size on a phone; the card scrolls sideways */
.c-grid{stroke:var(--border-subtle);stroke-width:1}
.c-divider{stroke:var(--border-default);stroke-width:1;stroke-dasharray:3 4}
.c-dot{fill:var(--chart-ctx);stroke:var(--surface-white);stroke-width:2}
.c-dot--point{fill:var(--chart-point);stroke:var(--ink);stroke-width:1.5} /* teal is light on white, so it carries a charcoal edge */
.chart text{font-family:var(--font-body)}
.c-axis{font-size:12px;fill:var(--text-muted)}
.c-label{font-size:12px;font-weight:600;fill:var(--ink)}
.c-label--point{fill:var(--accent-text)}

/* Platform register (worked example 03, in review): platforms as rows. Each bar is the seats paid for, drawn to scale against the
   largest licence, filled teal to the seats in use, so unused seats show as empty dashed space. The call is a labelled tag with an
   icon, never colour alone: actions (consolidate, retire, add) on the soft highlight, keep left quiet. */
.reg{display:grid}
.reg__head,.reg__row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.3fr) minmax(0,1fr);align-items:center;column-gap:16px;row-gap:6px}
.reg__head{padding-bottom:8px;border-bottom:1px solid var(--border-default);font:500 11px/1.2 var(--font-mono);color:var(--text-muted)}
.reg__row{padding-block:11px;border-bottom:1px solid var(--border-subtle)}
.reg__row--gap{margin-top:8px;border:1.5px dashed var(--text-muted);border-radius:var(--radius-sm);padding-inline:10px}
.reg__name{font:600 14px/1.3 var(--font-body);color:var(--ink)}
.reg__name small,.reg__call small{display:block;margin-top:3px;font:400 12px/1.35 var(--font-body);color:var(--text-muted)}
.reg__seats{display:flex;align-items:center;gap:10px}
.reg__bar{position:relative;flex:none;width:calc(var(--paid) / 120 * 55%);min-width:8px;height:16px;border:1.5px dashed var(--text-muted);border-radius:var(--radius-xs)}
.reg__bar i{position:absolute;inset:-1.5px auto -1.5px -1.5px;width:calc(var(--used) / var(--paid) * 100% + 3px);background:var(--pfmr-mint-500);border:1px solid var(--ink);border-radius:var(--radius-xs)}
.reg__bar[style$="--used:0"] i{display:none}
.reg__num{font:500 12px/1.2 var(--font-mono);color:var(--text-muted);white-space:nowrap}
.call{display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 5px;border-radius:var(--radius-xs);font:600 13px/1.3 var(--font-body);color:var(--ink)}
.call::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--call-icon) center/contain no-repeat;mask:var(--call-icon) center/contain no-repeat}
.reg__row[data-call="keep"] .call{--call-icon:var(--icon-check);color:var(--text-secondary)}
.reg__row[data-call="consolidate"] .call{--call-icon:var(--icon-merge);background:var(--mark-soft)}
.reg__row[data-call="retire"] .call{--call-icon:var(--icon-x);background:var(--mark-soft)}
.reg__row[data-call="add"] .call{--call-icon:var(--icon-plus);background:var(--mark-soft)}
@media (max-width:600px){
  .reg__head{display:none}
  .reg__head,.reg__row{grid-template-columns:minmax(0,1fr) auto}
  .reg__name{grid-column:1/-1}
}

/* AI ladder heat map (worked example 01): areas as rows, the practice AI ladder as four columns, a bar to the furthest step; quick wins in rust */
.ladder{display:grid;gap:4px}
.ladder__head,.ladder__row{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;column-gap:20px;row-gap:8px}
.ladder__head>span:first-child{display:none}
.ladder__area{grid-column:1/-1}
.ladder__head{padding-bottom:8px;border-bottom:1px solid var(--border-default);font:500 11px/1.2 var(--font-mono);color:var(--text-muted)}
.ladder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 4px;align-items:end}
.ladder__steps b{grid-column:1/-1;font:600 12px/1.2 var(--font-body);color:var(--ink)}
.ladder__steps span{text-align:center;font:500 11px/1.2 var(--font-mono);color:var(--text-muted)}
.ladder__row{padding-block:12px;border-bottom:1px solid var(--border-subtle)}
.ladder__area{font:600 14px/1.3 var(--font-body);color:var(--ink)}
.ladder__area small{display:block;margin-top:3px;font:400 12px/1.35 var(--font-body);color:var(--text-muted)}
.ladder__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ladder__track i{height:18px;border:1px solid var(--border-default);border-radius:var(--radius-xs);background:transparent}
.ladder__row[data-step="2"] .ladder__track i:nth-child(-n+2),.ladder__row[data-step="3"] .ladder__track i:nth-child(-n+3),.ladder__row[data-step="4"] .ladder__track i{background:linear-gradient(var(--pfmr-mint-500) 0 0) 0 0/100% 100% no-repeat;border-color:var(--ink)} /* a gradient, not a flat colour, so the fill can sweep in (see Motion) */ /* fuller is more teal; rust read as bad (James, 23 October 2026) */
.ladder__row[data-step="1"] .ladder__track i:first-child{border:1.5px dashed var(--text-muted)} /* stays human: only the first step, outlined */
.ladder__verdict{font:400 13px/1.3 var(--font-body);color:var(--text-secondary)}
.ladder__row.is-point .verdict{display:inline-block;padding:2px 7px;border-radius:var(--radius-xs);background:var(--mark-soft);font-weight:600;color:var(--ink)}
@media (max-width:640px){
  .ladder__head,.ladder__row{grid-template-columns:minmax(0,1fr)}
  .ladder__head>span:last-child{display:none}
}

/* Example views (24 October 2026, James): the heat map, scorecard and opportunity map each show a business operations version
   (the default) and a people function version, switched in the chart's head. Without JavaScript both show, stacked. */
.chart__head--views{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.views{display:inline-flex;padding:2px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-raised)}
.views[hidden]{display:none}
.views button{min-height:34px;padding:0 10px;white-space:nowrap;border:0;border-radius:var(--radius-xs);background:transparent;font:600 13px/1.2 var(--font-body);color:var(--text-secondary);cursor:pointer}
.views button[aria-pressed="true"]{background:var(--ink);color:var(--pfmr-cream-500)}
.views button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
[data-view-panel][hidden]{display:none}
[data-opmap]{position:relative}
.example__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0}

/* Ladder rollovers inside the charts: the definition opens under the heat map's head row or the roadmap row, across the chart's
   width; on the roadmap's last row it opens upwards so the chart's edge never cuts it off */
.ladder__head,.road__row,.score__head{position:relative}
.score__head .v2-term{white-space:normal}
.ladder__steps .v2-term{white-space:normal} /* the four labels share narrow columns, so they may break at the hyphen */
.chart .v2-term__tip{left:0;right:0;text-align:left;font:400 13px/1.45 var(--font-body);color:var(--text-secondary)}
.chart .v2-term__tip b{font:600 13px/1.45 var(--font-body);color:var(--ink)}
.road__row:last-child .v2-term__tip{top:auto;bottom:calc(100% + 8px)}
.road__row:last-child .v2-term__tip::before{bottom:auto;top:100%}
:is(.ladder__head,.road__row,.score__head):has(.v2-term:hover) .v2-term:not(:hover) .v2-term__tip{visibility:hidden;opacity:0;transition:none}

/* Scorecard (worked example 01, James, 24 October 2026): areas as rows, the four pillars as three-square ratings, then the overall
   rating that becomes the heat map's readiness */
.score{display:grid}
.score__head,.score__row{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));align-items:center;column-gap:10px;row-gap:8px}
.score__head>span:first-child{display:none}
.score__area{grid-column:1/-1} /* the area sits above its ratings, as in the heat map */
.score__head{padding-bottom:8px;border-bottom:1px solid var(--border-default);font:500 11px/1.2 var(--font-mono);color:var(--text-muted)}
.score__head>span:not(:first-child){text-align:center}
.score__row{padding-block:11px;border-bottom:1px solid var(--border-subtle)}
.score__area{font:600 14px/1.3 var(--font-body);color:var(--ink)}
.score__area small{display:block;margin-top:3px;font:400 12px/1.35 var(--font-body);color:var(--text-muted)}
.score__cell{display:flex;justify-content:center}
.score__cell .ready i:last-of-type{margin-right:0}
.score__all{display:flex;justify-content:center}
.score__all .ready{flex-wrap:wrap;justify-content:center;width:100%;gap:3px;color:var(--ink)} /* the label sits under its boxes */
.score__all .ready i:last-of-type{margin-right:0}
.score__all .ready__label{flex-basis:100%;margin-top:3px;text-align:center}
.score{container-type:inline-size}
@container (max-width:520px){ /* in a narrow chart each rating carries its own pillar label, two to a line */
  .score__head{display:none}
  .score__row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .score__area{grid-column:1/-1}
  .score__cell,.score__all{justify-content:space-between;align-items:center}
  .score__cell::before,.score__all::before{content:attr(data-pillar);font:500 11px/1.2 var(--font-mono);color:var(--text-muted)}
  .score__all{grid-column:1/-1;padding-top:6px;border-top:1px dashed var(--border-subtle)}
  .score__all .ready{flex-wrap:nowrap;justify-content:flex-end;width:auto}
  .score__all .ready__label{flex-basis:auto;margin:0 0 0 2px}
}

/* Roadmap (worked example 05, James, 24 October 2026): one workflow a quarter, with the furthest AI step and what it could deliver.
   The first quarter carries the point colour; no effort or cost, which James can't give at the review stage */
.road{display:grid}
.road__head,.road__row{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1.7fr);align-items:center;column-gap:14px;row-gap:6px}
.road__head{padding-bottom:8px;border-bottom:1px solid var(--border-default);font:500 11px/1.2 var(--font-mono);color:var(--text-muted)}
.road__row{padding-block:11px;border-bottom:1px solid var(--border-subtle)}
.road__when{font:500 12px/1.2 var(--font-mono);color:var(--text-muted)}
.road__name{font:600 14px/1.3 var(--font-body);color:var(--ink)}
.road__name small{display:block;margin-top:3px;font:400 12px/1.35 var(--font-body);color:var(--text-muted)}
.road__gain{font:400 13px/1.4 var(--font-body);color:var(--text-secondary)}
.step{display:inline-block;padding:2px 7px;border:1px solid var(--border-default);border-radius:var(--radius-xs);font:500 12px/1.3 var(--font-mono);color:var(--ink);white-space:nowrap}
.road__row.is-point .step{background:var(--pfmr-mint-500);border-color:var(--ink)}
.road__row.is-point .road__when{color:var(--ink);font-weight:600}
@media (max-width:640px){
  .road__head{display:none}
  .road__row{grid-template-columns:minmax(0,1fr) auto}
  .road__when,.road__gain{grid-column:1/-1}
}

/* Example 01 refinement: readiness as a three-step scale, then the verdict and the platform call */
.ready{display:flex;align-items:center;gap:3px;font:500 12px/1.2 var(--font-mono);color:var(--text-muted)}
.ready i{width:8px;height:8px;border:1.5px solid var(--text-muted);border-radius:1px}
.ready i:last-of-type{margin-right:5px}
.ready[data-level="1"] i:nth-of-type(-n+1),.ready[data-level="2"] i:nth-of-type(-n+2),.ready[data-level="3"] i:nth-of-type(-n+3){background:var(--text-muted)}
.verdict{display:block;margin-top:4px}
.ladder__verdict small{display:block;margin-top:2px;font:400 12px/1.3 var(--font-body);color:var(--text-muted)}

/* Opportunity map (example 02): the quick-wins quarter tinted and in rust; each point carries its service catalogue area above the opportunity */
.c-quad{fill:color-mix(in oklch,var(--pfmr-mint-500) 14%,var(--surface-white))}
.c-quad-label{font-size:12px;font-weight:600;fill:var(--text-muted)}
.c-quad-label--point{fill:var(--ink)}
.c-pin circle{fill:var(--chart-ctx);stroke:var(--surface-white);stroke-width:2}
.c-pin text{font:600 12px var(--font-mono);fill:var(--surface-white)}
.c-pin--point circle{fill:var(--chart-point);stroke:var(--ink);stroke-width:1.5}
.c-pin--point text{fill:var(--ink)}
.c-pin{cursor:pointer;outline:none}
.c-pin circle{transform-box:fill-box;transform-origin:center}
.c-pin.is-active circle,.c-pin:focus-visible circle{stroke:var(--ink);stroke-width:3;transform:scale(1.15)}
/* the hover card for a pin */
.opmap-tip{position:absolute;z-index:3;display:grid;gap:2px;max-width:240px;padding:8px 10px;transform:translate(-50%,calc(-100% - 16px));background:var(--surface-white);border:var(--edge);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--hard-card);font:400 12px/1.35 var(--font-body);color:var(--text-secondary);pointer-events:none}
.opmap-tip b{font:600 13px/1.3 var(--font-body);color:var(--ink)}
.opmap-tip[hidden]{display:none}

/* Ladder terms (24 October 2026, James): hover, tap or focus a term to see its definition, shown under the line it sits in so it
   never runs past the card's edge. The definition is also the term's accessible description. */
.v2-term{white-space:nowrap;text-decoration:underline dotted var(--pfmr-mint-500);text-decoration-thickness:2px;text-underline-offset:3px;cursor:help;border-radius:2px}
.v2-term:focus-visible{outline:2px solid var(--pfmr-navy-500);outline-offset:2px}
.v2-term__tip{display:block;visibility:hidden;opacity:0;transition:opacity var(--dur-fast) var(--ease-out) .3s,visibility 0s linear .45s;position:absolute;white-space:normal;z-index:3;left:28px;right:0;top:calc(100% + 8px);padding:10px 12px;background:var(--surface-white);border:var(--edge);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--hard-card);font:400 13px/1.45 var(--font-body);color:var(--text-secondary);cursor:auto}
.v2-term__tip b{font-weight:600;color:var(--ink)}
.v2-term:is(:hover,:focus-within) .v2-term__tip{visibility:visible;opacity:1;transition-delay:0s} /* stays a moment after the pointer leaves, so it can reach the link */
.v2-term__tip::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px} /* bridges the gap above the card */
.v2-term__link{display:block;margin-top:6px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.v2-term__link:hover{color:var(--pfmr-navy-500)}
@media (prefers-reduced-motion:reduce){.v2 .v2-term__tip{opacity:1!important;transition:visibility 0s linear .45s!important}.v2 .v2-term:is(:hover,:focus-within) .v2-term__tip{transition-delay:0s!important}}
li:has(.v2-term:hover) .v2-term:not(:hover) .v2-term__tip{visibility:hidden;opacity:0;transition:none} /* a hovered term wins over one left focused */
.opkey dd[data-pin]{cursor:default}
/* the key under the map: opportunities grouped by service catalogue area */
.opkey{display:grid;gap:12px 24px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border-subtle)}
@media (min-width:641px){.opkey{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opkey dt{margin-bottom:4px;font:600 13px/1.3 var(--font-body);color:var(--ink)}
.opkey dd{display:flex;align-items:center;gap:8px;margin:4px 0 0;font:400 13px/1.35 var(--font-body);color:var(--text-secondary)}
.opkey__n{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--chart-ctx);color:var(--surface-white);font:600 11px/1 var(--font-mono)}
.opkey__n--point{background:var(--chart-point);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* Locked 23 October 2026 (take B): one framed panel with tabs; chart left, text right. Without JavaScript all three panels show, stacked */
.v2 .examples__tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.v2 .examples__tabs[hidden]{display:none}
.v2 .examples__tabs button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:var(--edge);border-radius:var(--radius-sm);background:var(--surface-white);color:var(--ink);font:600 15px/1.2 var(--font-body);cursor:pointer}
.v2 .examples__tabs button span{font:500 13px/1 var(--font-mono);color:var(--pfmr-navy-500)}
.v2 .examples__tabs button[aria-selected="true"]{background:var(--ink);color:var(--pfmr-cream-500);box-shadow:3px 3px 0 var(--hard-card)}
.v2 .examples__tabs button[aria-selected="true"] span{color:var(--pfmr-mint-300)}
.v2 .examples__tabs button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.v2 .example{padding:clamp(20px,4vw,40px);background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card)}
.v2 .chart{box-shadow:none;border:1px solid var(--border-default)}
@media (min-width:861px){.v2 .example{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.v2 .example__text{order:2}}
@media (max-width:640px){.v2 .example{box-shadow:6px 6px 0 var(--hard-card)}}

/* What the first weeks look like (PARKED 23 October 2026, not on the page: take A chosen, but the grid reads as full time; it needs a duration on each of our days and a weekly total, and the review's pace is still open): a switch between the two engagements, weeks as rows, Monday to Friday as columns */
.weeks{padding-block:0 clamp(64px,8vw,104px)}
.weeks__intro{margin-bottom:clamp(24px,3vw,32px)}
.weeks__intro .v2-h2{margin-bottom:16px}
.weeks__lede{margin:0;font:400 clamp(17px,1.5vw,19px)/1.55 var(--font-body);color:var(--text-secondary)}
.weeks__switch{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.weeks__switch[hidden]{display:none}
.weeks__switch button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:var(--edge);border-radius:var(--radius-sm);background:var(--surface-white);color:var(--ink);font:600 15px/1.2 var(--font-body);cursor:pointer}
.weeks__switch button span{font:500 13px/1 var(--font-mono);color:var(--pfmr-navy-500)}
.weeks__switch button[aria-selected="true"]{background:var(--ink);color:var(--pfmr-cream-500);box-shadow:3px 3px 0 var(--hard-card)}
.weeks__switch button[aria-selected="true"] span{color:var(--pfmr-mint-300)}
.weeks__switch button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.weeks__panels{display:grid;gap:56px}
.weekset[hidden]{display:none}
.weekset__head{margin-bottom:24px}
.weekset__label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.weekset__name{font:500 14px/1 var(--font-mono);color:var(--pfmr-navy-500)}
.weekset__title{margin:0;font:700 clamp(22px,2.4vw,30px)/1.2 var(--font-display);letter-spacing:-0.02em;color:var(--ink)}
.weekset__intro{margin:10px 0 0;font:400 17px/1.55 var(--font-body);color:var(--text-secondary)}
.weekgrid__days{display:none}
.week__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.week__when{font:500 13px/1.3 var(--font-mono);color:var(--pfmr-navy-500)}
.week__title{margin:0;font:600 18px/1.3 var(--font-display);color:var(--ink)}
.week__days{margin:0;padding:0;list-style:none}
.day__d{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:500 12px/1.2 var(--font-mono);color:var(--text-muted)}
.day__team{padding:3px 6px;border-radius:var(--radius-xs);background:var(--mark-soft);color:var(--ink);font:600 11px/1 var(--font-body)}
.day__title{margin:0;font:600 15px/1.3 var(--font-body);color:var(--ink)}
.day__text{margin:4px 0 0;font:400 14px/1.45 var(--font-body);color:var(--text-secondary)}

/* Chosen style (take A, parked with the section): a framed timetable, a header row of days, your team's days tinted */
.v2 .weekgrid{background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card);overflow:hidden}
.v2 .week{border-top:1px solid var(--border-default)}
.v2 .week:first-of-type{border-top:0}
.v2 .week__head{padding:18px 20px;background:var(--surface-raised)}
.v2 .day{padding:16px 20px;border-top:1px solid var(--border-subtle)}
.v2 .day--team{background:color-mix(in oklch,var(--pfmr-mint-500) 10%,var(--surface-white))}
@media (min-width:1001px){
  .v2 .weekgrid__days{display:grid;grid-template-columns:200px repeat(5,minmax(0,1fr));border-bottom:1px solid var(--border-default);font:500 12px/1 var(--font-mono);color:var(--text-muted)}
  .v2 .weekgrid__days span{padding:14px 16px}
  .v2 .weekgrid__days span+span{border-left:1px solid var(--border-subtle)}
  .v2 .week{display:grid;grid-template-columns:200px minmax(0,1fr)}
  .v2 .week:first-of-type{border-top:0}
  .v2 .week__head{flex-direction:column;align-items:flex-start;padding:18px 16px;border-right:1px solid var(--border-default)}
  .v2 .week__days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .v2 .day{padding:16px;border-top:0}
  .v2 .day+.day{border-left:1px solid var(--border-subtle)}
  .v2 .day__name{display:none}
  .v2 .day__d{min-height:18px}
}

/* Section subtitles (the lede under each section heading) run the full content width (James, 23 October 2026) */
.v2-sec .v2-h2+p{max-width:none}

/* Section separation (locked 23 October 2026, take C with B's rules). Every section after the hero card is a .v2-sec: it opens with a
   2px rule, a label (.v2-eyebrow) and its heading, and sits on a band. Bands run cream (the default), white (.v2-band--white) and
   navy (.v2-band--navy); alternate them as sections are added so no two neighbours share a band. */
.v2-sec{padding-block:clamp(64px,8vw,104px)}
.v2-sec>.v2-wrap::before{content:"";display:block;height:2px;margin-bottom:clamp(24px,3vw,32px);background:var(--ink)}
.v2-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 14px/1.2 var(--font-body);color:var(--ink)}
.v2-eyebrow::before{content:"";width:10px;height:10px;background:var(--pfmr-mint-500);border:1.5px solid var(--ink);border-radius:1px}
.v2-band--white{background:var(--surface-white);border-block:1px solid var(--border-default)}
.v2-band--white .stall{background:var(--surface-page)} /* white cards turn cream on a white band */
.v2-band--navy{background:var(--pfmr-navy-500)}
.v2-band--white+.v2-band--navy{border-top:0}
.v2-band--navy>.v2-wrap::before{background:var(--pfmr-cream-500)}
.v2-band--navy .v2-h2,.v2-band--navy .v2-eyebrow{color:var(--pfmr-cream-500)}
.v2-band--navy .v2-eyebrow::before{border-color:var(--pfmr-cream-500)}
.v2-band--navy .examples__lede{color:color-mix(in oklch,var(--pfmr-cream-500) 84%,var(--pfmr-navy-500))}
.v2-band--navy .examples__tabs button[aria-selected="true"]{background:var(--pfmr-mint-500);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.v2-band--navy .examples__tabs button[aria-selected="true"] span{color:var(--ink)}

/* Who we work best with (locked 23 October 2026, take A): a good-fit card and a not-a-fit card */
.fit__lede{margin:0;font:400 clamp(17px,1.5vw,19px)/1.55 var(--font-body);color:var(--text-secondary)}
.fit__intro{margin-bottom:clamp(28px,3vw,40px)}
.fit__intro .v2-h2{margin-bottom:16px}
.fit__cols{display:grid;gap:24px}
@media (min-width:861px){ /* the two cards' items line up row for row: each card and its list are subgrids of the same five rows */
  .fit__cols{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:clamp(32px,4vw,56px);row-gap:0}
  .fit__col{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px;align-content:start}
  .fit__title{margin-bottom:2px}
  .fit__list{grid-row:span 4;grid-template-rows:subgrid}
}
.fit__title{margin:0 0 14px;font:600 clamp(19px,1.8vw,22px)/1.3 var(--font-display);color:var(--ink)}
.fit__list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.fit__item{position:relative;display:block;padding-left:30px;font:400 16px/1.45 var(--font-body);color:var(--ink)}
.fit__item::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;background:var(--pfmr-mint-500);border:1.5px solid var(--ink);border-radius:var(--radius-xs);-webkit-mask:none;mask:none}
.fit__col--yes .fit__item::after{content:"";position:absolute;left:4px;top:calc(.12em + 4px);width:12px;height:12px;background:var(--ink);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.fit__col--no .fit__item{color:var(--text-secondary)}
.fit__col--no .fit__item::before{background:transparent;border-color:var(--text-muted)}
.fit__col--no .fit__item::after{content:"";position:absolute;left:4px;top:calc(.12em + 4px);width:12px;height:12px;background:var(--text-muted);-webkit-mask:var(--icon-x) center/contain no-repeat;mask:var(--icon-x) center/contain no-repeat}

/* Two cards (locked, take A): the good fit carries the mint shadow, the not-a-fit card stays quiet */
.fit__col{padding:clamp(20px,3vw,32px);background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md)}
.fit__col--yes{box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card)}
.fit__col--no{background:transparent;border-color:var(--border-control)}

@media (prefers-reduced-motion:reduce){.v2 *{transition:none!important}}

/* Common questions (locked take A): full-width rows in native details/summary, a plus button that turns mint with a minus when open */
.faq__list{border-top:1px solid var(--border-default)}
.faq__item{border-bottom:1px solid var(--border-default)}
.faq__q{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;list-style:none;cursor:pointer;font:600 clamp(18px,1.7vw,21px)/1.35 var(--font-display);color:var(--ink)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"";flex:none;width:32px;height:32px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-white) var(--icon-minus) center/18px no-repeat;transition:background-color var(--dur-fast) var(--ease-out)} /* the button and the plus's crossbar */
.faq__q::before{content:"";position:absolute;top:50%;right:15.25px;width:1.5px;height:12px;margin-top:-6px;border-radius:1px;background:var(--ink)} /* the plus's upright, matching the Lucide stroke; it lies flat to make the minus */
.faq__q:hover::after{background-color:var(--pfmr-mint-300)}
.faq__item[open]>.faq__q::after{background-color:var(--pfmr-mint-500);border-color:var(--ink)}
.faq__item[open]>.faq__q::before{transform:rotate(90deg)}
.faq__q:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:2px}
.faq__a{padding:0 56px 24px 0}
.faq__a p{margin:0;font:400 16px/1.6 var(--font-body);color:var(--text-secondary)}
.faq__a a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.faq__q::after{transition:none}}

/* Writing (locked take B, 24 October 2026): the latest three published pieces on the navy band, built from src/writing.json
   and left out of the page until one is published. The newest piece is a white card with the mint shadow; the next two
   are plain rows beside it. A single piece lies across the full row, title left and summary right, so launch day never
   shows one lonely card. */
.writing__intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(24px,3vw,36px)}
.writing__intro .v2-h2{margin:0}
.v2-band--navy .writing__all{color:var(--pfmr-cream-500)}
.writing__sample{margin:0 0 20px;padding:10px 14px;border:1px dashed color-mix(in oklch,var(--pfmr-cream-500) 45%,transparent);border-radius:var(--radius-sm);color:color-mix(in oklch,var(--pfmr-cream-500) 80%,transparent);font:500 14px/1.4 var(--font-body)} /* lab only */
.writing__list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.wr{position:relative;display:flex;flex-direction:column;gap:10px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.wr__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font:500 13px/1.3 var(--font-body)}
.wr__kind{padding:3px 8px;border-radius:var(--radius-xs);font-weight:600;color:var(--ink)}
.wr__title{margin:0;font:600 clamp(19px,1.8vw,22px)/1.3 var(--font-display);letter-spacing:-0.01em}
.wr__link{color:inherit;text-decoration:none}
.wr__link::before{content:"";position:absolute;inset:0;border-radius:var(--radius-md)} /* the whole card or row opens the piece */
.wr__link:focus-visible{outline:none}
.wr__link:focus-visible::before{outline:2px solid var(--focus-ring);outline-offset:4px}
.wr__sum{margin:0;font:400 16px/1.5 var(--font-body)}
.wr__pdf{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 9px;border-radius:var(--radius-xs);background:var(--mark-soft);color:var(--ink);font:600 13px/1.2 var(--font-body);text-decoration:none}
.wr__pdf::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon-download) center/contain no-repeat;mask:var(--icon-download) center/contain no-repeat}
.wr__pdf:hover{background:var(--pfmr-mint-300)}
.wr__pdf:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* The newest piece: a white card with the mint shadow */
.wr:first-child{gap:14px;margin-bottom:12px;padding:clamp(24px,3vw,32px);background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card)}
.wr:first-child .wr__meta{color:var(--text-muted)}
.wr:first-child .wr__kind{background:var(--mark-soft)}
.wr:first-child .wr__title{font-size:clamp(26px,2.8vw,34px);line-height:1.2;color:var(--ink)}
.wr:first-child .wr__sum{font-size:clamp(17px,1.5vw,19px);color:var(--text-secondary)}
.wr:first-child .wr__pdf{margin-top:8px}
/* The next two: plain rows on the navy */
.wr:not(:first-child){padding:20px 0;border-top:1px solid color-mix(in oklch,var(--pfmr-cream-500) 30%,transparent)}
.wr:not(:first-child) .wr__meta{color:color-mix(in oklch,var(--pfmr-cream-500) 70%,var(--pfmr-navy-500))}
.wr:not(:first-child) .wr__kind{background:var(--pfmr-mint-500)}
.wr:not(:first-child) .wr__title{color:var(--pfmr-cream-500)}
.wr:not(:first-child) .wr__sum{color:color-mix(in oklch,var(--pfmr-cream-500) 82%,var(--pfmr-navy-500))}
.wr:not(:first-child) .wr__pdf{margin-top:4px}
.wr:nth-child(2){border-top:0} /* the card above already separates it */
@media (max-width:860px){.wr:first-child{margin-bottom:22px;box-shadow:6px 6px 0 var(--hard-card)}}
@media (hover:hover){
  .wr:first-child:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--hard-card)}
  .wr:not(:first-child):hover .wr__title{text-decoration:underline;text-decoration-color:var(--pfmr-mint-500);text-decoration-thickness:2px;text-underline-offset:5px}
}
@media (prefers-reduced-motion:reduce){.wr,.wr:hover{transition:none;transform:none}}
@media (min-width:861px){
  .writing__list{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,4vw,56px)}
  .wr:first-child{grid-row:1/span 3;align-self:start;margin-bottom:0} /* only as tall as its content, so no empty space inside the card */
  .wr:nth-child(2){padding-top:0}
  /* one piece: across the row, title left and summary right */
  .wr:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,56px);row-gap:10px;align-items:start}
  .wr:only-child .wr__meta{grid-column:1;grid-row:1}
  .wr:only-child .wr__title{grid-column:1;grid-row:2}
  .wr:only-child .wr__sum{grid-column:2;grid-row:1/span 2;align-self:center}
  .wr:only-child .wr__pdf{grid-column:2;grid-row:3;justify-self:start;margin-top:6px}
}

.v2-nowrap{white-space:nowrap} /* keeps a hyphenated pair such as 30-minute on one line */
/* Closing band (locked take C, 24 October 2026): a white card with the mint shadow on the navy band, bookending the hero card.
   Heading left; the line, the button (charcoal shadow, as on any white surface) and the availability badge right */
.close__panel{padding:clamp(24px,5vw,56px);background:var(--surface-white);border:var(--edge);border-radius:var(--radius-md);box-shadow:var(--hard-lg) var(--hard-lg) 0 var(--hard-card)}
.close .v2-eyebrow,.close .v2-h2{color:var(--ink)}
.close .v2-eyebrow::before{border-color:var(--ink)}
.close .v2-h2.close__title{margin:0;font-size:clamp(36px,5vw,64px);line-height:1.05}
.close__act{margin-top:clamp(20px,2.5vw,28px)}
.close__line{margin:0;font:400 clamp(18px,1.6vw,21px)/1.5 var(--font-body);color:var(--text-secondary)}
.close__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(24px,3vw,32px)}
@media (min-width:861px){
  .close__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:end}
  .close__act{margin-top:0}
}
@media (max-width:860px){.close__panel{box-shadow:6px 6px 0 var(--hard-card)}}

/* Footer (locked take B in cream, 24 October 2026): the wordmark (home link) left; the header's links and the contact links as
   two lists; the copyright line and ABN under a hairline. Email, LinkedIn and ABN appear only once set in the config.
   A navy colourway was compared and not chosen (commit 0f4ef9b has it). */
.foot{padding-block:clamp(40px,5vw,64px) clamp(28px,3vw,40px);background:var(--surface-page);font:var(--type-body)} /* the brand body font, so the old pages' larger body text does not stretch the contact list */
.foot>.v2-wrap::before{content:"";display:block;height:2px;margin-bottom:clamp(24px,3vw,32px);background:var(--ink)}
.foot__sample{margin:0 0 20px;padding:10px 14px;border:1px dashed var(--border-default);border-radius:var(--radius-sm);color:var(--text-muted);font:500 14px/1.4 var(--font-body)} /* lab only */
.foot__top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px 40px}
.foot__brand{display:inline-block;line-height:0;border-radius:2px}
.foot__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.foot__logo{display:block;width:auto;height:40px}
.foot__logo--light{display:none}
.foot__nav,.foot__contact{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0;list-style:none}
.foot__nav a,.foot__contact a{display:inline-block;color:var(--ink);font:500 15px/1.4 var(--font-body);text-decoration:none;
  background:linear-gradient(var(--accent) 0 0) 0 100%/0 2px no-repeat} /* the hover underline, drawn in like the header's; inline-block so it sits where the old one did */
.foot__nav a:hover,.foot__contact a:hover{background-size:100% 2px}
.foot__nav a:focus-visible,.foot__contact a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px}
.foot__legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin:clamp(28px,4vw,48px) 0 0;padding-top:20px;border-top:1px solid var(--border-default);font:400 14px/1.4 var(--font-body);color:var(--text-muted)}
@media (max-width:860px){.foot__top{flex-direction:column}}
@media (min-width:861px){
  .foot__top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
  .foot__nav,.foot__contact{flex-direction:column;align-items:flex-start} /* links only as wide as their words, for the underline */
}

/* Motion (James, 24 October 2026). Fades and short slides on the brand durations, all inside this block, so with reduced motion
   set none of it runs and every state still changes, at once. Two reveals: the hero marker and the worked-example charts.
   One loop: the availability dot. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto} /* moving between pages cross-fades */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-base)}
  .v2-head{view-transition-name:site-head} /* the header holds still while the page under it fades */

  .v2-nav a:not(.v2-btn),.foot__nav a,.foot__contact a{transition:background-size var(--dur-base) var(--ease-out)}
  .v2-toggle__bars,.v2-toggle__bars::before,.v2-toggle__bars::after{transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}
  @media (max-width:860px){.js .v2-nav.is-open{--in-y:-8px;animation:v2-in var(--dur-base) var(--ease-out)}}

  .js [data-tabs] .example{--in-y:6px;animation:v2-in var(--dur-base) var(--ease-out)} /* runs each time a tab shows its panel */
  .faq__q::before{transition:transform var(--dur-base) var(--ease-out)}
  .faq__item[open] .faq__a{--in-y:-4px;animation:v2-in var(--dur-base) var(--ease-out)}
  .opmap-tip{animation:v2-tip var(--dur-fast) var(--ease-out)}
  .c-pin circle{transition:transform var(--dur-fast) var(--ease-out)}
  .stall__tag::after{transition:transform var(--dur-fast) var(--ease-out)}
  @media (hover:hover){.stall:hover .stall__tag::after,.stall__tag:hover::after{transform:translateX(2px)}}

  /* The availability dot sends out a slow ring, starting once the hero marker has drawn */
  .v2-status__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pfmr-mint-500);animation:v2-pulse 3s var(--ease-out) 1.2s infinite both}

  /* The charts fill in like the hero marker: the heat map's teal steps left to right, row by row, and the register's seats in use.
     v2.js sets each piece's delay (--d) and holds them empty (data-draw="pending") until the shown chart is in view; a panel's
     animations restart whenever its tab shows it. */
  [data-draw] .ladder__track i{animation:v2-cell 240ms var(--ease-in-out) var(--d,0ms) both}
  [data-draw] .reg__bar i{animation:v2-bar 560ms var(--ease-in-out) var(--d,0ms) both}
  [data-draw="pending"] :is(.ladder__track,.reg__bar) i{animation-play-state:paused}

  /* The good-fit ticks: each box fills mint from the bottom, then its tick draws in left to right, one item after another once the
     list is in view. v2.js sets each item's delay (--d) and holds them empty (data-draw="pending") until then. */
  .fit__col--yes[data-draw] .fit__item::before{background:linear-gradient(var(--pfmr-mint-500),var(--pfmr-mint-500)) left bottom/100% 100% no-repeat;animation:v2-fill 260ms var(--ease-out) var(--d,0ms) both}
  .fit__col--yes[data-draw] .fit__item::after{animation:v2-bar 300ms var(--ease-in-out) calc(var(--d,0ms) + 200ms) both}
  .fit__col--yes[data-draw="pending"] .fit__item::before,.fit__col--yes[data-draw="pending"] .fit__item::after{animation-play-state:paused}
}
@keyframes v2-in{from{opacity:0;transform:translateY(var(--in-y,6px))}}
@keyframes v2-tip{from{opacity:0;transform:translate(-50%,calc(-100% - 12px))}}
@keyframes v2-pulse{0%{transform:scale(1);opacity:.5}60%,100%{transform:scale(3);opacity:0}}
@keyframes v2-cell{from{background-size:0 100%;border-color:var(--border-default)}}
@keyframes v2-bar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes v2-fill{from{background-size:100% 0}}

/* Design lab only: the stub for the next section and the take switcher. Never on a live page. */
.v2-next{padding-block:40px 120px;border-top:1px dashed var(--border-default)}
.v2-next p{margin:0;padding:48px 24px;border:1px dashed var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);font:500 15px/1.4 var(--font-body);text-align:center}
.lab-bar{position:fixed;z-index:20;right:16px;bottom:16px;display:flex;align-items:center;gap:4px;padding:6px;border-radius:var(--radius-md);background:var(--pfmr-charcoal-500);color:var(--pfmr-cream-500);font:500 13px/1 var(--font-body)}
.lab-bar span{padding:0 10px;color:color-mix(in oklch,var(--pfmr-cream-500) 70%,transparent)}
.lab-bar a{padding:9px 12px;border-radius:var(--radius-sm);color:var(--pfmr-cream-500);text-decoration:none}
.lab-bar a[aria-current]{background:var(--pfmr-cream-500);color:var(--pfmr-charcoal-500)}