/* Self-hosted IBM Plex (OFL), served from /assets/fonts. Downloaded from
   Google Fonts 28 August 2026 so that no visitor IP reaches a third party
   before the page paints. Paths are relative to this stylesheet, so they
   resolve at every page depth.

   Google now serves IBM Plex Sans as a variable font, so one file covers the
   300, 400 and 600 weights the site uses. The handoff listed five files; three
   deliver the same five faces and less weight over the wire.

   Latin subset only, per the handoff. If a name with extended Latin ever needs
   to render, add the latin-ext files alongside these with matching
   unicode-range declarations. */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:300 600;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/ibm-plex-sans-condensed-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ClearCDM site theme tokens, Direction 1 Instrument (D19, 2026-08-05).
   Starting stylesheet for the site build. The accent is an interface colour:
   links, focus, active states, the favicon bar. Never body text, never
   carrying meaning alone. */
/* Tokens, refit CCDM-WEB-02 commit 03, 28 August 2026. The accent deepens,
   the neutrals cool by a degree, and one flag colour arrives. The accent stays
   an interface colour: links, focus and active states, never body text. The
   flag is used only where the site says what happens if nobody is appointed,
   or marks something as not included. Never decorative. */
:root{
  --ink:#16181C;
  --paper:#FFFFFF;
  --tint:#EFF1F4;
  --grey:#5D646D;
  --hairline:#D6DBE1;
  --accent:#1B3FA0;
  --accent-dk:#14307A;
  --flag:#8F5A12;
  --font-sans:'IBM Plex Sans',system-ui,Arial,sans-serif;
  --font-cond:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --measure:66ch;
}
html{font-size:16px}
body{margin:0;font-family:var(--font-sans);font-weight:400;color:var(--ink);
  background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:600;line-height:1.2;margin:0 0 0.5em}
h1,h2{font-family:var(--font-cond);letter-spacing:0}
h1{font-size:2.25rem}
h2{font-size:1.55rem}
h3{font-size:1.1rem}
p{max-width:var(--measure);margin:0 0 1em}
a{color:var(--ink);text-decoration:underline;text-underline-offset:0.18em;
  text-decoration-thickness:1px;text-decoration-color:var(--accent)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The mark, refit commit 05: live type, not a glyph outline SVG. It recolours
   with currentColor, so the hero needs a colour rather than an invert filter. */
.wordmark{font-family:var(--font-sans);white-space:nowrap;display:inline-block;
  font-size:1.3rem;line-height:1;letter-spacing:-0.005em;
  padding-bottom:.26em;border-bottom:2px solid var(--accent)}
.wordmark .l{font-weight:300}
.wordmark .b{font-weight:600}
.runner{font-size:0.72rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink)}
.hairline{border:0;border-top:1px solid var(--ink);margin:2rem 0}
.tintbox{background:var(--tint);padding:1rem 1.25rem}
.panel{background:var(--ink);color:#fff;padding:1.25rem 1.5rem}
.mono{font-family:var(--font-mono);font-size:0.92em}
/* The base still gives every button its typography, padding and cursor: the
   quote tool's classed buttons rely on it for those. Only the hover is scoped.
   button:hover outranks a single class, so left unscoped it would go on
   stealing the background from any component whose own hover did not restate
   it, which is exactly how the tool options ended up ink on ink. */
button,.button{font-family:var(--font-sans);font-weight:600;font-size:0.95rem;
  background:var(--ink);color:#fff;border:0;padding:0.7em 1.3em;cursor:pointer}
button:not([class]):hover,.button:hover{background:#000}
small,.small{font-size:0.8rem;color:var(--grey)}
footer .disclosure{font-size:0.75rem;color:var(--grey);max-width:none}


/* ---- site layer (build additions on the pack tokens) ---- */
*{box-sizing:border-box}
/* --page-w and --wrap-pad let a page widen its container; the header and
   footer wraps follow automatically so the title bar always matches the body */
.wrap{max-width:var(--page-w,52rem);margin:0 auto;padding:0 var(--wrap-pad,1.25rem)}
.grey{color:var(--grey)}
.plain{list-style:none;padding:0;margin:0}
.plain li{margin:.25em 0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:10;text-decoration:none}
.skip:focus{left:0}
.ph{background:var(--tint);outline:1px dashed var(--grey);padding:.1em .35em;font-family:var(--font-mono);font-size:.875em;color:var(--ink)}
.ph-block{background:var(--tint);outline:1px dashed var(--grey);padding:1rem 1.25rem;font-family:var(--font-mono);font-size:.875rem;margin:0 0 1em;max-width:var(--measure)}
.site-header{border-bottom:1px solid var(--hairline);position:relative}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.1rem;padding-bottom:1.1rem}
.wm{display:block;color:var(--ink);text-decoration:none}
.wm:hover{color:var(--ink)}
.wm-img{display:block;height:1.35rem;width:auto}
.site-nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.site-nav a,.mnav nav a{color:var(--ink);text-decoration:none;padding-bottom:3px}
.site-nav a:hover,.mnav nav a:hover{color:var(--accent)}
.site-nav a[aria-current="page"],.mnav nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
/* The mobile nav, refit commit 04. Still a details element, so it works with
   no JavaScript and keeps the keyboard and screen reader behaviour the browser
   gives it for free. What changed is that it no longer snaps: the burger draws
   itself into a cross and the panel opens on a grid row transition, which is
   the one way to animate to an unknown height in CSS. */
.mnav{display:none}
.mnav summary{cursor:pointer;list-style:none;display:block;width:2.25rem;height:2.25rem;
  border:1px solid var(--ink);position:relative}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .burger,
.mnav summary .burger::before,
.mnav summary .burger::after{position:absolute;left:50%;width:1.05rem;height:1.5px;
  background:var(--ink);transform:translateX(-50%)}
.mnav summary .burger{top:calc(50% - .75px)}
.mnav summary .burger::before,
.mnav summary .burger::after{content:"";left:0;transform:none}
.mnav summary .burger::before{top:-5px}
.mnav summary .burger::after{top:5px}
.mnav[open] summary{border-color:var(--accent)}
.mnav[open] summary .burger{background:transparent}
.mnav[open] summary .burger::before{top:0;transform:rotate(45deg)}
.mnav[open] summary .burger::after{top:0;transform:rotate(-45deg)}
.mpanel{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--hairline);display:grid;grid-template-rows:0fr;overflow:hidden}
.mnav[open] .mpanel{grid-template-rows:1fr}
.mpanel > nav{min-height:0;overflow:hidden}
.mnav nav ul{list-style:none;margin:0;padding:1rem var(--wrap-pad,1.25rem) 1.2rem;
  display:flex;flex-direction:column;gap:.85rem}
.mnav nav a.nav-cta{align-self:flex-start;background:var(--accent);color:#fff;padding:9px 18px}
@media (prefers-reduced-motion:no-preference){
  .mpanel{transition:grid-template-rows .26s cubic-bezier(.32,.06,.28,1)}
  .mnav summary .burger,
  .mnav summary .burger::before,
  .mnav summary .burger::after{transition:transform .22s cubic-bezier(.32,.06,.28,1),
    top .22s cubic-bezier(.32,.06,.28,1),background-color .22s ease}
}
@media(max-width:740px){.site-nav{display:none}.mnav{display:block}}
main{padding-top:1.5rem}
.hero{padding:3rem 0 1rem}
.lockup-img{display:block;width:min(22rem,80%);height:auto;margin:0 0 1rem}
.descriptor{font-family:var(--font-mono);font-size:.875rem;color:var(--grey);margin:0 0 2.2rem}
h2{margin-top:2.2em}
.hero h1,.cta h2,.panel h2,.step h2{margin-top:0}
.cta{margin:2.5rem 0}
.cta p:last-child,.panel p:last-child,.tintbox p:last-child{margin-bottom:0}
.panel{margin:2.4rem 0}
.step{border-top:2px solid var(--ink);padding-top:1.2rem;margin-top:2.4rem}
.step h2 .n{font-family:var(--font-mono);font-weight:400;color:var(--grey);margin-right:.5rem}
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.2rem}
@media(max-width:700px){.lanes{grid-template-columns:1fr}}
.lane h3{font-family:var(--font-mono);font-size:.78rem;font-weight:400;color:var(--grey);margin-bottom:.4em}
.lane p{font-size:.875rem;margin-bottom:.6em}
.chip{display:inline-block;background:var(--tint);font-weight:600;font-size:.75rem;padding:.2em .7em;margin:.2em .5em 0 0}
table{border-collapse:collapse;width:100%;font-size:.9375rem;margin:0 0 1em}
th,td{text-align:left;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--hairline);vertical-align:top}
th{font-weight:600;border-bottom:2px solid var(--ink)}
.site-footer{border-top:2px solid var(--ink);margin-top:4rem;padding:2rem 0 2.5rem}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}}
.site-footer h3{font-family:var(--font-mono);font-size:.8125rem;font-weight:400;color:var(--grey);margin-bottom:.5em}
.statutory{color:var(--grey);border-top:1px solid var(--hairline);padding-top:1rem;margin:1.75rem 0 0;max-width:none}
::selection{background:var(--accent);color:#fff}

/* Links on ink panels: white, so the quote panel's address reads. */
.panel a{color:#FFFFFF;text-decoration-color:#FFFFFF}
.panel a:hover{color:#DDE4F5}

/* Instant quote nav button */
.site-nav a.nav-cta{background:var(--accent);color:#fff;font-weight:600;padding:9px 18px}
.site-nav a.nav-cta:hover{background:var(--accent-dk);color:#fff}
.mnav nav a.nav-cta{font-weight:600}


/* ================================================================
   CONTENT LAYER
   Guidance, services, locations and tools. Was clearcdm-content.css.
   ================================================================ */
/* ---------- page furniture ---------- */
.crumbs{font-family:var(--font-mono);font-size:.75rem;color:var(--grey);margin:0 0 1.4rem}
.crumbs a{color:var(--grey);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{margin:0 .5em;color:var(--hairline)}
.kicker{font-family:var(--font-mono);font-size:.8125rem;color:var(--grey);margin:0 0 .9rem}
.lede{font-size:1.0625rem;line-height:1.55;max-width:52ch}
.narrow{max-width:38rem}

/* ---------- the answer first block ---------- */
.answer{border-top:2px solid var(--ink);border-bottom:1px solid var(--hairline);
  padding:1.1rem 0 1.2rem;margin:0 0 2rem}
.answer h2{font-family:var(--font-mono);font-size:.78rem;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin:0 0 .6rem}
.answer p{font-size:1.0625rem;line-height:1.55;margin:0 0 .7em;max-width:60ch}
.answer p:last-child{margin-bottom:0}

/* ---------- article meta and sources ---------- */
.meta{font-family:var(--font-mono);font-size:.75rem;color:var(--grey);
  border-top:1px solid var(--hairline);padding-top:.9rem;margin:2.6rem 0 0}
.meta span+span:before{content:"·";margin:0 .5em;color:var(--hairline)}
.sources{margin:2.4rem 0 0}
.sources h2{font-size:1.05rem;margin:0 0 .6em}
.sources ol{margin:0;padding-left:1.2rem;font-size:.9375rem;color:var(--grey)}
.sources li{margin:.35em 0}
.sources a{color:var(--ink)}
.sources .cite{font-family:var(--font-mono);font-size:.8125rem;color:var(--grey)}

/* ---------- related ---------- */
.related{margin:2.6rem 0 0;border-top:2px solid var(--ink);padding-top:1.2rem}
.related h2{font-size:1.05rem;margin:0 0 .7em}
.related ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:.55rem 1.6rem;font-size:.9375rem}
@media(max-width:640px){.related ul{grid-template-columns:1fr}}
.related li a{text-decoration:none;border-bottom:1px solid var(--hairline);
  display:block;padding:.35rem 0}
.related li a:hover{border-bottom-color:var(--accent)}

/* ---------- index listings ---------- */
.idx{border-top:2px solid var(--ink);margin:0 0 2.4rem}
.idx a.row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink)}
.idx a.row:hover{color:var(--accent)}
.idx a.row .t{font-weight:600;font-size:.9875rem}
.idx a.row .d{grid-column:1/-1;margin:.2rem 0 0;font-size:.875rem;color:var(--grey);max-width:70ch}
.idx a.row .tag{font-family:var(--font-mono);font-size:.6875rem;color:var(--grey);
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 2rem}
@media(max-width:640px){.cardgrid{grid-template-columns:1fr}}
.card{background:var(--tint);padding:1.25rem 1.35rem;text-decoration:none;color:var(--ink);display:block}
.card:hover{outline:2px solid var(--accent);outline-offset:-2px;color:var(--ink)}
.card b{display:block;font-weight:600;margin-bottom:.25rem}
.card p{margin:0;font-size:.9rem;color:var(--grey);line-height:1.5}

/* ---------- callouts ---------- */
.note{background:var(--tint);padding:1rem 1.25rem;margin:1.6rem 0;font-size:.9375rem}
.note p{max-width:none}
.note p:last-child{margin-bottom:0}
.note b{font-weight:600}
.rule{border-left:3px solid var(--accent);padding:.15rem 0 .15rem 1rem;margin:1.6rem 0}
/* the flag colour, per the refit: only where the site says what happens if
   nobody is appointed, or marks something as not included. Never decorative. */
.rule.flag{border-left-color:var(--flag)}
.note.flag{box-shadow:inset 3px 0 0 var(--flag)}
td.flag,.flagword{color:var(--flag)}
.rule p:last-child{margin-bottom:0}
.quotebox{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:1.1rem 0;margin:1.8rem 0}
.quotebox p{font-size:1.0625rem;line-height:1.5;margin:0 0 .5em}
.quotebox cite{font-style:normal;font-family:var(--font-mono);font-size:.78rem;color:var(--grey)}

/* ---------- buttons ---------- */
.btn-ink{display:inline-block;background:var(--ink);color:#fff;font-weight:600;
  padding:12px 24px;text-decoration:none}
.btn-ink:hover{background:#000;color:#fff}
.btn-accent{display:inline-block;background:var(--accent);color:#fff;font-weight:600;
  padding:12px 24px;text-decoration:none;white-space:nowrap}
.btn-accent:hover{background:var(--accent);filter:brightness(.86);color:#fff}
.btn-line{display:inline-block;border:1px solid var(--ink);color:var(--ink);
  font-weight:600;padding:11px 23px;text-decoration:none;background:none}
.btn-line:hover{background:var(--ink);color:#fff}
.ctarow{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin:1.4rem 0 0}
.endcta{margin:3rem 0 0;padding:1.6rem 1.75rem;background:var(--ink);color:#fff}
.endcta h2{margin:0 0 .4em;font-size:1.25rem;color:#fff}
.endcta p{color:var(--hairline);margin:0 0 1rem;max-width:56ch}
.endcta a.btn-accent{color:#fff}
.endcta .alt{color:var(--hairline);font-size:.875rem;margin:.9rem 0 0}
.endcta .alt a{color:#fff;text-decoration-color:#fff}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;margin:0 0 1.4rem}
.tblwrap table{min-width:34rem}
table.compare td:first-child{font-weight:600}
table.not-included td:first-child{color:var(--flag)}

/* ---------- figures and diagrams ---------- */
figure.dia{margin:2rem 0;border-top:1px solid var(--hairline);padding-top:1rem}
figure.dia svg{width:100%;height:auto;display:block}
figure.dia figcaption{font-size:.8125rem;color:var(--grey);margin-top:.7rem;max-width:60ch}
.dia .box{fill:var(--tint);stroke:var(--ink);stroke-width:1.5}
.dia .box-ink{fill:var(--ink);stroke:var(--ink);stroke-width:1.5}
.dia .box-acc{fill:none;stroke:var(--accent);stroke-width:2}
.dia text{font-family:'IBM Plex Sans',system-ui,Arial,sans-serif;fill:var(--ink);font-size:13px}
.dia text.on-ink{fill:#fff}
.dia text.lbl{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;fill:var(--grey)}
.dia line,.dia path.link{stroke:var(--ink);stroke-width:1.2;fill:none}
.dia path.flow{stroke:var(--accent);stroke-width:2;fill:none}

/* ---------- step lists ---------- */
/* The counter is positioned, not a grid cell. A grid put every child of the
   item in its own cell, so the paragraph wrapped into the 2rem counter column
   one word per line. Padding and an absolute counter cannot do that however
   many children an item has. */
ol.numbered{list-style:none;counter-reset:s;padding:0;margin:1.2rem 0}
ol.numbered li{counter-increment:s;position:relative;padding:.7rem 0 .7rem 2.9rem;
  border-bottom:1px solid var(--hairline)}
ol.numbered li:before{content:counter(s,decimal-leading-zero);position:absolute;
  left:0;top:.85rem;font-family:var(--font-mono);font-size:.8125rem;color:var(--grey)}
ol.numbered li p{margin:0;font-size:.9375rem;max-width:60ch}
ol.numbered li p+p{margin-top:.5em}
ol.numbered li b{display:block;font-weight:600;font-size:.9375rem;margin-bottom:.15rem}

/* ---------- tools ---------- */
.tool{max-width:44rem}
.tool fieldset{border:0;padding:0;margin:0 0 1.8rem}
.tool legend{font-weight:600;font-size:1.05rem;padding:0;margin:0 0 .3rem}
.tool .hint{font-size:.875rem;color:var(--grey);margin:0 0 .8rem;max-width:60ch}
.opts{display:flex;flex-direction:column;gap:.45rem}
.opt{display:block;width:100%;text-align:left;background:var(--tint);border:2px solid transparent;
  color:var(--ink);font-family:var(--font-sans);font-size:.9375rem;font-weight:400;
  padding:.75rem 1rem;cursor:pointer}
/* Restates background and colour, not just the border. Without them the
   element level button:hover below wins on background, because button:hover
   outranks a single class, and the label goes ink on ink. */
.opt:hover{border-color:var(--ink);background:#E6E9EE;color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:#fff;font-weight:600}
.opt .sub{display:block;font-weight:400;font-size:.8125rem;color:var(--grey);margin-top:.15rem}
.tool input[type=number],.tool input[type=text],.tool input[type=email]{
  font-family:var(--font-sans);font-size:1rem;padding:.6rem .7rem;border:1px solid var(--ink);
  background:#fff;color:var(--ink);width:100%;max-width:16rem}
.tool .row2{display:flex;gap:1rem;flex-wrap:wrap}
.result{border-top:2px solid var(--ink);padding-top:1.2rem;margin:2rem 0 0}
.result .verdict{font-size:1.25rem;font-weight:600;line-height:1.3;margin:0 0 .6em;max-width:40ch}
.result .because{font-size:.9375rem;margin:0 0 1em}
.result ul{font-size:.9375rem}
.flag{display:inline-block;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.25em .6em;margin:0 0 .8rem}
.flag.yes{background:var(--accent);color:#fff}
.flag.no{background:var(--tint);color:var(--ink)}
.flag.check{background:var(--ink);color:#fff}
.checklist{list-style:none;padding:0;margin:1rem 0}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;
  border-bottom:1px solid var(--hairline);font-size:.9375rem}
.checklist input{margin-top:.25rem;accent-color:var(--accent);width:1rem;height:1rem;flex:0 0 auto}
.checklist .why{display:block;font-size:.8125rem;color:var(--grey);margin-top:.15rem}
.score{font-family:var(--font-mono);font-size:.8125rem;color:var(--grey);margin:.9rem 0 0}
.disclaim{font-size:.8125rem;color:var(--grey);border-top:1px solid var(--hairline);
  padding-top:.9rem;margin:2.4rem 0 0;max-width:64ch}
.printonly{display:none}
@media print{.site-header,.site-footer,.crumbs,.endcta,.printonly-hide{display:none}
  .printonly{display:block}a[href]:after{content:""}}

/* ---------- location pages ---------- */
.locgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem 1.5rem;margin:1rem 0 0;
  list-style:none;padding:0;font-size:.9375rem}
@media(max-width:700px){.locgrid{grid-template-columns:1fr 1fr}}
.factrow{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid var(--hairline);font-size:.9375rem}
@media(max-width:560px){.factrow{grid-template-columns:1fr;gap:.2rem}}
.factrow dt{font-family:var(--font-mono);font-size:.78rem;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.factrow dd{margin:0}
dl.facts{margin:1.2rem 0 2rem;border-top:2px solid var(--ink)}


/* ================================================================
   AUDIENCE PAGES
   faqs, for-clients, for-architects-and-engineers, for-contractors.
   Was the same 1.8KB block repeated in the head of all four.
   ================================================================ */
.aud-hero{max-width:64rem;margin:0 auto;padding:56px 24px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media(max-width:760px){.aud-hero{grid-template-columns:1fr}}
.aud-hero .kicker{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--grey);margin:0 0 16px}
.aud-hero h1{font-size:clamp(28px,3.5vw,38px);line-height:1.15;font-weight:600;margin:0 0 16px}
.aud-hero .lede{font-size:17px;line-height:1.55;max-width:48ch;margin:0 0 24px}
.aud-hero img{width:100%;height:340px;object-fit:cover;display:block}
.trio{max-width:64rem;margin:0 auto;padding:56px 24px 0}
.trio .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:2px solid var(--ink)}
@media(max-width:760px){.trio .grid{grid-template-columns:1fr}.trio .cell{border-right:none !important;padding:22px 0 !important;border-bottom:1px solid var(--hairline)}}
.trio .cell{padding:22px}
.trio .cell:first-child{padding-left:0;border-right:1px solid var(--hairline)}
.trio .cell:nth-child(2){border-right:1px solid var(--hairline)}
.trio .cell:last-child{padding-right:0}
.trio .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grey);display:block;margin-bottom:10px}
.trio h2{font-size:18px;font-weight:600;margin:0 0 8px}
.trio p{margin:0;font-size:15px;color:var(--grey);line-height:1.55}
.aud-cta{max-width:64rem;margin:0 auto;padding:48px 24px 64px}
.aud-cta .panel{padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.aud-cta h2{font-size:20px;font-weight:600;margin:0 0 6px}
.aud-cta p{margin:0;font-size:15px;max-width:52ch}


/* ================================================================
   HOME
   Was the 4.3KB block in the head of index.html.
   ================================================================ */
/* homepage v2 (design 1b, photo-led) */
.hero{position:relative;min-height:600px;background:var(--ink);display:flex;flex-direction:column}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Refit commit 08. Four text-shadow declarations were holding the headline off
   a busy photograph, which is a symptom rather than a fix. This is a scrim: one
   gradient weighted to the corner the words actually sit in, plus the existing
   top wash for the nav. The shadows are gone. */
.hero .shade{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(20,20,19,.55),rgba(20,20,19,0) 34%),
  linear-gradient(105deg,rgba(20,20,19,.78) 0%,rgba(20,20,19,.62) 34%,rgba(20,20,19,.12) 62%,rgba(20,20,19,0) 78%)}
.hero .bar2{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:64rem;margin:0 auto;width:100%;box-sizing:border-box;padding:20px 24px}
.hero .bar2 .wordmark{font-size:20px;color:#fff;border-bottom-color:#fff}
.hero .bar2 .wm{color:#fff}
.hero nav{display:flex;gap:22px;align-items:center;font-size:15px}
.hero nav a{color:#fff;text-decoration:none}
.hero nav a.cta{background:#fff;color:var(--ink);font-weight:600;padding:9px 18px}
.hero .content{position:relative;margin-top:auto;max-width:64rem;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box;padding:0 24px 44px}
.hero .content .inner{max-width:640px;margin-left:clamp(0px,8vw,96px)}
.hero h1{color:#fff;font-size:clamp(30px,4vw,42px);line-height:1.15;font-weight:600;margin:0 0 14px}
.hero p{color:#fff;font-size:19px;line-height:1.5;margin:0 0 22px;max-width:44ch}
.doors{max-width:64rem;margin:0 auto;padding:60px 24px 0;display:flex;flex-direction:column;gap:14px}
/* The padding came from the first build's .door component in the theme, which
   this grid version never restated and therefore inherited. Kept verbatim so
   commit 02 changes nothing; a candidate to drop when the homepage is redrawn. */
.door{display:grid;grid-template-columns:1fr 320px;background:var(--tint);color:var(--ink);
  text-decoration:none;padding:1.4rem 1.5rem}
.door .txt{padding:30px 34px;display:flex;flex-direction:column;justify-content:center}
.door b{font-weight:600;font-size:22px;display:block;margin-bottom:6px}
.door p{margin:0 0 12px;font-size:15px;color:var(--grey);line-height:1.5;max-width:52ch}
.door .go{color:var(--accent);font-weight:600;font-size:15px}
.door img{width:100%;height:210px;object-fit:cover;display:block;align-self:center}
@media(max-width:700px){.door{grid-template-columns:1fr}.door img{height:200px}}
@media(max-width:700px){.hero nav{flex-wrap:wrap;gap:10px 14px;font-size:14px;justify-content:flex-end}.hero .bar2{flex-wrap:wrap}}
.twocol{max-width:64rem;margin:0 auto;padding:64px 24px 0;display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:700px){.twocol{grid-template-columns:1fr}}
.feerow{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--hairline);font-size:15px}
.feerow .amt{font-family:'IBM Plex Mono',monospace}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px}
.steps li{display:flex;gap:12px}
.steps .n{font-family:'IBM Plex Mono',monospace;color:var(--grey)}
.quote-cta{margin:64px 0 0;position:relative;background:var(--ink)}
.quote-cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.quote-cta .inner{position:relative;max-width:64rem;margin:0 auto;box-sizing:border-box;padding:64px 24px}
.quote-cta h2{color:#fff;font-size:28px;font-weight:600;margin:0 0 10px}
.quote-cta p{color:#fff;font-size:16px;line-height:1.55;max-width:54ch;margin:0 0 22px}
.strip3{max-width:64rem;margin:0 auto;padding:56px 24px 0}
.strip3 .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:2px solid var(--ink)}
.strip3 .cell{padding:22px}
.strip3 .cell:first-child{padding-left:0;border-right:1px solid var(--hairline)}
.strip3 .cell:nth-child(2){border-right:1px solid var(--hairline)}
.strip3 .cell:last-child{padding-right:0}
.strip3 h2{font-size:18px;font-weight:600;margin:0 0 8px}
.strip3 p{margin:0;font-size:15px;color:var(--grey);line-height:1.55}
.strip3 p a{color:var(--ink)}
@media(max-width:760px){.strip3 .grid{grid-template-columns:1fr}.strip3 .cell{padding:22px 0;border-right:none !important;border-bottom:1px solid var(--hairline)}}
/* The page ran band, doors, two columns, band, panel, and two of those bands
   were the same three column component. The second one keeps its words and
   loses the slab: hairline, quieter type, no tinted panel competing with the
   photography above it. */
.notes{max-width:64rem;margin:0 auto;padding:56px 24px 0}
.notes .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 2.5rem}
.notes .cell{padding:0}
.notes h2{font-size:.9375rem;font-weight:600;margin:0 0 .35rem;font-family:var(--font-sans);
  border-top:1px solid var(--hairline);padding-top:.9rem}
.notes p{margin:0;font-size:.875rem;color:var(--grey);line-height:1.55}
.notes p a{color:var(--ink)}
@media(max-width:760px){.notes .grid{grid-template-columns:1fr;gap:0}
  .notes h2{margin-top:1.2rem}}
.scen{max-width:64rem;margin:0 auto;padding:30px 24px 0;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.scen .lead{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--grey);margin:0 6px 0 0;white-space:nowrap}
.scen a{background:var(--tint);color:var(--ink);text-decoration:none;font-size:14.5px;padding:9px 16px;white-space:nowrap}
.scen a:hover{outline:2px solid var(--accent);outline-offset:-2px}


/* ================================================================
   THE QUOTE TOOL
   Was the 8.5KB block in the head of quote.html.
   ================================================================ */
/* quote tool layer */
.q-steps{font-family:var(--font-mono);font-size:12px;color:var(--grey);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 28px}
.q-steps button{font:inherit;color:inherit;background:none;border:0;cursor:default;padding:2px 8px}
.q-steps button.on{background:var(--accent);color:#fff}
.q-steps button.off{border:1px solid var(--hairline);padding:1px 7px}
.q-steps button.done{cursor:pointer}
.q-steps .q-restart{margin-left:auto;border:0;background:none;font:inherit;color:var(--grey);cursor:pointer;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--accent);padding:2px 0}
.q-grid{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.q-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.q-cards{grid-template-columns:1fr}}
.q-card{font:inherit;text-align:left;background:var(--paper);color:var(--ink);border:1px solid var(--hairline);padding:17px 19px;cursor:pointer;width:100%;display:flex;flex-direction:column;align-items:stretch}
.q-card:hover{background:var(--paper);outline:2px solid var(--accent);outline-offset:-2px}
.q-card.sel{border:2px solid var(--accent);background:#EEF2FB;padding:16px 18px}
.q-card b{font-weight:600;font-size:15px;display:block}
.q-card span{font-size:13px;color:var(--grey)}
.q-chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.q-chip{font:inherit;background:var(--paper);color:var(--ink);border:1px solid var(--hairline);padding:10px 18px;font-size:15px;cursor:pointer}
.q-chip:hover{background:var(--paper);outline:2px solid var(--accent);outline-offset:-2px}
.q-chip.sel{border:2px solid var(--accent);background:#F4F7FE;padding:9px 17px;font-weight:600}
.q-rail{border:1px solid var(--hairline);position:sticky;top:20px}
.q-rail-head{padding:22px 24px;border-bottom:1px solid var(--hairline)}
.q-rail-head .label{font-family:var(--font-mono);font-size:12px;color:var(--grey);margin:0 0 8px}
.q-rail-head .price{font-size:36px;font-weight:600;margin:0;font-family:var(--font-mono)}
.q-rail-head .price.words{font-size:20px;font-family:var(--font-sans)}
.q-lines{padding:18px 24px;border-bottom:1px solid var(--hairline);font-size:14px;display:flex;flex-direction:column;gap:8px}
.q-lines div{display:flex;justify-content:space-between;gap:12px}
.q-lines .amt{font-family:var(--font-mono);white-space:nowrap}
.q-pay{padding:18px 24px}
.q-pay .btn{display:block;width:100%;background:var(--accent);color:#fff;font-weight:600;border:0;padding:12px 0;text-align:center;font-size:15px;margin-bottom:12px;cursor:pointer;font-family:inherit}
.q-pay .btn:hover{background:var(--accent-dk)}
.q-pay .caveat{font-size:12.5px;color:var(--grey);line-height:1.5;margin:0}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:16px}
.q-back{font:inherit;background:none;border:0;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--accent);padding:0}
.q-back:hover{color:var(--accent);background:none}
h2.q{font-size:17px;font-weight:600;margin:0 0 12px;margin-top:0}
.q-section{margin:0 0 28px;padding:2px}
.q-section .hint{font-size:13px;color:var(--grey);margin:-6px 0 12px;max-width:none}
.q-section.q-missing{outline:2px solid var(--accent);outline-offset:6px}
.q-note{font-size:13.5px;color:var(--grey);margin:10px 0 0}
.q-field{margin:0 0 16px}
.q-field label{display:block;font-size:13.5px;font-weight:600;margin:0 0 6px}
.q-field label .opt{font-weight:400;color:var(--grey)}
.q-field input[type=text],.q-field input[type=email],.q-field input[type=tel],.q-field input[type=number],.q-field textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);padding:10px 12px;width:100%;border-radius:0;-webkit-appearance:none}
.q-field textarea{resize:vertical;min-height:58px}
/* the quote tool's one select. appearance:none is needed to match the
   inputs above, which strips the native arrow, so the chevron is drawn
   back on as an inline SVG rather than left to the platform. */
.q-field select{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);padding:10px 34px 10px 12px;width:100%;border-radius:0;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235D646D' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
.q-money{display:flex;align-items:stretch;max-width:280px}
.q-money .cur{display:flex;align-items:center;padding:0 12px;border:1px solid var(--hairline);border-right:0;background:var(--tint);font-family:var(--font-mono)}
.q-money input{font:inherit;font-size:15px;border:1px solid var(--hairline);padding:10px 12px;width:100%;font-family:var(--font-mono);border-radius:0;-webkit-appearance:none}
.q-months{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--grey)}
.q-months input{font:inherit;font-family:var(--font-mono);font-size:14px;border:1px solid var(--hairline);padding:6px 8px;width:74px;border-radius:0;-webkit-appearance:none}
.q-check{display:flex;gap:10px;align-items:baseline;font-size:14.5px;margin:0 0 16px}
.q-check input{width:16px;height:16px;accent-color:var(--accent);flex:none;position:relative;top:2px}
.q-quote-card{border:2px solid var(--ink);padding:26px 28px;margin:0 0 24px}
.q-quote-card .bigprice{font-size:44px;font-weight:600;font-family:var(--font-mono);margin:0;line-height:1.1}
.q-quote-card .subprice{font-size:14px;color:var(--grey);margin:4px 0 18px}
.q-qlines{font-size:14.5px;margin:0 0 18px}
.q-qlines div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--hairline)}
.q-qlines .amt{font-family:var(--font-mono);white-space:nowrap}
.q-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:20px 0 0}
.q-secondary{font:inherit;background:none;border:1px solid var(--ink);color:var(--ink);font-weight:600;font-size:.95rem;padding:.7em 1.3em;cursor:pointer}
.q-secondary:hover{background:var(--tint)}
.q-receipt{font-family:var(--font-mono);font-size:12.5px;color:var(--grey);margin:10px 0 0}
.q-receipt.ok{color:var(--ink)}
.q-drow{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--hairline);padding:14px 0 4px;margin-top:10px}
@media(max-width:560px){.q-drow{grid-template-columns:1fr}}
.q-add{font:inherit;background:none;border:0;color:var(--ink);cursor:pointer;padding:0;font-size:14px;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--accent)}
.q-add:hover{color:var(--accent);background:none}
.q-paybox{background:var(--tint);padding:22px 24px;margin:0 0 30px}
.q-paybox .btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;border:0;padding:12px 26px;font-size:15px;cursor:pointer;font-family:inherit;margin:2px 0 12px}
.q-paybox .btn:hover{background:var(--accent-dk)}
.q-manual{margin-top:16px;border-top:1px solid var(--hairline);padding-top:14px}
.q-manual textarea{font-family:var(--font-mono);font-size:12px;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);padding:10px 12px;width:100%;min-height:150px;border-radius:0;-webkit-appearance:none}
.q-qlines .tot{font-weight:600;border-bottom:0;border-top:1px solid var(--ink)}
.q-card .q-rec,.q-rec{display:block;white-space:nowrap;text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:#fff;padding:6px 7px;margin:12px -19px -17px}
.q-card .q-rec{margin-top:auto}
.q-card:has(.q-rec) span:not(.q-rec){padding-bottom:12px}
.q-card.sel .q-rec{margin-left:-18px;margin-right:-18px;margin-bottom:-16px}
.svc-wrap{overflow-x:auto;margin-top:14px}
.svc-table{width:100%;border-collapse:collapse;font-size:13px;min-width:430px}
.svc-table th,.svc-table td{padding:7px 10px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.svc-table th{font-family:var(--font-mono);font-size:11.5px;color:var(--grey);font-weight:600}
.svc-table td:first-child{color:var(--grey)}
.svc-table th+th,.svc-table td+td{width:24%}
.svc-table[data-hl=precon] th:nth-child(2),.svc-table[data-hl=precon] td:nth-child(2),
.svc-table[data-hl=both] th:nth-child(3),.svc-table[data-hl=both] td:nth-child(3){border-left:2px solid var(--accent);border-right:2px solid var(--accent);background:#F4F7FE}
.svc-table[data-hl=precon] thead th:nth-child(2),.svc-table[data-hl=both] thead th:nth-child(3){border-top:2px solid var(--accent)}
.svc-table[data-hl=precon] tbody tr:last-child td:nth-child(2),.svc-table[data-hl=both] tbody tr:last-child td:nth-child(3){border-bottom:2px solid var(--accent)}
#printQuote{display:none}
@media print{
  body>*{display:none!important}
  body>#printQuote{display:block!important}
  #printQuote{font-family:'IBM Plex Sans',sans-serif;color:var(--ink)}
  #printQuote .q-actions,#printQuote .q-receipt{display:none}
}
@media(max-width:860px){
  .q-grid{grid-template-columns:1fr}
  .q-rail{position:static}
}


/* ================================================================
   THE PRACTICE GUIDE
   Screen and print rules for architect-guide.html.
   ================================================================ */
.guide h2{margin-top:2.2rem;border-top:2px solid var(--ink);padding-top:1rem}
.guide h3{margin-top:1.6rem;font-size:1rem}
.guide .no{font-family:var(--font-mono);font-size:.8125rem;color:var(--grey);display:block}
.guide p,.guide li{max-width:64ch}
.guide-cover{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:2rem 0 2.2rem;margin:0 0 2rem}
.guide-cover h1{font-size:1.9rem;margin:0 0 .5rem;max-width:22ch}
.guide-cover p{margin:0 0 .4rem}
@media print{
  @page{size:A4;margin:16mm 15mm}
  html{font-size:13px}
  body{font-size:10pt;line-height:1.42}
  .wrap{max-width:none !important;padding:0 !important}
  main{padding-top:0}
  .guide p,.guide li{max-width:none}
  .guide h1{font-size:20pt}
  .guide h2{font-size:12.5pt;margin-top:14pt;padding-top:6pt}
  .guide h3{font-size:10.5pt;margin-top:10pt}
  .guide p,.guide ul,.guide ol,.guide table{margin-bottom:7pt}
  .guide table{font-size:9pt}
  .guide h2,.guide h3{page-break-after:avoid;break-after:avoid}
  .guide table,.guide ol,.guide ul,.guide blockquote{page-break-inside:avoid;break-inside:avoid}
  ol.numbered li{padding:3pt 0}
  .guide-cover{padding:0 0 12pt;margin-bottom:12pt;border-top:none}
  .crumbs,.endcta,.printonly-hide,.site-header,.site-footer,.skip{display:none !important}
  .tblwrap{overflow:visible}
  .tblwrap table{min-width:0}
  a{text-decoration:none;color:var(--ink)}
}


/* ---- motion, refit commit 04 -------------------------------------------
   All CSS, all inside the reduced-motion query, no script and no third party
   request. A visitor who asks for reduced motion gets exactly the site they
   get today. Safari and Firefox have no view transitions yet and navigate
   normally, with nothing missing. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation-duration:.34s;
    animation-timing-function:cubic-bezier(.32,.06,.28,1)}
  /* the header is the same header on both pages, so it holds still */
  .site-header .bar{view-transition-name:site-header}

  /* growing underlines. A gradient background rather than text-decoration,
     because background-size animates in Safari and text-decoration does not */
  .site-nav a:not(.nav-cta),
  .mnav nav a:not(.nav-cta),
  .site-footer a{
    background-image:linear-gradient(var(--accent),var(--accent));
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 1px;
    transition:background-size .22s cubic-bezier(.32,.06,.28,1)}
  .site-nav a:not(.nav-cta):hover,
  .site-nav a:not(.nav-cta):focus-visible,
  .mnav nav a:not(.nav-cta):hover,
  .site-footer a:hover,
  .site-footer a:focus-visible{background-size:100% 1px}
  .site-footer a{text-decoration:none}

  /* the doors used to snap an outline on in a single frame */
  .door,.card{transition:outline-color .18s ease, background-color .18s ease}
  .door,.card{outline:2px solid transparent;outline-offset:-2px}
  .door:hover,.card:hover{outline-color:var(--accent)}

  .btn-accent,.btn-ink,.btn-line,button,.button{transition:background-color .18s ease,color .18s ease,filter .18s ease}
}

/* ---- the quote tool, refit commit 06 -----------------------------------
   The only page where motion changes revenue rather than impression, so
   every rule here sits inside the reduced-motion query except the two that
   are about legibility rather than movement. */
.q-rail{position:sticky;top:1.25rem}
.q-rail .price{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
@media (prefers-reduced-motion:no-preference){
  .q-steps button{transition:background-color .22s cubic-bezier(.32,.06,.28,1),
    color .22s cubic-bezier(.32,.06,.28,1),border-color .22s ease}
  .q-in{animation:qin .28s cubic-bezier(.32,.06,.28,1) both}
  @keyframes qin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* choosing a card is a short calm confirmation, not a bounce. This is a
     page about being careful. */
  .q-cards button,.q-chips button{transition:border-color .18s ease,background-color .18s ease}
  .q-cards button.sel,.q-chips button.sel{animation:qsel .3s cubic-bezier(.32,.06,.28,1)}
  @keyframes qsel{0%{box-shadow:0 0 0 0 rgba(27,63,160,.28)}100%{box-shadow:0 0 0 6px rgba(27,63,160,0)}}
  #sendBtn{transition:background-color .18s ease,opacity .18s ease}
}
#sendBtn.q-working{opacity:.72;cursor:progress}
#sendBtn.q-working::after{content:"";display:inline-block;width:.55em;height:.55em;
  margin-left:.5em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;vertical-align:-1px;animation:qspin .7s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#sendBtn.q-working::after{animation:none}}
#sendBtn.q-done{opacity:1}

/* ---- the opening, refit commit 07 --------------------------------------
   Two outs. display:none under prefers-reduced-motion:reduce, and the cover
   is transparent until the run class lands, so a visitor with no JavaScript
   never meets it. The failsafe clears it after its longest possible run
   whether or not the script fires. */
.cover{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0}
.cover svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cover .lw{font-family:'IBM Plex Sans',system-ui,Arial,sans-serif;font-size:clamp(34px,7vw,84px)}
.cover .lw .l{font-weight:300}
.cover .lw .b{font-weight:600}
.cover .lgrp{transform-box:view-box;transform-origin:50% 50%}
.cover .lw{opacity:0}
.cover .lr{transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(0)}
.cover .lc{transform-box:view-box;transform-origin:50% 50%;transform:scale(0)}
.cover.run{opacity:1;animation:cvout .18s linear 1.54s both}
.cover.run .lw{animation:cvword .55s cubic-bezier(.32,.06,.28,1) .10s both}
.cover.run .lr{animation:cvrule .30s cubic-bezier(.32,.06,.28,1) .62s both}
.cover.run .lgrp{animation:cvscale .60s cubic-bezier(.55,0,.85,.35) .95s both}
.cover.run .lc{animation:cvcirc .62s cubic-bezier(.55,0,.85,.35) 1.10s both}
@keyframes cvword{from{opacity:0}to{opacity:1}}
@keyframes cvrule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cvscale{from{transform:scale(1)}to{transform:scale(26)}}
@keyframes cvcirc{from{transform:scale(0)}to{transform:scale(120)}}
@keyframes cvout{to{opacity:0;visibility:hidden}}
/* The hero copy is white on a photograph, and while the lockup is still a
   hole in the panel the two read on top of each other. It waits, then fades in
   once the lockup has started expanding. The class is only ever added by the
   same script that runs the cover, and the animation fills both ways, so a
   visitor who never sees the opening never sees this either. */
html.opening .hero .content{animation:heroin .5s cubic-bezier(.32,.06,.28,1) 1.15s both}
@keyframes heroin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cover{display:none}
  html.opening .hero .content{animation:none}}