/* Place AU design system layer, 2026 refresh.
   Loaded last on every page. Normalises type, surfaces, bands and mobile. */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dm-sans-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/dm-sans-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/dm-sans-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dm-mono-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/dm-mono-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --pau-navy:#0F1923;
  --pau-canvas:#070B10;
  --pau-surface:#0F1923;
  --pau-teal:#00C896;
  --pau-teal-lift:#1AF2BE;
  --pau-amber:#F5A623;
  --pau-red:#E0453A;
  --pau-line:#1B2530;
  --pau-line-soft:#141D27;
  --pau-ink:#F2F5F7;
  --pau-mute:#8A99A6;
  --pau-measure:62ch;
  --pau-band-h:300px;
  --font-body:"DM Sans",system-ui,-apple-system,sans-serif;
  --font-display:"DM Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Type normalisation. Two families only across the whole site. */
body,button,input,select,textarea{font-family:var(--font-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.015em}
code,kbd,pre,samp{font-family:var(--font-mono)}

/* Readability. Long measures are a large part of the templated feel. */
.pau-measure,p.pau-lede{max-width:var(--pau-measure)}

/* ---- Image band ------------------------------------------------------ */
.pau-band{
  position:relative;
  margin:0;
  line-height:0;
  background:var(--pau-canvas);
  border-top:1px solid var(--pau-line);
  border-bottom:1px solid var(--pau-line);
}
.pau-band img{
  display:block;
  width:100%;
  height:var(--pau-band-h);
  object-fit:cover;
  filter:brightness(.86) contrast(1.04);
}
.pau-band figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:56px 32px 18px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.07em;
  color:#B9C6CF;
  background:linear-gradient(180deg,rgba(7,11,16,0) 0%,rgba(7,11,16,.92) 76%);
}
.pau-band figcaption b{color:var(--pau-teal);font-weight:500}
.pau-band figcaption .pau-flag{color:var(--pau-amber);font-weight:500}

/* Geometry hairlines drawn over the band. Ties photography to the data. */
.pau-band .pau-geo{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.18;
}

/* ---- Stat strip under a band ---------------------------------------- */
.pau-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--pau-line);
  border-bottom:1px solid var(--pau-line);
}
.pau-stats > div{background:var(--pau-canvas);padding:22px 24px}
.pau-stats .pau-v{
  font-family:var(--font-mono);
  font-size:clamp(20px,2.4vw,26px);
  color:var(--pau-ink);
  letter-spacing:-.01em;
}
.pau-stats .pau-flag .pau-v,.pau-stats .pau-v.pau-flag{color:var(--pau-amber)}
.pau-stats .pau-k{font-size:12.5px;color:var(--pau-mute);margin-top:5px;line-height:1.45}

/* ---- Resources page -------------------------------------------------- */
.pau-res-wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.pau-res-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin:28px 0 0;
}
.pau-res-card{
  display:block;
  background:var(--pau-surface);
  border:1px solid var(--pau-line);
  border-radius:12px;
  padding:22px 20px 24px;
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
.pau-res-card:hover,.pau-res-card:focus-visible{
  border-color:var(--pau-teal);
  transform:translateY(-2px);
}
.pau-res-kind{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pau-teal);
}
.pau-res-card h3{font-size:15.5px;font-weight:500;margin:11px 0 8px;line-height:1.35;color:var(--pau-ink)}
.pau-res-card p{font-size:13.5px;color:var(--pau-mute);margin:0;line-height:1.6}
.pau-res-sec{padding:56px 0 8px}
.pau-res-sec h2{font-size:clamp(22px,3vw,28px);font-weight:500;margin:12px 0 8px;color:var(--pau-ink)}
.pau-res-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pau-teal);margin:0;
}
.pau-res-sub{color:var(--pau-mute);font-size:15px;margin:0;max-width:var(--pau-measure)}

/* ---- Accessibility floor -------------------------------------------- */
a:focus-visible,button:focus-visible,.pau-res-card:focus-visible{
  outline:2px solid var(--pau-teal-lift);
  outline-offset:2px;
}
.pau-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width:900px){
  :root{--pau-band-h:220px}
  .pau-band figcaption{padding:44px 20px 14px;font-size:10px;letter-spacing:.05em}
  .pau-stats > div{padding:18px 20px}
  .pau-res-wrap{padding:0 20px}
}
@media (max-width:560px){
  :root{--pau-band-h:180px}
  .pau-band .pau-geo{opacity:.12}
  .pau-stats{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .pau-res-card{transition:none}
  .pau-res-card:hover{transform:none}
}

/* ---- Wide data tables on small screens -------------------------------
   Report pages carry dense tables that overflow the viewport on phones.
   Constrain the layout and let long cell values wrap rather than push. */
@media (max-width:640px){
  table{
    width:100%;
    max-width:100%;
    table-layout:fixed;
    font-size:11.5px;
  }
  table th,table td{
    word-break:break-word;
    overflow-wrap:anywhere;
    padding-left:6px;
    padding-right:6px;
  }
}

/* Footer nav is a non-wrapping flex row inline-styled on report pages,
   which pushes ~10px past the viewport on a 390px phone. Let it wrap. */
nav[aria-label="Footer"]{flex-wrap:wrap;row-gap:.6rem}

/* Final guard against any remaining small horizontal bleed on phones.
   `clip` is preferred over `hidden` so position:sticky headers keep working. */
@media (max-width:640px){
  body{overflow-x:hidden}
  @supports (overflow-x:clip){ body{overflow-x:clip} }
}

/* ---- Site header ------------------------------------------------------
   The whole header component was authored for the old light theme: white
   panel, navy burger icon, navy CTA, pale hover states. On a dark page the
   burger was invisible except when hovered, the mobile panel opened white,
   and the current page link rendered near black. All of it moves to dark. */
.pv4hdr-site-header{
  background:rgba(10,15,21,.88);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--pau-line);
}
.pv4hdr-brand{color:var(--pau-ink)}

.pv4hdr-nav-link{color:#AEBCC7}
.pv4hdr-nav-link:hover{color:var(--pau-ink);background:rgba(255,255,255,.06)}
.pv4hdr-nav-link[aria-current="page"],
.pv4hdr-nav-link.is-active,
.pv4hdr-nav-link.pv4hdr-nav-current{color:var(--pau-teal);background:none}

.pv4hdr-nav-cta{
  background:var(--pau-teal);
  color:#06231A;
  border:1px solid var(--pau-teal);
  font-weight:600;
}
.pv4hdr-nav-cta:hover,.pv4hdr-nav-cta:focus-visible{
  background:var(--pau-teal-lift);
  border-color:var(--pau-teal-lift);
  color:#06231A;
}

/* Burger icon inherits currentColor, and was set to navy. */
.pv4hdr-mobile-menu-btn{color:var(--pau-teal-lift)}
.pv4hdr-mobile-menu-btn:hover,
.pv4hdr-mobile-menu-btn:focus-visible{background:rgba(255,255,255,.08)}
.pv4hdr-mobile-menu-btn[aria-expanded="true"]{
  background:rgba(255,255,255,.10);
  color:var(--pau-teal);
}

/* Mobile dropdown panel. Was #fff with a light shadow. */
@media (max-width:900px){
  .pv4hdr-nav-links{
    background:rgba(10,15,21,.98);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--pau-line);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
  }
  .pv4hdr-nav-links .pv4hdr-nav-link{
    border-bottom:1px solid var(--pau-line-soft);
    border-radius:0;
  }
  .pv4hdr-nav-links .pv4hdr-nav-link:last-of-type{border-bottom:none}
}

/* ---- Resources container alignment -----------------------------------
   The wrap carried its own 32px padding inside a 1120px max-width, so its
   content sat 32px right of the site header. Match the header container. */
.pau-res-wrap{max-width:1120px;margin:0 auto;padding:0}
@media (max-width:1200px){ .pau-res-wrap{padding:0 24px} }
@media (max-width:900px){ .pau-res-wrap{padding:0 20px} }

/* ---- Founder portrait -------------------------------------------------
   The pale studio backdrop reads as a white block, and a full width square
   pushed the first line of copy below the fold on a phone. Cap the size,
   bias the crop toward the face and soften the backdrop edge. */
.founder-photo-wrap{
  background:var(--pau-surface);
  border:1px solid var(--pau-line);
  box-shadow:none;
}
.founder-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 32%;
  display:block;
}
@media (max-width:900px){
  /* Constrain the portrait only. Constraining the whole column also squeezed
     the contact card, which should keep the full content width. */
  .founder-photo-wrap{max-width:240px;margin-left:auto;margin-right:auto;margin-bottom:20px}
}
@media (max-width:560px){
  .founder-photo-wrap{max-width:190px}
}

/* ---- Cross page surface consistency ----------------------------------
   DCI and Business Match were authored before the shared tokens existed.
   Normalise surface, border and radius only. No layout or script changes. */
.dci-card,.dci-panel,.dci-section-card,
.bm-card,.bm-panel,.bm-result-card,.bm-sidebar,
.pv4dci-card,.pv4businessmatch-card{
  background:var(--pau-surface);
  border:1px solid var(--pau-line);
  border-radius:12px;
}
.dci-card h3,.bm-card h3,.pv4dci-card h3{font-family:var(--font-display)}

/* ---- Homepage news cards ---------------------------------------------
   These were non-clickable divs, and one advertised an item that no longer
   exists. They are anchors now, so they need link resets and a hover state. */
a.pv4home-news-card{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
a.pv4home-news-card:hover,a.pv4home-news-card:focus-visible{
  border-color:var(--pau-teal);
  transform:translateY(-2px);
}
a.pv4home-news-card:hover h3{color:var(--pau-teal-lift)}
@media (prefers-reduced-motion:reduce){
  a.pv4home-news-card{transition:none}
  a.pv4home-news-card:hover{transform:none}
}

/* ---- Methodology block -----------------------------------------------
   Replaces four near identical four step flows. The shared principle is
   stated once per page, the product specific detail sits in the list, and
   the canonical method note lives on Resources. */
.pau-meth{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
  margin-top:26px;
}
.pau-meth-list{margin:0;display:grid;gap:1px;background:var(--pau-line);
  border:1px solid var(--pau-line);border-radius:12px;overflow:hidden}
.pau-meth-row{background:var(--pau-canvas);padding:15px 18px;
  display:grid;grid-template-columns:minmax(96px,26%) 1fr;gap:14px;align-items:baseline}
.pau-meth-row dt{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pau-teal);margin:0;
}
.pau-meth-row dd{margin:0;font-size:13.5px;line-height:1.55;color:#C2CDD6}
.pau-meth-doc{
  display:block;text-decoration:none;background:var(--pau-surface);
  border:1px solid var(--pau-line);border-radius:12px;padding:18px 18px 20px;
  transition:border-color .18s ease,transform .18s ease;
}
.pau-meth-doc:hover,.pau-meth-doc:focus-visible{
  border-color:var(--pau-teal);transform:translateY(-2px);
}
.pau-meth-doc-kind{
  display:block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pau-teal);
}
.pau-meth-doc-title{
  display:block;margin-top:9px;font-size:14.5px;font-weight:500;
  line-height:1.4;color:var(--pau-ink);
}
@media (max-width:860px){
  .pau-meth{grid-template-columns:1fr}
  .pau-meth-row{grid-template-columns:1fr;gap:5px}
}
@media (prefers-reduced-motion:reduce){
  .pau-meth-doc{transition:none}
  .pau-meth-doc:hover{transform:none}
}


/* ---- Simple hero, the Business Match and Resources pattern -------------
   Eyebrow, heading, one short paragraph, one pair of actions. Then the
   image. Then everything else. No stat rows competing with the lede and no
   second column repeating the same buttons. */
.pau-hero-simple{
  display:block !important;
  max-width:1120px;
  margin:0 auto;
}
.pau-hero-simple > div:first-child{max-width:none}
.pau-hero-simple p{max-width:var(--pau-measure)}

/* DCI detail, moved below the image band. */
.pau-dci-detail{padding:44px 0 8px}
.pau-dci-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
}
@media (max-width:900px){
  .pau-dci-detail-grid{grid-template-columns:1fr}
}

/* ---- Button element CTAs ----------------------------------------------
   Some CTAs are <button> and some are <a>. The stylesheets set padding and
   background but never reset the border, so the <button> ones rendered with
   the browser default 2px outset bevel over the top of the intended shape. */
button[class*="-btn-primary"],
button[class*="-btn-secondary"],
button[class*="-btn-sample"],
button[class*="-btn-ghost"]{
  border:none;
  -webkit-appearance:none;
  appearance:none;
  font-family:inherit;
  cursor:pointer;
}

/* ---- Shared hero type scale -------------------------------------------
   Measured off the Resources page, which is the reference: 44px heading at
   weight 500 on a 1.12 line height, and a 15px lede on a 62ch measure.
   Index and About were running 72px at weight 700 with a 24px lede, and the
   DCI heading had a 1.65 line height which spread it over three lines. */
.pv4home-hero h1,
.pv4about-hero h1,
.pv4bm-hero h1,
.pv4deliverablecapacityindex-hero h1,
.pv4businessinvestmentreport-hero h1,
.pv4councilperformancebrief-hero h1,
.pv4developmentalignmentbrief-hero h1,
.pv4housingneedsassessment-hero h1{
  font-size:clamp(30px,5vw,44px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.015em;
  max-width:17ch;
  margin-bottom:16px;
}

.pv4home-hero-lede,
.pv4about-hero-lede,
.pv4deliverablecapacityindex-hero-lede,
.pv4businessinvestmentreport-hero-lede,
.pv4councilperformancebrief-hero-lede,
.pv4developmentalignmentbrief-hero-lede,
.pv4housingneedsassessment-hero-lede{
  font-size:15px;
  font-weight:400;
  line-height:1.65;
  max-width:62ch;
}

/* Heroes were padded for the larger type. Close the gap to the image. */
.pv4home-hero,.pv4about-hero,.pv4deliverablecapacityindex-hero{
  padding-bottom:40px;
}

/* Section headings follow the same scale so pages read as one family. */
.pv4home-section-head h2,
.pv4about-section-head h2,
.pv4deliverablecapacityindex-section-head h2,
.pv4businessinvestmentreport-section-head h2,
.pv4councilperformancebrief-section-head h2,
.pv4developmentalignmentbrief-section-head h2,
.pv4housingneedsassessment-section-head h2{
  font-size:clamp(22px,3vw,28px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.01em;
}
.pv4home-section-sub,
.pv4about-section-sub,
.pv4deliverablecapacityindex-section-sub,
.pv4businessinvestmentreport-section-sub,
.pv4councilperformancebrief-section-sub,
.pv4developmentalignmentbrief-section-sub,
.pv4housingneedsassessment-section-sub{
  font-size:15px;
  line-height:1.65;
  max-width:62ch;
}

@media (max-width:640px){
  .pv4home-hero h1,.pv4about-hero h1,.pv4bm-hero h1,
  .pv4deliverablecapacityindex-hero h1,
  .pv4businessinvestmentreport-hero h1,
  .pv4councilperformancebrief-hero h1,
  .pv4developmentalignmentbrief-hero h1,
  .pv4housingneedsassessment-hero h1{max-width:none}
}

/* DCI left column: the calculation, then the stat row beneath it, filling
   the space that was empty next to the subscription card. */
.pau-dci-col{display:flex;flex-direction:column;gap:22px}
.pau-stats-stacked{
  grid-template-columns:repeat(2,1fr);
  border:1px solid var(--pau-line);
  border-radius:12px;
  overflow:hidden;
}
.pau-stats-stacked > div{padding:16px 18px}
.pau-stats-stacked .pau-v{font-size:20px}
@media (max-width:560px){
  .pau-stats-stacked{grid-template-columns:1fr}
}

/* Business Match declares its hero styles in a style block that loads after
   this file, so an equal specificity selector loses. Add one level rather
   than reaching for !important. */
#pv4bm-root .pv4bm-hero h1,
[data-route-view] .pv4bm-hero h1{
  font-size:clamp(30px,5vw,44px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.015em;
  max-width:17ch;
}
#pv4bm-root .pv4bm-hero p,
[data-route-view] .pv4bm-hero p{
  font-size:15px;
  line-height:1.65;
  max-width:62ch;
}