/* =========================================================================
   PCOMS home page
   All styling for the design lives here. No inline styles, no <style> blocks,
   no per-block custom CSS in the editor. Sections are targeted by the class
   set in each block's Advanced > Additional CSS class(es) field — see
   EDITING.md for which class sits on which block.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens (from design/tokens.css — source of truth)
   ------------------------------------------------------------------------- */

:root{
  /* Brand */
  --pcoms-electric:       #57C0F0;
  --pcoms-electric-bright:#6FD0FF;
  --pcoms-electric-pale:  #E2F3FD;
  --pcoms-navy-deep:      #0F2A4D;
  --pcoms-navy:           #163A66;

  /* Neutrals */
  --pcoms-paper:          #F5F7FB;
  --pcoms-ink:            #132238;
  --pcoms-ink-soft:       #566579;
  --pcoms-rule:           #D5E0EC;
  --pcoms-white:          #FFFFFF;
  --pcoms-sun:            #FFCB2E;  /* the CORS smiley faces, as on the printed form */

  /* Chart ramp */
  --pcoms-ramp-1:         #1B4E86;
  --pcoms-ramp-2:         #17457A;
  --pcoms-ramp-3:         #123B6B;

  /* Type */
  --pcoms-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --pcoms-font-hand:    'Architects Daughter', cursive;

  /* Spacing */
  --pcoms-gutter:        96px;
  --pcoms-section-y:     44px;
  --pcoms-hero-y:        104px;
  --pcoms-max:           1440px; /* design width; content stops widening past this */

  /* Radii */
  --pcoms-radius-pill:   99px;
  --pcoms-radius-field:  2px;
  --pcoms-radius-phone:  44px;
  --pcoms-radius-screen: 34px;

  /* Alphas used verbatim in the design */
  --pcoms-on-navy-90:  rgba(245,247,251,.90);
  --pcoms-on-navy-88:  rgba(245,247,251,.88);
  --pcoms-on-navy-74:  rgba(245,247,251,.74);
  --pcoms-on-navy-62:  rgba(245,247,251,.62);
  --pcoms-on-navy-16:  rgba(245,247,251,.16);
  --pcoms-on-bright-82:rgba(15,42,77,.82);
  --pcoms-on-bright-92:rgba(15,42,77,.92);
  --pcoms-on-bright-55:rgba(15,42,77,.55);
  --pcoms-on-bright-28:rgba(15,42,77,.28);
  --pcoms-on-electric-84:rgba(19,34,56,.84);
}

/* -------------------------------------------------------------------------
   1b. Base reset
   Genesis Sample's stylesheet is dequeued on this template, which also takes
   its box-sizing reset and screen-reader utilities with it. Both are
   reinstated here so the template does not depend on the parent's CSS.
   ------------------------------------------------------------------------- */

.pcoms-page,
.pcoms-page *,
.pcoms-page *::before,
.pcoms-page *::after{box-sizing:border-box}

/* A last line of defence against sideways scroll: long unbroken strings and
   over-wide children should be clipped by the page, never widen it. */
html,
body.pcoms-page{overflow-x:hidden}
.pcoms-page .entry-content{overflow-wrap:break-word}

/* WordPress core sets word-break:break-word on .wp-block-column, and
   word-break inherits — which let headings split mid-word ("avail/able")
   once they sat in a narrower column. overflow-wrap still breaks a word that
   genuinely cannot fit, so the overflow guard is intact. */
.pcoms-page h1,
.pcoms-page h2,
.pcoms-page h3,
.pcoms-page h4{
  word-break:normal;
  overflow-wrap:break-word;
}

.pcoms-page img{max-width:100%;height:auto}

/* Skip links: visually hidden until focused. */
.pcoms-page .genesis-skip-link{margin:0;padding:0;list-style:none}
.pcoms-page .genesis-skip-link li{width:0;height:0;list-style:none}
.pcoms-page .screen-reader-text,
.pcoms-page .screen-reader-shortcut{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.pcoms-page .screen-reader-text:focus,
.pcoms-page .screen-reader-shortcut:focus{
  position:static!important;
  width:auto;height:auto;
  margin:0;padding:12px 24px;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:normal;
  display:block;
  background:var(--pcoms-paper);
  color:var(--pcoms-navy-deep);
  font:600 15px var(--pcoms-font-display);
  text-decoration:underline;
}

/* -------------------------------------------------------------------------
   2. Unwrap the Genesis content column for this template
   ------------------------------------------------------------------------- */

.pcoms-page{background:var(--pcoms-paper);font-family:var(--pcoms-font-display)}
.pcoms-page .site-inner,
.pcoms-page .content-sidebar-wrap,
.pcoms-page .content,
.pcoms-page .entry,
.pcoms-page .entry-content{max-width:none;width:auto;margin:0;padding:0;border:0;background:none}
.pcoms-page .site-inner{clip:auto}
.pcoms-page .entry-content > *{margin-top:0;margin-bottom:0}

/* Genesis Sample adds bottom margin to every block; sections own their spacing. */
.pcoms-page .entry-content > .wp-block-columns{margin-bottom:0}

/* -------------------------------------------------------------------------
   3. Shared section furniture
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-section{
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
  margin:0;
}
.pcoms-page .pcoms-section--paper{background:var(--pcoms-paper)}
.pcoms-page .pcoms-rule-top{border-top:1px solid var(--pcoms-rule)}
.pcoms-page .pcoms-rule-bottom{border-bottom:1px solid var(--pcoms-rule)}

.pcoms-page .pcoms-eyebrow{
  font:400 18px var(--pcoms-font-hand);
  letter-spacing:.05em;
  color:var(--pcoms-ink-soft);
  margin:0 0 14px;
}
/* pretty, not balance: balance evens the line lengths, which left long
   headings wrapping early with a lot of unused measure to the right. */
.pcoms-page .pcoms-h2{
  font:500 42px/1.1 var(--pcoms-font-display);
  letter-spacing:-.025em;
  color:var(--pcoms-ink);
  text-wrap:pretty;
  margin:0;
}
.pcoms-page .pcoms-body{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0;
}
.pcoms-page .pcoms-arrow-link,
.pcoms-page .pcoms-arrow-link a{
  font:700 20px var(--pcoms-font-hand);
  color:var(--pcoms-navy);
  text-decoration:underline;
  text-decoration-color:var(--pcoms-electric);
  text-underline-offset:3px;
}
.pcoms-page .pcoms-arrow-link a:hover,
.pcoms-page .pcoms-arrow-link a:focus{color:var(--pcoms-navy-deep)}

/* The mark-on-a-line motif, used in the contact column and the footer. */
.pcoms-motif{position:relative;height:11px;max-width:230px}
.pcoms-motif__rule{position:absolute;left:0;right:0;top:5px;height:1px;background:var(--pcoms-rule)}
.pcoms-motif__dot{position:absolute;left:75%;top:0;width:11px;height:11px;border-radius:50%;background:var(--pcoms-navy)}
.pcoms-motif--reversed{max-width:none;margin-bottom:26px}
.pcoms-motif--reversed .pcoms-motif__rule{background:var(--pcoms-on-navy-62)}
.pcoms-motif--reversed .pcoms-motif__dot{background:var(--pcoms-electric-bright)}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */

.pcoms-header{
  position:relative;z-index:2;
  background:var(--pcoms-navy-deep);
  padding:24px var(--pcoms-gutter);
  display:flex;align-items:center;gap:48px;
  border-bottom:1px solid var(--pcoms-on-navy-16);
  box-shadow:0 10px 26px -20px rgba(15,42,77,.55);
}
.pcoms-header .pcoms-logo{display:block;line-height:0}
.pcoms-header .pcoms-logo__svg{height:52px;width:auto;display:block;overflow:visible}

.pcoms-nav{flex:1}
.pcoms-nav__list{
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:flex-end;align-items:center;gap:34px;
}
.pcoms-nav__list li{margin:0}
.pcoms-nav__list a{
  font:500 15px var(--pcoms-font-display);
  color:var(--pcoms-on-navy-90);
  text-decoration:none;
}
.pcoms-nav__list a:hover,
.pcoms-nav__list a:focus{color:var(--pcoms-paper)}

/* The Contact pill is a menu item carrying the .pcoms-nav-contact class. */
.pcoms-nav__list .pcoms-nav-contact a{
  padding:11px 22px;
  border-radius:var(--pcoms-radius-pill);
  background:var(--pcoms-electric);
  font:600 14px var(--pcoms-font-display);
  color:var(--pcoms-navy-deep);
}
.pcoms-nav__list .pcoms-nav-contact a:hover,
.pcoms-nav__list .pcoms-nav-contact a:focus{background:var(--pcoms-electric-bright);color:var(--pcoms-navy-deep)}

.pcoms-nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:0;cursor:pointer}
.pcoms-nav-toggle__bar{display:block;width:24px;height:1.5px;background:rgba(245,247,251,.92)}

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-hero{
  background:var(--pcoms-electric-bright);
  padding:var(--pcoms-hero-y) var(--pcoms-gutter) 96px;
  gap:64px;
  align-items:center;
  margin:0;
}
.pcoms-page .pcoms-hero > .wp-block-column:first-child{flex-basis:46%!important}
.pcoms-page .pcoms-hero > .wp-block-column:last-child{flex-basis:54%!important}

.pcoms-page .pcoms-hero__title{
  font:500 104px/.82 var(--pcoms-font-display);
  letter-spacing:-.012em;
  color:var(--pcoms-navy-deep);
  margin:0 0 34px;
}
/* Second line is a reversed band behind the words. */
.pcoms-page .pcoms-hero__title strong{
  display:table;
  margin-top:.24em;
  padding:.06em .22em .1em;
  background:var(--pcoms-navy-deep);
  color:var(--pcoms-paper);
  font-weight:500;
}
/* Also matches a plain paragraph sitting directly in the hero's text column.
   Retyping the standfirst drops the class, and the design should survive that. */
.pcoms-page .pcoms-hero__standfirst,
.pcoms-page .pcoms-hero > .wp-block-column:first-child > p{
  font:400 21px/1.6 var(--pcoms-font-display);
  color:var(--pcoms-on-bright-82);
  max-width:40ch;
  text-wrap:pretty;
  margin:0 0 38px;
}
.pcoms-page .pcoms-hero__buttons{gap:14px}
.pcoms-page .pcoms-hero__buttons .wp-block-button__link{
  font:600 16px var(--pcoms-font-display);
  border-radius:var(--pcoms-radius-pill);
  padding:15px 30px;
  background:var(--pcoms-navy-deep);
  color:var(--pcoms-paper);
  text-decoration:none;
}
.pcoms-page .pcoms-hero__buttons .is-style-outline .wp-block-button__link,
.pcoms-page .pcoms-hero__buttons .pcoms-btn-ghost .wp-block-button__link,
.pcoms-page .pcoms-hero__buttons .wp-block-button__link.pcoms-btn-ghost{
  padding:14px 26px;
  background:transparent;
  border:1px solid var(--pcoms-on-bright-55);
  color:var(--pcoms-on-bright-92);
}

/* -------------------------------------------------------------------------
   6. Hero chart block
   ------------------------------------------------------------------------- */

.pcoms-chart{position:relative;height:440px}
/* The line, dots and halo live in their own layer so the note can stay put
   while the graph is positioned independently. Filling the chart by default
   keeps the home hero exactly as it was. */
.pcoms-chart__plot{position:absolute;inset:0;display:block}
.pcoms-chart__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pcoms-chart__note{
  position:absolute;left:0;top:0;margin:0;
  font:400 17px/1.45 var(--pcoms-font-hand);
  color:var(--pcoms-on-bright-82);
  max-width:22ch;
}
.pcoms-chart__dot{
  position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;
}
.pcoms-chart__dot--1{background:var(--pcoms-ramp-1)}
.pcoms-chart__dot--2{background:var(--pcoms-ramp-2)}
.pcoms-chart__dot--3{background:var(--pcoms-ramp-3)}

.pcoms-chart__halo{position:absolute;width:92px;height:92px;margin:-46px 0 0 -46px;display:block}
.pcoms-chart__halo-outer,
.pcoms-chart__halo-ring{position:absolute;border-radius:50%;background:var(--pcoms-electric-bright)}
.pcoms-chart__halo-outer{inset:0;border:1px solid rgba(15,42,77,.4)}
.pcoms-chart__halo-ring{inset:19px;border:1px solid rgba(15,42,77,.5)}
.pcoms-chart__halo-core{
  position:absolute;left:50%;top:50%;
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;background:var(--pcoms-navy-deep);
}

/* Editor placeholder — the animation only runs on the published page. */
.pcoms-chart--editor{height:auto;min-height:180px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--pcoms-on-bright-55);border-radius:14px;background:var(--pcoms-electric-pale)}
.pcoms-chart__placeholder{margin:0;font:400 15px var(--pcoms-font-hand);color:var(--pcoms-navy)}
.pcoms-chart__note-preview{
  margin:10px 0 0;
  font:400 15px/1.45 var(--pcoms-font-hand);
  color:var(--pcoms-on-bright-82);
  text-align:center;
  white-space:pre-line;
}
.pcoms-chart--editor{flex-direction:column}

/* -------------------------------------------------------------------------
   7. Motion
   ------------------------------------------------------------------------- */

@keyframes pc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pc-draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes pc-land{
  0%{opacity:0;transform:translateY(-16px) scale(.72)}
  55%{opacity:1;transform:translateY(3px) scale(1.07)}
  78%{transform:translateY(-1.5px) scale(.99)}
  100%{opacity:1;transform:none}
}
@keyframes pc-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}

.pcoms-page .pcoms-hero__title,
.pcoms-page .pcoms-hero__standfirst{animation:pc-rise .8s cubic-bezier(.2,.7,.3,1) both}
.pcoms-page .pcoms-hero__buttons{animation:pc-rise .8s cubic-bezier(.2,.7,.3,1) .15s both}

.pcoms-chart__line{stroke-dasharray:900;animation:pc-draw 1.5s cubic-bezier(.3,.7,.2,1) .25s both}
.pcoms-chart__dot,
.pcoms-chart__halo{animation:pc-land .62s cubic-bezier(.34,1.16,.5,1) both}
.pcoms-chart__dot--1{animation-delay:.55s}
.pcoms-chart__dot--2{animation-delay:.95s}
.pcoms-chart__dot--3{animation-delay:1.35s}
.pcoms-chart__halo{animation-delay:1.75s}
.pcoms-chart__halo-core{animation:pc-breathe 3.6s ease-in-out 2.4s infinite}

/* Scroll reveals, driven by pcoms.js adding .pcoms-reveal / .is-visible. */
.pcoms-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.pcoms-reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pcoms-page .pcoms-hero__title,
  .pcoms-page .pcoms-hero__standfirst,
  .pcoms-page .pcoms-hero__buttons,
  .pcoms-chart__line,
  .pcoms-chart__dot,
  .pcoms-chart__halo,
  .pcoms-chart__halo-core,
  .pcoms-reveal{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    stroke-dashoffset:0!important;
  }
}

/* -------------------------------------------------------------------------
   8. Five-minute callout
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-callout{
  background:var(--pcoms-paper);
  border-top:1px solid var(--pcoms-rule);
  border-bottom:1px solid var(--pcoms-rule);
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
  text-align:center;
}
.pcoms-page .pcoms-callout p{
  margin:0;
  font:400 24px/1.5 var(--pcoms-font-display);
  letter-spacing:-.01em;
  color:var(--pcoms-ink);
  text-wrap:pretty;
}

/* -------------------------------------------------------------------------
   9. Licensing intro + body (cards | phone)
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-licensing-intro{
  padding:var(--pcoms-section-y) var(--pcoms-gutter) 0;
}

.pcoms-page .pcoms-licensing{gap:0;align-items:stretch;margin:0}
.pcoms-page .pcoms-licensing > .wp-block-column:first-child{
  flex-basis:57.5%!important;
  padding:var(--pcoms-section-y) 56px 72px var(--pcoms-gutter);
  border-right:1px solid var(--pcoms-rule);
}
.pcoms-page .pcoms-licensing > .wp-block-column:last-child{
  flex-basis:42.5%!important;
  padding:var(--pcoms-section-y) var(--pcoms-gutter) 72px 56px;
  display:flex;align-items:center;justify-content:center;
}

.pcoms-page .pcoms-card h2{
  font:500 34px/1.15 var(--pcoms-font-display);
  letter-spacing:-.02em;
  color:var(--pcoms-ink);
  text-wrap:balance;
  margin:0 0 16px;
}
.pcoms-page .pcoms-card p{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  max-width:44ch;
  text-wrap:pretty;
  margin:0 0 20px;
}
/* Cards after the first carry their own top rule. */
.pcoms-page .pcoms-card + .pcoms-card{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid var(--pcoms-rule);
}

/* Phone mockup — frame is CSS, the screen is a core Image block. */
.pcoms-phone{
  width:296px;padding:12px;
  border-radius:var(--pcoms-radius-phone);
  background:var(--pcoms-navy-deep);
  box-shadow:0 24px 48px -28px rgba(15,42,77,.55);
}
.pcoms-phone__screen{
  position:relative;
  border-radius:var(--pcoms-radius-screen);
  background:var(--pcoms-electric);
  overflow:hidden;
  padding:44px 22px 30px;
}
.pcoms-phone__screen::before{
  content:"";position:absolute;left:50%;top:12px;
  width:74px;height:6px;margin-left:-37px;
  border-radius:var(--pcoms-radius-pill);
  background:rgba(255,255,255,.45);
}
.pcoms-page .pcoms-phone__eyebrow{
  margin:0 0 6px;
  font:400 15px var(--pcoms-font-hand);
  letter-spacing:.04em;
  color:var(--pcoms-ink-soft);
}
.pcoms-page .pcoms-phone__question{
  margin:0 0 22px;
  font:500 21px/1.2 var(--pcoms-font-display);
  letter-spacing:-.015em;
  color:var(--pcoms-ink);
}
/* The ORS screenshot slot. */
.pcoms-page .pcoms-phone__image{margin:0}
.pcoms-page .pcoms-phone__image img{
  display:block;width:100%;height:300px;
  object-fit:cover;border-radius:14px;
  background:var(--pcoms-electric-pale);
}
.pcoms-phone__footer{display:flex;align-items:center;gap:10px;margin-top:22px}
.pcoms-phone__footer-rule{flex:1;height:1px;background:var(--pcoms-rule)}
.pcoms-phone__footer-dot{width:11px;height:11px;border-radius:50%;background:var(--pcoms-electric)}

/* -------------------------------------------------------------------------
   10. How it works
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-how{
  background:var(--pcoms-paper);
  border-top:1px solid var(--pcoms-rule);
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
}
.pcoms-page .pcoms-how__heading{margin:0 0 56px}
.pcoms-page .pcoms-steps{position:relative;gap:56px;margin:0}
/* Hairline running behind the step dots. */
.pcoms-page .pcoms-steps::before{
  content:"";position:absolute;left:0;right:0;top:6px;height:1px;
  background:var(--pcoms-rule);
}
.pcoms-page .pcoms-step{position:relative}
.pcoms-page .pcoms-step::before{
  content:"";position:relative;z-index:1;display:block;
  width:13px;height:13px;border-radius:50%;
  background:var(--pcoms-navy);
  margin-bottom:28px;
}
.pcoms-page .pcoms-step h3{
  font:500 26px/1.2 var(--pcoms-font-display);
  letter-spacing:-.02em;
  color:var(--pcoms-ink);
  margin:0 0 12px;
}
.pcoms-page .pcoms-step p{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0;
}
/* Travelling dot — optional polish, positioned by pcoms.js. */
/* -------------------------------------------------------------------------
   11. Feedback layer
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-feedback{
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
  gap:88px;align-items:flex-start;margin:0;
}
.pcoms-page .pcoms-feedback > .wp-block-column:first-child{flex-basis:47.6%!important}
.pcoms-page .pcoms-feedback > .wp-block-column:last-child{flex-basis:52.4%!important;padding-top:6px}

.pcoms-page .pcoms-feedback__list{list-style:none;margin:0;padding:0}
.pcoms-page .pcoms-feedback__list li{
  position:relative;
  padding-left:31px;
  font:400 19px/1.55 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0;
}
.pcoms-page .pcoms-feedback__list li + li{margin-top:26px}
.pcoms-page .pcoms-feedback__list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:11px;height:11px;border-radius:50%;
  background:var(--pcoms-navy);
}
.pcoms-page .pcoms-feedback__list strong{font-weight:600;color:var(--pcoms-ink)}

/* -------------------------------------------------------------------------
   12. Quote band
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-quote{
  background:var(--pcoms-electric);
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
  gap:56px;align-items:center;margin:0;
}
/* Side by side at every width down to 782px, stacked below it. That comes
   from core, which owns flex-wrap on .wp-block-columns with !important:
   wrap by default, nowrap inside @media (min-width:782px). Do not re-declare
   it here — a non-important override loses to core at exactly 782px while any
   flex-basis override still applies, which leaves the text on top of the
   globe in a row that refuses to wrap. */
/* Keyed to the portrait actually being there. Sizing this column by position
   meant that deleting the portrait left the text stuck at the portrait's
   188px width. */
.pcoms-page .pcoms-quote > .wp-block-column:has(.pcoms-quote__portrait),
.pcoms-page .pcoms-quote > .wp-block-column:has(.pcoms-globe){
  flex-basis:188px!important;
  flex-grow:0;
}
/* Portrait slot — a core Image block made round by the stylesheet. */
.pcoms-page .pcoms-quote__portrait{margin:0}
.pcoms-page .pcoms-quote__portrait img{
  display:block;width:188px;height:188px;
  border-radius:50%;object-fit:cover;
}
/* Text-only band: a wide, centred measure across the electric ground. */
.pcoms-page .pcoms-quote__text{
  margin:0 auto 26px;
  font:400 38px/1.4 var(--pcoms-font-hand);
  color:var(--pcoms-ink);
  max-width:46ch;
  text-wrap:pretty;
}
/* Beside the globe the quote fills the rest of the band: the section is
   already the full 1233px measure, so capping the text at 26ch just left a
   gap on the right. */
.pcoms-page .pcoms-quote:has(.pcoms-quote__portrait) .pcoms-quote__text,
.pcoms-page .pcoms-quote:has(.pcoms-globe) .pcoms-quote__text{
  max-width:none;
  margin-inline:0;
}
/* A passage rather than a line: add pcoms-quote-long to the band (single
   hyphens: block comments can't hold "--", so WordPress would escape it).
   At the headline size a 50-70 word quote ran nine lines and pushed the band
   past 600px, so it steps down and takes a wider measure. It also sits on the
   page's left edge, in step with the headings and prose around it — a
   centred passage between left-aligned sections read as a break in the flow. */
.pcoms-page .pcoms-quote-long .pcoms-quote__text{
  font-size:27px;
  line-height:1.5;
  max-width:62ch;
  margin-inline:0;
}
/* The hero's brighter blue, for a band that sits near a page intro: add
   pcoms-quote-bright. About and Books use it, since their band is one section
   below the intro and two blues that close read as a mismatch. The home page
   band keeps the electric blue from the design; there the two are far apart. */
.pcoms-page .pcoms-quote-bright{background:var(--pcoms-electric-bright)}
.pcoms-page .pcoms-quote-bright .pcoms-quote__attribution{color:var(--pcoms-on-bright-82)}
.pcoms-page .pcoms-quote__attribution{
  margin:0;
  font:500 15px var(--pcoms-font-display);
  color:var(--pcoms-on-electric-84);
}

/* -------------------------------------------------------------------------
   13. Evidence
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-evidence{
  background:var(--pcoms-paper);
  border-bottom:1px solid var(--pcoms-rule);
  padding:50px var(--pcoms-gutter);
}
/* Runs the full section measure, like every other section on the page. */
.pcoms-page .pcoms-evidence > .wp-block-column{max-width:none}
/* balance, not nowrap: the original headline was written to fit one line in a
   1120px measure, so nowrap forced the whole page to scroll sideways as soon
   as the copy got longer. balance still keeps it on one line when it fits. */
.pcoms-page .pcoms-evidence__heading{
  font:500 42px/1.16 var(--pcoms-font-display);
  letter-spacing:-.025em;
  color:var(--pcoms-ink);
  text-wrap:pretty;
  margin:0 0 20px;
}
.pcoms-page .pcoms-evidence__body{
  font:400 18px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  max-width:none;
  text-wrap:pretty;
  margin:0 0 24px;
}

/* -------------------------------------------------------------------------
   14. Contact
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-contact{
  background:var(--pcoms-paper);
  padding:50px var(--pcoms-gutter) 56px;
  gap:80px;align-items:flex-start;margin:0;
}
.pcoms-page .pcoms-contact > .wp-block-column:first-child{flex-basis:42.5%!important}
.pcoms-page .pcoms-contact > .wp-block-column:last-child{flex-basis:57.5%!important}

.pcoms-page .pcoms-contact__heading{
  font:500 52px/1.05 var(--pcoms-font-display);
  letter-spacing:-.03em;
  color:var(--pcoms-ink);
  margin:0 0 18px;
}
.pcoms-page .pcoms-contact__heading em{font-style:italic;color:var(--pcoms-navy)}
.pcoms-page .pcoms-contact__body{
  font:400 18px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  max-width:36ch;
  text-wrap:pretty;
  margin:0 0 30px;
}

/* --- Ninja Forms, styled to the design ---------------------------------- */

.pcoms-page .nf-form-fields-required{display:none}
.pcoms-page .nf-form-content{padding:0;max-width:none}

/* Two-column grid; the field list is the grid container. */
.pcoms-page .pcoms-contact .nf-form-layout form > div > .nf-field-container,
.pcoms-page .pcoms-contact .nf-form-content .nf-field-container{margin-bottom:0}

.pcoms-page .pcoms-contact nf-fields-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
/* nf-field is the grid item; nf-field-container is its inner wrapper. */
.pcoms-page .pcoms-contact nf-field{display:block;min-width:0}
.pcoms-page .nf-field-container{margin:0}
/* message + submit span the full row */
.pcoms-page .pcoms-contact nf-field:has(.textarea-container),
.pcoms-page .pcoms-contact nf-field:has(.submit-container){grid-column:1/-1}

.pcoms-page .nf-field-label{margin:0 0 8px}
.pcoms-page .nf-field-label label{
  font:400 16px var(--pcoms-font-hand);
  letter-spacing:.04em;
  color:var(--pcoms-ink-soft);
  text-transform:lowercase;
  margin:0;
}
.pcoms-page .nf-field-label .ninja-forms-req-symbol{display:none}

.pcoms-page .nf-form-cont input[type=text],
.pcoms-page .nf-form-cont input[type=email],
.pcoms-page .nf-form-cont select,
.pcoms-page .nf-form-cont textarea{
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid var(--pcoms-rule);
  border-radius:var(--pcoms-radius-field);
  background:var(--pcoms-white);
  font:400 17px var(--pcoms-font-display);
  color:var(--pcoms-ink);
  outline-color:var(--pcoms-navy);
  box-shadow:none;
}
.pcoms-page .nf-form-cont select{padding:0 12px}
.pcoms-page .nf-form-cont textarea{
  height:auto;
  min-height:124px;
  padding:14px 16px;
  line-height:1.55;
  resize:vertical;
}
.pcoms-page .nf-form-cont input:focus,
.pcoms-page .nf-form-cont select:focus,
.pcoms-page .nf-form-cont textarea:focus{
  border-color:var(--pcoms-navy);
  outline:2px solid var(--pcoms-navy);
  outline-offset:-2px;
}

.pcoms-page .nf-form-cont .submit-container{display:flex;justify-content:flex-end}
.pcoms-page .nf-form-cont .submit-container input,
.pcoms-page .nf-form-cont input[type=submit],
.pcoms-page .nf-form-cont input[type=button]{
  width:auto;
  height:auto;
  padding:15px 34px;
  border:0;
  border-radius:var(--pcoms-radius-pill);
  background:var(--pcoms-electric);
  font:600 16px var(--pcoms-font-display);
  color:var(--pcoms-navy-deep);
  cursor:pointer;
}
.pcoms-page .nf-form-cont .submit-container input:hover,
.pcoms-page .nf-form-cont .submit-container input:focus{background:var(--pcoms-electric-bright)}

/* Checkbox fields — the licence acknowledgement on the download page.
   Ninja Forms already makes .field-wrap a flex row, so the input is REORDERED
   to sit before its label. A float here does nothing: floats are ignored on
   flex items, which is why the box previously dropped below the label. */
.pcoms-page .nf-form-cont .checkbox-container .field-wrap{
  align-items:flex-start;
  gap:13px;
}
/* Ninja Forms gives .nf-field-element width:100%, which in a wrapping flex row
   pushes the label onto its own line. The box only ever needs its own width. */
.pcoms-page .nf-form-cont .checkbox-container .nf-field-element{
  order:-1;
  flex:0 0 auto;
  width:auto;
  margin:2px 0 0;
}
.pcoms-page .nf-form-cont .checkbox-container .nf-field-label{
  margin:0;
  flex:1 1 0;
  min-width:0;
}
.pcoms-page .nf-form-cont .checkbox-container input[type=checkbox]{
  width:19px;
  height:19px;
  accent-color:var(--pcoms-navy);
}
/* Checkbox labels are sentences, not the hand-lettered field names. */
.pcoms-page .nf-form-cont .checkbox-container .nf-field-label label{
  font:400 16px/1.6 var(--pcoms-font-display);
  letter-spacing:0;
  text-transform:none;
  color:var(--pcoms-ink-soft);
  overflow:visible;
  cursor:pointer;
}
.pcoms-page .nf-form-cont .checkbox-container{margin-bottom:18px}

.pcoms-page .nf-form-cont .nf-error-msg,
.pcoms-page .nf-form-cont .nf-error .nf-error-msg{
  font:400 14px var(--pcoms-font-display);
  color:#B3261E;
  margin-top:6px;
}
.pcoms-page .nf-form-cont .nf-error input,
.pcoms-page .nf-form-cont .nf-error select,
.pcoms-page .nf-form-cont .nf-error textarea{border-color:#B3261E}
.pcoms-page .nf-response-msg{
  font:400 18px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink);
}

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */

.pcoms-footer{
  background:var(--pcoms-navy-deep);
  padding:60px var(--pcoms-gutter) 46px;
}
.pcoms-footer__top{display:flex;gap:80px;align-items:flex-start;padding-bottom:44px}
.pcoms-footer .pcoms-logo{display:block;line-height:0}
.pcoms-footer .pcoms-logo__svg{height:34px;width:auto;display:block;overflow:visible}
.pcoms-footer__menus{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.pcoms-footer__col{display:flex;flex-direction:column;gap:12px}
.pcoms-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pcoms-footer__list li{margin:0}
.pcoms-footer__list a{
  font:400 15px var(--pcoms-font-display);
  color:var(--pcoms-on-navy-88);
  text-decoration:none;
}
.pcoms-footer__list a:hover,
.pcoms-footer__list a:focus{color:var(--pcoms-paper)}
.pcoms-footer__fineprint{
  margin:0;
  font:400 14px var(--pcoms-font-display);
  color:var(--pcoms-paper);
}

/* -------------------------------------------------------------------------
   16. Phone growth on scroll
   The phone eases up to full size as its section crosses the viewport. The
   scale comes from --pcoms-phone-s, which pcoms.js writes from the same 0-1
   scroll progress that positions the ORS marks — one listener, two effects.

   The fallback of 1 matters: with JS off, or under prefers-reduced-motion
   (where initOrsScales() returns before writing anything), the property is
   never set and the phone simply renders full size.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-phone{
  transform:scale(var(--pcoms-phone-s,1));
  transform-origin:50% 50%;
}

/* One phone, one size, on every page. It is designed at 296px and scaled with
   zoom rather than resized, so the type, frame, lines and faces all grow
   together and it looks the same wherever it sits. Only the breakpoints below
   change the factor. (It used to be the same width everywhere but a different
   height on Evidence — prose typography was leaking into the screen.) */
.pcoms-page .pcoms-phone{zoom:1.35}

/* -------------------------------------------------------------------------
   18. Decorative details drawn in CSS
   Keeps the patterns to core blocks only — no wrapper <div>s the client
   could delete by accident, and nothing extra to edit around.
   ------------------------------------------------------------------------- */

/* The phone is a Columns block; strip the block's own layout so the frame
   sizing above applies cleanly. */
.pcoms-page .pcoms-phone.wp-block-columns{
  display:block;
  gap:0;
  margin:0 auto;
  flex-wrap:nowrap;
}
.pcoms-page .pcoms-phone > .pcoms-phone__screen.wp-block-column{
  flex-basis:auto!important;
  flex-grow:0;
  margin:0;
}

/* Rule-and-dot row closing the phone screen. */
.pcoms-page .pcoms-phone__screen::after{
  content:"";
  display:block;
  margin-top:22px;
  height:11px;
  background:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) no-repeat left center / calc(100% - 21px) 1px,
    radial-gradient(circle at calc(100% - 5.5px) center, var(--pcoms-white) 5.5px, transparent 5.5px) no-repeat;
}

/* The mark-on-a-line motif as a Separator block.
   The dot is listed first: in a multi-background the first layer paints on
   top, so this draws the mark over the hairline rather than under it. */
.pcoms-page .pcoms-motif-mark{
  border:0;
  height:11px;
  width:100%;
  max-width:230px;
  margin:0;
  background:
    radial-gradient(circle at 75% center, var(--pcoms-navy) 5.5px, transparent 5.5px) no-repeat,
    linear-gradient(var(--pcoms-rule),var(--pcoms-rule)) no-repeat left center / 100% 1px;
}

/* Columns blocks used purely as full-width section wrappers should not
   inherit the block's default gap or bottom margin. */
.pcoms-page .pcoms-section-wrap.wp-block-columns{gap:0;margin:0}
.pcoms-page .pcoms-section-wrap > .wp-block-column{flex-basis:100%!important;margin:0}

/* -------------------------------------------------------------------------
   18a. The measures on the phone screen
   The ORS (adults) and CORS (children), rendered as the licensed forms are:
   title, instruction, four domains with their sub-labels, a 10cm line with
   end caps, and the copyright credit. The two panels share one grid cell so
   the phone sizes to the taller of them and pcoms.js can cross-fade.

   Marks: each row declares where its mark rests and where it finishes;
   pcoms.js feeds in a single 0-1 progress value and CSS interpolates, so no
   position is ever set from script.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-ors{
  --pcoms-ors-p:1; /* finished by default, so it still reads correctly without JS */
  display:grid;
  margin:0;
}
/* Both panels fill the shared cell, which the taller CORS sets. Spreading the
   rows keeps the shorter ORS centred and filling the screen too, with its
   title and credit landing where the CORS's do, so the cross-fade doesn't jump. */
.pcoms-page .pcoms-ors__panel{
  grid-area:1/1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.pcoms-page .pcoms-ors__panel.is-active{opacity:1;pointer-events:auto}

.pcoms-page .pcoms-ors__title{
  margin:0 0 14px;
  text-align:center;
  font:600 13px/1.25 var(--pcoms-font-display);
  letter-spacing:-.01em;
  color:var(--pcoms-white);
}

.pcoms-page .pcoms-ors__row{display:block;margin:0 0 20px}
.pcoms-page .pcoms-ors__label{
  margin:0 0 7px;
  font:600 11px/1.3 var(--pcoms-font-display);
  color:var(--pcoms-white);
  text-align:center;
}
.pcoms-page .pcoms-ors__sublabel{
  display:block;
  font-weight:400;
  font-size:8.5px;
  color:rgba(255,255,255,.82);
}

/* face — line — face */
.pcoms-page .pcoms-ors__track{
  display:flex;
  align-items:center;
  gap:6px;
}
.pcoms-page .pcoms-ors__face{
  flex:0 0 auto;
  width:20px;height:20px;
}
/* Filled sun-yellow discs with navy features — the printed CORS faces. */
.pcoms-page .pcoms-ors__face-disc{fill:var(--pcoms-sun);stroke:var(--pcoms-navy-deep)}
.pcoms-page .pcoms-ors__face-feature{fill:var(--pcoms-navy-deep);stroke:var(--pcoms-navy-deep)}
.pcoms-page .pcoms-ors__face-mouth{fill:none;stroke:var(--pcoms-navy-deep)}

/* The item line, with the end caps the printed form uses. */
.pcoms-page .pcoms-ors__line{
  position:relative;
  flex:1;
  display:block;
  height:11px;
}
.pcoms-page .pcoms-ors__line::before{
  content:"";
  position:absolute;left:0;right:0;top:5px;
  height:1px;
  background:rgba(255,255,255,.75);
}
.pcoms-page .pcoms-ors__line::after{
  content:"";
  position:absolute;left:0;right:0;top:1px;
  height:9px;
  border-left:1px solid rgba(255,255,255,.75);
  border-right:1px solid rgba(255,255,255,.75);
}
/* The mark stays solid white against the blue so it still reads as the answer. */
.pcoms-page .pcoms-ors__mark{
  position:absolute;
  top:50%;
  z-index:1;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--pcoms-white);
  transform:translate(-50%,-50%);
  left:calc(
    var(--pcoms-ors-from) +
    (var(--pcoms-ors-to) - var(--pcoms-ors-from)) * var(--pcoms-ors-p)
  );
}

.pcoms-page .pcoms-ors__credit{
  margin:18px 0 0;
  font:400 8px/1.4 var(--pcoms-font-display);
  color:rgba(255,255,255,.82);
}

/* Resting and finished positions. Slightly uneven so it reads as four real
   answers rather than one slider repeated. */
.pcoms-page .pcoms-ors__row--1{--pcoms-ors-from:16%;--pcoms-ors-to:74%}
.pcoms-page .pcoms-ors__row--2{--pcoms-ors-from:22%;--pcoms-ors-to:63%}
.pcoms-page .pcoms-ors__row--3{--pcoms-ors-from:12%;--pcoms-ors-to:81%}
.pcoms-page .pcoms-ors__row--4{--pcoms-ors-from:19%;--pcoms-ors-to:70%}

/* The editor shows both measures stacked and finished; the motion belongs to
   the live page. */
.pcoms-ors--editor{
  --pcoms-ors-p:1;
  display:block;
  background:var(--pcoms-paper);
  padding:18px;
  border-radius:14px;
}
.pcoms-ors--editor .pcoms-ors__editor-panel + .pcoms-ors__editor-panel{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--pcoms-rule);
}
.pcoms-ors--editor .pcoms-ors__title{margin:0 0 12px;font:600 13px var(--pcoms-font-display);color:var(--pcoms-ink)}
.pcoms-ors--editor .pcoms-ors__row{margin:0 0 14px}
.pcoms-ors--editor .pcoms-ors__label{margin:0 0 6px;font:600 11px var(--pcoms-font-display);color:var(--pcoms-ink);text-align:center}
.pcoms-ors--editor .pcoms-ors__track{display:flex;align-items:center;gap:6px}
.pcoms-ors--editor .pcoms-ors__line{position:relative;flex:1;display:block;height:11px}
.pcoms-ors--editor .pcoms-ors__line::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--pcoms-ink-soft)}
.pcoms-ors--editor .pcoms-ors__line::after{content:"";position:absolute;left:0;right:0;top:1px;height:9px;border-left:1px solid var(--pcoms-ink-soft);border-right:1px solid var(--pcoms-ink-soft)}
.pcoms-ors--editor .pcoms-ors__mark{
  position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--pcoms-navy);transform:translate(-50%,-50%);
  left:calc(var(--pcoms-ors-from) + (var(--pcoms-ors-to) - var(--pcoms-ors-from)) * var(--pcoms-ors-p));
}

@media (prefers-reduced-motion:reduce){
  .pcoms-page .pcoms-ors{--pcoms-ors-p:1!important}
  /* No cross-fade: the first measure simply stays put. */
  .pcoms-page .pcoms-ors__panel{transition:none}
}

/* -------------------------------------------------------------------------
   18b. Interior page intro
   The banner at the top of every interior page: same electric-bright ground
   as the hero, but sized for a page title rather than a display headline.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-page-intro{
  background:var(--pcoms-electric-bright);
  padding:72px var(--pcoms-gutter);
}
.pcoms-page .pcoms-page-intro .pcoms-eyebrow{color:var(--pcoms-on-bright-82)}
/* pretty, not balance: balance narrows each line to even them up, and a word
   that fits the column then no longer fits its line, so it gets split
   mid-word. pretty fills each line instead. */
.pcoms-page .pcoms-h1{
  font:500 64px/1.02 var(--pcoms-font-display);
  letter-spacing:-.02em;
  color:var(--pcoms-navy-deep);
  text-wrap:pretty;
  margin:0 0 20px;
}
/* Every standfirst in the banner, whether or not it kept its class. A
   retyped paragraph loses pcoms-lede, which left it at browser defaults:
   16px, black, full bleed, beside a properly set sibling. */
.pcoms-page .pcoms-page-intro .pcoms-lede,
.pcoms-page .pcoms-page-intro > .wp-block-column > p:not(.pcoms-eyebrow){
  font:400 21px/1.6 var(--pcoms-font-display);
  color:var(--pcoms-on-bright-82);
  max-width:52ch;
  text-wrap:pretty;
  margin:0;
}

/* Stacked sublines: give them air, and step the supporting line down so the
   pair reads as a hierarchy rather than two equal blocks. */
.pcoms-page .pcoms-page-intro > .wp-block-column > p:not(.pcoms-eyebrow) ~ p{
  margin-top:16px;
  font-size:18px;
  color:var(--pcoms-on-bright-82);
}

/* Interior banner carrying the rising-dot chart: copy left, chart right,
   the same arrangement as the home hero. Single hyphens in the class name on
   purpose — a double hyphen gets escaped inside block comments. */
.pcoms-page .pcoms-intro-chart{
  gap:64px;
  align-items:center;
}
.pcoms-page .pcoms-intro-chart > .wp-block-column:first-child{flex-basis:54%!important}
.pcoms-page .pcoms-intro-chart > .wp-block-column:last-child{flex-basis:46%!important}
/* Shorter than the home hero's 440px so an interior banner stays in
   proportion to its shorter copy. The chart scales: its dots are placed as
   percentages and the svg does not preserve its aspect ratio. */
/* The chart fills the column so the note keeps its place at the top, while
   the graph itself is centred in the leftover height. */
.pcoms-page .pcoms-intro-chart > .wp-block-column:last-child{display:flex}
.pcoms-page .pcoms-intro-chart .pcoms-chart{height:auto;flex:1;min-height:360px}
.pcoms-page .pcoms-intro-chart .pcoms-chart__plot{
  top:50%;
  bottom:auto;
  height:360px;
  transform:translateY(-50%);
}

/* -------------------------------------------------------------------------
   18d. Prose sections
   For long-form pages — licence terms, research summaries — where the content
   is running text rather than a designed marketing section.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-prose{
  background:var(--pcoms-paper);
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
}
.pcoms-page .pcoms-prose > .wp-block-column{max-width:78ch}

.pcoms-page .pcoms-prose h2{
  font:500 34px/1.15 var(--pcoms-font-display);
  letter-spacing:-.02em;
  color:var(--pcoms-ink);
  text-wrap:balance;
  margin:0 0 18px;
}
.pcoms-page .pcoms-prose h3{
  font:500 24px/1.2 var(--pcoms-font-display);
  letter-spacing:-.015em;
  color:var(--pcoms-ink);
  margin:34px 0 12px;
}
.pcoms-page .pcoms-prose p:not(.pcoms-phone *){
  font:400 18px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0 0 20px;
}
.pcoms-page .pcoms-prose p:not(.pcoms-phone *):last-child{margin-bottom:0}
/* Extra air above a paragraph that starts a new beat, such as the closing
   Doing the Measures the Right Way link on Evidence: add pcoms-prose-gap.
   Collapses with the 20px above it, so the gap reads as 40px. */
.pcoms-page .pcoms-prose p.pcoms-prose-gap:not(.pcoms-phone *){margin-top:40px}

.pcoms-page .pcoms-prose ul,
.pcoms-page .pcoms-prose ol{
  margin:0 0 20px;
  padding-left:26px;
}
.pcoms-page .pcoms-prose li{
  font:400 18px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0 0 14px;
}
.pcoms-page .pcoms-prose li::marker{color:var(--pcoms-navy)}
/* Bold runs in body copy are the dark brand blue, not near-black. */
.pcoms-page .pcoms-prose strong,
.pcoms-page .pcoms-prose b,
.pcoms-page .pcoms-prose li strong{font-weight:600;color:var(--pcoms-navy-deep)}

.pcoms-page .pcoms-prose a{
  color:var(--pcoms-navy);
  text-decoration:underline;
  text-decoration-color:var(--pcoms-electric);
  text-underline-offset:3px;
}
.pcoms-page .pcoms-prose a:hover,
.pcoms-page .pcoms-prose a:focus{color:var(--pcoms-navy-deep)}

/* The licence clauses read better numbered and a little tighter. */
.pcoms-page .pcoms-prose-terms li{font-size:16px;line-height:1.6;margin-bottom:16px}

/* A prose section carrying a form. */
.pcoms-page .pcoms-prose .nf-form-cont{margin-top:24px}

/* A section with the phone alongside its content. Barry asked for the phone
   "next to the text like the other pages", so instead of sitting at the foot of
   the page it becomes a second column: content left, phone held to its own
   width at the top right. Used by the prose section on Evidence, the bios on
   About and the books on Books, so the behaviour is declared once.

   Keyed to the phone actually being there, like the quote band's portrait rule
   — sizing the column by position would strand the content at 296px if the
   phone were ever deleted. */
/* Qualified with .pcoms-section-wrap to clear the blanket
   `.pcoms-page .pcoms-section-wrap.wp-block-columns{gap:0}` above, which is
   three classes and would otherwise win. align-items needs !important because
   core ships `.wp-block-columns{align-items:normal!important}`. */
.pcoms-page .pcoms-section-wrap.pcoms-aside-phone{
  gap:56px;
  align-items:flex-start!important;
}
/* flex-shrink too: a basis alone still lets core's flexible columns squeeze the
   phone below its own 296px, which is what happened first time round. */
.pcoms-page .pcoms-aside-phone > .wp-block-column:has(.pcoms-phone){
  flex:0 0 auto!important;
}
.pcoms-page .pcoms-aside-phone .pcoms-phone.wp-block-columns{margin:0}
/* The prose column is normally capped at a readable measure; beside the phone
   the column itself is already narrowed, so the cap would double up. */
.pcoms-page .pcoms-prose.pcoms-aside-phone > .wp-block-column:not(:has(.pcoms-phone)){
  max-width:none;
}

/* -------------------------------------------------------------------------
   18e. Client logo wall
   Logos keep their own brand colours, so the row is held together by even
   optical sizing and generous gaps rather than by a colour treatment.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-logos{
  background:var(--pcoms-paper);
  border-top:1px solid var(--pcoms-rule);
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
}
.pcoms-page .pcoms-logos__heading{margin:0 0 6px}
.pcoms-page .pcoms-logos__note{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  margin:0 0 34px;
  max-width:60ch;
}

.pcoms-page .pcoms-logos__grid.wp-block-gallery{
  --pcoms-logo-cols:3;
  --pcoms-logo-gap:56px;
  --pcoms-logo-scale:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* an incomplete last row centres rather than hugging the left */
  gap:34px var(--pcoms-logo-gap);
  margin:0;
}
.pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image{
  margin:0;
  width:auto!important;
  flex:0 0 calc((100% - (var(--pcoms-logo-cols) - 1) * var(--pcoms-logo-gap)) / var(--pcoms-logo-cols))!important;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:76px;
}
.pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image img{
  max-height:60px;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
/* Optical sizing: a square mark set to the same height as a long wordmark
   reads far smaller than it is, so square logos get a taller cap. Add
   pcoms-logo-square to any other boxy logo — this used to hardcode an
   attachment ID, which was the only one in the stylesheet. */
/* Qualified to match the general logo rule above, which is
   `.pcoms-logos__grid.wp-block-gallery figure.wp-block-image img` — four
   classes. The previous version of this override (and the attachment-ID one
   before it) was three, so it never actually fired and every logo sat at 60px. */
.pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image.pcoms-logo-square img,
.pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image img.pcoms-logo-square{max-height:96px}

/* An SVG logo has no intrinsic pixel size, so height:auto can collapse it or
   fall back to the 300x150 default. Give it the row height and let the viewBox
   work out the width. */
.pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image img[src$=".svg"]{
  height:60px;
  width:auto;
}

/* Optical sizing by shape. Equal heights make long wordmarks look tiny and
   compact ones look heavy; equal widths do the reverse. Each logo gets a height
   from h = 100 * aspect^-0.4 — equal visual area, damped so neither extreme
   runs away. Pick the class nearest the logo's width:height ratio:
     pcoms-logo-h42  ~9:1   pcoms-logo-h46  ~7:1   pcoms-logo-h52  ~5:1
     pcoms-logo-h58  ~4:1   pcoms-logo-h66  ~3:1   pcoms-logo-square  1:1 */
.pcoms-page .pcoms-logos__grid .pcoms-logo-h42{--pcoms-logo-h:42px}
.pcoms-page .pcoms-logos__grid .pcoms-logo-h46{--pcoms-logo-h:46px}
.pcoms-page .pcoms-logos__grid .pcoms-logo-h52{--pcoms-logo-h:52px}
.pcoms-page .pcoms-logos__grid .pcoms-logo-h58{--pcoms-logo-h:58px}
.pcoms-page .pcoms-logos__grid .pcoms-logo-h66{--pcoms-logo-h:66px}
.pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image[class*="pcoms-logo-h"] img{
  height:calc(var(--pcoms-logo-h) * var(--pcoms-logo-scale));
  max-height:none;
  width:auto;
}


/* The mark-on-a-line runs the full width of the contact column rather than
   the 230px it uses as a standalone motif. */
.pcoms-page .pcoms-contact .pcoms-motif-mark{max-width:none}

/* -------------------------------------------------------------------------
   18f. Team
   Two people, same column. The portrait is cropped to a circle at a fixed
   size so a headshot supplied at any aspect ratio still sits on the grid.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-team{
  background:var(--pcoms-white);
  border-top:1px solid var(--pcoms-rule);
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
}
.pcoms-page .pcoms-team__heading{margin:0 0 6px}
.pcoms-page .pcoms-team__note{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  margin:0 0 40px;
  max-width:60ch;
}

.pcoms-page .pcoms-team__grid.wp-block-columns{gap:56px;margin:0}
.pcoms-page .pcoms-team__grid > .wp-block-column{margin:0}

.pcoms-page .pcoms-team__portrait.wp-block-image{margin:0 0 22px}
.pcoms-page .pcoms-team__portrait img{
  display:block;
  width:168px;
  height:168px;
  border-radius:50%;
  object-fit:cover;
  background:var(--pcoms-paper);
}
.pcoms-page .pcoms-team__name{
  font:500 26px/1.18 var(--pcoms-font-display);
  letter-spacing:-.015em;
  color:var(--pcoms-ink);
  text-wrap:balance;
  margin:0 0 4px;
}
.pcoms-page .pcoms-team__role{
  font:700 19px var(--pcoms-font-hand);
  color:var(--pcoms-navy);
  margin:0 0 18px;
}
.pcoms-page .pcoms-team__bio{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0 0 16px;
}
.pcoms-page .pcoms-team__bio:last-child{margin-bottom:0}

/* -------------------------------------------------------------------------
   18g. Books
   Both titles get the same card. The columns are flex so the two cards match
   height, and the buy link is pushed to the foot of each so they line up
   however much description sits above them.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-books{
  background:var(--pcoms-paper);
  border-top:1px solid var(--pcoms-rule);
  padding:var(--pcoms-section-y) var(--pcoms-gutter);
}
.pcoms-page .pcoms-books__heading{margin:0 0 6px}
.pcoms-page .pcoms-books__note{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  margin:0 0 40px;
  max-width:60ch;
}

.pcoms-page .pcoms-books__grid.wp-block-columns{gap:40px;margin:0}
.pcoms-page .pcoms-books__grid > .wp-block-column{
  display:flex;
  flex-direction:column;
  margin:0;
  background:var(--pcoms-white);
  border:1px solid var(--pcoms-rule);
  padding:34px;
}

.pcoms-page .pcoms-book__cover.wp-block-image{margin:0 0 26px}
.pcoms-page .pcoms-book__cover img{
  display:block;
  width:auto;
  max-width:168px;
  height:auto;
  box-shadow:0 10px 28px rgba(15,42,77,.18);
}
.pcoms-page .pcoms-book__title{
  font:500 26px/1.18 var(--pcoms-font-display);
  letter-spacing:-.015em;
  color:var(--pcoms-ink);
  text-wrap:balance;
  margin:0 0 6px;
}
.pcoms-page .pcoms-book__subtitle{
  font:400 17px/1.45 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0 0 14px;
}
.pcoms-page .pcoms-book__meta{
  font:700 17px var(--pcoms-font-hand);
  color:var(--pcoms-navy);
  margin:0 0 20px;
}
.pcoms-page .pcoms-book__body{
  font:400 17px/1.62 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  margin:0 0 24px;
}
/* Keeps an ISBN from breaking across lines at its own hyphens. */
.pcoms-page .pcoms-nowrap{white-space:nowrap}

/* auto top margin pins the link to the foot of the card */
.pcoms-page .pcoms-book__link{margin:auto 0 0}

/* -------------------------------------------------------------------------
   18i. Licence gate
   The acknowledgement and the download it unlocks, directly under the licence.
   The button is styled as disabled until the box is ticked; pcoms.js does the
   toggling, and with JS off it simply stays usable.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-gate{
  margin:30px 0 0;
  padding:26px 28px;
  background:var(--pcoms-white);
  border:1px solid var(--pcoms-rule);
}
.pcoms-page .pcoms-gate__check{
  display:flex;
  align-items:flex-start;
  gap:13px;
}
.pcoms-page .pcoms-gate__input{
  flex:0 0 auto;
  width:19px;height:19px;
  margin:2px 0 0;
  accent-color:var(--pcoms-navy);
}
.pcoms-page .pcoms-gate__label{
  font:400 16px/1.6 var(--pcoms-font-display);
  color:var(--pcoms-ink-soft);
  text-wrap:pretty;
  cursor:pointer;
}

/* The action button sits right, like every other submit on the site.
   Qualified with `p` because the gate lives inside a .pcoms-prose section,
   whose `.pcoms-prose p` rule is one specificity point higher than a bare
   class and would otherwise zero out the top margin. */
.pcoms-page .pcoms-gate p.pcoms-gate__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:18px;
  margin:34px 0 0;
}
/* The note follows the button in the DOM so screen readers reach the action
   first; `order` puts it to the button's left so the button stays rightmost. */
.pcoms-page .pcoms-gate__note{order:-1}
/* Qualified with the anchor because the gate lives inside a .pcoms-prose
   section, and that section's link rule would otherwise outrank this one and
   paint the button as an underlined text link. */
.pcoms-page .pcoms-gate a.pcoms-gate__button{
  display:inline-block;
  text-decoration:none;
  font:600 16px var(--pcoms-font-display);
  border-radius:var(--pcoms-radius-pill);
  padding:15px 30px;
  background:var(--pcoms-navy-deep);
  color:var(--pcoms-paper);
  text-decoration:none;
  transition:background .2s ease,opacity .2s ease;
}
.pcoms-page .pcoms-gate a.pcoms-gate__button:hover,
.pcoms-page .pcoms-gate a.pcoms-gate__button:focus{
  background:var(--pcoms-navy);
  color:var(--pcoms-paper);
  text-decoration:none;
}

/* Locked state, applied by pcoms.js only once it is running. */
.pcoms-page .pcoms-gate.is-locked a.pcoms-gate__button{
  background:var(--pcoms-rule);
  color:var(--pcoms-on-bright-55);
  pointer-events:none;
}
.pcoms-page .pcoms-gate__note{
  font:700 17px var(--pcoms-font-hand);
  color:var(--pcoms-ink-soft);
}
.pcoms-page .pcoms-gate:not(.is-locked) .pcoms-gate__note{display:none}

/* Editor preview. */
.pcoms-gate--editor{margin:24px 0 0;padding:24px;background:#fff;border:1px solid var(--pcoms-rule,#D5E0EC)}
.pcoms-gate--editor .pcoms-gate__check{display:flex;align-items:flex-start;gap:13px}
.pcoms-gate--editor .pcoms-gate__input{flex:0 0 auto;width:19px;height:19px;margin:2px 0 0;border:1px solid #7a8798;border-radius:3px;display:block}
.pcoms-gate--editor .pcoms-gate__button{display:inline-block;padding:13px 26px;border-radius:99px;background:#0F2A4D;color:#F5F7FB;font-weight:600}

/* -------------------------------------------------------------------------
   18j. Globe
   The world's coastlines on an orthographic sphere, centred on the Atlantic
   so the Americas and Europe/Africa are both in view. Static: the earlier
   turning wireframe read as clip art, and a still globe sits quietly beside
   the quote instead of competing with it.

   The coastline path is projected in the block's render.php from Natural
   Earth 110m land data (public domain). Colours are set here so the globe
   follows the palette rather than baking it in.
   ------------------------------------------------------------------------- */

.pcoms-page .pcoms-globe{width:188px;margin:0}
.pcoms-page .pcoms-globe__svg{display:block;width:100%;height:auto}

.pcoms-page .pcoms-globe__land{
  fill:var(--pcoms-navy-deep);
  fill-opacity:.55;
  fill-rule:evenodd;
}
.pcoms-page .pcoms-globe__rim{
  fill:none;
  stroke:var(--pcoms-navy-deep);
  stroke-width:2.5;
}

/* Editor preview. */
.pcoms-globe--editor{width:188px}
.pcoms-globe--editor .pcoms-globe__svg{display:block;width:100%;height:auto}
.pcoms-globe--editor .pcoms-globe__land{fill:#0F2A4D;fill-opacity:.55;fill-rule:evenodd}
.pcoms-globe--editor .pcoms-globe__rim{fill:none;stroke:#0F2A4D;stroke-width:2.5}

/* -------------------------------------------------------------------------
   18h. Logo motion
   The logo already is the design: a 10cm item line with a client's mark on
   it. So the motion is the mark being made — the rule draws, the stem rises,
   the dot lands — and then a slow halo pulse, the reading being taken again.

   The one-shot draw runs on load; the pulse continues. Both are pure CSS, so
   with JS off the logo still animates, and under prefers-reduced-motion the
   whole thing resolves instantly to the finished mark.
   ------------------------------------------------------------------------- */

/* pathLength="100" on every line means one dasharray suits them all. */
.pcoms-logo__svg .pcoms-logo__rule line{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:pcoms-logo-draw .85s cubic-bezier(.22,.61,.36,1) forwards;
}
.pcoms-logo__svg .pcoms-logo__stem{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:pcoms-logo-draw .45s cubic-bezier(.22,.61,.36,1) .62s forwards;
}
.pcoms-logo__svg .pcoms-logo__dot{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  animation:pcoms-logo-land .5s cubic-bezier(.34,1.56,.64,1) .96s forwards;
}
.pcoms-logo__svg .pcoms-logo__halo{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:pcoms-logo-pulse 3.6s ease-out 1.5s infinite;
}

@keyframes pcoms-logo-draw{
  to{stroke-dashoffset:0}
}
@keyframes pcoms-logo-land{
  from{transform:scale(0)}
  to{transform:scale(1)}
}
/* One ping per cycle, then a long rest — ambient, not a beacon. */
@keyframes pcoms-logo-pulse{
  0%   {transform:scale(.62);opacity:0}
  12%  {opacity:.55}
  38%  {transform:scale(1.28);opacity:0}
  100% {transform:scale(1.28);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .pcoms-logo__svg .pcoms-logo__rule line,
  .pcoms-logo__svg .pcoms-logo__stem{stroke-dashoffset:0;animation:none}
  .pcoms-logo__svg .pcoms-logo__dot{transform:none;animation:none}
  .pcoms-logo__svg .pcoms-logo__halo{opacity:.4;animation:none}
}

/* -------------------------------------------------------------------------
   18k. Cookie notice
   A bar along the foot of the viewport, in the footer's navy so it reads as
   site furniture rather than an alert. The OK button sits right, as every
   completing action on the site does. Not a modal: it doesn't trap focus or
   block the page.
   ------------------------------------------------------------------------- */

.pcoms-cookie{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px var(--pcoms-gutter);
  background:var(--pcoms-navy-deep);
  color:var(--pcoms-paper);
  box-shadow:0 -12px 32px -18px rgba(15,42,77,.55);
  animation:pcoms-cookie-in .35s ease-out both;
}
.pcoms-cookie[hidden]{display:none}
.pcoms-cookie__text{
  margin:0;
  max-width:78ch;
  font:400 15px/1.55 var(--pcoms-font-display);
  color:var(--pcoms-paper);
}
.pcoms-cookie__text a{color:var(--pcoms-electric-bright);text-decoration:underline;text-underline-offset:3px}
.pcoms-cookie__text a:hover,
.pcoms-cookie__text a:focus{color:var(--pcoms-white)}
.pcoms-cookie__ok{
  flex:0 0 auto;
  font:600 15px var(--pcoms-font-display);
  padding:11px 26px;
  border:0;
  border-radius:var(--pcoms-radius-pill);
  background:var(--pcoms-electric);
  color:var(--pcoms-navy-deep);
  cursor:pointer;
}
.pcoms-cookie__ok:hover,
.pcoms-cookie__ok:focus-visible{background:var(--pcoms-electric-bright)}
.pcoms-cookie__ok:focus-visible{outline:2px solid var(--pcoms-white);outline-offset:3px}

@keyframes pcoms-cookie-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.pcoms-cookie{animation:none}}

/* -------------------------------------------------------------------------
   19. In-page anchors
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

.pcoms-page [id]{scroll-margin-top:24px}

/* -------------------------------------------------------------------------
   20. Wide monitors
   The design is drawn at 1440px. Past that the backgrounds still run edge to
   edge, but the content stops stretching: the side padding grows to keep the
   measure at the designed 1248px.
   ------------------------------------------------------------------------- */

@media (min-width:1441px){
  .pcoms-header,
  .pcoms-footer,
  .pcoms-page .pcoms-hero,
  .pcoms-page .pcoms-page-intro,
  .pcoms-page .pcoms-callout,
  .pcoms-page .pcoms-prose,
  .pcoms-page .pcoms-logos,
  .pcoms-page .pcoms-team,
  .pcoms-page .pcoms-books,
  .pcoms-page .pcoms-licensing-intro,
  .pcoms-page .pcoms-how,
  .pcoms-page .pcoms-feedback,
  .pcoms-page .pcoms-quote,
  .pcoms-page .pcoms-evidence,
  .pcoms-page .pcoms-contact{
    padding-inline:calc((100% - var(--pcoms-max)) / 2 + var(--pcoms-gutter));
  }

  /* The licensing row carries its gutters on the two columns, so only the
     overshoot beyond the design width is added here. */
  .pcoms-page .pcoms-licensing{
    padding-inline:calc((100% - var(--pcoms-max)) / 2);
  }
}

/* -------------------------------------------------------------------------
   Responsive overrides live last on purpose: they have the same specificity
   as the base rules they narrow, so they only win by coming after them.
   Add new sections ABOVE this line.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   21. Tablet — the licensing split and three-up need an earlier step
   ------------------------------------------------------------------------- */

@media (max-width:1100px){
  /* Tablet: the phone steps down once so the text beside it keeps a measure. */
  .pcoms-page .pcoms-phone{zoom:1.15}

  :root{--pcoms-gutter:56px}

  .pcoms-page .pcoms-hero__title{font-size:76px}
  .pcoms-page .pcoms-h1{font-size:48px}
  .pcoms-page .pcoms-evidence__heading{font-size:34px;text-wrap:pretty}

  .pcoms-page .pcoms-licensing > .wp-block-column:first-child,
  .pcoms-page .pcoms-licensing > .wp-block-column:last-child{
    flex-basis:100%!important;
    border-right:0;
    padding:var(--pcoms-section-y) var(--pcoms-gutter);
  }
  .pcoms-page .pcoms-licensing{flex-wrap:wrap}
  .pcoms-page .pcoms-licensing > .wp-block-column:last-child{padding-top:0}

  .pcoms-page .pcoms-feedback{gap:48px}

  /* Two bios or two book cards side by side get too narrow to read here. */
  .pcoms-page .pcoms-team__grid.wp-block-columns,
  .pcoms-page .pcoms-books__grid.wp-block-columns{flex-wrap:wrap;gap:40px}
  .pcoms-page .pcoms-team__grid > .wp-block-column,
  .pcoms-page .pcoms-books__grid > .wp-block-column{flex-basis:100%!important}
}

/* -------------------------------------------------------------------------
   22. Mobile — the 390px frame
   ------------------------------------------------------------------------- */

@media (max-width:782px){
  :root{--pcoms-gutter:24px}

  /* Header: logo left, toggle right, and the menu drops onto its own row.
     flex-wrap is what lets the nav's 100% basis actually break to a new line
     instead of being squeezed into the logo's row. */
  .pcoms-header{
    padding:16px var(--pcoms-gutter);
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
  }
  .pcoms-header .pcoms-logo{flex:0 0 auto}
  .pcoms-header .pcoms-logo__svg{height:38px}

  .pcoms-nav-toggle{
    display:flex;
    margin-left:auto;
    /* Padding makes the tap target ~40px without moving the bars. */
    padding:12px 8px;
    margin-right:-8px;
  }
  .pcoms-nav-toggle__bar{transition:transform .25s ease,opacity .2s ease}
  /* Two bars become a cross while the menu is open. */
  .pcoms-nav-toggle[aria-expanded="true"] .pcoms-nav-toggle__bar:first-child{
    transform:translateY(3.25px) rotate(45deg);
  }
  .pcoms-nav-toggle[aria-expanded="true"] .pcoms-nav-toggle__bar:last-child{
    transform:translateY(-3.25px) rotate(-45deg);
  }

  .pcoms-nav{
    flex:0 0 100%;
    order:3;
    display:none;
  }
  .pcoms-nav.is-open{display:block}

  .pcoms-nav__list{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    margin-top:14px;
    border-top:1px solid var(--pcoms-on-navy-16);
  }
  .pcoms-nav__list li{width:100%}
  .pcoms-nav__list a{
    display:block;
    padding:15px 0;
    font-size:17px;
  }
  .pcoms-nav__list li + li a{border-top:1px solid rgba(245,247,251,.10)}

  /* The Contact pill stays a pill, sitting below the list as the one action. */
  .pcoms-nav__list .pcoms-nav-contact{margin:16px 0 4px}
  .pcoms-nav__list .pcoms-nav-contact a{
    padding:14px 22px;
    text-align:center;
    font-size:15px;
    border-top:0;
  }

  /* Hero */
  .pcoms-page .pcoms-hero{
    padding:44px var(--pcoms-gutter) 48px;
    gap:28px;
  }
  .pcoms-page .pcoms-hero > .wp-block-column:first-child,
  .pcoms-page .pcoms-hero > .wp-block-column:last-child{flex-basis:100%!important}
  .pcoms-page .pcoms-hero__title{font:500 46px/.86 var(--pcoms-font-display);margin:0 0 24px}
  .pcoms-page .pcoms-hero__standfirst{font-size:18px;margin:0 0 28px}
  .pcoms-page .pcoms-hero__buttons{flex-direction:column;align-items:stretch;gap:11px}
  .pcoms-page .pcoms-hero__buttons .wp-block-button{width:100%}
  .pcoms-page .pcoms-hero__buttons .wp-block-button__link{display:block;width:100%;text-align:center}
  /* "Get started" leads on mobile. */
  .pcoms-page .pcoms-hero__buttons .wp-block-button:last-child{order:-1}

  /* Chart */
  .pcoms-chart{height:92px}
  .pcoms-chart__note{display:none}
  .pcoms-chart__dot{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:var(--pcoms-ramp-2)}
  .pcoms-chart__halo{width:28px;height:28px;margin:-14px 0 0 -14px}
  .pcoms-chart__halo-ring{inset:6px}
  .pcoms-chart__halo-core{width:17px;height:17px;margin:-8.5px 0 0 -8.5px}

  /* Callout */
  .pcoms-page .pcoms-callout{text-align:left;padding:30px var(--pcoms-gutter)}
  .pcoms-page .pcoms-callout p{font-size:21px;line-height:1.45}

  /* Interior banner chart stacks under the copy. The height needs the same
     specificity as the desktop rule, or that one keeps winning. */
  .pcoms-page .pcoms-intro-chart > .wp-block-column:last-child{display:block}
  .pcoms-page .pcoms-intro-chart .pcoms-chart{height:92px;flex:none;min-height:0}
  .pcoms-page .pcoms-intro-chart .pcoms-chart__plot{top:0;bottom:0;height:auto;transform:none}
  .pcoms-page .pcoms-intro-chart{gap:22px}
  .pcoms-page .pcoms-intro-chart > .wp-block-column:first-child,
  .pcoms-page .pcoms-intro-chart > .wp-block-column:last-child{flex-basis:100%!important}

  /* Interior page intro */
  .pcoms-page .pcoms-page-intro{padding:44px var(--pcoms-gutter)}
  .pcoms-page .pcoms-h1{font-size:38px;line-height:1.05;margin-bottom:16px}
  .pcoms-page .pcoms-page-intro .pcoms-lede,
  .pcoms-page .pcoms-page-intro > .wp-block-column > p:not(.pcoms-eyebrow){font-size:17px}
  .pcoms-page .pcoms-page-intro > .wp-block-column > p:not(.pcoms-eyebrow) ~ p{font-size:16px;margin-top:12px}

  /* Logo wall */
  .pcoms-page .pcoms-logos__grid.wp-block-gallery{--pcoms-logo-cols:2;--pcoms-logo-gap:24px;--pcoms-logo-scale:.72;row-gap:26px}
  .pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image{min-height:60px}
  .pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image img{max-height:46px}
  /* Keeps the descendant selector the desktop rule has; the old mobile copy
     dropped it, so a square class on the figure was ignored here. */
  .pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image.pcoms-logo-square img,
  .pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image img.pcoms-logo-square{max-height:74px}
  /* Size-classed logos scale with --pcoms-logo-scale instead; without the
     :not() this rule, coming later at equal specificity, pinned them to 46px. */
  .pcoms-page .pcoms-logos__grid.wp-block-gallery figure.wp-block-image:not([class*="pcoms-logo-h"]) img[src$=".svg"]{height:46px}
  .pcoms-page .pcoms-logos__note{font-size:16px;margin-bottom:26px}

  /* Prose */
  .pcoms-page .pcoms-prose h2{font-size:27px;line-height:1.16}
  .pcoms-page .pcoms-prose h3{font-size:21px}
  .pcoms-page .pcoms-prose p:not(.pcoms-phone *),
  .pcoms-page .pcoms-prose li{font-size:16px}
  .pcoms-page .pcoms-prose-terms li{font-size:15px}

  /* Section type */
  .pcoms-page .pcoms-h2{font-size:30px;line-height:1.12}
  .pcoms-page .pcoms-eyebrow{font-size:17px}
  .pcoms-page .pcoms-body{font-size:16px;line-height:1.6}

  /* Licensing: phone above the cards */
  .pcoms-page .pcoms-licensing-intro{padding:38px var(--pcoms-gutter) 0}
  .pcoms-page .pcoms-licensing > .wp-block-column:last-child{
    /* Bottom padding keeps the phone off the first card's headline; the
       stacked order puts them directly adjacent. */
    order:-1;padding:38px var(--pcoms-gutter) 34px;
  }
  .pcoms-page .pcoms-licensing > .wp-block-column:first-child{
    padding:0 var(--pcoms-gutter) 38px;
    border-bottom:1px solid var(--pcoms-rule);
  }
  /* Same phone, smaller zoom. The old per-mobile widths, heights and label
     sizes are gone — they were what made the mobile phone a different design. */
  .pcoms-page .pcoms-phone{zoom:1;margin:0 auto}
  .pcoms-page .pcoms-phone__image img{height:258px;border-radius:12px}
  .pcoms-page .pcoms-card h2{font-size:27px;line-height:1.16}

  /* How it works: vertical list, dot beside each step, no hairline */
  .pcoms-page .pcoms-how__heading{margin-bottom:30px}
  .pcoms-page .pcoms-steps{gap:26px}
  .pcoms-page .pcoms-steps::before{display:none}
  .pcoms-page .pcoms-step{display:grid;grid-template-columns:13px 1fr;column-gap:18px;align-items:start}
  .pcoms-page .pcoms-step::before{margin:7px 0 0}
  .pcoms-page .pcoms-step h3{grid-column:2;font-size:22px}
  .pcoms-page .pcoms-step p{grid-column:2}
  .pcoms-page .pcoms-step:last-child::before{width:15px;height:15px}

  /* Feedback */
  .pcoms-page .pcoms-feedback{gap:18px}
  .pcoms-page .pcoms-feedback > .wp-block-column:first-child,
  .pcoms-page .pcoms-feedback > .wp-block-column:last-child{flex-basis:100%!important}
  .pcoms-page .pcoms-feedback__list li{font-size:17px;padding-left:25px}
  .pcoms-page .pcoms-feedback__list li + li{margin-top:18px}
  .pcoms-page .pcoms-feedback__list li::before{width:9px;height:9px;top:8px}

  /* Quote */
  .pcoms-page .pcoms-quote{gap:24px}
  .pcoms-page .pcoms-quote > .wp-block-column:has(.pcoms-quote__portrait){flex-basis:118px!important}
  .pcoms-page .pcoms-quote__portrait img{width:118px;height:118px}
  .pcoms-page .pcoms-quote__text{font-size:28px;margin-bottom:18px}
  .pcoms-page .pcoms-quote-long .pcoms-quote__text{font-size:21px}

  /* Evidence */
  .pcoms-page .pcoms-evidence{padding:50px var(--pcoms-gutter)}
  .pcoms-page .pcoms-evidence__heading{font-size:28px;text-wrap:pretty}
  .pcoms-page .pcoms-evidence__body{font-size:16px}

  /* Contact */
  .pcoms-page .pcoms-contact{padding:50px var(--pcoms-gutter) 56px;gap:32px}
  .pcoms-page .pcoms-contact > .wp-block-column:first-child,
  .pcoms-page .pcoms-contact > .wp-block-column:last-child{flex-basis:100%!important}
  .pcoms-page .pcoms-contact__heading{font-size:38px}
  .pcoms-page .pcoms-contact nf-fields-wrap{grid-template-columns:1fr;gap:16px}
  .pcoms-page .pcoms-contact input[type=text],
  .pcoms-page .pcoms-contact input[type=email],
  .pcoms-page .pcoms-contact select{height:50px;font-size:16px}
  .pcoms-page .pcoms-contact textarea{font-size:16px}
  .pcoms-page .pcoms-contact .submit-container{justify-content:stretch}
  .pcoms-page .pcoms-contact .submit-container input{width:100%}

  /* The phone-alongside sections stack, phone centred under the content. */
  .pcoms-page .pcoms-section-wrap.pcoms-aside-phone{gap:32px}
  .pcoms-page .pcoms-aside-phone .pcoms-phone.wp-block-columns{margin:0 auto}

  /* Cookie notice stacks; the button goes full width like the form submits. */
  .pcoms-cookie{flex-direction:column;align-items:stretch;gap:12px;padding:16px var(--pcoms-gutter)}
  .pcoms-cookie__text{font-size:14px}
  .pcoms-cookie__ok{width:100%}

  /* Licence gate — the button goes full width, as the form submits do. */
  .pcoms-page .pcoms-gate{padding:22px}
  .pcoms-page .pcoms-gate p.pcoms-gate__actions{justify-content:stretch;gap:12px;margin-top:26px}
  .pcoms-page .pcoms-gate a.pcoms-gate__button{width:100%;text-align:center}
  .pcoms-page .pcoms-gate__note{width:100%}

  /* Team and books */
  .pcoms-page .pcoms-team__note,
  .pcoms-page .pcoms-books__note{font-size:16px;margin-bottom:28px}
  .pcoms-page .pcoms-team__grid.wp-block-columns,
  .pcoms-page .pcoms-books__grid.wp-block-columns{gap:32px}
  .pcoms-page .pcoms-team__portrait img{width:128px;height:128px}
  .pcoms-page .pcoms-team__name,
  .pcoms-page .pcoms-book__title{font-size:22px}
  .pcoms-page .pcoms-team__bio,
  .pcoms-page .pcoms-book__body,
  .pcoms-page .pcoms-book__subtitle{font-size:16px}
  .pcoms-page .pcoms-books__grid > .wp-block-column{padding:26px}
  .pcoms-page .pcoms-book__cover img{max-width:132px}

  /* Footer */
  .pcoms-footer{padding:38px var(--pcoms-gutter) 32px}
  .pcoms-footer .pcoms-logo__svg{height:28px}
  .pcoms-footer__top{flex-direction:column;gap:32px;padding-bottom:32px}
  .pcoms-footer__menus{grid-template-columns:1fr 1fr;gap:28px}
  .pcoms-footer__fineprint{font-size:13px}
}

/* Very small screens: 296px plus gutters is wider than a 320px phone. This has
   to come after the mobile block, which also sets the zoom. */
@media (max-width:360px){
  .pcoms-page .pcoms-phone{zoom:.9}
}