/* ===========================================================================
   WILLOW CREEK GROUP - the homepage chassis on the inner pages.

   Loaded after wcg-system.css on every page except the homepage (which has
   px.css) and classic.html (the archived homepage). It does not rewrite the
   pages: it re-dresses the markup they already have. The pages keep their
   cream paper and their reading measure; the header, footer, type, labels,
   buttons, fields and hairlines are the homepage's, so a visitor who clicks
   from the homepage to /services no longer lands in a different company.

   Palette and faces are the ones in PX PUSH WCG/px.css. Change both or neither.
   =========================================================================== */

:root{
  --px-black:#14130E;
  --px-gray:#1C1B17;
  --px-flood:#2C4033;
  --px-paper:#F7F4EC;
  --px-card:#FBF9F3;
  --px-white:#E7E3D7;
  --px-text:#CBD8CD;
  --px-sky:#A9C9E2;
  --px-rust:#A8503A;
  --px-phosphor:#7BE8A4;
  --px-rule:#D8D2C2;
  --f-display:"Archivo",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-quote:"Lora",Georgia,serif;

  /* the inner pages read these; repoint them at the homepage values */
  --ink:#1C1B17;
  --wire:#1C1B17;
  --cream:#F7F4EC;
  --paper:#F7F4EC;
  --card-line:#D8D2C2;
  --rule:#D8D2C2;
}

/* ------------------------------------------------------------------ type */
body{
  font-family:var(--f-display);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:900;
  font-variation-settings:"wdth" 74,"wght" 900;
  letter-spacing:-.02em;
  line-height:1;
  text-transform:none !important;
  color:var(--ink);
}
h1{font-size:clamp(2.2rem,5.4vw,3.6rem);}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem);}
h3{font-size:clamp(1.15rem,2vw,1.5rem);font-variation-settings:"wdth" 80,"wght" 800;}
h4{font-size:1.05rem;font-variation-settings:"wdth" 84,"wght" 800;}
p,li,dd,dt{font-family:var(--f-display);}
blockquote,.pull-fact,.call-q,q{font-family:var(--f-quote);font-style:italic;}
.sub,.lede,.lead{font-size:1.05rem;line-height:1.55;color:#4A483F;}

/* eyebrows, labels and every small uppercase line become the mono chassis */
.label,.kicker,.tag,.rep-kick,.rz-cap,.pricechip,.inv-status,.ad-tag,.updated{
  font-family:var(--f-mono) !important;
  font-weight:400 !important;
  font-size:max(.72rem,12px) !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#4F6C53;
}
.tag::before{display:none;}

/* ------------------------------------------------------------------ header */
.nav,.nav--solid{
  position:sticky;top:0;z-index:80;
  min-height:78px;padding:0 32px;
  background:var(--px-black);
  color:var(--px-white);
  border-bottom:1px solid rgba(231,227,215,.10);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.brand{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;color:var(--px-white);}
.brand-wcg{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 74,"wght" 900;
  font-size:1.35rem;letter-spacing:-.02em;line-height:1;
  color:var(--px-white);
}
.brand b,.nav--solid .brand b{
  font-family:var(--f-mono) !important;
  font-weight:400 !important;
  font-size:max(.6rem,11px) !important;
  letter-spacing:.04em !important;
  text-transform:uppercase;
  color:var(--px-white) !important;
}
.nav-links{gap:1.2rem;}
.nav-links a,.nav--solid .nav-links a{
  font-family:var(--f-mono) !important;
  font-weight:400 !important;
  font-size:max(.62rem,12px) !important;
  letter-spacing:.02em !important;
  text-transform:uppercase;
  color:var(--px-white) !important;
}
.nav-links a:hover{color:var(--px-phosphor) !important;}
.nav-links .nav-hot,.nav--solid .nav-links .nav-hot{color:var(--px-phosphor) !important;}
.nav-cta,.nav--solid .nav-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent !important;
  border:1px solid var(--px-white);
  border-radius:0;
  padding:.55rem 1rem;
}
.nav-cta::before{
  content:"";width:.55em;height:.55em;border-radius:50%;
  background:var(--px-phosphor);box-shadow:0 0 10px var(--px-phosphor);
  flex:none;
}
.nav-cta:hover{background:var(--px-white) !important;color:var(--px-black) !important;}
.nav-cta:hover::before{background:var(--px-black);box-shadow:none;}
.burger{color:var(--px-white);font-size:26px;}
.nav :focus-visible{outline-color:var(--px-phosphor);}

/* the 761-1023px band: nine mono links plus the brand do not fit at 12px, so
   the wordmark steps aside and the row tightens; the phone link is already
   hidden in this band by wcg-system.css */
@media (min-width:761px) and (max-width:1023px){
  .nav,.nav--solid{padding:0 16px;}
  .brand b{display:none;}
  .nav-links{gap:.65rem;}
  .nav-links a,.nav--solid .nav-links a{font-size:11px !important;letter-spacing:0 !important;}
  .nav-cta,.nav--solid .nav-cta{padding:.45rem .7rem;}
}

@media (max-width:760px){
  .nav,.nav--solid{padding:0 22px;}
  .nav-links{
    top:0;bottom:0;height:100dvh;
    padding:96px 22px 40px;
    background:var(--px-flood);
    border-bottom:0;
    justify-content:center;
    gap:.3rem;
  }
  .nav-links a,.nav--solid .nav-links a{
    font-family:var(--f-display) !important;
    font-variation-settings:"wdth" 74,"wght" 900;
    font-size:clamp(1.7rem,8vw,2.6rem) !important;
    letter-spacing:-.02em !important;
    text-transform:none;
    border-bottom:0;
    padding:.35rem 0;
    justify-content:center;
    color:var(--px-white) !important;
  }
  .nav-links a.nav-tel{
    font-family:var(--f-mono) !important;
    font-variation-settings:normal;
    font-size:max(.8rem,16px) !important;
    border:1px solid rgba(231,227,215,.45);
    margin:.8rem 0 .4rem;padding:.7rem 1.2rem;width:auto;
  }
  .nav-links .nav-cta,.nav-cta{
    margin-top:.6rem;width:auto;padding:.7rem 1.4rem;
    font-family:var(--f-mono) !important;font-size:max(.7rem,13px) !important;
    font-variation-settings:normal;
  }
  .burger{z-index:90;}
  /* the menu paints over the header, so the burger must stay readable */
  .nav.menu-open .burger{color:var(--px-white);}
}

/* ------------------------------------------------------------------ footer */
.foot,.px-foot{
  background:var(--px-flood);
  color:var(--px-white);
  padding:4.5rem 0 0;
  margin-top:auto;
  overflow:hidden;
  font-family:var(--f-mono);
  font-size:max(.62rem,12px);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.px-foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.px-foot{text-align:left;}
.px-foot p,.px-foot a{font-family:var(--f-mono);font-size:inherit;letter-spacing:.02em;text-transform:uppercase;}
.px-foot__addr p,.px-foot__links p{margin:0 0 .35rem;color:var(--px-white);font-size:inherit;line-height:1.7;}
.px-foot__addr a,.px-foot__links a{
  color:var(--px-white);text-decoration:none;
  border-bottom:1px solid rgba(231,227,215,.35);
}
.px-foot__addr a:hover,.px-foot__links a:hover{color:var(--px-phosphor);border-color:var(--px-phosphor);}
.px-foot__links{display:grid;gap:.45rem;}
.px-foot__links a{justify-self:start;padding:.15rem 0;}
.px-foot__tz{opacity:.6;margin-bottom:.5rem !important;}
.px-foot__band{
  margin-top:3.5rem;
  font-family:var(--f-display);
  font-variation-settings:"wdth" 74,"wght" 900;
  font-size:clamp(3rem,12vw,9rem);
  line-height:.9;letter-spacing:-.03em;
  text-transform:none;
  color:rgba(231,227,215,.10);
  white-space:nowrap;
  padding:0 32px;
  user-select:none;
}
@media (max-width:760px){
  .px-foot__in{padding:0 22px;flex-direction:column;}
  .px-foot__band{padding:0 22px;}
}

/* ------------------------------------------------------------------ buttons */
.btn,.btn-solid,.btn-line,.au-btn,.btn2,.cta,.bigbtn,button,input[type="submit"],.gbtn,.inv-link{
  font-family:var(--f-mono) !important;
  font-weight:400 !important;
  font-size:max(.66rem,13px) !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  border-radius:0 !important;
  border:1px solid var(--ink);
  padding:.9rem 1.2rem;
  line-height:1.2;
  transition:background .25s,color .25s,border-color .25s;
}
.btn-solid,.au-btn,button[type="submit"],.rz-form button,form button,.cta,.bigbtn{
  background:var(--px-gray);color:var(--px-paper);border-color:var(--px-gray);
}
.btn-solid:hover,.au-btn:hover,button[type="submit"]:hover,.rz-form button:hover,form button:hover,.cta:hover,.bigbtn:hover{
  background:#5F8266;border-color:#5F8266;color:var(--px-paper);transform:none;
}
.btn-line,.btn-line:hover{background:transparent;color:var(--ink);transform:none;}
.btn-line:hover{background:var(--px-gray);color:var(--px-paper);}
.au-pregate .au-hand{border:0;padding:0;background:none;font-family:inherit !important;text-transform:none !important;letter-spacing:0 !important;font-size:inherit !important;}

/* ------------------------------------------------------------------ fields */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea{
  font-family:var(--f-display);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--ink) !important;
  border-radius:0 !important;
  padding:.85rem .9rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid #5F8266;outline-offset:1px;border-color:#5F8266 !important;}
label{
  font-family:var(--f-mono) !important;font-weight:400 !important;
  font-size:max(.66rem,12px) !important;letter-spacing:.04em !important;text-transform:uppercase;
}

/* ------------------------------------------------------------------ panels */
.stat,.gatebox,.find,.card,.capwrap,.prob,.metric,.snip,.rz-form,.rz-step,.bizcard,
.au-nearmiss,.au-match,.au-partial,.au-nolisting,.au-soft,.au-aside,.rep-stat,.method,.dl,.contact,form{
  border-radius:0 !important;
  border-color:var(--px-rule);
  box-shadow:none;
}
.stat{border-left:3px solid #5F8266;background:var(--px-card);}
.gatebox{border:1px solid var(--ink);background:var(--px-card);}
.find{background:var(--px-card);}
body.stub .card{border:1px solid var(--ink);background:var(--px-card);padding:2.6rem 2rem;}
.cta-band,header.page,header.rz-hero,header.rep-hero,header.au-hero{background:var(--cream);}
ul.tasks li{border-bottom:1px solid var(--px-rule);}

/* the gauge, the report ring: same face as the sample ring on the homepage */
.gnum{font-family:var(--f-display);font-variation-settings:"wdth" 74,"wght" 900;}
.glab{font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;}

/* links in copy keep the drawing underline from wcg-system.css; colour only */
main a:not(.btn):not(.nav-cta):not(.au-btn):not(.f1):not(.f2){color:#4F6C53;}

/* ------------------------------------------------------------------ chassis overlays */
/* scanlines, lighter than the homepage because these pages are for reading */
body::before{
  content:"";position:fixed;inset:0;z-index:22;pointer-events:none;
  opacity:.14;
  background-image:repeating-linear-gradient(to bottom,rgba(20,19,14,.45) 0 1px,transparent 1px 3px);
}
body.pt-room::before{display:none;}
@media (prefers-contrast:more),print{ body::before{display:none;} }

/* view-transition name persists across pages */
.foot{view-transition-name:sitefoot;}


/* ===================================================================
   2026-08-29 - matching the rebuilt homepage.

   The homepage moved to a dark hero, display type at roughly three times the
   body size with a Lora italic accent, and the scanline plate. These pages
   were still the quiet cream editorial written against the PREVIOUS homepage,
   so the click from that hero into /services landed in a different company.

   Note the rule above already groups all four hero variants
   (.page/.au-hero/.rz-hero/.rep-hero) - extend THAT list, do not invent a new
   one. `body` prefixes are load-bearing: every page carries an inline <style>
   that comes later in the cascade and wins at equal specificity.
   =================================================================== */

/* the vignette runs full page; the scanline belongs on the dark hero only,
   because across a cream reading area it just looks like a dirty screen */
body::after{
  content:""; position:fixed; inset:0; z-index:61; pointer-events:none;
  background:radial-gradient(120% 92% at 50% 45%, transparent 62%, rgba(10,10,7,.18) 100%);
}
body header.page::before,
body header.au-hero::before,
body header.rz-hero::before,
body header.rep-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.22;
  background-image:repeating-linear-gradient(to bottom, rgba(20,19,14,.45) 0 1px, transparent 1px 3px);
}

body header.page,
body header.au-hero,
body header.rz-hero,
body header.rep-hero{
  position:relative;
  background:var(--px-black) !important;
  color:var(--px-white);
  border-bottom:0 !important;
  padding:150px 0 76px !important;
  overflow:hidden;
}
/* the soft bleed the homepage uses between a dark section and the paper */
body header.page::after,
body header.au-hero::after,
body header.rz-hero::after,
body header.rep-hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:120px;
  background:linear-gradient(transparent, var(--px-paper));
  pointer-events:none; z-index:1;
}
body header.page .wrap,
body header.au-hero .wrap,
body header.rz-hero .wrap,
body header.rep-hero .wrap{ position:relative; z-index:2; }

/* ---- display type ----
   These were 2.6rem, weight 700, uppercase, with POSITIVE tracking, which is
   what read as older more than anything else on the page. */
body header.page h1,
body header.au-hero h1,
body header.rz-hero h1,
body header.rep-hero h1{
  font-family:'Archivo',system-ui,sans-serif !important;
  font-variation-settings:'wdth' 80,'wght' 900;
  font-weight:900 !important;
  font-size:clamp(2.3rem,5.6vw,4.2rem) !important;
  line-height:.98 !important;
  letter-spacing:-.022em !important;
  text-transform:none !important;
  color:#FFFFFF !important;
  margin:0;
  max-width:18ch;
}
/* the italic half, so an inner headline can carry the homepage's accent */
body header.page h1 em,body header.au-hero h1 em,body header.rz-hero h1 em,body header.rep-hero h1 em{
  font-family:'Lora',Georgia,serif !important;
  font-variation-settings:normal;
  font-style:italic; font-weight:400 !important;
  letter-spacing:-.008em !important;
  color:var(--px-sky) !important;
}

body header.page .label,body header.page .kicker,
body header.au-hero .label,body header.au-hero .kicker,
body header.rz-hero .label,body header.rz-hero .kicker,
body header.rep-hero .label,body header.rep-hero .kicker,
body header.rep-hero .rep-kick{
  font-family:'Space Mono',monospace !important;
  font-weight:400 !important;
  font-size:12px !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  color:var(--px-sky) !important;
  margin:0 0 18px !important;
}

body header.page .sub,
body header.au-hero .sub,
body header.rz-hero .sub,
body header.rep-hero .sub{
  font-family:'Archivo',system-ui,sans-serif !important;
  font-size:clamp(1rem,1.5vw,1.18rem) !important;
  line-height:1.5 !important;
  color:rgba(231,227,215,.82) !important;
  max-width:52ch;
  margin-top:20px;
}
body header.page .updated,
body header.au-hero .updated,
body header.rz-hero .updated,
body header.rep-hero .updated{ color:rgba(231,227,215,.72) !important; }

/* ---- section headings pick up the same weight ---- */
body main h2,body section h2{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 86,'wght' 900;
  font-weight:900;
  letter-spacing:-.018em;
  text-transform:none;
}
body main h3,body section h3{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 90,'wght' 800;
  letter-spacing:-.01em;
  text-transform:none;
}

@media (max-width:760px){
  body header.page,
body header.au-hero,
body header.rz-hero,
body header.rep-hero{ padding:120px 0 56px !important; }
  body header.page h1,
body header.au-hero h1,
body header.rz-hero h1,
body header.rep-hero h1{ font-size:clamp(2rem,8.6vw,2.9rem) !important; max-width:none; }
}
@media (prefers-contrast:more){ body header.page::before,
body header.au-hero::before,
body header.rz-hero::before,
body header.rep-hero::before{ display:none; } }
@media (prefers-reduced-motion:reduce){ body::after{ display:none; } }


/* Elements that were designed against a CREAM hero and now sit on a dark one.
   The ghost button is the sharp one: transparent fill with --ink text measured
   1.08:1 against the new ground, i.e. invisible. */
body header.page .btn,body header.page .dl,body header.au-hero .dl,body header.rz-hero .dl,body header.rep-hero .dl,
body header.au-hero .btn,body header.page .dl,body header.au-hero .dl,body header.rz-hero .dl,body header.rep-hero .dl,
body header.rz-hero .btn,body header.page .dl,body header.au-hero .dl,body header.rz-hero .dl,body header.rep-hero .dl,
body header.rep-hero .btn,body header.page .dl,body header.au-hero .dl,body header.rz-hero .dl,body header.rep-hero .dl{
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.55) !important;
}
body header.page .btn-solid,body header.page .dl.primary,
body header.au-hero .btn-solid,body header.page .dl.primary,
body header.rz-hero .btn-solid,body header.page .dl.primary,
body header.rep-hero .btn-solid,body header.page .dl.primary{
  background:var(--px-sky) !important;
  color:var(--px-black) !important;
  border-color:var(--px-sky) !important;
}
body header.page p,body header.page .rz-cap,body header.page .lede,
body header.au-hero p,body header.au-hero .rz-cap,body header.au-hero .lede,
body header.rz-hero p,body header.rz-hero .rz-cap,body header.rz-hero .lede,
body header.rep-hero p,body header.rep-hero .rz-cap,body header.rep-hero .lede{ color:rgba(231,227,215,.82) !important; }