/* ==========================================================================
   PIPER MOSS — 2026 simplified site
   Palette and type per the Piper Moss brand guidelines (2022).
   Colours:  white #ffffff (primary) · green #33554f (accent bands)
             ink #2c3639 (footer) · sage #bdcac2 (detail)
   Type:     Gopher (display) / Gopher Text (body)
   --------------------------------------------------------------------------
   FONTS: the Gopher @font-face rules were removed in v220 (21 Oct 2026):
   the webfont files are not licensed or deployed, so they 404'd on every
   page. The stack falls back to Figtree. To restore, see /fonts/README-FONTS.txt.
   ========================================================================== */

/* Gopher @font-face rules removed in v220 (files not licensed or deployed, they 404'd). Restore from /fonts/README-FONTS.txt. */

:root{
  --ink:#2c3639;
  --green:#33554f;
  --sage:#bdcac2;
  --white:#ffffff;
  --paper:#ffffff;
  /* hairline wash used only for placeholder fills and dividers */
  --wash:#f4f6f5;

  --ink-70:rgba(44,54,57,.70);
  --ink-55:rgba(44,54,57,.55);
  --ink-15:rgba(44,54,57,.15);
  --paper-75:rgba(246,245,241,.75);
  --paper-50:rgba(246,245,241,.50);
  --paper-20:rgba(246,245,241,.20);

  --display:'Gopher','Figtree','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Gopher Text','Gopher','Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Brand guide sets headings ALL CAPS. The reference layouts use sentence
     case for large headings and caps for labels. Flip this to `uppercase`
     to apply caps site-wide. */
  --heading-case:none;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --max:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:16.5px;font-weight:400;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:500;text-transform:var(--heading-case);line-height:1.06;letter-spacing:-.018em;margin:0}
h1{font-size:clamp(2.35rem,5.4vw,4.15rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.85rem)}
h3{font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:-.01em}
h4{font-size:1rem;letter-spacing:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(3.5rem,7.5vw,6.5rem)}

.label{
  font-family:var(--display);text-transform:uppercase;font-size:.7rem;font-weight:500;
  letter-spacing:.2em;color:var(--ink-55);margin:0 0 1.5rem;display:flex;align-items:center;gap:.8rem;
}
.label::before{content:'';width:1.9rem;height:1px;background:currentColor;flex:none}
.label.plain::before{display:none}
.lede{font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;color:var(--ink-70)}
.muted{color:var(--ink-70)}
.small{font-size:.88rem}

.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
.grid{display:grid;gap:clamp(1.5rem,3vw,2.6rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}

.band-green{background:var(--green);color:var(--paper)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-line{border-top:1px solid var(--ink-15)}
.band-wash{background:var(--wash)}
.band-green .label,.band-ink .label{color:var(--paper-50)}
.band-green .muted,.band-ink .muted,.band-green .lede,.band-ink .lede{color:var(--paper-75)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-size:.85rem;font-weight:500;letter-spacing:.01em;
  padding:.95rem 1.6rem;border:1px solid var(--green);background:var(--green);color:var(--paper);
  cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink-15)}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-paper:hover{background:transparent;color:var(--paper)}
.btn-onmedia{background:transparent;border-color:var(--paper-50);color:var(--paper)}
.btn-onmedia:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tlink{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-size:.85rem;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:.2rem;transition:gap .3s var(--ease)}
.tlink:hover{gap:.9rem}

/* ==========================================================================
   NAV
   ========================================================================== */
.pm-nav{position:fixed;inset:0 0 auto 0;z-index:120;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);border-bottom:1px solid transparent}
.pm-nav .row{max-width:var(--max);margin-inline:auto;padding:1.15rem var(--gutter);display:flex;align-items:center;gap:2rem}
.pm-nav.on-media{color:var(--paper)}
.pm-nav.stuck{background:var(--paper);color:var(--ink);border-bottom-color:var(--ink-15)}
.pm-nav.stuck .row{padding-block:.85rem}
.pm-logo{display:flex;align-items:center;flex:none;color:inherit}
.pm-logo img{height:58px;width:auto;display:block}
.pm-menu{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2rem);margin-left:auto}
.pm-menu a{font-family:var(--display);font-size:.9rem;font-weight:400;padding-bottom:.2rem;border-bottom:1px solid transparent;transition:border-color .25s}
.pm-menu a:hover,.pm-menu a[aria-current]{border-bottom-color:currentColor}
.pm-nav .btn{padding:.72rem 1.25rem;font-size:.82rem}
.pm-nav.on-media .btn{background:var(--green);border-color:var(--green);color:var(--paper)}
.pm-nav.on-media .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* color:inherit is load-bearing. The lines are currentColor, and a <button>
   does not inherit color: iOS Safari paints it system blue, Chrome black.
   Inheriting makes it white over the hero (on-media) and ink once stuck. */
.pm-burger{display:none;width:2rem;height:1.15rem;position:relative;border:0;background:none;padding:0;cursor:pointer;margin-left:auto;color:inherit;-webkit-tap-highlight-color:transparent}
/* Open drawer is ink; keep the close X white unless the stuck nav's white band sits behind it. */
body.pm-open .pm-nav:not(.stuck) .pm-burger{color:var(--paper)}
.pm-burger::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.pm-burger span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.pm-burger span:nth-child(1){top:0}.pm-burger span:nth-child(2){top:50%}.pm-burger span:nth-child(3){bottom:0}
body.pm-open .pm-burger span:nth-child(1){transform:translateY(.55rem) rotate(45deg)}
body.pm-open .pm-burger span:nth-child(2){opacity:0}
body.pm-open .pm-burger span:nth-child(3){transform:translateY(-.55rem) rotate(-45deg)}
.pm-drawer{position:fixed;inset:0;z-index:119;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:safe center;gap:.2rem;padding:6rem var(--gutter) 3rem;overflow:hidden auto;overscroll-behavior:contain;transform:translateY(-101%);transition:transform .5s var(--ease)}
body.pm-open .pm-drawer{transform:none}
body.pm-open{overflow:hidden}
.pm-drawer a{font-family:var(--display);font-size:clamp(1.7rem,7vw,2.6rem);padding-block:.45rem;border-bottom:1px solid var(--paper-20)}
.pm-drawer .meta{margin-top:2rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-50)}
/* The number was plain text, so the mobile menu offered no way to call and
   no click-to-call conversion. It is a tel: link now, and has to read as one. */
.pm-drawer .meta a{color:var(--paper);border-bottom:1px solid var(--paper-20);padding-bottom:.15rem}

/* ==========================================================================
   HERO
   ========================================================================== */
.pm-hero{position:relative;min-height:min(92svh,780px);display:flex;align-items:flex-end;color:var(--white);overflow:hidden}
.pm-hero .media{position:absolute;inset:0;background:var(--ink) url('/home-hero-poster.jpg') center/cover no-repeat}
.pm-hero .media video,.pm-hero .media img{width:100%;height:100%;object-fit:cover}
.pm-hero .media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,54,57,.52) 0%,rgba(44,54,57,.20) 42%,rgba(44,54,57,.78) 100%)}
.pm-hero .inner{position:relative;z-index:2;width:100%;padding-block:9rem clamp(2.5rem,6vw,4.5rem)}
.pm-hero h1{max-width:15ch;font-size:clamp(2.35rem,5.4vw,4.15rem)}
.pm-hero .lede{max-width:44ch;margin-top:1.5rem;color:var(--paper-75)}
.pm-hero .acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.pm-hero .label{color:var(--paper-50)}

.pm-pagehead{padding-block:clamp(8rem,14vw,11rem) clamp(2.5rem,5vw,4rem)}
.pm-pagehead.on-media{position:relative;color:var(--paper);overflow:hidden}
.pm-pagehead h1{max-width:16ch}
.pm-pagehead .lede{max-width:50ch;margin-top:1.3rem}

/* ==========================================================================
   PLACEHOLDER BOXES (photography to come)
   ========================================================================== */
.ph{
  position:relative;background:var(--wash);border:1px dashed rgba(51,85,79,.30);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;
  aspect-ratio:3/2;overflow:hidden;
}
.ph span{
  font-family:var(--display);text-transform:uppercase;font-size:.66rem;font-weight:500;
  letter-spacing:.18em;color:var(--ink-55);max-width:26ch;line-height:1.7;
}
.ph::before{content:'';position:absolute;inset:.5rem;border:1px solid rgba(44,54,57,.08);pointer-events:none}
.ph-4x3{aspect-ratio:4/3}
.ph-1x1{aspect-ratio:1/1}
.ph-wide{aspect-ratio:21/9}
.ph-tall{aspect-ratio:3/4}
.band-green .ph,.band-ink .ph{background:rgba(246,245,241,.06);border-color:var(--paper-20)}
.band-green .ph span,.band-ink .ph span{color:var(--paper-50)}
.band-green .ph::before,.band-ink .ph::before{border-color:var(--paper-20)}

/* ==========================================================================
   STATS
   ========================================================================== */
.pm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink-15)}
.pm-stats > div{padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1rem,2vw,1.8rem);border-right:1px solid var(--ink-15)}
.pm-stats > div:last-child{border-right:0}
.pm-stats > div:first-child{padding-left:0}
.pm-stats .n{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;line-height:1;letter-spacing:-.03em}
.pm-stats .n sup{font-size:.42em;font-weight:500;letter-spacing:0;vertical-align:.9em;margin-left:.15em}
.pm-stats .t{font-size:.82rem;line-height:1.5;color:var(--ink-55);margin-top:.75rem}

/* ==========================================================================
   CAPABILITIES ACCORDION
   ========================================================================== */
.pm-acc{border-top:1px solid var(--ink-15)}
.pm-acc details{border-bottom:1px solid var(--ink-15)}
.pm-acc summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:2.5rem 1fr auto;gap:1.5rem;
  align-items:baseline;padding-block:1.5rem;
}
.pm-acc summary::-webkit-details-marker{display:none}
.pm-acc .idx{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;color:var(--ink-55);text-transform:uppercase}
.pm-acc .ttl{font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.45rem);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.pm-acc .sign{font-size:1.35rem;line-height:1;color:var(--ink-55);transition:transform .3s var(--ease)}
.pm-acc details[open] .sign{transform:rotate(45deg)}
.pm-acc .body{padding:0 0 1.9rem;display:grid;grid-template-columns:2.5rem 1fr;gap:1.5rem}
.pm-acc .body > div:last-child{max-width:62ch}
.pm-acc .tags{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pm-acc .tags li{font-family:var(--display);font-size:.72rem;letter-spacing:.04em;padding:.4rem .8rem;border:1px solid var(--ink-15);color:var(--ink-70)}

/* ==========================================================================
   PROCESS / CHECKLIST / CARDS
   ========================================================================== */
.pm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.pm-steps > div{border-top:1px solid var(--ink-15);padding-top:1.2rem}
.pm-steps .k{font-family:var(--display);text-transform:uppercase;font-size:.68rem;letter-spacing:.18em;color:var(--ink-70);margin-bottom:.9rem}
.pm-steps h3{margin-bottom:.6rem}
.pm-steps p{font-size:.92rem;color:var(--ink-70)}

.pm-check{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.pm-check li{display:grid;grid-template-columns:1.35rem 1fr;gap:.75rem;align-items:start;font-size:.95rem;color:var(--ink-70)}
.pm-check li::before{content:'';width:1.35rem;height:1.35rem;border:1px solid var(--green);position:relative;top:.16rem;
  background:linear-gradient(45deg,transparent 44%,var(--green) 44%,var(--green) 56%,transparent 56%),
             linear-gradient(-45deg,transparent 44%,var(--green) 44%,var(--green) 56%,transparent 56%);
  background-size:60% 60%;background-position:center;background-repeat:no-repeat}

.pm-card{display:block;color:inherit}
.pm-card > img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:opacity .35s var(--ease)}
.pm-card{max-width:400px}
.pm-card:hover > img,.pm-card:hover .ph{opacity:.9}
.pm-card .ph{transition:opacity .3s}
/* address in the small label slot, category reads as the heading. original sizes. */
.pm-card .k{font-family:var(--display);text-transform:uppercase;font-size:.68rem;letter-spacing:.18em;color:var(--ink-70);margin:1rem 0 .4rem}
.pm-card h3{font-family:var(--display);text-transform:none;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:.4rem}
.pm-card p{font-size:.86rem;color:var(--ink-70)}

.pm-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,4rem)}
.pm-facts > div{border-top:1px solid var(--ink-15);padding-top:1.1rem}
.pm-facts .k{font-family:var(--display);text-transform:uppercase;font-size:.66rem;letter-spacing:.18em;color:var(--ink-70);margin-bottom:.7rem}
.pm-facts p{font-size:.92rem;color:var(--ink-70)}

/* Symptom -> likely cause pairs. A <dl> because that is exactly what these are,
   term and description, which also reads correctly to crawlers and screen readers. */
.pm-tells{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,2.6rem) clamp(2rem,5vw,4rem);margin:0}
.pm-tells > div{border-top:1px solid var(--ink-15);padding-top:1.1rem}
.pm-tells dt{font-family:var(--display);font-weight:500;font-size:.97rem;
  line-height:1.35;letter-spacing:-.005em;color:var(--ink);margin-bottom:.5rem}
.pm-tells dd{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-70)}
.band-ink .pm-tells > div,.band-green .pm-tells > div{border-top-color:var(--paper-20)}
.band-ink .pm-tells dt,.band-green .pm-tells dt{color:var(--paper)}
.band-ink .pm-tells dd,.band-green .pm-tells dd{color:var(--paper-75)}

/* pm-steps / pm-facts default to ink so they read on the light `wrap` and
   `band-wash` sections, which is where 10 of the 13 instances live. Inside a
   dark band the cream tints come back. Setting the light case as the default
   means a new block dropped into a plain section is legible without opt-in. */
.band-ink .pm-steps > div,.band-green .pm-steps > div,
.band-ink .pm-facts > div,.band-green .pm-facts > div{border-top-color:var(--paper-20)}
.band-ink .pm-steps .k,.band-green .pm-steps .k,
.band-ink .pm-facts .k,.band-green .pm-facts .k{color:var(--paper-75)}
.band-ink .pm-steps p,.band-green .pm-steps p,
.band-ink .pm-facts p,.band-green .pm-facts p{color:var(--paper-75)}

/* ---------- forms ---------- */
.pm-field{display:block;margin-bottom:1.2rem}
.pm-field span{display:block;font-family:var(--display);text-transform:uppercase;font-size:.66rem;letter-spacing:.18em;color:var(--ink-55);margin-bottom:.5rem}
.pm-field input,.pm-field textarea,.pm-field select{width:100%;font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink-15);padding:.6rem 0}
.pm-field input:focus,.pm-field textarea:focus,.pm-field select:focus{outline:none;border-bottom-color:var(--green)}
.pm-field textarea{resize:vertical;min-height:5.5rem}

/* ---------- forms on dark bands ----------
   .pm-field is authored for light sections: an ink-55 label and an ink-15 bottom rule.
   Composited over .band-ink (#2c3639) or .band-green (#33554f) both land at 1.00:1,
   i.e. the labels and the field boundary are literally invisible. Restate them in the
   paper tints, and give the field a real box so it reads as something you type into.
   Measured 2026-08-28: border and focus ring now clear WCAG 1.4.11 (3:1) on both bands. */
.band-ink .pm-field span,.band-green .pm-field span{color:var(--paper-75)}
.band-ink .pm-field input,.band-ink .pm-field textarea,.band-ink .pm-field select,
.band-green .pm-field input,.band-green .pm-field textarea,.band-green .pm-field select{
  background:rgba(246,245,241,.06);
  border:1px solid var(--paper-50);
  color:var(--paper);
  padding:.7rem .85rem}
.band-ink .pm-field input::placeholder,.band-ink .pm-field textarea::placeholder,
.band-green .pm-field input::placeholder,.band-green .pm-field textarea::placeholder{
  color:var(--paper-50)}
.band-ink .pm-field input:hover,.band-ink .pm-field textarea:hover,.band-ink .pm-field select:hover,
.band-green .pm-field input:hover,.band-green .pm-field textarea:hover,.band-green .pm-field select:hover{
  background:rgba(246,245,241,.10);border-color:var(--paper-75)}
/* the global focus ring is --pm-green, which is 1.51:1 on ink, so restate it in paper */
.band-ink .pm-field input:focus,.band-ink .pm-field textarea:focus,.band-ink .pm-field select:focus,
.band-green .pm-field input:focus,.band-green .pm-field textarea:focus,.band-green .pm-field select:focus{
  background:rgba(246,245,241,.13);
  border-color:var(--paper);
  outline:2px solid var(--paper) !important;
  outline-offset:2px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pm-footer{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,6vw,4.5rem) 1.5rem}
.pm-footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:clamp(1.8rem,4vw,3.5rem)}
.pm-footer .pm-logo img{height:64px;width:auto}
.pm-footer h4{font-family:var(--display);text-transform:uppercase;font-size:.66rem;font-weight:500;letter-spacing:.2em;color:var(--paper-50);margin-bottom:1.1rem}
.pm-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pm-footer a,.pm-footer li{font-size:.88rem;color:var(--paper-75)}
.pm-footer ul a:hover{color:var(--paper)}
.pm-footer .blurb{font-size:.88rem;color:var(--paper-75);max-width:34ch;margin-top:1.3rem}
.pm-footer .base{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.3rem;border-top:1px solid var(--paper-20);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;font-size:.74rem;letter-spacing:.04em;color:var(--paper-50)}

/* ---------- motion ---------- */
/* Scroll reveal, written as progressive enhancement. `.rv` is VISIBLE by
   default; the hidden start state applies only under `html.js-reveal`, which
   an inline head script sets before first paint (see head-fonts.html). So if
   pm-2026.js fails to load, throws before the observer, or the observer is
   defeated by a jump it cannot see, the page degrades to content with no
   animation instead of a blank screen. It used to be the other way round and
   a single instant jump past an element blanked the whole page. */
.rv{opacity:1;transform:none}
.js-reveal .rv{opacity:0;transform:translateY(1.1rem);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pm-footer .cols{grid-template-columns:1fr 1fr}
  .pm-steps{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* On a phone the hero IS the first screen, so it has to fill it exactly.
     92svh left a 54px band of the next (paper) section showing under the
     video on a 393x852 device in Chrome iOS, which read as an awkward white
     strip above the browser toolbar. svh and not dvh: svh is the viewport
     WITH the browser chrome showing, which is the state on load, and it stays
     put while the URL bar collapses instead of growing the hero mid-scroll. */
  .pm-hero{min-height:100svh}
  .pm-tells{grid-template-columns:1fr}
  .pm-menu{display:none}
  .pm-burger{display:block}
  .split{grid-template-columns:1fr}
  .pm-stats{grid-template-columns:repeat(2,1fr);border-left:0}
  .pm-stats > div{border-bottom:1px solid var(--ink-15)}
  .pm-stats > div:nth-child(2n){border-right:0}
  .pm-stats > div:nth-child(3){padding-left:0}
  .pm-acc summary{grid-template-columns:1fr auto;gap:1rem}
  .pm-acc .idx{display:none}
  .pm-acc .body{grid-template-columns:1fr;gap:0}
  .pm-acc .body > div:first-child{display:none}
}
@media (max-width:620px){
  .g-2,.g-3{grid-template-columns:1fr}
  .pm-facts{grid-template-columns:1fr}
  .pm-footer .cols{grid-template-columns:1fr}
}



/* ---------- brand lockup: real coloured artwork, no masks ---------- */
.pm-logo{position:relative;display:inline-flex;align-items:center;flex:none}
.pm-logo img{height:58px;width:auto;display:block}
.pm-nav.on-media .lg-green{display:none}
.pm-nav.on-media .lg-cream{display:block}
.pm-nav:not(.on-media) .lg-cream{display:none}
.pm-nav:not(.on-media) .lg-green{display:block}
.pm-nav.stuck .pm-logo img{height:46px}
.pm-footer .pm-logo img{height:64px}
@media (max-width:620px){
  .pm-logo img{height:42px}
  .pm-nav.stuck .pm-logo img{height:38px}
  .pm-footer .pm-logo img{height:52px}
}

/* ---------- section divider ---------- */
.pm-rule{border:0;border-top:1px solid var(--ink-15);margin:clamp(2.8rem,6vw,4.5rem) 0}


/* footer service list is descriptive, not navigational */
.pm-footer ul.plain li{color:var(--paper-75);cursor:default}

/* ---------- Site diary (/projects#diary) ----------
   Feature mosaic carries the strongest images; the full 73 frame build diary
   sits behind a <details> so it never competes with the project cards.

   Every diary <img> carries width and height attributes. Those map to a
   presentational height, and when width and height are both definite the
   aspect-ratio property is ignored, so the height MUST be declared here or
   tiles render at their intrinsic pixel height. Use height:auto where
   aspect-ratio defines the box, height:100% only where the grid cell is
   already sized by its neighbours. Sources are mixed ratios, so every tile is
   a fixed frame and the photograph is cropped into it with object-fit. */
.pm-diary-features{
  display:grid;
  grid-template-columns:minmax(0,1fr);      /* 375px: one up, full bleed of the wrap */
  gap:clamp(.65rem,1.3vw,.9rem);
}
.pm-diary-features figure{margin:0;min-width:0}
.pm-diary-features img{
  display:block;width:100%;height:auto;     /* height:auto is what lets aspect-ratio win */
  aspect-ratio:4/3;object-fit:cover;
  background:var(--wash);                   /* holds the frame while the lazy image loads */
}
/* tablet: two up. Six tiles fill three rows exactly, no orphan, no spans. */
@media (min-width:620px){
  .pm-diary-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* desktop: three up with a 2x2 lead. 4 cells for the lead plus 5 singles is a
   complete 3x3 block, so the strip closes flush on every edge. The lead takes
   its shape from the cell it spans, which is 4:3 to within a pixel, so it gets
   no ratio of its own. Row height comes from the single tiles beside it, which
   is why there is no layout shift while the lead image loads. */
@media (min-width:900px){
  .pm-diary-features{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pm-diary-features figure:first-child{grid-column:span 2;grid-row:span 2;height:100%}
  .pm-diary-features figure:first-child img{height:100%;aspect-ratio:auto}
}

.pm-diary-more{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--sage);padding-top:1.25rem}
.pm-diary-more summary{
  cursor:pointer;list-style:none;font-family:var(--display);
  display:flex;align-items:baseline;gap:.75rem;padding:.35rem 0;
}
.pm-diary-more summary::-webkit-details-marker{display:none}
.pm-diary-more summary::after{content:"+";margin-left:auto;font-size:1.4em;line-height:1}
.pm-diary-more[open] summary::after{content:"\2212"}
.pm-diary-more summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* The 73 frame sheet. Square tiles: 56 of the 73 sources are already square
   (800x800 or 640x640) so they crop to nothing, and the 7 portrait frames lose
   only 20% of their height. Tight gap on a wash plate so it reads as one sheet
   of frames rather than loose images, and so a part filled final row reads as
   sheet margin. Frame 01 runs 2x2 to open the sheet; because the tiles are
   square and the gaps are equal on both axes, that spanned cell is exactly
   square too, so the shape language stays uniform. */
.pm-diary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));   /* 375px: 3 up, about 106px a tile */
  gap:clamp(.25rem,.55vw,.4rem);
  padding:clamp(.25rem,.55vw,.4rem);
  margin-top:1.25rem;
  background:var(--wash);
}
.pm-diary-grid figure{margin:0;min-width:0}
.pm-diary-grid img{
  display:block;width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;
  background:var(--wash);
}
.pm-diary-grid figure:first-child{grid-column:span 2;grid-row:span 2}
@media (min-width:520px){ .pm-diary-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:768px){ .pm-diary-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:1080px){.pm-diary-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }

@media (prefers-reduced-motion:reduce){
  .pm-diary-more summary{transition:none}
}

/* ---------- Tools dropdown in the primary nav ----------
   Inherits nav colour so it works over media and when stuck. */
.pm-subwrap{position:relative;display:flex;align-items:center}
.pm-subbtn{
  font-family:var(--display);font-size:.9rem;font-weight:400;color:inherit;
  background:none;border:0;padding:0 0 .2rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1px solid transparent;transition:border-color .25s;
}
.pm-subbtn:hover,.pm-subwrap.open .pm-subbtn{border-bottom-color:currentColor}
.pm-subbtn:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.pm-caret{
  width:.42rem;height:.42rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease);
}
.pm-subwrap.open .pm-caret{transform:rotate(225deg) translate(-1px,-1px)}

.pm-sub{
  position:absolute;top:calc(100% + 1.15rem);left:50%;transform:translateX(-50%) translateY(-.4rem);
  min-width:20rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--ink-15);box-shadow:0 18px 44px -18px rgba(44,54,57,.34);
  padding:.4rem;display:grid;gap:.1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
/* bridges the 1.15rem gap so the pointer can travel from button to panel */
.pm-sub::before{content:'';position:absolute;left:0;right:0;top:-1.15rem;height:1.15rem}
.pm-subwrap.open .pm-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.pm-sub a{
  display:block;padding:.7rem .85rem;border-bottom:0;
  border-left:2px solid transparent;transition:background .2s,border-color .2s;
}
.pm-sub a:hover,.pm-sub a:focus-visible{background:var(--wash);border-left-color:var(--green);border-bottom:0}
.pm-sub a[aria-current]{border-left-color:var(--green);background:var(--wash)}
.pm-sub .t{display:block;font-family:var(--display);font-size:.92rem;line-height:1.25}
.pm-sub .d{display:block;font-size:.78rem;color:var(--ink-55);margin-top:.15rem;line-height:1.35}

/* mobile drawer tools group */
.pm-drawer .drawer-tools{display:flex;flex-direction:column;gap:.1rem;margin-top:1.4rem}
.pm-drawer .drawer-tools .lbl{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-50);margin-bottom:.5rem;
}
.pm-drawer .drawer-tools a{font-size:clamp(1.05rem,4.2vw,1.35rem);padding-block:.5rem}

@media (max-width:900px){ .pm-subwrap{display:none} }
/* v216: Hire is two top-level links now, so the bar holds nine items. Below 1080px they no
   longer fit on one row (links broke onto two lines and the button ran off the edge), so the
   drawer takes over there, and the gap tightens until there is room again. */
.pm-menu > a{white-space:nowrap}
@media (max-width:1079px){ .pm-menu{display:none} .pm-burger{display:block} }
@media (min-width:1080px) and (max-width:1180px){ .pm-menu{gap:clamp(.7rem,1.3vw,1.4rem)} }
@media (prefers-reduced-motion:reduce){
  .pm-sub,.pm-caret{transition:none}
}

/* Credentials list without tick boxes: the sentences carry it on their own. */
.pm-plainlist{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.pm-plainlist li{font-size:.95rem;color:var(--ink-70);line-height:1.55}
/* On a dark band the ink tint was charcoal-on-green (1.34:1, unreadable). */
.band-green .pm-plainlist li,.band-ink .pm-plainlist li{color:var(--paper-75)}

/* ---------- FAQ accordion (/building-reports) ---------- */
.pm-faq{border-top:1px solid var(--ink-15)}
.pm-faq:last-of-type{border-bottom:1px solid var(--ink-15)}
.pm-faq summary{
  cursor:pointer;list-style:none;font-family:var(--display);
  font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.35;
  display:flex;align-items:baseline;gap:1rem;padding:1.15rem 0;
}
.pm-faq summary::-webkit-details-marker{display:none}
.pm-faq summary::after{content:"+";margin-left:auto;font-size:1.35em;line-height:1;color:var(--green)}
.pm-faq[open] summary::after{content:"\2212"}
.pm-faq summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.pm-faq p{color:var(--ink-70);max-width:68ch;padding:0 0 1.35rem;margin:0}

/* v183: sticky call / next-step bar for phones on paid landing pages.
   Same pattern as .lh-tapbar on /labour-hire. At 375px the form sat 7+ screens
   down on /extensions and 9+ on /custom-homes, with no phone number in reach. */
.pm-tapbar{display:none}
@media (max-width:860px){
  .pm-tapbar{display:grid;grid-template-columns:1.15fr 1fr;position:fixed;inset:auto 0 0 0;z-index:118;
    background:var(--ink);border-top:1px solid var(--paper-20);padding-bottom:env(safe-area-inset-bottom)}
  .pm-tapbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;padding:.9rem 1rem;
    font-family:var(--display);font-size:.92rem;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--paper)}
  .pm-tapbar a + a{border-left:1px solid var(--paper-20)}
  .pm-tapbar a.primary{background:var(--paper);color:var(--ink)}
  body:has(.pm-tapbar){padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}