:root{
  --paper:#fcfbf9;--surface:#f3f1ec;--band:#faf5ea;--hairline:#dfdad0;
  --ink:#0e0e0e;--muted:#63605a;
  --gold:#a87a16;--gold-deep:#8a6410;--on-gold:#0e0e0e;
  --display:'General Sans','Segoe UI',system-ui,sans-serif;
  --body:-apple-system,'Segoe UI',system-ui,sans-serif;
  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;--s96:96px;--s128:128px;
  --radius-sm:3px;--radius-md:6px;
  --container:1200px;--gutter:clamp(20px,5vw,64px);
  --fast:140ms ease;
}
*{box-sizing:border-box}
/* Clears the sticky header (121px tall with the 88px mark) so in-page anchors
   like #process don't land under it. */
html{scroll-behavior:smooth;scroll-padding-top:132px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--ink)}
h1{font-size:clamp(38px,5.2vw,68px)}
h2{font-size:clamp(28px,3.2vw,42px)}
h3{font-size:clamp(19px,1.8vw,24px)}
p{margin:0;max-width:64ch}
p+p{margin-top:var(--s16)}
/* Brand gold is aa-large only (3.72:1 on paper): display headings and decoration
   exclusively. Anything small uses --gold-deep. See design.md. */
em{font-style:normal;color:var(--gold)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px}
a:active,button:active{opacity:.82}
::selection{background:var(--gold);color:var(--on-gold)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.container{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.section{padding-block:var(--s64)}
/* Two stacked sections would otherwise leave 192px of empty page between them. */
.section+.section{padding-top:var(--s48)}
@media (min-width:900px){.section{padding-block:var(--s96)}.section+.section{padding-top:var(--s64)}}
.narrow{max-width:760px}
.eyebrow{display:flex;align-items:center;gap:var(--s8);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);margin-bottom:var(--s12)}
.lead{font-size:19px;line-height:1.6;color:var(--ink)}
.sparkle{width:16px;height:16px;fill:var(--gold-deep);flex-shrink:0}

.button{display:inline-flex;align-items:center;gap:var(--s8);padding:14px 22px;min-height:50px;border:1px solid var(--gold);border-radius:var(--radius-md);background:var(--gold);color:var(--on-gold);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:background var(--fast),border-color var(--fast),transform var(--fast)}
.button:hover{background:#946a12;border-color:#946a12;transform:translateY(-1px)}
.button.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.button.secondary:hover{background:transparent;border-color:var(--gold-deep);color:var(--gold-deep)}
.text-link{display:inline-flex;gap:var(--s8);align-items:center;min-height:44px;font-weight:700;font-size:14px;color:var(--gold-deep)}

.skip{position:absolute;top:-100px;left:16px;z-index:30;padding:12px 20px;background:var(--ink);color:var(--paper);border-radius:var(--radius-sm)}
.skip:focus{top:12px}

.site-header{position:sticky;top:0;z-index:20;background:rgba(252,251,249,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--hairline)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s16);padding-block:var(--s16)}
.brand{display:inline-flex;flex-shrink:0}
/* The mark is black artwork on a light ground: no inversion, exactly as supplied.
   The file is trimmed to its ink bounds (1456x381), so this height is the height of the
   mark itself. Untrimmed it carried ~9% transparent margin left and ~57% vertically, which
   both misaligned it against the container edge and inflated the header to hold nothing. */
.brand img{height:88px;width:auto}
nav[aria-label="Primary"]{display:flex;flex-wrap:wrap;gap:var(--s24);order:2}
nav[aria-label="Primary"] a{font-weight:600;font-size:15px;color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
nav[aria-label="Primary"] a:hover,nav[aria-label="Primary"] a[aria-current="page"]{color:var(--ink)}
.cta-nav{order:3;padding:10px 18px;min-height:44px}
@media (max-width:560px){.header-inner{justify-content:center;text-align:center}nav[aria-label="Primary"]{order:3;flex-basis:100%;justify-content:center}.cta-nav{order:2}}
/* At the larger mark the header is 181px tall on a phone. Sticky, that is a permanent 21%
   of the viewport, so below 700px it scrolls away instead. The audit CTA is repeated in
   every page's closing band and in the footer, so nothing is lost by letting it go. */
/* Trimmed, an 88px mark is 336px wide, which is most of a phone screen. */
@media (max-width:700px){.site-header{position:static}html{scroll-padding-top:var(--s24)}.brand img{height:56px}}

/* --- Image-backed hero: the logo's story (a lab nose-up to a star) made literal --- */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(560px,80vh,860px);overflow:hidden;border-bottom:1px solid var(--hairline)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right}
/* Scrim fades the art into the paper ground so ink type keeps AA contrast over it. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(252,251,249,.94) 0%,rgba(252,251,249,.86) 34%,rgba(252,251,249,.45) 60%,rgba(252,251,249,0) 84%),linear-gradient(to top,var(--paper) 0%,rgba(252,251,249,0) 26%)}
.hero-copy{position:relative;padding-block:var(--s96)}
/* Cap the text column so a heading can never run over the artwork on the right,
   at any viewport width. */
.hero h1{margin-block:var(--s16);max-width:min(100%,700px)}
.hero .lead{max-width:min(100%,52ch);margin-bottom:var(--s32)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s24);align-items:center}
/* Mobile: overlaying text on the tall art crops the star out of frame, so the
   art becomes its own panel under the headline instead. Both dog and star stay visible. */
@media (max-width:700px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible}
  .hero::after{display:none}
  .hero-copy{order:1;padding-block:var(--s48) var(--s32)}
  /* Tall enough to fit the whole star-to-dog span (951px of source): at 420px the crop
     was 3px short and clipped the dog's feet. */
  .hero-media{order:2;position:relative;inset:auto;z-index:0;display:block;height:min(58vh,470px)}
  /* Biased above centre: a centred crop clipped the star off the top edge. */
  .hero-media img{object-position:center 35%}
  .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--paper) 0%,rgba(252,251,249,.25) 22%,rgba(252,251,249,0) 55%)}
}

/* --- Inner-page image band --- */
/* Tall enough that the band's aspect ratio can show the whole star-to-dog span of the
   art without cover-cropping either subject out. */
.page-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(360px,54vh,540px);overflow:hidden;border-bottom:1px solid var(--hairline)}
.page-hero-media{position:absolute;inset:0;z-index:-2}
/* Top-anchored: the star sits near the top of the ridge crop, so a centred crop cuts it.
   The crop extends well below the dog, so the band cuts inside the snow mound rather than
   at the image's own edge, and the bottom fade blends that into the page. */
.page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* Clears early on the right and fades only the very bottom: an earlier version stayed 45%
   opaque three-quarters of the way across and washed up from the bottom edge, which
   dissolved the dog's legs and left the mark reading as a grey watermark. The text column
   is capped at 760px, so the scrim only has to cover the left half. */
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(252,251,249,.95) 0%,rgba(252,251,249,.88) 40%,rgba(252,251,249,.3) 66%,rgba(252,251,249,0) 80%),linear-gradient(to top,rgba(252,251,249,.8) 0%,rgba(252,251,249,0) 9%)}
/* The flat dog-and-star graphic is artwork on a paper ground, not a photograph to crop:
   contain it at the right edge so its white blends into the page and nothing is cut off.
   It needs no scrim either: its own ground is already paper, and scrimming it washed the
   solid-black mark out to grey. */
.page-hero.is-graphic .page-hero-media img{object-fit:contain;object-position:right center}
.page-hero.is-graphic::after{display:none}
.page-hero-copy{position:relative;padding-block:var(--s32) var(--s48)}
.page-hero-copy .breadcrumbs{padding:0 0 var(--s24);width:auto}
.page-hero h1{margin-block:var(--s12);max-width:min(100%,760px)}
.page-hero .lead{margin-bottom:var(--s16);max-width:min(100%,60ch)}
.page-hero p:not(.lead):not(.eyebrow){color:var(--muted);max-width:min(100%,60ch)}

.section-intro{max-width:640px;margin-bottom:var(--s48)}
.section-intro p:not(.eyebrow){color:var(--muted)}

/* --- The engine loop: six stages on a track that returns to the start --- */
.howl{width:16px;height:16px;flex-shrink:0;color:var(--gold-deep)}
.engine-section .section-intro{max-width:720px}
.loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s16);position:relative}
.loop li{position:relative;padding-top:var(--s48)}
/* The track is drawn per-stage rather than as one full-width rule: a single rule ran past
   stage 06 and dead-ended in mid-air. Each segment spans its own circle to the next one. */
.loop li:not(:last-child)::after{content:"";position:absolute;top:15px;left:36px;right:calc(-1 * var(--s16));height:1px;background:var(--hairline)}
/* The riser: leaves the stage-06 column and drops to the dashed return, closing the circuit.
   It starts below the list rather than at the circle so it does not rule through the copy. */
.loop li:last-child::after{content:"";position:absolute;left:15px;top:100%;bottom:calc(-1 * var(--s48));border-left:1px dashed var(--gold)}
.loop-number{position:absolute;top:0;left:0;display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;border-radius:50%;background:var(--paper);border:1px solid var(--gold);color:var(--gold-deep);font-family:var(--display);font-weight:700;font-size:12px}
.loop li:last-child .loop-number{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.loop h3{font-size:17px;margin-bottom:var(--s4)}
.loop p{color:var(--muted);font-size:14px;line-height:1.5;max-width:22ch}
/* The return: the sixth stage feeding the first. This is the woof coming back. */
.loop-return{display:flex;align-items:flex-start;gap:var(--s12);margin-top:var(--s48);padding-top:var(--s24);border-top:1px dashed var(--gold);color:var(--muted);max-width:none;position:relative}
/* Arrowhead under stage 01's circle, pointing back UP at it: the return travels left along
   the dashed rule from stage 06's riser and re-enters the loop at the start. */
.loop-return::before{content:"";position:absolute;top:-5px;left:11px;width:8px;height:8px;border-left:1px solid var(--gold);border-top:1px solid var(--gold);transform:rotate(45deg);background:var(--paper)}
.loop-return .howl{transform:scaleX(-1);margin-top:2px}
.loop-return span{max-width:70ch}
/* Below 900px the six stages stack into one column with a vertical spine through the
   circles, so the sequence still reads as a connected run rather than a plain list.
   A two-column layout was worse: stages 3 and 4 sit side by side with nothing joining them. */
@media (max-width:900px){
  .loop{grid-template-columns:1fr;gap:var(--s32)}
  .loop li{padding-top:0;padding-left:var(--s48);min-height:31px}
  .loop-number{top:0;left:0}
  .loop p{max-width:none}
  .loop li:not(:last-child)::after{top:36px;left:15px;right:auto;bottom:calc(-1 * var(--s32));height:auto;width:0;background:none;border-left:1px solid var(--hairline)}
  .loop li:last-child::after{top:calc(100% + var(--s8));left:15px;bottom:calc(-1 * var(--s48));border-left:1px dashed var(--gold)}
  .loop-return{margin-top:var(--s48)}
}

.process{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hairline)}
.process li{display:flex;gap:var(--s24);padding-block:var(--s24);border-bottom:1px solid var(--hairline)}
.process-number{font-family:var(--display);font-weight:700;font-size:15px;color:var(--gold-deep);flex-shrink:0;width:2.5em}
.process h3{margin-bottom:var(--s8)}
.process p{color:var(--muted)}

.service-rows{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
/* align-items:start so the row number sits level with the service title, matching the
   process spine's numbering. Centring it put the number beside the description instead. */
.service-rows a{display:grid;grid-template-columns:3em 1fr auto;align-items:start;gap:var(--s24);padding-block:var(--s24);border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink);transition:background var(--fast)}
.service-rows a:hover{background:var(--surface)}
.service-rows a:hover h3{color:var(--gold-deep)}
.row-number{font-family:var(--display);font-weight:700;color:var(--gold-deep);line-height:1.5}
.service-rows>a>span[aria-hidden]{align-self:center}
.row-text h3{margin-bottom:var(--s4);transition:color var(--fast)}
.row-text p{color:var(--muted);max-width:52ch}
.service-rows>a>span[aria-hidden]{justify-self:end;font-size:20px;color:var(--gold-deep)}
@media (max-width:640px){.service-rows a{grid-template-columns:2em 1fr;row-gap:var(--s8)}.service-rows>a>span[aria-hidden]{grid-column:2;justify-self:start}}

/* Pale gold band: section rhythm without a dark ground. */
.evidence-band{background:var(--band);border-block:1px solid var(--hairline)}
.evidence-band h2{margin-block:var(--s16) var(--s24)}
.evidence-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s32);margin-top:var(--s48)}
.evidence-step-number{display:inline-flex;align-items:center;justify-content:center;width:2em;height:2em;border-radius:50%;border:1px solid var(--gold-deep);color:var(--gold-deep);font-weight:700;margin-bottom:var(--s16)}
.evidence-steps p{color:var(--muted)}

.audit-band{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);border-block:1px solid var(--hairline)}
.audit-band-media{position:absolute;inset:0;z-index:-2}
.audit-band-media img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* Bottom fade included so the ridge dissolves into the footer instead of being sliced
   flat by the section border. */
.audit-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(252,251,249,.96) 0%,rgba(252,251,249,.9) 40%,rgba(252,251,249,.32) 68%,rgba(252,251,249,0) 84%),linear-gradient(to top,rgba(252,251,249,.85) 0%,rgba(252,251,249,0) 10%)}
/* Copy and CTA stack on the left so the right side stays clear for the art:
   a right-aligned button landed on top of the dog. */
.audit-band-grid{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);padding-block:var(--s96)}
.audit-band-grid>div{max-width:46ch}
.audit-band h2{margin-block:var(--s12) var(--s16)}
.audit-band p:not(.eyebrow){color:var(--muted)}

.breadcrumbs{padding-top:var(--s24)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s8);margin:0;padding:0;font-size:13px;color:var(--muted)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--gold-deep)}
.breadcrumbs li+li::before{content:"/";margin-right:var(--s8)}
.page-heading{padding-block:var(--s48) var(--s24)}
.page-heading h1{margin-block:var(--s16)}
.page-heading .lead{margin-bottom:var(--s16)}

.service-detail{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s64);padding-block:var(--s48) var(--s64);align-items:start}
.service-included{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s32)}
.service-included h2{font-size:20px;margin-bottom:var(--s8)}
.service-included p{color:var(--muted)}
.service-aside{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--s24);align-self:start}
.service-aside p{color:var(--muted);margin-bottom:var(--s16)}
@media (max-width:820px){.service-detail{grid-template-columns:1fr}}

/* Long-form copy keeps the site's shared left edge and caps its measure, rather than
   sitting in a centred narrow column indented from every other element on the page. */
/* --- The Woof Back page --- */
.engine-detail{padding-block:var(--s48) 0;display:flex;flex-direction:column;gap:var(--s64)}
.engine-block h2{margin-bottom:var(--s12)}
.engine-block .lead{margin-bottom:var(--s32);color:var(--muted)}
.engine-points{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s32)}
.engine-points div{border-top:1px solid var(--hairline);padding-top:var(--s16)}
.engine-points dt{font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:var(--s8)}
.engine-points dd{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
/* The limits band: publishing what the engine cannot measure, rather than going quiet. */
.limits-band{background:var(--band);border-block:1px solid var(--hairline);margin-top:var(--s96);padding-block:var(--s64)}
.limits-band h2{margin-bottom:var(--s12)}
.limits-band .lead{margin-bottom:var(--s32);max-width:70ch}
.limits-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s16);max-width:80ch}
.limits-list li{position:relative;padding-left:var(--s32);color:var(--muted)}
.limits-list li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:1px;background:var(--gold)}

.about-body{padding-block:var(--s48)}
.about-body p{color:var(--ink);max-width:min(100%,68ch)}
.about-body p+p{margin-top:var(--s24)}

.audit-page{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s64);padding-block:var(--s48) var(--s64);align-items:start}
.audit-options{display:flex;flex-direction:column;gap:var(--s32)}
.audit-note h2{margin-bottom:var(--s12)}
.audit-followup{margin-top:var(--s24);font-size:15px}
.audit-options a{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s24);border:1px solid var(--hairline);border-radius:var(--radius-md);text-decoration:none;color:var(--ink);background:var(--surface)}
.audit-options a:hover{border-color:var(--gold-deep)}
.audit-options small{color:var(--muted);font-weight:700;letter-spacing:.08em;font-size:11px}
.audit-options strong{font-size:18px;word-break:break-word}
.audit-options span{color:var(--gold-deep);font-size:13px;font-weight:700}
.audit-page h2{font-size:20px;margin-bottom:var(--s16)}
.audit-checklist{list-style:none;margin:0 0 var(--s32);padding:0;display:flex;flex-direction:column;gap:var(--s12)}
.audit-checklist li{padding-left:var(--s24);position:relative;color:var(--muted)}
.audit-checklist li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--gold);border-radius:50%}
.audit-page p{color:var(--muted)}
@media (max-width:820px){.audit-page{grid-template-columns:1fr}}

/* No margin-top: the preceding section's own bottom padding already separates it, and
   the footer carries its own surface and top rule. */
footer{background:var(--surface);border-top:1px solid var(--hairline)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s48);padding-block:var(--s64)}
.footer-brand p{color:var(--muted);margin-top:var(--s16);max-width:32ch}
footer nav{display:flex;flex-direction:column;gap:var(--s12)}
footer nav a{color:var(--muted);text-decoration:none;min-height:24px}
footer nav a:hover{color:var(--gold-deep)}
footer .eyebrow{color:var(--muted)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s8);padding-block:var(--s24);border-top:1px solid var(--hairline);font-size:13px;color:var(--muted)}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* PHONE RULE: art never sits behind text.
   At ≤700px there is not enough width to hold a readable text column clear of the subject,
   and the flat graphic in particular filled the whole band with solid black behind the
   heading (measured 1.04:1 — effectively invisible). Every band therefore stacks: copy
   first, art as its own full-bleed panel underneath, exactly like the home hero. This
   removes the scrim's job entirely at this width rather than tuning it.
   Kept last in the file: these selectors match the base band rules, so order decides. */
@media (max-width:700px){
  .page-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible}
  .page-hero::after{display:none}
  .page-hero-copy{order:1;padding-block:var(--s24) var(--s32)}
  .page-hero-media{order:2;position:relative;inset:auto;z-index:0;display:block;height:min(40vh,320px)}
  .page-hero-media img{object-fit:cover;object-position:92% 50%}
  .page-hero.is-graphic .page-hero-media img{object-fit:contain;object-position:center}

  .audit-band{display:flex;flex-direction:column;align-items:stretch}
  .audit-band::after{display:none}
  .audit-band-grid{order:1;padding-block:var(--s64) var(--s32)}
  .audit-band-media{order:2;position:relative;inset:auto;z-index:0;display:block;height:min(34vh,280px)}
  .audit-band-media img{object-position:92% 50%}
}